diff --git a/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Admin/Product/ProductCatalog.razor b/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Admin/Product/ProductCatalog.razor index c048bcfb..024ab142 100644 --- a/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Admin/Product/ProductCatalog.razor +++ b/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Admin/Product/ProductCatalog.razor @@ -1,11 +1,12 @@ @page "/admin/products" @layout AdminLayout @inherits AdminBase +@inject PosDataService DataService +@using WebClientTpos.Client.Services @* - EN: Product catalog — grid/list view of all products with categories & search. - VI: Danh mục sản phẩm — hiển thị dạng grid/list, danh mục & tìm kiếm. - Design: pencil-design/src/pages/tPOS/admin/product-catalog.pen + EN: Product catalog — grid view with real data from catalog-service via BFF. + VI: Danh mục sản phẩm — grid view, dữ liệu thực từ catalog-service qua BFF. *@ Sản phẩm — GoodGo Admin @@ -14,17 +15,21 @@

Sản phẩm & Menu

-

@_products.Count sản phẩm • Tất cả cửa hàng

+

@_products.Count sản phẩm @(_selectedShopId.HasValue ? $"• {_shopName}" : "• Tất cả cửa hàng")

- +
- + @* ── Shop filter dropdown ── *@ + - - - - + @foreach (var cat in _categoryNames) + { + + }
-@* ═══ PRODUCT GRID ═══ *@ -
- @foreach (var prod in _products) +@* ═══ CONTENT ═══ *@ +
+ + @if (IsLoading) { -
-
- +
+ +

Đang tải sản phẩm...

+
+ } + else if (!FilteredProducts.Any()) + { +
+
+
-
-
-
-
@prod.Name
-
@prod.Category
+

Chưa có sản phẩm nào

+

Thêm sản phẩm đầu tiên để bắt đầu bán hàng

+ +
+ } + else + { + @* ── Product Grid ── *@ +
+ @foreach (var prod in FilteredProducts) + { +
+
+
-
- - @(prod.Available ? "Có" : "Hết") +
+
+
+
@prod.Name
+
@(prod.CategoryName ?? "Không phân loại")
+
+
+ + @(prod.IsActive ? "Có" : "Hết") +
+
+
+ @FormatPrice(prod.Price) + @if (!string.IsNullOrEmpty(prod.Sku)) + { + SKU: @prod.Sku + } +
-
- @prod.Price - Đã bán: @prod.Sold -
-
+ }
}
@code { private string _category = "all"; + private string _searchQuery = ""; + private Guid? _selectedShopId; + private string _shopName = ""; + private List _products = new(); + private List _shops = new(); + private List _categoryNames = new(); - private record ProductItem(string Name, string Category, string Price, string Sold, string Icon, string IconColor, string BgColor, bool Available); - private readonly List _products = new() + // EN: Filtered products by category and search query. + // VI: Sản phẩm đã lọc theo danh mục và từ khóa tìm kiếm. + private IEnumerable FilteredProducts => _products + .Where(p => _category == "all" || (p.CategoryName ?? "Khác") == _category) + .Where(p => string.IsNullOrEmpty(_searchQuery) || + p.Name.Contains(_searchQuery, StringComparison.OrdinalIgnoreCase) || + (p.Sku ?? "").Contains(_searchQuery, StringComparison.OrdinalIgnoreCase)); + + protected override async Task OnInitializedAsync() { - new("Espresso", "Cà phê", "35K", "1,024", "coffee", "#FF5C00", "rgba(255,92,0,0.08)", true), - new("Cappuccino", "Cà phê", "45K", "856", "coffee", "#FF5C00", "rgba(255,92,0,0.08)", true), - new("Latte", "Cà phê", "49K", "742", "coffee", "#FF5C00", "rgba(255,92,0,0.08)", true), - new("Americano", "Cà phê", "39K", "631", "coffee", "#FF5C00", "rgba(255,92,0,0.08)", true), - new("Trà sen vàng", "Trà", "42K", "520", "leaf", "#22C55E", "rgba(34,197,94,0.08)", true), - new("Trà đào", "Trà", "39K", "488", "leaf", "#22C55E", "rgba(34,197,94,0.08)", true), - new("Croissant", "Đồ ăn", "35K", "312", "croissant", "#F59E0B", "rgba(245,158,11,0.08)", true), - new("Bánh mì", "Đồ ăn", "28K", "245", "sandwich", "#F59E0B", "rgba(245,158,11,0.08)", false), - new("Matcha Latte", "Cà phê", "52K", "398", "coffee", "#22C55E", "rgba(34,197,94,0.08)", true), - new("Soda chanh", "Khác", "32K", "188", "glass-water", "#3B82F6", "rgba(59,130,246,0.08)", true), + IsLoading = true; + try + { + _shops = await DataService.GetShopsAsync(); + _products = await DataService.GetAllProductsAsync(_selectedShopId); + BuildCategoryTabs(); + } + catch { } + finally { IsLoading = false; } + } + + private async Task OnShopFilterChanged(ChangeEventArgs e) + { + var val = e.Value?.ToString(); + _selectedShopId = Guid.TryParse(val, out var id) ? id : null; + _shopName = _shops.FirstOrDefault(s => s.Id == _selectedShopId)?.Name ?? ""; + IsLoading = true; + try + { + _products = await DataService.GetAllProductsAsync(_selectedShopId); + BuildCategoryTabs(); + _category = "all"; + } + catch { } + finally { IsLoading = false; } + } + + private void BuildCategoryTabs() + { + _categoryNames = _products + .Select(p => p.CategoryName ?? "Khác") + .Distinct() + .OrderBy(c => c) + .ToList(); + } + + // EN: Format price with K suffix / VI: Format giá với hậu tố K + private static string FormatPrice(decimal price) => + price >= 1000 ? $"{price / 1000:0.#}K" : $"{price:N0}đ"; + + private static string GetTypeIcon(string? type) => type?.ToLowerInvariant() switch + { + "preparedfood" => "coffee", + "physical" => "package", + "service" => "sparkles", + _ => "package" + }; + + private static string GetTypeColor(string? type) => type?.ToLowerInvariant() switch + { + "preparedfood" => "#FF5C00", + "physical" => "#3B82F6", + "service" => "#8B5CF6", + _ => "#FF5C00" + }; + + private static string GetTypeBgColor(string? type) => type?.ToLowerInvariant() switch + { + "preparedfood" => "rgba(255,92,0,0.08)", + "physical" => "rgba(59,130,246,0.08)", + "service" => "rgba(139,92,246,0.08)", + _ => "rgba(255,92,0,0.08)" }; } diff --git a/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Admin/Product/ProductCreate.razor b/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Admin/Product/ProductCreate.razor index 7132986c..00218ae2 100644 --- a/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Admin/Product/ProductCreate.razor +++ b/apps/web-client-tpos-net/src/WebClientTpos.Client/Pages/Admin/Product/ProductCreate.razor @@ -1,11 +1,12 @@ @page "/admin/products/create" @layout AdminLayout @inherits AdminBase +@inject PosDataService DataService +@using WebClientTpos.Client.Services @* - EN: Create product — form with name, price, variants, modifiers, image. - VI: Thêm sản phẩm — form tên, giá, biến thể, modifier, hình ảnh. - Design: pencil-design/src/pages/tPOS/admin/product-create.pen + EN: Create product — form with real API submission via BFF. + VI: Thêm sản phẩm — form gửi dữ liệu thực qua BFF. *@ Thêm sản phẩm — GoodGo Admin @@ -23,9 +24,16 @@
-
@@ -36,6 +44,17 @@ @* LEFT: Main form *@
+ @* Success/Error messages *@ + @if (!string.IsNullOrEmpty(_message)) + { +
+
+ + @_message +
+
+ } + @* Basic Info *@
@@ -45,107 +64,63 @@
+
+ + +
- +
- - + + +
- +
- +
- @* Pricing & Variants *@ + @* Pricing *@

- Giá & Biến thể + Giá bán

-
+
- +
-
- - -
-
- - -
-
- - @* Variants *@ -
-
- Biến thể kích thước - -
-
- @foreach (var variant in new[] { ("S", "35,000"), ("M", "45,000"), ("L", "55,000") }) - { -
- - - -
- } -
-
-
-
- - @* Modifier Groups *@ -
-
-

- - Nhóm modifier -

- Quản lý nhóm → -
-
-
- @foreach (var mod in new[] { ("Đường", true), ("Đá", true), ("Topping", false), ("Sữa", false) }) - { - - }
- @* RIGHT: Image & Preview *@ + @* RIGHT: Image & Shop *@
- @* Image Upload *@ + @* Image Upload (placeholder) *@

Hình ảnh

@@ -159,20 +134,108 @@
- @* Availability *@ -
-
-

Cửa hàng áp dụng

+ @* Quick preview *@ + @if (!string.IsNullOrEmpty(_name)) + { +
+
+

+ + Xem trước +

+
+
+
+
+ +
+
+
@_name
+
@GetTypeLabel(_type)
+
@FormatPrice(_price)
+
+
+
-
- @foreach (var store in new[] { ("Coffee House Q1", true), ("Nhà hàng Q3", true), ("Café Thủ Đức", false) }) - { - - } -
-
+ }
+ +@code { + private string _shopId = ""; + private string _name = ""; + private string _description = ""; + private decimal _price; + private string _type = "PreparedFood"; + private string _sku = ""; + private string _message = ""; + private bool _isSuccess; + private bool _isSaving; + private List _shops = new(); + + protected override async Task OnInitializedAsync() + { + try { _shops = await DataService.GetShopsAsync(); } + catch { } + } + + private async Task HandleSubmit() + { + _message = ""; + + // EN: Validate required fields / VI: Kiểm tra trường bắt buộc + if (string.IsNullOrWhiteSpace(_shopId) || !Guid.TryParse(_shopId, out var shopId)) + { _message = "Vui lòng chọn cửa hàng."; _isSuccess = false; return; } + if (string.IsNullOrWhiteSpace(_name)) + { _message = "Vui lòng nhập tên sản phẩm."; _isSuccess = false; return; } + if (_price <= 0) + { _message = "Giá bán phải lớn hơn 0."; _isSuccess = false; return; } + + _isSaving = true; + try + { + var req = new PosDataService.CreateProductRequest( + shopId, _name.Trim(), _description.Trim(), _price, + _type, string.IsNullOrWhiteSpace(_sku) ? null : _sku.Trim(), null); + + var ok = await DataService.CreateProductAsync(req); + if (ok) + { + _message = $"Đã tạo sản phẩm \"{_name}\" thành công!"; + _isSuccess = true; + // Reset form + _name = ""; _description = ""; _price = 0; _sku = ""; + } + else + { + _message = "Không thể tạo sản phẩm. Vui lòng thử lại."; + _isSuccess = false; + } + } + catch (Exception ex) + { + _message = $"Lỗi: {ex.Message}"; + _isSuccess = false; + } + finally { _isSaving = false; } + } + + private static string FormatPrice(decimal price) => + price >= 1000 ? $"{price / 1000:0.#}K" : price > 0 ? $"{price:N0}đ" : "--"; + + private static string GetTypeIcon(string? type) => type switch + { + "PreparedFood" => "coffee", + "Physical" => "package", + "Service" => "sparkles", + _ => "package" + }; + + private static string GetTypeLabel(string? type) => type switch + { + "PreparedFood" => "Đồ ăn/uống", + "Physical" => "Hàng hóa", + "Service" => "Dịch vụ", + _ => "Sản phẩm" + }; +} diff --git a/apps/web-client-tpos-net/src/WebClientTpos.Client/Services/PosDataService.cs b/apps/web-client-tpos-net/src/WebClientTpos.Client/Services/PosDataService.cs index 5abb0e3a..d1348427 100644 --- a/apps/web-client-tpos-net/src/WebClientTpos.Client/Services/PosDataService.cs +++ b/apps/web-client-tpos-net/src/WebClientTpos.Client/Services/PosDataService.cs @@ -43,4 +43,39 @@ public class PosDataService public async Task> GetStaffAsync() => await _http.GetFromJsonAsync>("api/bff/staff", _jsonOptions) ?? new(); + + // ═══ ADMIN-LEVEL PRODUCT/CATEGORY METHODS ═══ + + // EN: Admin-level records with shop_id and category info + // VI: Record cấp admin với shop_id và thông tin danh mục + public record AdminProductInfo(Guid Id, string Name, decimal Price, string? Sku, string? Description, + string? ImageUrl, bool IsActive, string? Type, Guid ShopId, DateTime CreatedAt, string? CategoryName); + public record AdminCategoryInfo(Guid Id, string Name, string? Description, int DisplayOrder, + Guid ShopId, Guid? ParentId, bool IsActive); + public record CreateProductRequest(Guid ShopId, string Name, string? Description, decimal Price, + string? Type, string? Sku, string? ImageUrl); + + public async Task> GetAllProductsAsync(Guid? shopId = null) + { + var url = shopId.HasValue ? $"api/bff/products?shopId={shopId}" : "api/bff/products"; + return await _http.GetFromJsonAsync>(url, _jsonOptions) ?? new(); + } + + public async Task> GetAllCategoriesAsync(Guid? shopId = null) + { + var url = shopId.HasValue ? $"api/bff/categories?shopId={shopId}" : "api/bff/categories"; + return await _http.GetFromJsonAsync>(url, _jsonOptions) ?? new(); + } + + public async Task CreateProductAsync(CreateProductRequest req) + { + var resp = await _http.PostAsJsonAsync("api/bff/products", req, _jsonOptions); + return resp.IsSuccessStatusCode; + } + + public async Task DeleteProductAsync(Guid productId) + { + var resp = await _http.DeleteAsync($"api/bff/products/{productId}"); + return resp.IsSuccessStatusCode; + } } diff --git a/apps/web-client-tpos-net/src/WebClientTpos.Server/Controllers/BffDataController.cs b/apps/web-client-tpos-net/src/WebClientTpos.Server/Controllers/BffDataController.cs index 4c7b4b8a..be962db9 100644 --- a/apps/web-client-tpos-net/src/WebClientTpos.Server/Controllers/BffDataController.cs +++ b/apps/web-client-tpos-net/src/WebClientTpos.Server/Controllers/BffDataController.cs @@ -149,4 +149,85 @@ public class BffDataController : ControllerBase new { ShopId = shopId }); return Ok(resources); } + + // ═══ ADMIN-LEVEL PRODUCT ENDPOINTS ═══ + + /// + /// EN: Get all products across all shops (admin level). + /// VI: Lấy tất cả sản phẩm trên tất cả cửa hàng (cấp admin). + /// + [HttpGet("products")] + public async Task GetAllProducts([FromQuery] Guid? shopId = null) + { + await using var conn = new NpgsqlConnection(ConnStr("catalog_service")); + var sql = @"SELECT p.id, p.name, p.price, p.sku, p.description, p.image_url, + p.is_active, pt.name as type, p.shop_id, p.created_at, + '' as category_name + FROM products p + JOIN product_types pt ON p.type_id = pt.id"; + if (shopId.HasValue) + sql += " WHERE p.shop_id = @ShopId"; + sql += " ORDER BY p.name"; + var products = await conn.QueryAsync(sql, new { ShopId = shopId }); + return Ok(products); + } + + /// + /// EN: Get all categories across all shops (admin level). + /// VI: Lấy tất cả danh mục trên tất cả cửa hàng (cấp admin). + /// + [HttpGet("categories")] + public async Task GetAllCategories([FromQuery] Guid? shopId = null) + { + await using var conn = new NpgsqlConnection(ConnStr("catalog_service")); + var sql = @"SELECT id, name, description, display_order, shop_id, parent_id, is_active + FROM categories WHERE is_active = true"; + if (shopId.HasValue) + sql += " AND shop_id = @ShopId"; + sql += " ORDER BY display_order, name"; + var categories = await conn.QueryAsync(sql, new { ShopId = shopId }); + return Ok(categories); + } + + /// + /// EN: Create a product via BFF (writes directly to catalog DB). + /// VI: Tạo sản phẩm qua BFF (ghi trực tiếp vào catalog DB). + /// + [HttpPost("products")] + public async Task CreateProduct([FromBody] CreateProductRequest req) + { + var id = Guid.NewGuid(); + // EN: Map type string to type_id / VI: Chuyển type string sang type_id + var typeId = (req.Type ?? "PreparedFood") switch + { + "Physical" => 1, + "Service" => 2, + "PreparedFood" => 3, + _ => 3 + }; + await using var conn = new NpgsqlConnection(ConnStr("catalog_service")); + await conn.ExecuteAsync( + @"INSERT INTO products (id, shop_id, name, description, price, type_id, sku, image_url, is_active, created_at) + VALUES (@Id, @ShopId, @Name, @Description, @Price, @TypeId, @Sku, @ImageUrl, true, NOW())", + new { Id = id, req.ShopId, req.Name, req.Description, req.Price, TypeId = typeId, req.Sku, req.ImageUrl }); + return CreatedAtAction(nameof(GetAllProducts), new { }, new { id }); + } + + /// + /// EN: Delete (deactivate) a product. + /// VI: Xóa (vô hiệu hóa) sản phẩm. + /// + [HttpDelete("products/{productId:guid}")] + public async Task DeleteProduct(Guid productId) + { + await using var conn = new NpgsqlConnection(ConnStr("catalog_service")); + await conn.ExecuteAsync( + "UPDATE products SET is_active = false WHERE id = @Id", + new { Id = productId }); + return NoContent(); + } + + // EN: Request DTOs / VI: DTO yêu cầu + public record CreateProductRequest(Guid ShopId, string Name, string? Description, decimal Price, string? Type, string? Sku, string? ImageUrl); } + diff --git a/pencil-design/USAGE_GUIDE.md b/pencil-design/USAGE_GUIDE.md deleted file mode 100644 index c6455c15..00000000 --- a/pencil-design/USAGE_GUIDE.md +++ /dev/null @@ -1,243 +0,0 @@ -# tPOS Design System - Usage Guide - -## 📁 File Structure - -``` -pencil-design/ -├── src/ -│ ├── foundations/ # Design Tokens -│ ├── atoms/ # Atomic Components -│ ├── molecules/ # Molecule Components -│ └── organisms/ # Organism Components -├── components/ -│ └── tPOS-ui-kit.pen # Legacy Component Library -├── pages/ -│ ├── tPOS-desktop-home.pen # Desktop Page -│ ├── tPOS-mobile-home.pen # Mobile Page -│ └── tPOS-tablet-home.pen # Tablet Page -└── tPOS.pen.backup # Original backup -``` - -## 🎨 Component Library - -### File: `components/tPOS-ui-kit.pen` - -**Contains**: -- ✅ All design variables (colors, typography) -- ✅ 7 organized component sections: - 1. **Buttons & Actions** - Primary/Secondary buttons with/without icons - 2. **Badges & Labels** - Section labels, hero badges, chips - 3. **Cards** - Feature, Industry, Step, Pricing cards - 4. **Navigation** - Desktop & Mobile navbars - 5. **Typography & Branding** - Logo, headers, nav links - 6. **Utilities** - Check items, dividers, social icons, stats - 7. **Footer Components** - Footer columns (Products, Industries, Support) - -**How to Use**: -1. Open `tPOS-ui-kit.pen` in Pencil -2. Browse components in the "aPOS Component Library" page -3. Copy components you need -4. Paste into your page designs - ---- - -## 📄 Page Files - -### Desktop Page - `pages/tPOS-desktop-home.pen` -- **Breakpoint**: 1440px -- **Sections**: Header, Hero, Features (6 cards), Industries, Steps (3), Pricing (3 plans), Footer -- **Layout**: Full-width desktop design with multi-column grids - -### Mobile Page - `pages/tPOS-mobile-home.pen` -- **Breakpoint**: 390px -- **Sections**: Mobile header, Hero, Features (stacked), Industries (mobile grid), Steps (vertical), Pricing (swipeable), Mobile footer -- **Layout**: Single-column, touch-optimized - -### Tablet Page - `pages/tPOS-tablet-home.pen` -- **Breakpoint**: 768px -- **Sections**: Tablet header, Hero, Features (2-column), Industries (tablet grid), Steps (hybrid), Pricing (2-up), Tablet footer -- **Layout**: 2-column responsive grid - ---- - -## 🎨 Design Variables - -All files include these color tokens: - -| Variable | Value | Usage | -|----------|-------|-------| -| `$bg-page` | `#0A0A0B` | Page background | -| `$bg-surface` | `#111113` | Card backgrounds | -| `$bg-elevated` | `#1A1A1D` | Elevated surfaces | -| `$bg-interactive` | `#2A2A2E` | Hover states | -| `$orange-primary` | `#FF5C00` | Primary brand color | -| `$orange-light` | `#FF8A4C` | Light accent | -| `$green-success` | `#22C55E` | Success states | -| `$text-primary` | `#FFFFFF` | Primary text | -| `$text-secondary` | `#ADADB0` | Secondary text | -| `$text-tertiary` | `#8B8B90` | Tertiary text | -| `$text-muted` | `#FFFFFFCC` | Muted text (80% opacity) | -| `$text-disabled` | `#6B6B70` | Disabled text | -| `$border-default` | `#2A2A2E` | Default borders | -| `$border-subtle` | `#1F1F23` | Subtle borders | - ---- - -## 🔄 Workflow - -### Creating New Pages - -1. **Start with Component Library** - ``` - Open: components/tPOS-ui-kit.pen - ``` - -2. **Copy Base Components** - - Select components you need - - Copy to clipboard - -3. **Create New Page** - - Open target page file (desktop/mobile/tablet) - - Paste components - - Arrange layout - -4. **Maintain Consistency** - - Always reference `tPOS-ui-kit.pen` for latest components - - Use design variable names (e.g., `$orange-primary`) instead of hex codes - - Keep component IDs unique across pages - -### Updating Components - -> [!IMPORTANT] -> **Current Limitation**: Pencil doesn't support external file references. Components are **copied** into page files, not linked. - -**To update a component globally**: -1. Update in `components/tPOS-ui-kit.pen` -2. Manually copy updated component -3. Replace in each page file where used - -**Future Enhancement**: When Pencil adds cross-file linking, components will auto-update. - ---- - -## 📊 File Size Comparison - -| Metric | Before (Monolith) | After (Split) | Improvement | -|--------|-------------------|---------------|-------------| -| Largest file | 9,118 lines (328KB) | 3,181 lines (118KB) | **64% smaller** | -| Load time | ~2-3 seconds | ~0.5-1 second | **3x faster** | -| Maintainability | Low (duplicate components) | High (single source) | ✅ | -| Collaboration | Hard (merge conflicts) | Easy (separate files) | ✅ | - ---- - -## ✅ Benefits - -✓ **Performance**: Each file 3-4x smaller, loads faster -✓ **Maintainability**: Component library as single source of truth -✓ **Collaboration**: Multiple designers work on different pages -✓ **Reusability**: Component library for new projects -✓ **Version Control**: Clear Git diffs -✓ **Scalability**: Easy to add pages/components - ---- - -## 🚀 Next Steps - -1. **Review Pages**: Open each page file in Pencil to verify -2. **Test Components**: Ensure all components render correctly -3. **Share with Team**: Distribute usage guide to designers -4. **Version Control**: Commit new structure to Git -5. **Archive Original**: Keep `tPOS.pen.backup` as reference - ---- - -## 💡 Tips - -- **Keep component library updated**: Always update `tPOS-ui-kit.pen` first before pages -- **Use design tokens**: Reference variables like `$bg-page` instead of `#0A0A0B` -- **Document changes**: Update this guide when adding new components -- **Backup regularly**: Keep versioned backups before major changes -- **Test responsive**: Verify designs across all breakpoints - ---- - -**Questions?** Reference the original `implementation_plan.md` in the brain directory. - ---- - -## Build System - -### Quick Start - -```bash -# Build monolithic file (merge all pages) -python3 scripts/build.py --monolithic - -# Output: tPOS.pen (326KB, 4 frames) -``` - -### Build Modes - -**1. Monolithic Build** ⭐ (Recommended) -```bash -python3 scripts/build.py --monolithic -# or -python3 scripts/build.py -m -``` - -**Output:** -- File: `tPOS.pen` (project root) -- Contains: Desktop + Mobile + Tablet + Component Library -- Use: Open complete design in Pencil, share, archive - -**2. Standard Build** (Component Linking) -```bash -python3 scripts/build.py -``` - -**Output:** -- Directory: `build/` -- Files: Individual pages with injected components -- Use: Development workflow, testing component refs - -### Configuration - -Edit `pencil.config.json`: -- `componentLibrary`: Path to ui-kit.pen -- `sourceDir`: Source pages directory -- `buildDir`: Output for standard build - -### Help - - ```bash - python3 scripts/build.py --help - ``` - - ## ⚛️ Atomic Design (New) - - The project now supports Atomic Design structure for better scalability. - - ### Structure - - **Foundations**: Design tokens/variables (`src/foundations/`) - - **Atoms**: Basic components like buttons, inputs (`src/atoms/`) - - **Molecules**: Compound components like search bars (`src/molecules/`) - - **Organisms**: Complex sections like headers, cards (`src/organisms/`) - - ### Workflow - - 1. **Edit Atomic Components**: Update files in `src/atoms/...`, `src/molecules/...`, etc. - 2. **Build Library**: Run `python3 scripts/build.py --library`. This compiles all atomic components into `src/components/tPOS-ui-kit.pen`. - 3. **Design Pages**: Open your page files (e.g., `src/pages/desktop.pen`) in Pencil. They reference components from `tPOS-ui-kit.pen`. - 4. **Build Monolith**: Run `python3 scripts/build.py --monolithic`. This merges pages and the library into the final `tPOS.pen` for sharing/verification. - - ### Build Commands - - ```bash - # Step 2: Build Component Library - python3 scripts/build.py --library - - # Step 4: Build Monolithic File - python3 scripts/build.py --monolithic - ``` -``` diff --git a/pencil-design/docs/admin-workflow-guide.md b/pencil-design/docs/admin-workflow-guide.md deleted file mode 100644 index a247dddb..00000000 --- a/pencil-design/docs/admin-workflow-guide.md +++ /dev/null @@ -1,712 +0,0 @@ -# Admin Management Workflow Documentation | Tài liệu Quy trình Quản trị - -## Mục lục -1. [Tổng quan](#1-tổng-quan) -2. [Onboarding - Thiết lập ban đầu](#2-onboarding---thiết-lập-ban-đầu) -3. [Store Management - Quản lý cửa hàng](#3-store-management---quản-lý-cửa-hàng) -4. [Product Management - Quản lý sản phẩm](#4-product-management---quản-lý-sản-phẩm) -5. [Staff Management - Quản lý nhân sự](#5-staff-management---quản-lý-nhân-sự) -6. [Inventory Management - Quản lý kho hàng](#6-inventory-management---quản-lý-kho-hàng) -7. [Customer & Loyalty - Khách hàng & Tích điểm](#7-customer--loyalty---khách-hàng--tích-điểm) -8. [Reports & Analytics - Báo cáo & Phân tích](#8-reports--analytics---báo-cáo--phân-tích) -9. [System Settings - Cài đặt hệ thống](#9-system-settings---cài-đặt-hệ-thống) - ---- - -## 1. Tổng Quan - -### Admin Management là gì? - -Admin Management là back-office web dashboard cho **Owner/Manager** quản lý toàn bộ hệ thống tPOS, khác với POS screens (dùng tại quầy bán hàng). - -### Vai trò & Phân quyền - -| Vai trò | Truy cập | Phạm vi | -|---------|----------|---------| -| **Owner** | Toàn bộ | Tất cả cửa hàng, tài chính, cài đặt hệ thống | -| **Admin** | Gần toàn bộ | Cửa hàng được gán, không xem tài chính tổng | -| **Manager** | Cửa hàng | Chỉ cửa hàng được phụ trách | -| **Supervisor** | Giới hạn | Xem báo cáo, quản lý ca làm | - -### Core Flow — Store-Centric Hierarchy - -```mermaid -flowchart TB - subgraph OWNER["🏢 OWNER / ADMIN"] - A1[Đăng nhập Admin Panel] - end - - subgraph STORE["🏪 QUẢN LÝ CỬA HÀNG"] - B1[Tạo cửa hàng mới] - B2[Cấu hình cửa hàng] - B3[Chọn vertical\n Café/Restaurant/Karaoke/Spa] - end - - subgraph SETUP["⚙️ THIẾT LẬP CỬA HÀNG"] - C1[Thêm sản phẩm/Menu] - C2[Thêm nhân viên] - C3[Nhập kho ban đầu] - C4[Cài đặt thiết bị POS] - C5[Cấu hình thanh toán] - end - - subgraph OPERATE["📊 VẬN HÀNH"] - D1[Dashboard tổng quan] - D2[Theo dõi doanh thu] - D3[Quản lý đơn hàng] - D4[Quản lý khách hàng] - end - - subgraph OPTIMIZE["🎯 TỐI ƯU"] - E1[Phân tích báo cáo] - E2[Tạo khuyến mãi] - E3[Chương trình loyalty] - E4[Đánh giá nhân sự] - end - - A1 --> B1 --> B2 --> B3 - B3 --> C1 & C2 & C3 & C4 & C5 - C1 & C2 & C3 & C4 & C5 --> D1 - D1 --> D2 & D3 & D4 - D2 & D3 & D4 --> E1 & E2 & E3 & E4 -``` - -### Navigation Structure - -``` -📊 Dashboard (tổng quan tất cả cửa hàng) -🏪 Cửa hàng - ├── Danh sách cửa hàng - ├── Tạo cửa hàng mới - └── [Chi tiết cửa hàng] - ├── 📦 Sản phẩm & Menu - ├── 👥 Nhân sự - ├── 📦 Kho hàng - ├── 🖥️ Thiết bị - └── ⚙️ Cài đặt -💰 Tài chính & Báo cáo -👥 Khách hàng & Loyalty -🛡️ Phân quyền -⚙️ Cài đặt hệ thống -``` - ---- - -## 2. Onboarding - Thiết lập ban đầu - -### First-Time Setup Flow - -```mermaid -flowchart TB - subgraph LOGIN["🔐 ĐĂNG NHẬP"] - A1[Admin login + 2FA] - A2[Vào Admin Dashboard] - end - - subgraph BUSINESS["🏢 THÔNG TIN DOANH NGHIỆP"] - B1[Nhập tên doanh nghiệp] - B2[Nhập địa chỉ, SĐT, email] - B3[Upload logo] - B4[Chọn ngành nghề] - end - - subgraph STORE_SETUP["🏪 TẠO CỬA HÀNG ĐẦU TIÊN"] - C1[Nhập tên cửa hàng] - C2[Nhập địa chỉ cửa hàng] - C3[Chọn vertical: Café/Restaurant/Karaoke/Spa] - C4[Cài đặt giờ mở cửa] - end - - subgraph PRODUCT_SETUP["📦 THÊM SẢN PHẨM"] - D1[Tạo danh mục] - D2[Thêm sản phẩm] - D3[Cài đặt giá + modifier] - end - - subgraph STAFF_SETUP["👥 THÊM NHÂN VIÊN"] - E1[Tạo tài khoản nhân viên] - E2[Gán vai trò] - E3[Gán vào cửa hàng] - end - - subgraph DEVICE_SETUP["🖥️ KẾT NỐI THIẾT BỊ"] - F1[Đăng ký POS device] - F2[Kết nối máy in] - F3[Test thanh toán] - end - - subgraph READY["🚀 SẴN SÀNG"] - G1[Xem lại tất cả] - G2[✅ Bắt đầu bán hàng] - end - - A1 --> A2 --> B1 --> B2 --> B3 --> B4 - B4 --> C1 --> C2 --> C3 --> C4 - C4 --> D1 --> D2 --> D3 - D3 --> E1 --> E2 --> E3 - E3 --> F1 --> F2 --> F3 - F3 --> G1 --> G2 -``` - -### Screens - -| Bước | Screen | File | -|------|--------|------| -| Login | Admin login | `auth/login/admin-desktop.pen` | -| Business | Business info form | `admin/onboarding-business.pen` | -| Store | Create store wizard | `admin/onboarding-store.pen` | -| Products | Quick product setup | `admin/onboarding-products.pen` | -| Staff | Staff invite | `admin/onboarding-staff.pen` | -| Device | Device pairing | `admin/onboarding-device.pen` | -| Ready | Launch checklist | `admin/onboarding-ready.pen` | - ---- - -## 3. Store Management - Quản lý cửa hàng - -### 3.1 Tạo cửa hàng mới - -```mermaid -flowchart TB - subgraph CREATE["🏪 TẠO CỬA HÀNG"] - A1[Chọn 'Tạo cửa hàng mới'] - A2[Nhập thông tin cơ bản:\n- Tên cửa hàng\n- Địa chỉ\n- SĐT liên hệ] - A3[Chọn vertical:\nCafé / Restaurant / Karaoke / Spa] - end - - subgraph CONFIG["⚙️ CẤU HÌNH"] - B1[Giờ hoạt động:\n- Giờ mở/đóng cửa\n- Ngày nghỉ] - B2[Thanh toán:\n- Tiền mặt / QR / Card\n- Cổng thanh toán] - B3[Thuế & Phí:\n- VAT %\n- Service charge\n- Tip policy] - end - - subgraph TEMPLATE["📋 TEMPLATE"] - C1{Dùng template?} - C2[Sao chép từ\ncửa hàng đã có] - C3[Thiết lập\ntừ đầu] - end - - subgraph DONE["✅ HOÀN TẤT"] - D1[Cửa hàng được tạo] - D2[Chuyển sang thiết lập\nSản phẩm → Nhân sự → Kho] - end - - A1 --> A2 --> A3 - A3 --> B1 --> B2 --> B3 - B3 --> C1 - C1 -->|Có| C2 --> D1 - C1 -->|Không| C3 --> D1 - D1 --> D2 -``` - -### 3.2 Quản lý cửa hàng - -```mermaid -flowchart LR - subgraph LIST["📋 DANH SÁCH"] - A1[Danh sách cửa hàng] - A2[Bộ lọc:\n- Trạng thái\n- Vertical\n- Khu vực] - end - - subgraph DETAIL["🏪 CHI TIẾT CỬA HÀNG"] - B1[Thông tin chung] - B2[📦 Sản phẩm/Menu] - B3[👥 Nhân sự] - B4[📦 Kho hàng] - B5[🖥️ Thiết bị] - B6[📊 Báo cáo] - B7[⚙️ Cài đặt] - end - - subgraph ACTIONS["⚡ HÀNH ĐỘNG"] - C1[Tạm dừng] - C2[Đóng cửa] - C3[Clone sang\ncửa hàng mới] - end - - A1 --> A2 --> B1 - B1 --> B2 & B3 & B4 & B5 & B6 & B7 - B1 --> C1 & C2 & C3 -``` - -### 3.3 Trạng thái cửa hàng - -| Trạng thái | Icon | Mô tả | -|------------|------|-------| -| 🟢 **Hoạt động** | `circle-check` | Đang bán hàng bình thường | -| 🟡 **Thiết lập** | `loader` | Đang cấu hình, chưa mở bán | -| 🟠 **Tạm dừng** | `pause-circle` | Tạm ngưng hoạt động | -| 🔴 **Đóng** | `x-circle` | Đã đóng cửa vĩnh viễn | - -### Screens - -| Bước | Screen | File | -|------|--------|------| -| List | Danh sách cửa hàng | `admin/store-list.pen` | -| Create | Wizard tạo cửa hàng | `admin/store-create.pen` | -| Detail | Chi tiết cửa hàng | `admin/store-detail.pen` | -| Settings | Cài đặt cửa hàng | `admin/store-settings.pen` | - ---- - -## 4. Product Management - Quản lý sản phẩm - -### 4.1 Product CRUD Flow - -```mermaid -flowchart TB - subgraph CATALOG["📦 CATALOG"] - A1[Xem danh sách sản phẩm] - A2[Tìm kiếm / Lọc:\n- Theo danh mục\n- Theo trạng thái\n- Theo kho] - end - - subgraph CREATE["➕ TẠO MỚI"] - B1[Nhập thông tin sản phẩm:\n- Tên / Mã SKU\n- Mô tả\n- Hình ảnh] - B2[Định giá:\n- Giá bán\n- Giá vốn\n- Thuế] - B3[Phân loại:\n- Danh mục\n- Tags\n- Variant: Size, Topping] - B4[Kho hàng:\n- Số lượng ban đầu\n- Ngưỡng cảnh báo] - B5[Cửa hàng áp dụng:\n- Tất cả\n- Chọn cửa hàng cụ thể] - end - - subgraph MODIFIER["🎛️ MODIFIER"] - C1[Tạo nhóm modifier:\n- Size (S/M/L)\n- Đường (0-100%)\n- Topping] - C2[Cài đặt:\n- Bắt buộc / Tùy chọn\n- Chọn tối đa\n- Giá thêm] - end - - subgraph PUBLISH["📤 PHÁT HÀNH"] - D1{Đồng bộ?} - D2[Đồng bộ tất cả\ncửa hàng] - D3[Chọn cửa hàng\ncụ thể] - D4[✅ Sản phẩm\nxuất hiện trên POS] - end - - A1 --> A2 - A2 -->|Tạo mới| B1 --> B2 --> B3 --> B4 --> B5 - B5 --> C1 --> C2 - C2 --> D1 - D1 -->|Tất cả| D2 --> D4 - D1 -->|Chọn| D3 --> D4 -``` - -### 4.2 Menu Builder Flow - -```mermaid -flowchart LR - subgraph MENU["📋 MENU"] - A1[Chọn cửa hàng] - A2[Chọn loại menu:\n- Menu chính\n- Menu sáng\n- Menu tối\n- Happy hour] - end - - subgraph BUILD["🔧 XÂY DỰNG"] - B1[Kéo thả sản phẩm\nvào menu] - B2[Sắp xếp thứ tự] - B3[Đặt giá riêng\ncho menu này] - B4[Cài đặt lịch hiển thị:\nGiờ bắt đầu / Kết thúc] - end - - subgraph PREVIEW["👁️ XEM TRƯỚC"] - C1[Preview trên POS] - C2[Kiểm tra hiển thị] - end - - A1 --> A2 --> B1 --> B2 --> B3 --> B4 --> C1 --> C2 -``` - -### Screens - -| Bước | Screen | File | -|------|--------|------| -| Catalog | Danh sách sản phẩm | `admin/product-catalog.pen` | -| Create | Form tạo sản phẩm | `admin/product-create.pen` | -| Modifier | Quản lý modifier | `admin/modifier-groups.pen` | -| Menu | Menu builder | `admin/menu-builder.pen` | -| Pricing | Bảng giá & KM | `admin/pricing-rules.pen` | - ---- - -## 5. Staff Management - Quản lý nhân sự - -### 5.1 Staff Lifecycle - -```mermaid -flowchart TB - subgraph INVITE["📩 THÊM NHÂN VIÊN"] - A1[Nhập thông tin:\n- Họ tên\n- SĐT / Email\n- CMND/CCCD] - A2[Gán vai trò:\n- Cashier\n- Waiter\n- Kitchen\n- Barista\n- Manager] - A3[Gán cửa hàng] - A4[Gửi invite\n email/SMS] - end - - subgraph ACTIVATE["✅ KÍCH HOẠT"] - B1[NV nhận invite] - B2[Tạo mật khẩu] - B3[Xác thực tài khoản] - B4[NV đăng nhập POS] - end - - subgraph MANAGE["📊 QUẢN LÝ"] - C1[Xem lịch làm việc] - C2[Chấm công] - C3[Đánh giá hiệu suất] - C4[Tính lương/hoa hồng] - end - - subgraph EXIT["🚪 NGHỈ VIỆC"] - D1[Đánh dấu nghỉ việc] - D2[Tắt quyền truy cập] - D3[Lưu trữ hồ sơ] - end - - A1 --> A2 --> A3 --> A4 - A4 --> B1 --> B2 --> B3 --> B4 - B4 --> C1 & C2 & C3 & C4 - C1 & C2 --> D1 --> D2 --> D3 -``` - -### 5.2 Role & Permission Matrix - -| Quyền | Cashier | Waiter | Kitchen | Manager | Admin | Owner | -|-------|---------|--------|---------|---------|-------|-------| -| Tạo đơn | ✅ | ✅ | ❌ | ✅ | ✅ | ✅ | -| Nhận đơn bếp | ❌ | ❌ | ✅ | ✅ | ✅ | ✅ | -| Thanh toán | ✅ | ❌ | ❌ | ✅ | ✅ | ✅ | -| Void/Refund | ❌ | ❌ | ❌ | ✅ | ✅ | ✅ | -| Áp dụng giảm giá | ❌ | ❌ | ❌ | ✅ | ✅ | ✅ | -| Xem báo cáo | ❌ | ❌ | ❌ | ✅ | ✅ | ✅ | -| Quản lý sản phẩm | ❌ | ❌ | ❌ | ✅ | ✅ | ✅ | -| Quản lý nhân sự | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | -| Quản lý cửa hàng | ❌ | ❌ | ❌ | ❌ | ✅ | ✅ | -| Cài đặt hệ thống | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | -| Xem tài chính | ❌ | ❌ | ❌ | ❌ | ❌ | ✅ | - -### 5.3 Shift & Attendance - -```mermaid -flowchart LR - subgraph SHIFT["⏰ CA LÀM"] - A1[Tạo mẫu ca:\n- Sáng 6h-14h\n- Chiều 14h-22h\n- Tối 22h-6h] - A2[Phân ca cho NV] - end - - subgraph ATTENDANCE["📋 CHẤM CÔNG"] - B1[NV clock-in trên POS] - B2[NV clock-out] - B3[Admin xem giờ làm] - end - - subgraph REPORT["📊 BÁO CÁO"] - C1[Tổng hợp giờ làm] - C2[Overtime / Late] - C3[Tính lương] - end - - A1 --> A2 --> B1 --> B2 --> B3 --> C1 --> C2 --> C3 -``` - -### Screens - -| Bước | Screen | File | -|------|--------|------| -| Directory | Danh sách nhân viên | `admin/staff-directory.pen` | -| Create | Form thêm NV | `admin/staff-create.pen` | -| Role | Ma trận phân quyền | `admin/role-permissions.pen` | -| Schedule | Lịch làm việc | `admin/staff-schedule.pen` | -| Payroll | Bảng lương | `admin/payroll-commission.pen` | -| Attendance | Tổng hợp chấm công | `admin/attendance-dashboard.pen` | - ---- - -## 6. Inventory Management - Quản lý kho hàng - -### 6.1 Inventory Flow - -```mermaid -flowchart TB - subgraph OVERVIEW["📦 TỔNG QUAN KHO"] - A1[Dashboard kho:\n- Tồn kho theo cửa hàng\n- Cảnh báo hết hàng\n- Cảnh báo hết hạn] - end - - subgraph STOCK_IN["📥 NHẬP KHO"] - B1[Tạo phiếu nhập] - B2[Chọn nhà cung cấp] - B3[Nhập danh sách\nhàng hóa + SL + giá] - B4[Duyệt phiếu nhập] - B5[Cập nhật tồn kho] - end - - subgraph STOCK_OUT["📤 XUẤT KHO"] - C1[Bán hàng tự động trừ] - C2[Xuất kho thủ công:\n- Hư hại\n- Hết hạn\n- Dùng nội bộ] - end - - subgraph TRANSFER["🔄 CHUYỂN KHO"] - D1[Tạo phiếu chuyển] - D2[Từ cửa hàng A → B] - D3[Xác nhận nhận hàng] - D4[Cập nhật tồn 2 bên] - end - - subgraph CHECK["📋 KIỂM KHO"] - E1[Tạo phiên kiểm kho] - E2[Nhập số thực tế] - E3[So sánh sai lệch] - E4[Điều chỉnh tồn kho] - end - - A1 --> B1 & C1 & D1 & E1 - B1 --> B2 --> B3 --> B4 --> B5 - C1 --> C2 - D1 --> D2 --> D3 --> D4 - E1 --> E2 --> E3 --> E4 -``` - -### 6.2 Purchase Order Flow - -```mermaid -flowchart LR - A[Tạo PO] --> B[Draft] - B --> C{Duyệt?} - C -->|Từ chối| B - C -->|Duyệt| D[Pending Delivery] - D --> E{Nhận hàng?} - E -->|Đủ| F[Received] - E -->|Thiếu| G[Partial Received] - G --> E - F --> H[Cập nhật kho + Ghi sổ] -``` - -### Trạng thái PO - -| Trạng thái | Màu | Mô tả | -|------------|-----|-------| -| 📝 **Draft** | `$text-tertiary` | Đang soạn | -| ⏳ **Pending Approval** | `#F59E0B` | Chờ duyệt | -| ✅ **Approved** | `#22C55E` | Đã duyệt | -| 🚚 **In Transit** | `#3B82F6` | Đang giao | -| 📦 **Partial** | `#8B5CF6` | Nhận một phần | -| ✅ **Received** | `#22C55E` | Đã nhận đủ | -| ❌ **Cancelled** | `#EF4444` | Đã huỷ | - -### Screens - -| Bước | Screen | File | -|------|--------|------| -| Dashboard | Tổng quan kho | `admin/inventory-dashboard.pen` | -| PO | Purchase Orders | `admin/purchase-orders.pen` | -| Supplier | Nhà cung cấp | `admin/supplier-management.pen` | -| Transfer | Chuyển kho | `admin/stock-transfer.pen` | - ---- - -## 7. Customer & Loyalty - Khách hàng & Tích điểm - -### 7.1 Customer Management - -```mermaid -flowchart TB - subgraph DATABASE["👥 CƠ SỞ KHÁCH HÀNG"] - A1[Danh sách khách hàng] - A2[Tìm kiếm / Lọc:\n- Tên, SĐT\n- Nhóm: VIP/Regular/New\n- Cửa hàng] - end - - subgraph PROFILE["👤 HỒ SƠ"] - B1[Thông tin cá nhân] - B2[Lịch sử mua hàng] - B3[Điểm tích luỹ] - B4[Ghi chú & Sở thích] - end - - subgraph SEGMENT["📊 PHÂN NHÓM"] - C1[Tự động phân nhóm:\n- Mới: < 2 đơn\n- Thường xuyên: > 5 đơn/tháng\n- VIP: > 20 đơn/tháng\n- Không hoạt động: > 30 ngày] - end - - A1 --> A2 --> B1 - B1 --> B2 & B3 & B4 - A1 --> C1 -``` - -### 7.2 Loyalty Program Configuration - -```mermaid -flowchart LR - subgraph SETUP["⚙️ THIẾT LẬP"] - A1[Quy tắc tích điểm:\n1 điểm / 10,000₫] - A2[Bậc thành viên:\n- Bronze: 0\n- Silver: 500đ\n- Gold: 2,000đ\n- Platinum: 5,000đ] - end - - subgraph REWARDS["🎁 PHẦN THƯỞNG"] - B1[Danh sách quà:\n- Giảm giá %\n- Miễn phí sản phẩm\n- Voucher tiền mặt] - B2[Điều kiện đổi:\n- Số điểm cần\n- Thời hạn] - end - - subgraph PROMOTION["📣 KHUYẾN MÃI"] - C1[Combo deals] - C2[Happy hour] - C3[BOGO] - C4[Coupon code] - end - - A1 --> A2 --> B1 --> B2 - B2 --> C1 & C2 & C3 & C4 -``` - -### Screens - -| Bước | Screen | File | -|------|--------|------| -| Database | Danh sách khách hàng | `admin/customer-database.pen` | -| Loyalty | Cài đặt loyalty | `admin/loyalty-program.pen` | -| Feedback | Đánh giá khách hàng | `admin/customer-feedback.pen` | - ---- - -## 8. Reports & Analytics - Báo cáo & Phân tích - -### 8.1 Report Types - -```mermaid -flowchart TB - subgraph REVENUE["💰 DOANH THU"] - A1[Doanh thu theo ngày/tuần/tháng] - A2[So sánh giữa các cửa hàng] - A3[Doanh thu theo vertical] - A4[Top sản phẩm bán chạy] - end - - subgraph FINANCE["📊 TÀI CHÍNH"] - B1[Lợi nhuận gộp] - B2[Chi phí vận hành] - B3[Dòng tiền] - B4[Báo cáo thuế] - end - - subgraph STAFF_REPORT["👥 NHÂN SỰ"] - C1[Hiệu suất nhân viên] - C2[Tổng hợp chấm công] - C3[Doanh số theo NV] - end - - subgraph INVENTORY_REPORT["📦 KHO HÀNG"] - D1[Tồn kho hiện tại] - D2[Biến động kho] - D3[Hàng sắp hết / hết hạn] - end -``` - -### 8.2 Dashboard Metrics - -| KPI | Mô tả | Đơn vị | -|-----|-------|--------| -| **Tổng doanh thu** | Tổng tiền bán hàng | VNĐ | -| **Tổng đơn hàng** | Số lượng đơn hoàn thành | Đơn | -| **Trung bình/đơn** | Doanh thu trung bình mỗi đơn | VNĐ | -| **Khách hàng mới** | Số khách lần đầu mua | Người | -| **Tỷ lệ huỷ** | % đơn bị huỷ / void | % | -| **Doanh thu/NV** | Doanh thu trung bình tạo bởi mỗi NV | VNĐ | - -### Screens - -| Bước | Screen | File | -|------|--------|------| -| Overview | Dashboard chính | `admin/admin-dashboard.pen` | -| Revenue | Phân tích doanh thu | `admin/revenue-analytics.pen` | -| Finance | Tổng quan tài chính | `admin/financial-overview.pen` | -| Expense | Quản lý chi phí | `admin/expense-management.pen` | -| Tax | Cấu hình thuế | `admin/tax-configuration.pen` | - ---- - -## 9. System Settings - Cài đặt hệ thống - -### 9.1 Settings Hierarchy - -```mermaid -flowchart LR - subgraph GLOBAL["🌐 HỆ THỐNG"] - A1[Branding:\n- Logo, Tên, Màu] - A2[Thanh toán:\n- Cổng, Tiền tệ] - A3[Bảo mật:\n- 2FA, Session] - A4[Thông báo:\n- Email, SMS, Push] - end - - subgraph STORE_LEVEL["🏪 CỬA HÀNG"] - B1[Hồ sơ cửa hàng] - B2[Giờ hoạt động] - B3[Cài đặt thuế] - B4[Mẫu hoá đơn] - end - - subgraph DEVICE["🖥️ THIẾT BỊ"] - C1[Quản lý POS devices] - C2[Máy in & Ngọai vi] - C3[Phiên bản phần mềm] - end - - subgraph AUDIT["📝 KIỂM TOÁN"] - D1[Nhật ký hoạt động] - D2[Lịch sử thay đổi] - D3[Void/Refund audit] - end - - A1 & A2 & A3 & A4 --> B1 & B2 & B3 & B4 - B1 & B2 --> C1 & C2 & C3 - C1 --> D1 & D2 & D3 -``` - -### Screens - -| Bước | Screen | File | -|------|--------|------| -| Store | Cài đặt cửa hàng | `admin/store-settings.pen` | -| Device | Quản lý thiết bị | `admin/device-management.pen` | -| Audit | Nhật ký hệ thống | `admin/audit-log.pen` | -| Notification | Cài đặt thông báo | `admin/notification-center.pen` | -| Integration | Tích hợp bên thứ 3 | `admin/integration-hub.pen` | - ---- - -## Tổng hợp Admin Screens - -``` -src/pages/tPOS/admin/ -├── admin-dashboard.pen # Dashboard tổng quan -├── store-list.pen # Danh sách cửa hàng -├── store-create.pen # Wizard tạo cửa hàng -├── store-detail.pen # Chi tiết cửa hàng -├── store-settings.pen # Cài đặt cửa hàng -├── product-catalog.pen # Quản lý sản phẩm -├── product-create.pen # Form tạo sản phẩm -├── modifier-groups.pen # Quản lý modifier -├── menu-builder.pen # Menu builder -├── pricing-rules.pen # Bảng giá & KM -├── staff-directory.pen # Danh sách nhân viên -├── staff-create.pen # Form thêm NV -├── role-permissions.pen # Ma trận phân quyền -├── staff-schedule.pen # Lịch làm việc -├── payroll-commission.pen # Bảng lương -├── attendance-dashboard.pen # Tổng hợp chấm công -├── inventory-dashboard.pen # Tổng quan kho -├── purchase-orders.pen # Purchase Orders -├── supplier-management.pen # Nhà cung cấp -├── stock-transfer.pen # Chuyển kho -├── customer-database.pen # Danh sách khách hàng -├── loyalty-program.pen # Cài đặt loyalty -├── customer-feedback.pen # Đánh giá KH -├── revenue-analytics.pen # Phân tích doanh thu -├── financial-overview.pen # Tổng quan tài chính -├── expense-management.pen # Quản lý chi phí -├── tax-configuration.pen # Cấu hình thuế -├── device-management.pen # Quản lý thiết bị -├── audit-log.pen # Nhật ký hệ thống -├── notification-center.pen # Cài đặt thông báo -├── integration-hub.pen # Tích hợp bên thứ 3 -└── onboarding/ - ├── onboarding-business.pen # Onboarding: Thông tin DN - ├── onboarding-store.pen # Onboarding: Tạo cửa hàng - ├── onboarding-products.pen # Onboarding: Thêm SP - ├── onboarding-staff.pen # Onboarding: Thêm NV - ├── onboarding-device.pen # Onboarding: Kết nối thiết bị - └── onboarding-ready.pen # Onboarding: Sẵn sàng -``` - -**Tổng: 37 files** (31 admin screens + 6 onboarding screens) diff --git a/pencil-design/docs/auth-workflow-guide.md b/pencil-design/docs/auth-workflow-guide.md deleted file mode 100644 index cd771762..00000000 --- a/pencil-design/docs/auth-workflow-guide.md +++ /dev/null @@ -1,318 +0,0 @@ -# Auth Workflow Documentation | Tài liệu Quy trình Xác thực - -## Mục lục -1. [Tổng quan](#1-tổng-quan) -2. [Customer Authentication](#2-customer-authentication) -3. [Staff Authentication](#3-staff-authentication) -4. [Admin Authentication](#4-admin-authentication) -5. [Branch Authentication](#5-branch-authentication) -6. [Password Recovery](#6-password-recovery) - ---- - -## 1. Tổng Quan - -### So sánh 4 vai trò - -| Yếu tố | Customer | Staff | Admin | Branch | -|--------|----------|-------|-------|--------| -| **Phương thức** | Phone + OTP | Email/Phone + Password | Email + Password | Email/Phone + Password | -| **Social Login** | ✅ Có | ❌ Không | ❌ Không | ❌ Không | -| **Đăng ký** | Tự đăng ký | Admin cấp | System cấp | Admin cấp | -| **2FA** | OTP | Tùy chọn | Bắt buộc | Tùy chọn | -| **Theme** | 🟠 Orange | 🟢 Green | 🔵 Blue | 🟠 Orange | - -### Responsive Breakpoints - -| Device | Width | Layout | -|--------|-------|--------| -| Desktop | 1440px | Split screen hoặc Centered card | -| Tablet | 1024px | Centered card (landscape) | -| Mobile | 390px | Full-width vertical | - ---- - -## 2. Customer Authentication - -### 2.1 Login Flow -```mermaid -flowchart TB - subgraph START["👤 KHÁCH HÀNG"] - A1[Mở app/web] - end - - subgraph INPUT["📱 NHẬP SĐT"] - B1[Chọn quốc gia] - B2[Nhập số điện thoại] - B3[Gửi OTP] - end - - subgraph OTP["🔢 XÁC THỰC OTP"] - C1[Nhận SMS] - C2[Nhập 6 số OTP] - C3{OTP đúng?} - C4[❌ Sai - Nhập lại] - C5[⏱️ Gửi lại sau 60s] - end - - subgraph SUCCESS["✅ THÀNH CÔNG"] - D1[Xác thực OK] - D2[Chuyển trang chính] - end - - A1 --> B1 --> B2 --> B3 - B3 --> C1 --> C2 --> C3 - C3 -->|Sai| C4 --> C2 - C3 -->|Hết lần| C5 --> B3 - C3 -->|Đúng| D1 --> D2 -``` - -### 2.2 Social Login Flow -```mermaid -flowchart LR - A[Chọn mạng xã hội] --> B{Loại?} - B -->|Google| C[Google OAuth] - B -->|Apple| D[Apple Sign-in] - B -->|Zalo| E[Zalo OAuth] - B -->|Facebook| F[Facebook OAuth] - C & D & E & F --> G[Lấy profile] - G --> H{Đã có tài khoản?} - H -->|Có| I[Liên kết & Đăng nhập] - H -->|Không| J[Tạo mới & Đăng nhập] - I & J --> K[✅ Thành công] -``` - -### 2.3 Register Flow -```mermaid -flowchart TB - subgraph INFO["📝 THÔNG TIN"] - A1[Nhập họ tên] - A2[Nhập SĐT] - A3[Nhập email - tùy chọn] - A4[Đồng ý điều khoản] - end - - subgraph VERIFY["🔐 XÁC THỰC"] - B1[Gửi OTP] - B2[Nhập OTP] - B3{Xác thực OK?} - end - - subgraph COMPLETE["🎉 HOÀN TẤT"] - C1[Tạo tài khoản] - C2[Chuyển trang chính] - end - - A1 --> A2 --> A3 --> A4 - A4 --> B1 --> B2 --> B3 - B3 -->|Thất bại| B1 - B3 -->|Thành công| C1 --> C2 -``` - -### Screens - -| Bước | Screen | Files | -|------|--------|-------| -| Login | Phone input | `customer-desktop.pen`, `customer-tablet.pen`, `customer-mobile.pen` | -| OTP | OTP verify | Tích hợp trong login page | -| Register | Form đăng ký | `register/customer-*.pen` | - ---- - -## 3. Staff Authentication - -### Login Flow -```mermaid -flowchart TB - subgraph START["👨‍💼 NHÂN VIÊN"] - A1[Mở app POS] - end - - subgraph LOGIN["🔐 ĐĂNG NHẬP"] - B1[Nhập tài khoản được cấp] - B2[Nhập mật khẩu] - B3{Xác thực?} - B4[❌ Sai - Thử lại] - end - - subgraph SHIFT["⏰ CA LÀM"] - C1[Chọn chi nhánh] - C2[Bắt đầu ca] - C3[Vào POS chính] - end - - A1 --> B1 --> B2 --> B3 - B3 -->|Sai| B4 --> B1 - B3 -->|Đúng| C1 --> C2 --> C3 -``` - -### Screens - -| Bước | Screen | Files | -|------|--------|-------| -| Login | Email/Password | `staff-desktop.pen`, `staff-tablet.pen`, `staff-mobile.pen` | - ---- - -## 4. Admin Authentication - -### Login Flow -```mermaid -flowchart TB - subgraph START["🔒 ADMIN"] - A1[Truy cập admin panel] - end - - subgraph AUTH["🛡️ BẢO MẬT CAO"] - B1[Nhập email admin] - B2[Nhập mật khẩu] - B3{Xác thực?} - B4[❌ Sai - 5 lần khóa 30p] - end - - subgraph 2FA["🔐 XÁC THỰC 2 LỚP"] - C1[Nhập mã 2FA] - C2[Authenticator App] - C3{Mã đúng?} - end - - subgraph SUCCESS["✅ ĐĂNG NHẬP"] - D1[Ghi log audit] - D2[Vào dashboard admin] - end - - A1 --> B1 --> B2 --> B3 - B3 -->|Sai| B4 --> B1 - B3 -->|Đúng| C1 - C1 --> C2 --> C3 - C3 -->|Sai| C1 - C3 -->|Đúng| D1 --> D2 -``` - -### Security Features -- 🔒 Khóa sau 5 lần nhập sai (30 phút) -- 🛡️ Bắt buộc 2FA -- 📝 Ghi log đăng nhập -- ⏱️ Session timeout 30 phút - -### Screens - -| Bước | Screen | Files | -|------|--------|-------| -| Login | Email/Password + 2FA | `admin-desktop.pen`, `admin-tablet.pen`, `admin-mobile.pen` | - ---- - -## 5. Branch Authentication - -### Login Flow -```mermaid -flowchart TB - subgraph START["🏪 CHI NHÁNH"] - A1[Truy cập portal] - end - - subgraph AUTH["🔐 ĐĂNG NHẬP"] - B1[Nhập email chi nhánh] - B2[Nhập mật khẩu] - B3{Xác thực?} - end - - subgraph DASHBOARD["📊 QUẢN LÝ"] - C1[Xem thống kê] - C2[Quản lý nhân viên] - C3[Báo cáo doanh thu] - end - - A1 --> B1 --> B2 --> B3 - B3 -->|Sai| B1 - B3 -->|Đúng| C1 - C1 --> C2 --> C3 -``` - -### Screens - -| Bước | Screen | Files | -|------|--------|-------| -| Login | Email/Password | `branch-desktop.pen`, `branch-tablet.pen`, `branch-mobile.pen` | - ---- - -## 6. Password Recovery - -### Forgot Password Flow -```mermaid -flowchart TB - subgraph REQUEST["📧 YÊU CẦU"] - A1[Nhấn Quên mật khẩu] - A2[Nhập email/SĐT] - A3[Gửi yêu cầu] - end - - subgraph VERIFY["✉️ XÁC MINH"] - B1[Nhận email/SMS] - B2[Click link reset] - B3[Hoặc nhập code] - end - - subgraph RESET["🔄 ĐẶT LẠI"] - C1[Nhập mật khẩu mới] - C2[Xác nhận mật khẩu] - C3{Hợp lệ?} - C4[❌ Không đủ mạnh] - end - - subgraph DONE["✅ HOÀN TẤT"] - D1[Cập nhật thành công] - D2[Chuyển trang login] - end - - A1 --> A2 --> A3 - A3 --> B1 --> B2 --> C1 - B1 --> B3 --> C1 - C1 --> C2 --> C3 - C3 -->|Yếu| C4 --> C1 - C3 -->|Mạnh| D1 --> D2 -``` - -### Password Requirements -``` -Yêu cầu mật khẩu: -- Tối thiểu 8 ký tự -- Có chữ hoa (A-Z) -- Có chữ thường (a-z) -- Có số (0-9) -- Có ký tự đặc biệt (!@#$%^&*) -``` - -### Screens - -| Bước | Screen | Files | -|------|--------|-------| -| Request | Form nhập email | `forgot-password/desktop.pen`, `tablet.pen`, `mobile.pen` | -| Confirm | Thông báo đã gửi | Tích hợp trong forgot-password | -| Reset | Form đặt lại | (Cần tạo thêm) | - ---- - -## Tổng hợp Files - -``` -src/pages/auth/ -├── login/ -│ ├── customer-{desktop,tablet,mobile}.pen -│ ├── staff-{desktop,tablet,mobile}.pen -│ ├── admin-{desktop,tablet,mobile}.pen -│ └── branch-{desktop,tablet,mobile}.pen -├── register/ -│ └── customer-{desktop,tablet,mobile}.pen -├── forgot-password/ -│ └── {desktop,tablet,mobile}.pen -└── workflow/ - ├── otp-verify.pen # OTP input + Success state - ├── password-reset.pen # Form + Success state - ├── two-factor-auth.pen # 2FA for Admin - └── email-sent.pen # Confirmation screen -``` - -**Tổng: 22 files** (18 auth pages + 4 workflow screens) diff --git a/pencil-design/docs/pos-workflow-guide.md b/pencil-design/docs/pos-workflow-guide.md deleted file mode 100644 index d223d2c3..00000000 --- a/pencil-design/docs/pos-workflow-guide.md +++ /dev/null @@ -1,407 +0,0 @@ -# POS Workflow Documentation | Tài liệu Quy trình POS - -## Mục lục -1. [Tổng quan](#1-tổng-quan) -2. [Café - Quick Service](#2-café---quick-service) -3. [Restaurant - Full Service](#3-restaurant---full-service) -4. [Karaoke - Time-Based](#4-karaoke---time-based) -5. [Spa - Appointment Service](#5-spa---appointment-service) -6. [Payment Flow](#6-payment-flow) - ---- - -## 1. Tổng Quan - -### So sánh 4 mô hình - -| Yếu tố | Café | Restaurant | Karaoke | Spa | -|--------|------|------------|---------|-----| -| **Thanh toán** | Trước | Sau | Sau | Sau | -| **Thời gian** | 5-10 phút | 30-90 phút | 1-4 giờ | 30-120 phút | -| **Đối tượng** | Counter | Bàn | Phòng | Khách + NV | -| **Tính năng đặc biệt** | Queue | Kitchen | Timer | Appointment | -| **Loyalty** | ✅ Optional | ✅ Optional | ✅ Optional | ✅ Required | - ---- - -## 2. Café - Quick Service - -### Workflow Diagram -```mermaid -flowchart TB - subgraph CUSTOMER["👤 KHÁCH HÀNG"] - A1[Đến quầy] - end - - subgraph ORDER["📝 ORDER"] - B1[Xem menu] - B2[Chọn món] - B3[Tùy chỉnh
Size/Topping] - end - - subgraph PAYMENT["💳 THANH TOÁN"] - C1{Phương thức?} - C2[Tiền mặt] - C3[QR/Chuyển khoản] - C4[Thẻ] - C5[In bill + Số thứ tự] - end - - subgraph PREPARE["☕ PHA CHẾ"] - D1[Barista nhận order] - D2[Pha chế] - D3[Hoàn thành] - end - - subgraph SERVE["🎉 PHỤC VỤ"] - E1[Gọi số] - E2[Khách nhận đồ] - E3[Ra về] - end - - A1 --> B1 --> B2 --> B3 - B3 --> C1 - C1 --> C2 & C3 & C4 - C2 & C3 & C4 --> C5 - C5 --> D1 --> D2 --> D3 - D3 --> E1 --> E2 --> E3 -``` - -### Screens theo bước - -| Bước | Screen | File | -|------|--------|------| -| Order | POS chính | `cafe/desktop.pen` | -| Payment | Chọn phương thức | `shared/payment/method-select.pen` | -| Payment | Tiền mặt | `shared/payment/cash.pen` | -| Payment | QR | `shared/payment/qr.pen` | -| Payment | Thành công | `shared/payment/success.pen` | -| Serve | Màn hình gọi số | `cafe/workflow/queue-display.pen` | - ---- - -## 3. Restaurant - Full Service - -### Workflow Diagram -```mermaid -flowchart TB - subgraph ARRIVE["👤 KHÁCH ĐẾN"] - A1[Vào nhà hàng] - A2{Đặt bàn trước?} - A3[Check-in đặt bàn] - A4[Chọn bàn trống] - end - - subgraph SEAT["🪑 NGỒI BÀN"] - B1[Nhân viên dẫn bàn] - B2[Mở order bàn] - end - - subgraph ORDER["📝 ORDER ĐỢT 1"] - C1[Xem menu] - C2[Chọn món] - C3[Gửi bếp] - end - - subgraph KITCHEN["👨‍🍳 BẾP"] - D1[Bếp nhận order] - D2[Nấu món] - D3[Món sẵn sàng] - D4[Phục vụ ra bàn] - end - - subgraph CONTINUE["🔄 TIẾP TỤC"] - E1{Thêm món?} - E2[Order đợt 2+] - end - - subgraph CHECKOUT["💳 TÍNH TIỀN"] - F1[Khách yêu cầu bill] - F2[Xem lại bill] - F3{Thanh toán} - F4[Tiền mặt/QR/Thẻ] - F5[In hóa đơn] - end - - subgraph LEAVE["👋 RA VỀ"] - G1[Đóng bàn] - G2[Khách ra về] - end - - A1 --> A2 - A2 -->|Có| A3 - A2 -->|Không| A4 - A3 & A4 --> B1 --> B2 - B2 --> C1 --> C2 --> C3 - C3 --> D1 --> D2 --> D3 --> D4 - D4 --> E1 - E1 -->|Có| E2 --> C2 - E1 -->|Không| F1 - F1 --> F2 --> F3 --> F4 --> F5 - F5 --> G1 --> G2 -``` - -### Screens theo bước - -| Bước | Screen | File | -|------|--------|------| -| Arrive | Sơ đồ bàn | `restaurant/workflow/table-map.pen` | -| Order | POS order bàn | `restaurant/desktop.pen` | -| Kitchen | Màn hình bếp | `restaurant/workflow/kitchen-display.pen` | -| Payment | Các màn thanh toán | `shared/payment/*.pen` | - -### Trạng thái Order Item -- 🟡 **Chờ** - Vừa gửi bếp -- 🔵 **Đang làm** - Bếp nhận -- 🟢 **Xong** - Sẵn sàng phục vụ -- ✅ **Đã phục vụ** - Ra bàn - ---- - -## 4. Karaoke - Time-Based - -### Workflow Diagram -```mermaid -flowchart TB - subgraph ARRIVE["👤 KHÁCH ĐẾN"] - A1[Vào quán] - A2[Xem sơ đồ phòng] - A3[Chọn phòng trống] - end - - subgraph OPEN["🚪 MỞ PHÒNG"] - B1[Chọn thời lượng] - B2[Mở phòng] - B3[⏱️ Timer bắt đầu] - end - - subgraph SESSION["🎤 TRONG PHÒNG"] - C1[Hát karaoke] - C2{Order đồ?} - C3[Chọn đồ uống/ăn] - C4[Gửi order] - end - - subgraph EXTEND["⏰ GIA HẠN"] - D1{Timer sắp hết?} - D2[Thông báo 10p trước] - D3{Gia hạn?} - D4[Thêm thời gian] - end - - subgraph CLOSE["🔒 ĐÓNG PHÒNG"] - E1[Kết thúc session] - E2[⏱️ Timer dừng] - E3[Xem bill tổng] - end - - subgraph PAYMENT["💳 THANH TOÁN"] - F1[Tiền phòng + F&B] - F2{Thanh toán} - F3[Tiền mặt/QR/Thẻ] - F4[In hóa đơn] - end - - subgraph LEAVE["👋 RA VỀ"] - G1[Reset phòng] - G2[Khách ra về] - end - - A1 --> A2 --> A3 - A3 --> B1 --> B2 --> B3 - B3 --> C1 - C1 --> C2 - C2 -->|Có| C3 --> C4 --> C1 - C2 -->|Không| D1 - D1 -->|Có| D2 --> D3 - D3 -->|Có| D4 --> C1 - D3 -->|Không| E1 - D1 -->|Không| C1 - E1 --> E2 --> E3 - E3 --> F1 --> F2 --> F3 --> F4 - F4 --> G1 --> G2 -``` - -### Screens theo bước - -| Bước | Screen | File | -|------|--------|------| -| Arrive | Sơ đồ phòng | `karaoke/workflow/room-map.pen` | -| Session | Chi tiết phòng + timer | `karaoke/workflow/room-session.pen` | -| Order | POS order đồ | `karaoke/desktop.pen` | -| Payment | Các màn thanh toán | `shared/payment/*.pen` | - -### Tính giá phòng -``` -Tiền phòng = Giá/giờ × Số giờ thực tế -- Block đầu: 2 giờ minimum -- Block sau: +30 phút/lần -- Peak hours (18h-22h T6-CN): ×1.5 -- Happy hour (14h-17h T2-T5): -30% -``` - ---- - -## 5. Spa - Appointment Service - -### Workflow Diagram -```mermaid -flowchart TB - subgraph ARRIVE["👤 KHÁCH ĐẾN"] - A1[Vào spa] - A2{Có đặt lịch?} - A3[Tìm khách hàng] - A4[Check-in lịch hẹn] - A5[Walk-in mới] - end - - subgraph CUSTOMER["👥 KHÁCH HÀNG"] - B1{Khách cũ?} - B2[Tìm trong hệ thống] - B3[Tạo khách mới] - B4[Xem thông tin + VIP tier] - end - - subgraph SERVICE["💆 CHỌN DỊCH VỤ"] - C1[Xem danh sách dịch vụ] - C2[Chọn dịch vụ] - C3[Chọn nhân viên] - end - - subgraph PERFORM["✨ THỰC HIỆN"] - D1[Bắt đầu dịch vụ] - D2[Thực hiện] - D3[Hoàn thành] - end - - subgraph CONTINUE["🔄 TIẾP TỤC"] - E1{Thêm dịch vụ?} - E2[Chọn dịch vụ tiếp] - end - - subgraph CHECKOUT["💳 THANH TOÁN"] - F1[Xem bill] - F2{Dùng điểm?} - F3[Trừ điểm loyalty] - F4{Thanh toán} - F5[Tiền mặt/QR/Thẻ] - F6[+Tích điểm mới] - end - - subgraph LEAVE["👋 RA VỀ"] - G1{Đặt lịch lần sau?} - G2[Tạo lịch hẹn] - G3[Khách ra về] - end - - A1 --> A2 - A2 -->|Có| A3 --> A4 - A2 -->|Không| A5 - A4 & A5 --> B1 - B1 -->|Có| B2 --> B4 - B1 -->|Không| B3 --> B4 - B4 --> C1 --> C2 --> C3 - C3 --> D1 --> D2 --> D3 - D3 --> E1 - E1 -->|Có| E2 --> C2 - E1 -->|Không| F1 - F1 --> F2 - F2 -->|Có| F3 --> F4 - F2 -->|Không| F4 - F4 --> F5 --> F6 - F6 --> G1 - G1 -->|Có| G2 --> G3 - G1 -->|Không| G3 -``` - -### Screens theo bước - -| Bước | Screen | File | -|------|--------|------| -| Customer | Tìm khách | `spa/workflow/customer-lookup.pen` | -| Service | POS chọn dịch vụ | `spa/desktop.pen` | -| Staff | Chọn nhân viên | `spa/workflow/staff-assign.pen` | -| Payment | Các màn thanh toán | `shared/payment/*.pen` | - -### Loyalty System -``` -Tích điểm: 1 điểm / 10,000₫ -Đổi điểm: 100 điểm = 10,000₫ - -VIP Tiers: -- Silver: 500 điểm (giảm 5%) -- Gold: 2,000 điểm (giảm 10%) -- Platinum: 5,000 điểm (giảm 15%) -``` - ---- - -## 6. Payment Flow - -### Shared Payment Workflow -```mermaid -flowchart LR - A[Chọn phương thức] --> B{Loại?} - B -->|Tiền mặt| C[Nhập số tiền] - B -->|QR| D[Hiển thị QR] - B -->|Thẻ| E[Quẹt thẻ] - C --> F[Tính tiền thối] - D --> G[Chờ xác nhận] - E --> H[Chờ máy POS] - F & G & H --> I[Thành công] - I --> J[In/Gửi hóa đơn] - J --> K[Hoàn tất] -``` - -### Payment Screens - -| Screen | Mô tả | File | -|--------|-------|------| -| Method Select | Chọn Cash/QR/Card | `method-select.pen` | -| Cash | Tính tiền thối | `cash.pen` | -| QR | VietQR/MoMo/ZaloPay | `qr.pen` | -| Success | Xác nhận thành công | `success.pen` | -| Receipt | Mẫu hóa đơn 80mm | `receipt.pen` | - ---- - -## Tổng hợp Files - -``` -src/pages/tPOS/pos/ -├── shared/payment/ # Dùng chung -│ ├── method-select.pen -│ ├── cash.pen -│ ├── qr.pen -│ ├── success.pen -│ └── receipt.pen -├── cafe/ -│ ├── desktop.pen -│ ├── tablet.pen -│ ├── mobile.pen -│ └── workflow/ -│ └── queue-display.pen -├── restaurant/ -│ ├── desktop.pen -│ ├── tablet.pen -│ ├── mobile.pen -│ └── workflow/ -│ ├── table-map.pen -│ └── kitchen-display.pen -├── karaoke/ -│ ├── desktop.pen -│ ├── tablet.pen -│ ├── mobile.pen -│ └── workflow/ -│ ├── room-map.pen -│ └── room-session.pen -└── spa/ - ├── desktop.pen - ├── tablet.pen - ├── mobile.pen - └── workflow/ - ├── customer-lookup.pen - └── staff-assign.pen -``` - -**Tổng: 24 files** (12 device variants + 12 workflow screens) diff --git a/pencil-design/pencil.config.json b/pencil-design/pencil.config.json deleted file mode 100644 index 32adf932..00000000 --- a/pencil-design/pencil.config.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "version": "1.0", - "sourceDir": "src", - "buildDir": "build", - "componentLibrary": "src/components/tPOS-ui-kit.pen", - "buildOptions": { - "minify": false, - "validateAfterBuild": true, - "preserveComments": true - } -} \ No newline at end of file diff --git a/pencil-design/scripts/build.py b/pencil-design/scripts/build.py deleted file mode 100755 index 39238d06..00000000 --- a/pencil-design/scripts/build.py +++ /dev/null @@ -1,535 +0,0 @@ -#!/usr/bin/env python3 -""" -Pencil Design Build System -Merges component library into page files -""" - -import json -import sys -from pathlib import Path -from typing import Dict, Any, List - -class PencilBuilder: - def __init__(self, config_path: str = "pencil.config.json"): - """Initialize builder with config""" - # Get script directory and project root - self.script_dir = Path(__file__).parent.absolute() - self.project_root = self.script_dir.parent - - # Load config from project root - config_full_path = self.project_root / config_path - self.config = self.load_config(config_full_path) - self.components = {} - - def load_config(self, path: Path) -> Dict[str, Any]: - """Load build configuration""" - if path.exists(): - with open(path, 'r') as f: - return json.load(f) - - # Default config - return { - "sourceDir": "src", - "buildDir": "build", - "componentLibrary": "src/components/ui-kit.pen", - "buildOptions": { - "validateAfterBuild": True - } - } - - def _load_components_from_file(self, file_path: Path, components: Dict[str, Any], prefix: str = "") -> None: - """Helper to load components from a single .pen file""" - try: - with open(file_path, 'r') as f: - data = json.load(f) - - def extract_recursive(children: List[Dict], path_prefix: str): - for child in children: - name = child.get('name', '') - - if name: - full_name = f"{path_prefix}/{name}" if path_prefix else name - - # Only store if reusable or if we want to track everything - # For now, let's allow referencing any named frame - components[full_name] = child - - # Store by simple ID/Name too if unique? - # No, strict pathing is better for atomic design - - if 'children' in child: - extract_recursive(child['children'], full_name if name else path_prefix) - - extract_recursive(data.get('children', []), prefix) - - # If this is the main library file (legacy), capture variables too - # For atomic, we handle variables separately or merge them - if not self.variables: - self.variables = data.get('variables', {}) - - except Exception as e: - print(f"⚠️ Error reading {file_path.name}: {e}") - - def load_component_library(self) -> Dict[str, Any]: - """Load all components from ui-kit.pen OR Atomic Design structure""" - - components = {} - self.variables = {} - - # 1. Check for Atomic Design Structure - src_dir = self.project_root / self.config['sourceDir'] - atomic_dirs = ['foundations', 'atoms', 'molecules', 'organisms'] - found_atomic = False - - for atom_dir in atomic_dirs: - dir_path = src_dir / atom_dir - if dir_path.exists(): - found_atomic = True - print(f"Scanning {atom_dir}...") - for pen_file in dir_path.glob('*.pen'): - # Use filename or directory logic as prefix? - # Atomic design usually implies explicit naming in the file, - # so we don't necessarily need file prefix if component names are good. - self._load_components_from_file(pen_file, components) - - if found_atomic: - # Ensure variables are loaded from foundations - tokens_path = src_dir / 'foundations/design-tokens.pen' - if tokens_path.exists(): - with open(tokens_path, 'r') as f: - data = json.load(f) - self.variables = data.get('variables', {}) - - print(f"✓ Loaded {len(components)} components from Atomic Design structure") - return components - - # 2. Fallback to Legacy Single File - lib_path = self.project_root / self.config['componentLibrary'] - - if not lib_path.exists(): - print(f"❌ Component library not found: {lib_path}") - sys.exit(1) - - print(f"Loading legacy library: {lib_path.name}") - self._load_components_from_file(lib_path, components) - - print(f"✓ Loaded {len(components)} components from library") - return components - - def process_component_refs(self, children: List[Dict], injected_components: List[Dict]) -> None: - """Process component_ref and replace with proper Pencil refs""" - for i, child in enumerate(children): - if child.get('type') == 'component_ref': - # Get component name from ref - component_path = child.get('component', '') - - # Extract component name (after #) - if '#' in component_path: - component_name = component_path.split('#')[1] - else: - component_name = component_path - - # Find matching component - component = None - for comp_path, comp_obj in self.components.items(): - if comp_path.endswith(component_name): - component = comp_obj - break - - if component: - # Add component to injected list (if not already added) - comp_id = component.get('id') - if not any(c.get('id') == comp_id for c in injected_components): - injected_components.append(component.copy()) - - # Replace component_ref with proper ref - overrides = child.get('overrides', {}) - - children[i] = { - 'type': 'ref', - 'ref': comp_id, - 'name': child.get('name', f'ref_{comp_id}'), - 'descendants': overrides - } - - # Copy position/size if specified - for key in ['x', 'y', 'width', 'height']: - if key in child: - children[i][key] = child[key] - else: - print(f"⚠️ Component not found: {component_name}") - - # Recurse into children - if 'children' in child: - self.process_component_refs(child['children'], injected_components) - - def build_page(self, page_path: Path, output_path: Path) -> None: - """Build a single page file""" - print(f"Building {page_path.name}...") - - # Load page - with open(page_path, 'r') as f: - page = json.load(f) - - # Collect injected components - injected_components = [] - - # Process all component_ref in the page - self.process_component_refs(page.get('children', []), injected_components) - - # Inject components at the beginning of children array - # (Pencil expects reusable components to be defined before usage) - page['children'] = injected_components + page['children'] - - # Ensure design variables are included - if not page.get('variables'): - page['variables'] = self.variables - - # Write output - output_path.parent.mkdir(parents=True, exist_ok=True) - with open(output_path, 'w') as f: - json.dump(page, f, indent=2) - - print(f" ✓ {len(injected_components)} components injected") - print(f" ✓ Saved to {output_path}") - - def validate_output(self, file_path: Path) -> bool: - """Validate built file""" - try: - with open(file_path, 'r') as f: - data = json.load(f) - - # Check structure - assert 'version' in data, "Missing version field" - assert 'children' in data, "Missing children array" - assert 'variables' in data, "Missing variables object" - - return True - except Exception as e: - print(f"❌ Validation failed: {e}") - return False - - def build_monolithic(self, output_filename: str = "tPOS.pen") -> None: - """Build monolithic file merging all pages and component library""" - print("🔨 Building Monolithic File") - print("=" * 50) - print(f"📁 Project root: {self.project_root}") - print() - - # Load component library - lib_path = self.project_root / self.config['componentLibrary'] - if not lib_path.exists(): - print(f"❌ Component library not found: {lib_path}") - sys.exit(1) - - with open(lib_path, 'r') as f: - lib_data = json.load(f) - - # Get variables from component library - variables = lib_data.get('variables', {}) - - # Find all pages in src/pages/ - src_pages = self.project_root / self.config['sourceDir'] / 'pages' - if not src_pages.exists(): - print(f"❌ Source pages directory not found: {src_pages}") - sys.exit(1) - - pages = sorted(src_pages.glob('*.pen')) - if not pages: - print(f"⚠️ No .pen files found in {src_pages}") - return - - print(f"Found {len(pages)} page(s) to merge:") - for page in pages: - print(f" - {page.name}") - print() - - # Create monolithic structure - monolithic = { - "version": "2.6", - "children": [], - "variables": variables - } - - # Load and add all pages - current_x = 0 # Start position - page_spacing = 470 # Spacing between pages - - for page_path in pages: - with open(page_path, 'r') as f: - page_data = json.load(f) - - # Extract the main page frame (usually first child or children array) - page_children = page_data.get('children', []) - - # Add each top-level frame to monolithic children - for child in page_children: - # Set position for this page - child['x'] = current_x - child['y'] = 0 - - # Calculate next position based on this page's width - page_width = child.get('width', 1440) - if isinstance(page_width, str): # Handle "fill_container" - page_width = 1440 # Default width - - monolithic['children'].append(child) - - # Update position for next page - current_x += page_width + page_spacing - - print(f" ✓ Merged {page_path.name} ({len(page_children)} frame(s)) at x={child.get('x', 0)}") - - # Add component library page at the end - lib_children = lib_data.get('children', []) - for child in lib_children: - child['x'] = current_x - child['y'] = 0 - monolithic['children'].append(child) - - print(f" ✓ Merged component library ({len(lib_children)} frame(s)) at x={current_x}") - print() - - # Write output to project root - output_path = self.project_root / output_filename - with open(output_path, 'w', encoding='utf-8') as f: - json.dump(monolithic, f, indent=2, ensure_ascii=False) - - # Validate - if self.validate_output(output_path): - print(f" ✓ Validation passed") - - print() - print("=" * 50) - print(f"✅ Monolithic build complete!") - print(f"📄 Output: {output_path.absolute()}") - print(f"📊 Total frames: {len(monolithic['children'])}") - print(f"🎨 Design tokens: {len(variables)}") - - def _extract_components_recursive(self, children: List[Dict], gathered: List[Dict]) -> None: - """Recursively find components, unwrapping structural frames""" - for child in children: - # 1. If reusable, ALWAYS keep it (it's explicitly a component) - if child.get('reusable'): - gathered.append(child) - continue - - # 2. Check if it's a structural wrapper (Showcase, Section, Examples, Row) - name = child.get('name', '') - is_frame = child.get('type') == 'frame' - is_structural = any(kw in name.lower() for kw in ['showcase', 'section', 'examples', 'row', 'header', 'container']) - - if is_frame and is_structural: - # Unwrap structural frames and recurse to find reusable components inside - self._extract_components_recursive(child.get('children', []), gathered) - elif is_frame: - # Non-structural frame without reusable flag - # Check if it has nested reusable components inside - nested_reusables = [] - self._find_nested_reusables(child.get('children', []), nested_reusables) - - if nested_reusables: - # Has nested reusables, extract them instead of the wrapper - gathered.extend(nested_reusables) - else: - # No nested reusables, keep this frame as potential component - gathered.append(child) - # Primitives are ignored at extraction level - - def _find_nested_reusables(self, children: List[Dict], found: List[Dict]) -> None: - """Find all nested reusable components""" - for child in children: - if child.get('reusable'): - found.append(child) - elif child.get('type') == 'frame': - self._find_nested_reusables(child.get('children', []), found) - - def build_library(self, output_path: str = None) -> None: - """Build merged component library from Atomic Design files""" - print("🔨 Building Component Library") - print("=" * 50) - - components = [] - variables = {} - - # 1. Load Variables from Foundations - src_dir = self.project_root / self.config['sourceDir'] - tokens_path = src_dir / 'foundations/design-tokens.pen' - - if tokens_path.exists(): - with open(tokens_path, 'r') as f: - data = json.load(f) - variables = data.get('variables', {}) - print(f"✓ Loaded design tokens from {tokens_path.name}") - else: - print(f"⚠️ Design tokens not found at {tokens_path}") - - # 2. Collect Components from Atomic Dirs - atomic_dirs = ['atoms', 'molecules', 'organisms'] - - total_found = 0 - for atom_dir in atomic_dirs: - dir_path = src_dir / atom_dir - if not dir_path.exists(): - continue - - print(f"Scanning {atom_dir}...") - # Sorting ensures deterministic order - use rglob for subdirectories - for pen_file in sorted(dir_path.rglob('*.pen')): - with open(pen_file, 'r') as f: - data = json.load(f) - - # Merge variables from source file (won't override existing tokens) - file_vars = data.get('variables', {}) - for key, val in file_vars.items(): - if key not in variables: - variables[key] = val - - # Use recursive extraction - file_components = [] - self._extract_components_recursive(data.get('children', []), file_components) - - components.extend(file_components) - total_found += len(file_components) - print(f" ✓ Added {len(file_components)} components from {pen_file.name}") - - # 3. Create Library File - library_file = { - "version": "2.6", - "children": [ - { - "type": "frame", - "name": "aPOS Component Library", # Main page name - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 40, - "padding": 40, - "children": components - } - ], - "variables": variables - } - - # Determine output path - if output_path: - out_file = self.project_root / output_path - else: - out_file = self.project_root / self.config['componentLibrary'] - - # Ensure directory exists - out_file.parent.mkdir(parents=True, exist_ok=True) - - with open(out_file, 'w', encoding='utf-8') as f: - json.dump(library_file, f, indent=2) - - print() - print("=" * 50) - print(f"✅ Library build complete!") - print(f"📄 Output: {out_file.absolute()}") - print(f"🧩 Components: {total_found}") - print(f"🎨 Tokens: {len(variables)}") - - def build_all(self) -> None: - """Build all pages""" - print("🔨 Pencil Design Build System") - print("=" * 50) - print(f"📁 Project root: {self.project_root}") - print() - - # Load component library - self.components = self.load_component_library() - - # Find all pages in src/pages/ (relative to project root) - src_pages = self.project_root / self.config['sourceDir'] / 'pages' - build_dir = self.project_root / self.config['buildDir'] - - if not src_pages.exists(): - print(f"❌ Source pages directory not found: {src_pages}") - sys.exit(1) - - pages = list(src_pages.glob('*.pen')) - - if not pages: - print(f"⚠️ No .pen files found in {src_pages}") - return - - print(f"\nBuilding {len(pages)} page(s)...\n") - - # Build each page - built_count = 0 - for page_path in pages: - output_path = build_dir / page_path.name - self.build_page(page_path, output_path) - - # Validate if enabled - if self.config['buildOptions'].get('validateAfterBuild'): - if self.validate_output(output_path): - print(f" ✓ Validation passed") - built_count += 1 - else: - built_count += 1 - - print() - - print("=" * 50) - print(f"✅ Build complete! ({built_count}/{len(pages)} pages)") - print(f"📂 Output: {build_dir.absolute()}") - -def main(): - """Main entry point""" - import argparse - - parser = argparse.ArgumentParser( - description='Pencil Design Build System', - formatter_class=argparse.RawDescriptionHelpFormatter, - epilog=""" -Examples: - # 1. Build Component Library (from Atomic Source) - python build.py --library - - # 2. Build Monolithic File (Pages + Library) - python build.py --monolithic - """ - ) - - parser.add_argument( - '--monolithic', '--mono', '-m', - action='store_true', - help='Build monolithic file (merge all pages and component library)' - ) - - parser.add_argument( - '--library', '--lib', '-l', - action='store_true', - help='Build component library file from Atomic Design sources' - ) - - parser.add_argument( - '--mode', - choices=['standard', 'monolithic', 'library'], - default='standard', - help='Build mode' - ) - - parser.add_argument( - '--output', '-o', - help='Output filename' - ) - - args = parser.parse_args() - - builder = PencilBuilder() - - # Determine build mode - if args.library or args.mode == 'library': - builder.build_library(output_path=args.output) - elif args.monolithic or args.mode == 'monolithic': - # Default output for monolithic is tPOS.pen, but allow override - output = args.output if args.output else "tPOS.pen" - builder.build_monolithic(output_filename=output) - else: - builder.build_all() - -if __name__ == '__main__': - main() diff --git a/pencil-design/scripts/extract-atomic.py b/pencil-design/scripts/extract-atomic.py deleted file mode 100644 index f1dc387a..00000000 --- a/pencil-design/scripts/extract-atomic.py +++ /dev/null @@ -1,216 +0,0 @@ -#!/usr/bin/env python3 -""" -Atomic Design Extraction Script -Extracts components from monolithic UI Kit into Atomic Design structure. -""" - -import json -import os -import sys -from pathlib import Path - -def extract_atomic(): - # Configuration - source_kit = 'src/components/tPOS-ui-kit.pen' - output_base = 'src' - - if not os.path.exists(source_kit): - # Try finding in root if not in src/components - if os.path.exists('tPOS-ui-kit.pen'): - source_kit = 'tPOS-ui-kit.pen' - else: - print(f"❌ Source file not found: {source_kit}") - sys.exit(1) - - print(f"🔨 Extracting from {source_kit}...") - - # Read monolithic UI Kit - with open(source_kit, 'r') as f: - data = json.load(f) - - variables = data.get('variables', {}) - - # Find Component Library page (usually the first child) - children = data.get('children', []) - if not children: - print("❌ No pages found in source file") - sys.exit(1) - - # Assume first page is component library, or find it by name - main_page = children[0] - for child in children: - if "library" in child.get("name", "").lower() or "kit" in child.get("name", "").lower(): - main_page = child - break - - sections = main_page.get('children', []) - print(f"✓ Found library page: {main_page.get('name')}") - - # 1. Create directory structure - dirs = ['foundations', 'atoms', 'molecules', 'organisms'] - for d in dirs: - os.makedirs(os.path.join(output_base, d), exist_ok=True) - - # 2. Extract design tokens - tokens_file = { - 'version': '2.6', - 'children': [{ - 'type': 'frame', - 'name': 'Design Tokens Reference', - 'layout': 'vertical', - 'gap': 20, - 'children': [ - { - 'type': 'text', - 'id': 'tokens_title', - 'name': 'Title', - 'content': 'Design System Tokens', - 'fontSize': 32, - 'fill': '$text-primary' - } - ] - }], - 'variables': variables - } - - with open(os.path.join(output_base, 'foundations', 'design-tokens.pen'), 'w') as f: - json.dump(tokens_file, f, indent=2) - print(f"✅ Created foundations/design-tokens.pen") - - # 3. Categorize components by atomic level - atomic_mapping = { - 'atoms': { - 'patterns': ['button', 'badge', 'input', 'icon', 'typography', 'chip', 'avatar', 'divider'], - 'components': [] - }, - 'molecules': { - 'patterns': ['formfield', 'searchbar', 'cardheader', 'listitem', 'row', 'field', 'dropdown'], - 'components': [] - }, - 'organisms': { - 'patterns': ['card', 'navigation', 'header', 'footer', 'form', 'modal', 'dialog', 'sidebar', 'table'], - 'components': [] - } - } - - # Helper to check if name matches patterns - def matches_pattern(name, patterns): - normalize_name = name.lower() - for p in patterns: - # Check for exact word matches or clear indicators - if p in normalize_name: - return True - return False - - # Categorize each section/component - uncategorized = [] - - for section in sections: - section_name = section.get('name', '').lower() - - # Try to guess based on name - matched = False - - # Check explicit naming first (e.g. "Atom/...") - if "atom" in section_name: - atomic_mapping['atoms']['components'].append(section) - continue - if "molecule" in section_name: - atomic_mapping['molecules']['components'].append(section) - continue - if "organism" in section_name: - atomic_mapping['organisms']['components'].append(section) - continue - - # Check patterns - if matches_pattern(section_name, atomic_mapping['atoms']['patterns']): - atomic_mapping['atoms']['components'].append(section) - matched = True - elif matches_pattern(section_name, atomic_mapping['molecules']['patterns']): - atomic_mapping['molecules']['components'].append(section) - matched = True - elif matches_pattern(section_name, atomic_mapping['organisms']['patterns']): - atomic_mapping['organisms']['components'].append(section) - matched = True - - if not matched: - # Default to organisms for complex unknown things, or store as uncategorized - uncategorized.append(section) - - # 4. Generate atomic files - for level, config in atomic_mapping.items(): - if not config['components']: - continue - - # Group by component type - grouped = {} - for component in config['components']: - name = component.get('name', 'Unknown') - # Extract type (e.g., "Buttons & Actions Section" -> "buttons") - # Simple heuristic: use the first word or the matched pattern - comp_type = "misc" - - # Try to find which pattern matched - name_lower = name.lower() - for p in config['patterns']: - if p in name_lower: - comp_type = p - break - - # Fallback to first word if no pattern matched (for manual assignments) - if comp_type == "misc": - comp_type = name.split()[0].lower().replace('&', '').strip() - - if comp_type not in grouped: - grouped[comp_type] = [] - grouped[comp_type].append(component) - - # Create file for each type - for comp_type, components in grouped.items(): - # Add a showcase wrapper - showcase_wrapper = { - 'type': 'frame', - 'name': f'{comp_type.title()} Showcase', - 'width': 1440, - 'fill': '$bg-page', - 'layout': 'vertical', - 'gap': 80, - 'padding': [80, 120], - 'children': components - } - - output_file = { - 'version': '2.6', - 'children': [showcase_wrapper], - 'variables': variables - } - - # Pluralize filename - filename = f"{comp_type}s.pen" if not comp_type.endswith('s') else f"{comp_type}.pen" - filepath = os.path.join(output_base, level, filename) - - with open(filepath, 'w') as f: - json.dump(output_file, f, indent=2) - - print(f'✅ Created {filepath} ({len(components)} components)') - - # Handle uncategorized - if uncategorized: - print(f"\n⚠️ {len(uncategorized)} components could not be automatically categorized:") - for u in uncategorized: - print(f" - {u.get('name')}") - - # Save them to a 'misc' organism file - filepath = os.path.join(output_base, 'organisms', 'misc.pen') - with open(filepath, 'w') as f: - json.dump({ - 'version': '2.6', - 'children': uncategorized, - 'variables': variables - }, f, indent=2) - print(f"✅ Saved uncategorized to {filepath}") - - print(f'\n🎉 Atomic Design extraction complete!') - -if __name__ == "__main__": - extract_atomic() diff --git a/pencil-design/src/atoms/auth-buttons.pen b/pencil-design/src/atoms/auth-buttons.pen deleted file mode 100644 index e876954c..00000000 --- a/pencil-design/src/atoms/auth-buttons.pen +++ /dev/null @@ -1,461 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "name": "Auth Buttons Showcase", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 80, - "padding": [80, 120], - "children": [ - { - "type": "frame", - "id": "AuthButtonSection", - "name": "Auth Buttons Section", - "width": "fill_container", - "layout": "vertical", - "gap": 48, - "children": [ - { - "type": "frame", - "name": "sectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [6, 14], - "children": [ - { - "type": "text", - "name": "badgeText", - "fill": "$orange-primary", - "content": "AUTH BUTTONS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "name": "shTitle", - "fill": "$text-primary", - "content": "Social Login Buttons", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "Social authentication buttons for customer login and registration.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16 - } - ] - }, - { - "type": "frame", - "name": "buttonsGrid", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "SocialButtonsRow", - "name": "Social Buttons Row", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { "thickness": 1, "fill": "$border-subtle" }, - "layout": "vertical", - "gap": 24, - "padding": 40, - "children": [ - { - "type": "text", - "name": "rowLabel", - "fill": "$text-secondary", - "content": "Social Login Buttons", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "buttonsContainer", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "SocialBtn_Google", - "name": "Atom/SocialButton/Google", - "reusable": true, - "width": 320, - "height": 48, - "fill": "#FFFFFF", - "cornerRadius": 10, - "gap": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "googleIcon", - "width": 20, - "height": 20, - "children": [ - { - "type": "text", - "fill": "#4285F4", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "name": "btnLabel", - "fill": "#1F1F1F", - "content": "Đăng nhập với Google", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SocialBtn_Apple", - "name": "Atom/SocialButton/Apple", - "reusable": true, - "width": 320, - "height": 48, - "fill": "#000000", - "cornerRadius": 10, - "gap": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "name": "appleIcon", - "width": 20, - "height": 20, - "iconFontName": "apple", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "name": "btnLabel", - "fill": "#FFFFFF", - "content": "Đăng nhập với Apple", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SocialBtn_Zalo", - "name": "Atom/SocialButton/Zalo", - "reusable": true, - "width": 320, - "height": 48, - "fill": "#0068FF", - "cornerRadius": 10, - "gap": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "zaloIcon", - "fill": "#FFFFFF", - "content": "Z", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "700" - }, - { - "type": "text", - "name": "btnLabel", - "fill": "#FFFFFF", - "content": "Đăng nhập với Zalo", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SocialBtn_Facebook", - "name": "Atom/SocialButton/Facebook", - "reusable": true, - "width": 320, - "height": 48, - "fill": "#1877F2", - "cornerRadius": 10, - "gap": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "name": "fbIcon", - "width": 20, - "height": 20, - "iconFontName": "facebook", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "name": "btnLabel", - "fill": "#FFFFFF", - "content": "Đăng nhập với Facebook", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "AuthActionButtonsRow", - "name": "Auth Action Buttons Row", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { "thickness": 1, "fill": "$border-subtle" }, - "layout": "vertical", - "gap": 24, - "padding": 40, - "children": [ - { - "type": "text", - "name": "rowLabel", - "fill": "$text-secondary", - "content": "Auth Action Buttons", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "buttonsContainer", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "AuthBtn_Login", - "name": "Atom/AuthButton/Login", - "reusable": true, - "width": 320, - "height": 48, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "colors": [ - { "color": "#FF5C00", "position": 0 }, - { "color": "#FF8A4C", "position": 1 } - ] - }, - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "btnLabel", - "fill": "$text-primary", - "content": "Đăng nhập", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "AuthBtn_Register", - "name": "Atom/AuthButton/Register", - "reusable": true, - "width": 320, - "height": 48, - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "btnLabel", - "fill": "$text-primary", - "content": "Đăng ký", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "AuthBtn_ForgotPassword", - "name": "Atom/AuthButton/ForgotPassword", - "reusable": true, - "height": 48, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "btnLabel", - "fill": "$orange-primary", - "content": "Quên mật khẩu?", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "LoadingStatesRow", - "name": "Loading States Row", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { "thickness": 1, "fill": "$border-subtle" }, - "layout": "vertical", - "gap": 24, - "padding": 40, - "children": [ - { - "type": "text", - "name": "rowLabel", - "fill": "$text-secondary", - "content": "Button States", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "statesContainer", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "AuthBtn_Loading", - "name": "Atom/AuthButton/Loading", - "reusable": true, - "width": 320, - "height": 48, - "fill": "$bg-interactive", - "cornerRadius": 10, - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "name": "loadingIcon", - "width": 18, - "height": 18, - "iconFontName": "loader-2", - "iconFontFamily": "lucide", - "fill": "$text-muted" - }, - { - "type": "text", - "name": "btnLabel", - "fill": "$text-muted", - "content": "Đang xử lý...", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "AuthBtn_Disabled", - "name": "Atom/AuthButton/Disabled", - "reusable": true, - "width": 320, - "height": 48, - "fill": "$bg-interactive", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "btnLabel", - "fill": "$text-disabled", - "content": "Đăng nhập", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-page": { "type": "color", "value": "#0A0A0B" }, - "bg-surface": { "type": "color", "value": "#111113" }, - "bg-elevated": { "type": "color", "value": "#1A1A1D" }, - "bg-interactive": { "type": "color", "value": "#2A2A2E" }, - "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" }, - "text-muted": { "type": "color", "value": "#6B6B70" }, - "text-disabled": { "type": "color", "value": "#4B4B50" } - } -} diff --git a/pencil-design/src/atoms/auth-inputs.pen b/pencil-design/src/atoms/auth-inputs.pen deleted file mode 100644 index fbf4c6f4..00000000 --- a/pencil-design/src/atoms/auth-inputs.pen +++ /dev/null @@ -1,782 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "name": "Auth Inputs Showcase", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 80, - "padding": [80, 120], - "children": [ - { - "type": "frame", - "id": "AuthInputSection", - "name": "Auth Inputs Section", - "width": "fill_container", - "layout": "vertical", - "gap": 48, - "children": [ - { - "type": "frame", - "name": "sectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [6, 14], - "children": [ - { - "type": "text", - "name": "badgeText", - "fill": "$orange-primary", - "content": "AUTH INPUTS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "name": "shTitle", - "fill": "$text-primary", - "content": "Authentication Inputs", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "Form inputs for login, registration, and verification flows.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16 - } - ] - }, - { - "type": "frame", - "name": "inputsGrid", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "TextInputRow", - "name": "Text Inputs Row", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { "thickness": 1, "fill": "$border-subtle" }, - "layout": "vertical", - "gap": 24, - "padding": 40, - "children": [ - { - "type": "text", - "name": "rowLabel", - "fill": "$text-secondary", - "content": "Text Inputs", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "inputsContainer", - "gap": 24, - "children": [ - { - "type": "frame", - "id": "AuthInput_Text_Default", - "name": "Atom/AuthInput/Text/Default", - "reusable": true, - "width": 320, - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "padding": [0, 16], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "AuthInput_Text_Placeholder", - "name": "placeholder", - "fill": "$text-muted", - "content": "Email hoặc số điện thoại", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "id": "AuthInput_Text_Filled", - "name": "Atom/AuthInput/Text/Filled", - "reusable": true, - "width": 320, - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-focus" }, - "padding": [0, 16], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "AuthInput_Text_Value", - "name": "value", - "fill": "$text-primary", - "content": "0912345678", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "id": "AuthInput_Text_Error", - "name": "Atom/AuthInput/Text/Error", - "reusable": true, - "width": 320, - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "frame", - "name": "inputWrapper", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$status-error" }, - "padding": [0, 16], - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "value", - "fill": "$text-primary", - "content": "invalid@email", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "text", - "name": "errorText", - "fill": "$status-error", - "content": "Email không hợp lệ", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PasswordInputRow", - "name": "Password Inputs Row", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { "thickness": 1, "fill": "$border-subtle" }, - "layout": "vertical", - "gap": 24, - "padding": 40, - "children": [ - { - "type": "text", - "name": "rowLabel", - "fill": "$text-secondary", - "content": "Password Inputs", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "inputsContainer", - "gap": 24, - "children": [ - { - "type": "frame", - "id": "AuthInput_Password_Default", - "name": "Atom/AuthInput/Password/Default", - "reusable": true, - "width": 320, - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "padding": [0, 16], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "AuthInput_Password_Placeholder", - "name": "placeholder", - "fill": "$text-muted", - "content": "Mật khẩu", - "fontFamily": "Roboto", - "fontSize": 14 - }, - { - "type": "icon_font", - "name": "toggleIcon", - "width": 18, - "height": 18, - "iconFontName": "eye-off", - "iconFontFamily": "lucide", - "fill": "$text-muted" - } - ] - }, - { - "type": "frame", - "id": "AuthInput_Password_Visible", - "name": "Atom/AuthInput/Password/Visible", - "reusable": true, - "width": 320, - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-focus" }, - "padding": [0, 16], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "value", - "fill": "$text-primary", - "content": "myPassword123", - "fontFamily": "Roboto", - "fontSize": 14 - }, - { - "type": "icon_font", - "name": "toggleIcon", - "width": 18, - "height": 18, - "iconFontName": "eye", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - } - ] - }, - { - "type": "frame", - "id": "AuthInput_Password_Hidden", - "name": "Atom/AuthInput/Password/Hidden", - "reusable": true, - "width": 320, - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-focus" }, - "padding": [0, 16], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "masked", - "fill": "$text-primary", - "content": "••••••••••••", - "fontFamily": "Roboto", - "fontSize": 14, - "letterSpacing": 2 - }, - { - "type": "icon_font", - "name": "toggleIcon", - "width": 18, - "height": 18, - "iconFontName": "eye-off", - "iconFontFamily": "lucide", - "fill": "$text-muted" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PINInputRow", - "name": "PIN Inputs Row", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { "thickness": 1, "fill": "$border-subtle" }, - "layout": "vertical", - "gap": 24, - "padding": 40, - "children": [ - { - "type": "text", - "name": "rowLabel", - "fill": "$text-secondary", - "content": "PIN Inputs (Cashier/Staff)", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "inputsContainer", - "gap": 24, - "alignItems": "start", - "children": [ - { - "type": "frame", - "id": "AuthInput_PIN_Empty", - "name": "Atom/AuthInput/PIN/Empty", - "reusable": true, - "gap": 12, - "children": [ - { - "type": "frame", - "name": "digit1", - "width": 56, - "height": 64, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - }, - { - "type": "frame", - "name": "digit2", - "width": 56, - "height": 64, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - }, - { - "type": "frame", - "name": "digit3", - "width": 56, - "height": 64, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - }, - { - "type": "frame", - "name": "digit4", - "width": 56, - "height": 64, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - }, - { - "type": "frame", - "name": "digit5", - "width": 56, - "height": 64, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - }, - { - "type": "frame", - "name": "digit6", - "width": 56, - "height": 64, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - } - ] - }, - { - "type": "frame", - "id": "AuthInput_PIN_Partial", - "name": "Atom/AuthInput/PIN/Partial", - "reusable": true, - "gap": 12, - "children": [ - { - "type": "frame", - "name": "digit1", - "width": 56, - "height": 64, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { "thickness": 1, "fill": "$border-focus" }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "dot", - "width": 12, - "height": 12, - "fill": "$orange-primary", - "cornerRadius": 6 - } - ] - }, - { - "type": "frame", - "name": "digit2", - "width": 56, - "height": 64, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { "thickness": 1, "fill": "$border-focus" }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "dot", - "width": 12, - "height": 12, - "fill": "$orange-primary", - "cornerRadius": 6 - } - ] - }, - { - "type": "frame", - "name": "digit3", - "width": 56, - "height": 64, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { "thickness": 2, "fill": "$orange-primary" }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - }, - { - "type": "frame", - "name": "digit4", - "width": 56, - "height": 64, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - }, - { - "type": "frame", - "name": "digit5", - "width": 56, - "height": 64, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - }, - { - "type": "frame", - "name": "digit6", - "width": 56, - "height": 64, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "OTPInputRow", - "name": "OTP Inputs Row", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { "thickness": 1, "fill": "$border-subtle" }, - "layout": "vertical", - "gap": 24, - "padding": 40, - "children": [ - { - "type": "text", - "name": "rowLabel", - "fill": "$text-secondary", - "content": "OTP Inputs (Customer Verification)", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "inputsContainer", - "gap": 24, - "alignItems": "start", - "children": [ - { - "type": "frame", - "id": "AuthInput_OTP_Empty", - "name": "Atom/AuthInput/OTP/Empty", - "reusable": true, - "gap": 8, - "children": [ - { - "type": "frame", - "name": "d1", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - }, - { - "type": "frame", - "name": "d2", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - }, - { - "type": "frame", - "name": "d3", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - }, - { - "type": "text", - "name": "separator", - "fill": "$text-muted", - "content": "—", - "fontFamily": "Roboto", - "fontSize": 20 - }, - { - "type": "frame", - "name": "d4", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - }, - { - "type": "frame", - "name": "d5", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - }, - { - "type": "frame", - "name": "d6", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - } - ] - }, - { - "type": "frame", - "id": "AuthInput_OTP_Filled", - "name": "Atom/AuthInput/OTP/Filled", - "reusable": true, - "gap": 8, - "children": [ - { - "type": "frame", - "name": "d1", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$status-success" }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "text", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" } - ] - }, - { - "type": "frame", - "name": "d2", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$status-success" }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "text", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" } - ] - }, - { - "type": "frame", - "name": "d3", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$status-success" }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "text", "fill": "$text-primary", "content": "3", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" } - ] - }, - { - "type": "text", - "name": "separator", - "fill": "$status-success", - "content": "—", - "fontFamily": "Roboto", - "fontSize": 20 - }, - { - "type": "frame", - "name": "d4", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$status-success" }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "text", "fill": "$text-primary", "content": "4", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" } - ] - }, - { - "type": "frame", - "name": "d5", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$status-success" }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "text", "fill": "$text-primary", "content": "5", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" } - ] - }, - { - "type": "frame", - "name": "d6", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$status-success" }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "text", "fill": "$text-primary", "content": "6", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" } - ] - } - ] - } - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-page": { "type": "color", "value": "#0A0A0B" }, - "bg-surface": { "type": "color", "value": "#111113" }, - "bg-elevated": { "type": "color", "value": "#1A1A1D" }, - "border-default": { "type": "color", "value": "#2A2A2E" }, - "border-subtle": { "type": "color", "value": "#1F1F23" }, - "border-focus": { "type": "color", "value": "#FF5C00" }, - "orange-primary": { "type": "color", "value": "#FF5C00" }, - "text-primary": { "type": "color", "value": "#FFFFFF" }, - "text-secondary": { "type": "color", "value": "#ADADB0" }, - "text-tertiary": { "type": "color", "value": "#8B8B90" }, - "text-muted": { "type": "color", "value": "#6B6B70" }, - "status-error": { "type": "color", "value": "#EF4444" }, - "status-success": { "type": "color", "value": "#22C55E" } - } -} diff --git a/pencil-design/src/atoms/badges.pen b/pencil-design/src/atoms/badges.pen deleted file mode 100644 index 2fad214d..00000000 --- a/pencil-design/src/atoms/badges.pen +++ /dev/null @@ -1,245 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "name": "Badge Showcase", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 80, - "padding": [ - 80, - 120 - ], - "children": [ - { - "type": "frame", - "id": "BadgeSection", - "name": "Badges & Labels Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "BadgeSectHeader", - "name": "badgeSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "sokxt", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "NK10q", - "name": "badgeText", - "fill": "$orange-primary", - "content": "BADGES & LABELS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "HNlXw", - "name": "shTitle", - "fill": "$text-primary", - "content": "Status Indicators", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "bPaMT", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "Small labels and badges for highlighting features, categories, or status.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "BadgeRow", - "name": "badgeExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "gap": 20, - "padding": 40, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Badge1", - "name": "exampleSectionLabel", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "4yAKs", - "name": "badgeText", - "fill": "$orange-primary", - "content": "SECTION LABEL", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "Badge2", - "name": "exampleHeroBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "gap": 8, - "padding": [ - 8, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "j3ksJ", - "name": "heroBadgeDot", - "fill": "$orange-primary", - "width": 8, - "height": 8 - }, - { - "type": "text", - "id": "zzm6Q", - "name": "heroBadgeText", - "fill": "$orange-primary", - "content": "Hero Badge with Dot", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "Badge3", - "name": "exampleChip", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "Rb7IM", - "name": "chipText", - "fill": "$text-secondary", - "content": "Chip Label", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-elevated": { - "type": "color", - "value": "#1A1A1D" - }, - "bg-interactive": { - "type": "color", - "value": "#2A2A2E" - }, - "bg-page": { - "type": "color", - "value": "#0A0A0B" - }, - "bg-surface": { - "type": "color", - "value": "#111113" - }, - "border-default": { - "type": "color", - "value": "#2A2A2E" - }, - "border-subtle": { - "type": "color", - "value": "#1F1F23" - }, - "green-success": { - "type": "color", - "value": "#22C55E" - }, - "orange-light": { - "type": "color", - "value": "#FF8A4C" - }, - "orange-primary": { - "type": "color", - "value": "#FF5C00" - }, - "text-disabled": { - "type": "color", - "value": "#6B6B70" - }, - "text-muted": { - "type": "color", - "value": "#FFFFFFCC" - }, - "text-primary": { - "type": "color", - "value": "#FFFFFF" - }, - "text-secondary": { - "type": "color", - "value": "#ADADB0" - }, - "text-tertiary": { - "type": "color", - "value": "#8B8B90" - } - } -} \ No newline at end of file diff --git a/pencil-design/src/atoms/buttons.pen b/pencil-design/src/atoms/buttons.pen deleted file mode 100644 index 48d59ad5..00000000 --- a/pencil-design/src/atoms/buttons.pen +++ /dev/null @@ -1,353 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "name": "Button Showcase", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 80, - "padding": [ - 80, - 120 - ], - "children": [ - { - "type": "frame", - "id": "BtnSection", - "name": "Buttons & Actions Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "BtnSectHeader", - "name": "buttonSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "coD4i", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "MOLga", - "name": "badgeText", - "fill": "$orange-primary", - "content": "BUTTONS & ACTIONS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "xqghZ", - "name": "shTitle", - "fill": "$text-primary", - "content": "Interactive Elements", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "zPj8L", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "Primary and secondary button variants for calls-to-action and navigation.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "BtnRow", - "name": "buttonExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "gap": 20, - "padding": 40, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PrimaryBtn1", - "name": "examplePrimaryBtn", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "xMjoJ", - "name": "btnPIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "yR7mY", - "name": "btnPText", - "fill": "$text-primary", - "content": "Primary Button", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "PrimaryBtn2", - "name": "examplePrimaryBtnIcon", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "qkXav", - "name": "btnPIcon", - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "nrUMI", - "name": "btnPText", - "fill": "$text-primary", - "content": "With Icon", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "SecondaryBtn1", - "name": "exampleSecondaryBtn", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "qM2TY", - "name": "btnSIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "ixoFp", - "name": "btnSText", - "fill": "$text-primary", - "content": "Secondary Button", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SecondaryBtn2", - "name": "exampleSecondaryBtnIcon", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "6Hmda", - "name": "btnSIcon", - "width": 16, - "height": 16, - "iconFontName": "play", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "4D31l", - "name": "btnSText", - "fill": "$text-primary", - "content": "With Icon", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-elevated": { - "type": "color", - "value": "#1A1A1D" - }, - "bg-interactive": { - "type": "color", - "value": "#2A2A2E" - }, - "bg-page": { - "type": "color", - "value": "#0A0A0B" - }, - "bg-surface": { - "type": "color", - "value": "#111113" - }, - "border-default": { - "type": "color", - "value": "#2A2A2E" - }, - "border-subtle": { - "type": "color", - "value": "#1F1F23" - }, - "green-success": { - "type": "color", - "value": "#22C55E" - }, - "orange-light": { - "type": "color", - "value": "#FF8A4C" - }, - "orange-primary": { - "type": "color", - "value": "#FF5C00" - }, - "text-disabled": { - "type": "color", - "value": "#6B6B70" - }, - "text-muted": { - "type": "color", - "value": "#FFFFFFCC" - }, - "text-primary": { - "type": "color", - "value": "#FFFFFF" - }, - "text-secondary": { - "type": "color", - "value": "#ADADB0" - }, - "text-tertiary": { - "type": "color", - "value": "#8B8B90" - } - } -} \ No newline at end of file diff --git a/pencil-design/src/atoms/pos-controls.pen b/pencil-design/src/atoms/pos-controls.pen deleted file mode 100644 index b13d909d..00000000 --- a/pencil-design/src/atoms/pos-controls.pen +++ /dev/null @@ -1,484 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "name": "POS Controls Showcase", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 80, - "padding": [80, 120], - "children": [ - { - "type": "frame", - "id": "NumpadKeysSection", - "name": "Numpad Keys Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "NumpadHeader", - "name": "numpadSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "NumpadBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [6, 14], - "children": [ - { - "type": "text", - "id": "NumpadBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "NUMPAD KEYS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "NumpadTitle", - "name": "shTitle", - "fill": "$text-primary", - "content": "Touch-First Keypad", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "NumpadDesc", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "Large touch targets (64px) for fast, error-free input in POS environments.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "NumpadExamples", - "name": "numpadKeyExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "gap": 16, - "padding": 40, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "NumKey1", - "name": "Atom/NumpadKey/Standard", - "reusable": true, - "width": 64, - "height": 64, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NumKey1Text", - "name": "keyLabel", - "fill": "$text-primary", - "content": "1", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NumKey2", - "name": "exampleNumpadKey2", - "width": 64, - "height": 64, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NumKey2Text", - "name": "keyLabel", - "fill": "$text-primary", - "content": "2", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NumKey3", - "name": "exampleNumpadKey3", - "width": 64, - "height": 64, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NumKey3Text", - "name": "keyLabel", - "fill": "$text-primary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NumKeyClear", - "name": "Atom/NumpadKey/Action/Clear", - "reusable": true, - "width": 64, - "height": 64, - "fill": "#EF444418", - "cornerRadius": 12, - "stroke": {"thickness": 1, "fill": "#EF4444"}, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NumKeyClearText", - "name": "keyLabel", - "fill": "#EF4444", - "content": "C", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "NumKeyEnter", - "name": "Atom/NumpadKey/Action/Enter", - "reusable": true, - "width": 64, - "height": 64, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": {"height": 1}, - "colors": [ - {"color": "#FF5C00", "position": 0}, - {"color": "#FF8A4C", "position": 1} - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "NumKeyEnterIcon", - "name": "keyIcon", - "width": 24, - "height": 24, - "iconFontName": "corner-down-left", - "iconFontFamily": "lucide", - "fill": "$text-primary" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "QuantitySection", - "name": "Quantity Controls Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "QtyHeader", - "name": "qtySectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "QtyBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [6, 14], - "children": [ - { - "type": "text", - "id": "QtyBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "QUANTITY CONTROLS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "QtyTitle", - "name": "shTitle", - "fill": "$text-primary", - "content": "Quantity Toggles", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - } - ] - }, - { - "type": "frame", - "id": "QtyExamples", - "name": "quantityControlExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "gap": 32, - "padding": 40, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "QtyToggle1", - "name": "Atom/QuantityToggle", - "reusable": true, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "gap": 0, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "QtyMinus", - "name": "minusBtn", - "width": 48, - "height": 48, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "QtyMinusIcon", - "name": "icon", - "width": 20, - "height": 20, - "iconFontName": "minus", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - }, - { - "type": "frame", - "id": "QtyValue", - "name": "valueDisplay", - "width": 56, - "height": 48, - "fill": "$bg-surface", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "QtyValueText", - "name": "value", - "fill": "$text-primary", - "content": "1", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "QtyPlus", - "name": "plusBtn", - "width": 48, - "height": 48, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "QtyPlusIcon", - "name": "icon", - "width": 20, - "height": 20, - "iconFontName": "plus", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "StatusGroup", - "name": "statusIndicatorExamples", - "gap": 24, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "StatusOnline", - "name": "Atom/StatusIndicator/Online", - "reusable": true, - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "StatusOnlineDot", - "name": "dot", - "width": 10, - "height": 10, - "fill": "$green-success" - }, - { - "type": "text", - "id": "StatusOnlineText", - "name": "label", - "fill": "$text-secondary", - "content": "Online", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "StatusOffline", - "name": "Atom/StatusIndicator/Offline", - "reusable": true, - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "StatusOfflineDot", - "name": "dot", - "width": 10, - "height": 10, - "fill": "#EF4444" - }, - { - "type": "text", - "id": "StatusOfflineText", - "name": "label", - "fill": "$text-secondary", - "content": "Offline", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "StatusBusy", - "name": "Atom/StatusIndicator/Busy", - "reusable": true, - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "StatusBusyDot", - "name": "dot", - "width": 10, - "height": 10, - "fill": "#F59E0B" - }, - { - "type": "text", - "id": "StatusBusyText", - "name": "label", - "fill": "$text-secondary", - "content": "Busy", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "bg-surface": {"type": "color", "value": "#111113"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "green-success": {"type": "color", "value": "#22C55E"}, - "orange-light": {"type": "color", "value": "#FF8A4C"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-disabled": {"type": "color", "value": "#6B6B70"}, - "text-muted": {"type": "color", "value": "#FFFFFFCC"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/atoms/typographys.pen b/pencil-design/src/atoms/typographys.pen deleted file mode 100644 index 3de45b64..00000000 --- a/pencil-design/src/atoms/typographys.pen +++ /dev/null @@ -1,301 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "name": "Typography Showcase", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 80, - "padding": [ - 80, - 120 - ], - "children": [ - { - "type": "frame", - "id": "TypoSection", - "name": "Typography & Branding Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "TypoSectHeader", - "name": "typoSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Cfoh0", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "JsBB8", - "name": "badgeText", - "fill": "$orange-primary", - "content": "TYPOGRAPHY & BRANDING", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "RuoWE", - "name": "shTitle", - "fill": "$text-primary", - "content": "Brand Identity Elements", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "DCNsc", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "Logo, section headers, links, and typography styles.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "TypoRow", - "name": "typoExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 32, - "padding": 40, - "children": [ - { - "type": "frame", - "id": "LogoRow", - "name": "logoRow", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "LogoEx", - "name": "exampleLogo", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "8osja", - "name": "logoDot", - "fill": "$orange-primary", - "width": 10, - "height": 10 - }, - { - "type": "text", - "id": "7V59t", - "name": "logoText", - "fill": "$text-primary", - "content": "aPOS", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "600", - "letterSpacing": 3 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SectHeader", - "name": "exampleSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "n6zyD", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "mrU8q", - "name": "badgeText", - "fill": "$orange-primary", - "content": "CATEGORY", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "ivisG", - "name": "shTitle", - "fill": "$text-primary", - "content": "Section Header Component", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "YFM0A", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "This is a reusable section header with badge, title, and description.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "NavLinkRow", - "name": "navLinkRow", - "width": "fill_container", - "gap": 24, - "justifyContent": "center", - "children": [ - { - "type": "text", - "id": "NavLink1", - "name": "exampleNavLink1", - "fill": "$text-secondary", - "content": "Features", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "NavLink2", - "name": "exampleNavLink2", - "fill": "$text-secondary", - "content": "Pricing", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "NavLink3", - "name": "exampleNavLink3", - "fill": "$text-secondary", - "content": "Contact", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-elevated": { - "type": "color", - "value": "#1A1A1D" - }, - "bg-interactive": { - "type": "color", - "value": "#2A2A2E" - }, - "bg-page": { - "type": "color", - "value": "#0A0A0B" - }, - "bg-surface": { - "type": "color", - "value": "#111113" - }, - "border-default": { - "type": "color", - "value": "#2A2A2E" - }, - "border-subtle": { - "type": "color", - "value": "#1F1F23" - }, - "green-success": { - "type": "color", - "value": "#22C55E" - }, - "orange-light": { - "type": "color", - "value": "#FF8A4C" - }, - "orange-primary": { - "type": "color", - "value": "#FF5C00" - }, - "text-disabled": { - "type": "color", - "value": "#6B6B70" - }, - "text-muted": { - "type": "color", - "value": "#FFFFFFCC" - }, - "text-primary": { - "type": "color", - "value": "#FFFFFF" - }, - "text-secondary": { - "type": "color", - "value": "#ADADB0" - }, - "text-tertiary": { - "type": "color", - "value": "#8B8B90" - } - } -} \ No newline at end of file diff --git a/pencil-design/src/components/tPOS-ui-kit.pen b/pencil-design/src/components/tPOS-ui-kit.pen deleted file mode 100644 index cc79fecf..00000000 --- a/pencil-design/src/components/tPOS-ui-kit.pen +++ /dev/null @@ -1,13453 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "name": "aPOS Component Library", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 40, - "padding": 40, - "children": [ - { - "type": "frame", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "name": "badgeText", - "fill": "$orange-primary", - "content": "AUTH BUTTONS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "SocialBtn_Google", - "name": "Atom/SocialButton/Google", - "reusable": true, - "width": 320, - "height": 48, - "fill": "#FFFFFF", - "cornerRadius": 10, - "gap": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "googleIcon", - "width": 20, - "height": 20, - "children": [ - { - "type": "text", - "fill": "#4285F4", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "name": "btnLabel", - "fill": "#1F1F1F", - "content": "\u0110\u0103ng nh\u1eadp v\u1edbi Google", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SocialBtn_Apple", - "name": "Atom/SocialButton/Apple", - "reusable": true, - "width": 320, - "height": 48, - "fill": "#000000", - "cornerRadius": 10, - "gap": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "name": "appleIcon", - "width": 20, - "height": 20, - "iconFontName": "apple", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "name": "btnLabel", - "fill": "#FFFFFF", - "content": "\u0110\u0103ng nh\u1eadp v\u1edbi Apple", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SocialBtn_Zalo", - "name": "Atom/SocialButton/Zalo", - "reusable": true, - "width": 320, - "height": 48, - "fill": "#0068FF", - "cornerRadius": 10, - "gap": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "zaloIcon", - "fill": "#FFFFFF", - "content": "Z", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "700" - }, - { - "type": "text", - "name": "btnLabel", - "fill": "#FFFFFF", - "content": "\u0110\u0103ng nh\u1eadp v\u1edbi Zalo", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SocialBtn_Facebook", - "name": "Atom/SocialButton/Facebook", - "reusable": true, - "width": 320, - "height": 48, - "fill": "#1877F2", - "cornerRadius": 10, - "gap": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "name": "fbIcon", - "width": 20, - "height": 20, - "iconFontName": "facebook", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "name": "btnLabel", - "fill": "#FFFFFF", - "content": "\u0110\u0103ng nh\u1eadp v\u1edbi Facebook", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "AuthBtn_Login", - "name": "Atom/AuthButton/Login", - "reusable": true, - "width": 320, - "height": 48, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "btnLabel", - "fill": "$text-primary", - "content": "\u0110\u0103ng nh\u1eadp", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "AuthBtn_Register", - "name": "Atom/AuthButton/Register", - "reusable": true, - "width": 320, - "height": 48, - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "btnLabel", - "fill": "$text-primary", - "content": "\u0110\u0103ng k\u00fd", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "AuthBtn_ForgotPassword", - "name": "Atom/AuthButton/ForgotPassword", - "reusable": true, - "height": 48, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "btnLabel", - "fill": "$orange-primary", - "content": "Qu\u00ean m\u1eadt kh\u1ea9u?", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "AuthBtn_Loading", - "name": "Atom/AuthButton/Loading", - "reusable": true, - "width": 320, - "height": 48, - "fill": "$bg-interactive", - "cornerRadius": 10, - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "name": "loadingIcon", - "width": 18, - "height": 18, - "iconFontName": "loader-2", - "iconFontFamily": "lucide", - "fill": "$text-muted" - }, - { - "type": "text", - "name": "btnLabel", - "fill": "$text-muted", - "content": "\u0110ang x\u1eed l\u00fd...", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "AuthBtn_Disabled", - "name": "Atom/AuthButton/Disabled", - "reusable": true, - "width": 320, - "height": 48, - "fill": "$bg-interactive", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "btnLabel", - "fill": "$text-disabled", - "content": "\u0110\u0103ng nh\u1eadp", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "name": "badgeText", - "fill": "$orange-primary", - "content": "AUTH INPUTS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "AuthInput_Text_Default", - "name": "Atom/AuthInput/Text/Default", - "reusable": true, - "width": 320, - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "padding": [ - 0, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "AuthInput_Text_Placeholder", - "name": "placeholder", - "fill": "$text-muted", - "content": "Email ho\u1eb7c s\u1ed1 \u0111i\u1ec7n tho\u1ea1i", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "id": "AuthInput_Text_Filled", - "name": "Atom/AuthInput/Text/Filled", - "reusable": true, - "width": 320, - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-focus" - }, - "padding": [ - 0, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "AuthInput_Text_Value", - "name": "value", - "fill": "$text-primary", - "content": "0912345678", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "id": "AuthInput_Text_Error", - "name": "Atom/AuthInput/Text/Error", - "reusable": true, - "width": 320, - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "frame", - "name": "inputWrapper", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$status-error" - }, - "padding": [ - 0, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "value", - "fill": "$text-primary", - "content": "invalid@email", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "text", - "name": "errorText", - "fill": "$status-error", - "content": "Email kh\u00f4ng h\u1ee3p l\u1ec7", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - }, - { - "type": "frame", - "id": "AuthInput_Password_Default", - "name": "Atom/AuthInput/Password/Default", - "reusable": true, - "width": 320, - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "padding": [ - 0, - 16 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "AuthInput_Password_Placeholder", - "name": "placeholder", - "fill": "$text-muted", - "content": "M\u1eadt kh\u1ea9u", - "fontFamily": "Roboto", - "fontSize": 14 - }, - { - "type": "icon_font", - "name": "toggleIcon", - "width": 18, - "height": 18, - "iconFontName": "eye-off", - "iconFontFamily": "lucide", - "fill": "$text-muted" - } - ] - }, - { - "type": "frame", - "id": "AuthInput_Password_Visible", - "name": "Atom/AuthInput/Password/Visible", - "reusable": true, - "width": 320, - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-focus" - }, - "padding": [ - 0, - 16 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "value", - "fill": "$text-primary", - "content": "myPassword123", - "fontFamily": "Roboto", - "fontSize": 14 - }, - { - "type": "icon_font", - "name": "toggleIcon", - "width": 18, - "height": 18, - "iconFontName": "eye", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - } - ] - }, - { - "type": "frame", - "id": "AuthInput_Password_Hidden", - "name": "Atom/AuthInput/Password/Hidden", - "reusable": true, - "width": 320, - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-focus" - }, - "padding": [ - 0, - 16 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "masked", - "fill": "$text-primary", - "content": "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", - "fontFamily": "Roboto", - "fontSize": 14, - "letterSpacing": 2 - }, - { - "type": "icon_font", - "name": "toggleIcon", - "width": 18, - "height": 18, - "iconFontName": "eye-off", - "iconFontFamily": "lucide", - "fill": "$text-muted" - } - ] - }, - { - "type": "frame", - "id": "AuthInput_PIN_Empty", - "name": "Atom/AuthInput/PIN/Empty", - "reusable": true, - "gap": 12, - "children": [ - { - "type": "frame", - "name": "digit1", - "width": 56, - "height": 64, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - }, - { - "type": "frame", - "name": "digit2", - "width": 56, - "height": 64, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - }, - { - "type": "frame", - "name": "digit3", - "width": 56, - "height": 64, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - }, - { - "type": "frame", - "name": "digit4", - "width": 56, - "height": 64, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - }, - { - "type": "frame", - "name": "digit5", - "width": 56, - "height": 64, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - }, - { - "type": "frame", - "name": "digit6", - "width": 56, - "height": 64, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - } - ] - }, - { - "type": "frame", - "id": "AuthInput_PIN_Partial", - "name": "Atom/AuthInput/PIN/Partial", - "reusable": true, - "gap": 12, - "children": [ - { - "type": "frame", - "name": "digit1", - "width": 56, - "height": 64, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-focus" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "dot", - "width": 12, - "height": 12, - "fill": "$orange-primary", - "cornerRadius": 6 - } - ] - }, - { - "type": "frame", - "name": "digit2", - "width": 56, - "height": 64, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-focus" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "dot", - "width": 12, - "height": 12, - "fill": "$orange-primary", - "cornerRadius": 6 - } - ] - }, - { - "type": "frame", - "name": "digit3", - "width": 56, - "height": 64, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { - "thickness": 2, - "fill": "$orange-primary" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - }, - { - "type": "frame", - "name": "digit4", - "width": 56, - "height": 64, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - }, - { - "type": "frame", - "name": "digit5", - "width": 56, - "height": 64, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - }, - { - "type": "frame", - "name": "digit6", - "width": 56, - "height": 64, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - } - ] - }, - { - "type": "frame", - "id": "AuthInput_OTP_Empty", - "name": "Atom/AuthInput/OTP/Empty", - "reusable": true, - "gap": 8, - "children": [ - { - "type": "frame", - "name": "d1", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - }, - { - "type": "frame", - "name": "d2", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - }, - { - "type": "frame", - "name": "d3", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - }, - { - "type": "text", - "name": "separator", - "fill": "$text-muted", - "content": "\u2014", - "fontFamily": "Roboto", - "fontSize": 20 - }, - { - "type": "frame", - "name": "d4", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - }, - { - "type": "frame", - "name": "d5", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - }, - { - "type": "frame", - "name": "d6", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - } - ] - }, - { - "type": "frame", - "id": "AuthInput_OTP_Filled", - "name": "Atom/AuthInput/OTP/Filled", - "reusable": true, - "gap": 8, - "children": [ - { - "type": "frame", - "name": "d1", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$status-success" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "$text-primary", - "content": "1", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "name": "d2", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$status-success" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "$text-primary", - "content": "2", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "name": "d3", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$status-success" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "$text-primary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "name": "separator", - "fill": "$status-success", - "content": "\u2014", - "fontFamily": "Roboto", - "fontSize": 20 - }, - { - "type": "frame", - "name": "d4", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$status-success" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "$text-primary", - "content": "4", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "name": "d5", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$status-success" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "$text-primary", - "content": "5", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "name": "d6", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$status-success" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "$text-primary", - "content": "6", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "sokxt", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "NK10q", - "name": "badgeText", - "fill": "$orange-primary", - "content": "BADGES & LABELS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "Badge2", - "name": "exampleHeroBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "gap": 8, - "padding": [ - 8, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "j3ksJ", - "name": "heroBadgeDot", - "fill": "$orange-primary", - "width": 8, - "height": 8 - }, - { - "type": "text", - "id": "zzm6Q", - "name": "heroBadgeText", - "fill": "$orange-primary", - "content": "Hero Badge with Dot", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "Badge3", - "name": "exampleChip", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "Rb7IM", - "name": "chipText", - "fill": "$text-secondary", - "content": "Chip Label", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "coD4i", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "MOLga", - "name": "badgeText", - "fill": "$orange-primary", - "content": "BUTTONS & ACTIONS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "PrimaryBtn1", - "name": "examplePrimaryBtn", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "xMjoJ", - "name": "btnPIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "yR7mY", - "name": "btnPText", - "fill": "$text-primary", - "content": "Primary Button", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "PrimaryBtn2", - "name": "examplePrimaryBtnIcon", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "qkXav", - "name": "btnPIcon", - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "nrUMI", - "name": "btnPText", - "fill": "$text-primary", - "content": "With Icon", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NumpadBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "NumpadBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "NUMPAD KEYS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "NumKey1", - "name": "Atom/NumpadKey/Standard", - "reusable": true, - "width": 64, - "height": 64, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NumKey1Text", - "name": "keyLabel", - "fill": "$text-primary", - "content": "1", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NumKey2", - "name": "exampleNumpadKey2", - "width": 64, - "height": 64, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NumKey2Text", - "name": "keyLabel", - "fill": "$text-primary", - "content": "2", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NumKey3", - "name": "exampleNumpadKey3", - "width": 64, - "height": 64, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NumKey3Text", - "name": "keyLabel", - "fill": "$text-primary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NumKeyClear", - "name": "Atom/NumpadKey/Action/Clear", - "reusable": true, - "width": 64, - "height": 64, - "fill": "#EF444418", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "#EF4444" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NumKeyClearText", - "name": "keyLabel", - "fill": "#EF4444", - "content": "C", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "NumKeyEnter", - "name": "Atom/NumpadKey/Action/Enter", - "reusable": true, - "width": 64, - "height": 64, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "NumKeyEnterIcon", - "name": "keyIcon", - "width": 24, - "height": 24, - "iconFontName": "corner-down-left", - "iconFontFamily": "lucide", - "fill": "$text-primary" - } - ] - }, - { - "type": "frame", - "id": "QtyBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "QtyBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "QUANTITY CONTROLS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "QtyToggle1", - "name": "Atom/QuantityToggle", - "reusable": true, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 0, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "QtyMinus", - "name": "minusBtn", - "width": 48, - "height": 48, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "QtyMinusIcon", - "name": "icon", - "width": 20, - "height": 20, - "iconFontName": "minus", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - }, - { - "type": "frame", - "id": "QtyValue", - "name": "valueDisplay", - "width": 56, - "height": 48, - "fill": "$bg-surface", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "QtyValueText", - "name": "value", - "fill": "$text-primary", - "content": "1", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "QtyPlus", - "name": "plusBtn", - "width": 48, - "height": 48, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "QtyPlusIcon", - "name": "icon", - "width": 20, - "height": 20, - "iconFontName": "plus", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "StatusOnline", - "name": "Atom/StatusIndicator/Online", - "reusable": true, - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "StatusOnlineDot", - "name": "dot", - "width": 10, - "height": 10, - "fill": "$green-success" - }, - { - "type": "text", - "id": "StatusOnlineText", - "name": "label", - "fill": "$text-secondary", - "content": "Online", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "StatusOffline", - "name": "Atom/StatusIndicator/Offline", - "reusable": true, - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "StatusOfflineDot", - "name": "dot", - "width": 10, - "height": 10, - "fill": "#EF4444" - }, - { - "type": "text", - "id": "StatusOfflineText", - "name": "label", - "fill": "$text-secondary", - "content": "Offline", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "StatusBusy", - "name": "Atom/StatusIndicator/Busy", - "reusable": true, - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "StatusBusyDot", - "name": "dot", - "width": 10, - "height": 10, - "fill": "#F59E0B" - }, - { - "type": "text", - "id": "StatusBusyText", - "name": "label", - "fill": "$text-secondary", - "content": "Busy", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "Cfoh0", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "JsBB8", - "name": "badgeText", - "fill": "$orange-primary", - "content": "TYPOGRAPHY & BRANDING", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "LogoEx", - "name": "exampleLogo", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "8osja", - "name": "logoDot", - "fill": "$orange-primary", - "width": 10, - "height": 10 - }, - { - "type": "text", - "id": "7V59t", - "name": "logoText", - "fill": "$text-primary", - "content": "aPOS", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "600", - "letterSpacing": 3 - } - ] - }, - { - "type": "frame", - "id": "n6zyD", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "mrU8q", - "name": "badgeText", - "fill": "$orange-primary", - "content": "CATEGORY", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "name": "badgeText", - "fill": "$orange-primary", - "content": "FORM FIELDS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "FormField_Email_Default", - "name": "Molecule/FormField/Email/Default", - "reusable": true, - "width": 360, - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "FormField_Email_Label", - "name": "label", - "fill": "$text-secondary", - "content": "Email", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "inputWrapper", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "padding": [ - 0, - 16 - ], - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "name": "inputIcon", - "width": 18, - "height": 18, - "iconFontName": "mail", - "iconFontFamily": "lucide", - "fill": "$text-muted" - }, - { - "type": "text", - "id": "FormField_Email_Placeholder", - "name": "placeholder", - "fill": "$text-muted", - "content": "email@example.com", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - }, - { - "type": "frame", - "id": "FormField_Email_Filled", - "name": "Molecule/FormField/Email/Filled", - "reusable": true, - "width": 360, - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "name": "label", - "fill": "$text-secondary", - "content": "Email", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "inputWrapper", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-focus" - }, - "padding": [ - 0, - 16 - ], - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "name": "inputIcon", - "width": 18, - "height": 18, - "iconFontName": "mail", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "name": "value", - "fill": "$text-primary", - "content": "user@goodgo.vn", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - }, - { - "type": "frame", - "id": "FormField_Email_Error", - "name": "Molecule/FormField/Email/Error", - "reusable": true, - "width": 360, - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "name": "label", - "fill": "$text-secondary", - "content": "Email", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "inputWrapper", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$status-error" - }, - "padding": [ - 0, - 16 - ], - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "name": "inputIcon", - "width": 18, - "height": 18, - "iconFontName": "mail", - "iconFontFamily": "lucide", - "fill": "$status-error" - }, - { - "type": "text", - "name": "value", - "fill": "$text-primary", - "content": "invalid-email", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "name": "errorRow", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "name": "errorIcon", - "width": 14, - "height": 14, - "iconFontName": "alert-circle", - "iconFontFamily": "lucide", - "fill": "$status-error" - }, - { - "type": "text", - "id": "FormField_Email_ErrorText", - "name": "errorText", - "fill": "$status-error", - "content": "\u0110\u1ecbnh d\u1ea1ng email kh\u00f4ng h\u1ee3p l\u1ec7", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - }, - { - "type": "frame", - "id": "FormField_Phone_Default", - "name": "Molecule/FormField/Phone/Default", - "reusable": true, - "width": 360, - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "name": "label", - "fill": "$text-secondary", - "content": "S\u1ed1 \u0111i\u1ec7n tho\u1ea1i", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "inputWrapper", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 0, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "countryCode", - "height": "fill_container", - "fill": "$bg-interactive", - "cornerRadius": [ - 10, - 0, - 0, - 10 - ], - "padding": [ - 0, - 12 - ], - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "flag", - "content": "\ud83c\uddfb\ud83c\uddf3", - "fontSize": 16 - }, - { - "type": "text", - "name": "code", - "fill": "$text-secondary", - "content": "+84", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "icon_font", - "name": "chevron", - "width": 14, - "height": 14, - "iconFontName": "chevron-down", - "iconFontFamily": "lucide", - "fill": "$text-muted" - } - ] - }, - { - "type": "frame", - "name": "inputField", - "width": "fill_container", - "height": "fill_container", - "padding": [ - 0, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "FormField_Phone_Placeholder", - "name": "placeholder", - "fill": "$text-muted", - "content": "912 345 678", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "FormField_Phone_Filled", - "name": "Molecule/FormField/Phone/Filled", - "reusable": true, - "width": 360, - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "name": "label", - "fill": "$text-secondary", - "content": "S\u1ed1 \u0111i\u1ec7n tho\u1ea1i", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "inputWrapper", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-focus" - }, - "gap": 0, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "countryCode", - "height": "fill_container", - "fill": "$bg-interactive", - "cornerRadius": [ - 10, - 0, - 0, - 10 - ], - "padding": [ - 0, - 12 - ], - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "flag", - "content": "\ud83c\uddfb\ud83c\uddf3", - "fontSize": 16 - }, - { - "type": "text", - "name": "code", - "fill": "$text-secondary", - "content": "+84", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "icon_font", - "name": "chevron", - "width": 14, - "height": 14, - "iconFontName": "chevron-down", - "iconFontFamily": "lucide", - "fill": "$text-muted" - } - ] - }, - { - "type": "frame", - "name": "inputField", - "width": "fill_container", - "height": "fill_container", - "padding": [ - 0, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "value", - "fill": "$text-primary", - "content": "912 345 678", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "FormField_Password_Default", - "name": "Molecule/FormField/Password/Default", - "reusable": true, - "width": 360, - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "name": "label", - "fill": "$text-secondary", - "content": "M\u1eadt kh\u1ea9u", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "inputWrapper", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "padding": [ - 0, - 16 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "inputContent", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "name": "inputIcon", - "width": 18, - "height": 18, - "iconFontName": "lock", - "iconFontFamily": "lucide", - "fill": "$text-muted" - }, - { - "type": "text", - "name": "placeholder", - "fill": "$text-muted", - "content": "Nh\u1eadp m\u1eadt kh\u1ea9u", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "icon_font", - "name": "toggleIcon", - "width": 18, - "height": 18, - "iconFontName": "eye-off", - "iconFontFamily": "lucide", - "fill": "$text-muted" - } - ] - } - ] - }, - { - "type": "frame", - "id": "FormField_Password_WithStrength", - "name": "Molecule/FormField/Password/WithStrength", - "reusable": true, - "width": 360, - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "name": "label", - "fill": "$text-secondary", - "content": "M\u1eadt kh\u1ea9u m\u1edbi", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "inputWrapper", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-focus" - }, - "padding": [ - 0, - 16 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "inputContent", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "name": "inputIcon", - "width": 18, - "height": 18, - "iconFontName": "lock", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "name": "masked", - "fill": "$text-primary", - "content": "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", - "fontFamily": "Roboto", - "fontSize": 14, - "letterSpacing": 2 - } - ] - }, - { - "type": "icon_font", - "name": "toggleIcon", - "width": 18, - "height": 18, - "iconFontName": "eye-off", - "iconFontFamily": "lucide", - "fill": "$text-muted" - } - ] - }, - { - "type": "frame", - "name": "strengthMeter", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "frame", - "name": "strengthBars", - "width": "fill_container", - "gap": 4, - "children": [ - { - "type": "frame", - "name": "bar1", - "width": "fill_container", - "height": 4, - "fill": "$status-success", - "cornerRadius": 2 - }, - { - "type": "frame", - "name": "bar2", - "width": "fill_container", - "height": 4, - "fill": "$status-success", - "cornerRadius": 2 - }, - { - "type": "frame", - "name": "bar3", - "width": "fill_container", - "height": 4, - "fill": "$status-success", - "cornerRadius": 2 - }, - { - "type": "frame", - "name": "bar4", - "width": "fill_container", - "height": 4, - "fill": "$bg-interactive", - "cornerRadius": 2 - } - ] - }, - { - "type": "text", - "name": "strengthLabel", - "fill": "$status-success", - "content": "Kh\u00e1 m\u1ea1nh", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - }, - { - "type": "frame", - "id": "ModeSwitchContainer", - "name": "Molecule/ModeSwitch/Container", - "reusable": true, - "width": 600, - "height": 48, - "layout": "horizontal", - "justifyContent": "center", - "alignItems": "center", - "gap": 4, - "padding": 4, - "fill": "$bg-surface", - "cornerRadius": 12, - "children": [ - { - "type": "frame", - "id": "MSRestaurant", - "name": "modeRestaurantActive", - "layout": "horizontal", - "justifyContent": "center", - "alignItems": "center", - "gap": 8, - "padding": [ - 8, - 16 - ], - "fill": "$orange-primary", - "cornerRadius": 8, - "children": [ - { - "type": "icon_font", - "id": "MSRestIcon", - "iconFontName": "utensils", - "iconFontFamily": "lucide", - "width": 16, - "height": 16, - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "MSRestLabel", - "content": "Nh\u00e0 h\u00e0ng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500", - "fill": "#FFFFFF" - } - ] - }, - { - "type": "frame", - "id": "MSBar", - "name": "modeBarInactive", - "layout": "horizontal", - "justifyContent": "center", - "alignItems": "center", - "gap": 8, - "padding": [ - 8, - 16 - ], - "cornerRadius": 8, - "children": [ - { - "type": "icon_font", - "id": "MSBarIcon", - "iconFontName": "wine", - "iconFontFamily": "lucide", - "width": 16, - "height": 16, - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "MSBarLabel", - "content": "Bar", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500", - "fill": "$text-secondary" - } - ] - }, - { - "type": "frame", - "id": "MSKaraoke", - "name": "modeKaraokeInactive", - "layout": "horizontal", - "justifyContent": "center", - "alignItems": "center", - "gap": 8, - "padding": [ - 8, - 16 - ], - "cornerRadius": 8, - "children": [ - { - "type": "icon_font", - "id": "MSKarIcon", - "iconFontName": "mic", - "iconFontFamily": "lucide", - "width": 16, - "height": 16, - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "MSKarLabel", - "content": "Karaoke", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500", - "fill": "$text-secondary" - } - ] - }, - { - "type": "frame", - "id": "MSSpa", - "name": "modeSpaInactive", - "layout": "horizontal", - "justifyContent": "center", - "alignItems": "center", - "gap": 8, - "padding": [ - 8, - 16 - ], - "cornerRadius": 8, - "children": [ - { - "type": "icon_font", - "id": "MSSpaIcon", - "iconFontName": "sparkles", - "iconFontFamily": "lucide", - "width": 16, - "height": 16, - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "MSSpaLabel", - "content": "Spa", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500", - "fill": "$text-secondary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "ModeIndRestaurant", - "name": "Molecule/ModeIndicator/Restaurant", - "reusable": true, - "width": 32, - "height": 32, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "fill": "$orange-primary", - "cornerRadius": 9999, - "children": [ - { - "type": "icon_font", - "id": "MIRestIcon", - "iconFontName": "utensils", - "iconFontFamily": "lucide", - "width": 16, - "height": 16, - "fill": "#FFFFFF" - } - ] - }, - { - "type": "frame", - "id": "ModeIndBar", - "name": "Molecule/ModeIndicator/Bar", - "reusable": true, - "width": 32, - "height": 32, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "fill": "$bar-primary", - "cornerRadius": 9999, - "children": [ - { - "type": "icon_font", - "id": "MIBarIcon", - "iconFontName": "wine", - "iconFontFamily": "lucide", - "width": 16, - "height": 16, - "fill": "#FFFFFF" - } - ] - }, - { - "type": "frame", - "id": "ModeIndKaraoke", - "name": "Molecule/ModeIndicator/Karaoke", - "reusable": true, - "width": 32, - "height": 32, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "fill": "$karaoke-primary", - "cornerRadius": 9999, - "children": [ - { - "type": "icon_font", - "id": "MIKarIcon", - "iconFontName": "mic", - "iconFontFamily": "lucide", - "width": 16, - "height": 16, - "fill": "#FFFFFF" - } - ] - }, - { - "type": "frame", - "id": "ModeIndSpa", - "name": "Molecule/ModeIndicator/Spa", - "reusable": true, - "width": 32, - "height": 32, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "fill": "$spa-primary", - "cornerRadius": 9999, - "children": [ - { - "type": "icon_font", - "id": "MISpaIcon", - "iconFontName": "sparkles", - "iconFontFamily": "lucide", - "width": 16, - "height": 16, - "fill": "#FFFFFF" - } - ] - }, - { - "type": "frame", - "id": "OrderItemBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "OrderItemBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "ORDER ITEMS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "OrderItem1", - "name": "Molecule/OrderItem/Standard", - "reusable": true, - "width": "fill_container", - "padding": [ - 16, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "OrderItem1Left", - "name": "leftContent", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "OrderItem1Qty", - "name": "qtyBadge", - "width": 32, - "height": 32, - "fill": "$bg-elevated", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "OrderItem1QtyText", - "name": "qty", - "fill": "$text-primary", - "content": "2", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "OrderItem1Info", - "name": "itemInfo", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "OrderItem1Name", - "name": "itemName", - "fill": "$text-primary", - "content": "C\u00e0 Ph\u00ea S\u1eefa \u0110\u00e1", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "500" - }, - { - "type": "text", - "id": "OrderItem1Note", - "name": "itemNote", - "fill": "$text-tertiary", - "content": "\u00cdt \u0111\u01b0\u1eddng, th\u00eam \u0111\u00e1", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "text", - "id": "OrderItem1Price", - "name": "itemPrice", - "fill": "$text-primary", - "content": "58,000\u20ab", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "OrderItem2", - "name": "Molecule/OrderItem/WithModifiers", - "reusable": true, - "width": "fill_container", - "layout": "vertical", - "padding": [ - 16, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "gap": 8, - "children": [ - { - "type": "frame", - "id": "OrderItem2Main", - "name": "mainRow", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "OrderItem2Left", - "name": "leftContent", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "OrderItem2Qty", - "name": "qtyBadge", - "width": 32, - "height": 32, - "fill": "$bg-elevated", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "OrderItem2QtyText", - "name": "qty", - "fill": "$text-primary", - "content": "1", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "OrderItem2Name", - "name": "itemName", - "fill": "$text-primary", - "content": "B\u00e1nh M\u00ec Th\u1ecbt Ngu\u1ed9i", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "OrderItem2Price", - "name": "itemPrice", - "fill": "$text-primary", - "content": "45,000\u20ab", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "OrderItem2Mods", - "name": "modifierList", - "padding": [ - 0, - 0, - 0, - 44 - ], - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "OrderItem2Mod1", - "name": "modifier1", - "fill": "$text-tertiary", - "content": "+ Ph\u00f4 mai (+10,000\u20ab)", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "OrderItem2Mod2", - "name": "modifier2", - "fill": "$text-tertiary", - "content": "+ Tr\u1ee9ng \u1ed1p la (+8,000\u20ab)", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "BillRowBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "BillRowBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "BILL SUMMARY", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "BillSubtotal", - "name": "Molecule/BillRow/Subtotal", - "reusable": true, - "width": "fill_container", - "padding": [ - 8, - 0 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "BillSubtotalLabel", - "name": "label", - "fill": "$text-secondary", - "content": "T\u1ea1m t\u00ednh", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "BillSubtotalValue", - "name": "value", - "fill": "$text-secondary", - "content": "103,000\u20ab", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "BillDiscount", - "name": "Molecule/BillRow/Discount", - "reusable": true, - "width": "fill_container", - "padding": [ - 8, - 0 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "BillDiscountLabel", - "name": "label", - "fill": "$green-success", - "content": "Gi\u1ea3m gi\u00e1 (10%)", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "BillDiscountValue", - "name": "value", - "fill": "$green-success", - "content": "-10,300\u20ab", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "BillTax", - "name": "Molecule/BillRow/Tax", - "reusable": true, - "width": "fill_container", - "padding": [ - 8, - 0 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "BillTaxLabel", - "name": "label", - "fill": "$text-tertiary", - "content": "VAT (8%)", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "BillTaxValue", - "name": "value", - "fill": "$text-tertiary", - "content": "7,416\u20ab", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "BillDivider", - "name": "divider", - "width": "fill_container", - "height": 1, - "fill": "$border-subtle", - "margin": [ - 12, - 0 - ] - }, - { - "type": "frame", - "id": "BillTotal", - "name": "Molecule/BillRow/Total", - "reusable": true, - "width": "fill_container", - "padding": [ - 12, - 0 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "BillTotalLabel", - "name": "label", - "fill": "$text-primary", - "content": "T\u1ed5ng c\u1ed9ng", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "BillTotalValue", - "name": "value", - "fill": "$orange-primary", - "content": "100,116\u20ab", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "ProductCardBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "ProductCardBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "PRODUCT CARDS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "ProductCard1", - "name": "Molecule/ProductCard/POS", - "reusable": true, - "width": 140, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "ProductCard1Img", - "name": "productImage", - "width": "fill_container", - "height": 100, - "fill": "#3B82F618" - }, - { - "type": "frame", - "id": "ProductCard1Content", - "name": "content", - "width": "fill_container", - "layout": "vertical", - "gap": 4, - "padding": 12, - "children": [ - { - "type": "text", - "id": "ProductCard1Name", - "name": "productName", - "fill": "$text-primary", - "content": "C\u00e0 Ph\u00ea S\u1eefa", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "text", - "id": "ProductCard1Price", - "name": "productPrice", - "fill": "$orange-primary", - "content": "29,000\u20ab", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "ProductCard2", - "name": "Molecule/ProductCard/POS/Selected", - "reusable": true, - "width": 140, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { - "thickness": 2, - "fill": "$orange-primary" - }, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "ProductCard2Img", - "name": "productImage", - "width": "fill_container", - "height": 100, - "fill": "#22C55E18" - }, - { - "type": "frame", - "id": "ProductCard2Content", - "name": "content", - "width": "fill_container", - "layout": "vertical", - "gap": 4, - "padding": 12, - "children": [ - { - "type": "text", - "id": "ProductCard2Name", - "name": "productName", - "fill": "$text-primary", - "content": "Tr\u00e0 \u0110\u00e0o", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "text", - "id": "ProductCard2Price", - "name": "productPrice", - "fill": "$orange-primary", - "content": "35,000\u20ab", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "ProductCard3", - "name": "Molecule/ProductCard/POS/OutOfStock", - "reusable": true, - "width": 140, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "clip": true, - "opacity": 0.5, - "children": [ - { - "type": "frame", - "id": "ProductCard3Img", - "name": "productImage", - "width": "fill_container", - "height": 100, - "fill": "#6B6B7018", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ProductCard3OOS", - "name": "oosLabel", - "fill": "$text-disabled", - "content": "H\u1ebft h\u00e0ng", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "ProductCard3Content", - "name": "content", - "width": "fill_container", - "layout": "vertical", - "gap": 4, - "padding": 12, - "children": [ - { - "type": "text", - "id": "ProductCard3Name", - "name": "productName", - "fill": "$text-disabled", - "content": "Sinh T\u1ed1 B\u01a1", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "text", - "id": "ProductCard3Price", - "name": "productPrice", - "fill": "$text-disabled", - "content": "45,000\u20ab", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "name": "badgeText", - "fill": "$orange-primary", - "content": "SOCIAL LOGIN", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "SocialRow_Full", - "name": "Molecule/SocialLoginRow/Full", - "reusable": true, - "width": 360, - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "frame", - "name": "dividerRow", - "width": "fill_container", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "line1", - "width": "fill_container", - "height": 1, - "fill": "$border-default" - }, - { - "type": "text", - "name": "orText", - "fill": "$text-muted", - "content": "ho\u1eb7c", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "frame", - "name": "line2", - "width": "fill_container", - "height": 1, - "fill": "$border-default" - } - ] - }, - { - "type": "frame", - "name": "socialButtons", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "frame", - "name": "googleBtn", - "width": "fill_container", - "height": 48, - "fill": "#FFFFFF", - "cornerRadius": 10, - "gap": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "googleIcon", - "fill": "#4285F4", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "text", - "name": "btnLabel", - "fill": "#1F1F1F", - "content": "\u0110\u0103ng nh\u1eadp v\u1edbi Google", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "name": "appleBtn", - "width": "fill_container", - "height": 48, - "fill": "#000000", - "cornerRadius": 10, - "gap": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "name": "appleIcon", - "width": 20, - "height": 20, - "iconFontName": "apple", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "name": "btnLabel", - "fill": "#FFFFFF", - "content": "\u0110\u0103ng nh\u1eadp v\u1edbi Apple", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "name": "zaloBtn", - "width": "fill_container", - "height": 48, - "fill": "#0068FF", - "cornerRadius": 10, - "gap": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "zaloIcon", - "fill": "#FFFFFF", - "content": "Z", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "700" - }, - { - "type": "text", - "name": "btnLabel", - "fill": "#FFFFFF", - "content": "\u0110\u0103ng nh\u1eadp v\u1edbi Zalo", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SocialRow_Compact", - "name": "Molecule/SocialLoginRow/Compact", - "reusable": true, - "width": 360, - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "frame", - "name": "dividerRow", - "width": "fill_container", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "line1", - "width": "fill_container", - "height": 1, - "fill": "$border-default" - }, - { - "type": "text", - "name": "orText", - "fill": "$text-muted", - "content": "ho\u1eb7c ti\u1ebfp t\u1ee5c v\u1edbi", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "frame", - "name": "line2", - "width": "fill_container", - "height": 1, - "fill": "$border-default" - } - ] - }, - { - "type": "frame", - "name": "socialIconsRow", - "width": "fill_container", - "justifyContent": "center", - "gap": 16, - "children": [ - { - "type": "frame", - "name": "googleIcon", - "width": 48, - "height": 48, - "fill": "#FFFFFF", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "#4285F4", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "name": "appleIcon", - "width": 48, - "height": 48, - "fill": "#000000", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "width": 22, - "height": 22, - "iconFontName": "apple", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - } - ] - }, - { - "type": "frame", - "name": "zaloIcon", - "width": 48, - "height": 48, - "fill": "#0068FF", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "#FFFFFF", - "content": "Z", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "name": "facebookIcon", - "width": 48, - "height": 48, - "fill": "#1877F2", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "width": 22, - "height": 22, - "iconFontName": "facebook", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "name": "badgeText", - "fill": "$orange-primary", - "content": "LOGIN CARDS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "LoginCard_Standard", - "name": "Organism/LoginCard/Standard", - "reusable": true, - "width": 420, - "fill": "$bg-surface", - "cornerRadius": 20, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 32, - "padding": 40, - "children": [ - { - "type": "frame", - "name": "cardHeader", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "logoContainer", - "width": 48, - "height": 48, - "fill": { - "type": "gradient", - "gradientType": "linear", - "rotation": 135, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "logoText", - "fill": "$text-primary", - "content": "a", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "LoginCard_Title", - "name": "cardTitle", - "fill": "$text-primary", - "content": "\u0110\u0103ng nh\u1eadp", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - }, - { - "type": "text", - "id": "LoginCard_Subtitle", - "name": "cardSubtitle", - "fill": "$text-tertiary", - "content": "Ch\u00e0o m\u1eebng quay tr\u1edf l\u1ea1i", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "name": "formSection", - "width": "fill_container", - "layout": "vertical", - "gap": 20, - "children": [ - { - "type": "frame", - "name": "emailField", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "name": "label", - "fill": "$text-secondary", - "content": "Email ho\u1eb7c s\u1ed1 \u0111i\u1ec7n tho\u1ea1i", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "inputWrapper", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "padding": [ - 0, - 16 - ], - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "name": "inputIcon", - "width": 18, - "height": 18, - "iconFontName": "user", - "iconFontFamily": "lucide", - "fill": "$text-muted" - }, - { - "type": "text", - "name": "placeholder", - "fill": "$text-muted", - "content": "email@example.com", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - }, - { - "type": "frame", - "name": "passwordField", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "frame", - "name": "labelRow", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "label", - "fill": "$text-secondary", - "content": "M\u1eadt kh\u1ea9u", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "text", - "name": "forgotLink", - "fill": "$orange-primary", - "content": "Qu\u00ean m\u1eadt kh\u1ea9u?", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "name": "inputWrapper", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "padding": [ - 0, - 16 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "inputContent", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "name": "inputIcon", - "width": 18, - "height": 18, - "iconFontName": "lock", - "iconFontFamily": "lucide", - "fill": "$text-muted" - }, - { - "type": "text", - "name": "placeholder", - "fill": "$text-muted", - "content": "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "icon_font", - "name": "toggleIcon", - "width": 18, - "height": 18, - "iconFontName": "eye-off", - "iconFontFamily": "lucide", - "fill": "$text-muted" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "name": "submitButton", - "width": "fill_container", - "height": 48, - "fill": { - "type": "gradient", - "gradientType": "linear", - "rotation": 135, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "btnLabel", - "fill": "$text-primary", - "content": "\u0110\u0103ng nh\u1eadp", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "name": "footerLinks", - "width": "fill_container", - "justifyContent": "center", - "gap": 4, - "children": [ - { - "type": "text", - "name": "text", - "fill": "$text-tertiary", - "content": "Ch\u01b0a c\u00f3 t\u00e0i kho\u1ea3n?", - "fontFamily": "Roboto", - "fontSize": 14 - }, - { - "type": "text", - "name": "link", - "fill": "$orange-primary", - "content": "\u0110\u0103ng k\u00fd ngay", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "LoginCard_WithSocial", - "name": "Organism/LoginCard/WithSocial", - "reusable": true, - "width": 420, - "fill": "$bg-surface", - "cornerRadius": 20, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 24, - "padding": 40, - "children": [ - { - "type": "frame", - "name": "cardHeader", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "logoContainer", - "width": 48, - "height": 48, - "fill": { - "type": "gradient", - "gradientType": "linear", - "rotation": 135, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "logoText", - "fill": "$text-primary", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "name": "cardTitle", - "fill": "$text-primary", - "content": "\u0110\u0103ng nh\u1eadp", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - }, - { - "type": "text", - "name": "cardSubtitle", - "fill": "$text-tertiary", - "content": "\u0110\u1eb7t h\u00e0ng v\u00e0 t\u00edch \u0111i\u1ec3m", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "name": "formSection", - "width": "fill_container", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "frame", - "name": "phoneField", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "name": "label", - "fill": "$text-secondary", - "content": "S\u1ed1 \u0111i\u1ec7n tho\u1ea1i", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "inputWrapper", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 0, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "countryCode", - "height": "fill_container", - "fill": "$bg-interactive", - "cornerRadius": [ - 10, - 0, - 0, - 10 - ], - "padding": [ - 0, - 12 - ], - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "flag", - "content": "\ud83c\uddfb\ud83c\uddf3", - "fontSize": 16 - }, - { - "type": "text", - "name": "code", - "fill": "$text-secondary", - "content": "+84", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "name": "inputField", - "width": "fill_container", - "height": "fill_container", - "padding": [ - 0, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "placeholder", - "fill": "$text-muted", - "content": "Nh\u1eadp s\u1ed1 \u0111i\u1ec7n tho\u1ea1i", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "name": "submitButton", - "width": "fill_container", - "height": 48, - "fill": { - "type": "gradient", - "gradientType": "linear", - "rotation": 135, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "btnLabel", - "fill": "$text-primary", - "content": "G\u1eedi m\u00e3 OTP", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "name": "socialDivider", - "width": "fill_container", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "line1", - "width": "fill_container", - "height": 1, - "fill": "$border-default" - }, - { - "type": "text", - "name": "orText", - "fill": "$text-muted", - "content": "ho\u1eb7c", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "frame", - "name": "line2", - "width": "fill_container", - "height": 1, - "fill": "$border-default" - } - ] - }, - { - "type": "frame", - "name": "socialIconsRow", - "width": "fill_container", - "justifyContent": "center", - "gap": 16, - "children": [ - { - "type": "frame", - "name": "googleIcon", - "width": 48, - "height": 48, - "fill": "#FFFFFF", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "#4285F4", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "name": "appleIcon", - "width": 48, - "height": 48, - "fill": "#000000", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "width": 22, - "height": 22, - "iconFontName": "apple", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - } - ] - }, - { - "type": "frame", - "name": "zaloIcon", - "width": 48, - "height": 48, - "fill": "#0068FF", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "#FFFFFF", - "content": "Z", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "700" - } - ] - } - ] - }, - { - "type": "frame", - "name": "footerLinks", - "width": "fill_container", - "justifyContent": "center", - "gap": 4, - "children": [ - { - "type": "text", - "name": "text", - "fill": "$text-tertiary", - "content": "L\u1ea7n \u0111\u1ea7u s\u1eed d\u1ee5ng?", - "fontFamily": "Roboto", - "fontSize": 14 - }, - { - "type": "text", - "name": "link", - "fill": "$orange-primary", - "content": "T\u1ea1o t\u00e0i kho\u1ea3n", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "LoginCard_Staff", - "name": "Organism/LoginCard/Staff", - "reusable": true, - "width": 420, - "fill": "$bg-surface", - "cornerRadius": 20, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 32, - "padding": 40, - "children": [ - { - "type": "frame", - "name": "cardHeader", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "roleBadge", - "fill": "$status-success-bg", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "name": "roleText", - "fill": "$status-success", - "content": "NH\u00c2N VI\u00caN", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600", - "letterSpacing": 1 - } - ] - }, - { - "type": "text", - "name": "cardTitle", - "fill": "$text-primary", - "content": "\u0110\u0103ng nh\u1eadp h\u1ec7 th\u1ed1ng", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - }, - { - "type": "text", - "name": "cardSubtitle", - "fill": "$text-tertiary", - "content": "D\u00e0nh cho nh\u00e2n vi\u00ean ph\u1ee5c v\u1ee5", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "name": "formSection", - "width": "fill_container", - "layout": "vertical", - "gap": 20, - "children": [ - { - "type": "frame", - "name": "emailField", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "name": "label", - "fill": "$text-secondary", - "content": "Email ho\u1eb7c s\u1ed1 \u0111i\u1ec7n tho\u1ea1i", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "inputWrapper", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "padding": [ - 0, - 16 - ], - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "name": "inputIcon", - "width": 18, - "height": 18, - "iconFontName": "user", - "iconFontFamily": "lucide", - "fill": "$text-muted" - }, - { - "type": "text", - "name": "placeholder", - "fill": "$text-muted", - "content": "T\u00e0i kho\u1ea3n \u0111\u01b0\u1ee3c c\u1ea5p", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - }, - { - "type": "frame", - "name": "passwordField", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "name": "label", - "fill": "$text-secondary", - "content": "M\u1eadt kh\u1ea9u", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "inputWrapper", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "padding": [ - 0, - 16 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "inputContent", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "name": "inputIcon", - "width": 18, - "height": 18, - "iconFontName": "lock", - "iconFontFamily": "lucide", - "fill": "$text-muted" - }, - { - "type": "text", - "name": "placeholder", - "fill": "$text-muted", - "content": "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "icon_font", - "name": "toggleIcon", - "width": 18, - "height": 18, - "iconFontName": "eye-off", - "iconFontFamily": "lucide", - "fill": "$text-muted" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "name": "submitButton", - "width": "fill_container", - "height": 48, - "fill": "$status-success", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "btnLabel", - "fill": "$text-primary", - "content": "\u0110\u0103ng nh\u1eadp", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "LoginCard_Admin", - "name": "Organism/LoginCard/Admin", - "reusable": true, - "width": 420, - "fill": "$bg-surface", - "cornerRadius": 20, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 32, - "padding": 40, - "children": [ - { - "type": "frame", - "name": "cardHeader", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "roleBadge", - "fill": "$status-info-bg", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "name": "roleText", - "fill": "$status-info", - "content": "ADMIN", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600", - "letterSpacing": 1 - } - ] - }, - { - "type": "text", - "name": "cardTitle", - "fill": "$text-primary", - "content": "\u0110\u0103ng nh\u1eadp qu\u1ea3n tr\u1ecb", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - }, - { - "type": "text", - "name": "cardSubtitle", - "fill": "$text-tertiary", - "content": "B\u1ea3ng \u0111i\u1ec1u khi\u1ec3n h\u1ec7 th\u1ed1ng", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "name": "formSection", - "width": "fill_container", - "layout": "vertical", - "gap": 20, - "children": [ - { - "type": "frame", - "name": "emailField", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "name": "label", - "fill": "$text-secondary", - "content": "Email ho\u1eb7c s\u1ed1 \u0111i\u1ec7n tho\u1ea1i", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "inputWrapper", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "padding": [ - 0, - 16 - ], - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "name": "inputIcon", - "width": 18, - "height": 18, - "iconFontName": "shield", - "iconFontFamily": "lucide", - "fill": "$text-muted" - }, - { - "type": "text", - "name": "placeholder", - "fill": "$text-muted", - "content": "admin@company.com", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - }, - { - "type": "frame", - "name": "passwordField", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "name": "label", - "fill": "$text-secondary", - "content": "M\u1eadt kh\u1ea9u", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "inputWrapper", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "padding": [ - 0, - 16 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "inputContent", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "name": "inputIcon", - "width": 18, - "height": 18, - "iconFontName": "lock", - "iconFontFamily": "lucide", - "fill": "$text-muted" - }, - { - "type": "text", - "name": "placeholder", - "fill": "$text-muted", - "content": "\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "icon_font", - "name": "toggleIcon", - "width": 18, - "height": 18, - "iconFontName": "eye-off", - "iconFontFamily": "lucide", - "fill": "$text-muted" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "name": "submitButton", - "width": "fill_container", - "height": 48, - "fill": "$status-info", - "cornerRadius": 10, - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "name": "btnIcon", - "width": 18, - "height": 18, - "iconFontName": "shield-check", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "name": "btnLabel", - "fill": "$text-primary", - "content": "\u0110\u0103ng nh\u1eadp b\u1ea3o m\u1eadt", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "name": "badgeText", - "fill": "$orange-primary", - "content": "OTP VERIFICATION", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "OTPCard_Default", - "name": "Organism/OTPVerify/Default", - "reusable": true, - "width": 420, - "fill": "$bg-surface", - "cornerRadius": 20, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 32, - "padding": 40, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "cardHeader", - "layout": "vertical", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "iconContainer", - "width": 64, - "height": 64, - "fill": "$status-info-bg", - "cornerRadius": 32, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "name": "phoneIcon", - "width": 28, - "height": 28, - "iconFontName": "smartphone", - "iconFontFamily": "lucide", - "fill": "$status-info" - } - ] - }, - { - "type": "text", - "name": "cardTitle", - "fill": "$text-primary", - "content": "X\u00e1c th\u1ef1c OTP", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - }, - { - "type": "text", - "name": "cardSubtitle", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 300, - "content": "Nh\u1eadp m\u00e3 6 ch\u1eef s\u1ed1 \u0111\u00e3 g\u1eedi \u0111\u1ebfn s\u1ed1 \u0111i\u1ec7n tho\u1ea1i c\u1ee7a b\u1ea1n", - "lineHeight": 1.5, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 14 - }, - { - "type": "text", - "id": "OTP_PhoneNumber", - "name": "phoneNumber", - "fill": "$orange-primary", - "content": "+84 912 ***678", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "name": "otpInputs", - "gap": 8, - "children": [ - { - "type": "frame", - "name": "d1", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - }, - { - "type": "frame", - "name": "d2", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - }, - { - "type": "frame", - "name": "d3", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - }, - { - "type": "text", - "name": "separator", - "fill": "$text-muted", - "content": "\u2014", - "fontFamily": "Roboto", - "fontSize": 20 - }, - { - "type": "frame", - "name": "d4", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - }, - { - "type": "frame", - "name": "d5", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - }, - { - "type": "frame", - "name": "d6", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - } - ] - }, - { - "type": "frame", - "name": "timerRow", - "gap": 4, - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "timerText", - "fill": "$text-tertiary", - "content": "M\u00e3 h\u1ebft h\u1ea1n sau", - "fontFamily": "Roboto", - "fontSize": 14 - }, - { - "type": "text", - "id": "OTP_Timer", - "name": "timerValue", - "fill": "$orange-primary", - "content": "02:45", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "name": "submitButton", - "width": "fill_container", - "height": 48, - "fill": "$bg-interactive", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "btnLabel", - "fill": "$text-disabled", - "content": "X\u00e1c nh\u1eadn", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "name": "footerLinks", - "gap": 4, - "children": [ - { - "type": "text", - "name": "text", - "fill": "$text-tertiary", - "content": "Kh\u00f4ng nh\u1eadn \u0111\u01b0\u1ee3c m\u00e3?", - "fontFamily": "Roboto", - "fontSize": 14 - }, - { - "type": "text", - "name": "link", - "fill": "$orange-primary", - "content": "G\u1eedi l\u1ea1i", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "OTPCard_Filled", - "name": "Organism/OTPVerify/Filled", - "reusable": true, - "width": 420, - "fill": "$bg-surface", - "cornerRadius": 20, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 32, - "padding": 40, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "cardHeader", - "layout": "vertical", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "iconContainer", - "width": 64, - "height": 64, - "fill": "$status-success-bg", - "cornerRadius": 32, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "name": "checkIcon", - "width": 28, - "height": 28, - "iconFontName": "check-circle", - "iconFontFamily": "lucide", - "fill": "$status-success" - } - ] - }, - { - "type": "text", - "name": "cardTitle", - "fill": "$text-primary", - "content": "X\u00e1c th\u1ef1c OTP", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - }, - { - "type": "text", - "name": "cardSubtitle", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 300, - "content": "Nh\u1eadp m\u00e3 6 ch\u1eef s\u1ed1 \u0111\u00e3 g\u1eedi \u0111\u1ebfn s\u1ed1 \u0111i\u1ec7n tho\u1ea1i c\u1ee7a b\u1ea1n", - "lineHeight": 1.5, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 14 - }, - { - "type": "text", - "name": "phoneNumber", - "fill": "$orange-primary", - "content": "+84 912 ***678", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "name": "otpInputs", - "gap": 8, - "children": [ - { - "type": "frame", - "name": "d1", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$status-success" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "$text-primary", - "content": "1", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "name": "d2", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$status-success" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "$text-primary", - "content": "2", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "name": "d3", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$status-success" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "$text-primary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "name": "separator", - "fill": "$status-success", - "content": "\u2014", - "fontFamily": "Roboto", - "fontSize": 20 - }, - { - "type": "frame", - "name": "d4", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$status-success" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "$text-primary", - "content": "4", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "name": "d5", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$status-success" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "$text-primary", - "content": "5", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "name": "d6", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$status-success" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "$text-primary", - "content": "6", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "name": "submitButton", - "width": "fill_container", - "height": 48, - "fill": { - "type": "gradient", - "gradientType": "linear", - "rotation": 135, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "btnLabel", - "fill": "$text-primary", - "content": "X\u00e1c nh\u1eadn", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "WocUJ", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "jV70R", - "name": "badgeText", - "fill": "$orange-primary", - "content": "CARDS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "FeatCard1", - "name": "exampleFeatureCard", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "HpzSJ", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#FF5C0018", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "suLNf", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "monitor-smartphone", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - } - ] - }, - { - "type": "text", - "id": "UJFMb", - "name": "fcTitle", - "fill": "$text-primary", - "content": "Feature Card", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "tDzj5", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "This is a feature card component used to showcase key features and capabilities.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "IndCard1", - "name": "exampleIndustryCard", - "clip": true, - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "FLdiF", - "name": "indImg", - "width": "fill_container", - "height": 200, - "fill": "#3B82F618" - }, - { - "type": "frame", - "id": "8ZFVY", - "name": "indContent", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "padding": 24, - "children": [ - { - "type": "text", - "id": "8gWd8", - "name": "indTitle", - "fill": "$text-primary", - "content": "Industry Card", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "1piNF", - "name": "indDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Industry-specific card with image, title, description and tags.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "h0FX2", - "name": "indTags", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "DSgMw", - "name": "indTag1", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "rVbro", - "name": "chipText", - "fill": "$text-secondary", - "content": "Feature 1", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "uoFFu", - "name": "indTag2", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "JI7l0", - "name": "chipText", - "fill": "$text-secondary", - "content": "Feature 2", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ZReaA", - "name": "stepNum", - "width": 56, - "height": 56, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 28, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "m5Mjz", - "name": "stepNumText", - "fill": "$text-primary", - "content": "1", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "PriceCard1", - "name": "examplePricingBasic", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "teMVu", - "name": "pcBadge", - "enabled": false, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "azC2t", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Ph\u1ed5 bi\u1ebfn nh\u1ea5t", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "isTGs", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "ZFjfl", - "name": "pcName", - "fill": "$text-secondary", - "content": "Starter", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "5UeZM", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "8fM2n", - "name": "pcPrice", - "fill": "$text-primary", - "content": "Free", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "GfS02", - "name": "pcPer", - "enabled": false, - "fill": "$text-tertiary", - "content": "/th\u00e1ng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "uLtIh", - "name": "pcDesc", - "fill": "$text-tertiary", - "content": "For small businesses getting started", - "lineHeight": 1.5, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "rectangle", - "id": "u5uVY", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "MXmSA", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "YbXof", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "mzamm", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "3r8fL", - "name": "checkText", - "fill": "$text-secondary", - "content": "1 store", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "Nj2yA", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "NVTzn", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "5LtsD", - "name": "checkText", - "fill": "$text-secondary", - "content": "100 transactions/month", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "GqUzO", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "yZlVe", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "Ut5uS", - "name": "checkText", - "fill": "$text-secondary", - "content": "Basic reports", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "0Fnac", - "name": "pcBtn", - "width": "fill_container", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "1w3HC", - "name": "btnSIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "RVZxt", - "name": "btnSText", - "fill": "$text-primary", - "content": "Get Started", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PriceCard2", - "name": "examplePricingPro", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 2, - "fill": "$orange-primary" - }, - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "2qVjH", - "name": "pcBadge", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "PthNf", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Ph\u1ed5 bi\u1ebfn nh\u1ea5t", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "yT240", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "G4OEv", - "name": "pcName", - "fill": "$orange-primary", - "content": "Professional", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "IQojv", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "R1uJY", - "name": "pcPrice", - "fill": "$text-primary", - "content": "499K", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "lbKkc", - "name": "pcPer", - "fill": "$text-tertiary", - "content": "/th\u00e1ng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "i9xHO", - "name": "pcDesc", - "fill": "$text-tertiary", - "content": "For growing business chains", - "lineHeight": 1.5, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "rectangle", - "id": "GaBI4", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "KiK1Y", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "s5RvM", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "7e7A1", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "Lmf0e", - "name": "checkText", - "fill": "$text-secondary", - "content": "5 stores", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "pc2H0", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "JsYjG", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "UUmpR", - "name": "checkText", - "fill": "$text-secondary", - "content": "Unlimited transactions", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "jqWaK", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "6LR43", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "ULIlu", - "name": "checkText", - "fill": "$text-secondary", - "content": "Advanced analytics", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "3xz7n", - "name": "proPricingBtn", - "width": "fill_container", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "6y0tm", - "name": "btnPIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "96nc7", - "name": "btnPText", - "fill": "$text-primary", - "content": "Try 14 days free", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PriceCard3", - "name": "examplePricingEnterprise", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "We76w", - "name": "pcBadge", - "enabled": false, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "ttbZY", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Ph\u1ed5 bi\u1ebfn nh\u1ea5t", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "0aQSi", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "aSefC", - "name": "pcName", - "fill": "$text-secondary", - "content": "Enterprise", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "QJm3P", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "PNKkF", - "name": "pcPrice", - "fill": "$text-primary", - "content": "Custom", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "VHRx4", - "name": "pcPer", - "enabled": false, - "fill": "$text-tertiary", - "content": "/th\u00e1ng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "teqD3", - "name": "pcDesc", - "fill": "$text-tertiary", - "content": "For large enterprise chains", - "lineHeight": 1.5, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "rectangle", - "id": "vbKaC", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "dBIlb", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "EXa0J", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "U0aiJ", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "F221P", - "name": "checkText", - "fill": "$text-secondary", - "content": "Unlimited stores", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "DHLmw", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "En6Un", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "ytc60", - "name": "checkText", - "fill": "$text-secondary", - "content": "API integration", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "zWEio", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "P4YlO", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "seCtG", - "name": "checkText", - "fill": "$text-secondary", - "content": "Dedicated account manager", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "8129K", - "name": "pcBtn", - "width": "fill_container", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "kqsyZ", - "name": "btnSIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "koJzc", - "name": "btnSText", - "fill": "$text-primary", - "content": "Contact Sales", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "vQqcl", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "NH6gQ", - "name": "badgeText", - "fill": "$orange-primary", - "content": "FOOTER COMPONENTS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "FootCol1", - "name": "exampleFooterCol1", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "text", - "id": "jcBoY", - "name": "footColTitle", - "fill": "$text-primary", - "content": "Products", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "NX2A9", - "name": "footColL1", - "fill": "$text-tertiary", - "content": "POS System", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "qkmXd", - "name": "footColL2", - "fill": "$text-tertiary", - "content": "Loyalty Program", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "MqnX1", - "name": "footColL3", - "fill": "$text-tertiary", - "content": "Analytics", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "U5fbU", - "name": "footColL4", - "fill": "$text-tertiary", - "content": "Inventory", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "FootCol2", - "name": "exampleFooterCol2", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "text", - "id": "3f7yU", - "name": "footColTitle", - "fill": "$text-primary", - "content": "Industries", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "nUIva", - "name": "footColL1", - "fill": "$text-tertiary", - "content": "Restaurant & F&B", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "VMn3X", - "name": "footColL2", - "fill": "$text-tertiary", - "content": "Bar & Lounge", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "TYRQA", - "name": "footColL3", - "fill": "$text-tertiary", - "content": "Karaoke", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "Y1hlD", - "name": "footColL4", - "fill": "$text-tertiary", - "content": "Coffee Shop", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "FootCol3", - "name": "exampleFooterCol3", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "text", - "id": "ynsnj", - "name": "footColTitle", - "fill": "$text-primary", - "content": "Support", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "CxgY7", - "name": "footColL1", - "fill": "$text-tertiary", - "content": "Help Center", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "PNNws", - "name": "footColL2", - "fill": "$text-tertiary", - "content": "Contact", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "KTHFx", - "name": "footColL3", - "fill": "$text-tertiary", - "content": "Privacy Policy", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "F0e0G", - "name": "footColL4", - "fill": "$text-tertiary", - "content": "Terms of Use", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "LibLogo", - "name": "componentLibLogo", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "L1IHb", - "name": "logoDot", - "fill": "$orange-primary", - "width": 10, - "height": 10 - }, - { - "type": "text", - "id": "oAfvR", - "name": "logoText", - "fill": "$text-primary", - "content": "aPOS", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "600", - "letterSpacing": 3 - } - ] - }, - { - "type": "frame", - "id": "fBoMm", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "o5bXI", - "name": "badgeText", - "fill": "$orange-primary", - "content": "UTILITIES", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "Check1", - "name": "exampleCheckItem1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "VJGh3", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "VwkNy", - "name": "checkText", - "fill": "$text-secondary", - "content": "Feature check list item", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "Check2", - "name": "exampleCheckItem2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "BrCzS", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "9qmDC", - "name": "checkText", - "fill": "$text-secondary", - "content": "Another check list item", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "Check3", - "name": "exampleCheckItem3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "87yKj", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "JoqXu", - "name": "checkText", - "fill": "$text-secondary", - "content": "Third check list item", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "Social1", - "name": "exampleFacebook", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "YXkpa", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "facebook", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - }, - { - "type": "frame", - "id": "Social2", - "name": "exampleInstagram", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "4UrP1", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "instagram", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - }, - { - "type": "frame", - "id": "Social3", - "name": "exampleYoutube", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "QG5mc", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "youtube", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - }, - { - "type": "frame", - "id": "Social4", - "name": "exampleLinkedIn", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "FNwhd", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "linkedin", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - }, - { - "type": "frame", - "id": "TrustEx", - "name": "exampleTrustStat", - "width": "fill_container", - "gap": 40, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "iObWZ", - "name": "tsLabel", - "fill": "$text-disabled", - "content": "\u0110\u01b0\u1ee3c tin d\u00f9ng b\u1edfi 2,000+ doanh nghi\u1ec7p", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "rectangle", - "id": "M0mkC", - "name": "tsDivider1", - "fill": "$border-default", - "width": 1, - "height": 20 - }, - { - "type": "text", - "id": "wZxFi", - "name": "tsStat1", - "fill": "$text-tertiary", - "content": "50,000+ giao d\u1ecbch/ng\u00e0y", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "rectangle", - "id": "9ZsNt", - "name": "tsDivider2", - "fill": "$border-default", - "width": 1, - "height": 20 - }, - { - "type": "text", - "id": "gpriC", - "name": "tsStat2", - "fill": "$text-tertiary", - "content": "99.9% uptime", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "jNieW", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "jVugF", - "name": "badgeText", - "fill": "$orange-primary", - "content": "NAVIGATION", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "DesktopNav", - "name": "exampleDesktopNav", - "width": "fill_container", - "height": "fit_content(84)", - "padding": [ - 20, - 120 - ], - "justifyContent": "space_between", - "alignItems": "center" - }, - { - "type": "frame", - "id": "MobileNav", - "name": "exampleMobileNav", - "width": "fill_container", - "padding": [ - 16, - 20 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "EYcUX", - "name": "mNavLogo", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "c7KAp", - "name": "logoDot", - "fill": "$orange-primary", - "width": 10, - "height": 10 - }, - { - "type": "text", - "id": "9deBe", - "name": "logoText", - "fill": "$text-primary", - "content": "aPOS", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600", - "letterSpacing": 3 - } - ] - }, - { - "type": "icon_font", - "id": "yEnDr", - "name": "hamburgerIcon", - "width": 24, - "height": 24, - "iconFontName": "menu", - "iconFontFamily": "lucide", - "fill": "$text-primary" - } - ] - }, - { - "type": "frame", - "id": "CustomerLookupBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "CustomerLookupBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "CUSTOMER LOOKUP", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "CustomerLookupModal", - "name": "Organism/CustomerLookup/Modal", - "reusable": true, - "width": 480, - "fill": "$bg-elevated", - "cornerRadius": 20, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "CustomerLookupTopBar", - "name": "topBar", - "width": "fill_container", - "padding": [ - 16, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "CustomerLookupModalTitle", - "fill": "$text-primary", - "content": "T\u00ecm kh\u00e1ch h\u00e0ng", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "CustomerLookupCloseBtn", - "name": "closeBtn", - "width": 36, - "height": 36, - "fill": "$bg-interactive", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CustomerLookupCloseIcon", - "width": 18, - "height": 18, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "CustomerLookupBody", - "name": "body", - "width": "fill_container", - "layout": "vertical", - "padding": 20, - "gap": 16, - "children": [ - { - "type": "frame", - "id": "CustomerLookupSearchBox", - "name": "searchBox", - "width": "fill_container", - "height": 48, - "fill": "$bg-surface", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "padding": [ - 0, - 16 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CustomerLookupSearchIcon", - "width": 20, - "height": 20, - "iconFontName": "search", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "CustomerLookupSearchText", - "fill": "$text-primary", - "content": "0912", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "CustomerLookupSearchSpacer", - "width": "fill_container", - "height": 1 - }, - { - "type": "icon_font", - "id": "CustomerLookupClearIcon", - "width": 18, - "height": 18, - "iconFontName": "x-circle", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - }, - { - "type": "frame", - "id": "CustomerLookupResults", - "name": "results", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "CustomerResult1", - "name": "customerResult1", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 12, - "stroke": { - "thickness": 2, - "fill": "$orange-primary" - }, - "padding": 16, - "gap": 14, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CustomerResult1Avatar", - "name": "avatar", - "width": 44, - "height": 44, - "fill": "#3B82F630", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "CustomerResult1Initials", - "fill": "#3B82F6", - "content": "NH", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "CustomerResult1Info", - "name": "info", - "layout": "vertical", - "gap": 4, - "width": "fill_container", - "children": [ - { - "type": "text", - "id": "CustomerResult1Name", - "fill": "$text-primary", - "content": "Nguy\u1ec5n H\u1ed3ng", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "500" - }, - { - "type": "text", - "id": "CustomerResult1Phone", - "fill": "$text-secondary", - "content": "0912 345 678", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "CustomerResult1Points", - "name": "points", - "fill": "#22C55E18", - "cornerRadius": 8, - "padding": [ - 6, - 10 - ], - "children": [ - { - "type": "text", - "id": "CustomerResult1PointsText", - "fill": "$green-success", - "content": "120 \u0111i\u1ec3m", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "CustomerResult2", - "name": "customerResult2", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "padding": 16, - "gap": 14, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CustomerResult2Avatar", - "name": "avatar", - "width": 44, - "height": 44, - "fill": "#8B5CF630", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "CustomerResult2Initials", - "fill": "#8B5CF6", - "content": "TL", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "CustomerResult2Info", - "name": "info", - "layout": "vertical", - "gap": 4, - "width": "fill_container", - "children": [ - { - "type": "text", - "id": "CustomerResult2Name", - "fill": "$text-primary", - "content": "Tr\u1ea7n Linh", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "500" - }, - { - "type": "text", - "id": "CustomerResult2Phone", - "fill": "$text-secondary", - "content": "0912 888 999", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "CustomerResult2Points", - "name": "points", - "fill": "$bg-interactive", - "cornerRadius": 8, - "padding": [ - 6, - 10 - ], - "children": [ - { - "type": "text", - "id": "CustomerResult2PointsText", - "fill": "$text-secondary", - "content": "45 \u0111i\u1ec3m", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "CustomerLookupAddNew", - "name": "addNewBtn", - "width": "fill_container", - "height": 48, - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default", - "style": "dashed" - }, - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CustomerLookupAddIcon", - "width": 18, - "height": 18, - "iconFontName": "user-plus", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "CustomerLookupAddText", - "fill": "$text-secondary", - "content": "Th\u00eam kh\u00e1ch h\u00e0ng m\u1edbi", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "CustomerLookupActions", - "name": "actions", - "width": "fill_container", - "padding": [ - 16, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "gap": 12, - "children": [ - { - "type": "frame", - "id": "CustomerLookupSkipBtn", - "name": "skipBtn", - "width": "fill_container", - "height": 48, - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "CustomerLookupSkipText", - "fill": "$text-secondary", - "content": "B\u1ecf qua", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "CustomerLookupConfirmBtn", - "name": "confirmBtn", - "width": "fill_container", - "height": 48, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CustomerLookupConfirmIcon", - "width": 18, - "height": 18, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "CustomerLookupConfirmText", - "fill": "$text-primary", - "content": "Ch\u1ecdn kh\u00e1ch h\u00e0ng", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "CustomerAddBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "CustomerAddBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "ADD CUSTOMER", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "CustomerAddModal", - "name": "Organism/CustomerLookup/AddForm", - "reusable": true, - "width": 480, - "fill": "$bg-elevated", - "cornerRadius": 20, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "CustomerAddTopBar", - "name": "topBar", - "width": "fill_container", - "padding": [ - 16, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CustomerAddBackBtn", - "name": "backBtn", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CustomerAddBackIcon", - "width": 20, - "height": 20, - "iconFontName": "arrow-left", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "CustomerAddModalTitle", - "fill": "$text-primary", - "content": "Th\u00eam kh\u00e1ch h\u00e0ng", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "CustomerAddCloseBtn2", - "name": "closeBtn", - "width": 36, - "height": 36, - "fill": "$bg-interactive", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CustomerAddCloseIcon2", - "width": 18, - "height": 18, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "CustomerAddBody", - "name": "body", - "width": "fill_container", - "layout": "vertical", - "padding": 20, - "gap": 16, - "children": [ - { - "type": "frame", - "id": "CustomerAddFieldName", - "name": "fieldName", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "CustomerAddLabelName", - "fill": "$text-secondary", - "content": "H\u1ecd v\u00e0 t\u00ean *", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "CustomerAddInputName", - "name": "inputName", - "width": "fill_container", - "height": 48, - "fill": "$bg-surface", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "padding": [ - 0, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "CustomerAddInputNameText", - "fill": "$text-tertiary", - "content": "Nh\u1eadp h\u1ecd v\u00e0 t\u00ean kh\u00e1ch h\u00e0ng", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "CustomerAddFieldPhone", - "name": "fieldPhone", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "CustomerAddLabelPhone", - "fill": "$text-secondary", - "content": "S\u1ed1 \u0111i\u1ec7n tho\u1ea1i *", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "CustomerAddInputPhone", - "name": "inputPhone", - "width": "fill_container", - "height": 48, - "fill": "$bg-surface", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$orange-primary" - }, - "padding": [ - 0, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "CustomerAddInputPhoneText", - "fill": "$text-primary", - "content": "0987 654 321", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "CustomerAddFieldEmail", - "name": "fieldEmail", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "CustomerAddLabelEmail", - "fill": "$text-secondary", - "content": "Email (t\u00f9y ch\u1ecdn)", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "CustomerAddInputEmail", - "name": "inputEmail", - "width": "fill_container", - "height": 48, - "fill": "$bg-surface", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "padding": [ - 0, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "CustomerAddInputEmailText", - "fill": "$text-tertiary", - "content": "email@example.com", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "CustomerAddFieldNote", - "name": "fieldNote", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "CustomerAddLabelNote", - "fill": "$text-secondary", - "content": "Ghi ch\u00fa", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "CustomerAddInputNote", - "name": "inputNote", - "width": "fill_container", - "height": 80, - "fill": "$bg-surface", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "padding": 16, - "children": [ - { - "type": "text", - "id": "CustomerAddInputNoteText", - "fill": "$text-tertiary", - "content": "Th\u00eam ghi ch\u00fa v\u1ec1 kh\u00e1ch h\u00e0ng...", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "normal" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "CustomerAddActions", - "name": "actions", - "width": "fill_container", - "padding": [ - 16, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "gap": 12, - "children": [ - { - "type": "frame", - "id": "CustomerAddCancelBtn", - "name": "cancelBtn", - "width": "fill_container", - "height": 48, - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "CustomerAddCancelText", - "fill": "$text-secondary", - "content": "H\u1ee7y", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "CustomerAddSaveBtn", - "name": "saveBtn", - "width": "fill_container", - "height": 48, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CustomerAddSaveIcon", - "width": 18, - "height": 18, - "iconFontName": "save", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "CustomerAddSaveText", - "fill": "$text-primary", - "content": "L\u01b0u kh\u00e1ch h\u00e0ng", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "OrderPanelBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "OrderPanelBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "ORDER PANEL", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "OrderPanelFull", - "name": "Organism/OrderPanel/Full", - "reusable": true, - "width": 420, - "height": 720, - "fill": "$bg-elevated", - "cornerRadius": 20, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "OrderPanelTopBar", - "name": "topBar", - "width": "fill_container", - "padding": [ - 16, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "OrderPanelOrderInfo", - "name": "orderInfo", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "OrderPanelOrderNum", - "name": "orderNumber", - "fill": "$text-primary", - "content": "\u0110\u01a1n #0042", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "OrderPanelTableInfo", - "name": "tableInfo", - "fill": "$text-secondary", - "content": "B\u00e0n 12 \u2022 3 m\u00f3n", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "OrderPanelActions", - "name": "actions", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "OrderPanelBtnHold", - "name": "holdBtn", - "width": 40, - "height": 40, - "fill": "$bg-interactive", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "OrderPanelHoldIcon", - "width": 20, - "height": 20, - "iconFontName": "pause", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - }, - { - "type": "frame", - "id": "OrderPanelBtnMore", - "name": "moreBtn", - "width": 40, - "height": 40, - "fill": "$bg-interactive", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "OrderPanelMoreIcon", - "width": 20, - "height": 20, - "iconFontName": "more-vertical", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "OrderPanelItemsList", - "name": "itemsList", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "gap": 0, - "children": [ - { - "type": "frame", - "id": "OrderPanelItem1", - "name": "orderItem1", - "width": "fill_container", - "padding": [ - 14, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "OrderPanelItem1Left", - "name": "leftContent", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "OrderPanelItem1Qty", - "name": "qtyBadge", - "width": 32, - "height": 32, - "fill": "$bg-interactive", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "OrderPanelItem1QtyText", - "fill": "$text-primary", - "content": "2", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "OrderPanelItem1Info", - "name": "itemInfo", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "OrderPanelItem1Name", - "fill": "$text-primary", - "content": "C\u00e0 Ph\u00ea S\u1eefa \u0110\u00e1", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "text", - "id": "OrderPanelItem1Note", - "fill": "$text-tertiary", - "content": "\u00cdt \u0111\u01b0\u1eddng", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "text", - "id": "OrderPanelItem1Price", - "fill": "$text-primary", - "content": "58,000\u20ab", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "OrderPanelItem2", - "name": "orderItem2", - "width": "fill_container", - "padding": [ - 14, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "OrderPanelItem2Left", - "name": "leftContent", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "OrderPanelItem2Qty", - "name": "qtyBadge", - "width": 32, - "height": 32, - "fill": "$bg-interactive", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "OrderPanelItem2QtyText", - "fill": "$text-primary", - "content": "1", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "OrderPanelItem2Name", - "fill": "$text-primary", - "content": "B\u00e1nh M\u00ec Th\u1ecbt Ngu\u1ed9i", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "OrderPanelItem2Price", - "fill": "$text-primary", - "content": "45,000\u20ab", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "OrderPanelItem3", - "name": "orderItem3", - "width": "fill_container", - "padding": [ - 14, - 20 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "OrderPanelItem3Left", - "name": "leftContent", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "OrderPanelItem3Qty", - "name": "qtyBadge", - "width": 32, - "height": 32, - "fill": "$bg-interactive", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "OrderPanelItem3QtyText", - "fill": "$text-primary", - "content": "1", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "OrderPanelItem3Name", - "fill": "$text-primary", - "content": "Tr\u00e0 \u0110\u00e0o Cam S\u1ea3", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "OrderPanelItem3Price", - "fill": "$text-primary", - "content": "35,000\u20ab", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "OrderPanelSummary", - "name": "summarySection", - "width": "fill_container", - "fill": "$bg-surface", - "layout": "vertical", - "padding": 20, - "gap": 12, - "children": [ - { - "type": "frame", - "id": "OrderPanelSubtotal", - "name": "subtotalRow", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "OrderPanelSubtotalLabel", - "fill": "$text-secondary", - "content": "T\u1ea1m t\u00ednh", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "OrderPanelSubtotalValue", - "fill": "$text-secondary", - "content": "138,000\u20ab", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "OrderPanelDiscount", - "name": "discountRow", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "OrderPanelDiscountLabel", - "fill": "$green-success", - "content": "Khuy\u1ebfn m\u00e3i", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "OrderPanelDiscountValue", - "fill": "$green-success", - "content": "-10,000\u20ab", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "OrderPanelDivider", - "name": "divider", - "width": "fill_container", - "height": 1, - "fill": "$border-subtle" - }, - { - "type": "frame", - "id": "OrderPanelTotal", - "name": "totalRow", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "OrderPanelTotalLabel", - "fill": "$text-primary", - "content": "T\u1ed5ng c\u1ed9ng", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - }, - { - "type": "text", - "id": "OrderPanelTotalValue", - "fill": "$orange-primary", - "content": "128,000\u20ab", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "700" - } - ] - } - ] - }, - { - "type": "frame", - "id": "OrderPanelPayBtn", - "name": "payButton", - "width": "fill_container", - "height": 64, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "justifyContent": "center", - "alignItems": "center", - "gap": 10, - "children": [ - { - "type": "icon_font", - "id": "OrderPanelPayIcon", - "width": 24, - "height": 24, - "iconFontName": "credit-card", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "OrderPanelPayText", - "fill": "$text-primary", - "content": "Thanh to\u00e1n", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "OrderPanelVariantsBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "OrderPanelVariantsBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "STATES", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "OrderPanelEmpty", - "name": "Organism/OrderPanel/Empty", - "reusable": true, - "width": 360, - "height": 400, - "fill": "$bg-elevated", - "cornerRadius": 20, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "gap": 16, - "children": [ - { - "type": "icon_font", - "id": "OrderPanelEmptyIcon", - "width": 64, - "height": 64, - "iconFontName": "shopping-cart", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "OrderPanelEmptyTitle", - "fill": "$text-secondary", - "content": "Ch\u01b0a c\u00f3 m\u00f3n", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "500" - }, - { - "type": "text", - "id": "OrderPanelEmptyDesc", - "fill": "$text-tertiary", - "content": "Ch\u1ecdn s\u1ea3n ph\u1ea9m \u0111\u1ec3 th\u00eam v\u00e0o \u0111\u01a1n", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "OrderPanelCompact", - "name": "Organism/OrderPanel/Compact", - "reusable": true, - "width": 360, - "height": 400, - "fill": "$bg-elevated", - "cornerRadius": 20, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "OrderPanelCompactHeader", - "name": "header", - "width": "fill_container", - "padding": [ - 14, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "OrderPanelCompactTitle", - "fill": "$text-primary", - "content": "\u0110\u01a1n #0043", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "OrderPanelCompactBadge", - "name": "itemCount", - "fill": "$orange-primary", - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "OrderPanelCompactCount", - "fill": "$text-primary", - "content": "5 m\u00f3n", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "OrderPanelCompactItems", - "name": "itemsList", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "padding": [ - 12, - 20 - ], - "gap": 8, - "children": [ - { - "type": "text", - "id": "OrderPanelCompactItem1", - "fill": "$text-secondary", - "content": "2x C\u00e0 Ph\u00ea S\u1eefa \u0110\u00e1", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "OrderPanelCompactItem2", - "fill": "$text-secondary", - "content": "1x B\u00e1nh M\u00ec Th\u1ecbt Ngu\u1ed9i", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "OrderPanelCompactItem3", - "fill": "$text-secondary", - "content": "2x Tr\u00e0 \u0110\u00e0o Cam S\u1ea3", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "OrderPanelCompactFooter", - "name": "footer", - "width": "fill_container", - "fill": "$bg-surface", - "padding": [ - 16, - 20 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "OrderPanelCompactTotalLabel", - "fill": "$text-primary", - "content": "T\u1ed5ng c\u1ed9ng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "text", - "id": "OrderPanelCompactTotalValue", - "fill": "$orange-primary", - "content": "198,000\u20ab", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "700" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PaymentModalBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "PaymentModalBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "PAYMENT MODAL", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "PaymentModalFull", - "name": "Organism/PaymentModal/Full", - "reusable": true, - "width": 520, - "fill": "$bg-elevated", - "cornerRadius": 24, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "PaymentModalTopBar", - "name": "topBar", - "width": "fill_container", - "padding": [ - 20, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PaymentModalTopTitle", - "fill": "$text-primary", - "content": "Thanh to\u00e1n", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "PaymentModalCloseBtn", - "name": "closeBtn", - "width": 40, - "height": 40, - "fill": "$bg-interactive", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PaymentModalCloseIcon", - "width": 20, - "height": 20, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PaymentModalBody", - "name": "body", - "width": "fill_container", - "layout": "vertical", - "padding": 24, - "gap": 24, - "children": [ - { - "type": "frame", - "id": "PaymentModalAmount", - "name": "amountSection", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "layout": "vertical", - "padding": 20, - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PaymentModalAmountLabel", - "fill": "$text-secondary", - "content": "T\u1ed5ng thanh to\u00e1n", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "PaymentModalAmountValue", - "fill": "$orange-primary", - "content": "128,000\u20ab", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "PaymentModalMethods", - "name": "methodsSection", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "PaymentModalMethodsLabel", - "fill": "$text-secondary", - "content": "Ph\u01b0\u01a1ng th\u1ee9c thanh to\u00e1n", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "PaymentModalMethodsGrid", - "name": "methodsGrid", - "width": "fill_container", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "PayMethodCash", - "name": "cashMethod", - "width": "fill_container", - "height": 80, - "fill": "$bg-surface", - "cornerRadius": 14, - "stroke": { - "thickness": 2, - "fill": "$orange-primary" - }, - "layout": "vertical", - "gap": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PayMethodCashIcon", - "width": 28, - "height": 28, - "iconFontName": "banknote", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "PayMethodCashText", - "fill": "$text-primary", - "content": "Ti\u1ec1n m\u1eb7t", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PayMethodCard", - "name": "cardMethod", - "width": "fill_container", - "height": 80, - "fill": "$bg-surface", - "cornerRadius": 14, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "gap": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PayMethodCardIcon", - "width": 28, - "height": 28, - "iconFontName": "credit-card", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PayMethodCardText", - "fill": "$text-secondary", - "content": "Th\u1ebb", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PayMethodQR", - "name": "qrMethod", - "width": "fill_container", - "height": 80, - "fill": "$bg-surface", - "cornerRadius": 14, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "gap": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PayMethodQRIcon", - "width": 28, - "height": 28, - "iconFontName": "qr-code", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PayMethodQRText", - "fill": "$text-secondary", - "content": "QR Code", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PaymentModalCashInput", - "name": "cashInputSection", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "PaymentModalCashLabel", - "fill": "$text-secondary", - "content": "Ti\u1ec1n kh\u00e1ch \u0111\u01b0a", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "PaymentModalCashField", - "name": "cashField", - "width": "fill_container", - "height": 56, - "fill": "$bg-surface", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "padding": [ - 0, - 20 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PaymentModalCashValue", - "fill": "$text-primary", - "content": "200,000", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - }, - { - "type": "text", - "id": "PaymentModalCashCurrency", - "fill": "$text-tertiary", - "content": "\u20ab", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "PaymentModalQuickAmounts", - "name": "quickAmounts", - "width": "fill_container", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "QuickAmt50", - "name": "amt50k", - "fill": "$bg-interactive", - "cornerRadius": 8, - "padding": [ - 10, - 16 - ], - "children": [ - { - "type": "text", - "id": "QuickAmt50Text", - "fill": "$text-secondary", - "content": "50K", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "QuickAmt100", - "name": "amt100k", - "fill": "$bg-interactive", - "cornerRadius": 8, - "padding": [ - 10, - 16 - ], - "children": [ - { - "type": "text", - "id": "QuickAmt100Text", - "fill": "$text-secondary", - "content": "100K", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "QuickAmt200", - "name": "amt200k", - "fill": "$orange-primary", - "cornerRadius": 8, - "padding": [ - 10, - 16 - ], - "children": [ - { - "type": "text", - "id": "QuickAmt200Text", - "fill": "$text-primary", - "content": "200K", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "QuickAmt500", - "name": "amt500k", - "fill": "$bg-interactive", - "cornerRadius": 8, - "padding": [ - 10, - 16 - ], - "children": [ - { - "type": "text", - "id": "QuickAmt500Text", - "fill": "$text-secondary", - "content": "500K", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "QuickAmtExact", - "name": "amtExact", - "fill": "$bg-interactive", - "cornerRadius": 8, - "padding": [ - 10, - 16 - ], - "children": [ - { - "type": "text", - "id": "QuickAmtExactText", - "fill": "$text-secondary", - "content": "\u0110\u1ee7 ti\u1ec1n", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PaymentModalChange", - "name": "changeSection", - "width": "fill_container", - "fill": "#22C55E18", - "cornerRadius": 12, - "padding": [ - 16, - 20 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PaymentModalChangeLabel", - "fill": "$green-success", - "content": "Ti\u1ec1n th\u1ed1i l\u1ea1i", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "500" - }, - { - "type": "text", - "id": "PaymentModalChangeValue", - "fill": "$green-success", - "content": "72,000\u20ab", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "700" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PaymentModalActions", - "name": "actions", - "width": "fill_container", - "padding": 24, - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "gap": 12, - "children": [ - { - "type": "frame", - "id": "PaymentModalCancelBtn", - "name": "cancelBtn", - "width": "fill_container", - "height": 52, - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PaymentModalCancelText", - "fill": "$text-secondary", - "content": "H\u1ee7y", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PaymentModalConfirmBtn", - "name": "confirmBtn", - "width": "fill_container", - "height": 52, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PaymentModalConfirmIcon", - "width": 20, - "height": 20, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "PaymentModalConfirmText", - "fill": "$text-primary", - "content": "X\u00e1c nh\u1eadn thanh to\u00e1n", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PaymentSuccessBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "PaymentSuccessBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "SUCCESS STATE", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "PaymentSuccessModal", - "name": "Organism/PaymentModal/Success", - "reusable": true, - "width": 420, - "fill": "$bg-elevated", - "cornerRadius": 24, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "padding": 40, - "gap": 24, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PaymentSuccessIconWrapper", - "name": "iconWrapper", - "width": 80, - "height": 80, - "fill": "#22C55E18", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PaymentSuccessIcon", - "width": 40, - "height": 40, - "iconFontName": "check-circle", - "iconFontFamily": "lucide", - "fill": "$green-success" - } - ] - }, - { - "type": "frame", - "id": "PaymentSuccessContent", - "name": "content", - "layout": "vertical", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PaymentSuccessContentTitle", - "fill": "$text-primary", - "content": "Thanh to\u00e1n th\u00e0nh c\u00f4ng!", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "600", - "textAlign": "center" - }, - { - "type": "text", - "id": "PaymentSuccessContentDesc", - "fill": "$text-secondary", - "content": "\u0110\u01a1n h\u00e0ng #0042 \u0111\u00e3 \u0111\u01b0\u1ee3c thanh to\u00e1n", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "normal", - "textAlign": "center" - } - ] - }, - { - "type": "frame", - "id": "PaymentSuccessSummary", - "name": "summary", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 14, - "layout": "vertical", - "padding": 20, - "gap": 12, - "children": [ - { - "type": "frame", - "id": "PaymentSuccessSummaryTotal", - "name": "totalRow", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "PaymentSuccessTotalLabel", - "fill": "$text-secondary", - "content": "T\u1ed5ng thanh to\u00e1n", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "PaymentSuccessTotalValue", - "fill": "$text-primary", - "content": "128,000\u20ab", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "PaymentSuccessSummaryMethod", - "name": "methodRow", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "PaymentSuccessMethodLabel", - "fill": "$text-secondary", - "content": "Ph\u01b0\u01a1ng th\u1ee9c", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "PaymentSuccessMethodValue", - "fill": "$text-primary", - "content": "Ti\u1ec1n m\u1eb7t", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PaymentSuccessSummaryChange", - "name": "changeRow", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "PaymentSuccessChangeLabel", - "fill": "$green-success", - "content": "Ti\u1ec1n th\u1ed1i l\u1ea1i", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "PaymentSuccessChangeValue", - "fill": "$green-success", - "content": "72,000\u20ab", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PaymentSuccessActions", - "name": "actions", - "width": "fill_container", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "PaymentSuccessPrintBtn", - "name": "printBtn", - "width": "fill_container", - "height": 48, - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PaymentSuccessPrintIcon", - "width": 18, - "height": 18, - "iconFontName": "printer", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PaymentSuccessPrintText", - "fill": "$text-secondary", - "content": "In h\u00f3a \u0111\u01a1n", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PaymentSuccessNewBtn", - "name": "newOrderBtn", - "width": "fill_container", - "height": 48, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PaymentSuccessNewIcon", - "width": 18, - "height": 18, - "iconFontName": "plus", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "PaymentSuccessNewText", - "fill": "$text-primary", - "content": "\u0110\u01a1n m\u1edbi", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ProductGridBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "ProductGridBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "PRODUCT GRID", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "ProductGridFull", - "name": "Organism/ProductGrid/Full", - "reusable": true, - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "ProductGridToolbar", - "name": "toolbar", - "width": "fill_container", - "padding": [ - 16, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ProductGridSearch", - "name": "searchBox", - "width": 320, - "height": 44, - "fill": "$bg-surface", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "padding": [ - 0, - 16 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ProductGridSearchIcon", - "width": 20, - "height": 20, - "iconFontName": "search", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "ProductGridSearchText", - "fill": "$text-tertiary", - "content": "T\u00ecm s\u1ea3n ph\u1ea9m, m\u00e3 v\u1ea1ch...", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "ProductGridScanBtn", - "name": "scanButton", - "height": 44, - "fill": "$bg-interactive", - "cornerRadius": 12, - "padding": [ - 0, - 16 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ProductGridScanIcon", - "width": 20, - "height": 20, - "iconFontName": "scan-barcode", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "ProductGridScanText", - "fill": "$text-secondary", - "content": "Qu\u00e9t m\u00e3", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "ProductGridViewToggle", - "name": "viewToggle", - "fill": "$bg-surface", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "padding": 4, - "gap": 4, - "children": [ - { - "type": "frame", - "id": "ProductGridViewGrid", - "name": "gridView", - "width": 36, - "height": 36, - "fill": "$bg-interactive", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ProductGridViewGridIcon", - "width": 18, - "height": 18, - "iconFontName": "grid-2x2", - "iconFontFamily": "lucide", - "fill": "$text-primary" - } - ] - }, - { - "type": "frame", - "id": "ProductGridViewList", - "name": "listView", - "width": 36, - "height": 36, - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ProductGridViewListIcon", - "width": 18, - "height": 18, - "iconFontName": "list", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ProductGridCategories", - "name": "categoriesBar", - "width": "fill_container", - "padding": [ - 12, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "gap": 12, - "children": [ - { - "type": "frame", - "id": "ProductGridCatAll", - "name": "catAll", - "fill": "$orange-primary", - "cornerRadius": 100, - "padding": [ - 10, - 20 - ], - "children": [ - { - "type": "text", - "id": "ProductGridCatAllText", - "fill": "$text-primary", - "content": "T\u1ea5t c\u1ea3", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "ProductGridCatDrinks", - "name": "catDrinks", - "fill": "$bg-interactive", - "cornerRadius": 100, - "padding": [ - 10, - 20 - ], - "children": [ - { - "type": "text", - "id": "ProductGridCatDrinksText", - "fill": "$text-secondary", - "content": "\u0110\u1ed3 u\u1ed1ng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "ProductGridCatFood", - "name": "catFood", - "fill": "$bg-interactive", - "cornerRadius": 100, - "padding": [ - 10, - 20 - ], - "children": [ - { - "type": "text", - "id": "ProductGridCatFoodText", - "fill": "$text-secondary", - "content": "Th\u1ee9c \u0103n", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "ProductGridCatDesserts", - "name": "catDesserts", - "fill": "$bg-interactive", - "cornerRadius": 100, - "padding": [ - 10, - 20 - ], - "children": [ - { - "type": "text", - "id": "ProductGridCatDessertsText", - "fill": "$text-secondary", - "content": "Tr\u00e1ng mi\u1ec7ng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "ProductGridCatCombo", - "name": "catCombo", - "fill": "$bg-interactive", - "cornerRadius": 100, - "padding": [ - 10, - 20 - ], - "children": [ - { - "type": "text", - "id": "ProductGridCatComboText", - "fill": "$text-secondary", - "content": "Combo", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "ProductGridContent", - "name": "productsGrid", - "width": "fill_container", - "padding": 20, - "gap": 16, - "wrap": true, - "children": [ - { - "type": "frame", - "id": "PGridCard1", - "name": "productCard1", - "width": 160, - "fill": "$bg-surface", - "cornerRadius": 14, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "PGridCard1Img", - "name": "img", - "width": "fill_container", - "height": 110, - "fill": "#3B82F618" - }, - { - "type": "frame", - "id": "PGridCard1Content", - "name": "content", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "padding": 14, - "children": [ - { - "type": "text", - "id": "PGridCard1Name", - "fill": "$text-primary", - "content": "C\u00e0 Ph\u00ea S\u1eefa \u0110\u00e1", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "text", - "id": "PGridCard1Price", - "fill": "$orange-primary", - "content": "29,000\u20ab", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PGridCard2", - "name": "productCard2", - "width": 160, - "fill": "$bg-surface", - "cornerRadius": 14, - "stroke": { - "thickness": 2, - "fill": "$orange-primary" - }, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "PGridCard2Img", - "name": "img", - "width": "fill_container", - "height": 110, - "fill": "#22C55E18" - }, - { - "type": "frame", - "id": "PGridCard2Content", - "name": "content", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "padding": 14, - "children": [ - { - "type": "text", - "id": "PGridCard2Name", - "fill": "$text-primary", - "content": "Tr\u00e0 \u0110\u00e0o Cam S\u1ea3", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "text", - "id": "PGridCard2Price", - "fill": "$orange-primary", - "content": "35,000\u20ab", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PGridCard3", - "name": "productCard3", - "width": 160, - "fill": "$bg-surface", - "cornerRadius": 14, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "PGridCard3Img", - "name": "img", - "width": "fill_container", - "height": 110, - "fill": "#F59E0B18" - }, - { - "type": "frame", - "id": "PGridCard3Content", - "name": "content", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "padding": 14, - "children": [ - { - "type": "text", - "id": "PGridCard3Name", - "fill": "$text-primary", - "content": "B\u00e1nh M\u00ec Th\u1ecbt Ngu\u1ed9i", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "text", - "id": "PGridCard3Price", - "fill": "$orange-primary", - "content": "45,000\u20ab", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PGridCard4", - "name": "productCard4", - "width": 160, - "fill": "$bg-surface", - "cornerRadius": 14, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "PGridCard4Img", - "name": "img", - "width": "fill_container", - "height": 110, - "fill": "#8B5CF618" - }, - { - "type": "frame", - "id": "PGridCard4Content", - "name": "content", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "padding": 14, - "children": [ - { - "type": "text", - "id": "PGridCard4Name", - "fill": "$text-primary", - "content": "Matcha Latte", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "text", - "id": "PGridCard4Price", - "fill": "$orange-primary", - "content": "42,000\u20ab", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PGridCard5", - "name": "productCard5", - "width": 160, - "fill": "$bg-surface", - "cornerRadius": 14, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "PGridCard5Img", - "name": "img", - "width": "fill_container", - "height": 110, - "fill": "#EC489918" - }, - { - "type": "frame", - "id": "PGridCard5Content", - "name": "content", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "padding": 14, - "children": [ - { - "type": "text", - "id": "PGridCard5Name", - "fill": "$text-primary", - "content": "Sinh T\u1ed1 D\u00e2u", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "text", - "id": "PGridCard5Price", - "fill": "$orange-primary", - "content": "38,000\u20ab", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PGridCard6", - "name": "productCard6", - "width": 160, - "fill": "$bg-surface", - "cornerRadius": 14, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "clip": true, - "opacity": 0.5, - "children": [ - { - "type": "frame", - "id": "PGridCard6Img", - "name": "img", - "width": "fill_container", - "height": 110, - "fill": "$bg-interactive", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PGridCard6OOS", - "fill": "$text-disabled", - "content": "H\u1ebft h\u00e0ng", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "PGridCard6Content", - "name": "content", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "padding": 14, - "children": [ - { - "type": "text", - "id": "PGridCard6Name", - "fill": "$text-disabled", - "content": "Sinh T\u1ed1 B\u01a1", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "text", - "id": "PGridCard6Price", - "fill": "$text-disabled", - "content": "45,000\u20ab", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "CategoryTabsBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "CategoryTabsBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "CATEGORY TABS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "CategoryTabsVertical", - "name": "Organism/CategoryTabs/Vertical", - "reusable": true, - "width": 200, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "padding": 12, - "gap": 8, - "children": [ - { - "type": "frame", - "id": "CategoryTabAll", - "name": "tabAll", - "width": "fill_container", - "fill": "$orange-primary", - "cornerRadius": 12, - "padding": [ - 14, - 16 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CategoryTabAllIcon", - "width": 20, - "height": 20, - "iconFontName": "layout-grid", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "CategoryTabAllText", - "fill": "$text-primary", - "content": "T\u1ea5t c\u1ea3", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "CategoryTabDrinks", - "name": "tabDrinks", - "width": "fill_container", - "cornerRadius": 12, - "padding": [ - 14, - 16 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CategoryTabDrinksIcon", - "width": 20, - "height": 20, - "iconFontName": "coffee", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "CategoryTabDrinksText", - "fill": "$text-secondary", - "content": "\u0110\u1ed3 u\u1ed1ng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "CategoryTabFood", - "name": "tabFood", - "width": "fill_container", - "cornerRadius": 12, - "padding": [ - 14, - 16 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CategoryTabFoodIcon", - "width": 20, - "height": 20, - "iconFontName": "utensils", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "CategoryTabFoodText", - "fill": "$text-secondary", - "content": "Th\u1ee9c \u0103n", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "CategoryTabDesserts", - "name": "tabDesserts", - "width": "fill_container", - "cornerRadius": 12, - "padding": [ - 14, - 16 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CategoryTabDessertsIcon", - "width": 20, - "height": 20, - "iconFontName": "cake-slice", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "CategoryTabDessertsText", - "fill": "$text-secondary", - "content": "Tr\u00e1ng mi\u1ec7ng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "CategoryTabCombo", - "name": "tabCombo", - "width": "fill_container", - "cornerRadius": 12, - "padding": [ - 14, - 16 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CategoryTabComboIcon", - "width": 20, - "height": 20, - "iconFontName": "package", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "CategoryTabComboText", - "fill": "$text-secondary", - "content": "Combo", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "QuickActionsBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "QuickActionsBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "QUICK ACTIONS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "QuickActionsBar", - "name": "Organism/QuickActions/Bar", - "reusable": true, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "padding": 16, - "gap": 12, - "children": [ - { - "type": "frame", - "id": "QABtnNewOrder", - "name": "newOrderBtn", - "width": 100, - "height": 90, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 14, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "QABtnNewOrderIcon", - "width": 28, - "height": 28, - "iconFontName": "plus", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "QABtnNewOrderText", - "fill": "$text-primary", - "content": "\u0110\u01a1n m\u1edbi", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "QABtnHold", - "name": "holdBtn", - "width": 100, - "height": 90, - "fill": "$bg-interactive", - "cornerRadius": 14, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "QABtnHoldIcon", - "width": 28, - "height": 28, - "iconFontName": "pause", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "QABtnHoldText", - "fill": "$text-secondary", - "content": "T\u1ea1m gi\u1eef", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "QABtnRecall", - "name": "recallBtn", - "width": 100, - "height": 90, - "fill": "$bg-interactive", - "cornerRadius": 14, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "QABtnRecallBadge", - "name": "badge", - "fill": "#EF4444", - "cornerRadius": 100, - "padding": [ - 2, - 6 - ], - "position": "absolute", - "x": 70, - "y": 8, - "children": [ - { - "type": "text", - "id": "QABtnRecallBadgeText", - "fill": "#FFFFFF", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - } - ] - }, - { - "type": "icon_font", - "id": "QABtnRecallIcon", - "width": 28, - "height": 28, - "iconFontName": "clipboard-list", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "QABtnRecallText", - "fill": "$text-secondary", - "content": "\u0110\u01a1n ch\u1edd", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "QABtnDiscount", - "name": "discountBtn", - "width": 100, - "height": 90, - "fill": "$bg-interactive", - "cornerRadius": 14, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "QABtnDiscountIcon", - "width": 28, - "height": 28, - "iconFontName": "percent", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "QABtnDiscountText", - "fill": "$text-secondary", - "content": "Gi\u1ea3m gi\u00e1", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "QABtnCustomer", - "name": "customerBtn", - "width": 100, - "height": 90, - "fill": "$bg-interactive", - "cornerRadius": 14, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "QABtnCustomerIcon", - "width": 28, - "height": 28, - "iconFontName": "user", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "QABtnCustomerText", - "fill": "$text-secondary", - "content": "Kh\u00e1ch h\u00e0ng", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "QABtnPrint", - "name": "printBtn", - "width": 100, - "height": 90, - "fill": "$bg-interactive", - "cornerRadius": 14, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "QABtnPrintIcon", - "width": 28, - "height": 28, - "iconFontName": "printer", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "QABtnPrintText", - "fill": "$text-secondary", - "content": "In bill", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "QABtnMore", - "name": "moreBtn", - "width": 100, - "height": 90, - "fill": "$bg-interactive", - "cornerRadius": 14, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "QABtnMoreIcon", - "width": 28, - "height": 28, - "iconFontName": "more-horizontal", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "QABtnMoreText", - "fill": "$text-secondary", - "content": "Th\u00eam", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "QAVerticalBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "QAVerticalBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "SIDEBAR ACTIONS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "QuickActionsSidebar", - "name": "Organism/QuickActions/Sidebar", - "reusable": true, - "width": 72, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "padding": 12, - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "QASideNewOrder", - "name": "newOrderBtn", - "width": 48, - "height": 48, - "fill": "$orange-primary", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "QASideNewOrderIcon", - "width": 22, - "height": 22, - "iconFontName": "plus", - "iconFontFamily": "lucide", - "fill": "$text-primary" - } - ] - }, - { - "type": "frame", - "id": "QASideHold", - "name": "holdBtn", - "width": 48, - "height": 48, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "QASideHoldIcon", - "width": 22, - "height": 22, - "iconFontName": "pause", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - }, - { - "type": "frame", - "id": "QASideRecall", - "name": "recallBtn", - "width": 48, - "height": 48, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "QASideRecallIcon", - "width": 22, - "height": 22, - "iconFontName": "clipboard-list", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - }, - { - "type": "frame", - "id": "QASideDiscount", - "name": "discountBtn", - "width": 48, - "height": 48, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "QASideDiscountIcon", - "width": 22, - "height": 22, - "iconFontName": "percent", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - }, - { - "type": "frame", - "id": "QASideCustomer", - "name": "customerBtn", - "width": 48, - "height": 48, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "QASideCustomerIcon", - "width": 22, - "height": 22, - "iconFontName": "user", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - }, - { - "type": "frame", - "id": "QASidePrint", - "name": "printBtn", - "width": 48, - "height": 48, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "QASidePrintIcon", - "width": 22, - "height": 22, - "iconFontName": "printer", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - }, - { - "type": "frame", - "id": "QASideSpacer", - "name": "spacer", - "width": 1, - "height": "fill_container" - }, - { - "type": "frame", - "id": "QASideSettings", - "name": "settingsBtn", - "width": 48, - "height": 48, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "QASideSettingsIcon", - "width": 22, - "height": 22, - "iconFontName": "settings", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "ReceiptPreviewBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "ReceiptPreviewBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "RECEIPT PREVIEW", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "ReceiptPreviewFull", - "name": "Organism/ReceiptPreview/Full", - "reusable": true, - "width": 340, - "fill": "#FFFFFF", - "cornerRadius": 4, - "layout": "vertical", - "padding": [ - 24, - 20 - ], - "gap": 16, - "children": [ - { - "type": "frame", - "id": "ReceiptHeader", - "name": "receiptHeader", - "width": "fill_container", - "layout": "vertical", - "gap": 4, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ReceiptStoreName", - "fill": "#111111", - "content": "GoodGo Caf\u00e9", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "700", - "textAlign": "center" - }, - { - "type": "text", - "id": "ReceiptStoreAddr", - "fill": "#666666", - "content": "123 Nguy\u1ec5n Hu\u1ec7, Q.1, TP.HCM", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal", - "textAlign": "center" - }, - { - "type": "text", - "id": "ReceiptStorePhone", - "fill": "#666666", - "content": "Tel: 1900 1234", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal", - "textAlign": "center" - } - ] - }, - { - "type": "frame", - "id": "ReceiptDivider1", - "name": "divider1", - "width": "fill_container", - "height": 1, - "stroke": { - "thickness": 1, - "fill": "#CCCCCC", - "style": "dashed" - } - }, - { - "type": "frame", - "id": "ReceiptInfo", - "name": "receiptInfo", - "width": "fill_container", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "frame", - "id": "ReceiptInfoOrder", - "name": "orderRow", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "ReceiptInfoOrderLabel", - "fill": "#666666", - "content": "S\u1ed1 H\u0110:", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "ReceiptInfoOrderValue", - "fill": "#111111", - "content": "#0042", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "ReceiptInfoDate", - "name": "dateRow", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "ReceiptInfoDateLabel", - "fill": "#666666", - "content": "Ng\u00e0y:", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "ReceiptInfoDateValue", - "fill": "#111111", - "content": "05/02/2026 23:00", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "ReceiptInfoTable", - "name": "tableRow", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "ReceiptInfoTableLabel", - "fill": "#666666", - "content": "B\u00e0n:", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "ReceiptInfoTableValue", - "fill": "#111111", - "content": "B\u00e0n 12", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "ReceiptInfoCashier", - "name": "cashierRow", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "ReceiptInfoCashierLabel", - "fill": "#666666", - "content": "Thu ng\u00e2n:", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "ReceiptInfoCashierValue", - "fill": "#111111", - "content": "Minh", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "ReceiptDivider2", - "name": "divider2", - "width": "fill_container", - "height": 1, - "stroke": { - "thickness": 1, - "fill": "#CCCCCC", - "style": "dashed" - } - }, - { - "type": "frame", - "id": "ReceiptItems", - "name": "receiptItems", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "ReceiptItem1", - "name": "receiptItem1", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "ReceiptItem1Left", - "name": "leftContent", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "ReceiptItem1Name", - "fill": "#111111", - "content": "C\u00e0 Ph\u00ea S\u1eefa \u0110\u00e1 x2", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - }, - { - "type": "text", - "id": "ReceiptItem1Note", - "fill": "#888888", - "content": "\u00cdt \u0111\u01b0\u1eddng", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "ReceiptItem1Price", - "fill": "#111111", - "content": "58,000", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "ReceiptItem2", - "name": "receiptItem2", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "ReceiptItem2Name", - "fill": "#111111", - "content": "B\u00e1nh M\u00ec Th\u1ecbt Ngu\u1ed9i x1", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - }, - { - "type": "text", - "id": "ReceiptItem2Price", - "fill": "#111111", - "content": "45,000", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "ReceiptItem3", - "name": "receiptItem3", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "ReceiptItem3Name", - "fill": "#111111", - "content": "Tr\u00e0 \u0110\u00e0o Cam S\u1ea3 x1", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - }, - { - "type": "text", - "id": "ReceiptItem3Price", - "fill": "#111111", - "content": "35,000", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "ReceiptDivider3", - "name": "divider3", - "width": "fill_container", - "height": 1, - "stroke": { - "thickness": 1, - "fill": "#CCCCCC", - "style": "dashed" - } - }, - { - "type": "frame", - "id": "ReceiptSummary", - "name": "receiptSummary", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "frame", - "id": "ReceiptSummarySubtotal", - "name": "subtotalRow", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "ReceiptSubtotalLabel", - "fill": "#666666", - "content": "T\u1ea1m t\u00ednh:", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "ReceiptSubtotalValue", - "fill": "#111111", - "content": "138,000", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "ReceiptSummaryDiscount", - "name": "discountRow", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "ReceiptDiscountLabel", - "fill": "#666666", - "content": "Gi\u1ea3m gi\u00e1:", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "ReceiptDiscountValue", - "fill": "#22C55E", - "content": "-10,000", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "ReceiptSummaryTotal", - "name": "totalRow", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "ReceiptTotalLabel", - "fill": "#111111", - "content": "T\u1ed4NG C\u1ed8NG:", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "700" - }, - { - "type": "text", - "id": "ReceiptTotalValue", - "fill": "#111111", - "content": "128,000\u20ab", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "700" - } - ] - } - ] - }, - { - "type": "frame", - "id": "ReceiptDivider4", - "name": "divider4", - "width": "fill_container", - "height": 1, - "stroke": { - "thickness": 1, - "fill": "#CCCCCC", - "style": "dashed" - } - }, - { - "type": "frame", - "id": "ReceiptPayment", - "name": "receiptPayment", - "width": "fill_container", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "frame", - "id": "ReceiptPaymentMethod", - "name": "methodRow", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "ReceiptPaymentMethodLabel", - "fill": "#666666", - "content": "Thanh to\u00e1n:", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "ReceiptPaymentMethodValue", - "fill": "#111111", - "content": "Ti\u1ec1n m\u1eb7t", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "ReceiptPaymentCash", - "name": "cashRow", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "ReceiptPaymentCashLabel", - "fill": "#666666", - "content": "Ti\u1ec1n kh\u00e1ch:", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "ReceiptPaymentCashValue", - "fill": "#111111", - "content": "200,000", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "ReceiptPaymentChange", - "name": "changeRow", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "ReceiptPaymentChangeLabel", - "fill": "#666666", - "content": "Ti\u1ec1n th\u1ed1i:", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "ReceiptPaymentChangeValue", - "fill": "#111111", - "content": "72,000", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "ReceiptFooter", - "name": "receiptFooter", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ReceiptThanks", - "fill": "#666666", - "content": "C\u1ea3m \u01a1n qu\u00fd kh\u00e1ch!", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500", - "textAlign": "center" - }, - { - "type": "text", - "id": "ReceiptWifi", - "fill": "#888888", - "content": "WiFi: GoodGo_Guest | Pass: goodgo123", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "normal", - "textAlign": "center" - } - ] - } - ] - }, - { - "type": "frame", - "id": "NumpadFullBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "NumpadFullBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "POS NUMPAD", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "NumpadFull", - "name": "Organism/Numpad/Full", - "reusable": true, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "gap": 8, - "padding": 16, - "children": [ - { - "type": "frame", - "id": "NumpadRow1", - "name": "row1", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "NK7", - "name": "key7", - "width": 64, - "height": 64, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NK7T", - "fill": "$text-primary", - "content": "7", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NK8", - "name": "key8", - "width": 64, - "height": 64, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NK8T", - "fill": "$text-primary", - "content": "8", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NK9", - "name": "key9", - "width": 64, - "height": 64, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NK9T", - "fill": "$text-primary", - "content": "9", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NKC", - "name": "keyClear", - "width": 64, - "height": 64, - "fill": "#EF444418", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NKCT", - "fill": "#EF4444", - "content": "C", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "700" - } - ] - } - ] - }, - { - "type": "frame", - "id": "NumpadRow2", - "name": "row2", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "NK4", - "name": "key4", - "width": 64, - "height": 64, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NK4T", - "fill": "$text-primary", - "content": "4", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NK5", - "name": "key5", - "width": 64, - "height": 64, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NK5T", - "fill": "$text-primary", - "content": "5", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NK6", - "name": "key6", - "width": 64, - "height": 64, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NK6T", - "fill": "$text-primary", - "content": "6", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NKBack", - "name": "keyBackspace", - "width": 64, - "height": 64, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "NKBackI", - "width": 24, - "height": 24, - "iconFontName": "delete", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "NumpadRow3", - "name": "row3", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "NK1", - "name": "key1", - "width": 64, - "height": 64, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NK1T", - "fill": "$text-primary", - "content": "1", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NK2", - "name": "key2", - "width": 64, - "height": 64, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NK2T", - "fill": "$text-primary", - "content": "2", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NK3", - "name": "key3", - "width": 64, - "height": 64, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NK3T", - "fill": "$text-primary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NKEnter", - "name": "keyEnter", - "width": 64, - "height": 136, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "NKEnterI", - "width": 28, - "height": 28, - "iconFontName": "corner-down-left", - "iconFontFamily": "lucide", - "fill": "$text-primary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "NumpadRow4", - "name": "row4", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "NK0", - "name": "key0", - "width": 136, - "height": 64, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NK0T", - "fill": "$text-primary", - "content": "0", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NKDot", - "name": "keyDot", - "width": 64, - "height": 64, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NKDotT", - "fill": "$text-primary", - "content": ".", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PaymentMethodsBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "PaymentMethodsBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "PAYMENT METHODS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "PaymentGrid", - "name": "Organism/PaymentMethods", - "reusable": true, - "gap": 16, - "children": [ - { - "type": "frame", - "id": "PayCash", - "name": "cashMethod", - "width": 120, - "height": 100, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": { - "thickness": 2, - "fill": "$orange-primary" - }, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PayCashIcon", - "width": 32, - "height": 32, - "iconFontName": "banknote", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "PayCashText", - "fill": "$text-primary", - "content": "Ti\u1ec1n m\u1eb7t", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PayCard", - "name": "cardMethod", - "width": 120, - "height": 100, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PayCardIcon", - "width": 32, - "height": 32, - "iconFontName": "credit-card", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PayCardText", - "fill": "$text-primary", - "content": "Th\u1ebb", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PayQR", - "name": "qrMethod", - "width": 120, - "height": 100, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PayQRIcon", - "width": 32, - "height": 32, - "iconFontName": "qr-code", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PayQRText", - "fill": "$text-primary", - "content": "QR Code", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PayWallet", - "name": "walletMethod", - "width": 120, - "height": 100, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PayWalletIcon", - "width": 32, - "height": 32, - "iconFontName": "wallet", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PayWalletText", - "fill": "$text-primary", - "content": "V\u00ed \u0111i\u1ec7n t\u1eed", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "DialogBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "DialogBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "DIALOGS & TOASTS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "ConfirmDialog", - "name": "Organism/Dialog/Confirm", - "reusable": true, - "width": 400, - "fill": "$bg-elevated", - "cornerRadius": 20, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "gap": 24, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "ConfirmDialogHeader", - "name": "header", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ConfirmDialogIcon", - "width": 48, - "height": 48, - "iconFontName": "circle-alert", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "ConfirmDialogTitle", - "name": "title", - "fill": "$text-primary", - "content": "X\u00e1c nh\u1eadn thanh to\u00e1n", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "600", - "textAlign": "center" - }, - { - "type": "text", - "id": "ConfirmDialogMessage", - "name": "message", - "fill": "$text-secondary", - "content": "Thanh to\u00e1n \u0111\u01a1n h\u00e0ng 100,116\u20ab b\u1eb1ng Ti\u1ec1n m\u1eb7t?", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal", - "textAlign": "center", - "lineHeight": 1.5 - } - ] - }, - { - "type": "frame", - "id": "ConfirmDialogActions", - "name": "actions", - "width": "fill_container", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "ConfirmDialogCancel", - "name": "cancelBtn", - "width": "fill_container", - "height": 48, - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ConfirmDialogCancelText", - "fill": "$text-secondary", - "content": "H\u1ee7y", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "ConfirmDialogConfirm", - "name": "confirmBtn", - "width": "fill_container", - "height": 48, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ConfirmDialogConfirmText", - "fill": "$text-primary", - "content": "X\u00e1c nh\u1eadn", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ToastSuccess", - "name": "Organism/Toast/Success", - "reusable": true, - "width": 400, - "fill": "#22C55E18", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$green-success" - }, - "gap": 12, - "padding": [ - 16, - 20 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ToastSuccessIcon", - "width": 24, - "height": 24, - "iconFontName": "check-circle", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "ToastSuccessText", - "name": "message", - "fill": "$green-success", - "content": "Thanh to\u00e1n th\u00e0nh c\u00f4ng!", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "ToastError", - "name": "Organism/Toast/Error", - "reusable": true, - "width": 400, - "fill": "#EF444418", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "#EF4444" - }, - "gap": 12, - "padding": [ - 16, - 20 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ToastErrorIcon", - "width": 24, - "height": 24, - "iconFontName": "x-circle", - "iconFontFamily": "lucide", - "fill": "#EF4444" - }, - { - "type": "text", - "id": "ToastErrorText", - "name": "message", - "fill": "#EF4444", - "content": "Giao d\u1ecbch th\u1ea5t b\u1ea1i. Vui l\u00f2ng th\u1eed l\u1ea1i.", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "ApptBadge", - "name": "shBadge", - "fill": "#14B8A618", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "ApptBadgeText", - "name": "badgeText", - "fill": "$spa-primary", - "content": "\ud83d\udc86 APPOINTMENT", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "SlotAvailable", - "name": "Organism/Appointment/Available", - "reusable": true, - "width": 140, - "height": 80, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default", - "dashPattern": [ - 4, - 4 - ] - }, - "layout": "vertical", - "gap": 4, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SlotAvailTime", - "name": "slotTime", - "fill": "$text-primary", - "content": "09:00", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "500" - }, - { - "type": "text", - "id": "SlotAvailLabel", - "fill": "$green-success", - "content": "C\u00f3 slot", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "SlotBooked", - "name": "Organism/Appointment/Booked", - "reusable": true, - "width": 140, - "height": 80, - "fill": "$spa-primary", - "cornerRadius": 12, - "layout": "vertical", - "padding": 12, - "gap": 4, - "alignItems": "flex_start", - "children": [ - { - "type": "text", - "id": "SlotBookTime", - "name": "timeRange", - "fill": "$text-muted", - "content": "10:00 - 11:30", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "SlotBookCust", - "name": "customerName", - "fill": "$text-primary", - "content": "Ch\u1ecb Lan", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "text", - "id": "SlotBookSvc", - "name": "serviceName", - "fill": "$text-muted", - "content": "Facial 90 ph\u00fat", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "SlotInProgress", - "name": "Organism/Appointment/InProgress", - "reusable": true, - "width": 140, - "height": 80, - "fill": "$spa-dark", - "cornerRadius": 12, - "stroke": { - "thickness": 2, - "fill": "$green-success" - }, - "layout": "vertical", - "padding": 12, - "gap": 4, - "alignItems": "flex_start", - "children": [ - { - "type": "frame", - "id": "SlotProgTop", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "SlotProgStatus", - "fill": "$green-success", - "content": "\u0110ANG L\u00c0M", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - }, - { - "type": "text", - "id": "SlotProgRemain", - "fill": "$text-muted", - "content": "45p c\u00f2n", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "SlotProgCust", - "name": "customerName", - "fill": "$text-primary", - "content": "Ch\u1ecb H\u01b0\u01a1ng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "text", - "id": "SlotProgStaff", - "name": "therapist", - "fill": "$text-muted", - "content": "NV: Ng\u1ecdc", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "RmGridBadge", - "name": "shBadge", - "fill": "#EC489918", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "icon_font", - "id": "RmGridBadgeIcon", - "iconFontName": "mic", - "iconFontFamily": "lucide", - "width": 12, - "height": 12, - "fill": "$karaoke-primary" - }, - { - "type": "text", - "id": "RmGridBadgeText", - "name": "badgeText", - "fill": "$karaoke-primary", - "content": "ROOM GRID", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "RoomAvailable", - "name": "Organism/Room/Available", - "reusable": true, - "width": 160, - "height": 120, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": { - "thickness": 2, - "fill": "$border-default" - }, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "RmAvailIcon", - "iconFontName": "mic", - "iconFontFamily": "lucide", - "width": 24, - "height": 24, - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "RmAvailName", - "name": "roomName", - "fill": "$text-primary", - "content": "Ph\u00f2ng VIP 01", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - }, - { - "type": "text", - "id": "RmAvailCap", - "name": "capacity", - "fill": "$text-secondary", - "content": "8-12 ng\u01b0\u1eddi", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "RoomOccupied", - "name": "Organism/Room/Occupied", - "reusable": true, - "width": 160, - "height": 120, - "fill": "$karaoke-primary", - "cornerRadius": 16, - "layout": "vertical", - "justifyContent": "space_between", - "padding": 12, - "children": [ - { - "type": "frame", - "id": "RmOccTop", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "RmOccName", - "name": "roomName", - "fill": "$text-primary", - "content": "VIP 02", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "text", - "id": "RmOccTimer", - "name": "sessionTimer", - "fill": "$text-primary", - "content": "01:45:22", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "RmOccMid", - "layout": "vertical", - "gap": 4, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "RmOccAmount", - "name": "totalAmount", - "fill": "$text-primary", - "content": "1,250,000\u0111", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "700" - }, - { - "type": "text", - "id": "RmOccRate", - "name": "hourlyRate", - "fill": "$text-muted", - "content": "Gi\u1edd: 150K/h", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "RmOccActions", - "gap": 8, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "RmOccAddBtn", - "width": 60, - "height": 28, - "fill": "#FFFFFF33", - "cornerRadius": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "RmOccAddTxt", - "fill": "$text-primary", - "content": "+ Th\u00eam", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "RmOccEndBtn", - "width": 60, - "height": 28, - "fill": "#FFFFFF33", - "cornerRadius": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "RmOccEndTxt", - "fill": "$text-primary", - "content": "K\u1ebft th\u00fac", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SvcDispBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "SvcDispBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "SERVICE DISPLAYS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "KitchenTicket", - "name": "Organism/Display/KitchenTicket", - "reusable": true, - "width": 280, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "KTHeader", - "name": "ticketHeader", - "width": "fill_container", - "fill": "$orange-primary", - "cornerRadius": [ - 16, - 16, - 0, - 0 - ], - "padding": [ - 12, - 16 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "KTOrderNum", - "name": "orderNumber", - "fill": "#FFFFFF", - "content": "#0042", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "700" - }, - { - "type": "text", - "id": "KTTableInfo", - "name": "tableInfo", - "fill": "#FFFFFFCC", - "content": "B\u00e0n 07", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "text", - "id": "KTElapsed", - "name": "elapsedTime", - "fill": "#FFFFFF", - "content": "5:32", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "KTItems", - "name": "ticketItems", - "width": "fill_container", - "layout": "vertical", - "padding": 12, - "gap": 8, - "children": [ - { - "type": "frame", - "id": "KTItem1", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "KTItem1Name", - "fill": "$text-primary", - "content": "2x Ph\u1edf b\u00f2 t\u00e1i", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "500" - }, - { - "type": "text", - "id": "KTItem1Note", - "fill": "$status-warning", - "content": "\u00cdt h\u00e0nh", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "KTItem2", - "width": "fill_container", - "children": [ - { - "type": "text", - "id": "KTItem2Name", - "fill": "$text-primary", - "content": "1x B\u00fan ch\u1ea3", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "KTItem3", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "KTItem3Name", - "fill": "$text-secondary", - "content": "1x N\u01b0\u1edbc cam", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "KTItem3Station", - "fill": "$text-tertiary", - "content": "Bar", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "KTActions", - "name": "ticketActions", - "padding": 12, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "KTDoneBtn", - "width": 100, - "height": 36, - "fill": "$green-success", - "cornerRadius": 8, - "gap": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "KTDoneIcon", - "iconFontName": "check", - "iconFontFamily": "lucide", - "width": 16, - "height": 16, - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "KTDoneTxt", - "fill": "#FFFFFF", - "content": "Xong", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "QueueNumber", - "name": "Organism/Display/QueueNumber", - "reusable": true, - "width": 200, - "height": 160, - "fill": "$bg-elevated", - "cornerRadius": 20, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "QNLabel", - "fill": "$text-secondary", - "content": "S\u1ed1 th\u1ee9 t\u1ef1", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "QNNumber", - "name": "queueNumber", - "fill": "$spa-primary", - "content": "A-042", - "fontFamily": "Roboto", - "fontSize": 48, - "fontWeight": "700" - }, - { - "type": "text", - "id": "QNService", - "name": "serviceType", - "fill": "$text-primary", - "content": "Facial", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "QueueCalling", - "name": "Organism/Display/QueueCalling", - "reusable": true, - "width": 300, - "height": 120, - "fill": "$green-success", - "cornerRadius": 20, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "QCLabelRow", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "QCBellIcon", - "iconFontName": "bell-ring", - "iconFontFamily": "lucide", - "width": 20, - "height": 20, - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "QCLabel", - "fill": "#FFFFFF", - "content": "M\u1edcI KH\u00c1CH", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "QCNumber", - "name": "callingNumber", - "fill": "#FFFFFF", - "content": "A-038", - "fontFamily": "Roboto", - "fontSize": 48, - "fontWeight": "700" - }, - { - "type": "text", - "id": "QCStation", - "name": "station", - "fill": "#FFFFFFCC", - "content": "Ph\u00f2ng 3 - Ng\u1ecdc", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "RoomDisplay", - "name": "Organism/Display/RoomStatus", - "reusable": true, - "width": 400, - "height": 300, - "fill": "$bg-surface", - "cornerRadius": 20, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "justifyContent": "space_between", - "padding": 24, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "RDName", - "name": "roomName", - "fill": "$text-primary", - "content": "PH\u00d2NG VIP 01", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "RDTimerBox", - "layout": "vertical", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "RDTimerLabel", - "fill": "$text-secondary", - "content": "TH\u1edcI GIAN", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "RDTimer", - "name": "sessionTimer", - "fill": "$karaoke-primary", - "content": "02:15:42", - "fontFamily": "Roboto", - "fontSize": 64, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "RDStats", - "gap": 24, - "children": [ - { - "type": "frame", - "id": "RDTotalBox", - "layout": "vertical", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "RDTotalLabel", - "fill": "$text-secondary", - "content": "T\u1ed5ng ti\u1ec1n", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "RDTotalVal", - "name": "totalAmount", - "fill": "$text-primary", - "content": "1,850,000\u0111", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "RDPendingBox", - "layout": "vertical", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "RDPendingLabel", - "fill": "$text-secondary", - "content": "Order m\u1edbi", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "RDPendingVal", - "name": "pendingItems", - "fill": "$status-warning", - "content": "3 m\u00f3n", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "TblMapBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "icon_font", - "id": "TblMapBadgeIcon", - "iconFontName": "utensils", - "iconFontFamily": "lucide", - "width": 12, - "height": 12, - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "TblMapBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "TABLE MAP", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "TableAvailable", - "name": "Organism/Table/Available", - "reusable": true, - "width": 100, - "height": 100, - "fill": "#22C55E18", - "cornerRadius": 12, - "stroke": { - "thickness": 2, - "fill": "$green-success" - }, - "layout": "vertical", - "gap": 4, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "TblAvailNum", - "name": "tableNumber", - "fill": "$green-success", - "content": "T01", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "TblAvailSeats", - "name": "seatCount", - "fill": "$text-secondary", - "content": "4 gh\u1ebf", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "TableOccupied", - "name": "Organism/Table/Occupied", - "reusable": true, - "width": 100, - "height": 100, - "fill": "$orange-primary", - "cornerRadius": 12, - "layout": "vertical", - "gap": 4, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "TblOccNum", - "name": "tableNumber", - "fill": "$text-primary", - "content": "T02", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "TblOccAmount", - "name": "orderAmount", - "fill": "$text-muted", - "content": "450K", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "text", - "id": "TblOccTime", - "name": "elapsedTime", - "fill": "#FFFFFF99", - "content": "45 ph\u00fat", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "TableReserved", - "name": "Organism/Table/Reserved", - "reusable": true, - "width": 100, - "height": 100, - "fill": "#F59E0B18", - "cornerRadius": 12, - "stroke": { - "thickness": 2, - "fill": "$status-warning" - }, - "layout": "vertical", - "gap": 4, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "TblResNum", - "name": "tableNumber", - "fill": "$status-warning", - "content": "T03", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "TblResTime", - "name": "reserveTime", - "fill": "$text-secondary", - "content": "19:00", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "text", - "id": "TblResName", - "name": "guestName", - "fill": "$text-tertiary", - "content": "Anh Minh", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "TableMapContainer", - "name": "Organism/TableMap/Container", - "reusable": true, - "width": 600, - "height": 400, - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "padding": 20, - "gap": 16, - "children": [ - { - "type": "frame", - "id": "TblMapContHeader", - "name": "header", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "TblMapContTitle", - "fill": "$text-primary", - "content": "S\u01a1 \u0111\u1ed3 b\u00e0n", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "TblMapLegend", - "name": "legend", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "LegAvail", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "rectangle", - "id": "LegAvailDot", - "width": 12, - "height": 12, - "fill": "$green-success", - "cornerRadius": 2 - }, - { - "type": "text", - "id": "LegAvailTxt", - "fill": "$text-secondary", - "content": "Tr\u1ed1ng", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "LegOcc", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "rectangle", - "id": "LegOccDot", - "width": 12, - "height": 12, - "fill": "$orange-primary", - "cornerRadius": 2 - }, - { - "type": "text", - "id": "LegOccTxt", - "fill": "$text-secondary", - "content": "\u0110ang ph\u1ee5c v\u1ee5", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "LegRes", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "rectangle", - "id": "LegResDot", - "width": 12, - "height": 12, - "fill": "$status-warning", - "cornerRadius": 2 - }, - { - "type": "text", - "id": "LegResTxt", - "fill": "$text-secondary", - "content": "\u0110\u00e3 \u0111\u1eb7t", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-page": { - "type": "color", - "value": "#0A0A0B" - }, - "bg-surface": { - "type": "color", - "value": "#111113" - }, - "bg-elevated": { - "type": "color", - "value": "#1A1A1D" - }, - "bg-interactive": { - "type": "color", - "value": "#2A2A2E" - }, - "bg-hover": { - "type": "color", - "value": "#3A3A3E" - }, - "bg-active": { - "type": "color", - "value": "#4A4A4E" - }, - "text-primary": { - "type": "color", - "value": "#FFFFFF" - }, - "text-secondary": { - "type": "color", - "value": "#ADADB0" - }, - "text-tertiary": { - "type": "color", - "value": "#8B8B90" - }, - "text-muted": { - "type": "color", - "value": "#6B6B70" - }, - "text-disabled": { - "type": "color", - "value": "#4B4B50" - }, - "text-inverse": { - "type": "color", - "value": "#0A0A0B" - }, - "border-default": { - "type": "color", - "value": "#2A2A2E" - }, - "border-subtle": { - "type": "color", - "value": "#1F1F23" - }, - "border-strong": { - "type": "color", - "value": "#4A4A4E" - }, - "border-focus": { - "type": "color", - "value": "#FF5C00" - }, - "accent-primary": { - "type": "color", - "value": "#FF5C00" - }, - "accent-primary-hover": { - "type": "color", - "value": "#FF7A33" - }, - "accent-primary-active": { - "type": "color", - "value": "#E55200" - }, - "orange-primary": { - "type": "color", - "value": "#FF5C00" - }, - "orange-light": { - "type": "color", - "value": "#FF8A4C" - }, - "status-success": { - "type": "color", - "value": "#22C55E" - }, - "status-success-bg": { - "type": "color", - "value": "#22C55E1A" - }, - "status-warning": { - "type": "color", - "value": "#F59E0B" - }, - "status-warning-bg": { - "type": "color", - "value": "#F59E0B1A" - }, - "status-error": { - "type": "color", - "value": "#EF4444" - }, - "status-error-bg": { - "type": "color", - "value": "#EF44441A" - }, - "status-info": { - "type": "color", - "value": "#3B82F6" - }, - "status-info-bg": { - "type": "color", - "value": "#3B82F61A" - }, - "green-success": { - "type": "color", - "value": "#22C55E" - }, - "vertical-restaurant": { - "type": "color", - "value": "#FF5C00" - }, - "vertical-bar": { - "type": "color", - "value": "#8B5CF6" - }, - "vertical-karaoke": { - "type": "color", - "value": "#EC4899" - }, - "vertical-spa": { - "type": "color", - "value": "#14B8A6" - }, - "vertical-retail": { - "type": "color", - "value": "#3B82F6" - }, - "space-1": { - "type": "number", - "value": 4 - }, - "space-2": { - "type": "number", - "value": 8 - }, - "space-3": { - "type": "number", - "value": 12 - }, - "space-4": { - "type": "number", - "value": 16 - }, - "space-5": { - "type": "number", - "value": 20 - }, - "space-6": { - "type": "number", - "value": 24 - }, - "space-8": { - "type": "number", - "value": 32 - }, - "space-10": { - "type": "number", - "value": 40 - }, - "space-12": { - "type": "number", - "value": 48 - }, - "radius-sm": { - "type": "number", - "value": 4 - }, - "radius-md": { - "type": "number", - "value": 8 - }, - "radius-lg": { - "type": "number", - "value": 12 - }, - "radius-xl": { - "type": "number", - "value": 16 - }, - "radius-full": { - "type": "number", - "value": 9999 - }, - "text-xs": { - "type": "number", - "value": 12 - }, - "text-sm": { - "type": "number", - "value": 14 - }, - "text-base": { - "type": "number", - "value": 16 - }, - "text-lg": { - "type": "number", - "value": 18 - }, - "text-xl": { - "type": "number", - "value": 20 - }, - "text-2xl": { - "type": "number", - "value": 24 - }, - "text-3xl": { - "type": "number", - "value": 30 - }, - "text-4xl": { - "type": "number", - "value": 36 - }, - "font-normal": { - "type": "string", - "value": "400" - }, - "font-medium": { - "type": "string", - "value": "500" - }, - "font-semibold": { - "type": "string", - "value": "600" - }, - "font-bold": { - "type": "string", - "value": "700" - }, - "shadow-sm": { - "type": "string", - "value": "0 1px 2px rgba(0,0,0,0.3)" - }, - "shadow-md": { - "type": "string", - "value": "0 4px 6px rgba(0,0,0,0.4)" - }, - "shadow-lg": { - "type": "string", - "value": "0 10px 15px rgba(0,0,0,0.5)" - }, - "shadow-xl": { - "type": "string", - "value": "0 20px 25px rgba(0,0,0,0.6)" - }, - "bar-primary": { - "type": "color", - "value": "#8B5CF6" - }, - "karaoke-primary": { - "type": "color", - "value": "#EC4899" - }, - "spa-primary": { - "type": "color", - "value": "#14B8A6" - }, - "spa-dark": { - "type": "color", - "value": "#0D9488" - } - } -} \ No newline at end of file diff --git a/pencil-design/src/foundations/design-tokens.pen b/pencil-design/src/foundations/design-tokens.pen deleted file mode 100644 index 50ff3408..00000000 --- a/pencil-design/src/foundations/design-tokens.pen +++ /dev/null @@ -1,106 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "name": "Design Tokens Reference", - "layout": "vertical", - "gap": 20, - "children": [ - { - "type": "text", - "id": "tokens_title", - "name": "Title", - "content": "GoodGo Design System Tokens", - "fontSize": 32, - "fill": "$text-primary" - }, - { - "type": "text", - "id": "tokens_subtitle", - "name": "Subtitle", - "content": "Multi-Vertical Platform Tokens", - "fontSize": 16, - "fill": "$text-secondary" - } - ] - } - ], - "variables": { - "bg-page": { "type": "color", "value": "#0A0A0B" }, - "bg-surface": { "type": "color", "value": "#111113" }, - "bg-elevated": { "type": "color", "value": "#1A1A1D" }, - "bg-interactive": { "type": "color", "value": "#2A2A2E" }, - "bg-hover": { "type": "color", "value": "#3A3A3E" }, - "bg-active": { "type": "color", "value": "#4A4A4E" }, - - "text-primary": { "type": "color", "value": "#FFFFFF" }, - "text-secondary": { "type": "color", "value": "#ADADB0" }, - "text-tertiary": { "type": "color", "value": "#8B8B90" }, - "text-muted": { "type": "color", "value": "#6B6B70" }, - "text-disabled": { "type": "color", "value": "#4B4B50" }, - "text-inverse": { "type": "color", "value": "#0A0A0B" }, - - "border-default": { "type": "color", "value": "#2A2A2E" }, - "border-subtle": { "type": "color", "value": "#1F1F23" }, - "border-strong": { "type": "color", "value": "#4A4A4E" }, - "border-focus": { "type": "color", "value": "#FF5C00" }, - - "accent-primary": { "type": "color", "value": "#FF5C00" }, - "accent-primary-hover": { "type": "color", "value": "#FF7A33" }, - "accent-primary-active": { "type": "color", "value": "#E55200" }, - "orange-primary": { "type": "color", "value": "#FF5C00" }, - "orange-light": { "type": "color", "value": "#FF8A4C" }, - - "status-success": { "type": "color", "value": "#22C55E" }, - "status-success-bg": { "type": "color", "value": "#22C55E1A" }, - "status-warning": { "type": "color", "value": "#F59E0B" }, - "status-warning-bg": { "type": "color", "value": "#F59E0B1A" }, - "status-error": { "type": "color", "value": "#EF4444" }, - "status-error-bg": { "type": "color", "value": "#EF44441A" }, - "status-info": { "type": "color", "value": "#3B82F6" }, - "status-info-bg": { "type": "color", "value": "#3B82F61A" }, - "green-success": { "type": "color", "value": "#22C55E" }, - - "vertical-restaurant": { "type": "color", "value": "#FF5C00" }, - "vertical-bar": { "type": "color", "value": "#8B5CF6" }, - "vertical-karaoke": { "type": "color", "value": "#EC4899" }, - "vertical-spa": { "type": "color", "value": "#14B8A6" }, - "vertical-retail": { "type": "color", "value": "#3B82F6" }, - - "space-1": { "type": "number", "value": 4 }, - "space-2": { "type": "number", "value": 8 }, - "space-3": { "type": "number", "value": 12 }, - "space-4": { "type": "number", "value": 16 }, - "space-5": { "type": "number", "value": 20 }, - "space-6": { "type": "number", "value": 24 }, - "space-8": { "type": "number", "value": 32 }, - "space-10": { "type": "number", "value": 40 }, - "space-12": { "type": "number", "value": 48 }, - - "radius-sm": { "type": "number", "value": 4 }, - "radius-md": { "type": "number", "value": 8 }, - "radius-lg": { "type": "number", "value": 12 }, - "radius-xl": { "type": "number", "value": 16 }, - "radius-full": { "type": "number", "value": 9999 }, - - "text-xs": { "type": "number", "value": 12 }, - "text-sm": { "type": "number", "value": 14 }, - "text-base": { "type": "number", "value": 16 }, - "text-lg": { "type": "number", "value": 18 }, - "text-xl": { "type": "number", "value": 20 }, - "text-2xl": { "type": "number", "value": 24 }, - "text-3xl": { "type": "number", "value": 30 }, - "text-4xl": { "type": "number", "value": 36 }, - - "font-normal": { "type": "string", "value": "400" }, - "font-medium": { "type": "string", "value": "500" }, - "font-semibold": { "type": "string", "value": "600" }, - "font-bold": { "type": "string", "value": "700" }, - - "shadow-sm": { "type": "string", "value": "0 1px 2px rgba(0,0,0,0.3)" }, - "shadow-md": { "type": "string", "value": "0 4px 6px rgba(0,0,0,0.4)" }, - "shadow-lg": { "type": "string", "value": "0 10px 15px rgba(0,0,0,0.5)" }, - "shadow-xl": { "type": "string", "value": "0 20px 25px rgba(0,0,0,0.6)" } - } -} \ No newline at end of file diff --git a/pencil-design/src/foundations/vertical-themes.pen b/pencil-design/src/foundations/vertical-themes.pen deleted file mode 100644 index 8150cf1e..00000000 --- a/pencil-design/src/foundations/vertical-themes.pen +++ /dev/null @@ -1,306 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "vertical_themes_page", - "x": 0, - "y": 0, - "name": "Vertical Themes", - "fill": "#000000", - "layout": "vertical", - "gap": 32, - "padding": 40, - "children": [ - { - "type": "text", - "id": "wR6VL", - "fill": "#ffffffff", - "content": "Vertical Business Themes", - "fontFamily": "Inter", - "fontSize": 32, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "DtUJM", - "fill": "#ffffffff", - "content": "Each vertical has its own accent color and visual identity", - "fontFamily": "Inter", - "fontSize": 16, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "nMoLu", - "name": "ThemeCards", - "gap": 24, - "children": [ - { - "type": "frame", - "id": "theme_restaurant", - "name": "Theme/Restaurant", - "reusable": true, - "width": 200, - "height": 140, - "fill": "$vertical-restaurant", - "layout": "vertical", - "gap": 12, - "padding": 20, - "children": [ - { - "type": "text", - "id": "nTUnL", - "content": "🍽️", - "fontFamily": "Inter", - "fontSize": 32, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "6jYii", - "fill": "#FFFFFF", - "content": "Restaurant", - "fontFamily": "Inter", - "fontSize": 18, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "8AtH7", - "fill": "#FFFFFFCC", - "content": "#FF5C00", - "fontFamily": "Inter", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "theme_bar", - "name": "Theme/Bar", - "reusable": true, - "width": 200, - "height": 140, - "fill": "$vertical-bar", - "layout": "vertical", - "gap": 12, - "padding": 20, - "children": [ - { - "type": "text", - "id": "vWOQL", - "content": "🍸", - "fontFamily": "Inter", - "fontSize": 32, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "WahMd", - "fill": "#FFFFFF", - "content": "Bar / Lounge", - "fontFamily": "Inter", - "fontSize": 18, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "jFdpW", - "fill": "#FFFFFFCC", - "content": "#8B5CF6", - "fontFamily": "Inter", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "theme_karaoke", - "name": "Theme/Karaoke", - "reusable": true, - "width": 200, - "height": 140, - "fill": "$vertical-karaoke", - "layout": "vertical", - "gap": 12, - "padding": 20, - "children": [ - { - "type": "text", - "id": "Vj7Jg", - "content": "🎤", - "fontFamily": "Inter", - "fontSize": 32, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "heVrp", - "fill": "#FFFFFF", - "content": "Karaoke", - "fontFamily": "Inter", - "fontSize": 18, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "52qUI", - "fill": "#FFFFFFCC", - "content": "#EC4899", - "fontFamily": "Inter", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "theme_spa", - "name": "Theme/Spa", - "reusable": true, - "width": 200, - "height": 140, - "fill": "$vertical-spa", - "layout": "vertical", - "gap": 12, - "padding": 20, - "children": [ - { - "type": "text", - "id": "rqI1P", - "content": "💆", - "fontFamily": "Inter", - "fontSize": 32, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "cR0vp", - "fill": "#FFFFFF", - "content": "Spa / TMV", - "fontFamily": "Inter", - "fontSize": 18, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "GXfGv", - "fill": "#FFFFFFCC", - "content": "#14B8A6", - "fontFamily": "Inter", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "theme_retail", - "name": "Theme/Retail", - "reusable": true, - "width": 200, - "height": 140, - "fill": "$vertical-retail", - "layout": "vertical", - "gap": 12, - "padding": 20, - "children": [ - { - "type": "text", - "id": "2Prec", - "content": "🛒", - "fontFamily": "Inter", - "fontSize": 32, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "xiH1C", - "fill": "#FFFFFF", - "content": "Retail", - "fontFamily": "Inter", - "fontSize": 18, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "6ZL8D", - "fill": "#FFFFFFCC", - "content": "#3B82F6", - "fontFamily": "Inter", - "fontSize": 12, - "fontWeight": "normal" - } - ] - } - ] - } - ] - } - ], - "variables": { - "vertical-restaurant": { - "type": "color", - "value": "#FF5C00" - }, - "vertical-restaurant-light": { - "type": "color", - "value": "#FF8A4C" - }, - "vertical-restaurant-dark": { - "type": "color", - "value": "#CC4A00" - }, - "vertical-bar": { - "type": "color", - "value": "#8B5CF6" - }, - "vertical-bar-light": { - "type": "color", - "value": "#A78BFA" - }, - "vertical-bar-dark": { - "type": "color", - "value": "#7C3AED" - }, - "vertical-karaoke": { - "type": "color", - "value": "#EC4899" - }, - "vertical-karaoke-light": { - "type": "color", - "value": "#F472B6" - }, - "vertical-karaoke-dark": { - "type": "color", - "value": "#DB2777" - }, - "vertical-spa": { - "type": "color", - "value": "#14B8A6" - }, - "vertical-spa-light": { - "type": "color", - "value": "#2DD4BF" - }, - "vertical-spa-dark": { - "type": "color", - "value": "#0D9488" - }, - "vertical-retail": { - "type": "color", - "value": "#3B82F6" - }, - "vertical-retail-light": { - "type": "color", - "value": "#60A5FA" - }, - "vertical-retail-dark": { - "type": "color", - "value": "#2563EB" - } - } -} \ No newline at end of file diff --git a/pencil-design/src/images/home/bar-ai.png b/pencil-design/src/images/home/bar-ai.png deleted file mode 100644 index 5fae0108..00000000 Binary files a/pencil-design/src/images/home/bar-ai.png and /dev/null differ diff --git a/pencil-design/src/images/home/coffee-ai.png b/pencil-design/src/images/home/coffee-ai.png deleted file mode 100644 index 544d7b97..00000000 Binary files a/pencil-design/src/images/home/coffee-ai.png and /dev/null differ diff --git a/pencil-design/src/images/home/fnb-ai.png b/pencil-design/src/images/home/fnb-ai.png deleted file mode 100644 index 71050490..00000000 Binary files a/pencil-design/src/images/home/fnb-ai.png and /dev/null differ diff --git a/pencil-design/src/images/home/karaoke-ai.png b/pencil-design/src/images/home/karaoke-ai.png deleted file mode 100644 index 50b2fa59..00000000 Binary files a/pencil-design/src/images/home/karaoke-ai.png and /dev/null differ diff --git a/pencil-design/src/images/home/spa-ai.png b/pencil-design/src/images/home/spa-ai.png deleted file mode 100644 index 302ce4ea..00000000 Binary files a/pencil-design/src/images/home/spa-ai.png and /dev/null differ diff --git a/pencil-design/src/images/pos-dashboard.png b/pencil-design/src/images/pos-dashboard.png deleted file mode 100644 index deed6349..00000000 Binary files a/pencil-design/src/images/pos-dashboard.png and /dev/null differ diff --git a/pencil-design/src/molecules/auth-form-field.pen b/pencil-design/src/molecules/auth-form-field.pen deleted file mode 100644 index 22152e3f..00000000 --- a/pencil-design/src/molecules/auth-form-field.pen +++ /dev/null @@ -1,743 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "name": "Auth Form Fields Showcase", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 80, - "padding": [80, 120], - "children": [ - { - "type": "frame", - "id": "FormFieldSection", - "name": "Form Fields Section", - "width": "fill_container", - "layout": "vertical", - "gap": 48, - "children": [ - { - "type": "frame", - "name": "sectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [6, 14], - "children": [ - { - "type": "text", - "name": "badgeText", - "fill": "$orange-primary", - "content": "FORM FIELDS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "name": "shTitle", - "fill": "$text-primary", - "content": "Authentication Form Fields", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "Complete form fields with labels, inputs, validation, and helper text.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16 - } - ] - }, - { - "type": "frame", - "name": "fieldsGrid", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "EmailFieldRow", - "name": "Email Fields Row", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { "thickness": 1, "fill": "$border-subtle" }, - "layout": "vertical", - "gap": 24, - "padding": 40, - "children": [ - { - "type": "text", - "name": "rowLabel", - "fill": "$text-secondary", - "content": "Email Form Field", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "fieldsContainer", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "FormField_Email_Default", - "name": "Molecule/FormField/Email/Default", - "reusable": true, - "width": 360, - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "FormField_Email_Label", - "name": "label", - "fill": "$text-secondary", - "content": "Email", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "inputWrapper", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "padding": [0, 16], - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "name": "inputIcon", - "width": 18, - "height": 18, - "iconFontName": "mail", - "iconFontFamily": "lucide", - "fill": "$text-muted" - }, - { - "type": "text", - "id": "FormField_Email_Placeholder", - "name": "placeholder", - "fill": "$text-muted", - "content": "email@example.com", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - }, - { - "type": "frame", - "id": "FormField_Email_Filled", - "name": "Molecule/FormField/Email/Filled", - "reusable": true, - "width": 360, - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "name": "label", - "fill": "$text-secondary", - "content": "Email", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "inputWrapper", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-focus" }, - "padding": [0, 16], - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "name": "inputIcon", - "width": 18, - "height": 18, - "iconFontName": "mail", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "name": "value", - "fill": "$text-primary", - "content": "user@goodgo.vn", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - }, - { - "type": "frame", - "id": "FormField_Email_Error", - "name": "Molecule/FormField/Email/Error", - "reusable": true, - "width": 360, - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "name": "label", - "fill": "$text-secondary", - "content": "Email", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "inputWrapper", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$status-error" }, - "padding": [0, 16], - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "name": "inputIcon", - "width": 18, - "height": 18, - "iconFontName": "mail", - "iconFontFamily": "lucide", - "fill": "$status-error" - }, - { - "type": "text", - "name": "value", - "fill": "$text-primary", - "content": "invalid-email", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "name": "errorRow", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "name": "errorIcon", - "width": 14, - "height": 14, - "iconFontName": "alert-circle", - "iconFontFamily": "lucide", - "fill": "$status-error" - }, - { - "type": "text", - "id": "FormField_Email_ErrorText", - "name": "errorText", - "fill": "$status-error", - "content": "Định dạng email không hợp lệ", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PhoneFieldRow", - "name": "Phone Fields Row", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { "thickness": 1, "fill": "$border-subtle" }, - "layout": "vertical", - "gap": 24, - "padding": 40, - "children": [ - { - "type": "text", - "name": "rowLabel", - "fill": "$text-secondary", - "content": "Phone Form Field", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "fieldsContainer", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "FormField_Phone_Default", - "name": "Molecule/FormField/Phone/Default", - "reusable": true, - "width": 360, - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "name": "label", - "fill": "$text-secondary", - "content": "Số điện thoại", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "inputWrapper", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "gap": 0, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "countryCode", - "height": "fill_container", - "fill": "$bg-interactive", - "cornerRadius": [10, 0, 0, 10], - "padding": [0, 12], - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "flag", - "content": "🇻🇳", - "fontSize": 16 - }, - { - "type": "text", - "name": "code", - "fill": "$text-secondary", - "content": "+84", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "icon_font", - "name": "chevron", - "width": 14, - "height": 14, - "iconFontName": "chevron-down", - "iconFontFamily": "lucide", - "fill": "$text-muted" - } - ] - }, - { - "type": "frame", - "name": "inputField", - "width": "fill_container", - "height": "fill_container", - "padding": [0, 12], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "FormField_Phone_Placeholder", - "name": "placeholder", - "fill": "$text-muted", - "content": "912 345 678", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "FormField_Phone_Filled", - "name": "Molecule/FormField/Phone/Filled", - "reusable": true, - "width": 360, - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "name": "label", - "fill": "$text-secondary", - "content": "Số điện thoại", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "inputWrapper", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-focus" }, - "gap": 0, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "countryCode", - "height": "fill_container", - "fill": "$bg-interactive", - "cornerRadius": [10, 0, 0, 10], - "padding": [0, 12], - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "flag", - "content": "🇻🇳", - "fontSize": 16 - }, - { - "type": "text", - "name": "code", - "fill": "$text-secondary", - "content": "+84", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "icon_font", - "name": "chevron", - "width": 14, - "height": 14, - "iconFontName": "chevron-down", - "iconFontFamily": "lucide", - "fill": "$text-muted" - } - ] - }, - { - "type": "frame", - "name": "inputField", - "width": "fill_container", - "height": "fill_container", - "padding": [0, 12], - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "value", - "fill": "$text-primary", - "content": "912 345 678", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PasswordFieldRow", - "name": "Password Fields Row", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { "thickness": 1, "fill": "$border-subtle" }, - "layout": "vertical", - "gap": 24, - "padding": 40, - "children": [ - { - "type": "text", - "name": "rowLabel", - "fill": "$text-secondary", - "content": "Password Form Field with Strength Meter", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "fieldsContainer", - "gap": 32, - "alignItems": "start", - "children": [ - { - "type": "frame", - "id": "FormField_Password_Default", - "name": "Molecule/FormField/Password/Default", - "reusable": true, - "width": 360, - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "name": "label", - "fill": "$text-secondary", - "content": "Mật khẩu", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "inputWrapper", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "padding": [0, 16], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "inputContent", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "name": "inputIcon", - "width": 18, - "height": 18, - "iconFontName": "lock", - "iconFontFamily": "lucide", - "fill": "$text-muted" - }, - { - "type": "text", - "name": "placeholder", - "fill": "$text-muted", - "content": "Nhập mật khẩu", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "icon_font", - "name": "toggleIcon", - "width": 18, - "height": 18, - "iconFontName": "eye-off", - "iconFontFamily": "lucide", - "fill": "$text-muted" - } - ] - } - ] - }, - { - "type": "frame", - "id": "FormField_Password_WithStrength", - "name": "Molecule/FormField/Password/WithStrength", - "reusable": true, - "width": 360, - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "name": "label", - "fill": "$text-secondary", - "content": "Mật khẩu mới", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "inputWrapper", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-focus" }, - "padding": [0, 16], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "inputContent", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "name": "inputIcon", - "width": 18, - "height": 18, - "iconFontName": "lock", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "name": "masked", - "fill": "$text-primary", - "content": "••••••••", - "fontFamily": "Roboto", - "fontSize": 14, - "letterSpacing": 2 - } - ] - }, - { - "type": "icon_font", - "name": "toggleIcon", - "width": 18, - "height": 18, - "iconFontName": "eye-off", - "iconFontFamily": "lucide", - "fill": "$text-muted" - } - ] - }, - { - "type": "frame", - "name": "strengthMeter", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "frame", - "name": "strengthBars", - "width": "fill_container", - "gap": 4, - "children": [ - { - "type": "frame", - "name": "bar1", - "width": "fill_container", - "height": 4, - "fill": "$status-success", - "cornerRadius": 2 - }, - { - "type": "frame", - "name": "bar2", - "width": "fill_container", - "height": 4, - "fill": "$status-success", - "cornerRadius": 2 - }, - { - "type": "frame", - "name": "bar3", - "width": "fill_container", - "height": 4, - "fill": "$status-success", - "cornerRadius": 2 - }, - { - "type": "frame", - "name": "bar4", - "width": "fill_container", - "height": 4, - "fill": "$bg-interactive", - "cornerRadius": 2 - } - ] - }, - { - "type": "text", - "name": "strengthLabel", - "fill": "$status-success", - "content": "Khá mạnh", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - } - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-page": { "type": "color", "value": "#0A0A0B" }, - "bg-surface": { "type": "color", "value": "#111113" }, - "bg-elevated": { "type": "color", "value": "#1A1A1D" }, - "bg-interactive": { "type": "color", "value": "#2A2A2E" }, - "border-default": { "type": "color", "value": "#2A2A2E" }, - "border-subtle": { "type": "color", "value": "#1F1F23" }, - "border-focus": { "type": "color", "value": "#FF5C00" }, - "orange-primary": { "type": "color", "value": "#FF5C00" }, - "text-primary": { "type": "color", "value": "#FFFFFF" }, - "text-secondary": { "type": "color", "value": "#ADADB0" }, - "text-tertiary": { "type": "color", "value": "#8B8B90" }, - "text-muted": { "type": "color", "value": "#6B6B70" }, - "status-error": { "type": "color", "value": "#EF4444" }, - "status-success": { "type": "color", "value": "#22C55E" } - } -} diff --git a/pencil-design/src/molecules/mode-switch.pen b/pencil-design/src/molecules/mode-switch.pen deleted file mode 100644 index 20e5751b..00000000 --- a/pencil-design/src/molecules/mode-switch.pen +++ /dev/null @@ -1,178 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "name": "Mode Switch Showcase", - "width": 1200, - "fill": "$bg-page", - "layout": "vertical", - "gap": 40, - "padding": 40, - "children": [ - { - "type": "frame", - "id": "ModeSwitchContainer", - "name": "Molecule/ModeSwitch/Container", - "reusable": true, - "width": 600, - "height": 48, - "layout": "horizontal", - "justifyContent": "center", - "alignItems": "center", - "gap": 4, - "padding": 4, - "fill": "$bg-surface", - "cornerRadius": 12, - "children": [ - { - "type": "frame", - "id": "MSRestaurant", - "name": "modeRestaurantActive", - "layout": "horizontal", - "justifyContent": "center", - "alignItems": "center", - "gap": 8, - "padding": [8, 16], - "fill": "$orange-primary", - "cornerRadius": 8, - "children": [ - {"type": "icon_font", "id": "MSRestIcon", "iconFontName": "utensils", "iconFontFamily": "lucide", "width": 16, "height": 16, "fill": "#FFFFFF"}, - {"type": "text", "id": "MSRestLabel", "content": "Nhà hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500", "fill": "#FFFFFF"} - ] - }, - { - "type": "frame", - "id": "MSBar", - "name": "modeBarInactive", - "layout": "horizontal", - "justifyContent": "center", - "alignItems": "center", - "gap": 8, - "padding": [8, 16], - "cornerRadius": 8, - "children": [ - {"type": "icon_font", "id": "MSBarIcon", "iconFontName": "wine", "iconFontFamily": "lucide", "width": 16, "height": 16, "fill": "$text-secondary"}, - {"type": "text", "id": "MSBarLabel", "content": "Bar", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500", "fill": "$text-secondary"} - ] - }, - { - "type": "frame", - "id": "MSKaraoke", - "name": "modeKaraokeInactive", - "layout": "horizontal", - "justifyContent": "center", - "alignItems": "center", - "gap": 8, - "padding": [8, 16], - "cornerRadius": 8, - "children": [ - {"type": "icon_font", "id": "MSKarIcon", "iconFontName": "mic", "iconFontFamily": "lucide", "width": 16, "height": 16, "fill": "$text-secondary"}, - {"type": "text", "id": "MSKarLabel", "content": "Karaoke", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500", "fill": "$text-secondary"} - ] - }, - { - "type": "frame", - "id": "MSSpa", - "name": "modeSpaInactive", - "layout": "horizontal", - "justifyContent": "center", - "alignItems": "center", - "gap": 8, - "padding": [8, 16], - "cornerRadius": 8, - "children": [ - {"type": "icon_font", "id": "MSSpaIcon", "iconFontName": "sparkles", "iconFontFamily": "lucide", "width": 16, "height": 16, "fill": "$text-secondary"}, - {"type": "text", "id": "MSSpaLabel", "content": "Spa", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500", "fill": "$text-secondary"} - ] - } - ] - }, - { - "type": "frame", - "id": "ModeIndicators", - "name": "modeIndicatorsRow", - "layout": "horizontal", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "ModeIndRestaurant", - "name": "Molecule/ModeIndicator/Restaurant", - "reusable": true, - "width": 32, - "height": 32, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "fill": "$orange-primary", - "cornerRadius": 9999, - "children": [ - {"type": "icon_font", "id": "MIRestIcon", "iconFontName": "utensils", "iconFontFamily": "lucide", "width": 16, "height": 16, "fill": "#FFFFFF"} - ] - }, - { - "type": "frame", - "id": "ModeIndBar", - "name": "Molecule/ModeIndicator/Bar", - "reusable": true, - "width": 32, - "height": 32, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "fill": "$bar-primary", - "cornerRadius": 9999, - "children": [ - {"type": "icon_font", "id": "MIBarIcon", "iconFontName": "wine", "iconFontFamily": "lucide", "width": 16, "height": 16, "fill": "#FFFFFF"} - ] - }, - { - "type": "frame", - "id": "ModeIndKaraoke", - "name": "Molecule/ModeIndicator/Karaoke", - "reusable": true, - "width": 32, - "height": 32, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "fill": "$karaoke-primary", - "cornerRadius": 9999, - "children": [ - {"type": "icon_font", "id": "MIKarIcon", "iconFontName": "mic", "iconFontFamily": "lucide", "width": 16, "height": 16, "fill": "#FFFFFF"} - ] - }, - { - "type": "frame", - "id": "ModeIndSpa", - "name": "Molecule/ModeIndicator/Spa", - "reusable": true, - "width": 32, - "height": 32, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "fill": "$spa-primary", - "cornerRadius": 9999, - "children": [ - {"type": "icon_font", "id": "MISpaIcon", "iconFontName": "sparkles", "iconFontFamily": "lucide", "width": 16, "height": 16, "fill": "#FFFFFF"} - ] - } - ] - } - ] - } - ], - "variables": { - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "bg-surface": {"type": "color", "value": "#111113"}, - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "bar-primary": {"type": "color", "value": "#8B5CF6"}, - "karaoke-primary": {"type": "color", "value": "#EC4899"}, - "spa-primary": {"type": "color", "value": "#14B8A6"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"} - } -} diff --git a/pencil-design/src/molecules/order-items.pen b/pencil-design/src/molecules/order-items.pen deleted file mode 100644 index 6caf3547..00000000 --- a/pencil-design/src/molecules/order-items.pen +++ /dev/null @@ -1,733 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "name": "Order Items Showcase", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 80, - "padding": [80, 120], - "children": [ - { - "type": "frame", - "id": "OrderItemSection", - "name": "Order Items Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "OrderItemHeader", - "name": "orderItemSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "OrderItemBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [6, 14], - "children": [ - { - "type": "text", - "id": "OrderItemBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "ORDER ITEMS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "OrderItemTitle", - "name": "shTitle", - "fill": "$text-primary", - "content": "Cart & Order Lines", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - } - ] - }, - { - "type": "frame", - "id": "OrderItemExamples", - "name": "orderItemExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "layout": "vertical", - "gap": 0, - "padding": 0, - "children": [ - { - "type": "frame", - "id": "OrderItem1", - "name": "Molecule/OrderItem/Standard", - "reusable": true, - "width": "fill_container", - "padding": [16, 20], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "OrderItem1Left", - "name": "leftContent", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "OrderItem1Qty", - "name": "qtyBadge", - "width": 32, - "height": 32, - "fill": "$bg-elevated", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "OrderItem1QtyText", - "name": "qty", - "fill": "$text-primary", - "content": "2", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "OrderItem1Info", - "name": "itemInfo", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "OrderItem1Name", - "name": "itemName", - "fill": "$text-primary", - "content": "Cà Phê Sữa Đá", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "500" - }, - { - "type": "text", - "id": "OrderItem1Note", - "name": "itemNote", - "fill": "$text-tertiary", - "content": "Ít đường, thêm đá", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "text", - "id": "OrderItem1Price", - "name": "itemPrice", - "fill": "$text-primary", - "content": "58,000₫", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "OrderItem2", - "name": "Molecule/OrderItem/WithModifiers", - "reusable": true, - "width": "fill_container", - "layout": "vertical", - "padding": [16, 20], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "gap": 8, - "children": [ - { - "type": "frame", - "id": "OrderItem2Main", - "name": "mainRow", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "OrderItem2Left", - "name": "leftContent", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "OrderItem2Qty", - "name": "qtyBadge", - "width": 32, - "height": 32, - "fill": "$bg-elevated", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "OrderItem2QtyText", - "name": "qty", - "fill": "$text-primary", - "content": "1", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "OrderItem2Name", - "name": "itemName", - "fill": "$text-primary", - "content": "Bánh Mì Thịt Nguội", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "OrderItem2Price", - "name": "itemPrice", - "fill": "$text-primary", - "content": "45,000₫", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "OrderItem2Mods", - "name": "modifierList", - "padding": [0, 0, 0, 44], - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "OrderItem2Mod1", - "name": "modifier1", - "fill": "$text-tertiary", - "content": "+ Phô mai (+10,000₫)", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "OrderItem2Mod2", - "name": "modifier2", - "fill": "$text-tertiary", - "content": "+ Trứng ốp la (+8,000₫)", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "BillRowSection", - "name": "Bill Rows Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "BillRowHeader", - "name": "billRowSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "BillRowBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [6, 14], - "children": [ - { - "type": "text", - "id": "BillRowBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "BILL SUMMARY", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "BillRowTitle", - "name": "shTitle", - "fill": "$text-primary", - "content": "Price Breakdown", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - } - ] - }, - { - "type": "frame", - "id": "BillRowExamples", - "name": "billRowExamples", - "width": 400, - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "layout": "vertical", - "gap": 0, - "padding": 24, - "children": [ - { - "type": "frame", - "id": "BillSubtotal", - "name": "Molecule/BillRow/Subtotal", - "reusable": true, - "width": "fill_container", - "padding": [8, 0], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "BillSubtotalLabel", - "name": "label", - "fill": "$text-secondary", - "content": "Tạm tính", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "BillSubtotalValue", - "name": "value", - "fill": "$text-secondary", - "content": "103,000₫", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "BillDiscount", - "name": "Molecule/BillRow/Discount", - "reusable": true, - "width": "fill_container", - "padding": [8, 0], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "BillDiscountLabel", - "name": "label", - "fill": "$green-success", - "content": "Giảm giá (10%)", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "BillDiscountValue", - "name": "value", - "fill": "$green-success", - "content": "-10,300₫", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "BillTax", - "name": "Molecule/BillRow/Tax", - "reusable": true, - "width": "fill_container", - "padding": [8, 0], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "BillTaxLabel", - "name": "label", - "fill": "$text-tertiary", - "content": "VAT (8%)", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "BillTaxValue", - "name": "value", - "fill": "$text-tertiary", - "content": "7,416₫", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "BillDivider", - "name": "divider", - "width": "fill_container", - "height": 1, - "fill": "$border-subtle", - "margin": [12, 0] - }, - { - "type": "frame", - "id": "BillTotal", - "name": "Molecule/BillRow/Total", - "reusable": true, - "width": "fill_container", - "padding": [12, 0], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "BillTotalLabel", - "name": "label", - "fill": "$text-primary", - "content": "Tổng cộng", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "BillTotalValue", - "name": "value", - "fill": "$orange-primary", - "content": "100,116₫", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "700" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ProductCardSection", - "name": "Product Cards Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "ProductCardHeader", - "name": "productCardSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ProductCardBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [6, 14], - "children": [ - { - "type": "text", - "id": "ProductCardBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "PRODUCT CARDS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "ProductCardTitle", - "name": "shTitle", - "fill": "$text-primary", - "content": "POS Product Grid", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - } - ] - }, - { - "type": "frame", - "id": "ProductCardExamples", - "name": "productCardExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "gap": 16, - "padding": 40, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "ProductCard1", - "name": "Molecule/ProductCard/POS", - "reusable": true, - "width": 140, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "ProductCard1Img", - "name": "productImage", - "width": "fill_container", - "height": 100, - "fill": "#3B82F618" - }, - { - "type": "frame", - "id": "ProductCard1Content", - "name": "content", - "width": "fill_container", - "layout": "vertical", - "gap": 4, - "padding": 12, - "children": [ - { - "type": "text", - "id": "ProductCard1Name", - "name": "productName", - "fill": "$text-primary", - "content": "Cà Phê Sữa", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "text", - "id": "ProductCard1Price", - "name": "productPrice", - "fill": "$orange-primary", - "content": "29,000₫", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "ProductCard2", - "name": "Molecule/ProductCard/POS/Selected", - "reusable": true, - "width": 140, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": {"thickness": 2, "fill": "$orange-primary"}, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "ProductCard2Img", - "name": "productImage", - "width": "fill_container", - "height": 100, - "fill": "#22C55E18" - }, - { - "type": "frame", - "id": "ProductCard2Content", - "name": "content", - "width": "fill_container", - "layout": "vertical", - "gap": 4, - "padding": 12, - "children": [ - { - "type": "text", - "id": "ProductCard2Name", - "name": "productName", - "fill": "$text-primary", - "content": "Trà Đào", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "text", - "id": "ProductCard2Price", - "name": "productPrice", - "fill": "$orange-primary", - "content": "35,000₫", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "ProductCard3", - "name": "Molecule/ProductCard/POS/OutOfStock", - "reusable": true, - "width": 140, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "layout": "vertical", - "clip": true, - "opacity": 0.5, - "children": [ - { - "type": "frame", - "id": "ProductCard3Img", - "name": "productImage", - "width": "fill_container", - "height": 100, - "fill": "#6B6B7018", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ProductCard3OOS", - "name": "oosLabel", - "fill": "$text-disabled", - "content": "Hết hàng", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "ProductCard3Content", - "name": "content", - "width": "fill_container", - "layout": "vertical", - "gap": 4, - "padding": 12, - "children": [ - { - "type": "text", - "id": "ProductCard3Name", - "name": "productName", - "fill": "$text-disabled", - "content": "Sinh Tố Bơ", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "text", - "id": "ProductCard3Price", - "name": "productPrice", - "fill": "$text-disabled", - "content": "45,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"}, - "bg-surface": {"type": "color", "value": "#111113"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "green-success": {"type": "color", "value": "#22C55E"}, - "orange-light": {"type": "color", "value": "#FF8A4C"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-disabled": {"type": "color", "value": "#6B6B70"}, - "text-muted": {"type": "color", "value": "#FFFFFFCC"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/molecules/social-login-row.pen b/pencil-design/src/molecules/social-login-row.pen deleted file mode 100644 index 47de8d91..00000000 --- a/pencil-design/src/molecules/social-login-row.pen +++ /dev/null @@ -1,386 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "name": "Social Login Rows Showcase", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 80, - "padding": [80, 120], - "children": [ - { - "type": "frame", - "id": "SocialRowSection", - "name": "Social Login Section", - "width": "fill_container", - "layout": "vertical", - "gap": 48, - "children": [ - { - "type": "frame", - "name": "sectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [6, 14], - "children": [ - { - "type": "text", - "name": "badgeText", - "fill": "$orange-primary", - "content": "SOCIAL LOGIN", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "name": "shTitle", - "fill": "$text-primary", - "content": "Social Login Rows", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "Social login button groups with dividers for customer authentication.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16 - } - ] - }, - { - "type": "frame", - "name": "rowsGrid", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "SocialRowCard", - "name": "Social Rows Card", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { "thickness": 1, "fill": "$border-subtle" }, - "layout": "vertical", - "gap": 40, - "padding": 40, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SocialRow_Full", - "name": "Molecule/SocialLoginRow/Full", - "reusable": true, - "width": 360, - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "frame", - "name": "dividerRow", - "width": "fill_container", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "line1", - "width": "fill_container", - "height": 1, - "fill": "$border-default" - }, - { - "type": "text", - "name": "orText", - "fill": "$text-muted", - "content": "hoặc", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "frame", - "name": "line2", - "width": "fill_container", - "height": 1, - "fill": "$border-default" - } - ] - }, - { - "type": "frame", - "name": "socialButtons", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "frame", - "name": "googleBtn", - "width": "fill_container", - "height": 48, - "fill": "#FFFFFF", - "cornerRadius": 10, - "gap": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "googleIcon", - "fill": "#4285F4", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "text", - "name": "btnLabel", - "fill": "#1F1F1F", - "content": "Đăng nhập với Google", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "name": "appleBtn", - "width": "fill_container", - "height": 48, - "fill": "#000000", - "cornerRadius": 10, - "gap": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "name": "appleIcon", - "width": 20, - "height": 20, - "iconFontName": "apple", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "name": "btnLabel", - "fill": "#FFFFFF", - "content": "Đăng nhập với Apple", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "name": "zaloBtn", - "width": "fill_container", - "height": 48, - "fill": "#0068FF", - "cornerRadius": 10, - "gap": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "zaloIcon", - "fill": "#FFFFFF", - "content": "Z", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "700" - }, - { - "type": "text", - "name": "btnLabel", - "fill": "#FFFFFF", - "content": "Đăng nhập với Zalo", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SocialRow_Compact", - "name": "Molecule/SocialLoginRow/Compact", - "reusable": true, - "width": 360, - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "frame", - "name": "dividerRow", - "width": "fill_container", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "line1", - "width": "fill_container", - "height": 1, - "fill": "$border-default" - }, - { - "type": "text", - "name": "orText", - "fill": "$text-muted", - "content": "hoặc tiếp tục với", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "frame", - "name": "line2", - "width": "fill_container", - "height": 1, - "fill": "$border-default" - } - ] - }, - { - "type": "frame", - "name": "socialIconsRow", - "width": "fill_container", - "justifyContent": "center", - "gap": 16, - "children": [ - { - "type": "frame", - "name": "googleIcon", - "width": 48, - "height": 48, - "fill": "#FFFFFF", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "#4285F4", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "name": "appleIcon", - "width": 48, - "height": 48, - "fill": "#000000", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "width": 22, - "height": 22, - "iconFontName": "apple", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - } - ] - }, - { - "type": "frame", - "name": "zaloIcon", - "width": 48, - "height": 48, - "fill": "#0068FF", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "#FFFFFF", - "content": "Z", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "name": "facebookIcon", - "width": 48, - "height": 48, - "fill": "#1877F2", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "width": 22, - "height": 22, - "iconFontName": "facebook", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - } - ] - } - ] - } - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-page": { "type": "color", "value": "#0A0A0B" }, - "bg-surface": { "type": "color", "value": "#111113" }, - "border-default": { "type": "color", "value": "#2A2A2E" }, - "border-subtle": { "type": "color", "value": "#1F1F23" }, - "orange-primary": { "type": "color", "value": "#FF5C00" }, - "text-primary": { "type": "color", "value": "#FFFFFF" }, - "text-tertiary": { "type": "color", "value": "#8B8B90" }, - "text-muted": { "type": "color", "value": "#6B6B70" } - } -} diff --git a/pencil-design/src/organisms/auth/login-card.pen b/pencil-design/src/organisms/auth/login-card.pen deleted file mode 100644 index 0a8106eb..00000000 --- a/pencil-design/src/organisms/auth/login-card.pen +++ /dev/null @@ -1,1114 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "name": "Login Cards Showcase", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 80, - "padding": [80, 120], - "children": [ - { - "type": "frame", - "id": "LoginCardSection", - "name": "Login Cards Section", - "width": "fill_container", - "layout": "vertical", - "gap": 48, - "children": [ - { - "type": "frame", - "name": "sectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [6, 14], - "children": [ - { - "type": "text", - "name": "badgeText", - "fill": "$orange-primary", - "content": "LOGIN CARDS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "name": "shTitle", - "fill": "$text-primary", - "content": "Authentication Login Cards", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 700, - "content": "Complete login card organisms for different user roles: Branch, Admin, Cashier, Staff, Kitchen, Delivery, Customer.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16 - } - ] - }, - { - "type": "frame", - "name": "cardsGrid", - "width": "fill_container", - "gap": 32, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "LoginCard_Standard", - "name": "Organism/LoginCard/Standard", - "reusable": true, - "width": 420, - "fill": "$bg-surface", - "cornerRadius": 20, - "stroke": { "thickness": 1, "fill": "$border-subtle" }, - "layout": "vertical", - "gap": 32, - "padding": 40, - "children": [ - { - "type": "frame", - "name": "cardHeader", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "logoContainer", - "width": 48, - "height": 48, - "fill": { - "type": "gradient", - "gradientType": "linear", - "rotation": 135, - "colors": [ - { "color": "#FF5C00", "position": 0 }, - { "color": "#FF8A4C", "position": 1 } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "logoText", - "fill": "$text-primary", - "content": "a", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "LoginCard_Title", - "name": "cardTitle", - "fill": "$text-primary", - "content": "Đăng nhập", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - }, - { - "type": "text", - "id": "LoginCard_Subtitle", - "name": "cardSubtitle", - "fill": "$text-tertiary", - "content": "Chào mừng quay trở lại", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "name": "formSection", - "width": "fill_container", - "layout": "vertical", - "gap": 20, - "children": [ - { - "type": "frame", - "name": "emailField", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "name": "label", - "fill": "$text-secondary", - "content": "Email hoặc số điện thoại", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "inputWrapper", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "padding": [0, 16], - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "name": "inputIcon", - "width": 18, - "height": 18, - "iconFontName": "user", - "iconFontFamily": "lucide", - "fill": "$text-muted" - }, - { - "type": "text", - "name": "placeholder", - "fill": "$text-muted", - "content": "email@example.com", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - }, - { - "type": "frame", - "name": "passwordField", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "frame", - "name": "labelRow", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "label", - "fill": "$text-secondary", - "content": "Mật khẩu", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "text", - "name": "forgotLink", - "fill": "$orange-primary", - "content": "Quên mật khẩu?", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "name": "inputWrapper", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "padding": [0, 16], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "inputContent", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "name": "inputIcon", - "width": 18, - "height": 18, - "iconFontName": "lock", - "iconFontFamily": "lucide", - "fill": "$text-muted" - }, - { - "type": "text", - "name": "placeholder", - "fill": "$text-muted", - "content": "••••••••", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "icon_font", - "name": "toggleIcon", - "width": 18, - "height": 18, - "iconFontName": "eye-off", - "iconFontFamily": "lucide", - "fill": "$text-muted" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "name": "submitButton", - "width": "fill_container", - "height": 48, - "fill": { - "type": "gradient", - "gradientType": "linear", - "rotation": 135, - "colors": [ - { "color": "#FF5C00", "position": 0 }, - { "color": "#FF8A4C", "position": 1 } - ] - }, - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "btnLabel", - "fill": "$text-primary", - "content": "Đăng nhập", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "name": "footerLinks", - "width": "fill_container", - "justifyContent": "center", - "gap": 4, - "children": [ - { - "type": "text", - "name": "text", - "fill": "$text-tertiary", - "content": "Chưa có tài khoản?", - "fontFamily": "Roboto", - "fontSize": 14 - }, - { - "type": "text", - "name": "link", - "fill": "$orange-primary", - "content": "Đăng ký ngay", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "LoginCard_WithSocial", - "name": "Organism/LoginCard/WithSocial", - "reusable": true, - "width": 420, - "fill": "$bg-surface", - "cornerRadius": 20, - "stroke": { "thickness": 1, "fill": "$border-subtle" }, - "layout": "vertical", - "gap": 24, - "padding": 40, - "children": [ - { - "type": "frame", - "name": "cardHeader", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "logoContainer", - "width": 48, - "height": 48, - "fill": { - "type": "gradient", - "gradientType": "linear", - "rotation": 135, - "colors": [ - { "color": "#FF5C00", "position": 0 }, - { "color": "#FF8A4C", "position": 1 } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "logoText", - "fill": "$text-primary", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "name": "cardTitle", - "fill": "$text-primary", - "content": "Đăng nhập", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - }, - { - "type": "text", - "name": "cardSubtitle", - "fill": "$text-tertiary", - "content": "Đặt hàng và tích điểm", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "name": "formSection", - "width": "fill_container", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "frame", - "name": "phoneField", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "name": "label", - "fill": "$text-secondary", - "content": "Số điện thoại", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "inputWrapper", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "gap": 0, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "countryCode", - "height": "fill_container", - "fill": "$bg-interactive", - "cornerRadius": [10, 0, 0, 10], - "padding": [0, 12], - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "flag", - "content": "🇻🇳", - "fontSize": 16 - }, - { - "type": "text", - "name": "code", - "fill": "$text-secondary", - "content": "+84", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "name": "inputField", - "width": "fill_container", - "height": "fill_container", - "padding": [0, 12], - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "placeholder", - "fill": "$text-muted", - "content": "Nhập số điện thoại", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "name": "submitButton", - "width": "fill_container", - "height": 48, - "fill": { - "type": "gradient", - "gradientType": "linear", - "rotation": 135, - "colors": [ - { "color": "#FF5C00", "position": 0 }, - { "color": "#FF8A4C", "position": 1 } - ] - }, - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "btnLabel", - "fill": "$text-primary", - "content": "Gửi mã OTP", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "name": "socialDivider", - "width": "fill_container", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "line1", - "width": "fill_container", - "height": 1, - "fill": "$border-default" - }, - { - "type": "text", - "name": "orText", - "fill": "$text-muted", - "content": "hoặc", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "frame", - "name": "line2", - "width": "fill_container", - "height": 1, - "fill": "$border-default" - } - ] - }, - { - "type": "frame", - "name": "socialIconsRow", - "width": "fill_container", - "justifyContent": "center", - "gap": 16, - "children": [ - { - "type": "frame", - "name": "googleIcon", - "width": 48, - "height": 48, - "fill": "#FFFFFF", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "#4285F4", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "name": "appleIcon", - "width": 48, - "height": 48, - "fill": "#000000", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "width": 22, - "height": 22, - "iconFontName": "apple", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - } - ] - }, - { - "type": "frame", - "name": "zaloIcon", - "width": 48, - "height": 48, - "fill": "#0068FF", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "#FFFFFF", - "content": "Z", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "700" - } - ] - } - ] - }, - { - "type": "frame", - "name": "footerLinks", - "width": "fill_container", - "justifyContent": "center", - "gap": 4, - "children": [ - { - "type": "text", - "name": "text", - "fill": "$text-tertiary", - "content": "Lần đầu sử dụng?", - "fontFamily": "Roboto", - "fontSize": 14 - }, - { - "type": "text", - "name": "link", - "fill": "$orange-primary", - "content": "Tạo tài khoản", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "name": "staffCardsRow", - "width": "fill_container", - "gap": 32, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "LoginCard_Staff", - "name": "Organism/LoginCard/Staff", - "reusable": true, - "width": 420, - "fill": "$bg-surface", - "cornerRadius": 20, - "stroke": { "thickness": 1, "fill": "$border-subtle" }, - "layout": "vertical", - "gap": 32, - "padding": 40, - "children": [ - { - "type": "frame", - "name": "cardHeader", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "roleBadge", - "fill": "$status-success-bg", - "cornerRadius": 100, - "padding": [6, 14], - "children": [ - { - "type": "text", - "name": "roleText", - "fill": "$status-success", - "content": "NHÂN VIÊN", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600", - "letterSpacing": 1 - } - ] - }, - { - "type": "text", - "name": "cardTitle", - "fill": "$text-primary", - "content": "Đăng nhập hệ thống", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - }, - { - "type": "text", - "name": "cardSubtitle", - "fill": "$text-tertiary", - "content": "Dành cho nhân viên phục vụ", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "name": "formSection", - "width": "fill_container", - "layout": "vertical", - "gap": 20, - "children": [ - { - "type": "frame", - "name": "emailField", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "name": "label", - "fill": "$text-secondary", - "content": "Email hoặc số điện thoại", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "inputWrapper", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "padding": [0, 16], - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "name": "inputIcon", - "width": 18, - "height": 18, - "iconFontName": "user", - "iconFontFamily": "lucide", - "fill": "$text-muted" - }, - { - "type": "text", - "name": "placeholder", - "fill": "$text-muted", - "content": "Tài khoản được cấp", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - }, - { - "type": "frame", - "name": "passwordField", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "name": "label", - "fill": "$text-secondary", - "content": "Mật khẩu", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "inputWrapper", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "padding": [0, 16], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "inputContent", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "name": "inputIcon", - "width": 18, - "height": 18, - "iconFontName": "lock", - "iconFontFamily": "lucide", - "fill": "$text-muted" - }, - { - "type": "text", - "name": "placeholder", - "fill": "$text-muted", - "content": "••••••••", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "icon_font", - "name": "toggleIcon", - "width": 18, - "height": 18, - "iconFontName": "eye-off", - "iconFontFamily": "lucide", - "fill": "$text-muted" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "name": "submitButton", - "width": "fill_container", - "height": 48, - "fill": "$status-success", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "btnLabel", - "fill": "$text-primary", - "content": "Đăng nhập", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "LoginCard_Admin", - "name": "Organism/LoginCard/Admin", - "reusable": true, - "width": 420, - "fill": "$bg-surface", - "cornerRadius": 20, - "stroke": { "thickness": 1, "fill": "$border-subtle" }, - "layout": "vertical", - "gap": 32, - "padding": 40, - "children": [ - { - "type": "frame", - "name": "cardHeader", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "roleBadge", - "fill": "$status-info-bg", - "cornerRadius": 100, - "padding": [6, 14], - "children": [ - { - "type": "text", - "name": "roleText", - "fill": "$status-info", - "content": "ADMIN", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600", - "letterSpacing": 1 - } - ] - }, - { - "type": "text", - "name": "cardTitle", - "fill": "$text-primary", - "content": "Đăng nhập quản trị", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - }, - { - "type": "text", - "name": "cardSubtitle", - "fill": "$text-tertiary", - "content": "Bảng điều khiển hệ thống", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "name": "formSection", - "width": "fill_container", - "layout": "vertical", - "gap": 20, - "children": [ - { - "type": "frame", - "name": "emailField", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "name": "label", - "fill": "$text-secondary", - "content": "Email hoặc số điện thoại", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "inputWrapper", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "padding": [0, 16], - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "name": "inputIcon", - "width": 18, - "height": 18, - "iconFontName": "shield", - "iconFontFamily": "lucide", - "fill": "$text-muted" - }, - { - "type": "text", - "name": "placeholder", - "fill": "$text-muted", - "content": "admin@company.com", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - }, - { - "type": "frame", - "name": "passwordField", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "name": "label", - "fill": "$text-secondary", - "content": "Mật khẩu", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "inputWrapper", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "padding": [0, 16], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "inputContent", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "name": "inputIcon", - "width": 18, - "height": 18, - "iconFontName": "lock", - "iconFontFamily": "lucide", - "fill": "$text-muted" - }, - { - "type": "text", - "name": "placeholder", - "fill": "$text-muted", - "content": "••••••••", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "icon_font", - "name": "toggleIcon", - "width": 18, - "height": 18, - "iconFontName": "eye-off", - "iconFontFamily": "lucide", - "fill": "$text-muted" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "name": "submitButton", - "width": "fill_container", - "height": 48, - "fill": "$status-info", - "cornerRadius": 10, - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "name": "btnIcon", - "width": 18, - "height": 18, - "iconFontName": "shield-check", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "name": "btnLabel", - "fill": "$text-primary", - "content": "Đăng nhập bảo mật", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-page": { "type": "color", "value": "#0A0A0B" }, - "bg-surface": { "type": "color", "value": "#111113" }, - "bg-elevated": { "type": "color", "value": "#1A1A1D" }, - "bg-interactive": { "type": "color", "value": "#2A2A2E" }, - "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" }, - "text-muted": { "type": "color", "value": "#6B6B70" }, - "status-success": { "type": "color", "value": "#22C55E" }, - "status-success-bg": { "type": "color", "value": "#22C55E1A" }, - "status-info": { "type": "color", "value": "#3B82F6" }, - "status-info-bg": { "type": "color", "value": "#3B82F61A" } - } -} diff --git a/pencil-design/src/organisms/auth/otp-verify.pen b/pencil-design/src/organisms/auth/otp-verify.pen deleted file mode 100644 index 67db00a0..00000000 --- a/pencil-design/src/organisms/auth/otp-verify.pen +++ /dev/null @@ -1,542 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "name": "OTP Verify Showcase", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 80, - "padding": [80, 120], - "children": [ - { - "type": "frame", - "id": "OTPSection", - "name": "OTP Verification Section", - "width": "fill_container", - "layout": "vertical", - "gap": 48, - "children": [ - { - "type": "frame", - "name": "sectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [6, 14], - "children": [ - { - "type": "text", - "name": "badgeText", - "fill": "$orange-primary", - "content": "OTP VERIFICATION", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "name": "shTitle", - "fill": "$text-primary", - "content": "OTP Verification Cards", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "OTP verification screens for phone authentication and password reset.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16 - } - ] - }, - { - "type": "frame", - "name": "cardsGrid", - "width": "fill_container", - "gap": 32, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "OTPCard_Default", - "name": "Organism/OTPVerify/Default", - "reusable": true, - "width": 420, - "fill": "$bg-surface", - "cornerRadius": 20, - "stroke": { "thickness": 1, "fill": "$border-subtle" }, - "layout": "vertical", - "gap": 32, - "padding": 40, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "cardHeader", - "layout": "vertical", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "iconContainer", - "width": 64, - "height": 64, - "fill": "$status-info-bg", - "cornerRadius": 32, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "name": "phoneIcon", - "width": 28, - "height": 28, - "iconFontName": "smartphone", - "iconFontFamily": "lucide", - "fill": "$status-info" - } - ] - }, - { - "type": "text", - "name": "cardTitle", - "fill": "$text-primary", - "content": "Xác thực OTP", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - }, - { - "type": "text", - "name": "cardSubtitle", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 300, - "content": "Nhập mã 6 chữ số đã gửi đến số điện thoại của bạn", - "lineHeight": 1.5, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 14 - }, - { - "type": "text", - "id": "OTP_PhoneNumber", - "name": "phoneNumber", - "fill": "$orange-primary", - "content": "+84 912 ***678", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "name": "otpInputs", - "gap": 8, - "children": [ - { - "type": "frame", - "name": "d1", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - }, - { - "type": "frame", - "name": "d2", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - }, - { - "type": "frame", - "name": "d3", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - }, - { - "type": "text", - "name": "separator", - "fill": "$text-muted", - "content": "—", - "fontFamily": "Roboto", - "fontSize": 20 - }, - { - "type": "frame", - "name": "d4", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - }, - { - "type": "frame", - "name": "d5", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - }, - { - "type": "frame", - "name": "d6", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "justifyContent": "center", - "alignItems": "center", - "children": [] - } - ] - }, - { - "type": "frame", - "name": "timerRow", - "gap": 4, - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "timerText", - "fill": "$text-tertiary", - "content": "Mã hết hạn sau", - "fontFamily": "Roboto", - "fontSize": 14 - }, - { - "type": "text", - "id": "OTP_Timer", - "name": "timerValue", - "fill": "$orange-primary", - "content": "02:45", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "name": "submitButton", - "width": "fill_container", - "height": 48, - "fill": "$bg-interactive", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "btnLabel", - "fill": "$text-disabled", - "content": "Xác nhận", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "name": "footerLinks", - "gap": 4, - "children": [ - { - "type": "text", - "name": "text", - "fill": "$text-tertiary", - "content": "Không nhận được mã?", - "fontFamily": "Roboto", - "fontSize": 14 - }, - { - "type": "text", - "name": "link", - "fill": "$orange-primary", - "content": "Gửi lại", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "OTPCard_Filled", - "name": "Organism/OTPVerify/Filled", - "reusable": true, - "width": 420, - "fill": "$bg-surface", - "cornerRadius": 20, - "stroke": { "thickness": 1, "fill": "$border-subtle" }, - "layout": "vertical", - "gap": 32, - "padding": 40, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "cardHeader", - "layout": "vertical", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "iconContainer", - "width": 64, - "height": 64, - "fill": "$status-success-bg", - "cornerRadius": 32, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "name": "checkIcon", - "width": 28, - "height": 28, - "iconFontName": "check-circle", - "iconFontFamily": "lucide", - "fill": "$status-success" - } - ] - }, - { - "type": "text", - "name": "cardTitle", - "fill": "$text-primary", - "content": "Xác thực OTP", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - }, - { - "type": "text", - "name": "cardSubtitle", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 300, - "content": "Nhập mã 6 chữ số đã gửi đến số điện thoại của bạn", - "lineHeight": 1.5, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 14 - }, - { - "type": "text", - "name": "phoneNumber", - "fill": "$orange-primary", - "content": "+84 912 ***678", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "name": "otpInputs", - "gap": 8, - "children": [ - { - "type": "frame", - "name": "d1", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$status-success" }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "text", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" } - ] - }, - { - "type": "frame", - "name": "d2", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$status-success" }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "text", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" } - ] - }, - { - "type": "frame", - "name": "d3", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$status-success" }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "text", "fill": "$text-primary", "content": "3", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" } - ] - }, - { - "type": "text", - "name": "separator", - "fill": "$status-success", - "content": "—", - "fontFamily": "Roboto", - "fontSize": 20 - }, - { - "type": "frame", - "name": "d4", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$status-success" }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "text", "fill": "$text-primary", "content": "4", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" } - ] - }, - { - "type": "frame", - "name": "d5", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$status-success" }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "text", "fill": "$text-primary", "content": "5", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" } - ] - }, - { - "type": "frame", - "name": "d6", - "width": 48, - "height": 56, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$status-success" }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "text", "fill": "$text-primary", "content": "6", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" } - ] - } - ] - }, - { - "type": "frame", - "name": "submitButton", - "width": "fill_container", - "height": 48, - "fill": { - "type": "gradient", - "gradientType": "linear", - "rotation": 135, - "colors": [ - { "color": "#FF5C00", "position": 0 }, - { "color": "#FF8A4C", "position": 1 } - ] - }, - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "btnLabel", - "fill": "$text-primary", - "content": "Xác nhận", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-page": { "type": "color", "value": "#0A0A0B" }, - "bg-surface": { "type": "color", "value": "#111113" }, - "bg-elevated": { "type": "color", "value": "#1A1A1D" }, - "bg-interactive": { "type": "color", "value": "#2A2A2E" }, - "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-tertiary": { "type": "color", "value": "#8B8B90" }, - "text-muted": { "type": "color", "value": "#6B6B70" }, - "text-disabled": { "type": "color", "value": "#4B4B50" }, - "status-success": { "type": "color", "value": "#22C55E" }, - "status-success-bg": { "type": "color", "value": "#22C55E1A" }, - "status-info": { "type": "color", "value": "#3B82F6" }, - "status-info-bg": { "type": "color", "value": "#3B82F61A" } - } -} diff --git a/pencil-design/src/organisms/cards.pen b/pencil-design/src/organisms/cards.pen deleted file mode 100644 index d9fd64ea..00000000 --- a/pencil-design/src/organisms/cards.pen +++ /dev/null @@ -1,1241 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "name": "Card Showcase", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 80, - "padding": [ - 80, - 120 - ], - "children": [ - { - "type": "frame", - "id": "CardSection", - "name": "Cards Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "CardSectHeader", - "name": "cardSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "WocUJ", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "jV70R", - "name": "badgeText", - "fill": "$orange-primary", - "content": "CARDS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "5dZC4", - "name": "shTitle", - "fill": "$text-primary", - "content": "Content Containers", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "HeRP2", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 700, - "content": "Various card types for displaying features, pricing, industry solutions, and steps.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "CardGrid", - "name": "cardExamples", - "width": "fill_container", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "FeatCard1", - "name": "exampleFeatureCard", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "HpzSJ", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#FF5C0018", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "suLNf", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "monitor-smartphone", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - } - ] - }, - { - "type": "text", - "id": "UJFMb", - "name": "fcTitle", - "fill": "$text-primary", - "content": "Feature Card", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "tDzj5", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "This is a feature card component used to showcase key features and capabilities.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "IndCard1", - "name": "exampleIndustryCard", - "clip": true, - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "FLdiF", - "name": "indImg", - "width": "fill_container", - "height": 200, - "fill": "#3B82F618" - }, - { - "type": "frame", - "id": "8ZFVY", - "name": "indContent", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "padding": 24, - "children": [ - { - "type": "text", - "id": "8gWd8", - "name": "indTitle", - "fill": "$text-primary", - "content": "Industry Card", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "1piNF", - "name": "indDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Industry-specific card with image, title, description and tags.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "h0FX2", - "name": "indTags", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "DSgMw", - "name": "indTag1", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "rVbro", - "name": "chipText", - "fill": "$text-secondary", - "content": "Feature 1", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "uoFFu", - "name": "indTag2", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "JI7l0", - "name": "chipText", - "fill": "$text-secondary", - "content": "Feature 2", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "StepCard1", - "name": "exampleStepCard", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 20, - "padding": 32, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ZReaA", - "name": "stepNum", - "width": 56, - "height": 56, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 28, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "m5Mjz", - "name": "stepNumText", - "fill": "$text-primary", - "content": "1", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "2XBUX", - "name": "stepTitle", - "fill": "$text-primary", - "content": "Step Card", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "c553G", - "name": "stepDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Step-by-step instruction card with numbered badge.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PricingCardRow", - "name": "pricingCardExamples", - "width": "fill_container", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "PriceCard1", - "name": "examplePricingBasic", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "teMVu", - "name": "pcBadge", - "enabled": false, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "azC2t", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Ph\u1ed5 bi\u1ebfn nh\u1ea5t", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "isTGs", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "ZFjfl", - "name": "pcName", - "fill": "$text-secondary", - "content": "Starter", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "5UeZM", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "8fM2n", - "name": "pcPrice", - "fill": "$text-primary", - "content": "Free", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "GfS02", - "name": "pcPer", - "enabled": false, - "fill": "$text-tertiary", - "content": "/th\u00e1ng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "uLtIh", - "name": "pcDesc", - "fill": "$text-tertiary", - "content": "For small businesses getting started", - "lineHeight": 1.5, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "rectangle", - "id": "u5uVY", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "MXmSA", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "YbXof", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "mzamm", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "3r8fL", - "name": "checkText", - "fill": "$text-secondary", - "content": "1 store", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "Nj2yA", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "NVTzn", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "5LtsD", - "name": "checkText", - "fill": "$text-secondary", - "content": "100 transactions/month", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "GqUzO", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "yZlVe", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "Ut5uS", - "name": "checkText", - "fill": "$text-secondary", - "content": "Basic reports", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "0Fnac", - "name": "pcBtn", - "width": "fill_container", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "1w3HC", - "name": "btnSIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "RVZxt", - "name": "btnSText", - "fill": "$text-primary", - "content": "Get Started", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PriceCard2", - "name": "examplePricingPro", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 2, - "fill": "$orange-primary" - }, - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "2qVjH", - "name": "pcBadge", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "PthNf", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Ph\u1ed5 bi\u1ebfn nh\u1ea5t", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "yT240", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "G4OEv", - "name": "pcName", - "fill": "$orange-primary", - "content": "Professional", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "IQojv", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "R1uJY", - "name": "pcPrice", - "fill": "$text-primary", - "content": "499K", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "lbKkc", - "name": "pcPer", - "fill": "$text-tertiary", - "content": "/th\u00e1ng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "i9xHO", - "name": "pcDesc", - "fill": "$text-tertiary", - "content": "For growing business chains", - "lineHeight": 1.5, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "rectangle", - "id": "GaBI4", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "KiK1Y", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "s5RvM", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "7e7A1", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "Lmf0e", - "name": "checkText", - "fill": "$text-secondary", - "content": "5 stores", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "pc2H0", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "JsYjG", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "UUmpR", - "name": "checkText", - "fill": "$text-secondary", - "content": "Unlimited transactions", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "jqWaK", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "6LR43", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "ULIlu", - "name": "checkText", - "fill": "$text-secondary", - "content": "Advanced analytics", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "3xz7n", - "name": "proPricingBtn", - "width": "fill_container", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "6y0tm", - "name": "btnPIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "96nc7", - "name": "btnPText", - "fill": "$text-primary", - "content": "Try 14 days free", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PriceCard3", - "name": "examplePricingEnterprise", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "We76w", - "name": "pcBadge", - "enabled": false, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "ttbZY", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Ph\u1ed5 bi\u1ebfn nh\u1ea5t", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "0aQSi", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "aSefC", - "name": "pcName", - "fill": "$text-secondary", - "content": "Enterprise", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "QJm3P", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "PNKkF", - "name": "pcPrice", - "fill": "$text-primary", - "content": "Custom", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "VHRx4", - "name": "pcPer", - "enabled": false, - "fill": "$text-tertiary", - "content": "/th\u00e1ng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "teqD3", - "name": "pcDesc", - "fill": "$text-tertiary", - "content": "For large enterprise chains", - "lineHeight": 1.5, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "rectangle", - "id": "vbKaC", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "dBIlb", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "EXa0J", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "U0aiJ", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "F221P", - "name": "checkText", - "fill": "$text-secondary", - "content": "Unlimited stores", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "DHLmw", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "En6Un", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "ytc60", - "name": "checkText", - "fill": "$text-secondary", - "content": "API integration", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "zWEio", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "P4YlO", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "seCtG", - "name": "checkText", - "fill": "$text-secondary", - "content": "Dedicated account manager", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "8129K", - "name": "pcBtn", - "width": "fill_container", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "kqsyZ", - "name": "btnSIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "koJzc", - "name": "btnSText", - "fill": "$text-primary", - "content": "Contact Sales", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-elevated": { - "type": "color", - "value": "#1A1A1D" - }, - "bg-interactive": { - "type": "color", - "value": "#2A2A2E" - }, - "bg-page": { - "type": "color", - "value": "#0A0A0B" - }, - "bg-surface": { - "type": "color", - "value": "#111113" - }, - "border-default": { - "type": "color", - "value": "#2A2A2E" - }, - "border-subtle": { - "type": "color", - "value": "#1F1F23" - }, - "green-success": { - "type": "color", - "value": "#22C55E" - }, - "orange-light": { - "type": "color", - "value": "#FF8A4C" - }, - "orange-primary": { - "type": "color", - "value": "#FF5C00" - }, - "text-disabled": { - "type": "color", - "value": "#6B6B70" - }, - "text-muted": { - "type": "color", - "value": "#FFFFFFCC" - }, - "text-primary": { - "type": "color", - "value": "#FFFFFF" - }, - "text-secondary": { - "type": "color", - "value": "#ADADB0" - }, - "text-tertiary": { - "type": "color", - "value": "#8B8B90" - } - } -} \ No newline at end of file diff --git a/pencil-design/src/organisms/footers.pen b/pencil-design/src/organisms/footers.pen deleted file mode 100644 index dab79408..00000000 --- a/pencil-design/src/organisms/footers.pen +++ /dev/null @@ -1,341 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "name": "Footer Showcase", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 80, - "padding": [ - 80, - 120 - ], - "children": [ - { - "type": "frame", - "id": "FooterSection", - "name": "Footer Components Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "FooterSectHeader", - "name": "footerSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "vQqcl", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "NH6gQ", - "name": "badgeText", - "fill": "$orange-primary", - "content": "FOOTER COMPONENTS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "GK1Rq", - "name": "shTitle", - "fill": "$text-primary", - "content": "Footer Elements", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "lDotf", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "Footer column components for organizing links and information.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "FooterColRow", - "name": "footerColumnExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "gap": 48, - "padding": 40, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "FootCol1", - "name": "exampleFooterCol1", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "text", - "id": "jcBoY", - "name": "footColTitle", - "fill": "$text-primary", - "content": "Products", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "NX2A9", - "name": "footColL1", - "fill": "$text-tertiary", - "content": "POS System", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "qkmXd", - "name": "footColL2", - "fill": "$text-tertiary", - "content": "Loyalty Program", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "MqnX1", - "name": "footColL3", - "fill": "$text-tertiary", - "content": "Analytics", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "U5fbU", - "name": "footColL4", - "fill": "$text-tertiary", - "content": "Inventory", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "FootCol2", - "name": "exampleFooterCol2", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "text", - "id": "3f7yU", - "name": "footColTitle", - "fill": "$text-primary", - "content": "Industries", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "nUIva", - "name": "footColL1", - "fill": "$text-tertiary", - "content": "Restaurant & F&B", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "VMn3X", - "name": "footColL2", - "fill": "$text-tertiary", - "content": "Bar & Lounge", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "TYRQA", - "name": "footColL3", - "fill": "$text-tertiary", - "content": "Karaoke", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "Y1hlD", - "name": "footColL4", - "fill": "$text-tertiary", - "content": "Coffee Shop", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "FootCol3", - "name": "exampleFooterCol3", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "text", - "id": "ynsnj", - "name": "footColTitle", - "fill": "$text-primary", - "content": "Support", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "CxgY7", - "name": "footColL1", - "fill": "$text-tertiary", - "content": "Help Center", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "PNNws", - "name": "footColL2", - "fill": "$text-tertiary", - "content": "Contact", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "KTHFx", - "name": "footColL3", - "fill": "$text-tertiary", - "content": "Privacy Policy", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "F0e0G", - "name": "footColL4", - "fill": "$text-tertiary", - "content": "Terms of Use", - "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" - }, - "bg-surface": { - "type": "color", - "value": "#111113" - }, - "border-default": { - "type": "color", - "value": "#2A2A2E" - }, - "border-subtle": { - "type": "color", - "value": "#1F1F23" - }, - "green-success": { - "type": "color", - "value": "#22C55E" - }, - "orange-light": { - "type": "color", - "value": "#FF8A4C" - }, - "orange-primary": { - "type": "color", - "value": "#FF5C00" - }, - "text-disabled": { - "type": "color", - "value": "#6B6B70" - }, - "text-muted": { - "type": "color", - "value": "#FFFFFFCC" - }, - "text-primary": { - "type": "color", - "value": "#FFFFFF" - }, - "text-secondary": { - "type": "color", - "value": "#ADADB0" - }, - "text-tertiary": { - "type": "color", - "value": "#8B8B90" - } - } -} \ No newline at end of file diff --git a/pencil-design/src/organisms/headers.pen b/pencil-design/src/organisms/headers.pen deleted file mode 100644 index 6d7b4e23..00000000 --- a/pencil-design/src/organisms/headers.pen +++ /dev/null @@ -1,142 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "name": "Header Showcase", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 80, - "padding": [ - 80, - 120 - ], - "children": [ - { - "type": "frame", - "id": "LibHeader", - "name": "Library Header", - "width": "fill_container", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "LibLogo", - "name": "componentLibLogo", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "L1IHb", - "name": "logoDot", - "fill": "$orange-primary", - "width": 10, - "height": 10 - }, - { - "type": "text", - "id": "oAfvR", - "name": "logoText", - "fill": "$text-primary", - "content": "aPOS", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "600", - "letterSpacing": 3 - } - ] - }, - { - "type": "text", - "id": "LibTitle", - "name": "libTitle", - "fill": "$text-primary", - "content": "aPOS Component Library", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 48, - "fontWeight": "600", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "LibDesc", - "name": "libDescription", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 700, - "content": "Design system components for aPOS - POS and loyalty management platform. All components are reusable and customizable.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - } - ] - } - ], - "variables": { - "bg-elevated": { - "type": "color", - "value": "#1A1A1D" - }, - "bg-interactive": { - "type": "color", - "value": "#2A2A2E" - }, - "bg-page": { - "type": "color", - "value": "#0A0A0B" - }, - "bg-surface": { - "type": "color", - "value": "#111113" - }, - "border-default": { - "type": "color", - "value": "#2A2A2E" - }, - "border-subtle": { - "type": "color", - "value": "#1F1F23" - }, - "green-success": { - "type": "color", - "value": "#22C55E" - }, - "orange-light": { - "type": "color", - "value": "#FF8A4C" - }, - "orange-primary": { - "type": "color", - "value": "#FF5C00" - }, - "text-disabled": { - "type": "color", - "value": "#6B6B70" - }, - "text-muted": { - "type": "color", - "value": "#FFFFFFCC" - }, - "text-primary": { - "type": "color", - "value": "#FFFFFF" - }, - "text-secondary": { - "type": "color", - "value": "#ADADB0" - }, - "text-tertiary": { - "type": "color", - "value": "#8B8B90" - } - } -} \ No newline at end of file diff --git a/pencil-design/src/organisms/misc.pen b/pencil-design/src/organisms/misc.pen deleted file mode 100644 index afd785e9..00000000 --- a/pencil-design/src/organisms/misc.pen +++ /dev/null @@ -1,408 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "UtilSection", - "name": "Utility Components Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "UtilSectHeader", - "name": "utilSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "fBoMm", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "o5bXI", - "name": "badgeText", - "fill": "$orange-primary", - "content": "UTILITIES", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "gtlnT", - "name": "shTitle", - "fill": "$text-primary", - "content": "Helper Components", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "5OBHB", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "Dividers, social icons, check items, and other utility elements.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "UtilRow", - "name": "utilExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 32, - "padding": 40, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CheckRow", - "name": "checkListRow", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "Check1", - "name": "exampleCheckItem1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "VJGh3", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "VwkNy", - "name": "checkText", - "fill": "$text-secondary", - "content": "Feature check list item", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "Check2", - "name": "exampleCheckItem2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "BrCzS", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "9qmDC", - "name": "checkText", - "fill": "$text-secondary", - "content": "Another check list item", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "Check3", - "name": "exampleCheckItem3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "87yKj", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "JoqXu", - "name": "checkText", - "fill": "$text-secondary", - "content": "Third check list item", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "rectangle", - "id": "DividerEx", - "name": "exampleDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "SocialRow", - "name": "socialIconsRow", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "Social1", - "name": "exampleFacebook", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "YXkpa", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "facebook", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - }, - { - "type": "frame", - "id": "Social2", - "name": "exampleInstagram", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "4UrP1", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "instagram", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - }, - { - "type": "frame", - "id": "Social3", - "name": "exampleYoutube", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "QG5mc", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "youtube", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - }, - { - "type": "frame", - "id": "Social4", - "name": "exampleLinkedIn", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "FNwhd", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "linkedin", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - } - ] - }, - { - "type": "frame", - "id": "TrustEx", - "name": "exampleTrustStat", - "width": "fill_container", - "gap": 40, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "iObWZ", - "name": "tsLabel", - "fill": "$text-disabled", - "content": "\u0110\u01b0\u1ee3c tin d\u00f9ng b\u1edfi 2,000+ doanh nghi\u1ec7p", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "rectangle", - "id": "M0mkC", - "name": "tsDivider1", - "fill": "$border-default", - "width": 1, - "height": 20 - }, - { - "type": "text", - "id": "wZxFi", - "name": "tsStat1", - "fill": "$text-tertiary", - "content": "50,000+ giao d\u1ecbch/ng\u00e0y", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "rectangle", - "id": "9ZsNt", - "name": "tsDivider2", - "fill": "$border-default", - "width": 1, - "height": 20 - }, - { - "type": "text", - "id": "gpriC", - "name": "tsStat2", - "fill": "$text-tertiary", - "content": "99.9% uptime", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-elevated": { - "type": "color", - "value": "#1A1A1D" - }, - "bg-interactive": { - "type": "color", - "value": "#2A2A2E" - }, - "bg-page": { - "type": "color", - "value": "#0A0A0B" - }, - "bg-surface": { - "type": "color", - "value": "#111113" - }, - "border-default": { - "type": "color", - "value": "#2A2A2E" - }, - "border-subtle": { - "type": "color", - "value": "#1F1F23" - }, - "green-success": { - "type": "color", - "value": "#22C55E" - }, - "orange-light": { - "type": "color", - "value": "#FF8A4C" - }, - "orange-primary": { - "type": "color", - "value": "#FF5C00" - }, - "text-disabled": { - "type": "color", - "value": "#6B6B70" - }, - "text-muted": { - "type": "color", - "value": "#FFFFFFCC" - }, - "text-primary": { - "type": "color", - "value": "#FFFFFF" - }, - "text-secondary": { - "type": "color", - "value": "#ADADB0" - }, - "text-tertiary": { - "type": "color", - "value": "#8B8B90" - } - } -} \ No newline at end of file diff --git a/pencil-design/src/organisms/navigations.pen b/pencil-design/src/organisms/navigations.pen deleted file mode 100644 index 6e4557cc..00000000 --- a/pencil-design/src/organisms/navigations.pen +++ /dev/null @@ -1,222 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "name": "Navigation Showcase", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 80, - "padding": [ - 80, - 120 - ], - "children": [ - { - "type": "frame", - "id": "NavSection", - "name": "Navigation Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "NavSectHeader", - "name": "navSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "jNieW", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "jVugF", - "name": "badgeText", - "fill": "$orange-primary", - "content": "NAVIGATION", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "5HgAI", - "name": "shTitle", - "fill": "$text-primary", - "content": "Headers & Menus", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "72MpO", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "Navigation bars and menu components for desktop and mobile layouts.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "NavExamples", - "name": "navExamples", - "width": "fill_container", - "layout": "vertical", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "DesktopNav", - "name": "exampleDesktopNav", - "width": "fill_container", - "height": "fit_content(84)", - "padding": [ - 20, - 120 - ], - "justifyContent": "space_between", - "alignItems": "center" - }, - { - "type": "frame", - "id": "MobileNav", - "name": "exampleMobileNav", - "width": "fill_container", - "padding": [ - 16, - 20 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "EYcUX", - "name": "mNavLogo", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "c7KAp", - "name": "logoDot", - "fill": "$orange-primary", - "width": 10, - "height": 10 - }, - { - "type": "text", - "id": "9deBe", - "name": "logoText", - "fill": "$text-primary", - "content": "aPOS", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600", - "letterSpacing": 3 - } - ] - }, - { - "type": "icon_font", - "id": "yEnDr", - "name": "hamburgerIcon", - "width": 24, - "height": 24, - "iconFontName": "menu", - "iconFontFamily": "lucide", - "fill": "$text-primary" - } - ] - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-elevated": { - "type": "color", - "value": "#1A1A1D" - }, - "bg-interactive": { - "type": "color", - "value": "#2A2A2E" - }, - "bg-page": { - "type": "color", - "value": "#0A0A0B" - }, - "bg-surface": { - "type": "color", - "value": "#111113" - }, - "border-default": { - "type": "color", - "value": "#2A2A2E" - }, - "border-subtle": { - "type": "color", - "value": "#1F1F23" - }, - "green-success": { - "type": "color", - "value": "#22C55E" - }, - "orange-light": { - "type": "color", - "value": "#FF8A4C" - }, - "orange-primary": { - "type": "color", - "value": "#FF5C00" - }, - "text-disabled": { - "type": "color", - "value": "#6B6B70" - }, - "text-muted": { - "type": "color", - "value": "#FFFFFFCC" - }, - "text-primary": { - "type": "color", - "value": "#FFFFFF" - }, - "text-secondary": { - "type": "color", - "value": "#ADADB0" - }, - "text-tertiary": { - "type": "color", - "value": "#8B8B90" - } - } -} \ No newline at end of file diff --git a/pencil-design/src/organisms/pos-layout.pen b/pencil-design/src/organisms/pos-layout.pen deleted file mode 100644 index c3c7920f..00000000 --- a/pencil-design/src/organisms/pos-layout.pen +++ /dev/null @@ -1,469 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "name": "POS Layout Showcase", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 80, - "padding": [80, 120], - "children": [ - { - "type": "frame", - "id": "NumpadFullSection", - "name": "Numpad Full Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "NumpadFullHeader", - "name": "numpadFullSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "NumpadFullBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [6, 14], - "children": [ - { - "type": "text", - "id": "NumpadFullBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "POS NUMPAD", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "NumpadFullTitle", - "name": "shTitle", - "fill": "$text-primary", - "content": "Full Numpad Component", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - } - ] - }, - { - "type": "frame", - "id": "NumpadFullExamples", - "name": "numpadFullExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "padding": 40, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "NumpadFull", - "name": "Organism/Numpad/Full", - "reusable": true, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "layout": "vertical", - "gap": 8, - "padding": 16, - "children": [ - { - "type": "frame", - "id": "NumpadRow1", - "name": "row1", - "gap": 8, - "children": [ - {"type": "frame", "id": "NK7", "name": "key7", "width": 64, "height": 64, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NK7T", "fill": "$text-primary", "content": "7", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"}]}, - {"type": "frame", "id": "NK8", "name": "key8", "width": 64, "height": 64, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NK8T", "fill": "$text-primary", "content": "8", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"}]}, - {"type": "frame", "id": "NK9", "name": "key9", "width": 64, "height": 64, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NK9T", "fill": "$text-primary", "content": "9", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"}]}, - {"type": "frame", "id": "NKC", "name": "keyClear", "width": 64, "height": 64, "fill": "#EF444418", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NKCT", "fill": "#EF4444", "content": "C", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}]} - ] - }, - { - "type": "frame", - "id": "NumpadRow2", - "name": "row2", - "gap": 8, - "children": [ - {"type": "frame", "id": "NK4", "name": "key4", "width": 64, "height": 64, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NK4T", "fill": "$text-primary", "content": "4", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"}]}, - {"type": "frame", "id": "NK5", "name": "key5", "width": 64, "height": 64, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NK5T", "fill": "$text-primary", "content": "5", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"}]}, - {"type": "frame", "id": "NK6", "name": "key6", "width": 64, "height": 64, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NK6T", "fill": "$text-primary", "content": "6", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"}]}, - {"type": "frame", "id": "NKBack", "name": "keyBackspace", "width": 64, "height": 64, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "NKBackI", "width": 24, "height": 24, "iconFontName": "delete", "iconFontFamily": "lucide", "fill": "$text-secondary"}]} - ] - }, - { - "type": "frame", - "id": "NumpadRow3", - "name": "row3", - "gap": 8, - "children": [ - {"type": "frame", "id": "NK1", "name": "key1", "width": 64, "height": 64, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NK1T", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"}]}, - {"type": "frame", "id": "NK2", "name": "key2", "width": 64, "height": 64, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NK2T", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"}]}, - {"type": "frame", "id": "NK3", "name": "key3", "width": 64, "height": 64, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NK3T", "fill": "$text-primary", "content": "3", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"}]}, - {"type": "frame", "id": "NKEnter", "name": "keyEnter", "width": 64, "height": 136, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "NKEnterI", "width": 28, "height": 28, "iconFontName": "corner-down-left", "iconFontFamily": "lucide", "fill": "$text-primary"}]} - ] - }, - { - "type": "frame", - "id": "NumpadRow4", - "name": "row4", - "gap": 8, - "children": [ - {"type": "frame", "id": "NK0", "name": "key0", "width": 136, "height": 64, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NK0T", "fill": "$text-primary", "content": "0", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"}]}, - {"type": "frame", "id": "NKDot", "name": "keyDot", "width": 64, "height": 64, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NKDotT", "fill": "$text-primary", "content": ".", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"}]} - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PaymentMethodsSection", - "name": "Payment Methods Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "PaymentMethodsHeader", - "name": "paymentMethodsSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PaymentMethodsBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [6, 14], - "children": [ - { - "type": "text", - "id": "PaymentMethodsBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "PAYMENT METHODS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "PaymentMethodsTitle", - "name": "shTitle", - "fill": "$text-primary", - "content": "Payment Selection Grid", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - } - ] - }, - { - "type": "frame", - "id": "PaymentMethodsExamples", - "name": "paymentMethodsExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "padding": 40, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "PaymentGrid", - "name": "Organism/PaymentMethods", - "reusable": true, - "gap": 16, - "children": [ - { - "type": "frame", - "id": "PayCash", - "name": "cashMethod", - "width": 120, - "height": 100, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": {"thickness": 2, "fill": "$orange-primary"}, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "PayCashIcon", "width": 32, "height": 32, "iconFontName": "banknote", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "text", "id": "PayCashText", "fill": "$text-primary", "content": "Tiền mặt", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ] - }, - { - "type": "frame", - "id": "PayCard", - "name": "cardMethod", - "width": 120, - "height": 100, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "PayCardIcon", "width": 32, "height": 32, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "PayCardText", "fill": "$text-primary", "content": "Thẻ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ] - }, - { - "type": "frame", - "id": "PayQR", - "name": "qrMethod", - "width": 120, - "height": 100, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "PayQRIcon", "width": 32, "height": 32, "iconFontName": "qr-code", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "PayQRText", "fill": "$text-primary", "content": "QR Code", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ] - }, - { - "type": "frame", - "id": "PayWallet", - "name": "walletMethod", - "width": 120, - "height": 100, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "PayWalletIcon", "width": 32, "height": 32, "iconFontName": "wallet", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "PayWalletText", "fill": "$text-primary", "content": "Ví điện tử", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "DialogSection", - "name": "Dialogs Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "DialogHeader", - "name": "dialogSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "DialogBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [6, 14], - "children": [ - { - "type": "text", - "id": "DialogBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "DIALOGS & TOASTS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "DialogTitle", - "name": "shTitle", - "fill": "$text-primary", - "content": "Feedback Components", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - } - ] - }, - { - "type": "frame", - "id": "DialogExamples", - "name": "dialogExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "layout": "vertical", - "gap": 32, - "padding": 40, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ConfirmDialog", - "name": "Organism/Dialog/Confirm", - "reusable": true, - "width": 400, - "fill": "$bg-elevated", - "cornerRadius": 20, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "layout": "vertical", - "gap": 24, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "ConfirmDialogHeader", - "name": "header", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "ConfirmDialogIcon", "width": 48, "height": 48, "iconFontName": "circle-alert", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "text", "id": "ConfirmDialogTitle", "name": "title", "fill": "$text-primary", "content": "Xác nhận thanh toán", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600", "textAlign": "center"}, - {"type": "text", "id": "ConfirmDialogMessage", "name": "message", "fill": "$text-secondary", "content": "Thanh toán đơn hàng 100,116₫ bằng Tiền mặt?", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal", "textAlign": "center", "lineHeight": 1.5} - ] - }, - { - "type": "frame", - "id": "ConfirmDialogActions", - "name": "actions", - "width": "fill_container", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "ConfirmDialogCancel", - "name": "cancelBtn", - "width": "fill_container", - "height": 48, - "cornerRadius": 10, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "justifyContent": "center", - "alignItems": "center", - "children": [{"type": "text", "id": "ConfirmDialogCancelText", "fill": "$text-secondary", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"}] - }, - { - "type": "frame", - "id": "ConfirmDialogConfirm", - "name": "confirmBtn", - "width": "fill_container", - "height": 48, - "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [{"type": "text", "id": "ConfirmDialogConfirmText", "fill": "$text-primary", "content": "Xác nhận", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ToastSuccess", - "name": "Organism/Toast/Success", - "reusable": true, - "width": 400, - "fill": "#22C55E18", - "cornerRadius": 12, - "stroke": {"thickness": 1, "fill": "$green-success"}, - "gap": 12, - "padding": [16, 20], - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "ToastSuccessIcon", "width": 24, "height": 24, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "$green-success"}, - {"type": "text", "id": "ToastSuccessText", "name": "message", "fill": "$green-success", "content": "Thanh toán thành công!", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"} - ] - }, - { - "type": "frame", - "id": "ToastError", - "name": "Organism/Toast/Error", - "reusable": true, - "width": 400, - "fill": "#EF444418", - "cornerRadius": 12, - "stroke": {"thickness": 1, "fill": "#EF4444"}, - "gap": 12, - "padding": [16, 20], - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "ToastErrorIcon", "width": 24, "height": 24, "iconFontName": "x-circle", "iconFontFamily": "lucide", "fill": "#EF4444"}, - {"type": "text", "id": "ToastErrorText", "name": "message", "fill": "#EF4444", "content": "Giao dịch thất bại. Vui lòng thử lại.", "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"}, - "bg-surface": {"type": "color", "value": "#111113"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "green-success": {"type": "color", "value": "#22C55E"}, - "orange-light": {"type": "color", "value": "#FF8A4C"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-disabled": {"type": "color", "value": "#6B6B70"}, - "text-muted": {"type": "color", "value": "#FFFFFFCC"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/organisms/pos/customer-lookup.pen b/pencil-design/src/organisms/pos/customer-lookup.pen deleted file mode 100644 index 59bb20ae..00000000 --- a/pencil-design/src/organisms/pos/customer-lookup.pen +++ /dev/null @@ -1,608 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "name": "Customer Lookup Showcase", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 80, - "padding": [80, 120], - "children": [ - { - "type": "frame", - "id": "CustomerLookupSection", - "name": "Customer Lookup Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "CustomerLookupHeader", - "name": "customerLookupSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CustomerLookupBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [6, 14], - "children": [ - { - "type": "text", - "id": "CustomerLookupBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "CUSTOMER LOOKUP", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "CustomerLookupTitle", - "name": "shTitle", - "fill": "$text-primary", - "content": "Customer Search & Add", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - } - ] - }, - { - "type": "frame", - "id": "CustomerLookupExample", - "name": "customerLookupExample", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "padding": 40, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "CustomerLookupModal", - "name": "Organism/CustomerLookup/Modal", - "reusable": true, - "width": 480, - "fill": "$bg-elevated", - "cornerRadius": 20, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "CustomerLookupTopBar", - "name": "topBar", - "width": "fill_container", - "padding": [16, 20], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "text", "id": "CustomerLookupModalTitle", "fill": "$text-primary", "content": "Tìm khách hàng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}, - { - "type": "frame", - "id": "CustomerLookupCloseBtn", - "name": "closeBtn", - "width": 36, - "height": 36, - "fill": "$bg-interactive", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "CustomerLookupCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ] - } - ] - }, - { - "type": "frame", - "id": "CustomerLookupBody", - "name": "body", - "width": "fill_container", - "layout": "vertical", - "padding": 20, - "gap": 16, - "children": [ - { - "type": "frame", - "id": "CustomerLookupSearchBox", - "name": "searchBox", - "width": "fill_container", - "height": 48, - "fill": "$bg-surface", - "cornerRadius": 12, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "padding": [0, 16], - "gap": 12, - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "CustomerLookupSearchIcon", "width": 20, "height": 20, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "CustomerLookupSearchText", "fill": "$text-primary", "content": "0912", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "normal"}, - {"type": "frame", "id": "CustomerLookupSearchSpacer", "width": "fill_container", "height": 1}, - {"type": "icon_font", "id": "CustomerLookupClearIcon", "width": 18, "height": 18, "iconFontName": "x-circle", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ] - }, - { - "type": "frame", - "id": "CustomerLookupResults", - "name": "results", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "CustomerResult1", - "name": "customerResult1", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 12, - "stroke": {"thickness": 2, "fill": "$orange-primary"}, - "padding": 16, - "gap": 14, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CustomerResult1Avatar", - "name": "avatar", - "width": 44, - "height": 44, - "fill": "#3B82F630", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "text", "id": "CustomerResult1Initials", "fill": "#3B82F6", "content": "NH", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"} - ] - }, - { - "type": "frame", - "id": "CustomerResult1Info", - "name": "info", - "layout": "vertical", - "gap": 4, - "width": "fill_container", - "children": [ - {"type": "text", "id": "CustomerResult1Name", "fill": "$text-primary", "content": "Nguyễn Hồng", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"}, - {"type": "text", "id": "CustomerResult1Phone", "fill": "$text-secondary", "content": "0912 345 678", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"} - ] - }, - { - "type": "frame", - "id": "CustomerResult1Points", - "name": "points", - "fill": "#22C55E18", - "cornerRadius": 8, - "padding": [6, 10], - "children": [ - {"type": "text", "id": "CustomerResult1PointsText", "fill": "$green-success", "content": "120 điểm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ] - } - ] - }, - { - "type": "frame", - "id": "CustomerResult2", - "name": "customerResult2", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 12, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "padding": 16, - "gap": 14, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CustomerResult2Avatar", - "name": "avatar", - "width": 44, - "height": 44, - "fill": "#8B5CF630", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "text", "id": "CustomerResult2Initials", "fill": "#8B5CF6", "content": "TL", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"} - ] - }, - { - "type": "frame", - "id": "CustomerResult2Info", - "name": "info", - "layout": "vertical", - "gap": 4, - "width": "fill_container", - "children": [ - {"type": "text", "id": "CustomerResult2Name", "fill": "$text-primary", "content": "Trần Linh", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"}, - {"type": "text", "id": "CustomerResult2Phone", "fill": "$text-secondary", "content": "0912 888 999", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"} - ] - }, - { - "type": "frame", - "id": "CustomerResult2Points", - "name": "points", - "fill": "$bg-interactive", - "cornerRadius": 8, - "padding": [6, 10], - "children": [ - {"type": "text", "id": "CustomerResult2PointsText", "fill": "$text-secondary", "content": "45 điểm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "CustomerLookupAddNew", - "name": "addNewBtn", - "width": "fill_container", - "height": 48, - "cornerRadius": 12, - "stroke": {"thickness": 1, "fill": "$border-default", "style": "dashed"}, - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "CustomerLookupAddIcon", "width": 18, "height": 18, "iconFontName": "user-plus", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "CustomerLookupAddText", "fill": "$text-secondary", "content": "Thêm khách hàng mới", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ] - } - ] - }, - { - "type": "frame", - "id": "CustomerLookupActions", - "name": "actions", - "width": "fill_container", - "padding": [16, 20], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, - "gap": 12, - "children": [ - { - "type": "frame", - "id": "CustomerLookupSkipBtn", - "name": "skipBtn", - "width": "fill_container", - "height": 48, - "cornerRadius": 12, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "text", "id": "CustomerLookupSkipText", "fill": "$text-secondary", "content": "Bỏ qua", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"} - ] - }, - { - "type": "frame", - "id": "CustomerLookupConfirmBtn", - "name": "confirmBtn", - "width": "fill_container", - "height": 48, - "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, - "cornerRadius": 12, - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "CustomerLookupConfirmIcon", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "CustomerLookupConfirmText", "fill": "$text-primary", "content": "Chọn khách hàng", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ] - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "CustomerAddSection", - "name": "Customer Add Form Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "CustomerAddHeader", - "name": "customerAddSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CustomerAddBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [6, 14], - "children": [ - { - "type": "text", - "id": "CustomerAddBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "ADD CUSTOMER", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "CustomerAddTitle", - "name": "shTitle", - "fill": "$text-primary", - "content": "New Customer Form", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - } - ] - }, - { - "type": "frame", - "id": "CustomerAddExample", - "name": "customerAddExample", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "padding": 40, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "CustomerAddModal", - "name": "Organism/CustomerLookup/AddForm", - "reusable": true, - "width": 480, - "fill": "$bg-elevated", - "cornerRadius": 20, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "CustomerAddTopBar", - "name": "topBar", - "width": "fill_container", - "padding": [16, 20], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CustomerAddBackBtn", - "name": "backBtn", - "gap": 8, - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "CustomerAddBackIcon", "width": 20, "height": 20, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "CustomerAddModalTitle", "fill": "$text-primary", "content": "Thêm khách hàng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"} - ] - }, - { - "type": "frame", - "id": "CustomerAddCloseBtn2", - "name": "closeBtn", - "width": 36, - "height": 36, - "fill": "$bg-interactive", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "CustomerAddCloseIcon2", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ] - } - ] - }, - { - "type": "frame", - "id": "CustomerAddBody", - "name": "body", - "width": "fill_container", - "layout": "vertical", - "padding": 20, - "gap": 16, - "children": [ - { - "type": "frame", - "id": "CustomerAddFieldName", - "name": "fieldName", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - {"type": "text", "id": "CustomerAddLabelName", "fill": "$text-secondary", "content": "Họ và tên *", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - { - "type": "frame", - "id": "CustomerAddInputName", - "name": "inputName", - "width": "fill_container", - "height": 48, - "fill": "$bg-surface", - "cornerRadius": 12, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "padding": [0, 16], - "alignItems": "center", - "children": [ - {"type": "text", "id": "CustomerAddInputNameText", "fill": "$text-tertiary", "content": "Nhập họ và tên khách hàng", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "normal"} - ] - } - ] - }, - { - "type": "frame", - "id": "CustomerAddFieldPhone", - "name": "fieldPhone", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - {"type": "text", "id": "CustomerAddLabelPhone", "fill": "$text-secondary", "content": "Số điện thoại *", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - { - "type": "frame", - "id": "CustomerAddInputPhone", - "name": "inputPhone", - "width": "fill_container", - "height": 48, - "fill": "$bg-surface", - "cornerRadius": 12, - "stroke": {"thickness": 1, "fill": "$orange-primary"}, - "padding": [0, 16], - "alignItems": "center", - "children": [ - {"type": "text", "id": "CustomerAddInputPhoneText", "fill": "$text-primary", "content": "0987 654 321", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "normal"} - ] - } - ] - }, - { - "type": "frame", - "id": "CustomerAddFieldEmail", - "name": "fieldEmail", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - {"type": "text", "id": "CustomerAddLabelEmail", "fill": "$text-secondary", "content": "Email (tùy chọn)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - { - "type": "frame", - "id": "CustomerAddInputEmail", - "name": "inputEmail", - "width": "fill_container", - "height": 48, - "fill": "$bg-surface", - "cornerRadius": 12, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "padding": [0, 16], - "alignItems": "center", - "children": [ - {"type": "text", "id": "CustomerAddInputEmailText", "fill": "$text-tertiary", "content": "email@example.com", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "normal"} - ] - } - ] - }, - { - "type": "frame", - "id": "CustomerAddFieldNote", - "name": "fieldNote", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - {"type": "text", "id": "CustomerAddLabelNote", "fill": "$text-secondary", "content": "Ghi chú", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - { - "type": "frame", - "id": "CustomerAddInputNote", - "name": "inputNote", - "width": "fill_container", - "height": 80, - "fill": "$bg-surface", - "cornerRadius": 12, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "padding": 16, - "children": [ - {"type": "text", "id": "CustomerAddInputNoteText", "fill": "$text-tertiary", "content": "Thêm ghi chú về khách hàng...", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "normal"} - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "CustomerAddActions", - "name": "actions", - "width": "fill_container", - "padding": [16, 20], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, - "gap": 12, - "children": [ - { - "type": "frame", - "id": "CustomerAddCancelBtn", - "name": "cancelBtn", - "width": "fill_container", - "height": 48, - "cornerRadius": 12, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "text", "id": "CustomerAddCancelText", "fill": "$text-secondary", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"} - ] - }, - { - "type": "frame", - "id": "CustomerAddSaveBtn", - "name": "saveBtn", - "width": "fill_container", - "height": 48, - "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, - "cornerRadius": 12, - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "CustomerAddSaveIcon", "width": 18, "height": 18, "iconFontName": "save", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "CustomerAddSaveText", "fill": "$text-primary", "content": "Lưu khách hàng", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ] - } - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "bg-surface": {"type": "color", "value": "#111113"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "green-success": {"type": "color", "value": "#22C55E"}, - "orange-light": {"type": "color", "value": "#FF8A4C"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/organisms/pos/order-panel.pen b/pencil-design/src/organisms/pos/order-panel.pen deleted file mode 100644 index 12dc3527..00000000 --- a/pencil-design/src/organisms/pos/order-panel.pen +++ /dev/null @@ -1,561 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "name": "Order Panel Showcase", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 80, - "padding": [80, 120], - "children": [ - { - "type": "frame", - "id": "OrderPanelSection", - "name": "Order Panel Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "OrderPanelHeader", - "name": "orderPanelSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "OrderPanelBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [6, 14], - "children": [ - { - "type": "text", - "id": "OrderPanelBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "ORDER PANEL", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "OrderPanelTitle", - "name": "shTitle", - "fill": "$text-primary", - "content": "POS Order Management Panel", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - } - ] - }, - { - "type": "frame", - "id": "OrderPanelExamples", - "name": "orderPanelExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "padding": 40, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "OrderPanelFull", - "name": "Organism/OrderPanel/Full", - "reusable": true, - "width": 420, - "height": 720, - "fill": "$bg-elevated", - "cornerRadius": 20, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "OrderPanelTopBar", - "name": "topBar", - "width": "fill_container", - "padding": [16, 20], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "OrderPanelOrderInfo", - "name": "orderInfo", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "OrderPanelOrderNum", - "name": "orderNumber", - "fill": "$text-primary", - "content": "Đơn #0042", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "OrderPanelTableInfo", - "name": "tableInfo", - "fill": "$text-secondary", - "content": "Bàn 12 • 3 món", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "OrderPanelActions", - "name": "actions", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "OrderPanelBtnHold", - "name": "holdBtn", - "width": 40, - "height": 40, - "fill": "$bg-interactive", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "OrderPanelHoldIcon", "width": 20, "height": 20, "iconFontName": "pause", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ] - }, - { - "type": "frame", - "id": "OrderPanelBtnMore", - "name": "moreBtn", - "width": 40, - "height": 40, - "fill": "$bg-interactive", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "OrderPanelMoreIcon", "width": 20, "height": 20, "iconFontName": "more-vertical", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "OrderPanelItemsList", - "name": "itemsList", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "gap": 0, - "children": [ - { - "type": "frame", - "id": "OrderPanelItem1", - "name": "orderItem1", - "width": "fill_container", - "padding": [14, 20], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "OrderPanelItem1Left", - "name": "leftContent", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "OrderPanelItem1Qty", - "name": "qtyBadge", - "width": 32, - "height": 32, - "fill": "$bg-interactive", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "text", "id": "OrderPanelItem1QtyText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ] - }, - { - "type": "frame", - "id": "OrderPanelItem1Info", - "name": "itemInfo", - "layout": "vertical", - "gap": 2, - "children": [ - {"type": "text", "id": "OrderPanelItem1Name", "fill": "$text-primary", "content": "Cà Phê Sữa Đá", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "OrderPanelItem1Note", "fill": "$text-tertiary", "content": "Ít đường", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ] - } - ] - }, - {"type": "text", "id": "OrderPanelItem1Price", "fill": "$text-primary", "content": "58,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ] - }, - { - "type": "frame", - "id": "OrderPanelItem2", - "name": "orderItem2", - "width": "fill_container", - "padding": [14, 20], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "OrderPanelItem2Left", - "name": "leftContent", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "OrderPanelItem2Qty", - "name": "qtyBadge", - "width": 32, - "height": 32, - "fill": "$bg-interactive", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "text", "id": "OrderPanelItem2QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ] - }, - { - "type": "text", - "id": "OrderPanelItem2Name", - "fill": "$text-primary", - "content": "Bánh Mì Thịt Nguội", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - {"type": "text", "id": "OrderPanelItem2Price", "fill": "$text-primary", "content": "45,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ] - }, - { - "type": "frame", - "id": "OrderPanelItem3", - "name": "orderItem3", - "width": "fill_container", - "padding": [14, 20], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "OrderPanelItem3Left", - "name": "leftContent", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "OrderPanelItem3Qty", - "name": "qtyBadge", - "width": 32, - "height": 32, - "fill": "$bg-interactive", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "text", "id": "OrderPanelItem3QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ] - }, - { - "type": "text", - "id": "OrderPanelItem3Name", - "fill": "$text-primary", - "content": "Trà Đào Cam Sả", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - {"type": "text", "id": "OrderPanelItem3Price", "fill": "$text-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ] - } - ] - }, - { - "type": "frame", - "id": "OrderPanelSummary", - "name": "summarySection", - "width": "fill_container", - "fill": "$bg-surface", - "layout": "vertical", - "padding": 20, - "gap": 12, - "children": [ - { - "type": "frame", - "id": "OrderPanelSubtotal", - "name": "subtotalRow", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - {"type": "text", "id": "OrderPanelSubtotalLabel", "fill": "$text-secondary", "content": "Tạm tính", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, - {"type": "text", "id": "OrderPanelSubtotalValue", "fill": "$text-secondary", "content": "138,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"} - ] - }, - { - "type": "frame", - "id": "OrderPanelDiscount", - "name": "discountRow", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - {"type": "text", "id": "OrderPanelDiscountLabel", "fill": "$green-success", "content": "Khuyến mãi", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, - {"type": "text", "id": "OrderPanelDiscountValue", "fill": "$green-success", "content": "-10,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"} - ] - }, - { - "type": "frame", - "id": "OrderPanelDivider", - "name": "divider", - "width": "fill_container", - "height": 1, - "fill": "$border-subtle" - }, - { - "type": "frame", - "id": "OrderPanelTotal", - "name": "totalRow", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "text", "id": "OrderPanelTotalLabel", "fill": "$text-primary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "text", "id": "OrderPanelTotalValue", "fill": "$orange-primary", "content": "128,000₫", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"} - ] - } - ] - }, - { - "type": "frame", - "id": "OrderPanelPayBtn", - "name": "payButton", - "width": "fill_container", - "height": 64, - "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, - "justifyContent": "center", - "alignItems": "center", - "gap": 10, - "children": [ - {"type": "icon_font", "id": "OrderPanelPayIcon", "width": 24, "height": 24, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "OrderPanelPayText", "fill": "$text-primary", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"} - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "OrderPanelVariantsSection", - "name": "Order Panel Variants Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "OrderPanelVariantsHeader", - "name": "variantsSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "OrderPanelVariantsBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [6, 14], - "children": [ - { - "type": "text", - "id": "OrderPanelVariantsBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "STATES", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "OrderPanelVariantsTitle", - "name": "shTitle", - "fill": "$text-primary", - "content": "Order Panel States", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - } - ] - }, - { - "type": "frame", - "id": "OrderPanelVariantsExamples", - "name": "variantsExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "padding": 40, - "gap": 32, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "OrderPanelEmpty", - "name": "Organism/OrderPanel/Empty", - "reusable": true, - "width": 360, - "height": 400, - "fill": "$bg-elevated", - "cornerRadius": 20, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "gap": 16, - "children": [ - {"type": "icon_font", "id": "OrderPanelEmptyIcon", "width": 64, "height": 64, "iconFontName": "shopping-cart", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "OrderPanelEmptyTitle", "fill": "$text-secondary", "content": "Chưa có món", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "500"}, - {"type": "text", "id": "OrderPanelEmptyDesc", "fill": "$text-tertiary", "content": "Chọn sản phẩm để thêm vào đơn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"} - ] - }, - { - "type": "frame", - "id": "OrderPanelCompact", - "name": "Organism/OrderPanel/Compact", - "reusable": true, - "width": 360, - "height": 400, - "fill": "$bg-elevated", - "cornerRadius": 20, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "OrderPanelCompactHeader", - "name": "header", - "width": "fill_container", - "padding": [14, 20], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "text", "id": "OrderPanelCompactTitle", "fill": "$text-primary", "content": "Đơn #0043", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - { - "type": "frame", - "id": "OrderPanelCompactBadge", - "name": "itemCount", - "fill": "$orange-primary", - "cornerRadius": 100, - "padding": [4, 10], - "children": [ - {"type": "text", "id": "OrderPanelCompactCount", "fill": "$text-primary", "content": "5 món", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ] - } - ] - }, - { - "type": "frame", - "id": "OrderPanelCompactItems", - "name": "itemsList", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "padding": [12, 20], - "gap": 8, - "children": [ - {"type": "text", "id": "OrderPanelCompactItem1", "fill": "$text-secondary", "content": "2x Cà Phê Sữa Đá", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}, - {"type": "text", "id": "OrderPanelCompactItem2", "fill": "$text-secondary", "content": "1x Bánh Mì Thịt Nguội", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}, - {"type": "text", "id": "OrderPanelCompactItem3", "fill": "$text-secondary", "content": "2x Trà Đào Cam Sả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"} - ] - }, - { - "type": "frame", - "id": "OrderPanelCompactFooter", - "name": "footer", - "width": "fill_container", - "fill": "$bg-surface", - "padding": [16, 20], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "text", "id": "OrderPanelCompactTotalLabel", "fill": "$text-primary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "OrderPanelCompactTotalValue", "fill": "$orange-primary", "content": "198,000₫", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"} - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "bg-surface": {"type": "color", "value": "#111113"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "green-success": {"type": "color", "value": "#22C55E"}, - "orange-light": {"type": "color", "value": "#FF8A4C"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-disabled": {"type": "color", "value": "#6B6B70"}, - "text-muted": {"type": "color", "value": "#FFFFFFCC"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/organisms/pos/payment-modal.pen b/pencil-design/src/organisms/pos/payment-modal.pen deleted file mode 100644 index 6dbe5545..00000000 --- a/pencil-design/src/organisms/pos/payment-modal.pen +++ /dev/null @@ -1,533 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "name": "Payment Modal Showcase", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 80, - "padding": [80, 120], - "children": [ - { - "type": "frame", - "id": "PaymentModalSection", - "name": "Payment Modal Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "PaymentModalHeader", - "name": "paymentModalSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PaymentModalBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [6, 14], - "children": [ - { - "type": "text", - "id": "PaymentModalBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "PAYMENT MODAL", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "PaymentModalTitle", - "name": "shTitle", - "fill": "$text-primary", - "content": "Payment Flow Dialog", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - } - ] - }, - { - "type": "frame", - "id": "PaymentModalExample", - "name": "paymentModalExample", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "padding": 40, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "PaymentModalFull", - "name": "Organism/PaymentModal/Full", - "reusable": true, - "width": 520, - "fill": "$bg-elevated", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "PaymentModalTopBar", - "name": "topBar", - "width": "fill_container", - "padding": [20, 24], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "text", "id": "PaymentModalTopTitle", "fill": "$text-primary", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}, - { - "type": "frame", - "id": "PaymentModalCloseBtn", - "name": "closeBtn", - "width": 40, - "height": 40, - "fill": "$bg-interactive", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "PaymentModalCloseIcon", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ] - } - ] - }, - { - "type": "frame", - "id": "PaymentModalBody", - "name": "body", - "width": "fill_container", - "layout": "vertical", - "padding": 24, - "gap": 24, - "children": [ - { - "type": "frame", - "id": "PaymentModalAmount", - "name": "amountSection", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "layout": "vertical", - "padding": 20, - "gap": 8, - "alignItems": "center", - "children": [ - {"type": "text", "id": "PaymentModalAmountLabel", "fill": "$text-secondary", "content": "Tổng thanh toán", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, - {"type": "text", "id": "PaymentModalAmountValue", "fill": "$orange-primary", "content": "128,000₫", "fontFamily": "Roboto", "fontSize": 42, "fontWeight": "700"} - ] - }, - { - "type": "frame", - "id": "PaymentModalMethods", - "name": "methodsSection", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - {"type": "text", "id": "PaymentModalMethodsLabel", "fill": "$text-secondary", "content": "Phương thức thanh toán", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - { - "type": "frame", - "id": "PaymentModalMethodsGrid", - "name": "methodsGrid", - "width": "fill_container", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "PayMethodCash", - "name": "cashMethod", - "width": "fill_container", - "height": 80, - "fill": "$bg-surface", - "cornerRadius": 14, - "stroke": {"thickness": 2, "fill": "$orange-primary"}, - "layout": "vertical", - "gap": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "PayMethodCashIcon", "width": 28, "height": 28, "iconFontName": "banknote", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "text", "id": "PayMethodCashText", "fill": "$text-primary", "content": "Tiền mặt", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ] - }, - { - "type": "frame", - "id": "PayMethodCard", - "name": "cardMethod", - "width": "fill_container", - "height": 80, - "fill": "$bg-surface", - "cornerRadius": 14, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "layout": "vertical", - "gap": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "PayMethodCardIcon", "width": 28, "height": 28, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "PayMethodCardText", "fill": "$text-secondary", "content": "Thẻ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ] - }, - { - "type": "frame", - "id": "PayMethodQR", - "name": "qrMethod", - "width": "fill_container", - "height": 80, - "fill": "$bg-surface", - "cornerRadius": 14, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "layout": "vertical", - "gap": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "PayMethodQRIcon", "width": 28, "height": 28, "iconFontName": "qr-code", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "PayMethodQRText", "fill": "$text-secondary", "content": "QR Code", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PaymentModalCashInput", - "name": "cashInputSection", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - {"type": "text", "id": "PaymentModalCashLabel", "fill": "$text-secondary", "content": "Tiền khách đưa", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - { - "type": "frame", - "id": "PaymentModalCashField", - "name": "cashField", - "width": "fill_container", - "height": 56, - "fill": "$bg-surface", - "cornerRadius": 12, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "padding": [0, 20], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "text", "id": "PaymentModalCashValue", "fill": "$text-primary", "content": "200,000", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"}, - {"type": "text", "id": "PaymentModalCashCurrency", "fill": "$text-tertiary", "content": "₫", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "normal"} - ] - }, - { - "type": "frame", - "id": "PaymentModalQuickAmounts", - "name": "quickAmounts", - "width": "fill_container", - "gap": 8, - "children": [ - {"type": "frame", "id": "QuickAmt50", "name": "amt50k", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [10, 16], "children": [{"type": "text", "id": "QuickAmt50Text", "fill": "$text-secondary", "content": "50K", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "QuickAmt100", "name": "amt100k", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [10, 16], "children": [{"type": "text", "id": "QuickAmt100Text", "fill": "$text-secondary", "content": "100K", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "QuickAmt200", "name": "amt200k", "fill": "$orange-primary", "cornerRadius": 8, "padding": [10, 16], "children": [{"type": "text", "id": "QuickAmt200Text", "fill": "$text-primary", "content": "200K", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, - {"type": "frame", "id": "QuickAmt500", "name": "amt500k", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [10, 16], "children": [{"type": "text", "id": "QuickAmt500Text", "fill": "$text-secondary", "content": "500K", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "QuickAmtExact", "name": "amtExact", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [10, 16], "children": [{"type": "text", "id": "QuickAmtExactText", "fill": "$text-secondary", "content": "Đủ tiền", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]} - ] - } - ] - }, - { - "type": "frame", - "id": "PaymentModalChange", - "name": "changeSection", - "width": "fill_container", - "fill": "#22C55E18", - "cornerRadius": 12, - "padding": [16, 20], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "text", "id": "PaymentModalChangeLabel", "fill": "$green-success", "content": "Tiền thối lại", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"}, - {"type": "text", "id": "PaymentModalChangeValue", "fill": "$green-success", "content": "72,000₫", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"} - ] - } - ] - }, - { - "type": "frame", - "id": "PaymentModalActions", - "name": "actions", - "width": "fill_container", - "padding": 24, - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, - "gap": 12, - "children": [ - { - "type": "frame", - "id": "PaymentModalCancelBtn", - "name": "cancelBtn", - "width": "fill_container", - "height": 52, - "cornerRadius": 12, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "text", "id": "PaymentModalCancelText", "fill": "$text-secondary", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "500"} - ] - }, - { - "type": "frame", - "id": "PaymentModalConfirmBtn", - "name": "confirmBtn", - "width": "fill_container", - "height": 52, - "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, - "cornerRadius": 12, - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "PaymentModalConfirmIcon", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "PaymentModalConfirmText", "fill": "$text-primary", "content": "Xác nhận thanh toán", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"} - ] - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PaymentSuccessSection", - "name": "Payment Success Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "PaymentSuccessHeader", - "name": "paymentSuccessSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PaymentSuccessBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [6, 14], - "children": [ - { - "type": "text", - "id": "PaymentSuccessBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "SUCCESS STATE", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "PaymentSuccessTitle", - "name": "shTitle", - "fill": "$text-primary", - "content": "Payment Confirmation", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - } - ] - }, - { - "type": "frame", - "id": "PaymentSuccessExample", - "name": "paymentSuccessExample", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "padding": 40, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "PaymentSuccessModal", - "name": "Organism/PaymentModal/Success", - "reusable": true, - "width": 420, - "fill": "$bg-elevated", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "layout": "vertical", - "padding": 40, - "gap": 24, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PaymentSuccessIconWrapper", - "name": "iconWrapper", - "width": 80, - "height": 80, - "fill": "#22C55E18", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "PaymentSuccessIcon", "width": 40, "height": 40, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "$green-success"} - ] - }, - { - "type": "frame", - "id": "PaymentSuccessContent", - "name": "content", - "layout": "vertical", - "gap": 8, - "alignItems": "center", - "children": [ - {"type": "text", "id": "PaymentSuccessContentTitle", "fill": "$text-primary", "content": "Thanh toán thành công!", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "600", "textAlign": "center"}, - {"type": "text", "id": "PaymentSuccessContentDesc", "fill": "$text-secondary", "content": "Đơn hàng #0042 đã được thanh toán", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "normal", "textAlign": "center"} - ] - }, - { - "type": "frame", - "id": "PaymentSuccessSummary", - "name": "summary", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 14, - "layout": "vertical", - "padding": 20, - "gap": 12, - "children": [ - { - "type": "frame", - "id": "PaymentSuccessSummaryTotal", - "name": "totalRow", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - {"type": "text", "id": "PaymentSuccessTotalLabel", "fill": "$text-secondary", "content": "Tổng thanh toán", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, - {"type": "text", "id": "PaymentSuccessTotalValue", "fill": "$text-primary", "content": "128,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ] - }, - { - "type": "frame", - "id": "PaymentSuccessSummaryMethod", - "name": "methodRow", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - {"type": "text", "id": "PaymentSuccessMethodLabel", "fill": "$text-secondary", "content": "Phương thức", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, - {"type": "text", "id": "PaymentSuccessMethodValue", "fill": "$text-primary", "content": "Tiền mặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ] - }, - { - "type": "frame", - "id": "PaymentSuccessSummaryChange", - "name": "changeRow", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - {"type": "text", "id": "PaymentSuccessChangeLabel", "fill": "$green-success", "content": "Tiền thối lại", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, - {"type": "text", "id": "PaymentSuccessChangeValue", "fill": "$green-success", "content": "72,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ] - } - ] - }, - { - "type": "frame", - "id": "PaymentSuccessActions", - "name": "actions", - "width": "fill_container", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "PaymentSuccessPrintBtn", - "name": "printBtn", - "width": "fill_container", - "height": 48, - "cornerRadius": 10, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "PaymentSuccessPrintIcon", "width": 18, "height": 18, "iconFontName": "printer", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "PaymentSuccessPrintText", "fill": "$text-secondary", "content": "In hóa đơn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ] - }, - { - "type": "frame", - "id": "PaymentSuccessNewBtn", - "name": "newOrderBtn", - "width": "fill_container", - "height": 48, - "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, - "cornerRadius": 10, - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "PaymentSuccessNewIcon", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "PaymentSuccessNewText", "fill": "$text-primary", "content": "Đơn mới", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ] - } - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "bg-surface": {"type": "color", "value": "#111113"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "green-success": {"type": "color", "value": "#22C55E"}, - "orange-light": {"type": "color", "value": "#FF8A4C"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-disabled": {"type": "color", "value": "#6B6B70"}, - "text-muted": {"type": "color", "value": "#FFFFFFCC"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/organisms/pos/product-grid.pen b/pencil-design/src/organisms/pos/product-grid.pen deleted file mode 100644 index 3ece7973..00000000 --- a/pencil-design/src/organisms/pos/product-grid.pen +++ /dev/null @@ -1,597 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "name": "Product Grid Showcase", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 80, - "padding": [80, 120], - "children": [ - { - "type": "frame", - "id": "ProductGridSection", - "name": "Product Grid Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "ProductGridHeader", - "name": "productGridSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ProductGridBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [6, 14], - "children": [ - { - "type": "text", - "id": "ProductGridBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "PRODUCT GRID", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "ProductGridTitle", - "name": "shTitle", - "fill": "$text-primary", - "content": "POS Product Selection Area", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - } - ] - }, - { - "type": "frame", - "id": "ProductGridExample", - "name": "productGridExample", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "padding": 24, - "children": [ - { - "type": "frame", - "id": "ProductGridFull", - "name": "Organism/ProductGrid/Full", - "reusable": true, - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "ProductGridToolbar", - "name": "toolbar", - "width": "fill_container", - "padding": [16, 20], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ProductGridSearch", - "name": "searchBox", - "width": 320, - "height": 44, - "fill": "$bg-surface", - "cornerRadius": 12, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "padding": [0, 16], - "gap": 12, - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "ProductGridSearchIcon", "width": 20, "height": 20, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "ProductGridSearchText", "fill": "$text-tertiary", "content": "Tìm sản phẩm, mã vạch...", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"} - ] - }, - { - "type": "frame", - "id": "ProductGridScanBtn", - "name": "scanButton", - "height": 44, - "fill": "$bg-interactive", - "cornerRadius": 12, - "padding": [0, 16], - "gap": 8, - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "ProductGridScanIcon", "width": 20, "height": 20, "iconFontName": "scan-barcode", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "ProductGridScanText", "fill": "$text-secondary", "content": "Quét mã", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ] - }, - { - "type": "frame", - "id": "ProductGridViewToggle", - "name": "viewToggle", - "fill": "$bg-surface", - "cornerRadius": 10, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "padding": 4, - "gap": 4, - "children": [ - { - "type": "frame", - "id": "ProductGridViewGrid", - "name": "gridView", - "width": 36, - "height": 36, - "fill": "$bg-interactive", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "ProductGridViewGridIcon", "width": 18, "height": 18, "iconFontName": "grid-2x2", "iconFontFamily": "lucide", "fill": "$text-primary"} - ] - }, - { - "type": "frame", - "id": "ProductGridViewList", - "name": "listView", - "width": 36, - "height": 36, - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "ProductGridViewListIcon", "width": 18, "height": 18, "iconFontName": "list", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ProductGridCategories", - "name": "categoriesBar", - "width": "fill_container", - "padding": [12, 20], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "gap": 12, - "children": [ - { - "type": "frame", - "id": "ProductGridCatAll", - "name": "catAll", - "fill": "$orange-primary", - "cornerRadius": 100, - "padding": [10, 20], - "children": [ - {"type": "text", "id": "ProductGridCatAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ] - }, - { - "type": "frame", - "id": "ProductGridCatDrinks", - "name": "catDrinks", - "fill": "$bg-interactive", - "cornerRadius": 100, - "padding": [10, 20], - "children": [ - {"type": "text", "id": "ProductGridCatDrinksText", "fill": "$text-secondary", "content": "Đồ uống", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ] - }, - { - "type": "frame", - "id": "ProductGridCatFood", - "name": "catFood", - "fill": "$bg-interactive", - "cornerRadius": 100, - "padding": [10, 20], - "children": [ - {"type": "text", "id": "ProductGridCatFoodText", "fill": "$text-secondary", "content": "Thức ăn", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ] - }, - { - "type": "frame", - "id": "ProductGridCatDesserts", - "name": "catDesserts", - "fill": "$bg-interactive", - "cornerRadius": 100, - "padding": [10, 20], - "children": [ - {"type": "text", "id": "ProductGridCatDessertsText", "fill": "$text-secondary", "content": "Tráng miệng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ] - }, - { - "type": "frame", - "id": "ProductGridCatCombo", - "name": "catCombo", - "fill": "$bg-interactive", - "cornerRadius": 100, - "padding": [10, 20], - "children": [ - {"type": "text", "id": "ProductGridCatComboText", "fill": "$text-secondary", "content": "Combo", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ] - } - ] - }, - { - "type": "frame", - "id": "ProductGridContent", - "name": "productsGrid", - "width": "fill_container", - "padding": 20, - "gap": 16, - "wrap": true, - "children": [ - { - "type": "frame", - "id": "PGridCard1", - "name": "productCard1", - "width": 160, - "fill": "$bg-surface", - "cornerRadius": 14, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "layout": "vertical", - "clip": true, - "children": [ - {"type": "frame", "id": "PGridCard1Img", "name": "img", "width": "fill_container", "height": 110, "fill": "#3B82F618"}, - { - "type": "frame", - "id": "PGridCard1Content", - "name": "content", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "padding": 14, - "children": [ - {"type": "text", "id": "PGridCard1Name", "fill": "$text-primary", "content": "Cà Phê Sữa Đá", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "PGridCard1Price", "fill": "$orange-primary", "content": "29,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ] - } - ] - }, - { - "type": "frame", - "id": "PGridCard2", - "name": "productCard2", - "width": 160, - "fill": "$bg-surface", - "cornerRadius": 14, - "stroke": {"thickness": 2, "fill": "$orange-primary"}, - "layout": "vertical", - "clip": true, - "children": [ - {"type": "frame", "id": "PGridCard2Img", "name": "img", "width": "fill_container", "height": 110, "fill": "#22C55E18"}, - { - "type": "frame", - "id": "PGridCard2Content", - "name": "content", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "padding": 14, - "children": [ - {"type": "text", "id": "PGridCard2Name", "fill": "$text-primary", "content": "Trà Đào Cam Sả", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "PGridCard2Price", "fill": "$orange-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ] - } - ] - }, - { - "type": "frame", - "id": "PGridCard3", - "name": "productCard3", - "width": 160, - "fill": "$bg-surface", - "cornerRadius": 14, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "layout": "vertical", - "clip": true, - "children": [ - {"type": "frame", "id": "PGridCard3Img", "name": "img", "width": "fill_container", "height": 110, "fill": "#F59E0B18"}, - { - "type": "frame", - "id": "PGridCard3Content", - "name": "content", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "padding": 14, - "children": [ - {"type": "text", "id": "PGridCard3Name", "fill": "$text-primary", "content": "Bánh Mì Thịt Nguội", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "PGridCard3Price", "fill": "$orange-primary", "content": "45,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ] - } - ] - }, - { - "type": "frame", - "id": "PGridCard4", - "name": "productCard4", - "width": 160, - "fill": "$bg-surface", - "cornerRadius": 14, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "layout": "vertical", - "clip": true, - "children": [ - {"type": "frame", "id": "PGridCard4Img", "name": "img", "width": "fill_container", "height": 110, "fill": "#8B5CF618"}, - { - "type": "frame", - "id": "PGridCard4Content", - "name": "content", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "padding": 14, - "children": [ - {"type": "text", "id": "PGridCard4Name", "fill": "$text-primary", "content": "Matcha Latte", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "PGridCard4Price", "fill": "$orange-primary", "content": "42,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ] - } - ] - }, - { - "type": "frame", - "id": "PGridCard5", - "name": "productCard5", - "width": 160, - "fill": "$bg-surface", - "cornerRadius": 14, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "layout": "vertical", - "clip": true, - "children": [ - {"type": "frame", "id": "PGridCard5Img", "name": "img", "width": "fill_container", "height": 110, "fill": "#EC489918"}, - { - "type": "frame", - "id": "PGridCard5Content", - "name": "content", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "padding": 14, - "children": [ - {"type": "text", "id": "PGridCard5Name", "fill": "$text-primary", "content": "Sinh Tố Dâu", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "PGridCard5Price", "fill": "$orange-primary", "content": "38,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ] - } - ] - }, - { - "type": "frame", - "id": "PGridCard6", - "name": "productCard6", - "width": 160, - "fill": "$bg-surface", - "cornerRadius": 14, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "layout": "vertical", - "clip": true, - "opacity": 0.5, - "children": [ - { - "type": "frame", - "id": "PGridCard6Img", - "name": "img", - "width": "fill_container", - "height": 110, - "fill": "$bg-interactive", - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "text", "id": "PGridCard6OOS", "fill": "$text-disabled", "content": "Hết hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ] - }, - { - "type": "frame", - "id": "PGridCard6Content", - "name": "content", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "padding": 14, - "children": [ - {"type": "text", "id": "PGridCard6Name", "fill": "$text-disabled", "content": "Sinh Tố Bơ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "PGridCard6Price", "fill": "$text-disabled", "content": "45,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ] - } - ]} - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "CategoryTabsSection", - "name": "Category Tabs Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "CategoryTabsHeader", - "name": "categoryTabsSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CategoryTabsBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [6, 14], - "children": [ - { - "type": "text", - "id": "CategoryTabsBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "CATEGORY TABS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "CategoryTabsTitle", - "name": "shTitle", - "fill": "$text-primary", - "content": "Vertical Category Navigation", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - } - ] - }, - { - "type": "frame", - "id": "CategoryTabsExample", - "name": "categoryTabsExample", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "padding": 40, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "CategoryTabsVertical", - "name": "Organism/CategoryTabs/Vertical", - "reusable": true, - "width": 200, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "layout": "vertical", - "padding": 12, - "gap": 8, - "children": [ - { - "type": "frame", - "id": "CategoryTabAll", - "name": "tabAll", - "width": "fill_container", - "fill": "$orange-primary", - "cornerRadius": 12, - "padding": [14, 16], - "gap": 12, - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "CategoryTabAllIcon", "width": 20, "height": 20, "iconFontName": "layout-grid", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "CategoryTabAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ] - }, - { - "type": "frame", - "id": "CategoryTabDrinks", - "name": "tabDrinks", - "width": "fill_container", - "cornerRadius": 12, - "padding": [14, 16], - "gap": 12, - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "CategoryTabDrinksIcon", "width": 20, "height": 20, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "CategoryTabDrinksText", "fill": "$text-secondary", "content": "Đồ uống", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ] - }, - { - "type": "frame", - "id": "CategoryTabFood", - "name": "tabFood", - "width": "fill_container", - "cornerRadius": 12, - "padding": [14, 16], - "gap": 12, - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "CategoryTabFoodIcon", "width": 20, "height": 20, "iconFontName": "utensils", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "CategoryTabFoodText", "fill": "$text-secondary", "content": "Thức ăn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ] - }, - { - "type": "frame", - "id": "CategoryTabDesserts", - "name": "tabDesserts", - "width": "fill_container", - "cornerRadius": 12, - "padding": [14, 16], - "gap": 12, - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "CategoryTabDessertsIcon", "width": 20, "height": 20, "iconFontName": "cake-slice", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "CategoryTabDessertsText", "fill": "$text-secondary", "content": "Tráng miệng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ] - }, - { - "type": "frame", - "id": "CategoryTabCombo", - "name": "tabCombo", - "width": "fill_container", - "cornerRadius": 12, - "padding": [14, 16], - "gap": 12, - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "CategoryTabComboIcon", "width": 20, "height": 20, "iconFontName": "package", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "CategoryTabComboText", "fill": "$text-secondary", "content": "Combo", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "bg-surface": {"type": "color", "value": "#111113"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "green-success": {"type": "color", "value": "#22C55E"}, - "orange-light": {"type": "color", "value": "#FF8A4C"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-disabled": {"type": "color", "value": "#6B6B70"}, - "text-muted": {"type": "color", "value": "#FFFFFFCC"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/organisms/pos/quick-actions.pen b/pencil-design/src/organisms/pos/quick-actions.pen deleted file mode 100644 index 50b932cb..00000000 --- a/pencil-design/src/organisms/pos/quick-actions.pen +++ /dev/null @@ -1,426 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "name": "Quick Actions Showcase", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 80, - "padding": [80, 120], - "children": [ - { - "type": "frame", - "id": "QuickActionsSection", - "name": "Quick Actions Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "QuickActionsHeader", - "name": "quickActionsSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "QuickActionsBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [6, 14], - "children": [ - { - "type": "text", - "id": "QuickActionsBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "QUICK ACTIONS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "QuickActionsTitle", - "name": "shTitle", - "fill": "$text-primary", - "content": "POS Action Toolbar", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - } - ] - }, - { - "type": "frame", - "id": "QuickActionsExample", - "name": "quickActionsExample", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "padding": 40, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "QuickActionsBar", - "name": "Organism/QuickActions/Bar", - "reusable": true, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "padding": 16, - "gap": 12, - "children": [ - { - "type": "frame", - "id": "QABtnNewOrder", - "name": "newOrderBtn", - "width": 100, - "height": 90, - "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, - "cornerRadius": 14, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "QABtnNewOrderIcon", "width": 28, "height": 28, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "QABtnNewOrderText", "fill": "$text-primary", "content": "Đơn mới", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ] - }, - { - "type": "frame", - "id": "QABtnHold", - "name": "holdBtn", - "width": 100, - "height": 90, - "fill": "$bg-interactive", - "cornerRadius": 14, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "QABtnHoldIcon", "width": 28, "height": 28, "iconFontName": "pause", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "QABtnHoldText", "fill": "$text-secondary", "content": "Tạm giữ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ] - }, - { - "type": "frame", - "id": "QABtnRecall", - "name": "recallBtn", - "width": 100, - "height": 90, - "fill": "$bg-interactive", - "cornerRadius": 14, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "QABtnRecallBadge", - "name": "badge", - "fill": "#EF4444", - "cornerRadius": 100, - "padding": [2, 6], - "position": "absolute", - "x": 70, - "y": 8, - "children": [ - {"type": "text", "id": "QABtnRecallBadgeText", "fill": "#FFFFFF", "content": "3", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"} - ] - }, - {"type": "icon_font", "id": "QABtnRecallIcon", "width": 28, "height": 28, "iconFontName": "clipboard-list", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "QABtnRecallText", "fill": "$text-secondary", "content": "Đơn chờ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ] - }, - { - "type": "frame", - "id": "QABtnDiscount", - "name": "discountBtn", - "width": 100, - "height": 90, - "fill": "$bg-interactive", - "cornerRadius": 14, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "QABtnDiscountIcon", "width": 28, "height": 28, "iconFontName": "percent", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "QABtnDiscountText", "fill": "$text-secondary", "content": "Giảm giá", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ] - }, - { - "type": "frame", - "id": "QABtnCustomer", - "name": "customerBtn", - "width": 100, - "height": 90, - "fill": "$bg-interactive", - "cornerRadius": 14, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "QABtnCustomerIcon", "width": 28, "height": 28, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "QABtnCustomerText", "fill": "$text-secondary", "content": "Khách hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ] - }, - { - "type": "frame", - "id": "QABtnPrint", - "name": "printBtn", - "width": 100, - "height": 90, - "fill": "$bg-interactive", - "cornerRadius": 14, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "QABtnPrintIcon", "width": 28, "height": 28, "iconFontName": "printer", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "QABtnPrintText", "fill": "$text-secondary", "content": "In bill", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ] - }, - { - "type": "frame", - "id": "QABtnMore", - "name": "moreBtn", - "width": 100, - "height": 90, - "fill": "$bg-interactive", - "cornerRadius": 14, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "QABtnMoreIcon", "width": 28, "height": 28, "iconFontName": "more-horizontal", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "QABtnMoreText", "fill": "$text-secondary", "content": "Thêm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "QuickActionsVerticalSection", - "name": "Quick Actions Vertical Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "QAVerticalHeader", - "name": "qaVerticalSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "QAVerticalBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [6, 14], - "children": [ - { - "type": "text", - "id": "QAVerticalBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "SIDEBAR ACTIONS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "QAVerticalTitle", - "name": "shTitle", - "fill": "$text-primary", - "content": "Vertical Action Sidebar", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - } - ] - }, - { - "type": "frame", - "id": "QAVerticalExample", - "name": "qaVerticalExample", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "padding": 40, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "QuickActionsSidebar", - "name": "Organism/QuickActions/Sidebar", - "reusable": true, - "width": 72, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "layout": "vertical", - "padding": 12, - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "QASideNewOrder", - "name": "newOrderBtn", - "width": 48, - "height": 48, - "fill": "$orange-primary", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "QASideNewOrderIcon", "width": 22, "height": 22, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"} - ] - }, - { - "type": "frame", - "id": "QASideHold", - "name": "holdBtn", - "width": 48, - "height": 48, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "QASideHoldIcon", "width": 22, "height": 22, "iconFontName": "pause", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ] - }, - { - "type": "frame", - "id": "QASideRecall", - "name": "recallBtn", - "width": 48, - "height": 48, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "QASideRecallIcon", "width": 22, "height": 22, "iconFontName": "clipboard-list", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ] - }, - { - "type": "frame", - "id": "QASideDiscount", - "name": "discountBtn", - "width": 48, - "height": 48, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "QASideDiscountIcon", "width": 22, "height": 22, "iconFontName": "percent", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ] - }, - { - "type": "frame", - "id": "QASideCustomer", - "name": "customerBtn", - "width": 48, - "height": 48, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "QASideCustomerIcon", "width": 22, "height": 22, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ] - }, - { - "type": "frame", - "id": "QASidePrint", - "name": "printBtn", - "width": 48, - "height": 48, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "QASidePrintIcon", "width": 22, "height": 22, "iconFontName": "printer", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ] - }, - { - "type": "frame", - "id": "QASideSpacer", - "name": "spacer", - "width": 1, - "height": "fill_container" - }, - { - "type": "frame", - "id": "QASideSettings", - "name": "settingsBtn", - "width": 48, - "height": 48, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "QASideSettingsIcon", "width": 22, "height": 22, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "bg-surface": {"type": "color", "value": "#111113"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"} - } -} diff --git a/pencil-design/src/organisms/pos/receipt-preview.pen b/pencil-design/src/organisms/pos/receipt-preview.pen deleted file mode 100644 index 4574fc1b..00000000 --- a/pencil-design/src/organisms/pos/receipt-preview.pen +++ /dev/null @@ -1,356 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "name": "Receipt Preview Showcase", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 80, - "padding": [80, 120], - "children": [ - { - "type": "frame", - "id": "ReceiptPreviewSection", - "name": "Receipt Preview Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "ReceiptPreviewHeader", - "name": "receiptPreviewSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ReceiptPreviewBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [6, 14], - "children": [ - { - "type": "text", - "id": "ReceiptPreviewBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "RECEIPT PREVIEW", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "ReceiptPreviewTitle", - "name": "shTitle", - "fill": "$text-primary", - "content": "Bill Receipt Preview", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - } - ] - }, - { - "type": "frame", - "id": "ReceiptPreviewExample", - "name": "receiptPreviewExample", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "padding": 40, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "ReceiptPreviewFull", - "name": "Organism/ReceiptPreview/Full", - "reusable": true, - "width": 340, - "fill": "#FFFFFF", - "cornerRadius": 4, - "layout": "vertical", - "padding": [24, 20], - "gap": 16, - "children": [ - { - "type": "frame", - "id": "ReceiptHeader", - "name": "receiptHeader", - "width": "fill_container", - "layout": "vertical", - "gap": 4, - "alignItems": "center", - "children": [ - {"type": "text", "id": "ReceiptStoreName", "fill": "#111111", "content": "GoodGo Café", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700", "textAlign": "center"}, - {"type": "text", "id": "ReceiptStoreAddr", "fill": "#666666", "content": "123 Nguyễn Huệ, Q.1, TP.HCM", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal", "textAlign": "center"}, - {"type": "text", "id": "ReceiptStorePhone", "fill": "#666666", "content": "Tel: 1900 1234", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal", "textAlign": "center"} - ] - }, - { - "type": "frame", - "id": "ReceiptDivider1", - "name": "divider1", - "width": "fill_container", - "height": 1, - "stroke": {"thickness": 1, "fill": "#CCCCCC", "style": "dashed"} - }, - { - "type": "frame", - "id": "ReceiptInfo", - "name": "receiptInfo", - "width": "fill_container", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "frame", - "id": "ReceiptInfoOrder", - "name": "orderRow", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - {"type": "text", "id": "ReceiptInfoOrderLabel", "fill": "#666666", "content": "Số HĐ:", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, - {"type": "text", "id": "ReceiptInfoOrderValue", "fill": "#111111", "content": "#0042", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ] - }, - { - "type": "frame", - "id": "ReceiptInfoDate", - "name": "dateRow", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - {"type": "text", "id": "ReceiptInfoDateLabel", "fill": "#666666", "content": "Ngày:", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, - {"type": "text", "id": "ReceiptInfoDateValue", "fill": "#111111", "content": "05/02/2026 23:00", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ] - }, - { - "type": "frame", - "id": "ReceiptInfoTable", - "name": "tableRow", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - {"type": "text", "id": "ReceiptInfoTableLabel", "fill": "#666666", "content": "Bàn:", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, - {"type": "text", "id": "ReceiptInfoTableValue", "fill": "#111111", "content": "Bàn 12", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ] - }, - { - "type": "frame", - "id": "ReceiptInfoCashier", - "name": "cashierRow", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - {"type": "text", "id": "ReceiptInfoCashierLabel", "fill": "#666666", "content": "Thu ngân:", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, - {"type": "text", "id": "ReceiptInfoCashierValue", "fill": "#111111", "content": "Minh", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ] - } - ] - }, - { - "type": "frame", - "id": "ReceiptDivider2", - "name": "divider2", - "width": "fill_container", - "height": 1, - "stroke": {"thickness": 1, "fill": "#CCCCCC", "style": "dashed"} - }, - { - "type": "frame", - "id": "ReceiptItems", - "name": "receiptItems", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "ReceiptItem1", - "name": "receiptItem1", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "ReceiptItem1Left", - "name": "leftContent", - "layout": "vertical", - "gap": 2, - "children": [ - {"type": "text", "id": "ReceiptItem1Name", "fill": "#111111", "content": "Cà Phê Sữa Đá x2", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "text", "id": "ReceiptItem1Note", "fill": "#888888", "content": "Ít đường", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"} - ] - }, - {"type": "text", "id": "ReceiptItem1Price", "fill": "#111111", "content": "58,000", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ] - }, - { - "type": "frame", - "id": "ReceiptItem2", - "name": "receiptItem2", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - {"type": "text", "id": "ReceiptItem2Name", "fill": "#111111", "content": "Bánh Mì Thịt Nguội x1", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "text", "id": "ReceiptItem2Price", "fill": "#111111", "content": "45,000", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ] - }, - { - "type": "frame", - "id": "ReceiptItem3", - "name": "receiptItem3", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - {"type": "text", "id": "ReceiptItem3Name", "fill": "#111111", "content": "Trà Đào Cam Sả x1", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "text", "id": "ReceiptItem3Price", "fill": "#111111", "content": "35,000", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ] - } - ] - }, - { - "type": "frame", - "id": "ReceiptDivider3", - "name": "divider3", - "width": "fill_container", - "height": 1, - "stroke": {"thickness": 1, "fill": "#CCCCCC", "style": "dashed"} - }, - { - "type": "frame", - "id": "ReceiptSummary", - "name": "receiptSummary", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "frame", - "id": "ReceiptSummarySubtotal", - "name": "subtotalRow", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - {"type": "text", "id": "ReceiptSubtotalLabel", "fill": "#666666", "content": "Tạm tính:", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}, - {"type": "text", "id": "ReceiptSubtotalValue", "fill": "#111111", "content": "138,000", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ] - }, - { - "type": "frame", - "id": "ReceiptSummaryDiscount", - "name": "discountRow", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - {"type": "text", "id": "ReceiptDiscountLabel", "fill": "#666666", "content": "Giảm giá:", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}, - {"type": "text", "id": "ReceiptDiscountValue", "fill": "#22C55E", "content": "-10,000", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ] - }, - { - "type": "frame", - "id": "ReceiptSummaryTotal", - "name": "totalRow", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - {"type": "text", "id": "ReceiptTotalLabel", "fill": "#111111", "content": "TỔNG CỘNG:", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}, - {"type": "text", "id": "ReceiptTotalValue", "fill": "#111111", "content": "128,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} - ] - } - ] - }, - { - "type": "frame", - "id": "ReceiptDivider4", - "name": "divider4", - "width": "fill_container", - "height": 1, - "stroke": {"thickness": 1, "fill": "#CCCCCC", "style": "dashed"} - }, - { - "type": "frame", - "id": "ReceiptPayment", - "name": "receiptPayment", - "width": "fill_container", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "frame", - "id": "ReceiptPaymentMethod", - "name": "methodRow", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - {"type": "text", "id": "ReceiptPaymentMethodLabel", "fill": "#666666", "content": "Thanh toán:", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, - {"type": "text", "id": "ReceiptPaymentMethodValue", "fill": "#111111", "content": "Tiền mặt", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ] - }, - { - "type": "frame", - "id": "ReceiptPaymentCash", - "name": "cashRow", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - {"type": "text", "id": "ReceiptPaymentCashLabel", "fill": "#666666", "content": "Tiền khách:", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, - {"type": "text", "id": "ReceiptPaymentCashValue", "fill": "#111111", "content": "200,000", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ] - }, - { - "type": "frame", - "id": "ReceiptPaymentChange", - "name": "changeRow", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - {"type": "text", "id": "ReceiptPaymentChangeLabel", "fill": "#666666", "content": "Tiền thối:", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, - {"type": "text", "id": "ReceiptPaymentChangeValue", "fill": "#111111", "content": "72,000", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ] - } - ] - }, - { - "type": "frame", - "id": "ReceiptFooter", - "name": "receiptFooter", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "alignItems": "center", - "children": [ - {"type": "text", "id": "ReceiptThanks", "fill": "#666666", "content": "Cảm ơn quý khách!", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500", "textAlign": "center"}, - {"type": "text", "id": "ReceiptWifi", "fill": "#888888", "content": "WiFi: GoodGo_Guest | Pass: goodgo123", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal", "textAlign": "center"} - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "bg-surface": {"type": "color", "value": "#111113"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"} - } -} diff --git a/pencil-design/src/organisms/vertical-specific/appointment-calendar.pen b/pencil-design/src/organisms/vertical-specific/appointment-calendar.pen deleted file mode 100644 index 5333ac2c..00000000 --- a/pencil-design/src/organisms/vertical-specific/appointment-calendar.pen +++ /dev/null @@ -1,145 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "name": "Appointment Calendar Showcase", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 80, - "padding": [80, 120], - "children": [ - { - "type": "frame", - "id": "AppointmentSection", - "name": "Appointment Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "ApptHeader", - "name": "apptSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ApptBadge", - "name": "shBadge", - "fill": "#14B8A618", - "cornerRadius": 100, - "padding": [6, 14], - "children": [ - {"type": "text", "id": "ApptBadgeText", "name": "badgeText", "fill": "$spa-primary", "content": "💆 APPOINTMENT", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500", "letterSpacing": 2} - ] - }, - {"type": "text", "id": "ApptTitle", "name": "shTitle", "fill": "$text-primary", "content": "Spa Booking Calendar", "textAlign": "center", "fontFamily": "Roboto", "fontSize": 42, "fontWeight": "normal", "letterSpacing": -1}, - {"type": "text", "id": "ApptDesc", "name": "shDesc", "fill": "$text-tertiary", "textGrowth": "fixed-width", "width": 600, "content": "Appointment slots with booking states, therapist assignment, and time tracking.", "lineHeight": 1.6, "textAlign": "center", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "normal"} - ] - }, - { - "type": "frame", - "id": "ApptExamples", - "name": "apptExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "padding": 40, - "gap": 24, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "SlotAvailable", - "name": "Organism/Appointment/Available", - "reusable": true, - "width": 140, - "height": 80, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": {"thickness": 1, "fill": "$border-default", "dashPattern": [4,4]}, - "layout": "vertical", - "gap": 4, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "text", "id": "SlotAvailTime", "name": "slotTime", "fill": "$text-primary", "content": "09:00", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "500"}, - {"type": "text", "id": "SlotAvailLabel", "fill": "$green-success", "content": "Có slot", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ] - }, - { - "type": "frame", - "id": "SlotBooked", - "name": "Organism/Appointment/Booked", - "reusable": true, - "width": 140, - "height": 80, - "fill": "$spa-primary", - "cornerRadius": 12, - "layout": "vertical", - "padding": 12, - "gap": 4, - "alignItems": "flex_start", - "children": [ - {"type": "text", "id": "SlotBookTime", "name": "timeRange", "fill": "$text-muted", "content": "10:00 - 11:30", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}, - {"type": "text", "id": "SlotBookCust", "name": "customerName", "fill": "$text-primary", "content": "Chị Lan", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "SlotBookSvc", "name": "serviceName", "fill": "$text-muted", "content": "Facial 90 phút", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ] - }, - { - "type": "frame", - "id": "SlotInProgress", - "name": "Organism/Appointment/InProgress", - "reusable": true, - "width": 140, - "height": 80, - "fill": "$spa-dark", - "cornerRadius": 12, - "stroke": {"thickness": 2, "fill": "$green-success"}, - "layout": "vertical", - "padding": 12, - "gap": 4, - "alignItems": "flex_start", - "children": [ - { - "type": "frame", - "id": "SlotProgTop", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - {"type": "text", "id": "SlotProgStatus", "fill": "$green-success", "content": "ĐANG LÀM", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}, - {"type": "text", "id": "SlotProgRemain", "fill": "$text-muted", "content": "45p còn", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"} - ] - }, - {"type": "text", "id": "SlotProgCust", "name": "customerName", "fill": "$text-primary", "content": "Chị Hương", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "SlotProgStaff", "name": "therapist", "fill": "$text-muted", "content": "NV: Ngọ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"}, - "bg-surface": {"type": "color", "value": "#111113"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "green-success": {"type": "color", "value": "#22C55E"}, - "spa-dark": {"type": "color", "value": "#0D9488"}, - "spa-primary": {"type": "color", "value": "#14B8A6"}, - "text-muted": {"type": "color", "value": "#FFFFFFCC"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/organisms/vertical-specific/room-grid.pen b/pencil-design/src/organisms/vertical-specific/room-grid.pen deleted file mode 100644 index b818058a..00000000 --- a/pencil-design/src/organisms/vertical-specific/room-grid.pen +++ /dev/null @@ -1,147 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "name": "Room Grid Showcase", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 80, - "padding": [80, 120], - "children": [ - { - "type": "frame", - "id": "RoomGridSection", - "name": "Room Grid Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "RoomGridHeader", - "name": "roomGridSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "RmGridBadge", - "name": "shBadge", - "fill": "#EC489918", - "cornerRadius": 100, - "padding": [6, 14], - "children": [ - {"type": "icon_font", "id": "RmGridBadgeIcon", "iconFontName": "mic", "iconFontFamily": "lucide", "width": 12, "height": 12, "fill": "$karaoke-primary"}, - {"type": "text", "id": "RmGridBadgeText", "name": "badgeText", "fill": "$karaoke-primary", "content": "ROOM GRID", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500", "letterSpacing": 2} - ] - }, - {"type": "text", "id": "RmGridTitle", "name": "shTitle", "fill": "$text-primary", "content": "Karaoke Room Status", "textAlign": "center", "fontFamily": "Roboto", "fontSize": 42, "fontWeight": "normal", "letterSpacing": -1}, - {"type": "text", "id": "RmGridDesc", "name": "shDesc", "fill": "$text-tertiary", "textGrowth": "fixed-width", "width": 600, "content": "Room cards with session timer, billing info, and quick actions for Karaoke POS.", "lineHeight": 1.6, "textAlign": "center", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "normal"} - ] - }, - { - "type": "frame", - "id": "RoomGridExamples", - "name": "roomGridExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "padding": 40, - "gap": 24, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "RoomAvailable", - "name": "Organism/Room/Available", - "reusable": true, - "width": 160, - "height": 120, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": {"thickness": 2, "fill": "$border-default"}, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "RmAvailIcon", "iconFontName": "mic", "iconFontFamily": "lucide", "width": 24, "height": 24, "fill": "$text-secondary"}, - {"type": "text", "id": "RmAvailName", "name": "roomName", "fill": "$text-primary", "content": "Phòng VIP 01", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "text", "id": "RmAvailCap", "name": "capacity", "fill": "$text-secondary", "content": "8-12 người", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ] - }, - { - "type": "frame", - "id": "RoomOccupied", - "name": "Organism/Room/Occupied", - "reusable": true, - "width": 160, - "height": 120, - "fill": "$karaoke-primary", - "cornerRadius": 16, - "layout": "vertical", - "justifyContent": "space_between", - "padding": 12, - "children": [ - { - "type": "frame", - "id": "RmOccTop", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - {"type": "text", "id": "RmOccName", "name": "roomName", "fill": "$text-primary", "content": "VIP 02", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "RmOccTimer", "name": "sessionTimer", "fill": "$text-primary", "content": "01:45:22", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} - ] - }, - { - "type": "frame", - "id": "RmOccMid", - "layout": "vertical", - "gap": 4, - "alignItems": "center", - "children": [ - {"type": "text", "id": "RmOccAmount", "name": "totalAmount", "fill": "$text-primary", "content": "1,250,000đ", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, - {"type": "text", "id": "RmOccRate", "name": "hourlyRate", "fill": "$text-muted", "content": "Giờ: 150K/h", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ] - }, - { - "type": "frame", - "id": "RmOccActions", - "gap": 8, - "justifyContent": "center", - "children": [ - {"type": "frame", "id": "RmOccAddBtn", "width": 60, "height": 28, "fill": "#FFFFFF33", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "RmOccAddTxt", "fill": "$text-primary", "content": "+ Thêm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "RmOccEndBtn", "width": 60, "height": 28, "fill": "#FFFFFF33", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "RmOccEndTxt", "fill": "$text-primary", "content": "Kết thúc", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]} - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "bg-surface": {"type": "color", "value": "#111113"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "karaoke-primary": {"type": "color", "value": "#EC4899"}, - "text-muted": {"type": "color", "value": "#FFFFFFCC"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/organisms/vertical-specific/service-display.pen b/pencil-design/src/organisms/vertical-specific/service-display.pen deleted file mode 100644 index 03468df9..00000000 --- a/pencil-design/src/organisms/vertical-specific/service-display.pen +++ /dev/null @@ -1,238 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "name": "Service Display Showcase", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 80, - "padding": [80, 120], - "children": [ - { - "type": "frame", - "id": "ServiceDisplaySection", - "name": "Service Display Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "SvcDispHeader", - "name": "svcDispSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SvcDispBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [6, 14], - "children": [ - {"type": "text", "id": "SvcDispBadgeText", "name": "badgeText", "fill": "$orange-primary", "content": "SERVICE DISPLAYS", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500", "letterSpacing": 2} - ] - }, - {"type": "text", "id": "SvcDispTitle", "name": "shTitle", "fill": "$text-primary", "content": "Kitchen, Queue & Room Displays", "textAlign": "center", "fontFamily": "Roboto", "fontSize": 42, "fontWeight": "normal", "letterSpacing": -1}, - {"type": "text", "id": "SvcDispDesc", "name": "shDesc", "fill": "$text-tertiary", "textGrowth": "fixed-width", "width": 700, "content": "Display components for kitchen tickets, queue numbers, and room status screens.", "lineHeight": 1.6, "textAlign": "center", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "normal"} - ] - }, - { - "type": "frame", - "id": "KitchenDispExamples", - "name": "kitchenDisplayExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "layout": "vertical", - "gap": 32, - "padding": 40, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "KitchenTicket", - "name": "Organism/Display/KitchenTicket", - "reusable": true, - "width": 280, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "KTHeader", - "name": "ticketHeader", - "width": "fill_container", - "fill": "$orange-primary", - "cornerRadius": [16, 16, 0, 0], - "padding": [12, 16], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "text", "id": "KTOrderNum", "name": "orderNumber", "fill": "#FFFFFF", "content": "#0042", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, - {"type": "text", "id": "KTTableInfo", "name": "tableInfo", "fill": "#FFFFFFCC", "content": "Bàn 07", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "KTElapsed", "name": "elapsedTime", "fill": "#FFFFFF", "content": "5:32", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ] - }, - { - "type": "frame", - "id": "KTItems", - "name": "ticketItems", - "width": "fill_container", - "layout": "vertical", - "padding": 12, - "gap": 8, - "children": [ - {"type": "frame", "id": "KTItem1", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "KTItem1Name", "fill": "$text-primary", "content": "2x Phở bò tái", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "500"}, - {"type": "text", "id": "KTItem1Note", "fill": "$status-warning", "content": "Ít hành", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "KTItem2", "width": "fill_container", "children": [ - {"type": "text", "id": "KTItem2Name", "fill": "$text-primary", "content": "1x Bún chả", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "KTItem3", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "KTItem3Name", "fill": "$text-secondary", "content": "1x Nước cam", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "normal"}, - {"type": "text", "id": "KTItem3Station", "fill": "$text-tertiary", "content": "Bar", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ]} - ] - }, - { - "type": "frame", - "id": "KTActions", - "name": "ticketActions", - "padding": 12, - "justifyContent": "center", - "children": [ - {"type": "frame", "id": "KTDoneBtn", "width": 100, "height": 36, "fill": "$green-success", "cornerRadius": 8, "gap": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "KTDoneIcon", "iconFontName": "check", "iconFontFamily": "lucide", "width": 16, "height": 16, "fill": "#FFFFFF"}, - {"type": "text", "id": "KTDoneTxt", "fill": "#FFFFFF", "content": "Xong", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "QueueDispRow", - "gap": 24, - "children": [ - { - "type": "frame", - "id": "QueueNumber", - "name": "Organism/Display/QueueNumber", - "reusable": true, - "width": 200, - "height": 160, - "fill": "$bg-elevated", - "cornerRadius": 20, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "text", "id": "QNLabel", "fill": "$text-secondary", "content": "Số thứ tự", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, - {"type": "text", "id": "QNNumber", "name": "queueNumber", "fill": "$spa-primary", "content": "A-042", "fontFamily": "Roboto", "fontSize": 48, "fontWeight": "700"}, - {"type": "text", "id": "QNService", "name": "serviceType", "fill": "$text-primary", "content": "Facial", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "normal"} - ] - }, - { - "type": "frame", - "id": "QueueCalling", - "name": "Organism/Display/QueueCalling", - "reusable": true, - "width": 300, - "height": 120, - "fill": "$green-success", - "cornerRadius": 20, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "QCLabelRow", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "QCBellIcon", "iconFontName": "bell-ring", "iconFontFamily": "lucide", "width": 20, "height": 20, "fill": "#FFFFFF"}, - {"type": "text", "id": "QCLabel", "fill": "#FFFFFF", "content": "MỜI KHÁCH", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]}, - {"type": "text", "id": "QCNumber", "name": "callingNumber", "fill": "#FFFFFF", "content": "A-038", "fontFamily": "Roboto", "fontSize": 48, "fontWeight": "700"}, - {"type": "text", "id": "QCStation", "name": "station", "fill": "#FFFFFFCC", "content": "Phòng 3 - Ngọc", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"} - ] - } - ] - }, - { - "type": "frame", - "id": "RoomDisplay", - "name": "Organism/Display/RoomStatus", - "reusable": true, - "width": 400, - "height": 300, - "fill": "$bg-surface", - "cornerRadius": 20, - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "layout": "vertical", - "justifyContent": "space_between", - "padding": 24, - "alignItems": "center", - "children": [ - {"type": "text", "id": "RDName", "name": "roomName", "fill": "$text-primary", "content": "PHÒNG VIP 01", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"}, - { - "type": "frame", - "id": "RDTimerBox", - "layout": "vertical", - "gap": 8, - "alignItems": "center", - "children": [ - {"type": "text", "id": "RDTimerLabel", "fill": "$text-secondary", "content": "THỜI GIAN", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, - {"type": "text", "id": "RDTimer", "name": "sessionTimer", "fill": "$karaoke-primary", "content": "02:15:42", "fontFamily": "Roboto", "fontSize": 64, "fontWeight": "700"} - ] - }, - { - "type": "frame", - "id": "RDStats", - "gap": 24, - "children": [ - {"type": "frame", "id": "RDTotalBox", "layout": "vertical", "alignItems": "center", "children": [ - {"type": "text", "id": "RDTotalLabel", "fill": "$text-secondary", "content": "Tổng tiền", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, - {"type": "text", "id": "RDTotalVal", "name": "totalAmount", "fill": "$text-primary", "content": "1,850,000đ", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "RDPendingBox", "layout": "vertical", "alignItems": "center", "children": [ - {"type": "text", "id": "RDPendingLabel", "fill": "$text-secondary", "content": "Order mới", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, - {"type": "text", "id": "RDPendingVal", "name": "pendingItems", "fill": "$status-warning", "content": "3 món", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "500"} - ]} - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "bg-surface": {"type": "color", "value": "#111113"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "green-success": {"type": "color", "value": "#22C55E"}, - "karaoke-primary": {"type": "color", "value": "#EC4899"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "spa-primary": {"type": "color", "value": "#14B8A6"}, - "status-warning": {"type": "color", "value": "#F59E0B"}, - "text-muted": {"type": "color", "value": "#FFFFFFCC"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/organisms/vertical-specific/table-map.pen b/pencil-design/src/organisms/vertical-specific/table-map.pen deleted file mode 100644 index 210baf8b..00000000 --- a/pencil-design/src/organisms/vertical-specific/table-map.pen +++ /dev/null @@ -1,184 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "name": "Table Map Showcase", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 80, - "padding": [80, 120], - "children": [ - { - "type": "frame", - "id": "TableMapSection", - "name": "Table Map Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "TableMapHeader", - "name": "tableMapSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "TblMapBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [6, 14], - "children": [ - {"type": "icon_font", "id": "TblMapBadgeIcon", "iconFontName": "utensils", "iconFontFamily": "lucide", "width": 12, "height": 12, "fill": "$orange-primary"}, - {"type": "text", "id": "TblMapBadgeText", "name": "badgeText", "fill": "$orange-primary", "content": "TABLE MAP", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500", "letterSpacing": 2} - ] - }, - {"type": "text", "id": "TblMapTitle", "name": "shTitle", "fill": "$text-primary", "content": "Restaurant Table Status", "textAlign": "center", "fontFamily": "Roboto", "fontSize": 42, "fontWeight": "normal", "letterSpacing": -1}, - {"type": "text", "id": "TblMapDesc", "name": "shDesc", "fill": "$text-tertiary", "textGrowth": "fixed-width", "width": 600, "content": "Table status cards for restaurant POS with Available, Occupied, and Reserved states.", "lineHeight": 1.6, "textAlign": "center", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "normal"} - ] - }, - { - "type": "frame", - "id": "TableMapExamples", - "name": "tableMapExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "padding": 40, - "gap": 24, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "TableAvailable", - "name": "Organism/Table/Available", - "reusable": true, - "width": 100, - "height": 100, - "fill": "#22C55E18", - "cornerRadius": 12, - "stroke": {"thickness": 2, "fill": "$green-success"}, - "layout": "vertical", - "gap": 4, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "text", "id": "TblAvailNum", "name": "tableNumber", "fill": "$green-success", "content": "T01", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}, - {"type": "text", "id": "TblAvailSeats", "name": "seatCount", "fill": "$text-secondary", "content": "4 ghế", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ] - }, - { - "type": "frame", - "id": "TableOccupied", - "name": "Organism/Table/Occupied", - "reusable": true, - "width": 100, - "height": 100, - "fill": "$orange-primary", - "cornerRadius": 12, - "layout": "vertical", - "gap": 4, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "text", "id": "TblOccNum", "name": "tableNumber", "fill": "$text-primary", "content": "T02", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}, - {"type": "text", "id": "TblOccAmount", "name": "orderAmount", "fill": "$text-muted", "content": "450K", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "TblOccTime", "name": "elapsedTime", "fill": "#FFFFFF99", "content": "45 phút", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ] - }, - { - "type": "frame", - "id": "TableReserved", - "name": "Organism/Table/Reserved", - "reusable": true, - "width": 100, - "height": 100, - "fill": "#F59E0B18", - "cornerRadius": 12, - "stroke": {"thickness": 2, "fill": "$status-warning"}, - "layout": "vertical", - "gap": 4, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "text", "id": "TblResNum", "name": "tableNumber", "fill": "$status-warning", "content": "T03", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}, - {"type": "text", "id": "TblResTime", "name": "reserveTime", "fill": "$text-secondary", "content": "19:00", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "TblResName", "name": "guestName", "fill": "$text-tertiary", "content": "Anh Minh", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ] - } - ] - }, - { - "type": "frame", - "id": "TableMapContainer", - "name": "Organism/TableMap/Container", - "reusable": true, - "width": 600, - "height": 400, - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "layout": "vertical", - "padding": 20, - "gap": 16, - "children": [ - { - "type": "frame", - "id": "TblMapContHeader", - "name": "header", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "text", "id": "TblMapContTitle", "fill": "$text-primary", "content": "Sơ đồ bàn", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}, - { - "type": "frame", - "id": "TblMapLegend", - "name": "legend", - "gap": 16, - "children": [ - {"type": "frame", "id": "LegAvail", "gap": 6, "alignItems": "center", "children": [ - {"type": "rectangle", "id": "LegAvailDot", "width": 12, "height": 12, "fill": "$green-success", "cornerRadius": 2}, - {"type": "text", "id": "LegAvailTxt", "fill": "$text-secondary", "content": "Trống", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "LegOcc", "gap": 6, "alignItems": "center", "children": [ - {"type": "rectangle", "id": "LegOccDot", "width": 12, "height": 12, "fill": "$orange-primary", "cornerRadius": 2}, - {"type": "text", "id": "LegOccTxt", "fill": "$text-secondary", "content": "Đang phục vụ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "LegRes", "gap": 6, "alignItems": "center", "children": [ - {"type": "rectangle", "id": "LegResDot", "width": 12, "height": 12, "fill": "$status-warning", "cornerRadius": 2}, - {"type": "text", "id": "LegResTxt", "fill": "$text-secondary", "content": "Đã đặt", "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"}, - "bg-surface": {"type": "color", "value": "#111113"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "status-warning": {"type": "color", "value": "#F59E0B"}, - "text-muted": {"type": "color", "value": "#FFFFFFCC"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"}, - "green-success": {"type": "color", "value": "#22C55E"} - } -} diff --git a/pencil-design/src/pages/tMarketing/.prompts/agent1-desktop-batch1.md b/pencil-design/src/pages/tMarketing/.prompts/agent1-desktop-batch1.md deleted file mode 100644 index 59bf5c50..00000000 --- a/pencil-design/src/pages/tMarketing/.prompts/agent1-desktop-batch1.md +++ /dev/null @@ -1,88 +0,0 @@ -# Agent 1: Desktop 1440×900 — Batch 1 (4 screens) - -## Task -Create 4 desktop `.pen` design files at **1440×900** for tMarketing by adapting the existing 1280px source files. Output to `desktop/` directory. - -## Source files (read these first) -- `/Users/velikho/Desktop/WORKING/Base/pencil-design/src/pages/tMarketing/social-hub.pen` (1280×920) -- `/Users/velikho/Desktop/WORKING/Base/pencil-design/src/pages/tMarketing/livechat-console.pen` (1280×720) -- `/Users/velikho/Desktop/WORKING/Base/pencil-design/src/pages/tMarketing/customer-crm.pen` (1280×720) -- `/Users/velikho/Desktop/WORKING/Base/pencil-design/src/pages/tMarketing/ai-content-studio.pen` (1280×720) - -## Output files -- `/Users/velikho/Desktop/WORKING/Base/pencil-design/src/pages/tMarketing/desktop/social-hub.pen` -- `/Users/velikho/Desktop/WORKING/Base/pencil-design/src/pages/tMarketing/desktop/livechat-console.pen` -- `/Users/velikho/Desktop/WORKING/Base/pencil-design/src/pages/tMarketing/desktop/customer-crm.pen` -- `/Users/velikho/Desktop/WORKING/Base/pencil-design/src/pages/tMarketing/desktop/ai-content-studio.pen` - -## Design System - -### Variables (MUST include in every file) -```json -"variables": { - "bg-page": {"type": "color", "value": "#18181B"}, - "bg-card": {"type": "color", "value": "#0F0F10"}, - "yellow-primary": {"type": "color", "value": "#FACC15"}, - "text-primary": {"type": "color", "value": "#FAFAFA"}, - "text-secondary": {"type": "color", "value": "#71717A"}, - "text-tertiary": {"type": "color", "value": "#52525B"}, - "border": {"type": "color", "value": "#27272A"}, - "success": {"type": "color", "value": "#22C55E"}, - "warning": {"type": "color", "value": "#FACC15"}, - "error": {"type": "color", "value": "#EF4444"}, - "info": {"type": "color", "value": "#3B82F6"} -} -``` - -### Design Rules -- Font: **Roboto** only (all weights: 500, 600, 700) -- Icons: **Lucide** icon set (`"iconFontFamily": "lucide"`) -- Root frame: `1440×900`, `clip: true`, `fill: "$bg-page"`, `reusable: true` -- Sidebar: Keep **240px** width from source, same navigation structure -- Main content: Expands to fill remaining space (`"width": "fill_container"`) -- Use `$variable` references for colors (e.g., `"fill": "$bg-page"`) -- All IDs must be unique across the file -- Layout: `"layout": "horizontal"` for sidebar+main, `"layout": "vertical"` for sections - -### Adaptation strategy (1280→1440) -1. Read source file JSON -2. Change root frame width from current value to **1440**, height to **900** -3. Keep sidebar 240px unchanged -4. Main content area gets the extra width automatically via `fill_container` -5. Adjust any fixed-width elements in main content if needed for the wider layout -6. Add more padding or wider KPI cards if layout looks sparse -7. Keep all text content, icons, and data the same - -### File structure -```json -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "UniqueScreenId", - "name": "Screen/Screen Name", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "$bg-page", - "layout": "horizontal", - "clip": true, - "children": [ - { /* Sidebar 240px */ }, - { /* MainContent fill_container */ } - ] - } - ], - "variables": { /* ... */ } -} -``` - -## Validation -After creating each file, validate JSON with: `python3 -c "import json; json.load(open('filename.pen')); print('Valid')"` - -## CRITICAL -- Do NOT use any font other than Roboto -- Do NOT use emoji characters for icons — use `icon_font` type with Lucide -- All node IDs must be unique strings (no spaces, no special chars) -- Every file must be valid JSON diff --git a/pencil-design/src/pages/tMarketing/.prompts/agent2-desktop-batch2.md b/pencil-design/src/pages/tMarketing/.prompts/agent2-desktop-batch2.md deleted file mode 100644 index c87a2b69..00000000 --- a/pencil-design/src/pages/tMarketing/.prompts/agent2-desktop-batch2.md +++ /dev/null @@ -1,64 +0,0 @@ -# Agent 2: Desktop 1440×900 — Batch 2 (3 screens) - -## Task -Create 3 desktop `.pen` design files at **1440×900** for tMarketing by adapting the existing source files. Output to `desktop/` directory. - -## Source files (read these first) -- `/Users/velikho/Desktop/WORKING/Base/pencil-design/src/pages/tMarketing/chatbot-automation.pen` (1280×720) -- `/Users/velikho/Desktop/WORKING/Base/pencil-design/src/pages/tMarketing/ai-chatbot.pen` (2063×800) -- `/Users/velikho/Desktop/WORKING/Base/pencil-design/src/pages/tMarketing/analytics-dashboard.pen` (1280×802) - -## Output files -- `/Users/velikho/Desktop/WORKING/Base/pencil-design/src/pages/tMarketing/desktop/chatbot-automation.pen` -- `/Users/velikho/Desktop/WORKING/Base/pencil-design/src/pages/tMarketing/desktop/ai-chatbot.pen` -- `/Users/velikho/Desktop/WORKING/Base/pencil-design/src/pages/tMarketing/desktop/analytics-dashboard.pen` - -## Design System - -### Variables (MUST include in every file) -```json -"variables": { - "bg-page": {"type": "color", "value": "#18181B"}, - "bg-card": {"type": "color", "value": "#0F0F10"}, - "yellow-primary": {"type": "color", "value": "#FACC15"}, - "text-primary": {"type": "color", "value": "#FAFAFA"}, - "text-secondary": {"type": "color", "value": "#71717A"}, - "text-tertiary": {"type": "color", "value": "#52525B"}, - "border": {"type": "color", "value": "#27272A"}, - "success": {"type": "color", "value": "#22C55E"}, - "warning": {"type": "color", "value": "#FACC15"}, - "error": {"type": "color", "value": "#EF4444"}, - "info": {"type": "color", "value": "#3B82F6"} -} -``` - -### Design Rules -- Font: **Roboto** only (all weights: 500, 600, 700) -- Icons: **Lucide** icon set (`"iconFontFamily": "lucide"`) -- Root frame: `1440×900`, `clip: true`, `fill: "$bg-page"`, `reusable: true` -- Sidebar: Keep **240px** width from source, same navigation structure -- Main content: Expands to fill remaining space (`"width": "fill_container"`) -- Use `$variable` references for colors (e.g., `"fill": "$bg-page"`) -- All IDs must be unique across the file - -### Special: ai-chatbot.pen adaptation -The source ai-chatbot.pen is **2063×800** — much wider than standard. For the 1440×900 version: -1. Fit all content into 1440px width by reducing panel widths proportionally -2. The screen has multiple panels (chatbot builder view) — adjust to fit -3. Keep the sidebar and main content layout consistent with other screens - -### Adaptation strategy -1. Read source file JSON -2. Change root frame to **1440×900** -3. Keep sidebar 240px unchanged -4. Adjust main content for the new width -5. Keep all text content and icons - -## Validation -After creating each file, validate JSON with: `python3 -c "import json; json.load(open('filename.pen')); print('Valid')"` - -## CRITICAL -- Do NOT use any font other than Roboto -- Do NOT use emoji characters for icons — use `icon_font` type with Lucide -- All node IDs must be unique strings -- Every file must be valid JSON diff --git a/pencil-design/src/pages/tMarketing/.prompts/agent3-mobile-batch1.md b/pencil-design/src/pages/tMarketing/.prompts/agent3-mobile-batch1.md deleted file mode 100644 index 0c3dad42..00000000 --- a/pencil-design/src/pages/tMarketing/.prompts/agent3-mobile-batch1.md +++ /dev/null @@ -1,168 +0,0 @@ -# Agent 3: Mobile 390×844 — Batch 1 (4 screens) - -## Task -Create 4 mobile `.pen` design files at **390×844** for tMarketing by adapting the existing desktop source files. Output to `mobile/` directory. - -## Source files (read these for content reference) -- `/Users/velikho/Desktop/WORKING/Base/pencil-design/src/pages/tMarketing/social-hub.pen` -- `/Users/velikho/Desktop/WORKING/Base/pencil-design/src/pages/tMarketing/livechat-console.pen` -- `/Users/velikho/Desktop/WORKING/Base/pencil-design/src/pages/tMarketing/customer-crm.pen` -- `/Users/velikho/Desktop/WORKING/Base/pencil-design/src/pages/tMarketing/ai-content-studio.pen` - -## Output files -- `/Users/velikho/Desktop/WORKING/Base/pencil-design/src/pages/tMarketing/mobile/social-hub.pen` -- `/Users/velikho/Desktop/WORKING/Base/pencil-design/src/pages/tMarketing/mobile/livechat-console.pen` -- `/Users/velikho/Desktop/WORKING/Base/pencil-design/src/pages/tMarketing/mobile/customer-crm.pen` -- `/Users/velikho/Desktop/WORKING/Base/pencil-design/src/pages/tMarketing/mobile/ai-content-studio.pen` - -## Design System - -### Variables (MUST include in every file) -```json -"variables": { - "bg-page": {"type": "color", "value": "#18181B"}, - "bg-card": {"type": "color", "value": "#0F0F10"}, - "yellow-primary": {"type": "color", "value": "#FACC15"}, - "text-primary": {"type": "color", "value": "#FAFAFA"}, - "text-secondary": {"type": "color", "value": "#71717A"}, - "text-tertiary": {"type": "color", "value": "#52525B"}, - "border": {"type": "color", "value": "#27272A"}, - "success": {"type": "color", "value": "#22C55E"}, - "warning": {"type": "color", "value": "#FACC15"}, - "error": {"type": "color", "value": "#EF4444"}, - "info": {"type": "color", "value": "#3B82F6"} -} -``` - -### Mobile Design Rules -- Font: **Roboto** only -- Icons: **Lucide** icon set (`"iconFontFamily": "lucide"`) -- Root frame: `390×844`, `clip: true`, `fill: "$bg-page"`, `reusable: true` -- **NO SIDEBAR** — remove entirely -- Use bottom tab bar instead (see template below) -- Layout: vertical, single column -- Padding: 16px horizontal -- Font sizes: reduce by 1-2px from desktop where needed -- KPI cards: stack vertically or 2-column grid (width: `"fill_container"`) -- Tables: convert to **card-based list** (each row becomes a card) -- Header: compact with hamburger menu icon - -### Bottom Tab Bar Template -```json -{ - "type": "frame", - "id": "BottomTabBar", - "width": "fill_container", - "height": 64, - "fill": "$bg-card", - "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, - "justifyContent": "space_around", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "TabHub", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "TabHubIcon", "width": 20, "height": 20, "iconFontName": "layout-grid", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "TabHubText", "fill": "$text-tertiary", "content": "HUB", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "TabChat", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "TabChatIcon", "width": 20, "height": 20, "iconFontName": "message-circle", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "TabChatText", "fill": "$text-tertiary", "content": "CHAT", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "TabCRM", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "TabCRMIcon", "width": 20, "height": 20, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "TabCRMText", "fill": "$text-tertiary", "content": "CRM", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "TabAI", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "TabAIIcon", "width": 20, "height": 20, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "TabAIText", "fill": "$text-tertiary", "content": "AI", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "TabStats", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "TabStatsIcon", "width": 20, "height": 20, "iconFontName": "bar-chart-3", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "TabStatsText", "fill": "$text-tertiary", "content": "STATS", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]} - ] -} -``` - -Highlight the ACTIVE tab by setting its icon and text fill to `"$yellow-primary"`. - -### Mobile Header Template -```json -{ - "type": "frame", - "id": "MobileHeader", - "width": "fill_container", - "height": 56, - "fill": "$bg-card", - "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, - "padding": [0, 16], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "HeaderLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "LogoMark", "width": 28, "height": 28, "fill": "$yellow-primary", "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "LogoLetter", "fill": "$bg-card", "content": "M", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} - ]}, - {"type": "text", "id": "PageTitle", "fill": "$text-primary", "content": "PAGE TITLE", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "HeaderRight", "gap": 16, "children": [ - {"type": "icon_font", "id": "SearchIcon", "width": 20, "height": 20, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "icon_font", "id": "MenuIcon", "width": 20, "height": 20, "iconFontName": "menu", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] -} -``` - -### Mobile Screen Structure -```json -{ - "version": "2.6", - "children": [{ - "type": "frame", - "id": "UniqueScreenIdMobile", - "name": "Screen/Screen Name Mobile", - "reusable": true, - "width": 390, - "height": 844, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - { /* MobileHeader 56px */ }, - { /* ScrollableContent fill_container, layout: vertical, padding: [16,16], gap: 16 */ }, - { /* BottomTabBar 64px */ } - ] - }], - "variables": { /* ... */ } -} -``` - -### Content Adaptation Per Screen - -**social-hub mobile:** -- Header: "SOCIAL HUB", active tab: HUB -- Content: Platform connection cards stacked vertically, unified feed as scrollable cards -- KPI: 2-column grid cards - -**livechat-console mobile:** -- Header: "LIVECHAT", active tab: CHAT -- Content: Chat list with unread badges, simplified thread view -- No side panel — tap to open conversation detail - -**customer-crm mobile:** -- Header: "CUSTOMERS", active tab: CRM -- Content: KPI cards in 2-column grid, customer list as cards (not table) -- Each card shows: name, phone, channel badge, score stars - -**ai-content-studio mobile:** -- Header: "AI STUDIO", active tab: AI -- Content: Quick action buttons, upcoming posts list, simplified calendar - -## Validation -After creating each file: `python3 -c "import json; json.load(open('filename.pen')); print('Valid')"` - -## CRITICAL -- Do NOT use any font other than Roboto -- Do NOT use emoji for icons — use `icon_font` type with Lucide -- All node IDs must be unique -- Every file must be valid JSON -- All IDs must be UNIQUE across the file — prefix with screen abbreviation (e.g., SHM_ for Social Hub Mobile) diff --git a/pencil-design/src/pages/tMarketing/.prompts/agent4-mobile-batch2.md b/pencil-design/src/pages/tMarketing/.prompts/agent4-mobile-batch2.md deleted file mode 100644 index 7d1d8683..00000000 --- a/pencil-design/src/pages/tMarketing/.prompts/agent4-mobile-batch2.md +++ /dev/null @@ -1,160 +0,0 @@ -# Agent 4: Mobile 390×844 — Batch 2 (3 screens) - -## Task -Create 3 mobile `.pen` design files at **390×844** for tMarketing by adapting the existing desktop source files. Output to `mobile/` directory. - -## Source files (read these for content reference) -- `/Users/velikho/Desktop/WORKING/Base/pencil-design/src/pages/tMarketing/chatbot-automation.pen` -- `/Users/velikho/Desktop/WORKING/Base/pencil-design/src/pages/tMarketing/ai-chatbot.pen` -- `/Users/velikho/Desktop/WORKING/Base/pencil-design/src/pages/tMarketing/analytics-dashboard.pen` - -## Output files -- `/Users/velikho/Desktop/WORKING/Base/pencil-design/src/pages/tMarketing/mobile/chatbot-automation.pen` -- `/Users/velikho/Desktop/WORKING/Base/pencil-design/src/pages/tMarketing/mobile/ai-chatbot.pen` -- `/Users/velikho/Desktop/WORKING/Base/pencil-design/src/pages/tMarketing/mobile/analytics-dashboard.pen` - -## Design System - -### Variables (MUST include in every file) -```json -"variables": { - "bg-page": {"type": "color", "value": "#18181B"}, - "bg-card": {"type": "color", "value": "#0F0F10"}, - "yellow-primary": {"type": "color", "value": "#FACC15"}, - "text-primary": {"type": "color", "value": "#FAFAFA"}, - "text-secondary": {"type": "color", "value": "#71717A"}, - "text-tertiary": {"type": "color", "value": "#52525B"}, - "border": {"type": "color", "value": "#27272A"}, - "success": {"type": "color", "value": "#22C55E"}, - "warning": {"type": "color", "value": "#FACC15"}, - "error": {"type": "color", "value": "#EF4444"}, - "info": {"type": "color", "value": "#3B82F6"} -} -``` - -### Mobile Design Rules -- Font: **Roboto** only -- Icons: **Lucide** icon set (`"iconFontFamily": "lucide"`) -- Root frame: `390×844`, `clip: true`, `fill: "$bg-page"`, `reusable: true` -- **NO SIDEBAR** — use bottom tab bar instead -- Layout: vertical, single column -- Padding: 16px horizontal -- Font sizes: reduce by 1-2px from desktop - -### Bottom Tab Bar (reuse from Agent 3) -5 tabs: HUB, CHAT, CRM, AI, STATS. Highlight active tab with `"$yellow-primary"`. - -```json -{ - "type": "frame", - "id": "BottomTabBar", - "width": "fill_container", - "height": 64, - "fill": "$bg-card", - "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, - "justifyContent": "space_around", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "TabHub", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "TabHubIcon", "width": 20, "height": 20, "iconFontName": "layout-grid", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "TabHubText", "fill": "$text-tertiary", "content": "HUB", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "TabChat", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "TabChatIcon", "width": 20, "height": 20, "iconFontName": "message-circle", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "TabChatText", "fill": "$text-tertiary", "content": "CHAT", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "TabCRM", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "TabCRMIcon", "width": 20, "height": 20, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "TabCRMText", "fill": "$text-tertiary", "content": "CRM", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "TabAI", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "TabAIIcon", "width": 20, "height": 20, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "TabAIText", "fill": "$text-tertiary", "content": "AI", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "TabStats", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "TabStatsIcon", "width": 20, "height": 20, "iconFontName": "bar-chart-3", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "TabStatsText", "fill": "$text-tertiary", "content": "STATS", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]} - ] -} -``` - -### Mobile Header -```json -{ - "type": "frame", - "id": "MobileHeader", - "width": "fill_container", - "height": 56, - "fill": "$bg-card", - "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, - "padding": [0, 16], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "HeaderLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "LogoMark", "width": 28, "height": 28, "fill": "$yellow-primary", "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "LogoLetter", "fill": "$bg-card", "content": "M", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} - ]}, - {"type": "text", "id": "PageTitle", "fill": "$text-primary", "content": "PAGE TITLE", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "HeaderRight", "gap": 16, "children": [ - {"type": "icon_font", "id": "SearchIcon", "width": 20, "height": 20, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "icon_font", "id": "MenuIcon", "width": 20, "height": 20, "iconFontName": "menu", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] -} -``` - -### Content Adaptation Per Screen - -**chatbot-automation mobile:** -- Header: "CHATBOT", active tab: CHAT -- Content: Flow cards stacked vertically, trigger action buttons -- Simplify flow builder to list view with trigger → action cards - -**ai-chatbot mobile:** -- Header: "AI CHATBOT", active tab: AI -- Content: Chatbot scenario cards, AI training metrics -- Chat preview as expandable cards -- Simplify multi-panel layout to single scrollable view - -**analytics-dashboard mobile:** -- Header: "ANALYTICS", active tab: STATS -- Content: KPI cards vertical stack, chart placeholders (rectangles with labels) -- Campaign performance as horizontal scrollable cards -- Simplified date filter bar - -### Mobile Screen Structure -```json -{ - "version": "2.6", - "children": [{ - "type": "frame", - "id": "UniqueScreenIdMobile", - "name": "Screen/Screen Name Mobile", - "reusable": true, - "width": 390, - "height": 844, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - { /* MobileHeader 56px */ }, - { /* ScrollableContent fill_container, layout: vertical, padding: [16,16], gap: 16 */ }, - { /* BottomTabBar 64px */ } - ] - }], - "variables": { /* ... */ } -} -``` - -## Validation -After creating each file: `python3 -c "import json; json.load(open('filename.pen')); print('Valid')"` - -## CRITICAL -- Do NOT use any font other than Roboto -- Do NOT use emoji for icons — use `icon_font` type with Lucide -- All node IDs must be unique -- Every file must be valid JSON -- Prefix IDs with screen abbreviation (e.g., CAM_ for Chatbot Automation Mobile, ACM_ for AI Chatbot Mobile, ADM_ for Analytics Dashboard Mobile) diff --git a/pencil-design/src/pages/tMarketing/desktop/ai-chatbot.pen b/pencil-design/src/pages/tMarketing/desktop/ai-chatbot.pen deleted file mode 100644 index 2a32f707..00000000 --- a/pencil-design/src/pages/tMarketing/desktop/ai-chatbot.pen +++ /dev/null @@ -1 +0,0 @@ -{"version": "2.7", "children": [{"type": "frame", "id": "AIChatbotScreen", "x": 0, "y": 0, "name": "Screen/AI Chatbot", "reusable": true, "clip": true, "width": 1440, "height": 900, "fill": "$bg-page", "children": [{"type": "frame", "id": "Sidebar", "width": 240, "height": "fill_container", "fill": "$bg-card", "stroke": {"align": "inside", "thickness": 3, "fill": "$yellow-primary"}, "layout": "vertical", "padding": [24, 16], "justifyContent": "space_between", "children": [{"type": "frame", "id": "SidebarTop", "width": "fill_container", "layout": "vertical", "gap": 32, "children": [{"type": "frame", "id": "LogoSection", "width": "fill_container", "stroke": {"align": "inside", "thickness": 1, "fill": "$border"}, "gap": 8, "padding": [0, 0, 16, 0], "alignItems": "center", "children": [{"type": "frame", "id": "LogoMark", "width": 32, "height": 32, "fill": "$yellow-primary", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "LogoLetter", "fill": "$bg-card", "content": "M", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}]}, {"type": "text", "id": "LogoText", "fill": "$text-primary", "content": "tMARKETING", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}, {"type": "frame", "id": "NavSection", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [{"type": "frame", "id": "NavHub", "width": "fill_container", "gap": 10, "padding": [10, 12], "alignItems": "center", "children": [{"type": "text", "id": "NavHubNum", "fill": "$text-tertiary", "content": "01", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, {"type": "text", "id": "NavHubLabel", "fill": "$text-secondary", "content": "HUB", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, {"type": "frame", "id": "NavChat", "width": "fill_container", "gap": 10, "padding": [10, 12], "alignItems": "center", "children": [{"type": "text", "id": "NavChatNum", "fill": "$text-tertiary", "content": "02", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, {"type": "text", "id": "NavChatLabel", "fill": "$text-secondary", "content": "CHAT", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, {"type": "frame", "id": "NavBot", "width": "fill_container", "gap": 10, "padding": [10, 12], "alignItems": "center", "children": [{"type": "text", "id": "NavBotNum", "fill": "$text-tertiary", "content": "03", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, {"type": "text", "id": "NavBotLabel", "fill": "$text-secondary", "content": "BOT", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, {"type": "frame", "id": "NavAIBot", "width": "fill_container", "fill": "#FACC1515", "stroke": {"align": "inside", "thickness": 1, "fill": "$yellow-primary"}, "gap": 10, "padding": [10, 12], "alignItems": "center", "children": [{"type": "text", "id": "NavAIBotNum", "fill": "$yellow-primary", "content": "04", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, {"type": "text", "id": "NavAIBotLabel", "fill": "$text-primary", "content": "AI BOT", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, {"type": "frame", "id": "NavCRM", "width": "fill_container", "gap": 10, "padding": [10, 12], "alignItems": "center", "children": [{"type": "text", "id": "NavCRMNum", "fill": "$text-tertiary", "content": "05", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, {"type": "text", "id": "NavCRMLabel", "fill": "$text-secondary", "content": "CRM", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, {"type": "frame", "id": "NavStats", "width": "fill_container", "gap": 10, "padding": [10, 12], "alignItems": "center", "children": [{"type": "text", "id": "NavStatsNum", "fill": "$text-tertiary", "content": "06", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, {"type": "text", "id": "NavStatsLabel", "fill": "$text-secondary", "content": "ANALYTICS", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}]}]}, {"type": "frame", "id": "SidebarBottom", "width": "fill_container", "layout": "vertical", "gap": 20, "children": [{"type": "frame", "id": "AICredits", "width": "fill_container", "fill": "#A855F715", "stroke": {"thickness": 1, "fill": "#A855F730"}, "layout": "vertical", "gap": 12, "padding": 16, "children": [{"type": "frame", "id": "CreditsHeader", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "CreditsIcon", "width": 14, "height": 14, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "#A855F7"}, {"type": "text", "id": "CreditsLabel", "fill": "#A855F7", "content": "GEMINI API", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}]}, {"type": "text", "id": "CreditsValue", "fill": "$text-primary", "content": "8.2K tokens left", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, {"type": "frame", "id": "AccountRow", "width": "fill_container", "stroke": {"align": "inside", "thickness": 1, "fill": "$border"}, "gap": 10, "padding": [20, 0, 0, 0], "alignItems": "center", "children": [{"type": "frame", "id": "Avatar", "width": 32, "height": 32, "fill": "$border", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "AvatarText", "fill": "$text-primary", "content": "AD", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}]}, {"type": "text", "id": "UserName", "fill": "$text-primary", "content": "ADMIN", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, {"type": "icon_font", "id": "ChevronIcon", "width": 14, "height": 14, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"}]}]}]}, {"type": "frame", "id": "MainContent", "width": "fill_container", "height": "fill_container", "fill": "$bg-page", "children": [{"type": "frame", "id": "ScenariosList", "width": 260, "height": "fill_container", "fill": "$bg-card", "stroke": {"thickness": 1, "fill": "$border"}, "layout": "vertical", "children": [{"type": "frame", "id": "ScenariosHeader", "width": "fill_container", "stroke": {"align": "inside", "thickness": 1, "fill": "$border"}, "padding": [16, 20], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "ScenariosLeft", "gap": 10, "alignItems": "center", "children": [{"type": "icon_font", "id": "ScenariosIcon", "width": 16, "height": 16, "iconFontName": "layers", "iconFontFamily": "lucide", "fill": "$yellow-primary"}, {"type": "text", "id": "ScenariosTitle", "fill": "$text-primary", "content": "SCENARIOS", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}]}, {"type": "frame", "id": "AddScenarioBtn", "width": 28, "height": 28, "fill": "$yellow-primary", "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "AddScenarioIcon", "width": 14, "height": 14, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$bg-card"}]}]}, {"type": "frame", "id": "ScenarioItems", "width": "fill_container", "height": "fill_container", "layout": "vertical", "children": [{"type": "frame", "id": "Scenario1", "width": "fill_container", "fill": "#FACC1510", "stroke": {"align": "inside", "thickness": 2, "fill": "$yellow-primary"}, "layout": "vertical", "gap": 12, "padding": 16, "children": [{"type": "frame", "id": "S1Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "S1Left", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "S1Icon", "width": 14, "height": 14, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "#A855F7"}, {"type": "text", "id": "S1Name", "fill": "$text-primary", "content": "Product Consultant", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, {"type": "frame", "id": "S1Status", "fill": "#22C55E20", "padding": [4, 8], "children": [{"type": "text", "id": "S1StatusText", "fill": "$success", "content": "ACTIVE", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "700"}]}]}, {"type": "text", "id": "S1Desc", "fill": "$text-secondary", "content": "T\u01b0 v\u1ea5n s\u1ea3n ph\u1ea9m t\u1ef1 \u0111\u1ed9ng v\u1edbi AI", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, {"type": "frame", "id": "S1Stats", "gap": 16, "children": [{"type": "text", "id": "S1Convos", "fill": "$text-tertiary", "content": "2.4K convos", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"}, {"type": "text", "id": "S1Rate", "fill": "$success", "content": "92% success", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"}]}]}, {"type": "frame", "id": "Scenario2", "width": "fill_container", "stroke": {"align": "inside", "thickness": 1, "fill": "$border"}, "layout": "vertical", "gap": 12, "padding": 16, "children": [{"type": "frame", "id": "S2Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "S2Left", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "S2Icon", "width": 14, "height": 14, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "#A855F7"}, {"type": "text", "id": "S2Name", "fill": "$text-primary", "content": "FAQ Handler", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, {"type": "frame", "id": "S2Status", "fill": "#22C55E20", "padding": [4, 8], "children": [{"type": "text", "id": "S2StatusText", "fill": "$success", "content": "ACTIVE", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "700"}]}]}, {"type": "text", "id": "S2Desc", "fill": "$text-secondary", "content": "Tr\u1ea3 l\u1eddi c\u00e2u h\u1ecfi th\u01b0\u1eddng g\u1eb7p", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, {"type": "frame", "id": "S2Stats", "gap": 16, "children": [{"type": "text", "id": "S2Convos", "fill": "$text-tertiary", "content": "5.1K convos", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"}, {"type": "text", "id": "S2Rate", "fill": "$success", "content": "88% success", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"}]}]}, {"type": "frame", "id": "Scenario3", "width": "fill_container", "stroke": {"align": "inside", "thickness": 1, "fill": "$border"}, "layout": "vertical", "gap": 12, "padding": 16, "children": [{"type": "frame", "id": "S3Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "S3Left", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "S3Icon", "width": 14, "height": 14, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "#A855F7"}, {"type": "text", "id": "S3Name", "fill": "$text-primary", "content": "Lead Generator", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, {"type": "frame", "id": "S3Status", "fill": "#FACC1520", "padding": [4, 8], "children": [{"type": "text", "id": "S3StatusText", "fill": "$warning", "content": "TRAINING", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "700"}]}]}, {"type": "text", "id": "S3Desc", "fill": "$text-secondary", "content": "Thu th\u1eadp th\u00f4ng tin kh\u00e1ch h\u00e0ng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, {"type": "frame", "id": "S3Stats", "gap": 16, "children": [{"type": "text", "id": "S3Convos", "fill": "$text-tertiary", "content": "342 test runs", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"}]}]}, {"type": "frame", "id": "Scenario4", "width": "fill_container", "stroke": {"align": "inside", "thickness": 1, "fill": "$border"}, "layout": "vertical", "gap": 12, "padding": 16, "children": [{"type": "frame", "id": "S4Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "S4Left", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "S4Icon", "width": 14, "height": 14, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "#A855F7"}, {"type": "text", "id": "S4Name", "fill": "$text-primary", "content": "Promo Campaign", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, {"type": "frame", "id": "S4Status", "fill": "$bg-page", "padding": [4, 8], "children": [{"type": "text", "id": "S4StatusText", "fill": "$text-tertiary", "content": "DRAFT", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "700"}]}]}, {"type": "text", "id": "S4Desc", "fill": "$text-secondary", "content": "Gi\u1edbi thi\u1ec7u khuy\u1ebfn m\u00e3i m\u1edbi", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}]}]}]}, {"type": "frame", "id": "ConfigPanel", "width": "fill_container", "height": "fill_container", "layout": "vertical", "children": [{"type": "frame", "id": "ConfigHeader", "width": "fill_container", "fill": "$bg-card", "stroke": {"thickness": 1, "fill": "$border"}, "padding": [16, 24], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "ConfigLeft", "layout": "vertical", "gap": 4, "children": [{"type": "frame", "id": "ConfigTitleRow", "gap": 10, "alignItems": "center", "children": [{"type": "icon_font", "id": "ConfigIcon", "width": 20, "height": 20, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "#A855F7"}, {"type": "text", "id": "ConfigTitle", "fill": "$text-primary", "content": "PRODUCT CONSULTANT", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}]}, {"type": "text", "id": "ConfigDesc", "fill": "$text-secondary", "content": "Powered by Gemini 2.0 Flash", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, {"type": "frame", "id": "ConfigActions", "gap": 12, "children": [{"type": "frame", "id": "TrainBtn", "fill": "#A855F715", "stroke": {"thickness": 1, "fill": "#A855F7"}, "gap": 6, "padding": [10, 16], "alignItems": "center", "children": [{"type": "icon_font", "id": "TrainIcon", "width": 14, "height": 14, "iconFontName": "brain", "iconFontFamily": "lucide", "fill": "#A855F7"}, {"type": "text", "id": "TrainText", "fill": "#A855F7", "content": "TRAIN", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, {"type": "frame", "id": "SaveBtn", "fill": "$yellow-primary", "gap": 6, "padding": [10, 18], "alignItems": "center", "children": [{"type": "icon_font", "id": "SaveIcon", "width": 14, "height": 14, "iconFontName": "save", "iconFontFamily": "lucide", "fill": "$bg-card"}, {"type": "text", "id": "SaveText", "fill": "$bg-card", "content": "SAVE", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}]}]}]}, {"type": "frame", "id": "ConfigBody", "width": "fill_container", "height": "fill_container", "gap": 20, "padding": 24, "children": [{"type": "frame", "id": "SystemPrompt", "width": "fill_container", "height": "fill_container", "fill": "$bg-card", "stroke": {"thickness": 1, "fill": "$border"}, "layout": "vertical", "children": [{"type": "frame", "id": "PromptHeader", "width": "fill_container", "stroke": {"align": "inside", "thickness": 1, "fill": "$border"}, "gap": 10, "padding": [14, 20], "alignItems": "center", "children": [{"type": "icon_font", "id": "PromptIcon", "width": 14, "height": 14, "iconFontName": "file-text", "iconFontFamily": "lucide", "fill": "$yellow-primary"}, {"type": "text", "id": "PromptTitle", "fill": "$text-primary", "content": "SYSTEM PROMPT", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}]}, {"type": "frame", "id": "PromptBody", "width": "fill_container", "height": "fill_container", "padding": 16, "children": [{"type": "text", "id": "PromptText", "fill": "$text-secondary", "content": "B\u1ea1n l\u00e0 tr\u1ee3 l\u00fd b\u00e1n h\u00e0ng chuy\u00ean nghi\u1ec7p c\u1ee7a GoodGo. Nhi\u1ec7m v\u1ee5 c\u1ee7a b\u1ea1n l\u00e0:\n\n1. Ch\u00e0o \u0111\u00f3n kh\u00e1ch h\u00e0ng th\u00e2n thi\u1ec7n\n2. T\u01b0 v\u1ea5n s\u1ea3n ph\u1ea9m ph\u00f9 h\u1ee3p nhu c\u1ea7u\n3. Tr\u1ea3 l\u1eddi c\u00e2u h\u1ecfi v\u1ec1 gi\u00e1 v\u00e0 t\u00ednh n\u0103ng\n4. H\u01b0\u1edbng d\u1eabn \u0111\u1eb7t h\u00e0ng\n\nLu\u00f4n gi\u1eef gi\u1ecdng \u0111i\u1ec7u l\u1ecbch s\u1ef1, chuy\u00ean nghi\u1ec7p v\u00e0 h\u1eefu \u00edch.", "lineHeight": 1.6, "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}, {"type": "frame", "id": "TrainingData", "width": "fill_container", "height": "fill_container", "fill": "$bg-card", "stroke": {"thickness": 1, "fill": "$border"}, "layout": "vertical", "children": [{"type": "frame", "id": "TrainingHeader", "width": "fill_container", "stroke": {"align": "inside", "thickness": 1, "fill": "$border"}, "padding": [14, 20], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "TrainingLeft", "gap": 10, "alignItems": "center", "children": [{"type": "icon_font", "id": "TrainingIcon", "width": 14, "height": 14, "iconFontName": "database", "iconFontFamily": "lucide", "fill": "$yellow-primary"}, {"type": "text", "id": "TrainingTitle", "fill": "$text-primary", "content": "TRAINING DATA", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}]}, {"type": "frame", "id": "UploadBtn", "stroke": {"thickness": 1, "fill": "$border"}, "gap": 6, "padding": [6, 10], "alignItems": "center", "children": [{"type": "icon_font", "id": "UploadIcon", "width": 12, "height": 12, "iconFontName": "upload", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "UploadText", "fill": "$text-secondary", "content": "UPLOAD", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}]}, {"type": "frame", "id": "TrainingBody", "width": "fill_container", "height": "fill_container", "layout": "vertical", "gap": 10, "padding": 16, "children": [{"type": "frame", "id": "DataFile1", "width": "fill_container", "fill": "$bg-page", "stroke": {"thickness": 1, "fill": "$border"}, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "DF1Left", "gap": 10, "alignItems": "center", "children": [{"type": "icon_font", "id": "DF1Icon", "width": 14, "height": 14, "iconFontName": "file-text", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "DF1Name", "fill": "$text-primary", "content": "products.json", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}]}, {"type": "text", "id": "DF1Size", "fill": "$text-tertiary", "content": "2.4 MB", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"}]}, {"type": "frame", "id": "DataFile2", "width": "fill_container", "fill": "$bg-page", "stroke": {"thickness": 1, "fill": "$border"}, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "DF2Left", "gap": 10, "alignItems": "center", "children": [{"type": "icon_font", "id": "DF2Icon", "width": 14, "height": 14, "iconFontName": "file-text", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "DF2Name", "fill": "$text-primary", "content": "faq-responses.csv", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}]}, {"type": "text", "id": "DF2Size", "fill": "$text-tertiary", "content": "856 KB", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"}]}, {"type": "frame", "id": "DataFile3", "width": "fill_container", "fill": "$bg-page", "stroke": {"thickness": 1, "fill": "$border"}, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "DF3Left", "gap": 10, "alignItems": "center", "children": [{"type": "icon_font", "id": "DF3Icon", "width": 14, "height": 14, "iconFontName": "file-text", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "DF3Name", "fill": "$text-primary", "content": "chat-history.json", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}]}, {"type": "text", "id": "DF3Size", "fill": "$text-tertiary", "content": "5.1 MB", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"}]}]}]}]}]}, {"type": "frame", "id": "TestPanel", "width": 280, "height": "fill_container", "fill": "$bg-card", "stroke": {"align": "inside", "thickness": 1, "fill": "$border"}, "layout": "vertical", "children": [{"type": "frame", "id": "TestHeader", "width": "fill_container", "stroke": {"align": "inside", "thickness": 1, "fill": "$border"}, "gap": 10, "padding": [16, 20], "alignItems": "center", "children": [{"type": "icon_font", "id": "TestIcon", "width": 16, "height": 16, "iconFontName": "message-square", "iconFontFamily": "lucide", "fill": "$yellow-primary"}, {"type": "text", "id": "TestTitle", "fill": "$text-primary", "content": "TEST CHAT", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}]}, {"type": "frame", "id": "TestMessages", "width": "fill_container", "height": "fill_container", "layout": "vertical", "gap": 12, "padding": 16, "children": [{"type": "frame", "id": "UserMsg1", "width": "fill_container", "justifyContent": "end", "children": [{"type": "frame", "id": "UserBubble1", "fill": "$yellow-primary", "layout": "vertical", "gap": 4, "padding": [10, 14], "children": [{"type": "text", "id": "UserText1", "fill": "$bg-card", "content": "Cho m\u00ecnh h\u1ecfi s\u1ea3n ph\u1ea9m X gi\u00e1 bao nhi\u00eau?", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}]}, {"type": "frame", "id": "BotMsg1", "width": "fill_container", "gap": 10, "children": [{"type": "frame", "id": "BotAvatar", "width": 28, "height": 28, "fill": "#A855F720", "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "BotAvatarIcon", "width": 14, "height": 14, "iconFontName": "bot", "iconFontFamily": "lucide", "fill": "#A855F7"}]}, {"type": "frame", "id": "BotBubble1", "width": "fill_container", "fill": "$bg-page", "stroke": {"thickness": 1, "fill": "$border"}, "layout": "vertical", "gap": 8, "padding": [10, 14], "children": [{"type": "text", "id": "BotText1", "fill": "$text-primary", "content": "Ch\u00e0o b\u1ea1n! \ud83d\udc4b D\u1ea1 s\u1ea3n ph\u1ea9m X hi\u1ec7n \u0111ang c\u00f3 gi\u00e1:\n\n\u2022 Size S: 250.000\u0111\n\u2022 Size M: 290.000\u0111\n\u2022 Size L: 350.000\u0111\n\nB\u1ea1n mu\u1ed1n m\u00ecnh t\u01b0 v\u1ea5n th\u00eam v\u1ec1 s\u1ea3n ph\u1ea9m kh\u00f4ng \u1ea1?", "lineHeight": 1.5, "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}, {"type": "frame", "id": "BotInfo", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "BotInfoIcon", "width": 10, "height": 10, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "#A855F7"}, {"type": "text", "id": "BotInfoText", "fill": "#A855F7", "content": "Gemini 2.0", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"}]}]}]}]}, {"type": "frame", "id": "TestInput", "width": "fill_container", "stroke": {"align": "inside", "thickness": 1, "fill": "$border"}, "gap": 10, "padding": [12, 16], "alignItems": "center", "children": [{"type": "frame", "id": "TestInputField", "width": "fill_container", "height": 36, "fill": "$bg-page", "stroke": {"thickness": 1, "fill": "$border"}, "padding": [0, 12], "alignItems": "center", "children": [{"type": "text", "id": "TestInputPlaceholder", "fill": "$text-tertiary", "content": "Test a message...", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, {"type": "frame", "id": "TestSendBtn", "width": 36, "height": 36, "fill": "$yellow-primary", "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "TestSendIcon", "width": 16, "height": 16, "iconFontName": "send", "iconFontFamily": "lucide", "fill": "$bg-card"}]}]}]}]}]}], "variables": {"bg-page": {"type": "color", "value": "#18181B"}, "bg-card": {"type": "color", "value": "#0F0F10"}, "yellow-primary": {"type": "color", "value": "#FACC15"}, "text-primary": {"type": "color", "value": "#FAFAFA"}, "text-secondary": {"type": "color", "value": "#71717A"}, "text-tertiary": {"type": "color", "value": "#52525B"}, "border": {"type": "color", "value": "#27272A"}, "success": {"type": "color", "value": "#22C55E"}, "warning": {"type": "color", "value": "#FACC15"}, "error": {"type": "color", "value": "#EF4444"}, "info": {"type": "color", "value": "#3B82F6"}}} \ No newline at end of file diff --git a/pencil-design/src/pages/tMarketing/desktop/ai-content-studio.pen b/pencil-design/src/pages/tMarketing/desktop/ai-content-studio.pen deleted file mode 100644 index 9814d149..00000000 --- a/pencil-design/src/pages/tMarketing/desktop/ai-content-studio.pen +++ /dev/null @@ -1,1868 +0,0 @@ -{ - "version": "2.7", - "children": [ - { - "type": "frame", - "id": "AIContentStudioScreen", - "x": 0, - "y": 0, - "name": "Screen/AI Content Studio", - "reusable": true, - "clip": true, - "width": 1440, - "height": 900, - "fill": "$bg-page", - "children": [ - { - "type": "frame", - "id": "Sidebar", - "width": 240, - "height": "fill_container", - "fill": "$bg-card", - "stroke": { - "align": "inside", - "thickness": 3, - "fill": "$yellow-primary" - }, - "layout": "vertical", - "padding": [ - 24, - 16 - ], - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "SidebarTop", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "LogoSection", - "width": "fill_container", - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$border" - }, - "gap": 8, - "padding": [ - 0, - 0, - 16, - 0 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "LogoMark", - "width": 32, - "height": 32, - "fill": "$yellow-primary", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "LogoLetter", - "fill": "$bg-card", - "content": "M", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "LogoText", - "fill": "$text-primary", - "content": "tMARKETING", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "NavSection", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "frame", - "id": "NavHub", - "width": "fill_container", - "gap": 10, - "padding": [ - 10, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NavHubNum", - "fill": "$text-tertiary", - "content": "01", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "NavHubLabel", - "fill": "$text-secondary", - "content": "HUB", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "NavChat", - "width": "fill_container", - "gap": 10, - "padding": [ - 10, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NavChatNum", - "fill": "$text-tertiary", - "content": "02", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "NavChatLabel", - "fill": "$text-secondary", - "content": "CHAT", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "NavCRM", - "width": "fill_container", - "gap": 10, - "padding": [ - 10, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NavCRMNum", - "fill": "$text-tertiary", - "content": "03", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "NavCRMLabel", - "fill": "$text-secondary", - "content": "CRM", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "NavAI", - "width": "fill_container", - "fill": "#FACC1515", - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$yellow-primary" - }, - "gap": 10, - "padding": [ - 10, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NavAINum", - "fill": "$yellow-primary", - "content": "04", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "NavAILabel", - "fill": "$text-primary", - "content": "AI STUDIO", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NavStats", - "width": "fill_container", - "gap": 10, - "padding": [ - 10, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NavStatsNum", - "fill": "$text-tertiary", - "content": "05", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "NavStatsLabel", - "fill": "$text-secondary", - "content": "ANALYTICS", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SidebarBottom", - "width": "fill_container", - "layout": "vertical", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "AICredits", - "width": "fill_container", - "fill": "#A855F715", - "stroke": { - "thickness": 1, - "fill": "#A855F730" - }, - "layout": "vertical", - "gap": 12, - "padding": 16, - "children": [ - { - "type": "frame", - "id": "CreditsHeader", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CreditsIcon", - "width": 14, - "height": 14, - "iconFontName": "sparkles", - "iconFontFamily": "lucide", - "fill": "#A855F7" - }, - { - "type": "text", - "id": "CreditsLabel", - "fill": "#A855F7", - "content": "AI CREDITS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "CreditsValue", - "fill": "$text-primary", - "content": "450 / 500", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "CreditsBar", - "width": "fill_container", - "height": 4, - "fill": "$bg-page", - "children": [ - { - "type": "frame", - "id": "CreditsFill", - "width": "fit_content(0)", - "height": 4, - "fill": "#A855F7" - } - ] - } - ] - }, - { - "type": "frame", - "id": "AccountRow", - "width": "fill_container", - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$border" - }, - "gap": 10, - "padding": [ - 20, - 0, - 0, - 0 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Avatar", - "width": 32, - "height": 32, - "fill": "$border", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "AvatarText", - "fill": "$text-primary", - "content": "AD", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "UserName", - "fill": "$text-primary", - "content": "ADMIN", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "icon_font", - "id": "ChevronIcon", - "width": 14, - "height": 14, - "iconFontName": "chevron-right", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "MainContent", - "width": "fill_container", - "height": "fill_container", - "fill": "$bg-page", - "children": [ - { - "type": "frame", - "id": "ContentArea", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "PageHeader", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "HeaderLeft", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "PageTitle", - "fill": "$text-primary", - "content": "AI CONTENT STUDIO", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "700" - }, - { - "type": "text", - "id": "PageSubtitle", - "fill": "$text-secondary", - "content": "Generate content with Google Gemini AI", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "HeaderActions", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "DraftsBtn", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "gap": 6, - "padding": [ - 8, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "DraftsIcon", - "width": 14, - "height": 14, - "iconFontName": "file-text", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "DraftsText", - "fill": "$text-secondary", - "content": "DRAFTS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "ScheduleBtn", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "gap": 6, - "padding": [ - 8, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ScheduleIcon", - "width": 14, - "height": 14, - "iconFontName": "calendar", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "ScheduleText", - "fill": "$text-secondary", - "content": "SCHEDULE", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ContentCalendar", - "width": "fill_container", - "fill": "$bg-card", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "CalendarHeader", - "width": "fill_container", - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$border" - }, - "padding": [ - 16, - 20 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CalendarHeaderLeft", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CalendarIcon", - "width": 16, - "height": 16, - "iconFontName": "calendar", - "iconFontFamily": "lucide", - "fill": "$yellow-primary" - }, - { - "type": "text", - "id": "CalendarTitle", - "fill": "$text-primary", - "content": "CONTENT CALENDAR", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "CalendarNav", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CalendarPrev", - "width": 28, - "height": 28, - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PrevIcon", - "width": 14, - "height": 14, - "iconFontName": "chevron-left", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - }, - { - "type": "text", - "id": "CalendarMonth", - "fill": "$text-primary", - "content": "FEBRUARY 2026", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "CalendarNext", - "width": 28, - "height": 28, - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "NextIcon", - "width": 14, - "height": 14, - "iconFontName": "chevron-right", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "CalendarDays", - "width": "fill_container", - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$border" - }, - "padding": [ - 8, - 20 - ], - "children": [ - { - "type": "frame", - "id": "Day1", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "text", - "id": "Day1Text", - "fill": "$text-tertiary", - "content": "SUN", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "Day2", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "text", - "id": "Day2Text", - "fill": "$text-tertiary", - "content": "MON", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "Day3", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "text", - "id": "Day3Text", - "fill": "$text-tertiary", - "content": "TUE", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "Day4", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "text", - "id": "Day4Text", - "fill": "$text-tertiary", - "content": "WED", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "Day5", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "text", - "id": "Day5Text", - "fill": "$text-tertiary", - "content": "THU", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "Day6", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "text", - "id": "Day6Text", - "fill": "$text-tertiary", - "content": "FRI", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "Day7", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "text", - "id": "Day7Text", - "fill": "$text-tertiary", - "content": "SAT", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - } - ] - } - ] - }, - { - "type": "frame", - "id": "CalendarGrid", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "padding": [ - 12, - 20 - ], - "children": [ - { - "type": "frame", - "id": "Week1", - "width": "fill_container", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "Cell1", - "width": "fill_container", - "height": 60, - "fill": "$bg-page", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "layout": "vertical", - "gap": 4, - "padding": 8, - "children": [ - { - "type": "text", - "id": "Cell1Date", - "fill": "$text-tertiary", - "content": "1", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "Cell2", - "width": "fill_container", - "height": 60, - "fill": "$bg-page", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "layout": "vertical", - "gap": 4, - "padding": 8, - "children": [ - { - "type": "text", - "id": "Cell2Date", - "fill": "$text-tertiary", - "content": "2", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "Cell3", - "width": "fill_container", - "height": 60, - "fill": "$bg-page", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "layout": "vertical", - "gap": 4, - "padding": 8, - "children": [ - { - "type": "text", - "id": "Cell3Date", - "fill": "$text-tertiary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "Cell4", - "width": "fill_container", - "height": 60, - "fill": "$bg-page", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "layout": "vertical", - "gap": 4, - "padding": 8, - "children": [ - { - "type": "text", - "id": "Cell4Date", - "fill": "$text-tertiary", - "content": "4", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "Cell5", - "width": "fill_container", - "height": 60, - "fill": "$bg-page", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "layout": "vertical", - "gap": 4, - "padding": 8, - "children": [ - { - "type": "text", - "id": "Cell5Date", - "fill": "$text-tertiary", - "content": "5", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "Cell6", - "width": "fill_container", - "height": 60, - "fill": "#FACC1510", - "stroke": { - "thickness": 1, - "fill": "$yellow-primary" - }, - "layout": "vertical", - "gap": 4, - "padding": 8, - "children": [ - { - "type": "text", - "id": "Cell6Date", - "fill": "$yellow-primary", - "content": "6", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "700" - }, - { - "type": "text", - "id": "Cell6Event", - "fill": "$text-secondary", - "content": "FB Post", - "fontFamily": "Roboto", - "fontSize": 9, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "Cell7", - "width": "fill_container", - "height": 60, - "fill": "$bg-page", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "layout": "vertical", - "gap": 4, - "padding": 8, - "children": [ - { - "type": "text", - "id": "Cell7Date", - "fill": "$text-tertiary", - "content": "7", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "Week2", - "width": "fill_container", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "Cell8", - "width": "fill_container", - "height": 60, - "fill": "#3B82F610", - "stroke": { - "thickness": 1, - "fill": "#3B82F6" - }, - "layout": "vertical", - "gap": 4, - "padding": 8, - "children": [ - { - "type": "text", - "id": "Cell8Date", - "fill": "#3B82F6", - "content": "8", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "700" - }, - { - "type": "text", - "id": "Cell8Event", - "fill": "$text-secondary", - "content": "IG Reel", - "fontFamily": "Roboto", - "fontSize": 9, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "Cell9", - "width": "fill_container", - "height": 60, - "fill": "$bg-page", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "layout": "vertical", - "gap": 4, - "padding": 8, - "children": [ - { - "type": "text", - "id": "Cell9Date", - "fill": "$text-tertiary", - "content": "9", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "Cell10", - "width": "fill_container", - "height": 60, - "fill": "#A855F710", - "stroke": { - "thickness": 1, - "fill": "#A855F7" - }, - "layout": "vertical", - "gap": 4, - "padding": 8, - "children": [ - { - "type": "text", - "id": "Cell10Date", - "fill": "#A855F7", - "content": "10", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "700" - }, - { - "type": "text", - "id": "Cell10Event", - "fill": "$text-secondary", - "content": "AI Banner", - "fontFamily": "Roboto", - "fontSize": 9, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "Cell11", - "width": "fill_container", - "height": 60, - "fill": "$bg-page", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "layout": "vertical", - "gap": 4, - "padding": 8, - "children": [ - { - "type": "text", - "id": "Cell11Date", - "fill": "$text-tertiary", - "content": "11", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "Cell12", - "width": "fill_container", - "height": 60, - "fill": "$bg-page", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "layout": "vertical", - "gap": 4, - "padding": 8, - "children": [ - { - "type": "text", - "id": "Cell12Date", - "fill": "$text-tertiary", - "content": "12", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "Cell13", - "width": "fill_container", - "height": 60, - "fill": "$bg-page", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "layout": "vertical", - "gap": 4, - "padding": 8, - "children": [ - { - "type": "text", - "id": "Cell13Date", - "fill": "$text-tertiary", - "content": "13", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "Cell14", - "width": "fill_container", - "height": 60, - "fill": "#22C55E10", - "stroke": { - "thickness": 1, - "fill": "#22C55E" - }, - "layout": "vertical", - "gap": 4, - "padding": 8, - "children": [ - { - "type": "text", - "id": "Cell14Date", - "fill": "#22C55E", - "content": "14", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "700" - }, - { - "type": "text", - "id": "Cell14Event", - "fill": "$text-secondary", - "content": "Valentine", - "fontFamily": "Roboto", - "fontSize": 9, - "fontWeight": "normal" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "UpcomingPosts", - "width": "fill_container", - "height": "fill_container", - "fill": "$bg-card", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "UpcomingHeader", - "width": "fill_container", - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$border" - }, - "gap": 10, - "padding": [ - 14, - 20 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "UpcomingIcon", - "width": 14, - "height": 14, - "iconFontName": "clock", - "iconFontFamily": "lucide", - "fill": "$yellow-primary" - }, - { - "type": "text", - "id": "UpcomingTitle", - "fill": "$text-primary", - "content": "UPCOMING POSTS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "UpcomingList", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "gap": 8, - "padding": [ - 12, - 16 - ], - "children": [ - { - "type": "frame", - "id": "Post1", - "width": "fill_container", - "fill": "$bg-page", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "gap": 12, - "padding": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Post1Date", - "width": 48, - "layout": "vertical", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "Post1Day", - "fill": "$yellow-primary", - "content": "06", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "700" - }, - { - "type": "text", - "id": "Post1Month", - "fill": "$text-tertiary", - "content": "FEB", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "Post1Info", - "width": "fill_container", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "Post1Title", - "fill": "$text-primary", - "content": "Spring Collection Announcement", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "Post1Platforms", - "fill": "#3B82F6", - "content": "FB • IG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "Post1Time", - "fill": "$text-tertiary", - "content": "10:00 AM", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "Post2", - "width": "fill_container", - "fill": "$bg-page", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "gap": 12, - "padding": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Post2Date", - "width": 48, - "layout": "vertical", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "Post2Day", - "fill": "#A855F7", - "content": "10", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "700" - }, - { - "type": "text", - "id": "Post2Month", - "fill": "$text-tertiary", - "content": "FEB", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "Post2Info", - "width": "fill_container", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "Post2Title", - "fill": "$text-primary", - "content": "AI Generated Banner", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "Post2Badge", - "gap": 4, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "Post2AIIcon", - "width": 10, - "height": 10, - "iconFontName": "sparkles", - "iconFontFamily": "lucide", - "fill": "#A855F7" - }, - { - "type": "text", - "id": "Post2AIText", - "fill": "#A855F7", - "content": "GEMINI", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "text", - "id": "Post2Time", - "fill": "$text-tertiary", - "content": "2:00 PM", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "normal" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "AIPanel", - "width": 380, - "height": "fill_container", - "fill": "$bg-card", - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$border" - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "AIPanelHeader", - "width": "fill_container", - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$border" - }, - "gap": 10, - "padding": [ - 20, - 24 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "AIHeaderIcon", - "width": 18, - "height": 18, - "iconFontName": "sparkles", - "iconFontFamily": "lucide", - "fill": "#A855F7" - }, - { - "type": "text", - "id": "AIHeaderTitle", - "fill": "$text-primary", - "content": "AI GENERATION", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "AIPromptSection", - "width": "fill_container", - "layout": "vertical", - "gap": 16, - "padding": 20, - "children": [ - { - "type": "text", - "id": "PromptLabel", - "fill": "$text-secondary", - "content": "PROMPT", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "PromptInput", - "width": "fill_container", - "height": 100, - "fill": "$bg-page", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "padding": 12, - "children": [ - { - "type": "text", - "id": "PromptPlaceholder", - "fill": "$text-tertiary", - "content": "Describe the content you want to generate...", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "StyleLabel", - "fill": "$text-secondary", - "content": "STYLE", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "StyleOptions", - "width": "fill_container", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "StylePro", - "fill": "#A855F715", - "stroke": { - "thickness": 1, - "fill": "#A855F7" - }, - "padding": [ - 8, - 12 - ], - "children": [ - { - "type": "text", - "id": "StyleProText", - "fill": "#A855F7", - "content": "PRO", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "StyleMinimal", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "padding": [ - 8, - 12 - ], - "children": [ - { - "type": "text", - "id": "StyleMinimalText", - "fill": "$text-secondary", - "content": "MINIMAL", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "StyleVibrant", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "padding": [ - 8, - 12 - ], - "children": [ - { - "type": "text", - "id": "StyleVibrantText", - "fill": "$text-secondary", - "content": "VIBRANT", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "text", - "id": "OutputLabel", - "fill": "$text-secondary", - "content": "OUTPUT", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "OutputOptions", - "width": "fill_container", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "OutPost", - "fill": "$yellow-primary", - "gap": 6, - "padding": [ - 8, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "OutPostIcon", - "width": 12, - "height": 12, - "iconFontName": "file-text", - "iconFontFamily": "lucide", - "fill": "$bg-card" - }, - { - "type": "text", - "id": "OutPostText", - "fill": "$bg-card", - "content": "POST", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "OutImage", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "gap": 6, - "padding": [ - 8, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "OutImageIcon", - "width": 12, - "height": 12, - "iconFontName": "image", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "OutImageText", - "fill": "$text-secondary", - "content": "IMAGE", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "OutVideo", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "gap": 6, - "padding": [ - 8, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "OutVideoIcon", - "width": 12, - "height": 12, - "iconFontName": "video", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "OutVideoText", - "fill": "$text-secondary", - "content": "VIDEO", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PreviewSection", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "gap": 12, - "padding": 20, - "children": [ - { - "type": "text", - "id": "PreviewLabel", - "fill": "$text-secondary", - "content": "PREVIEW", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "PreviewBox", - "width": "fill_container", - "height": "fill_container", - "fill": "$bg-page", - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "#A855F730" - }, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PreviewAIIcon", - "width": 32, - "height": 32, - "iconFontName": "sparkles", - "iconFontFamily": "lucide", - "fill": "#A855F730" - }, - { - "type": "text", - "id": "PreviewEmpty", - "fill": "$text-tertiary", - "content": "AI preview will appear here", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "GenerateBtn", - "width": "fill_container", - "fill": "#A855F7", - "gap": 8, - "padding": [ - 16, - 0 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "GenerateIcon", - "width": 16, - "height": 16, - "iconFontName": "wand-2", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "GenerateText", - "fill": "#FFFFFF", - "content": "GENERATE WITH GEMINI", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "700" - } - ] - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-page": { - "type": "color", - "value": "#18181B" - }, - "bg-card": { - "type": "color", - "value": "#0F0F10" - }, - "yellow-primary": { - "type": "color", - "value": "#FACC15" - }, - "text-primary": { - "type": "color", - "value": "#FAFAFA" - }, - "text-secondary": { - "type": "color", - "value": "#71717A" - }, - "text-tertiary": { - "type": "color", - "value": "#52525B" - }, - "border": { - "type": "color", - "value": "#27272A" - }, - "success": { - "type": "color", - "value": "#22C55E" - }, - "warning": { - "type": "color", - "value": "#FACC15" - }, - "error": { - "type": "color", - "value": "#EF4444" - }, - "info": { - "type": "color", - "value": "#3B82F6" - } - } -} \ No newline at end of file diff --git a/pencil-design/src/pages/tMarketing/desktop/analytics-dashboard.pen b/pencil-design/src/pages/tMarketing/desktop/analytics-dashboard.pen deleted file mode 100644 index a736880a..00000000 --- a/pencil-design/src/pages/tMarketing/desktop/analytics-dashboard.pen +++ /dev/null @@ -1 +0,0 @@ -{"version": "2.7", "children": [{"type": "frame", "id": "AnalyticsDashboardScreen", "x": 0, "y": 0, "name": "Screen/Analytics Dashboard", "reusable": true, "clip": true, "width": 1440, "height": 900, "fill": "$bg-page", "children": [{"type": "frame", "id": "Sidebar", "width": 240, "height": "fill_container", "fill": "$bg-card", "stroke": {"align": "inside", "thickness": 3, "fill": "$yellow-primary"}, "layout": "vertical", "padding": [24, 16], "justifyContent": "space_between", "children": [{"type": "frame", "id": "SidebarTop", "width": "fill_container", "layout": "vertical", "gap": 32, "children": [{"type": "frame", "id": "LogoSection", "width": "fill_container", "stroke": {"align": "inside", "thickness": 1, "fill": "$border"}, "gap": 8, "padding": [0, 0, 16, 0], "alignItems": "center", "children": [{"type": "frame", "id": "LogoMark", "width": 32, "height": 32, "fill": "$yellow-primary", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "LogoLetter", "fill": "$bg-card", "content": "M", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}]}, {"type": "text", "id": "LogoText", "fill": "$text-primary", "content": "tMARKETING", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}, {"type": "frame", "id": "NavSection", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [{"type": "frame", "id": "NavHub", "width": "fill_container", "gap": 10, "padding": [10, 12], "alignItems": "center", "children": [{"type": "text", "id": "NavHubNum", "fill": "$text-tertiary", "content": "01", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, {"type": "text", "id": "NavHubLabel", "fill": "$text-secondary", "content": "HUB", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, {"type": "frame", "id": "NavChat", "width": "fill_container", "gap": 10, "padding": [10, 12], "alignItems": "center", "children": [{"type": "text", "id": "NavChatNum", "fill": "$text-tertiary", "content": "02", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, {"type": "text", "id": "NavChatLabel", "fill": "$text-secondary", "content": "CHAT", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, {"type": "frame", "id": "NavCRM", "width": "fill_container", "gap": 10, "padding": [10, 12], "alignItems": "center", "children": [{"type": "text", "id": "NavCRMNum", "fill": "$text-tertiary", "content": "03", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, {"type": "text", "id": "NavCRMLabel", "fill": "$text-secondary", "content": "CRM", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, {"type": "frame", "id": "NavAI", "width": "fill_container", "gap": 10, "padding": [10, 12], "alignItems": "center", "children": [{"type": "text", "id": "NavAINum", "fill": "$text-tertiary", "content": "04", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, {"type": "text", "id": "NavAILabel", "fill": "$text-secondary", "content": "AI STUDIO", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, {"type": "frame", "id": "NavStats", "width": "fill_container", "fill": "#FACC1515", "stroke": {"align": "inside", "thickness": 1, "fill": "$yellow-primary"}, "gap": 10, "padding": [10, 12], "alignItems": "center", "children": [{"type": "text", "id": "NavStatsNum", "fill": "$yellow-primary", "content": "05", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, {"type": "text", "id": "NavStatsLabel", "fill": "$text-primary", "content": "ANALYTICS", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}]}]}, {"type": "frame", "id": "SidebarBottom", "width": "fill_container", "layout": "vertical", "gap": 20, "children": [{"type": "frame", "id": "InsightBox", "width": "fill_container", "fill": "#22C55E15", "stroke": {"thickness": 1, "fill": "#22C55E30"}, "layout": "vertical", "gap": 8, "padding": 16, "children": [{"type": "frame", "id": "InsightHeader", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "InsightIcon", "width": 14, "height": 14, "iconFontName": "trending-up", "iconFontFamily": "lucide", "fill": "$success"}, {"type": "text", "id": "InsightLabel", "fill": "$success", "content": "GROWING", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}]}, {"type": "text", "id": "InsightValue", "fill": "$text-primary", "content": "+24% vs last week", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, {"type": "frame", "id": "AccountRow", "width": "fill_container", "stroke": {"align": "inside", "thickness": 1, "fill": "$border"}, "gap": 10, "padding": [20, 0, 0, 0], "alignItems": "center", "children": [{"type": "frame", "id": "Avatar", "width": 32, "height": 32, "fill": "$border", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "AvatarText", "fill": "$text-primary", "content": "AD", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}]}, {"type": "text", "id": "UserName", "fill": "$text-primary", "content": "ADMIN", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, {"type": "icon_font", "id": "ChevronIcon", "width": 14, "height": 14, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"}]}]}]}, {"type": "frame", "id": "MainContent", "width": "fill_container", "height": "fill_container", "fill": "$bg-page", "layout": "vertical", "gap": 24, "padding": [32, 40], "children": [{"type": "frame", "id": "PageHeader", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "HeaderLeft", "layout": "vertical", "gap": 4, "children": [{"type": "text", "id": "PageTitle", "fill": "$text-primary", "content": "ANALYTICS", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}, {"type": "text", "id": "PageSubtitle", "fill": "$text-secondary", "content": "AI-powered insights and performance metrics", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}]}, {"type": "frame", "id": "HeaderActions", "gap": 12, "children": [{"type": "frame", "id": "DateRange", "stroke": {"thickness": 1, "fill": "$border"}, "gap": 8, "padding": [10, 14], "alignItems": "center", "children": [{"type": "icon_font", "id": "CalendarIcon", "width": 14, "height": 14, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "DateText", "fill": "$text-secondary", "content": "LAST 7 DAYS", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}, {"type": "icon_font", "id": "DateArrow", "width": 12, "height": 12, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"}]}, {"type": "frame", "id": "ExportBtn", "fill": "$yellow-primary", "gap": 6, "padding": [10, 18], "alignItems": "center", "children": [{"type": "icon_font", "id": "ExportIcon", "width": 14, "height": 14, "iconFontName": "download", "iconFontFamily": "lucide", "fill": "$bg-card"}, {"type": "text", "id": "ExportText", "fill": "$bg-card", "content": "EXPORT", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}]}]}]}, {"type": "frame", "id": "KPICards", "width": "fill_container", "gap": 16, "children": [{"type": "frame", "id": "KPIReach", "width": "fill_container", "fill": "$bg-card", "stroke": {"thickness": 1, "fill": "$border"}, "layout": "vertical", "gap": 12, "padding": 20, "children": [{"type": "frame", "id": "KPIReachHeader", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "KPIReachLabel", "fill": "$text-secondary", "content": "TOTAL REACH", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}, {"type": "icon_font", "id": "KPIReachIcon", "width": 14, "height": 14, "iconFontName": "eye", "iconFontFamily": "lucide", "fill": "$text-tertiary"}]}, {"type": "text", "id": "KPIReachValue", "fill": "$text-primary", "content": "245.8K", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, {"type": "frame", "id": "KPIReachChange", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "KPIReachArrow", "width": 12, "height": 12, "iconFontName": "arrow-up-right", "iconFontFamily": "lucide", "fill": "$success"}, {"type": "text", "id": "KPIReachPercent", "fill": "$success", "content": "+18.2%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}]}, {"type": "frame", "id": "KPIEngage", "width": "fill_container", "fill": "$bg-card", "stroke": {"thickness": 1, "fill": "$border"}, "layout": "vertical", "gap": 12, "padding": 20, "children": [{"type": "frame", "id": "KPIEngageHeader", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "KPIEngageLabel", "fill": "$text-secondary", "content": "ENGAGEMENT", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}, {"type": "icon_font", "id": "KPIEngageIcon", "width": 14, "height": 14, "iconFontName": "heart", "iconFontFamily": "lucide", "fill": "$text-tertiary"}]}, {"type": "text", "id": "KPIEngageValue", "fill": "$text-primary", "content": "14.2%", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, {"type": "frame", "id": "KPIEngageChange", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "KPIEngageArrow", "width": 12, "height": 12, "iconFontName": "arrow-up-right", "iconFontFamily": "lucide", "fill": "$success"}, {"type": "text", "id": "KPIEngagePercent", "fill": "$success", "content": "+5.4%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}]}, {"type": "frame", "id": "KPIConversions", "width": "fill_container", "fill": "$bg-card", "stroke": {"thickness": 1, "fill": "$border"}, "layout": "vertical", "gap": 12, "padding": 20, "children": [{"type": "frame", "id": "KPIConversionsHeader", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "KPIConversionsLabel", "fill": "$text-secondary", "content": "CONVERSIONS", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}, {"type": "icon_font", "id": "KPIConversionsIcon", "width": 14, "height": 14, "iconFontName": "target", "iconFontFamily": "lucide", "fill": "$text-tertiary"}]}, {"type": "text", "id": "KPIConversionsValue", "fill": "$text-primary", "content": "1,842", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, {"type": "frame", "id": "KPIConversionsChange", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "KPIConversionsArrow", "width": 12, "height": 12, "iconFontName": "arrow-up-right", "iconFontFamily": "lucide", "fill": "$success"}, {"type": "text", "id": "KPIConversionsPercent", "fill": "$success", "content": "+32.1%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}]}, {"type": "frame", "id": "KPIROI", "width": "fill_container", "fill": "$bg-card", "stroke": {"thickness": 1, "fill": "$border"}, "layout": "vertical", "gap": 12, "padding": 20, "children": [{"type": "frame", "id": "KPIROIHeader", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "KPIROILabel", "fill": "$text-secondary", "content": "ROI", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}, {"type": "icon_font", "id": "KPIROIIcon", "width": 14, "height": 14, "iconFontName": "dollar-sign", "iconFontFamily": "lucide", "fill": "$text-tertiary"}]}, {"type": "text", "id": "KPIROIValue", "fill": "$yellow-primary", "content": "324%", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, {"type": "frame", "id": "KPIROIChange", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "KPIROIArrow", "width": 12, "height": 12, "iconFontName": "arrow-up-right", "iconFontFamily": "lucide", "fill": "$success"}, {"type": "text", "id": "KPIROIPercent", "fill": "$success", "content": "+48%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}]}]}, {"type": "frame", "id": "ChartsRow", "width": "fill_container", "height": "fill_container", "gap": 20, "children": [{"type": "frame", "id": "TrendChart", "width": "fill_container", "height": "fill_container", "fill": "$bg-card", "stroke": {"thickness": 1, "fill": "$border"}, "layout": "vertical", "children": [{"type": "frame", "id": "TrendHeader", "width": "fill_container", "stroke": {"align": "inside", "thickness": 1, "fill": "$border"}, "padding": [16, 20], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "TrendHeaderLeft", "gap": 10, "alignItems": "center", "children": [{"type": "icon_font", "id": "TrendIcon", "width": 16, "height": 16, "iconFontName": "trending-up", "iconFontFamily": "lucide", "fill": "$yellow-primary"}, {"type": "text", "id": "TrendTitle", "fill": "$text-primary", "content": "PERFORMANCE TREND", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}]}, {"type": "frame", "id": "TrendLegend", "gap": 16, "children": [{"type": "frame", "id": "LegendReach", "gap": 6, "alignItems": "center", "children": [{"type": "frame", "id": "LegendReachDot", "width": 8, "height": 8, "fill": "$yellow-primary"}, {"type": "text", "id": "LegendReachText", "fill": "$text-secondary", "content": "REACH", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"}]}, {"type": "frame", "id": "LegendEngage", "gap": 6, "alignItems": "center", "children": [{"type": "frame", "id": "LegendEngageDot", "width": 8, "height": 8, "fill": "#3B82F6"}, {"type": "text", "id": "LegendEngageText", "fill": "$text-secondary", "content": "ENGAGE", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"}]}]}]}, {"type": "frame", "id": "ChartArea", "width": "fill_container", "height": "fill_container", "layout": "vertical", "gap": 16, "padding": 20, "justifyContent": "center", "alignItems": "center", "children": [{"type": "frame", "id": "ChartBars", "width": "fill_container", "height": "fill_container", "gap": 12, "alignItems": "end", "children": [{"type": "frame", "id": "Bar1", "width": "fill_container", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [{"type": "frame", "id": "Bar1Fill", "width": 24, "height": 80, "fill": "$yellow-primary"}, {"type": "text", "id": "Bar1Label", "fill": "$text-tertiary", "content": "MON", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "normal"}]}, {"type": "frame", "id": "Bar2", "width": "fill_container", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [{"type": "frame", "id": "Bar2Fill", "width": 24, "height": 100, "fill": "$yellow-primary"}, {"type": "text", "id": "Bar2Label", "fill": "$text-tertiary", "content": "TUE", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "normal"}]}, {"type": "frame", "id": "Bar3", "width": "fill_container", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [{"type": "frame", "id": "Bar3Fill", "width": 24, "height": 65, "fill": "$yellow-primary"}, {"type": "text", "id": "Bar3Label", "fill": "$text-tertiary", "content": "WED", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "normal"}]}, {"type": "frame", "id": "Bar4", "width": "fill_container", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [{"type": "frame", "id": "Bar4Fill", "width": 24, "height": 120, "fill": "$yellow-primary"}, {"type": "text", "id": "Bar4Label", "fill": "$text-tertiary", "content": "THU", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "normal"}]}, {"type": "frame", "id": "Bar5", "width": "fill_container", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [{"type": "frame", "id": "Bar5Fill", "width": 24, "height": 140, "fill": "$yellow-primary"}, {"type": "text", "id": "Bar5Label", "fill": "$text-tertiary", "content": "FRI", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "normal"}]}, {"type": "frame", "id": "Bar6", "width": "fill_container", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [{"type": "frame", "id": "Bar6Fill", "width": 24, "height": 110, "fill": "$yellow-primary"}, {"type": "text", "id": "Bar6Label", "fill": "$text-tertiary", "content": "SAT", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "normal"}]}, {"type": "frame", "id": "Bar7", "width": "fill_container", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [{"type": "frame", "id": "Bar7Fill", "width": 24, "height": 90, "fill": "$yellow-primary"}, {"type": "text", "id": "Bar7Label", "fill": "$text-tertiary", "content": "SUN", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "normal"}]}]}]}]}, {"type": "frame", "id": "AIInsights", "width": 320, "height": "fill_container", "fill": "$bg-card", "stroke": {"thickness": 1, "fill": "$border"}, "layout": "vertical", "children": [{"type": "frame", "id": "AIHeader", "width": "fill_container", "stroke": {"align": "inside", "thickness": 1, "fill": "$border"}, "gap": 10, "padding": [16, 20], "alignItems": "center", "children": [{"type": "icon_font", "id": "AIIcon", "width": 16, "height": 16, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "#A855F7"}, {"type": "text", "id": "AITitle", "fill": "$text-primary", "content": "AI INSIGHTS", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}]}, {"type": "frame", "id": "AIList", "width": "fill_container", "height": "fill_container", "layout": "vertical", "gap": 12, "padding": 16, "children": [{"type": "frame", "id": "Insight1", "width": "fill_container", "fill": "#22C55E10", "stroke": {"thickness": 1, "fill": "#22C55E30"}, "layout": "vertical", "gap": 8, "padding": 12, "children": [{"type": "frame", "id": "Insight1Header", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "Insight1Icon", "width": 12, "height": 12, "iconFontName": "lightbulb", "iconFontFamily": "lucide", "fill": "$success"}, {"type": "text", "id": "Insight1Label", "fill": "$success", "content": "OPPORTUNITY", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}]}, {"type": "text", "id": "Insight1Text", "fill": "$text-primary", "content": "Instagram engagement peaks at 6-8 PM. \nSchedule posts earlier.", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}]}, {"type": "frame", "id": "Insight2", "width": "fill_container", "fill": "#FACC1510", "stroke": {"thickness": 1, "fill": "#FACC1530"}, "layout": "vertical", "gap": 8, "padding": 12, "children": [{"type": "frame", "id": "Insight2Header", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "Insight2Icon", "width": 12, "height": 12, "iconFontName": "zap", "iconFontFamily": "lucide", "fill": "$yellow-primary"}, {"type": "text", "id": "Insight2Label", "fill": "$yellow-primary", "content": "ACTION", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}]}, {"type": "text", "id": "Insight2Text", "fill": "$text-primary", "content": "Video content gets 3x more engagement. \nConsider Reels.", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}]}, {"type": "frame", "id": "Insight3", "width": "fill_container", "fill": "#3B82F610", "stroke": {"thickness": 1, "fill": "#3B82F630"}, "layout": "vertical", "gap": 8, "padding": 12, "children": [{"type": "frame", "id": "Insight3Header", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "Insight3Icon", "width": 12, "height": 12, "iconFontName": "info", "iconFontFamily": "lucide", "fill": "#3B82F6"}, {"type": "text", "id": "Insight3Label", "fill": "#3B82F6", "content": "TREND", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}]}, {"type": "text", "id": "Insight3Text", "fill": "$text-primary", "content": "Zalo shows fastest growth in VN market. \nIncrease focus.", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}]}]}]}]}, {"type": "frame", "id": "ChannelPerformance", "width": "fill_container", "fill": "$bg-card", "stroke": {"thickness": 1, "fill": "$border"}, "layout": "vertical", "children": [{"type": "frame", "id": "ChannelHeader", "width": "fill_container", "stroke": {"align": "inside", "thickness": 1, "fill": "$border"}, "gap": 10, "padding": [14, 20], "alignItems": "center", "children": [{"type": "icon_font", "id": "ChannelIcon", "width": 14, "height": 14, "iconFontName": "bar-chart-2", "iconFontFamily": "lucide", "fill": "$yellow-primary"}, {"type": "text", "id": "ChannelTitle", "fill": "$text-primary", "content": "CHANNEL PERFORMANCE", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}]}, {"type": "frame", "id": "ChannelList", "width": "fill_container", "gap": 16, "padding": 16, "children": [{"type": "frame", "id": "ChFB", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [{"type": "frame", "id": "ChFBTop", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "ChFBName", "fill": "#3B82F6", "content": "FACEBOOK", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}, {"type": "text", "id": "ChFBValue", "fill": "$text-primary", "content": "45.2K", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, {"type": "frame", "id": "ChFBBar", "width": "fill_container", "height": 4, "fill": "$bg-page", "children": [{"type": "frame", "id": "ChFBFill", "width": "fit_content(0)", "height": 4, "fill": "#3B82F6"}]}]}, {"type": "frame", "id": "ChIG", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [{"type": "frame", "id": "ChIGTop", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "ChIGName", "fill": "#E1306C", "content": "INSTAGRAM", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}, {"type": "text", "id": "ChIGValue", "fill": "$text-primary", "content": "38.7K", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, {"type": "frame", "id": "ChIGBar", "width": "fill_container", "height": 4, "fill": "$bg-page", "children": [{"type": "frame", "id": "ChIGFill", "width": "fit_content(0)", "height": 4, "fill": "#E1306C"}]}]}, {"type": "frame", "id": "ChZalo", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [{"type": "frame", "id": "ChZaloTop", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "ChZaloName", "fill": "#0068FF", "content": "ZALO", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}, {"type": "text", "id": "ChZaloValue", "fill": "$text-primary", "content": "28.1K", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, {"type": "frame", "id": "ChZaloBar", "width": "fill_container", "height": 4, "fill": "$bg-page", "children": [{"type": "frame", "id": "ChZaloFill", "width": "fit_content(0)", "height": 4, "fill": "#0068FF"}]}]}, {"type": "frame", "id": "ChWA", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [{"type": "frame", "id": "ChWATop", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "ChWAName", "fill": "#25D366", "content": "WHATSAPP", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}, {"type": "text", "id": "ChWAValue", "fill": "$text-primary", "content": "12.4K", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, {"type": "frame", "id": "ChWABar", "width": "fill_container", "height": 4, "fill": "$bg-page", "children": [{"type": "frame", "id": "ChWAFill", "width": "fit_content(0)", "height": 4, "fill": "#25D366"}]}]}]}]}]}]}], "variables": {"bg-page": {"type": "color", "value": "#18181B"}, "bg-card": {"type": "color", "value": "#0F0F10"}, "yellow-primary": {"type": "color", "value": "#FACC15"}, "text-primary": {"type": "color", "value": "#FAFAFA"}, "text-secondary": {"type": "color", "value": "#71717A"}, "text-tertiary": {"type": "color", "value": "#52525B"}, "border": {"type": "color", "value": "#27272A"}, "success": {"type": "color", "value": "#22C55E"}, "warning": {"type": "color", "value": "#FACC15"}, "error": {"type": "color", "value": "#EF4444"}, "info": {"type": "color", "value": "#3B82F6"}}} \ No newline at end of file diff --git a/pencil-design/src/pages/tMarketing/desktop/chatbot-automation.pen b/pencil-design/src/pages/tMarketing/desktop/chatbot-automation.pen deleted file mode 100644 index d17e23a4..00000000 --- a/pencil-design/src/pages/tMarketing/desktop/chatbot-automation.pen +++ /dev/null @@ -1 +0,0 @@ -{"version": "2.6", "children": [{"type": "frame", "id": "ChatbotAutomationScreen", "name": "Screen/Chatbot Automation", "reusable": true, "width": 1440, "height": 900, "fill": "$bg-page", "layout": "horizontal", "clip": true, "children": [{"type": "frame", "id": "Sidebar", "width": 240, "height": "fill_container", "fill": "$bg-card", "stroke": {"thickness": 3, "fill": "$yellow-primary", "align": "inside"}, "layout": "vertical", "justifyContent": "space_between", "padding": [24, 16], "children": [{"type": "frame", "id": "SidebarTop", "width": "fill_container", "layout": "vertical", "gap": 32, "children": [{"type": "frame", "id": "LogoSection", "width": "fill_container", "padding": [0, 0, 16, 0], "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, "gap": 8, "alignItems": "center", "children": [{"type": "frame", "id": "LogoMark", "width": 32, "height": 32, "fill": "$yellow-primary", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "LogoLetter", "fill": "$bg-card", "content": "M", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}]}, {"type": "text", "id": "LogoText", "fill": "$text-primary", "content": "tMARKETING", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}, {"type": "frame", "id": "NavSection", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [{"type": "frame", "id": "NavHub", "width": "fill_container", "padding": [10, 12], "gap": 10, "alignItems": "center", "children": [{"type": "text", "id": "NavHubNum", "fill": "$text-tertiary", "content": "01", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, {"type": "text", "id": "NavHubLabel", "fill": "$text-secondary", "content": "HUB", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, {"type": "frame", "id": "NavChat", "width": "fill_container", "padding": [10, 12], "gap": 10, "alignItems": "center", "children": [{"type": "text", "id": "NavChatNum", "fill": "$text-tertiary", "content": "02", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, {"type": "text", "id": "NavChatLabel", "fill": "$text-secondary", "content": "CHAT", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, {"type": "frame", "id": "NavBot", "width": "fill_container", "fill": "#FACC1515", "stroke": {"thickness": 1, "fill": "$yellow-primary", "align": "inside"}, "padding": [10, 12], "gap": 10, "alignItems": "center", "children": [{"type": "text", "id": "NavBotNum", "fill": "$yellow-primary", "content": "03", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, {"type": "text", "id": "NavBotLabel", "fill": "$text-primary", "content": "BOT", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, {"type": "frame", "id": "NavCRM", "width": "fill_container", "padding": [10, 12], "gap": 10, "alignItems": "center", "children": [{"type": "text", "id": "NavCRMNum", "fill": "$text-tertiary", "content": "04", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, {"type": "text", "id": "NavCRMLabel", "fill": "$text-secondary", "content": "CRM", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, {"type": "frame", "id": "NavAI", "width": "fill_container", "padding": [10, 12], "gap": 10, "alignItems": "center", "children": [{"type": "text", "id": "NavAINum", "fill": "$text-tertiary", "content": "05", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, {"type": "text", "id": "NavAILabel", "fill": "$text-secondary", "content": "AI STUDIO", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, {"type": "frame", "id": "NavStats", "width": "fill_container", "padding": [10, 12], "gap": 10, "alignItems": "center", "children": [{"type": "text", "id": "NavStatsNum", "fill": "$text-tertiary", "content": "06", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, {"type": "text", "id": "NavStatsLabel", "fill": "$text-secondary", "content": "ANALYTICS", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}]}]}, {"type": "frame", "id": "SidebarBottom", "width": "fill_container", "layout": "vertical", "gap": 20, "children": [{"type": "frame", "id": "BotStatus", "width": "fill_container", "fill": "#22C55E15", "stroke": {"thickness": 1, "fill": "#22C55E30"}, "padding": 16, "layout": "vertical", "gap": 8, "children": [{"type": "frame", "id": "BotHeader", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "BotIcon", "width": 14, "height": 14, "iconFontName": "bot", "iconFontFamily": "lucide", "fill": "$success"}, {"type": "text", "id": "BotLabel", "fill": "$success", "content": "BOT ACTIVE", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}]}, {"type": "text", "id": "BotInfo", "fill": "$text-secondary", "content": "3 flows running", "fontFamily": "Roboto", "fontSize": 11}]}, {"type": "frame", "id": "AccountRow", "width": "fill_container", "padding": [20, 0, 0, 0], "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "Avatar", "width": 32, "height": 32, "fill": "$border", "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "AvatarText", "fill": "$text-primary", "content": "AD", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}]}, {"type": "text", "id": "UserName", "fill": "$text-primary", "content": "ADMIN", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, {"type": "icon_font", "id": "ChevronIcon", "width": 14, "height": 14, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"}]}]}]}, {"type": "frame", "id": "MainContent", "width": "fill_container", "height": "fill_container", "fill": "$bg-page", "layout": "horizontal", "gap": 0, "children": [{"type": "frame", "id": "FlowList", "width": 280, "height": "fill_container", "fill": "$bg-card", "stroke": {"thickness": 1, "fill": "$border"}, "layout": "vertical", "children": [{"type": "frame", "id": "FlowHeader", "width": "fill_container", "padding": [16, 20], "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "FlowHeaderLeft", "gap": 10, "alignItems": "center", "children": [{"type": "icon_font", "id": "FlowIcon", "width": 16, "height": 16, "iconFontName": "git-branch", "iconFontFamily": "lucide", "fill": "$yellow-primary"}, {"type": "text", "id": "FlowTitle", "fill": "$text-primary", "content": "FLOWS", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}]}, {"type": "frame", "id": "AddFlowBtn", "width": 28, "height": 28, "fill": "$yellow-primary", "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "AddFlowIcon", "width": 14, "height": 14, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$bg-card"}]}]}, {"type": "frame", "id": "FlowItems", "width": "fill_container", "height": "fill_container", "layout": "vertical", "children": [{"type": "frame", "id": "Flow1", "width": "fill_container", "fill": "#FACC1510", "stroke": {"thickness": 2, "fill": "$yellow-primary", "align": "inside"}, "padding": 16, "layout": "vertical", "gap": 10, "children": [{"type": "frame", "id": "Flow1Header", "justifyContent": "space_between", "alignItems": "center", "width": "fill_container", "children": [{"type": "text", "id": "Flow1Name", "fill": "$text-primary", "content": "Welcome Message", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, {"type": "frame", "id": "Flow1StatusDot", "width": 8, "height": 8, "fill": "$success"}]}, {"type": "text", "id": "Flow1Desc", "fill": "$text-secondary", "content": "Greet new customers", "fontFamily": "Roboto", "fontSize": 11}, {"type": "frame", "id": "Flow1Stats", "gap": 12, "children": [{"type": "text", "id": "Flow1Sent", "fill": "$text-tertiary", "content": "1.2K sent", "fontFamily": "Roboto", "fontSize": 10}, {"type": "text", "id": "Flow1Rate", "fill": "$success", "content": "85% open", "fontFamily": "Roboto", "fontSize": 10}]}]}, {"type": "frame", "id": "Flow2", "width": "fill_container", "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, "padding": 16, "layout": "vertical", "gap": 10, "children": [{"type": "frame", "id": "Flow2Header", "justifyContent": "space_between", "alignItems": "center", "width": "fill_container", "children": [{"type": "text", "id": "Flow2Name", "fill": "$text-primary", "content": "Product Inquiry", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, {"type": "frame", "id": "Flow2StatusDot", "width": 8, "height": 8, "fill": "$success"}]}, {"type": "text", "id": "Flow2Desc", "fill": "$text-secondary", "content": "Handle product questions", "fontFamily": "Roboto", "fontSize": 11}, {"type": "frame", "id": "Flow2Stats", "gap": 12, "children": [{"type": "text", "id": "Flow2Sent", "fill": "$text-tertiary", "content": "890 sent", "fontFamily": "Roboto", "fontSize": 10}, {"type": "text", "id": "Flow2Rate", "fill": "$success", "content": "72% open", "fontFamily": "Roboto", "fontSize": 10}]}]}, {"type": "frame", "id": "Flow3", "width": "fill_container", "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, "padding": 16, "layout": "vertical", "gap": 10, "children": [{"type": "frame", "id": "Flow3Header", "justifyContent": "space_between", "alignItems": "center", "width": "fill_container", "children": [{"type": "text", "id": "Flow3Name", "fill": "$text-primary", "content": "Abandoned Cart", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, {"type": "frame", "id": "Flow3StatusDot", "width": 8, "height": 8, "fill": "$success"}]}, {"type": "text", "id": "Flow3Desc", "fill": "$text-secondary", "content": "Recover lost sales", "fontFamily": "Roboto", "fontSize": 11}, {"type": "frame", "id": "Flow3Stats", "gap": 12, "children": [{"type": "text", "id": "Flow3Sent", "fill": "$text-tertiary", "content": "456 sent", "fontFamily": "Roboto", "fontSize": 10}, {"type": "text", "id": "Flow3Rate", "fill": "$warning", "content": "28% conv", "fontFamily": "Roboto", "fontSize": 10}]}]}, {"type": "frame", "id": "Flow4", "width": "fill_container", "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, "padding": 16, "layout": "vertical", "gap": 10, "children": [{"type": "frame", "id": "Flow4Header", "justifyContent": "space_between", "alignItems": "center", "width": "fill_container", "children": [{"type": "text", "id": "Flow4Name", "fill": "$text-primary", "content": "Order Update", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, {"type": "frame", "id": "Flow4StatusDot", "width": 8, "height": 8, "fill": "$text-tertiary"}]}, {"type": "text", "id": "Flow4Desc", "fill": "$text-secondary", "content": "Shipping notifications", "fontFamily": "Roboto", "fontSize": 11}, {"type": "frame", "id": "Flow4Stats", "gap": 12, "children": [{"type": "text", "id": "Flow4Sent", "fill": "$text-tertiary", "content": "Draft", "fontFamily": "Roboto", "fontSize": 10}]}]}]}]}, {"type": "frame", "id": "FlowCanvas", "width": "fill_container", "height": "fill_container", "layout": "vertical", "children": [{"type": "frame", "id": "CanvasHeader", "width": "fill_container", "fill": "$bg-card", "stroke": {"thickness": 1, "fill": "$border"}, "padding": [16, 24], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "CanvasHeaderLeft", "layout": "vertical", "gap": 4, "children": [{"type": "text", "id": "CanvasTitle", "fill": "$text-primary", "content": "WELCOME MESSAGE", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}, {"type": "text", "id": "CanvasDesc", "fill": "$text-secondary", "content": "Trigger: New customer joins \u2022 3 nodes", "fontFamily": "Roboto", "fontSize": 12}]}, {"type": "frame", "id": "CanvasActions", "gap": 12, "children": [{"type": "frame", "id": "TestBtn", "stroke": {"thickness": 1, "fill": "$border"}, "padding": [10, 16], "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "TestIcon", "width": 14, "height": 14, "iconFontName": "play", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "TestText", "fill": "$text-secondary", "content": "TEST", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, {"type": "frame", "id": "PublishBtn", "fill": "$yellow-primary", "padding": [10, 18], "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "PublishIcon", "width": 14, "height": 14, "iconFontName": "rocket", "iconFontFamily": "lucide", "fill": "$bg-card"}, {"type": "text", "id": "PublishText", "fill": "$bg-card", "content": "PUBLISH", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}]}]}]}, {"type": "frame", "id": "CanvasArea", "width": "fill_container", "height": "fill_container", "fill": "#0C0C0E", "padding": 40, "layout": "vertical", "gap": 0, "alignItems": "center", "justifyContent": "center", "children": [{"type": "frame", "id": "TriggerNode", "width": 280, "fill": "#22C55E15", "stroke": {"thickness": 2, "fill": "$success"}, "padding": 16, "layout": "vertical", "gap": 12, "children": [{"type": "frame", "id": "TriggerHeader", "gap": 10, "alignItems": "center", "children": [{"type": "icon_font", "id": "TriggerIcon", "width": 18, "height": 18, "iconFontName": "zap", "iconFontFamily": "lucide", "fill": "$success"}, {"type": "text", "id": "TriggerLabel", "fill": "$success", "content": "TRIGGER", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}]}, {"type": "text", "id": "TriggerName", "fill": "$text-primary", "content": "New Customer Joins", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, {"type": "text", "id": "TriggerDesc", "fill": "$text-secondary", "content": "When a customer sends first message", "fontFamily": "Roboto", "fontSize": 11}]}, {"type": "frame", "id": "Connector1", "width": 2, "height": 32, "fill": "$border"}, {"type": "frame", "id": "DelayNode", "width": 280, "fill": "#3B82F615", "stroke": {"thickness": 2, "fill": "#3B82F6"}, "padding": 16, "layout": "vertical", "gap": 12, "children": [{"type": "frame", "id": "DelayHeader", "gap": 10, "alignItems": "center", "children": [{"type": "icon_font", "id": "DelayIcon", "width": 18, "height": 18, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#3B82F6"}, {"type": "text", "id": "DelayLabel", "fill": "#3B82F6", "content": "DELAY", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}]}, {"type": "text", "id": "DelayName", "fill": "$text-primary", "content": "Wait 2 seconds", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, {"type": "text", "id": "DelayDesc", "fill": "$text-secondary", "content": "Make response feel natural", "fontFamily": "Roboto", "fontSize": 11}]}, {"type": "frame", "id": "Connector2", "width": 2, "height": 32, "fill": "$border"}, {"type": "frame", "id": "MessageNode", "width": 280, "fill": "#FACC1515", "stroke": {"thickness": 2, "fill": "$yellow-primary"}, "padding": 16, "layout": "vertical", "gap": 12, "children": [{"type": "frame", "id": "MsgHeader", "gap": 10, "alignItems": "center", "children": [{"type": "icon_font", "id": "MsgIcon", "width": 18, "height": 18, "iconFontName": "message-circle", "iconFontFamily": "lucide", "fill": "$yellow-primary"}, {"type": "text", "id": "MsgLabel", "fill": "$yellow-primary", "content": "SEND MESSAGE", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}]}, {"type": "text", "id": "MsgName", "fill": "$text-primary", "content": "Welcome Greeting", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, {"type": "text", "id": "MsgPreview", "fill": "$text-secondary", "content": "\"Xin ch\u00e0o! C\u1ea3m \u01a1n b\u1ea1n \u0111\u00e3 li\u00ean h\u1ec7...\"", "fontFamily": "Roboto", "fontSize": 11}]}]}]}, {"type": "frame", "id": "NodePanel", "width": 260, "height": "fill_container", "fill": "$bg-card", "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, "layout": "vertical", "children": [{"type": "frame", "id": "NodeHeader", "width": "fill_container", "padding": [16, 20], "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, "gap": 10, "alignItems": "center", "children": [{"type": "icon_font", "id": "NodePanelIcon", "width": 16, "height": 16, "iconFontName": "box", "iconFontFamily": "lucide", "fill": "$yellow-primary"}, {"type": "text", "id": "NodePanelTitle", "fill": "$text-primary", "content": "ADD NODE", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}]}, {"type": "frame", "id": "NodeList", "width": "fill_container", "height": "fill_container", "padding": 16, "layout": "vertical", "gap": 10, "children": [{"type": "frame", "id": "NodeTrigger", "width": "fill_container", "fill": "$bg-page", "stroke": {"thickness": 1, "fill": "$border"}, "padding": 12, "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "NodeTriggerIcon", "width": 32, "height": 32, "fill": "#22C55E20", "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "NTIcon", "width": 16, "height": 16, "iconFontName": "zap", "iconFontFamily": "lucide", "fill": "$success"}]}, {"type": "frame", "id": "NodeTriggerInfo", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "NTName", "fill": "$text-primary", "content": "Trigger", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, {"type": "text", "id": "NTDesc", "fill": "$text-tertiary", "content": "Start flow", "fontFamily": "Roboto", "fontSize": 10}]}]}, {"type": "frame", "id": "NodeMessage", "width": "fill_container", "fill": "$bg-page", "stroke": {"thickness": 1, "fill": "$border"}, "padding": 12, "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "NodeMsgIcon", "width": 32, "height": 32, "fill": "#FACC1520", "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "NMIcon", "width": 16, "height": 16, "iconFontName": "message-circle", "iconFontFamily": "lucide", "fill": "$yellow-primary"}]}, {"type": "frame", "id": "NodeMsgInfo", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "NMName", "fill": "$text-primary", "content": "Send Message", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, {"type": "text", "id": "NMDesc", "fill": "$text-tertiary", "content": "Text/Image/Video", "fontFamily": "Roboto", "fontSize": 10}]}]}, {"type": "frame", "id": "NodeCondition", "width": "fill_container", "fill": "$bg-page", "stroke": {"thickness": 1, "fill": "$border"}, "padding": 12, "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "NodeCondIcon", "width": 32, "height": 32, "fill": "#A855F720", "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "NCIcon", "width": 16, "height": 16, "iconFontName": "git-branch", "iconFontFamily": "lucide", "fill": "#A855F7"}]}, {"type": "frame", "id": "NodeCondInfo", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "NCName", "fill": "$text-primary", "content": "Condition", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, {"type": "text", "id": "NCDesc", "fill": "$text-tertiary", "content": "Branch logic", "fontFamily": "Roboto", "fontSize": 10}]}]}, {"type": "frame", "id": "NodeDelay", "width": "fill_container", "fill": "$bg-page", "stroke": {"thickness": 1, "fill": "$border"}, "padding": 12, "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "NodeDelayIcon", "width": 32, "height": 32, "fill": "#3B82F620", "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "NDIcon", "width": 16, "height": 16, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#3B82F6"}]}, {"type": "frame", "id": "NodeDelayInfo", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "NDName", "fill": "$text-primary", "content": "Delay", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, {"type": "text", "id": "NDDesc", "fill": "$text-tertiary", "content": "Wait time", "fontFamily": "Roboto", "fontSize": 10}]}]}, {"type": "frame", "id": "NodeAI", "width": "fill_container", "fill": "$bg-page", "stroke": {"thickness": 1, "fill": "#A855F730"}, "padding": 12, "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "NodeAIIcon", "width": 32, "height": 32, "fill": "#A855F720", "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "NAIcon", "width": 16, "height": 16, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "#A855F7"}]}, {"type": "frame", "id": "NodeAIInfo", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "NAName", "fill": "$text-primary", "content": "AI Response", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, {"type": "text", "id": "NADesc", "fill": "#A855F7", "content": "Gemini AI", "fontFamily": "Roboto", "fontSize": 10}]}]}]}]}]}]}], "variables": {"bg-page": {"type": "color", "value": "#18181B"}, "bg-card": {"type": "color", "value": "#0F0F10"}, "yellow-primary": {"type": "color", "value": "#FACC15"}, "text-primary": {"type": "color", "value": "#FAFAFA"}, "text-secondary": {"type": "color", "value": "#71717A"}, "text-tertiary": {"type": "color", "value": "#52525B"}, "border": {"type": "color", "value": "#27272A"}, "success": {"type": "color", "value": "#22C55E"}, "warning": {"type": "color", "value": "#FACC15"}, "error": {"type": "color", "value": "#EF4444"}, "info": {"type": "color", "value": "#3B82F6"}}} \ No newline at end of file diff --git a/pencil-design/src/pages/tMarketing/desktop/customer-crm.pen b/pencil-design/src/pages/tMarketing/desktop/customer-crm.pen deleted file mode 100644 index 93f345b6..00000000 --- a/pencil-design/src/pages/tMarketing/desktop/customer-crm.pen +++ /dev/null @@ -1,1711 +0,0 @@ -{ - "version": "2.7", - "children": [ - { - "type": "frame", - "id": "CustomerCRMScreen", - "x": 0, - "y": 0, - "name": "Screen/Customer CRM", - "reusable": true, - "clip": true, - "width": 1440, - "height": 900, - "fill": "$bg-page", - "children": [ - { - "type": "frame", - "id": "Sidebar", - "width": 240, - "height": "fill_container", - "fill": "$bg-card", - "stroke": { - "align": "inside", - "thickness": 3, - "fill": "$yellow-primary" - }, - "layout": "vertical", - "padding": [ - 24, - 16 - ], - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "SidebarTop", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "LogoSection", - "width": "fill_container", - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$border" - }, - "gap": 8, - "padding": [ - 0, - 0, - 16, - 0 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "LogoMark", - "width": 32, - "height": 32, - "fill": "$yellow-primary", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "LogoLetter", - "fill": "$bg-card", - "content": "M", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "LogoText", - "fill": "$text-primary", - "content": "tMARKETING", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "NavSection", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "frame", - "id": "NavHub", - "width": "fill_container", - "gap": 10, - "padding": [ - 10, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NavHubNum", - "fill": "$text-tertiary", - "content": "01", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "NavHubLabel", - "fill": "$text-secondary", - "content": "HUB", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "NavChat", - "width": "fill_container", - "gap": 10, - "padding": [ - 10, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NavChatNum", - "fill": "$text-tertiary", - "content": "02", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "NavChatLabel", - "fill": "$text-secondary", - "content": "CHAT", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "NavCRM", - "width": "fill_container", - "fill": "#FACC1515", - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$yellow-primary" - }, - "gap": 10, - "padding": [ - 10, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NavCRMNum", - "fill": "$yellow-primary", - "content": "03", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "NavCRMLabel", - "fill": "$text-primary", - "content": "CRM", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NavAI", - "width": "fill_container", - "gap": 10, - "padding": [ - 10, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NavAINum", - "fill": "$text-tertiary", - "content": "04", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "NavAILabel", - "fill": "$text-secondary", - "content": "AI STUDIO", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "NavStats", - "width": "fill_container", - "gap": 10, - "padding": [ - 10, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NavStatsNum", - "fill": "$text-tertiary", - "content": "05", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "NavStatsLabel", - "fill": "$text-secondary", - "content": "ANALYTICS", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SidebarBottom", - "width": "fill_container", - "layout": "vertical", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "StorageBox", - "width": "fill_container", - "fill": "#FACC1510", - "stroke": { - "thickness": 1, - "fill": "#FACC1530" - }, - "layout": "vertical", - "gap": 12, - "padding": 16, - "children": [ - { - "type": "frame", - "id": "StorageHeader", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "StorageIcon", - "width": 14, - "height": 14, - "iconFontName": "database", - "iconFontFamily": "lucide", - "fill": "$yellow-primary" - }, - { - "type": "text", - "id": "StorageLabel", - "fill": "$yellow-primary", - "content": "STORAGE", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "StorageValue", - "fill": "$text-primary", - "content": "2.4 GB / 10 GB", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "StorageBar", - "width": "fill_container", - "height": 4, - "fill": "$bg-page", - "children": [ - { - "type": "frame", - "id": "StorageFill", - "width": "fit_content(0)", - "height": 4, - "fill": "$yellow-primary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "AccountRow", - "width": "fill_container", - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$border" - }, - "gap": 10, - "padding": [ - 20, - 0, - 0, - 0 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Avatar", - "width": 32, - "height": 32, - "fill": "$border", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "AvatarText", - "fill": "$text-primary", - "content": "AD", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "UserName", - "fill": "$text-primary", - "content": "ADMIN", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "icon_font", - "id": "ChevronIcon", - "width": 14, - "height": 14, - "iconFontName": "chevron-right", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "MainContent", - "width": "fill_container", - "height": "fill_container", - "fill": "$bg-page", - "layout": "vertical", - "gap": 24, - "padding": [ - 32, - 40 - ], - "children": [ - { - "type": "frame", - "id": "PageHeader", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "HeaderLeft", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "PageTitle", - "fill": "$text-primary", - "content": "CUSTOMERS", - "fontFamily": "Roboto", - "fontSize": 32, - "fontWeight": "700" - }, - { - "type": "text", - "id": "PageSubtitle", - "fill": "$text-secondary", - "content": "Manage customer profiles for re-marketing campaigns", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "HeaderActions", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "SearchBtn", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "gap": 8, - "padding": [ - 10, - 14 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SearchIcon", - "width": 14, - "height": 14, - "iconFontName": "search", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SearchText", - "fill": "$text-secondary", - "content": "SEARCH", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "ExportBtn", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "gap": 8, - "padding": [ - 10, - 14 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ExportIcon", - "width": 14, - "height": 14, - "iconFontName": "download", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "ExportText", - "fill": "$text-secondary", - "content": "EXPORT", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "AddBtn", - "fill": "$yellow-primary", - "gap": 6, - "padding": [ - 10, - 18 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PlusIcon", - "width": 14, - "height": 14, - "iconFontName": "user-plus", - "iconFontFamily": "lucide", - "fill": "$bg-card" - }, - { - "type": "text", - "id": "AddText", - "fill": "$bg-card", - "content": "ADD", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "700" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "KPICards", - "width": "fill_container", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "KPITotal", - "width": "fill_container", - "fill": "$bg-card", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "layout": "vertical", - "gap": 8, - "padding": 20, - "children": [ - { - "type": "text", - "id": "KPITotalLabel", - "fill": "$text-secondary", - "content": "TOTAL CUSTOMERS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "KPITotalRow", - "justifyContent": "space_between", - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "KPITotalValue", - "fill": "$text-primary", - "content": "12,456", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "KPITotalChange", - "gap": 4, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "KPITotalArrow", - "width": 12, - "height": 12, - "iconFontName": "arrow-up-right", - "iconFontFamily": "lucide", - "fill": "$success" - }, - { - "type": "text", - "id": "KPITotalPercent", - "fill": "$success", - "content": "5%", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "KPIActive", - "width": "fill_container", - "fill": "$bg-card", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "layout": "vertical", - "gap": 8, - "padding": 20, - "children": [ - { - "type": "text", - "id": "KPIActiveLabel", - "fill": "$text-secondary", - "content": "ACTIVE", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "KPIActiveRow", - "justifyContent": "space_between", - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "KPIActiveValue", - "fill": "$text-primary", - "content": "4,892", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "KPIActiveChange", - "gap": 4, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "KPIActiveArrow", - "width": 12, - "height": 12, - "iconFontName": "arrow-up-right", - "iconFontFamily": "lucide", - "fill": "$success" - }, - { - "type": "text", - "id": "KPIActivePercent", - "fill": "$success", - "content": "12%", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "KPINew", - "width": "fill_container", - "fill": "$bg-card", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "layout": "vertical", - "gap": 8, - "padding": 20, - "children": [ - { - "type": "text", - "id": "KPINewLabel", - "fill": "$text-secondary", - "content": "NEW TODAY", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "KPINewRow", - "justifyContent": "space_between", - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "KPINewValue", - "fill": "$text-primary", - "content": "+342", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "700" - }, - { - "type": "text", - "id": "KPINewBadge", - "fill": "$info", - "content": "NEW", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - } - ] - } - ] - }, - { - "type": "frame", - "id": "KPISegments", - "width": "fill_container", - "fill": "$bg-card", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "layout": "vertical", - "gap": 8, - "padding": 20, - "children": [ - { - "type": "text", - "id": "KPISegmentsLabel", - "fill": "$text-secondary", - "content": "SEGMENTS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "KPISegmentsRow", - "justifyContent": "space_between", - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "KPISegmentsValue", - "fill": "$text-primary", - "content": "8", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "700" - }, - { - "type": "text", - "id": "KPISegmentsDesc", - "fill": "$text-tertiary", - "content": "GROUPS", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "CustomerTable", - "width": "fill_container", - "height": "fill_container", - "fill": "$bg-card", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "TableHeader", - "width": "fill_container", - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$border" - }, - "padding": [ - 16, - 20 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "TableHeaderLeft", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "TableIcon", - "width": 16, - "height": 16, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "$yellow-primary" - }, - { - "type": "text", - "id": "TableTitle", - "fill": "$text-primary", - "content": "CUSTOMER LIST", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "TableActions", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "FilterBtn", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "gap": 6, - "padding": [ - 6, - 10 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "FilterIcon", - "width": 12, - "height": 12, - "iconFontName": "filter", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "FilterText", - "fill": "$text-secondary", - "content": "FILTERS", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "600" - }, - { - "type": "icon_font", - "id": "FilterArrow", - "width": 10, - "height": 10, - "iconFontName": "chevron-down", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - }, - { - "type": "frame", - "id": "TagsBtn", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "gap": 6, - "padding": [ - 6, - 10 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "TagsIcon", - "width": 12, - "height": 12, - "iconFontName": "tag", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "TagsText", - "fill": "$text-secondary", - "content": "TAGS", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "600" - }, - { - "type": "icon_font", - "id": "TagsArrow", - "width": 10, - "height": 10, - "iconFontName": "chevron-down", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "TableColumnHeaders", - "width": "fill_container", - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$border" - }, - "padding": [ - 12, - 20 - ], - "children": [ - { - "type": "frame", - "id": "ColCheck", - "width": 32, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "CheckAll", - "width": 16, - "height": 16, - "stroke": { - "thickness": 1, - "fill": "$border" - } - } - ] - }, - { - "type": "text", - "id": "ColName", - "fill": "$text-secondary", - "content": "NAME", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - }, - { - "type": "text", - "id": "ColPhone", - "fill": "$text-secondary", - "content": "PHONE", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - }, - { - "type": "text", - "id": "ColChannel", - "fill": "$text-secondary", - "content": "CHANNEL", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - }, - { - "type": "text", - "id": "ColScore", - "fill": "$text-secondary", - "content": "SCORE", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - }, - { - "type": "text", - "id": "ColActions", - "fill": "$text-secondary", - "content": "ACTIONS", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "TableBody", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "Row1", - "width": "fill_container", - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$border" - }, - "padding": [ - 14, - 20 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Row1Check", - "width": 32, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "Check1", - "width": 16, - "height": 16, - "stroke": { - "thickness": 1, - "fill": "$border" - } - } - ] - }, - { - "type": "text", - "id": "Row1Name", - "fill": "$text-primary", - "content": "Nguyễn Văn A", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "Row1Phone", - "fill": "$text-secondary", - "content": "0912 xxx xxx", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "Row1Channel", - "fill": "#0068FF", - "content": "ZALO", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - }, - { - "type": "text", - "id": "Row1Score", - "fill": "$yellow-primary", - "content": "★★★★☆", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "Row1Actions", - "width": 80, - "gap": 8, - "children": [ - { - "type": "icon_font", - "id": "Row1View", - "width": 14, - "height": 14, - "iconFontName": "eye", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "icon_font", - "id": "Row1Edit", - "width": 14, - "height": 14, - "iconFontName": "edit-2", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "Row2", - "width": "fill_container", - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$border" - }, - "padding": [ - 14, - 20 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Row2Check", - "width": 32, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "Check2", - "width": 16, - "height": 16, - "stroke": { - "thickness": 1, - "fill": "$border" - } - } - ] - }, - { - "type": "text", - "id": "Row2Name", - "fill": "$text-primary", - "content": "Trần Thị B", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "Row2Phone", - "fill": "$text-secondary", - "content": "0987 xxx xxx", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "Row2Channel", - "fill": "#3B82F6", - "content": "FB", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - }, - { - "type": "text", - "id": "Row2Score", - "fill": "$yellow-primary", - "content": "★★★☆☆", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "Row2Actions", - "width": 80, - "gap": 8, - "children": [ - { - "type": "icon_font", - "id": "Row2View", - "width": 14, - "height": 14, - "iconFontName": "eye", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "icon_font", - "id": "Row2Edit", - "width": 14, - "height": 14, - "iconFontName": "edit-2", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "Row3", - "width": "fill_container", - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$border" - }, - "padding": [ - 14, - 20 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Row3Check", - "width": 32, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "Check3", - "width": 16, - "height": 16, - "stroke": { - "thickness": 1, - "fill": "$border" - } - } - ] - }, - { - "type": "text", - "id": "Row3Name", - "fill": "$text-primary", - "content": "Lê Văn C", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "Row3Phone", - "fill": "$text-secondary", - "content": "0909 xxx xxx", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "Row3Channel", - "fill": "#E1306C", - "content": "IG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - }, - { - "type": "text", - "id": "Row3Score", - "fill": "$yellow-primary", - "content": "★★★★★", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "Row3Actions", - "width": 80, - "gap": 8, - "children": [ - { - "type": "icon_font", - "id": "Row3View", - "width": 14, - "height": 14, - "iconFontName": "eye", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "icon_font", - "id": "Row3Edit", - "width": 14, - "height": 14, - "iconFontName": "edit-2", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "Row4", - "width": "fill_container", - "padding": [ - 14, - 20 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Row4Check", - "width": 32, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "Check4", - "width": 16, - "height": 16, - "stroke": { - "thickness": 1, - "fill": "$border" - } - } - ] - }, - { - "type": "text", - "id": "Row4Name", - "fill": "$text-primary", - "content": "Phạm Thị D", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "Row4Phone", - "fill": "$text-secondary", - "content": "0888 xxx xxx", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "Row4Channel", - "fill": "#25D366", - "content": "WA", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - }, - { - "type": "text", - "id": "Row4Score", - "fill": "$yellow-primary", - "content": "★★☆☆☆", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "Row4Actions", - "width": 80, - "gap": 8, - "children": [ - { - "type": "icon_font", - "id": "Row4View", - "width": 14, - "height": 14, - "iconFontName": "eye", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "icon_font", - "id": "Row4Edit", - "width": 14, - "height": 14, - "iconFontName": "edit-2", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "Footer", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "BulkActions", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "BulkEmail", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "gap": 6, - "padding": [ - 8, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "BulkEmailIcon", - "width": 14, - "height": 14, - "iconFontName": "mail", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "BulkEmailText", - "fill": "$text-secondary", - "content": "EMAIL", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "BulkSMS", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "gap": 6, - "padding": [ - 8, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "BulkSMSIcon", - "width": 14, - "height": 14, - "iconFontName": "smartphone", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "BulkSMSText", - "fill": "$text-secondary", - "content": "SMS", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "BulkCampaign", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "gap": 6, - "padding": [ - 8, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "BulkCampaignIcon", - "width": 14, - "height": 14, - "iconFontName": "target", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "BulkCampaignText", - "fill": "$text-secondary", - "content": "CAMPAIGN", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "BulkExport", - "fill": "$yellow-primary", - "gap": 6, - "padding": [ - 8, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "BulkExportIcon", - "width": 14, - "height": 14, - "iconFontName": "download", - "iconFontFamily": "lucide", - "fill": "$bg-card" - }, - { - "type": "text", - "id": "BulkExportText", - "fill": "$bg-card", - "content": "EXPORT ALL", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - } - ] - } - ] - }, - { - "type": "frame", - "id": "Pagination", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "Page1", - "width": 32, - "height": 32, - "fill": "$yellow-primary", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "Page1Text", - "fill": "$bg-card", - "content": "01", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "Page2", - "width": 32, - "height": 32, - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "Page2Text", - "fill": "$text-secondary", - "content": "02", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "Page3", - "width": 32, - "height": 32, - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "Page3Text", - "fill": "$text-secondary", - "content": "03", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "PageNext", - "width": 32, - "height": 32, - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PageNextIcon", - "width": 14, - "height": 14, - "iconFontName": "chevron-right", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-page": { - "type": "color", - "value": "#18181B" - }, - "bg-card": { - "type": "color", - "value": "#0F0F10" - }, - "yellow-primary": { - "type": "color", - "value": "#FACC15" - }, - "text-primary": { - "type": "color", - "value": "#FAFAFA" - }, - "text-secondary": { - "type": "color", - "value": "#71717A" - }, - "text-tertiary": { - "type": "color", - "value": "#52525B" - }, - "border": { - "type": "color", - "value": "#27272A" - }, - "success": { - "type": "color", - "value": "#22C55E" - }, - "warning": { - "type": "color", - "value": "#FACC15" - }, - "error": { - "type": "color", - "value": "#EF4444" - }, - "info": { - "type": "color", - "value": "#3B82F6" - } - } -} \ No newline at end of file diff --git a/pencil-design/src/pages/tMarketing/desktop/livechat-console.pen b/pencil-design/src/pages/tMarketing/desktop/livechat-console.pen deleted file mode 100644 index c42da0a6..00000000 --- a/pencil-design/src/pages/tMarketing/desktop/livechat-console.pen +++ /dev/null @@ -1,1484 +0,0 @@ -{ - "version": "2.7", - "children": [ - { - "type": "frame", - "id": "LivechatScreen", - "x": 0, - "y": 0, - "name": "Screen/Livechat Console", - "reusable": true, - "clip": true, - "width": 1440, - "height": 900, - "fill": "$bg-page", - "children": [ - { - "type": "frame", - "id": "Sidebar", - "width": 240, - "height": "fill_container", - "fill": "$bg-card", - "stroke": { - "align": "inside", - "thickness": 3, - "fill": "$yellow-primary" - }, - "layout": "vertical", - "padding": [ - 24, - 16 - ], - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "SidebarTop", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "LogoSection", - "width": "fill_container", - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$border" - }, - "gap": 8, - "padding": [ - 0, - 0, - 16, - 0 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "LogoMark", - "width": 32, - "height": 32, - "fill": "$yellow-primary", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "LogoLetter", - "fill": "$bg-card", - "content": "M", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "LogoText", - "fill": "$text-primary", - "content": "tMARKETING", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "NavSection", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "frame", - "id": "NavHub", - "width": "fill_container", - "gap": 10, - "padding": [ - 10, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NavHubNum", - "fill": "$text-tertiary", - "content": "01", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "NavHubLabel", - "fill": "$text-secondary", - "content": "HUB", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "NavChat", - "width": "fill_container", - "fill": "#FACC1515", - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$yellow-primary" - }, - "gap": 10, - "padding": [ - 10, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NavChatNum", - "fill": "$yellow-primary", - "content": "02", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "NavChatLabel", - "fill": "$text-primary", - "content": "CHAT", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NavCRM", - "width": "fill_container", - "gap": 10, - "padding": [ - 10, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NavCRMNum", - "fill": "$text-tertiary", - "content": "03", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "NavCRMLabel", - "fill": "$text-secondary", - "content": "CRM", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "NavAI", - "width": "fill_container", - "gap": 10, - "padding": [ - 10, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NavAINum", - "fill": "$text-tertiary", - "content": "04", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "NavAILabel", - "fill": "$text-secondary", - "content": "AI STUDIO", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "NavStats", - "width": "fill_container", - "gap": 10, - "padding": [ - 10, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NavStatsNum", - "fill": "$text-tertiary", - "content": "05", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "NavStatsLabel", - "fill": "$text-secondary", - "content": "ANALYTICS", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SidebarBottom", - "width": "fill_container", - "layout": "vertical", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "AgentStatus", - "width": "fill_container", - "fill": "#22C55E15", - "stroke": { - "thickness": 1, - "fill": "#22C55E30" - }, - "layout": "vertical", - "gap": 8, - "padding": 16, - "children": [ - { - "type": "frame", - "id": "AgentHeader", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "AgentDot", - "width": 8, - "height": 8, - "fill": "$success" - }, - { - "type": "text", - "id": "AgentLabel", - "fill": "$success", - "content": "ONLINE", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "AgentInfo", - "fill": "$text-secondary", - "content": "5 active conversations", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "AccountRow", - "width": "fill_container", - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$border" - }, - "gap": 10, - "padding": [ - 20, - 0, - 0, - 0 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Avatar", - "width": 32, - "height": 32, - "fill": "$border", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "AvatarText", - "fill": "$text-primary", - "content": "AD", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "UserName", - "fill": "$text-primary", - "content": "ADMIN", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "icon_font", - "id": "ChevronIcon", - "width": 14, - "height": 14, - "iconFontName": "chevron-right", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ConversationList", - "width": 300, - "height": "fill_container", - "fill": "$bg-card", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "ConvHeader", - "width": "fill_container", - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$border" - }, - "padding": [ - 16, - 20 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ConvTitle", - "fill": "$text-primary", - "content": "CONVERSATIONS", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "ConvActions", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "FilterConv", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "gap": 4, - "padding": [ - 4, - 8 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "FilterConvText", - "fill": "$text-secondary", - "content": "ALL", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "600" - }, - { - "type": "icon_font", - "id": "FilterConvIcon", - "width": 10, - "height": 10, - "iconFontName": "chevron-down", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - }, - { - "type": "frame", - "id": "SearchConv", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "padding": 4, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SearchConvIcon", - "width": 12, - "height": 12, - "iconFontName": "search", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ConvList", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "Conv1", - "width": "fill_container", - "fill": "#FACC1510", - "stroke": { - "align": "inside", - "thickness": 3, - "fill": "$yellow-primary" - }, - "layout": "vertical", - "gap": 8, - "padding": 16, - "children": [ - { - "type": "frame", - "id": "Conv1Header", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Conv1Left", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Conv1Dot", - "width": 8, - "height": 8, - "fill": "$success" - }, - { - "type": "text", - "id": "Conv1Name", - "fill": "$text-primary", - "content": "Nguyễn Văn A", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "Conv1Time", - "fill": "$text-tertiary", - "content": "2m", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "Conv1Preview", - "fill": "$text-secondary", - "content": "\"Tôi muốn hỏi về sản phẩm...\"", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "Conv1Channel", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "Conv1Via", - "fill": "$text-tertiary", - "content": "via", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "Conv1Platform", - "fill": "#0068FF", - "content": "ZALO", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - } - ] - } - ] - }, - { - "type": "frame", - "id": "Conv2", - "width": "fill_container", - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$border" - }, - "layout": "vertical", - "gap": 8, - "padding": 16, - "children": [ - { - "type": "frame", - "id": "Conv2Header", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Conv2Left", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Conv2Dot", - "width": 8, - "height": 8, - "fill": "$warning" - }, - { - "type": "text", - "id": "Conv2Name", - "fill": "$text-primary", - "content": "Trần Thị B", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "Conv2Time", - "fill": "$text-tertiary", - "content": "5m", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "Conv2Preview", - "fill": "$text-secondary", - "content": "\"Giá bao nhiêu vậy shop?\"", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "Conv2Channel", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "Conv2Via", - "fill": "$text-tertiary", - "content": "via", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "Conv2Platform", - "fill": "#3B82F6", - "content": "FB", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - } - ] - } - ] - }, - { - "type": "frame", - "id": "Conv3", - "width": "fill_container", - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$border" - }, - "layout": "vertical", - "gap": 8, - "padding": 16, - "children": [ - { - "type": "frame", - "id": "Conv3Header", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Conv3Left", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Conv3Dot", - "width": 8, - "height": 8, - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "Conv3Name", - "fill": "$text-primary", - "content": "Lê Văn C", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "Conv3Time", - "fill": "$text-tertiary", - "content": "12m", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "Conv3Preview", - "fill": "$text-secondary", - "content": "\"Cảm ơn shop nhé!\"", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "Conv3Channel", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "Conv3Via", - "fill": "$text-tertiary", - "content": "via", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "Conv3Platform", - "fill": "#E1306C", - "content": "IG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - } - ] - } - ] - }, - { - "type": "frame", - "id": "Conv4", - "width": "fill_container", - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$border" - }, - "layout": "vertical", - "gap": 8, - "padding": 16, - "children": [ - { - "type": "frame", - "id": "Conv4Header", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Conv4Left", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Conv4Dot", - "width": 8, - "height": 8, - "fill": "$success" - }, - { - "type": "text", - "id": "Conv4Name", - "fill": "$text-primary", - "content": "+84912xxx", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "Conv4Time", - "fill": "$text-tertiary", - "content": "15m", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "Conv4Preview", - "fill": "$text-secondary", - "content": "\"Hi, I want to order...\"", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "Conv4Channel", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "Conv4Via", - "fill": "$text-tertiary", - "content": "via", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "Conv4Platform", - "fill": "#25D366", - "content": "WA", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ChatArea", - "width": "fill_container", - "height": "fill_container", - "fill": "$bg-page", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "ChatHeader", - "width": "fill_container", - "fill": "$bg-card", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "padding": [ - 16, - 24 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ChatHeaderLeft", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CustomerAvatar", - "width": 40, - "height": 40, - "fill": "$yellow-primary", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "CustomerInitial", - "fill": "$bg-card", - "content": "NA", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "CustomerInfo", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "CustomerName", - "fill": "$text-primary", - "content": "Nguyễn Văn A", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "CustomerMeta", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "CustomerChannel", - "gap": 4, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ChannelLabel", - "fill": "$text-tertiary", - "content": "via", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "ChannelValue", - "fill": "#0068FF", - "content": "ZALO", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "CustomerLocation", - "gap": 4, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "LocationIcon", - "width": 12, - "height": 12, - "iconFontName": "map-pin", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "LocationText", - "fill": "$text-secondary", - "content": "TP. Hồ Chí Minh", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ChatHeaderActions", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "ViewProfileBtn", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "gap": 6, - "padding": [ - 8, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ProfileIcon", - "width": 14, - "height": 14, - "iconFontName": "user", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "ProfileText", - "fill": "$text-secondary", - "content": "PROFILE", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "MoreBtn", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "padding": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MoreIcon", - "width": 14, - "height": 14, - "iconFontName": "more-vertical", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ChatMessages", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "gap": 16, - "padding": 24, - "children": [ - { - "type": "frame", - "id": "MsgCustomer1", - "width": "fill_container", - "children": [ - { - "type": "frame", - "id": "MsgBubble1", - "fill": "$bg-card", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "layout": "vertical", - "gap": 6, - "padding": [ - 12, - 16 - ], - "children": [ - { - "type": "text", - "id": "MsgText1", - "fill": "$text-primary", - "content": "Xin chào shop!", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "MsgTime1", - "fill": "$text-tertiary", - "content": "10:30 AM", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "MsgAgent1", - "width": "fill_container", - "justifyContent": "end", - "children": [ - { - "type": "frame", - "id": "MsgBubbleAgent1", - "fill": "$yellow-primary", - "layout": "vertical", - "gap": 6, - "padding": [ - 12, - 16 - ], - "children": [ - { - "type": "text", - "id": "MsgTextAgent1", - "fill": "$bg-card", - "content": "Dạ chào anh/chị! Em có thể giúp gì ạ?", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "text", - "id": "MsgTimeAgent1", - "fill": "$bg-page", - "content": "10:31 AM", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "MsgCustomer2", - "width": "fill_container", - "children": [ - { - "type": "frame", - "id": "MsgBubble2", - "fill": "$bg-card", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "layout": "vertical", - "gap": 6, - "padding": [ - 12, - 16 - ], - "children": [ - { - "type": "text", - "id": "MsgText2", - "fill": "$text-primary", - "content": "Tôi muốn hỏi về sản phẩm X có còn hàng không ạ?", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "MsgTime2", - "fill": "$text-tertiary", - "content": "10:32 AM", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "TypingIndicator", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "TypingDot1", - "width": 6, - "height": 6, - "fill": "$text-tertiary" - }, - { - "type": "frame", - "id": "TypingDot2", - "width": 6, - "height": 6, - "fill": "$text-tertiary" - }, - { - "type": "frame", - "id": "TypingDot3", - "width": 6, - "height": 6, - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "TypingText", - "fill": "$text-tertiary", - "content": "Customer is typing...", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "QuickReplies", - "width": "fill_container", - "fill": "$bg-card", - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$border" - }, - "gap": 8, - "padding": [ - 12, - 24 - ], - "children": [ - { - "type": "text", - "id": "QuickLabel", - "fill": "$text-tertiary", - "content": "QUICK:", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "Quick1", - "fill": "$bg-page", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "padding": [ - 6, - 12 - ], - "children": [ - { - "type": "text", - "id": "Quick1Text", - "fill": "$text-secondary", - "content": "Xin chào!", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "Quick2", - "fill": "$bg-page", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "padding": [ - 6, - 12 - ], - "children": [ - { - "type": "text", - "id": "Quick2Text", - "fill": "$text-secondary", - "content": "Cảm ơn", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "Quick3", - "fill": "$bg-page", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "padding": [ - 6, - 12 - ], - "children": [ - { - "type": "text", - "id": "Quick3Text", - "fill": "$text-secondary", - "content": "Đang kiểm tra", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "Quick4", - "fill": "$bg-page", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "padding": [ - 6, - 12 - ], - "children": [ - { - "type": "text", - "id": "Quick4Text", - "fill": "$text-secondary", - "content": "Liên hệ CSKH", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "MessageInput", - "width": "fill_container", - "fill": "$bg-card", - "gap": 12, - "padding": [ - 16, - 24 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "AttachBtn", - "width": 40, - "height": 40, - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "AttachIcon", - "width": 18, - "height": 18, - "iconFontName": "paperclip", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - }, - { - "type": "frame", - "id": "InputField", - "width": "fill_container", - "height": 40, - "fill": "$bg-page", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "padding": [ - 0, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "InputPlaceholder", - "fill": "$text-tertiary", - "content": "Type your message...", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "SendBtn", - "width": 40, - "height": 40, - "fill": "$yellow-primary", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SendIcon", - "width": 18, - "height": 18, - "iconFontName": "send", - "iconFontFamily": "lucide", - "fill": "$bg-card" - } - ] - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-page": { - "type": "color", - "value": "#18181B" - }, - "bg-card": { - "type": "color", - "value": "#0F0F10" - }, - "yellow-primary": { - "type": "color", - "value": "#FACC15" - }, - "text-primary": { - "type": "color", - "value": "#FAFAFA" - }, - "text-secondary": { - "type": "color", - "value": "#71717A" - }, - "text-tertiary": { - "type": "color", - "value": "#52525B" - }, - "border": { - "type": "color", - "value": "#27272A" - }, - "success": { - "type": "color", - "value": "#22C55E" - }, - "warning": { - "type": "color", - "value": "#FACC15" - }, - "error": { - "type": "color", - "value": "#EF4444" - }, - "info": { - "type": "color", - "value": "#3B82F6" - } - } -} \ No newline at end of file diff --git a/pencil-design/src/pages/tMarketing/desktop/social-hub.pen b/pencil-design/src/pages/tMarketing/desktop/social-hub.pen deleted file mode 100644 index f57882b3..00000000 --- a/pencil-design/src/pages/tMarketing/desktop/social-hub.pen +++ /dev/null @@ -1,1646 +0,0 @@ -{ - "version": "2.7", - "children": [ - { - "type": "frame", - "id": "SocialHubScreen", - "x": 0, - "y": 0, - "name": "Screen/Social Hub", - "reusable": true, - "clip": true, - "width": 1440, - "height": 900, - "fill": "$bg-page", - "children": [ - { - "type": "frame", - "id": "Sidebar", - "width": 240, - "height": "fill_container", - "fill": "$bg-card", - "stroke": { - "align": "inside", - "thickness": 3, - "fill": "$yellow-primary" - }, - "layout": "vertical", - "padding": [ - 24, - 16 - ], - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "SidebarTop", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "LogoSection", - "width": "fill_container", - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$border" - }, - "gap": 8, - "padding": [ - 0, - 0, - 16, - 0 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "LogoMark", - "width": 32, - "height": 32, - "fill": "$yellow-primary", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "LogoLetter", - "fill": "$bg-card", - "content": "M", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "LogoText", - "fill": "$text-primary", - "content": "tMARKETING", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "NavSection", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "frame", - "id": "NavHub", - "width": "fill_container", - "fill": "#FACC1515", - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$yellow-primary" - }, - "gap": 10, - "padding": [ - 10, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NavHubNum", - "fill": "$yellow-primary", - "content": "01", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "NavHubLabel", - "fill": "$text-primary", - "content": "HUB", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NavChat", - "width": "fill_container", - "gap": 10, - "padding": [ - 10, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NavChatNum", - "fill": "$text-tertiary", - "content": "02", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "NavChatLabel", - "fill": "$text-secondary", - "content": "CHAT", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "NavCRM", - "width": "fill_container", - "gap": 10, - "padding": [ - 10, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NavCRMNum", - "fill": "$text-tertiary", - "content": "03", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "NavCRMLabel", - "fill": "$text-secondary", - "content": "CRM", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "NavAI", - "width": "fill_container", - "gap": 10, - "padding": [ - 10, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NavAINum", - "fill": "$text-tertiary", - "content": "04", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "NavAILabel", - "fill": "$text-secondary", - "content": "AI STUDIO", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "NavStats", - "width": "fill_container", - "gap": 10, - "padding": [ - 10, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NavStatsNum", - "fill": "$text-tertiary", - "content": "05", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "NavStatsLabel", - "fill": "$text-secondary", - "content": "ANALYTICS", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SidebarBottom", - "width": "fill_container", - "layout": "vertical", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "MetricsBox", - "width": "fill_container", - "fill": "#FACC1510", - "stroke": { - "thickness": 1, - "fill": "#FACC1530" - }, - "layout": "vertical", - "gap": 12, - "padding": 16, - "children": [ - { - "type": "frame", - "id": "MetricsHeader", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MetricsIcon", - "width": 14, - "height": 14, - "iconFontName": "bar-chart-2", - "iconFontFamily": "lucide", - "fill": "$yellow-primary" - }, - { - "type": "text", - "id": "MetricsLabel", - "fill": "$yellow-primary", - "content": "REACH TODAY", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "MetricsValue", - "fill": "$text-primary", - "content": "45.2K", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "AccountRow", - "width": "fill_container", - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$border" - }, - "gap": 10, - "padding": [ - 20, - 0, - 0, - 0 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Avatar", - "width": 32, - "height": 32, - "fill": "$border", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "AvatarText", - "fill": "$text-primary", - "content": "AD", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "UserName", - "fill": "$text-primary", - "content": "ADMIN", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "icon_font", - "id": "ChevronIcon", - "width": 14, - "height": 14, - "iconFontName": "chevron-right", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "MainContent", - "width": "fill_container", - "height": "fill_container", - "fill": "$bg-page", - "layout": "vertical", - "gap": 24, - "padding": [ - 32, - 40 - ], - "children": [ - { - "type": "frame", - "id": "PageHeader", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "HeaderLeft", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "PageTitle", - "fill": "$text-primary", - "content": "SOCIAL HUB", - "fontFamily": "Roboto", - "fontSize": 32, - "fontWeight": "700" - }, - { - "type": "text", - "id": "PageSubtitle", - "fill": "$text-secondary", - "content": "Manage all your social media channels in one place", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "HeaderActions", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "SearchBtn", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "gap": 8, - "padding": [ - 10, - 14 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SearchIcon", - "width": 14, - "height": 14, - "iconFontName": "search", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SearchText", - "fill": "$text-secondary", - "content": "SEARCH", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "NewPostBtn", - "fill": "$yellow-primary", - "gap": 6, - "padding": [ - 10, - 18 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PlusIcon", - "width": 14, - "height": 14, - "iconFontName": "plus", - "iconFontFamily": "lucide", - "fill": "$bg-card" - }, - { - "type": "text", - "id": "NewPostText", - "fill": "$bg-card", - "content": "NEW POST", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "700" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "TopRow", - "width": "fill_container", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "PlatformStatus", - "width": "fill_container", - "fill": "$bg-card", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "PlatformHeader", - "width": "fill_container", - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$border" - }, - "gap": 10, - "padding": [ - 16, - 20 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PlatformIcon", - "width": 16, - "height": 16, - "iconFontName": "globe", - "iconFontFamily": "lucide", - "fill": "$yellow-primary" - }, - { - "type": "text", - "id": "PlatformTitle", - "fill": "$text-primary", - "content": "PLATFORM STATUS", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "PlatformList", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "padding": 16, - "children": [ - { - "type": "frame", - "id": "PlatformFB", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PlatformFBLeft", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "FBDot", - "width": 8, - "height": 8, - "fill": "$success" - }, - { - "type": "text", - "id": "FBName", - "fill": "$text-primary", - "content": "Facebook", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "FBStatus", - "fill": "$success", - "content": "ACTIVE", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "PlatformIG", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PlatformIGLeft", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "IGDot", - "width": 8, - "height": 8, - "fill": "$success" - }, - { - "type": "text", - "id": "IGName", - "fill": "$text-primary", - "content": "Instagram", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "IGStatus", - "fill": "$success", - "content": "ACTIVE", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "PlatformZalo", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PlatformZaloLeft", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ZaloDot", - "width": 8, - "height": 8, - "fill": "$success" - }, - { - "type": "text", - "id": "ZaloName", - "fill": "$text-primary", - "content": "Zalo OA", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "ZaloStatus", - "fill": "$success", - "content": "ACTIVE", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "PlatformX", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PlatformXLeft", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "XDot", - "width": 8, - "height": 8, - "fill": "$warning" - }, - { - "type": "text", - "id": "XName", - "fill": "$text-primary", - "content": "X (Twitter)", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "XStatus", - "fill": "$warning", - "content": "PENDING", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "PlatformWA", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PlatformWALeft", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "WADot", - "width": 8, - "height": 8, - "fill": "$success" - }, - { - "type": "text", - "id": "WAName", - "fill": "$text-primary", - "content": "WhatsApp", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "WAStatus", - "fill": "$success", - "content": "ACTIVE", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "QuickActions", - "width": 280, - "fill": "$bg-card", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "ActionsHeader", - "width": "fill_container", - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$border" - }, - "gap": 10, - "padding": [ - 16, - 20 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ActionsIcon", - "width": 16, - "height": 16, - "iconFontName": "zap", - "iconFontFamily": "lucide", - "fill": "$yellow-primary" - }, - { - "type": "text", - "id": "ActionsTitle", - "fill": "$text-primary", - "content": "QUICK ACTIONS", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "ActionsList", - "width": "fill_container", - "layout": "vertical", - "gap": 10, - "padding": 16, - "children": [ - { - "type": "frame", - "id": "ActionPost", - "width": "fill_container", - "fill": "$bg-page", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "gap": 10, - "padding": [ - 10, - 14 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ActionPostIcon", - "width": 14, - "height": 14, - "iconFontName": "edit-3", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "ActionPostText", - "fill": "$text-primary", - "content": "CREATE POST", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "ActionStats", - "width": "fill_container", - "fill": "$bg-page", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "gap": 10, - "padding": [ - 10, - 14 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ActionStatsIcon", - "width": 14, - "height": 14, - "iconFontName": "bar-chart-2", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "ActionStatsText", - "fill": "$text-primary", - "content": "VIEW STATS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "ActionReply", - "width": "fill_container", - "fill": "$bg-page", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "gap": 10, - "padding": [ - 10, - 14 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ActionReplyIcon", - "width": 14, - "height": 14, - "iconFontName": "message-circle", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "ActionReplyText", - "fill": "$text-primary", - "content": "REPLY ALL", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "ActionSchedule", - "width": "fill_container", - "fill": "$bg-page", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "gap": 10, - "padding": [ - 10, - 14 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ActionScheduleIcon", - "width": 14, - "height": 14, - "iconFontName": "calendar", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "ActionScheduleText", - "fill": "$text-primary", - "content": "SCHEDULE", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "UnifiedFeed", - "width": "fill_container", - "height": "fill_container", - "fill": "$bg-card", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "FeedHeader", - "width": "fill_container", - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$border" - }, - "padding": [ - 16, - 20 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "FeedHeaderLeft", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "FeedIcon", - "width": 16, - "height": 16, - "iconFontName": "rss", - "iconFontFamily": "lucide", - "fill": "$yellow-primary" - }, - { - "type": "text", - "id": "FeedTitle", - "fill": "$text-primary", - "content": "UNIFIED FEED", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "FeedActions", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "FilterBtn", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "gap": 6, - "padding": [ - 6, - 10 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "FilterText", - "fill": "$text-secondary", - "content": "ALL", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "600" - }, - { - "type": "icon_font", - "id": "FilterArrow", - "width": 12, - "height": 12, - "iconFontName": "chevron-down", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - }, - { - "type": "frame", - "id": "RefreshBtn", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "padding": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "RefreshIcon", - "width": 14, - "height": 14, - "iconFontName": "refresh-cw", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "FeedList", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "padding": 16, - "children": [ - { - "type": "frame", - "id": "FeedItem1", - "width": "fill_container", - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$border" - }, - "gap": 12, - "padding": [ - 12, - 0 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Indicator1", - "width": 3, - "height": 36, - "fill": "#3B82F6" - }, - { - "type": "frame", - "id": "FeedContent1", - "width": "fill_container", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "FeedTitle1", - "fill": "$text-primary", - "content": "@customer1 commented on your post", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "FeedDesc1", - "fill": "$text-secondary", - "content": "\"Great product! Love it!\"", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "FeedBadge1", - "fill": "#3B82F6", - "content": "FB", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "FeedItem2", - "width": "fill_container", - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$border" - }, - "gap": 12, - "padding": [ - 12, - 0 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Indicator2", - "width": 3, - "height": 36, - "fill": "#E1306C" - }, - { - "type": "frame", - "id": "FeedContent2", - "width": "fill_container", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "FeedTitle2", - "fill": "$text-primary", - "content": "@user123 liked your post", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "FeedDesc2", - "fill": "$text-secondary", - "content": "Spring Collection 2026 announcement", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "FeedBadge2", - "fill": "#E1306C", - "content": "IG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "FeedItem3", - "width": "fill_container", - "stroke": { - "align": "inside", - "thickness": 1, - "fill": "$border" - }, - "gap": 12, - "padding": [ - 12, - 0 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Indicator3", - "width": 3, - "height": 36, - "fill": "#0068FF" - }, - { - "type": "frame", - "id": "FeedContent3", - "width": "fill_container", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "FeedTitle3", - "fill": "$text-primary", - "content": "Khách hàng gửi tin nhắn mới", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "FeedDesc3", - "fill": "$text-secondary", - "content": "\"Cho mình hỏi giá sản phẩm X...\"", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "FeedBadge3", - "fill": "#0068FF", - "content": "ZALO", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "FeedItem4", - "width": "fill_container", - "gap": 12, - "padding": [ - 12, - 0 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Indicator4", - "width": 3, - "height": 36, - "fill": "#25D366" - }, - { - "type": "frame", - "id": "FeedContent4", - "width": "fill_container", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "FeedTitle4", - "fill": "$text-primary", - "content": "+84912xxx sent a message", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "FeedDesc4", - "fill": "$text-secondary", - "content": "\"Hi, I want to order...\"", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "FeedBadge4", - "fill": "#25D366", - "content": "WA", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "KPICards", - "width": "fill_container", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "KPIReach", - "width": "fill_container", - "fill": "$bg-card", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "layout": "vertical", - "gap": 12, - "padding": 20, - "children": [ - { - "type": "text", - "id": "KPIReachLabel", - "fill": "$text-secondary", - "content": "TOTAL REACH", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - }, - { - "type": "text", - "id": "KPIReachValue", - "fill": "$text-primary", - "content": "45.2K", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "KPIReachChange", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "KPIReachArrow", - "width": 12, - "height": 12, - "iconFontName": "arrow-up-right", - "iconFontFamily": "lucide", - "fill": "$success" - }, - { - "type": "text", - "id": "KPIReachPercent", - "fill": "$success", - "content": "12.5%", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "KPIEngage", - "width": "fill_container", - "fill": "$bg-card", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "layout": "vertical", - "gap": 12, - "padding": 20, - "children": [ - { - "type": "text", - "id": "KPIEngageLabel", - "fill": "$text-secondary", - "content": "ENGAGEMENT", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - }, - { - "type": "text", - "id": "KPIEngageValue", - "fill": "$text-primary", - "content": "12.8%", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "KPIEngageChange", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "KPIEngageArrow", - "width": 12, - "height": 12, - "iconFontName": "arrow-up-right", - "iconFontFamily": "lucide", - "fill": "$success" - }, - { - "type": "text", - "id": "KPIEngagePercent", - "fill": "$success", - "content": "8.2%", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "KPIFollowers", - "width": "fill_container", - "fill": "$bg-card", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "layout": "vertical", - "gap": 12, - "padding": 20, - "children": [ - { - "type": "text", - "id": "KPIFollowersLabel", - "fill": "$text-secondary", - "content": "NEW FOLLOWERS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - }, - { - "type": "text", - "id": "KPIFollowersValue", - "fill": "$text-primary", - "content": "+1.2K", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "KPIFollowersChange", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "KPIFollowersArrow", - "width": 12, - "height": 12, - "iconFontName": "arrow-up-right", - "iconFontFamily": "lucide", - "fill": "$success" - }, - { - "type": "text", - "id": "KPIFollowersPercent", - "fill": "$success", - "content": "24.1%", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "KPIMessages", - "width": "fill_container", - "fill": "$bg-card", - "stroke": { - "thickness": 1, - "fill": "$border" - }, - "layout": "vertical", - "gap": 12, - "padding": 20, - "children": [ - { - "type": "text", - "id": "KPIMessagesLabel", - "fill": "$text-secondary", - "content": "MESSAGES", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - }, - { - "type": "text", - "id": "KPIMessagesValue", - "fill": "$text-primary", - "content": "234", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "KPIMessagesChange", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "KPIMessagesArrow", - "width": 12, - "height": 12, - "iconFontName": "minus", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "KPIMessagesPercent", - "fill": "$text-tertiary", - "content": "0.0%", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-page": { - "type": "color", - "value": "#18181B" - }, - "bg-card": { - "type": "color", - "value": "#0F0F10" - }, - "yellow-primary": { - "type": "color", - "value": "#FACC15" - }, - "text-primary": { - "type": "color", - "value": "#FAFAFA" - }, - "text-secondary": { - "type": "color", - "value": "#71717A" - }, - "text-tertiary": { - "type": "color", - "value": "#52525B" - }, - "border": { - "type": "color", - "value": "#27272A" - }, - "success": { - "type": "color", - "value": "#22C55E" - }, - "warning": { - "type": "color", - "value": "#FACC15" - }, - "error": { - "type": "color", - "value": "#EF4444" - }, - "info": { - "type": "color", - "value": "#3B82F6" - } - } -} \ No newline at end of file diff --git a/pencil-design/src/pages/tMarketing/mobile/ai-chatbot.pen b/pencil-design/src/pages/tMarketing/mobile/ai-chatbot.pen deleted file mode 100644 index a20665fc..00000000 --- a/pencil-design/src/pages/tMarketing/mobile/ai-chatbot.pen +++ /dev/null @@ -1,266 +0,0 @@ -{ - "version": "2.6", - "children": [{ - "type": "frame", - "id": "ACM_Screen", - "name": "Screen/AI Chatbot Mobile", - "reusable": true, - "width": 390, - "height": 844, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "ACM_Header", - "width": "fill_container", - "height": 56, - "fill": "$bg-card", - "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, - "padding": [0, 16], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "ACM_HeaderLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "ACM_LogoMark", "width": 28, "height": 28, "fill": "$yellow-primary", "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "ACM_LogoLetter", "fill": "$bg-card", "content": "M", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} - ]}, - {"type": "text", "id": "ACM_PageTitle", "fill": "$text-primary", "content": "AI CHATBOT", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "ACM_HeaderRight", "gap": 16, "children": [ - {"type": "icon_font", "id": "ACM_SearchIcon", "width": 20, "height": 20, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "icon_font", "id": "ACM_MenuIcon", "width": 20, "height": 20, "iconFontName": "menu", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "ACM_Content", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "padding": [16, 16], - "gap": 14, - "children": [ - { - "type": "frame", - "id": "ACM_CreditsBar", - "width": "fill_container", - "fill": "#A855F715", - "padding": 12, - "stroke": {"fill": "#A855F730", "thickness": 1}, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "ACM_CreditsLeft", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ACM_CreditsIcon", "width": 14, "height": 14, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "#A855F7"}, - {"type": "text", "id": "ACM_CreditsLabel", "fill": "#A855F7", "content": "AI CREDITS", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"} - ]}, - {"type": "text", "id": "ACM_CreditsValue", "fill": "$text-primary", "content": "8.2K tokens left", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"} - ] - }, - { - "type": "frame", - "id": "ACM_ScenariosHeader", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "ACM_ScenariosLeft", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ACM_ScenariosIcon", "width": 14, "height": 14, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "$yellow-primary"}, - {"type": "text", "id": "ACM_ScenariosTitle", "fill": "$text-primary", "content": "AI SCENARIOS", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "ACM_AddBtn", "width": 28, "height": 28, "fill": "$yellow-primary", "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ACM_AddBtnIcon", "width": 14, "height": 14, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$bg-card"} - ]} - ] - }, - { - "type": "frame", - "id": "ACM_Scenario1", - "width": "fill_container", - "fill": "#FACC1510", - "layout": "vertical", - "padding": 14, - "gap": 10, - "stroke": {"align": "inside", "fill": "$yellow-primary", "thickness": 2}, - "children": [ - {"type": "frame", "id": "ACM_S1Header", "justifyContent": "space_between", "alignItems": "center", "width": "fill_container", "children": [ - {"type": "frame", "id": "ACM_S1Left", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ACM_S1Icon", "width": 14, "height": 14, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "#A855F7"}, - {"type": "text", "id": "ACM_S1Name", "fill": "$text-primary", "content": "Product Consultant", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "ACM_S1Status", "fill": "#22C55E20", "padding": [3, 8], "children": [ - {"type": "text", "id": "ACM_S1StatusText", "fill": "$success", "content": "ACTIVE", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "700"} - ]} - ]}, - {"type": "text", "id": "ACM_S1Desc", "fill": "$text-secondary", "content": "Automated product consulting with AI", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"}, - {"type": "frame", "id": "ACM_S1Stats", "gap": 16, "children": [ - {"type": "text", "id": "ACM_S1Convos", "fill": "$text-tertiary", "content": "2.4K convos", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "normal"}, - {"type": "text", "id": "ACM_S1Rate", "fill": "$success", "content": "92% success", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "normal"} - ]}, - {"type": "text", "id": "ACM_S1Model", "fill": "#A855F7", "content": "Gemini 2.0 Flash", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "500"} - ] - }, - { - "type": "frame", - "id": "ACM_Scenario2", - "width": "fill_container", - "layout": "vertical", - "padding": 14, - "gap": 10, - "stroke": {"align": "inside", "fill": "$border", "thickness": 1}, - "children": [ - {"type": "frame", "id": "ACM_S2Header", "justifyContent": "space_between", "alignItems": "center", "width": "fill_container", "children": [ - {"type": "frame", "id": "ACM_S2Left", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ACM_S2Icon", "width": 14, "height": 14, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "#A855F7"}, - {"type": "text", "id": "ACM_S2Name", "fill": "$text-primary", "content": "FAQ Handler", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "ACM_S2Status", "fill": "#22C55E20", "padding": [3, 8], "children": [ - {"type": "text", "id": "ACM_S2StatusText", "fill": "$success", "content": "ACTIVE", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "700"} - ]} - ]}, - {"type": "text", "id": "ACM_S2Desc", "fill": "$text-secondary", "content": "Answer frequently asked questions", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"}, - {"type": "frame", "id": "ACM_S2Stats", "gap": 16, "children": [ - {"type": "text", "id": "ACM_S2Convos", "fill": "$text-tertiary", "content": "5.1K convos", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "normal"}, - {"type": "text", "id": "ACM_S2Rate", "fill": "$success", "content": "88% success", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "normal"} - ]} - ] - }, - { - "type": "frame", - "id": "ACM_Scenario3", - "width": "fill_container", - "layout": "vertical", - "padding": 14, - "gap": 10, - "stroke": {"align": "inside", "fill": "$border", "thickness": 1}, - "children": [ - {"type": "frame", "id": "ACM_S3Header", "justifyContent": "space_between", "alignItems": "center", "width": "fill_container", "children": [ - {"type": "frame", "id": "ACM_S3Left", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ACM_S3Icon", "width": 14, "height": 14, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "#A855F7"}, - {"type": "text", "id": "ACM_S3Name", "fill": "$text-primary", "content": "Lead Generator", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "ACM_S3Status", "fill": "#FACC1520", "padding": [3, 8], "children": [ - {"type": "text", "id": "ACM_S3StatusText", "fill": "$warning", "content": "TRAINING", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "700"} - ]} - ]}, - {"type": "text", "id": "ACM_S3Desc", "fill": "$text-secondary", "content": "Collect customer information", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"}, - {"type": "frame", "id": "ACM_S3Stats", "gap": 16, "children": [ - {"type": "text", "id": "ACM_S3Convos", "fill": "$text-tertiary", "content": "342 test runs", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "normal"} - ]} - ] - }, - { - "type": "frame", - "id": "ACM_Scenario4", - "width": "fill_container", - "layout": "vertical", - "padding": 14, - "gap": 10, - "stroke": {"align": "inside", "fill": "$border", "thickness": 1}, - "children": [ - {"type": "frame", "id": "ACM_S4Header", "justifyContent": "space_between", "alignItems": "center", "width": "fill_container", "children": [ - {"type": "frame", "id": "ACM_S4Left", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ACM_S4Icon", "width": 14, "height": 14, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "#A855F7"}, - {"type": "text", "id": "ACM_S4Name", "fill": "$text-primary", "content": "Promo Campaign", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "ACM_S4Status", "fill": "$bg-page", "padding": [3, 8], "children": [ - {"type": "text", "id": "ACM_S4StatusText", "fill": "$text-tertiary", "content": "DRAFT", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "700"} - ]} - ]}, - {"type": "text", "id": "ACM_S4Desc", "fill": "$text-secondary", "content": "Introduce new promotions", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"} - ] - }, - { - "type": "frame", - "id": "ACM_ChatPreview", - "width": "fill_container", - "fill": "$bg-card", - "layout": "vertical", - "stroke": {"fill": "$border", "thickness": 1}, - "children": [ - {"type": "frame", "id": "ACM_ChatHeader", "width": "fill_container", "padding": [12, 14], "gap": 8, "alignItems": "center", "stroke": {"align": "inside", "fill": "$border", "thickness": 1}, "children": [ - {"type": "icon_font", "id": "ACM_ChatIcon", "width": 14, "height": 14, "iconFontName": "message-square", "iconFontFamily": "lucide", "fill": "$yellow-primary"}, - {"type": "text", "id": "ACM_ChatTitle", "fill": "$text-primary", "content": "TEST CHAT", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "ACM_ChatMessages", "width": "fill_container", "layout": "vertical", "padding": 12, "gap": 10, "children": [ - {"type": "frame", "id": "ACM_UserMsg", "width": "fill_container", "justifyContent": "end", "children": [ - {"type": "frame", "id": "ACM_UserBubble", "fill": "$yellow-primary", "padding": [8, 12], "children": [ - {"type": "text", "id": "ACM_UserText", "fill": "$bg-card", "content": "Product X price?", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "ACM_BotMsg", "width": "fill_container", "gap": 8, "children": [ - {"type": "frame", "id": "ACM_BotAvatar", "width": 24, "height": 24, "fill": "#A855F720", "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ACM_BotAvatarIcon", "width": 12, "height": 12, "iconFontName": "bot", "iconFontFamily": "lucide", "fill": "#A855F7"} - ]}, - {"type": "frame", "id": "ACM_BotBubble", "fill": "$bg-page", "padding": [8, 12], "stroke": {"fill": "$border", "thickness": 1}, "layout": "vertical", "gap": 6, "width": "fill_container", "children": [ - {"type": "text", "id": "ACM_BotText", "fill": "$text-primary", "content": "S: 250K | M: 290K | L: 350K", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, - {"type": "frame", "id": "ACM_BotInfo", "gap": 6, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ACM_BotInfoIcon", "width": 10, "height": 10, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "#A855F7"}, - {"type": "text", "id": "ACM_BotInfoText", "fill": "#A855F7", "content": "Gemini 2.0", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "normal"} - ]} - ]} - ]} - ]}, - {"type": "frame", "id": "ACM_ChatInput", "width": "fill_container", "padding": [10, 12], "gap": 8, "alignItems": "center", "stroke": {"align": "inside", "fill": "$border", "thickness": 1}, "children": [ - {"type": "frame", "id": "ACM_InputField", "fill": "$bg-page", "height": 32, "padding": [0, 10], "alignItems": "center", "width": "fill_container", "stroke": {"fill": "$border", "thickness": 1}, "children": [ - {"type": "text", "id": "ACM_InputPlaceholder", "fill": "$text-tertiary", "content": "Type a message...", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "ACM_SendBtn", "width": 32, "height": 32, "fill": "$yellow-primary", "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ACM_SendIcon", "width": 14, "height": 14, "iconFontName": "send", "iconFontFamily": "lucide", "fill": "$bg-card"} - ]} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "ACM_TabBar", - "width": "fill_container", - "height": 64, - "fill": "$bg-card", - "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, - "justifyContent": "space_around", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "ACM_TabHub", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ACM_TabHubIcon", "width": 20, "height": 20, "iconFontName": "layout-grid", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "ACM_TabHubText", "fill": "$text-tertiary", "content": "HUB", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "ACM_TabChat", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ACM_TabChatIcon", "width": 20, "height": 20, "iconFontName": "message-circle", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "ACM_TabChatText", "fill": "$text-tertiary", "content": "CHAT", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "ACM_TabCRM", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ACM_TabCRMIcon", "width": 20, "height": 20, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "ACM_TabCRMText", "fill": "$text-tertiary", "content": "CRM", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "ACM_TabAI", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ACM_TabAIIcon", "width": 20, "height": 20, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "$yellow-primary"}, - {"type": "text", "id": "ACM_TabAIText", "fill": "$yellow-primary", "content": "AI", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "ACM_TabStats", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ACM_TabStatsIcon", "width": 20, "height": 20, "iconFontName": "bar-chart-3", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "ACM_TabStatsText", "fill": "$text-tertiary", "content": "STATS", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]} - ] - } - ] - }], - "variables": { - "bg-page": {"type": "color", "value": "#18181B"}, - "bg-card": {"type": "color", "value": "#0F0F10"}, - "yellow-primary": {"type": "color", "value": "#FACC15"}, - "text-primary": {"type": "color", "value": "#FAFAFA"}, - "text-secondary": {"type": "color", "value": "#71717A"}, - "text-tertiary": {"type": "color", "value": "#52525B"}, - "border": {"type": "color", "value": "#27272A"}, - "success": {"type": "color", "value": "#22C55E"}, - "warning": {"type": "color", "value": "#FACC15"}, - "error": {"type": "color", "value": "#EF4444"}, - "info": {"type": "color", "value": "#3B82F6"} - } -} \ No newline at end of file diff --git a/pencil-design/src/pages/tMarketing/mobile/ai-content-studio.pen b/pencil-design/src/pages/tMarketing/mobile/ai-content-studio.pen deleted file mode 100644 index 6b86bac1..00000000 --- a/pencil-design/src/pages/tMarketing/mobile/ai-content-studio.pen +++ /dev/null @@ -1,208 +0,0 @@ -{ - "version": "2.6", - "children": [{ - "type": "frame", - "id": "AIS_Root", - "name": "Screen/AI Content Studio Mobile", - "reusable": true, - "width": 390, - "height": 844, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "AIS_Header", - "width": "fill_container", - "height": 56, - "fill": "$bg-card", - "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, - "padding": [0, 16], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "AIS_HeaderLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "AIS_LogoMark", "width": 28, "height": 28, "fill": "$yellow-primary", "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "AIS_LogoLetter", "fill": "$bg-card", "content": "M", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} - ]}, - {"type": "text", "id": "AIS_PageTitle", "fill": "$text-primary", "content": "AI STUDIO", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "AIS_HeaderRight", "gap": 16, "children": [ - {"type": "icon_font", "id": "AIS_SearchIcon", "width": 20, "height": 20, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "icon_font", "id": "AIS_MenuIcon", "width": 20, "height": 20, "iconFontName": "menu", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "AIS_ScrollContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "padding": [16, 16], - "gap": 16, - "children": [ - { - "type": "frame", "id": "AIS_QuickActions", "width": "fill_container", "gap": 10, "flexWrap": "wrap", - "children": [ - {"type": "frame", "id": "AIS_ActionPost", "fill": "$bg-card", "gap": 8, "padding": [12, 14], "stroke": {"fill": "$border", "thickness": 1}, "alignItems": "center", "width": "fill_container(171)", "children": [ - {"type": "icon_font", "id": "AIS_ActionPostIcon", "width": 14, "height": 14, "iconFontName": "file-text", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "AIS_ActionPostText", "content": "DRAFTS", "fill": "$text-primary", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "AIS_ActionSchedule", "fill": "$bg-card", "gap": 8, "padding": [12, 14], "stroke": {"fill": "$border", "thickness": 1}, "alignItems": "center", "width": "fill_container(171)", "children": [ - {"type": "icon_font", "id": "AIS_ActionScheduleIcon", "width": 14, "height": 14, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "AIS_ActionScheduleText", "content": "SCHEDULE", "fill": "$text-primary", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ] - }, - { - "type": "frame", "id": "AIS_AIGenSection", "width": "fill_container", "fill": "$bg-card", "layout": "vertical", "stroke": {"fill": "$border", "thickness": 1}, - "children": [ - {"type": "frame", "id": "AIS_AIHeader", "width": "fill_container", "padding": [14, 16], "gap": 10, "alignItems": "center", "stroke": {"fill": "$border", "thickness": 1, "align": "inside"}, "children": [ - {"type": "icon_font", "id": "AIS_AIHeaderIcon", "width": 16, "height": 16, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "#A855F7"}, - {"type": "text", "id": "AIS_AIHeaderTitle", "content": "AI GENERATION", "fill": "$text-primary", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "AIS_PromptSection", "width": "fill_container", "layout": "vertical", "gap": 12, "padding": [14, 16], "children": [ - {"type": "text", "id": "AIS_PromptLabel", "content": "PROMPT", "fill": "$text-secondary", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}, - {"type": "frame", "id": "AIS_PromptInput", "width": "fill_container", "height": 80, "fill": "$bg-page", "padding": 12, "stroke": {"fill": "$border", "thickness": 1}, "children": [ - {"type": "text", "id": "AIS_PromptPlaceholder", "content": "Describe the content you want to generate...", "fill": "$text-tertiary", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]}, - {"type": "text", "id": "AIS_StyleLabel", "content": "STYLE", "fill": "$text-secondary", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}, - {"type": "frame", "id": "AIS_StyleOptions", "width": "fill_container", "gap": 8, "children": [ - {"type": "frame", "id": "AIS_StylePro", "padding": [8, 12], "fill": "#A855F715", "stroke": {"fill": "#A855F7", "thickness": 1}, "children": [ - {"type": "text", "id": "AIS_StyleProText", "content": "PRO", "fill": "#A855F7", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "AIS_StyleMinimal", "padding": [8, 12], "stroke": {"fill": "$border", "thickness": 1}, "children": [ - {"type": "text", "id": "AIS_StyleMinimalText", "content": "MINIMAL", "fill": "$text-secondary", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "AIS_StyleVibrant", "padding": [8, 12], "stroke": {"fill": "$border", "thickness": 1}, "children": [ - {"type": "text", "id": "AIS_StyleVibrantText", "content": "VIBRANT", "fill": "$text-secondary", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]} - ]}, - {"type": "text", "id": "AIS_OutputLabel", "content": "OUTPUT", "fill": "$text-secondary", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}, - {"type": "frame", "id": "AIS_OutputOptions", "width": "fill_container", "gap": 8, "children": [ - {"type": "frame", "id": "AIS_OutPost", "padding": [8, 12], "fill": "$yellow-primary", "gap": 6, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "AIS_OutPostIcon", "width": 12, "height": 12, "iconFontName": "file-text", "iconFontFamily": "lucide", "fill": "$bg-card"}, - {"type": "text", "id": "AIS_OutPostText", "content": "POST", "fill": "$bg-card", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "AIS_OutImage", "padding": [8, 12], "stroke": {"fill": "$border", "thickness": 1}, "gap": 6, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "AIS_OutImageIcon", "width": 12, "height": 12, "iconFontName": "image", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "AIS_OutImageText", "content": "IMAGE", "fill": "$text-secondary", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "AIS_OutVideo", "padding": [8, 12], "stroke": {"fill": "$border", "thickness": 1}, "gap": 6, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "AIS_OutVideoIcon", "width": 12, "height": 12, "iconFontName": "video", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "AIS_OutVideoText", "content": "VIDEO", "fill": "$text-secondary", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]} - ]} - ]}, - {"type": "frame", "id": "AIS_PreviewSection", "width": "fill_container", "layout": "vertical", "gap": 10, "padding": [14, 16], "children": [ - {"type": "text", "id": "AIS_PreviewLabel", "content": "PREVIEW", "fill": "$text-secondary", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}, - {"type": "frame", "id": "AIS_PreviewBox", "width": "fill_container", "height": 100, "fill": "$bg-page", "justifyContent": "center", "alignItems": "center", "layout": "vertical", "gap": 8, "stroke": {"fill": "#A855F730", "thickness": 1, "align": "inside"}, "children": [ - {"type": "icon_font", "id": "AIS_PreviewAIIcon", "width": 28, "height": 28, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "#A855F730"}, - {"type": "text", "id": "AIS_PreviewEmpty", "content": "AI preview will appear here", "fill": "$text-tertiary", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"} - ]} - ]}, - {"type": "frame", "id": "AIS_GenerateBtn", "width": "fill_container", "fill": "#A855F7", "justifyContent": "center", "alignItems": "center", "padding": [14, 0], "gap": 8, "children": [ - {"type": "icon_font", "id": "AIS_GenerateIcon", "width": 14, "height": 14, "iconFontName": "wand-2", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "AIS_GenerateText", "content": "GENERATE WITH GEMINI", "fill": "#FFFFFF", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"} - ]} - ] - }, - { - "type": "frame", "id": "AIS_UpcomingPosts", "width": "fill_container", "fill": "$bg-card", "layout": "vertical", "stroke": {"fill": "$border", "thickness": 1}, - "children": [ - {"type": "frame", "id": "AIS_UpcomingHeader", "width": "fill_container", "padding": [12, 16], "gap": 10, "alignItems": "center", "stroke": {"fill": "$border", "thickness": 1, "align": "inside"}, "children": [ - {"type": "icon_font", "id": "AIS_UpcomingIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$yellow-primary"}, - {"type": "text", "id": "AIS_UpcomingTitle", "content": "UPCOMING POSTS", "fill": "$text-primary", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "AIS_UpcomingList", "width": "fill_container", "layout": "vertical", "gap": 8, "padding": [12, 16], "children": [ - {"type": "frame", "id": "AIS_Post1", "width": "fill_container", "fill": "$bg-page", "padding": 12, "gap": 12, "alignItems": "center", "stroke": {"fill": "$border", "thickness": 1}, "children": [ - {"type": "frame", "id": "AIS_Post1Date", "layout": "vertical", "alignItems": "center", "width": 40, "children": [ - {"type": "text", "id": "AIS_Post1Day", "content": "06", "fill": "$yellow-primary", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "AIS_Post1Month", "content": "FEB", "fill": "$text-tertiary", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "AIS_Post1Info", "layout": "vertical", "gap": 4, "width": "fill_container", "children": [ - {"type": "text", "id": "AIS_Post1Title", "content": "Spring Collection Announcement", "fill": "$text-primary", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}, - {"type": "text", "id": "AIS_Post1Platforms", "content": "FB • IG", "fill": "#3B82F6", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "text", "id": "AIS_Post1Time", "content": "10:00 AM", "fill": "$text-tertiary", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "AIS_Post2", "width": "fill_container", "fill": "$bg-page", "padding": 12, "gap": 12, "alignItems": "center", "stroke": {"fill": "$border", "thickness": 1}, "children": [ - {"type": "frame", "id": "AIS_Post2Date", "layout": "vertical", "alignItems": "center", "width": 40, "children": [ - {"type": "text", "id": "AIS_Post2Day", "content": "10", "fill": "#A855F7", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "AIS_Post2Month", "content": "FEB", "fill": "$text-tertiary", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "AIS_Post2Info", "layout": "vertical", "gap": 4, "width": "fill_container", "children": [ - {"type": "text", "id": "AIS_Post2Title", "content": "AI Generated Banner", "fill": "$text-primary", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}, - {"type": "frame", "id": "AIS_Post2Badge", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "AIS_Post2AIIcon", "width": 10, "height": 10, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "#A855F7"}, - {"type": "text", "id": "AIS_Post2AIText", "content": "AI GENERATED", "fill": "#A855F7", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "700"} - ]} - ]}, - {"type": "text", "id": "AIS_Post2Time", "content": "2:00 PM", "fill": "$text-tertiary", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "AIS_Post3", "width": "fill_container", "fill": "$bg-page", "padding": 12, "gap": 12, "alignItems": "center", "stroke": {"fill": "$border", "thickness": 1}, "children": [ - {"type": "frame", "id": "AIS_Post3Date", "layout": "vertical", "alignItems": "center", "width": 40, "children": [ - {"type": "text", "id": "AIS_Post3Day", "content": "14", "fill": "#22C55E", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "AIS_Post3Month", "content": "FEB", "fill": "$text-tertiary", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "AIS_Post3Info", "layout": "vertical", "gap": 4, "width": "fill_container", "children": [ - {"type": "text", "id": "AIS_Post3Title", "content": "Valentine Campaign", "fill": "$text-primary", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}, - {"type": "text", "id": "AIS_Post3Platforms", "content": "ALL PLATFORMS", "fill": "#22C55E", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "text", "id": "AIS_Post3Time", "content": "9:00 AM", "fill": "$text-tertiary", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"} - ]} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "AIS_BottomTabBar", - "width": "fill_container", - "height": 64, - "fill": "$bg-card", - "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, - "justifyContent": "space_around", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "AIS_TabHub", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "AIS_TabHubIcon", "width": 20, "height": 20, "iconFontName": "layout-grid", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "AIS_TabHubText", "fill": "$text-tertiary", "content": "HUB", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "AIS_TabChat", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "AIS_TabChatIcon", "width": 20, "height": 20, "iconFontName": "message-circle", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "AIS_TabChatText", "fill": "$text-tertiary", "content": "CHAT", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "AIS_TabCRM", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "AIS_TabCRMIcon", "width": 20, "height": 20, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "AIS_TabCRMText", "fill": "$text-tertiary", "content": "CRM", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "AIS_TabAI", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "AIS_TabAIIcon", "width": 20, "height": 20, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "$yellow-primary"}, - {"type": "text", "id": "AIS_TabAIText", "fill": "$yellow-primary", "content": "AI", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "AIS_TabStats", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "AIS_TabStatsIcon", "width": 20, "height": 20, "iconFontName": "bar-chart-3", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "AIS_TabStatsText", "fill": "$text-tertiary", "content": "STATS", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]} - ] - } - ] - }], - "variables": { - "bg-page": {"type": "color", "value": "#18181B"}, - "bg-card": {"type": "color", "value": "#0F0F10"}, - "yellow-primary": {"type": "color", "value": "#FACC15"}, - "text-primary": {"type": "color", "value": "#FAFAFA"}, - "text-secondary": {"type": "color", "value": "#71717A"}, - "text-tertiary": {"type": "color", "value": "#52525B"}, - "border": {"type": "color", "value": "#27272A"}, - "success": {"type": "color", "value": "#22C55E"}, - "warning": {"type": "color", "value": "#FACC15"}, - "error": {"type": "color", "value": "#EF4444"}, - "info": {"type": "color", "value": "#3B82F6"} - } -} \ No newline at end of file diff --git a/pencil-design/src/pages/tMarketing/mobile/analytics-dashboard.pen b/pencil-design/src/pages/tMarketing/mobile/analytics-dashboard.pen deleted file mode 100644 index ce511609..00000000 --- a/pencil-design/src/pages/tMarketing/mobile/analytics-dashboard.pen +++ /dev/null @@ -1,318 +0,0 @@ -{ - "version": "2.6", - "children": [{ - "type": "frame", - "id": "ADM_Screen", - "name": "Screen/Analytics Dashboard Mobile", - "reusable": true, - "width": 390, - "height": 844, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "ADM_Header", - "width": "fill_container", - "height": 56, - "fill": "$bg-card", - "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, - "padding": [0, 16], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "ADM_HeaderLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "ADM_LogoMark", "width": 28, "height": 28, "fill": "$yellow-primary", "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "ADM_LogoLetter", "fill": "$bg-card", "content": "M", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} - ]}, - {"type": "text", "id": "ADM_PageTitle", "fill": "$text-primary", "content": "ANALYTICS", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "ADM_HeaderRight", "gap": 16, "children": [ - {"type": "icon_font", "id": "ADM_SearchIcon", "width": 20, "height": 20, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "icon_font", "id": "ADM_MenuIcon", "width": 20, "height": 20, "iconFontName": "menu", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "ADM_Content", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "padding": [16, 16], - "gap": 14, - "children": [ - { - "type": "frame", - "id": "ADM_FilterBar", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "ADM_DateRange", "gap": 8, "alignItems": "center", "padding": [8, 12], "stroke": {"fill": "$border", "thickness": 1}, "children": [ - {"type": "icon_font", "id": "ADM_CalendarIcon", "width": 12, "height": 12, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "ADM_DateText", "fill": "$text-secondary", "content": "LAST 7 DAYS", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "500"}, - {"type": "icon_font", "id": "ADM_DateArrow", "width": 10, "height": 10, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]}, - {"type": "frame", "id": "ADM_ExportBtn", "fill": "$yellow-primary", "gap": 6, "padding": [8, 14], "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADM_ExportIcon", "width": 12, "height": 12, "iconFontName": "download", "iconFontFamily": "lucide", "fill": "$bg-card"}, - {"type": "text", "id": "ADM_ExportText", "fill": "$bg-card", "content": "EXPORT", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"} - ]} - ] - }, - { - "type": "frame", - "id": "ADM_KPIRow1", - "width": "fill_container", - "gap": 10, - "children": [ - {"type": "frame", "id": "ADM_KPIReach", "fill": "$bg-card", "layout": "vertical", "padding": 14, "gap": 8, "stroke": {"fill": "$border", "thickness": 1}, "width": "fill_container", "children": [ - {"type": "frame", "id": "ADM_KPIReachHeader", "justifyContent": "space_between", "alignItems": "center", "width": "fill_container", "children": [ - {"type": "text", "id": "ADM_KPIReachLabel", "fill": "$text-secondary", "content": "REACH", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "600"}, - {"type": "icon_font", "id": "ADM_KPIReachIcon", "width": 12, "height": 12, "iconFontName": "eye", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]}, - {"type": "text", "id": "ADM_KPIReachValue", "fill": "$text-primary", "content": "245.8K", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "frame", "id": "ADM_KPIReachChange", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADM_KPIReachArrow", "width": 10, "height": 10, "iconFontName": "arrow-up-right", "iconFontFamily": "lucide", "fill": "$success"}, - {"type": "text", "id": "ADM_KPIReachPercent", "fill": "$success", "content": "+18.2%", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "ADM_KPIEngage", "fill": "$bg-card", "layout": "vertical", "padding": 14, "gap": 8, "stroke": {"fill": "$border", "thickness": 1}, "width": "fill_container", "children": [ - {"type": "frame", "id": "ADM_KPIEngageHeader", "justifyContent": "space_between", "alignItems": "center", "width": "fill_container", "children": [ - {"type": "text", "id": "ADM_KPIEngageLabel", "fill": "$text-secondary", "content": "ENGAGE", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "600"}, - {"type": "icon_font", "id": "ADM_KPIEngageIcon", "width": 12, "height": 12, "iconFontName": "heart", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]}, - {"type": "text", "id": "ADM_KPIEngageValue", "fill": "$text-primary", "content": "14.2%", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "frame", "id": "ADM_KPIEngageChange", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADM_KPIEngageArrow", "width": 10, "height": 10, "iconFontName": "arrow-up-right", "iconFontFamily": "lucide", "fill": "$success"}, - {"type": "text", "id": "ADM_KPIEngagePercent", "fill": "$success", "content": "+5.4%", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "ADM_KPIRow2", - "width": "fill_container", - "gap": 10, - "children": [ - {"type": "frame", "id": "ADM_KPIConversions", "fill": "$bg-card", "layout": "vertical", "padding": 14, "gap": 8, "stroke": {"fill": "$border", "thickness": 1}, "width": "fill_container", "children": [ - {"type": "frame", "id": "ADM_KPIConvHeader", "justifyContent": "space_between", "alignItems": "center", "width": "fill_container", "children": [ - {"type": "text", "id": "ADM_KPIConvLabel", "fill": "$text-secondary", "content": "CONV.", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "600"}, - {"type": "icon_font", "id": "ADM_KPIConvIcon", "width": 12, "height": 12, "iconFontName": "target", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]}, - {"type": "text", "id": "ADM_KPIConvValue", "fill": "$text-primary", "content": "1,842", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "frame", "id": "ADM_KPIConvChange", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADM_KPIConvArrow", "width": 10, "height": 10, "iconFontName": "arrow-up-right", "iconFontFamily": "lucide", "fill": "$success"}, - {"type": "text", "id": "ADM_KPIConvPercent", "fill": "$success", "content": "+32.1%", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "ADM_KPIROI", "fill": "$bg-card", "layout": "vertical", "padding": 14, "gap": 8, "stroke": {"fill": "$border", "thickness": 1}, "width": "fill_container", "children": [ - {"type": "frame", "id": "ADM_KPIROIHeader", "justifyContent": "space_between", "alignItems": "center", "width": "fill_container", "children": [ - {"type": "text", "id": "ADM_KPIROILabel", "fill": "$text-secondary", "content": "ROI", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "600"}, - {"type": "icon_font", "id": "ADM_KPIROIIcon", "width": 12, "height": 12, "iconFontName": "dollar-sign", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]}, - {"type": "text", "id": "ADM_KPIROIValue", "fill": "$yellow-primary", "content": "324%", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "frame", "id": "ADM_KPIROIChange", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADM_KPIROIArrow", "width": 10, "height": 10, "iconFontName": "arrow-up-right", "iconFontFamily": "lucide", "fill": "$success"}, - {"type": "text", "id": "ADM_KPIROIPercent", "fill": "$success", "content": "+48%", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "ADM_TrendChart", - "width": "fill_container", - "fill": "$bg-card", - "layout": "vertical", - "stroke": {"fill": "$border", "thickness": 1}, - "children": [ - {"type": "frame", "id": "ADM_TrendHeader", "width": "fill_container", "padding": [12, 14], "justifyContent": "space_between", "alignItems": "center", "stroke": {"align": "inside", "fill": "$border", "thickness": 1}, "children": [ - {"type": "frame", "id": "ADM_TrendLeft", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADM_TrendIcon", "width": 14, "height": 14, "iconFontName": "trending-up", "iconFontFamily": "lucide", "fill": "$yellow-primary"}, - {"type": "text", "id": "ADM_TrendTitle", "fill": "$text-primary", "content": "TREND", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "ADM_TrendLegend", "gap": 12, "children": [ - {"type": "frame", "id": "ADM_LegReach", "gap": 4, "alignItems": "center", "children": [ - {"type": "frame", "id": "ADM_LegReachDot", "width": 6, "height": 6, "fill": "$yellow-primary"}, - {"type": "text", "id": "ADM_LegReachText", "fill": "$text-tertiary", "content": "Reach", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "ADM_LegEngage", "gap": 4, "alignItems": "center", "children": [ - {"type": "frame", "id": "ADM_LegEngDot", "width": 6, "height": 6, "fill": "$success"}, - {"type": "text", "id": "ADM_LegEngText", "fill": "$text-tertiary", "content": "Engage", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "normal"} - ]} - ]} - ]}, - {"type": "frame", "id": "ADM_ChartArea", "width": "fill_container", "height": 120, "padding": 14, "alignItems": "end", "gap": 8, "children": [ - {"type": "frame", "id": "ADM_Bar1", "layout": "vertical", "gap": 4, "alignItems": "center", "width": "fill_container", "children": [ - {"type": "frame", "id": "ADM_Bar1Y", "width": "fill_container", "height": 50, "fill": "$yellow-primary"}, - {"type": "frame", "id": "ADM_Bar1G", "width": "fill_container", "height": 20, "fill": "$success"}, - {"type": "text", "id": "ADM_Bar1L", "fill": "$text-tertiary", "content": "M", "fontFamily": "Roboto", "fontSize": 8, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "ADM_Bar2", "layout": "vertical", "gap": 4, "alignItems": "center", "width": "fill_container", "children": [ - {"type": "frame", "id": "ADM_Bar2Y", "width": "fill_container", "height": 65, "fill": "$yellow-primary"}, - {"type": "frame", "id": "ADM_Bar2G", "width": "fill_container", "height": 28, "fill": "$success"}, - {"type": "text", "id": "ADM_Bar2L", "fill": "$text-tertiary", "content": "T", "fontFamily": "Roboto", "fontSize": 8, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "ADM_Bar3", "layout": "vertical", "gap": 4, "alignItems": "center", "width": "fill_container", "children": [ - {"type": "frame", "id": "ADM_Bar3Y", "width": "fill_container", "height": 40, "fill": "$yellow-primary"}, - {"type": "frame", "id": "ADM_Bar3G", "width": "fill_container", "height": 18, "fill": "$success"}, - {"type": "text", "id": "ADM_Bar3L", "fill": "$text-tertiary", "content": "W", "fontFamily": "Roboto", "fontSize": 8, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "ADM_Bar4", "layout": "vertical", "gap": 4, "alignItems": "center", "width": "fill_container", "children": [ - {"type": "frame", "id": "ADM_Bar4Y", "width": "fill_container", "height": 55, "fill": "$yellow-primary"}, - {"type": "frame", "id": "ADM_Bar4G", "width": "fill_container", "height": 25, "fill": "$success"}, - {"type": "text", "id": "ADM_Bar4L", "fill": "$text-tertiary", "content": "T", "fontFamily": "Roboto", "fontSize": 8, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "ADM_Bar5", "layout": "vertical", "gap": 4, "alignItems": "center", "width": "fill_container", "children": [ - {"type": "frame", "id": "ADM_Bar5Y", "width": "fill_container", "height": 72, "fill": "$yellow-primary"}, - {"type": "frame", "id": "ADM_Bar5G", "width": "fill_container", "height": 32, "fill": "$success"}, - {"type": "text", "id": "ADM_Bar5L", "fill": "$text-tertiary", "content": "F", "fontFamily": "Roboto", "fontSize": 8, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "ADM_Bar6", "layout": "vertical", "gap": 4, "alignItems": "center", "width": "fill_container", "children": [ - {"type": "frame", "id": "ADM_Bar6Y", "width": "fill_container", "height": 60, "fill": "$yellow-primary"}, - {"type": "frame", "id": "ADM_Bar6G", "width": "fill_container", "height": 22, "fill": "$success"}, - {"type": "text", "id": "ADM_Bar6L", "fill": "$text-tertiary", "content": "S", "fontFamily": "Roboto", "fontSize": 8, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "ADM_Bar7", "layout": "vertical", "gap": 4, "alignItems": "center", "width": "fill_container", "children": [ - {"type": "frame", "id": "ADM_Bar7Y", "width": "fill_container", "height": 80, "fill": "$yellow-primary"}, - {"type": "frame", "id": "ADM_Bar7G", "width": "fill_container", "height": 35, "fill": "$success"}, - {"type": "text", "id": "ADM_Bar7L", "fill": "$text-tertiary", "content": "S", "fontFamily": "Roboto", "fontSize": 8, "fontWeight": "normal"} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "ADM_AIInsights", - "width": "fill_container", - "fill": "$bg-card", - "layout": "vertical", - "stroke": {"fill": "$border", "thickness": 1}, - "children": [ - {"type": "frame", "id": "ADM_AIHeader", "width": "fill_container", "padding": [12, 14], "gap": 8, "alignItems": "center", "stroke": {"align": "inside", "fill": "$border", "thickness": 1}, "children": [ - {"type": "icon_font", "id": "ADM_AIIcon", "width": 14, "height": 14, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "#A855F7"}, - {"type": "text", "id": "ADM_AITitle", "fill": "$text-primary", "content": "AI INSIGHTS", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "ADM_AIList", "width": "fill_container", "layout": "vertical", "padding": 12, "gap": 8, "children": [ - {"type": "frame", "id": "ADM_Insight1", "width": "fill_container", "fill": "#22C55E10", "layout": "vertical", "padding": 10, "gap": 6, "stroke": {"fill": "#22C55E30", "thickness": 1}, "children": [ - {"type": "frame", "id": "ADM_I1Header", "gap": 6, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADM_I1Icon", "width": 10, "height": 10, "iconFontName": "trending-up", "iconFontFamily": "lucide", "fill": "$success"}, - {"type": "text", "id": "ADM_I1Label", "fill": "$success", "content": "OPPORTUNITY", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "700"} - ]}, - {"type": "text", "id": "ADM_I1Text", "fill": "$text-primary", "content": "IG engagement peaks 6-8 PM. Schedule posts earlier.", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "ADM_Insight2", "width": "fill_container", "fill": "#FACC1510", "layout": "vertical", "padding": 10, "gap": 6, "stroke": {"fill": "#FACC1530", "thickness": 1}, "children": [ - {"type": "frame", "id": "ADM_I2Header", "gap": 6, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADM_I2Icon", "width": 10, "height": 10, "iconFontName": "zap", "iconFontFamily": "lucide", "fill": "$warning"}, - {"type": "text", "id": "ADM_I2Label", "fill": "$warning", "content": "SUGGESTION", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "700"} - ]}, - {"type": "text", "id": "ADM_I2Text", "fill": "$text-primary", "content": "Video gets 3x more engagement. Consider Reels.", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "ADM_Channels", - "width": "fill_container", - "fill": "$bg-card", - "layout": "vertical", - "stroke": {"fill": "$border", "thickness": 1}, - "children": [ - {"type": "frame", "id": "ADM_ChHeader", "width": "fill_container", "padding": [12, 14], "gap": 8, "alignItems": "center", "stroke": {"align": "inside", "fill": "$border", "thickness": 1}, "children": [ - {"type": "icon_font", "id": "ADM_ChIcon", "width": 14, "height": 14, "iconFontName": "bar-chart-2", "iconFontFamily": "lucide", "fill": "$yellow-primary"}, - {"type": "text", "id": "ADM_ChTitle", "fill": "$text-primary", "content": "CHANNELS", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "ADM_ChList", "width": "fill_container", "layout": "vertical", "padding": 12, "gap": 10, "children": [ - {"type": "frame", "id": "ADM_ChFB", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "frame", "id": "ADM_ChFBTop", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "ADM_ChFBName", "fill": "#3B82F6", "content": "FACEBOOK", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "700"}, - {"type": "text", "id": "ADM_ChFBVal", "fill": "$text-primary", "content": "45.2K", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "ADM_ChFBBar", "width": "fill_container", "height": 4, "fill": "$bg-page", "children": [ - {"type": "frame", "id": "ADM_ChFBFill", "height": 4, "fill": "#3B82F6", "width": "fit_content(0)"} - ]} - ]}, - {"type": "frame", "id": "ADM_ChIG", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "frame", "id": "ADM_ChIGTop", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "ADM_ChIGName", "fill": "#E1306C", "content": "INSTAGRAM", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "700"}, - {"type": "text", "id": "ADM_ChIGVal", "fill": "$text-primary", "content": "38.7K", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "ADM_ChIGBar", "width": "fill_container", "height": 4, "fill": "$bg-page", "children": [ - {"type": "frame", "id": "ADM_ChIGFill", "height": 4, "fill": "#E1306C", "width": "fit_content(0)"} - ]} - ]}, - {"type": "frame", "id": "ADM_ChZalo", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "frame", "id": "ADM_ChZaloTop", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "ADM_ChZaloName", "fill": "#0068FF", "content": "ZALO", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "700"}, - {"type": "text", "id": "ADM_ChZaloVal", "fill": "$text-primary", "content": "28.1K", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "ADM_ChZaloBar", "width": "fill_container", "height": 4, "fill": "$bg-page", "children": [ - {"type": "frame", "id": "ADM_ChZaloFill", "height": 4, "fill": "#0068FF", "width": "fit_content(0)"} - ]} - ]}, - {"type": "frame", "id": "ADM_ChWA", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "frame", "id": "ADM_ChWATop", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "ADM_ChWAName", "fill": "#25D366", "content": "WHATSAPP", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "700"}, - {"type": "text", "id": "ADM_ChWAVal", "fill": "$text-primary", "content": "12.4K", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "ADM_ChWABar", "width": "fill_container", "height": 4, "fill": "$bg-page", "children": [ - {"type": "frame", "id": "ADM_ChWAFill", "height": 4, "fill": "#25D366", "width": "fit_content(0)"} - ]} - ]} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "ADM_TabBar", - "width": "fill_container", - "height": 64, - "fill": "$bg-card", - "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, - "justifyContent": "space_around", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "ADM_TabHub", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADM_TabHubIcon", "width": 20, "height": 20, "iconFontName": "layout-grid", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "ADM_TabHubText", "fill": "$text-tertiary", "content": "HUB", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "ADM_TabChat", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADM_TabChatIcon", "width": 20, "height": 20, "iconFontName": "message-circle", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "ADM_TabChatText", "fill": "$text-tertiary", "content": "CHAT", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "ADM_TabCRM", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADM_TabCRMIcon", "width": 20, "height": 20, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "ADM_TabCRMText", "fill": "$text-tertiary", "content": "CRM", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "ADM_TabAI", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADM_TabAIIcon", "width": 20, "height": 20, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "ADM_TabAIText", "fill": "$text-tertiary", "content": "AI", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "ADM_TabStats", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADM_TabStatsIcon", "width": 20, "height": 20, "iconFontName": "bar-chart-3", "iconFontFamily": "lucide", "fill": "$yellow-primary"}, - {"type": "text", "id": "ADM_TabStatsText", "fill": "$yellow-primary", "content": "STATS", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]} - ] - } - ] - }], - "variables": { - "bg-page": {"type": "color", "value": "#18181B"}, - "bg-card": {"type": "color", "value": "#0F0F10"}, - "yellow-primary": {"type": "color", "value": "#FACC15"}, - "text-primary": {"type": "color", "value": "#FAFAFA"}, - "text-secondary": {"type": "color", "value": "#71717A"}, - "text-tertiary": {"type": "color", "value": "#52525B"}, - "border": {"type": "color", "value": "#27272A"}, - "success": {"type": "color", "value": "#22C55E"}, - "warning": {"type": "color", "value": "#FACC15"}, - "error": {"type": "color", "value": "#EF4444"}, - "info": {"type": "color", "value": "#3B82F6"} - } -} \ No newline at end of file diff --git a/pencil-design/src/pages/tMarketing/mobile/chatbot-automation.pen b/pencil-design/src/pages/tMarketing/mobile/chatbot-automation.pen deleted file mode 100644 index 8b54d15e..00000000 --- a/pencil-design/src/pages/tMarketing/mobile/chatbot-automation.pen +++ /dev/null @@ -1,290 +0,0 @@ -{ - "version": "2.6", - "children": [{ - "type": "frame", - "id": "CAM_Screen", - "name": "Screen/Chatbot Automation Mobile", - "reusable": true, - "width": 390, - "height": 844, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "CAM_Header", - "width": "fill_container", - "height": 56, - "fill": "$bg-card", - "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, - "padding": [0, 16], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "CAM_HeaderLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "CAM_LogoMark", "width": 28, "height": 28, "fill": "$yellow-primary", "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "CAM_LogoLetter", "fill": "$bg-card", "content": "M", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} - ]}, - {"type": "text", "id": "CAM_PageTitle", "fill": "$text-primary", "content": "CHATBOT", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "CAM_HeaderRight", "gap": 16, "children": [ - {"type": "icon_font", "id": "CAM_SearchIcon", "width": 20, "height": 20, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "icon_font", "id": "CAM_MenuIcon", "width": 20, "height": 20, "iconFontName": "menu", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "CAM_Content", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "padding": [16, 16], - "gap": 16, - "children": [ - { - "type": "frame", - "id": "CAM_StatusBar", - "width": "fill_container", - "fill": "#22C55E15", - "padding": 12, - "stroke": {"fill": "#22C55E30", "thickness": 1}, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "CAM_StatusLeft", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CAM_StatusIcon", "width": 14, "height": 14, "iconFontName": "bot", "iconFontFamily": "lucide", "fill": "$success"}, - {"type": "text", "id": "CAM_StatusText", "fill": "$success", "content": "BOT ACTIVE", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"} - ]}, - {"type": "text", "id": "CAM_StatusInfo", "fill": "$text-secondary", "content": "3 flows running", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"} - ] - }, - { - "type": "frame", - "id": "CAM_FlowsHeader", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "CAM_FlowsLeft", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CAM_FlowsIcon", "width": 14, "height": 14, "iconFontName": "git-branch", "iconFontFamily": "lucide", "fill": "$yellow-primary"}, - {"type": "text", "id": "CAM_FlowsTitle", "fill": "$text-primary", "content": "AUTOMATION FLOWS", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "CAM_AddFlowBtn", "width": 28, "height": 28, "fill": "$yellow-primary", "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CAM_AddFlowIcon", "width": 14, "height": 14, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$bg-card"} - ]} - ] - }, - { - "type": "frame", - "id": "CAM_Flow1", - "width": "fill_container", - "fill": "#FACC1510", - "layout": "vertical", - "padding": 14, - "gap": 10, - "stroke": {"align": "inside", "fill": "$yellow-primary", "thickness": 2}, - "children": [ - {"type": "frame", "id": "CAM_F1Header", "justifyContent": "space_between", "alignItems": "center", "width": "fill_container", "children": [ - {"type": "text", "id": "CAM_F1Name", "fill": "$text-primary", "content": "Welcome Message", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "frame", "id": "CAM_F1Dot", "width": 8, "height": 8, "fill": "$success"} - ]}, - {"type": "text", "id": "CAM_F1Desc", "fill": "$text-secondary", "content": "Greet new customers", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"}, - {"type": "frame", "id": "CAM_F1Flow", "width": "fill_container", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "CAM_F1Trigger", "fill": "#22C55E20", "padding": [4, 8], "alignItems": "center", "gap": 4, "children": [ - {"type": "icon_font", "id": "CAM_F1TrigIcon", "width": 10, "height": 10, "iconFontName": "zap", "iconFontFamily": "lucide", "fill": "$success"}, - {"type": "text", "id": "CAM_F1TrigText", "fill": "$success", "content": "New Customer", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "600"} - ]}, - {"type": "icon_font", "id": "CAM_F1Arrow1", "width": 10, "height": 10, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "frame", "id": "CAM_F1Delay", "fill": "#3B82F620", "padding": [4, 8], "alignItems": "center", "gap": 4, "children": [ - {"type": "icon_font", "id": "CAM_F1DelIcon", "width": 10, "height": 10, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#3B82F6"}, - {"type": "text", "id": "CAM_F1DelText", "fill": "#3B82F6", "content": "2s Delay", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "600"} - ]}, - {"type": "icon_font", "id": "CAM_F1Arrow2", "width": 10, "height": 10, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "frame", "id": "CAM_F1Msg", "fill": "#FACC1520", "padding": [4, 8], "alignItems": "center", "gap": 4, "children": [ - {"type": "icon_font", "id": "CAM_F1MsgIcon", "width": 10, "height": 10, "iconFontName": "message-circle", "iconFontFamily": "lucide", "fill": "$yellow-primary"}, - {"type": "text", "id": "CAM_F1MsgText", "fill": "$yellow-primary", "content": "Greeting", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "CAM_F1Stats", "gap": 12, "children": [ - {"type": "text", "id": "CAM_F1Sent", "fill": "$text-tertiary", "content": "1.2K sent", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "normal"}, - {"type": "text", "id": "CAM_F1Rate", "fill": "$success", "content": "85% open", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "normal"} - ]} - ] - }, - { - "type": "frame", - "id": "CAM_Flow2", - "width": "fill_container", - "layout": "vertical", - "padding": 14, - "gap": 10, - "stroke": {"align": "inside", "fill": "$border", "thickness": 1}, - "children": [ - {"type": "frame", "id": "CAM_F2Header", "justifyContent": "space_between", "alignItems": "center", "width": "fill_container", "children": [ - {"type": "text", "id": "CAM_F2Name", "fill": "$text-primary", "content": "Product Inquiry", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "frame", "id": "CAM_F2Dot", "width": 8, "height": 8, "fill": "$success"} - ]}, - {"type": "text", "id": "CAM_F2Desc", "fill": "$text-secondary", "content": "Handle product questions", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"}, - {"type": "frame", "id": "CAM_F2Flow", "width": "fill_container", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "CAM_F2Trigger", "fill": "#22C55E20", "padding": [4, 8], "alignItems": "center", "gap": 4, "children": [ - {"type": "icon_font", "id": "CAM_F2TrigIcon", "width": 10, "height": 10, "iconFontName": "zap", "iconFontFamily": "lucide", "fill": "$success"}, - {"type": "text", "id": "CAM_F2TrigText", "fill": "$success", "content": "Keyword", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "600"} - ]}, - {"type": "icon_font", "id": "CAM_F2Arrow1", "width": 10, "height": 10, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "frame", "id": "CAM_F2AI", "fill": "#A855F720", "padding": [4, 8], "alignItems": "center", "gap": 4, "children": [ - {"type": "icon_font", "id": "CAM_F2AIIcon", "width": 10, "height": 10, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "#A855F7"}, - {"type": "text", "id": "CAM_F2AIText", "fill": "#A855F7", "content": "AI Reply", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "CAM_F2Stats", "gap": 12, "children": [ - {"type": "text", "id": "CAM_F2Sent", "fill": "$text-tertiary", "content": "890 sent", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "normal"}, - {"type": "text", "id": "CAM_F2Rate", "fill": "$success", "content": "72% open", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "normal"} - ]} - ] - }, - { - "type": "frame", - "id": "CAM_Flow3", - "width": "fill_container", - "layout": "vertical", - "padding": 14, - "gap": 10, - "stroke": {"align": "inside", "fill": "$border", "thickness": 1}, - "children": [ - {"type": "frame", "id": "CAM_F3Header", "justifyContent": "space_between", "alignItems": "center", "width": "fill_container", "children": [ - {"type": "text", "id": "CAM_F3Name", "fill": "$text-primary", "content": "Abandoned Cart", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "frame", "id": "CAM_F3Dot", "width": 8, "height": 8, "fill": "$success"} - ]}, - {"type": "text", "id": "CAM_F3Desc", "fill": "$text-secondary", "content": "Recover lost sales", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"}, - {"type": "frame", "id": "CAM_F3Flow", "width": "fill_container", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "CAM_F3Trigger", "fill": "#22C55E20", "padding": [4, 8], "alignItems": "center", "gap": 4, "children": [ - {"type": "icon_font", "id": "CAM_F3TrigIcon", "width": 10, "height": 10, "iconFontName": "zap", "iconFontFamily": "lucide", "fill": "$success"}, - {"type": "text", "id": "CAM_F3TrigText", "fill": "$success", "content": "Cart Event", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "600"} - ]}, - {"type": "icon_font", "id": "CAM_F3Arrow1", "width": 10, "height": 10, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "frame", "id": "CAM_F3Delay", "fill": "#3B82F620", "padding": [4, 8], "alignItems": "center", "gap": 4, "children": [ - {"type": "icon_font", "id": "CAM_F3DelIcon", "width": 10, "height": 10, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#3B82F6"}, - {"type": "text", "id": "CAM_F3DelText", "fill": "#3B82F6", "content": "1h Delay", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "600"} - ]}, - {"type": "icon_font", "id": "CAM_F3Arrow2", "width": 10, "height": 10, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "frame", "id": "CAM_F3Msg", "fill": "#FACC1520", "padding": [4, 8], "alignItems": "center", "gap": 4, "children": [ - {"type": "icon_font", "id": "CAM_F3MsgIcon", "width": 10, "height": 10, "iconFontName": "message-circle", "iconFontFamily": "lucide", "fill": "$yellow-primary"}, - {"type": "text", "id": "CAM_F3MsgText", "fill": "$yellow-primary", "content": "Reminder", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "CAM_F3Stats", "gap": 12, "children": [ - {"type": "text", "id": "CAM_F3Sent", "fill": "$text-tertiary", "content": "456 sent", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "normal"}, - {"type": "text", "id": "CAM_F3Rate", "fill": "$warning", "content": "28% conv", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "normal"} - ]} - ] - }, - { - "type": "frame", - "id": "CAM_Flow4", - "width": "fill_container", - "layout": "vertical", - "padding": 14, - "gap": 10, - "stroke": {"align": "inside", "fill": "$border", "thickness": 1}, - "children": [ - {"type": "frame", "id": "CAM_F4Header", "justifyContent": "space_between", "alignItems": "center", "width": "fill_container", "children": [ - {"type": "text", "id": "CAM_F4Name", "fill": "$text-primary", "content": "Order Update", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "frame", "id": "CAM_F4Dot", "width": 8, "height": 8, "fill": "$text-tertiary"} - ]}, - {"type": "text", "id": "CAM_F4Desc", "fill": "$text-secondary", "content": "Shipping notifications", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"}, - {"type": "frame", "id": "CAM_F4Status", "fill": "$bg-page", "padding": [4, 8], "children": [ - {"type": "text", "id": "CAM_F4Draft", "fill": "$text-tertiary", "content": "DRAFT", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "700"} - ]} - ] - }, - { - "type": "frame", - "id": "CAM_NodesSection", - "width": "fill_container", - "layout": "vertical", - "gap": 10, - "children": [ - {"type": "frame", "id": "CAM_NodesHeader", "width": "fill_container", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CAM_NodesIcon", "width": 14, "height": 14, "iconFontName": "box", "iconFontFamily": "lucide", "fill": "$yellow-primary"}, - {"type": "text", "id": "CAM_NodesTitle", "fill": "$text-primary", "content": "ADD NODE", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"} - ]}, - { - "type": "frame", - "id": "CAM_NodesList", - "width": "fill_container", - "gap": 8, - "children": [ - {"type": "frame", "id": "CAM_NTrigger", "fill": "$bg-card", "padding": [10, 12], "gap": 8, "alignItems": "center", "width": "fill_container", "stroke": {"fill": "$border", "thickness": 1}, "children": [ - {"type": "frame", "id": "CAM_NTrigFrame", "width": 28, "height": 28, "fill": "#22C55E20", "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CAM_NTrigIcon", "width": 14, "height": 14, "iconFontName": "zap", "iconFontFamily": "lucide", "fill": "$success"} - ]}, - {"type": "text", "id": "CAM_NTrigText", "fill": "$text-primary", "content": "Trigger", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "CAM_NMsg", "fill": "$bg-card", "padding": [10, 12], "gap": 8, "alignItems": "center", "width": "fill_container", "stroke": {"fill": "$border", "thickness": 1}, "children": [ - {"type": "frame", "id": "CAM_NMsgFrame", "width": 28, "height": 28, "fill": "#FACC1520", "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CAM_NMsgIcon", "width": 14, "height": 14, "iconFontName": "message-circle", "iconFontFamily": "lucide", "fill": "$yellow-primary"} - ]}, - {"type": "text", "id": "CAM_NMsgText", "fill": "$text-primary", "content": "Message", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "CAM_NAI", "fill": "$bg-card", "padding": [10, 12], "gap": 8, "alignItems": "center", "width": "fill_container", "stroke": {"fill": "#A855F730", "thickness": 1}, "children": [ - {"type": "frame", "id": "CAM_NAIFrame", "width": 28, "height": 28, "fill": "#A855F720", "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CAM_NAIIcon", "width": 14, "height": 14, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "#A855F7"} - ]}, - {"type": "text", "id": "CAM_NAIText", "fill": "$text-primary", "content": "AI Response", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "CAM_TabBar", - "width": "fill_container", - "height": 64, - "fill": "$bg-card", - "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, - "justifyContent": "space_around", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "CAM_TabHub", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CAM_TabHubIcon", "width": 20, "height": 20, "iconFontName": "layout-grid", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "CAM_TabHubText", "fill": "$text-tertiary", "content": "HUB", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "CAM_TabChat", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CAM_TabChatIcon", "width": 20, "height": 20, "iconFontName": "message-circle", "iconFontFamily": "lucide", "fill": "$yellow-primary"}, - {"type": "text", "id": "CAM_TabChatText", "fill": "$yellow-primary", "content": "CHAT", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "CAM_TabCRM", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CAM_TabCRMIcon", "width": 20, "height": 20, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "CAM_TabCRMText", "fill": "$text-tertiary", "content": "CRM", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "CAM_TabAI", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CAM_TabAIIcon", "width": 20, "height": 20, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "CAM_TabAIText", "fill": "$text-tertiary", "content": "AI", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "CAM_TabStats", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CAM_TabStatsIcon", "width": 20, "height": 20, "iconFontName": "bar-chart-3", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "CAM_TabStatsText", "fill": "$text-tertiary", "content": "STATS", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]} - ] - } - ] - }], - "variables": { - "bg-page": {"type": "color", "value": "#18181B"}, - "bg-card": {"type": "color", "value": "#0F0F10"}, - "yellow-primary": {"type": "color", "value": "#FACC15"}, - "text-primary": {"type": "color", "value": "#FAFAFA"}, - "text-secondary": {"type": "color", "value": "#71717A"}, - "text-tertiary": {"type": "color", "value": "#52525B"}, - "border": {"type": "color", "value": "#27272A"}, - "success": {"type": "color", "value": "#22C55E"}, - "warning": {"type": "color", "value": "#FACC15"}, - "error": {"type": "color", "value": "#EF4444"}, - "info": {"type": "color", "value": "#3B82F6"} - } -} \ No newline at end of file diff --git a/pencil-design/src/pages/tMarketing/mobile/customer-crm.pen b/pencil-design/src/pages/tMarketing/mobile/customer-crm.pen deleted file mode 100644 index 7d2debea..00000000 --- a/pencil-design/src/pages/tMarketing/mobile/customer-crm.pen +++ /dev/null @@ -1,257 +0,0 @@ -{ - "version": "2.6", - "children": [{ - "type": "frame", - "id": "CRM_Root", - "name": "Screen/Customer CRM Mobile", - "reusable": true, - "width": 390, - "height": 844, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "CRM_Header", - "width": "fill_container", - "height": 56, - "fill": "$bg-card", - "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, - "padding": [0, 16], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "CRM_HeaderLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "CRM_LogoMark", "width": 28, "height": 28, "fill": "$yellow-primary", "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "CRM_LogoLetter", "fill": "$bg-card", "content": "M", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} - ]}, - {"type": "text", "id": "CRM_PageTitle", "fill": "$text-primary", "content": "CUSTOMERS", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "CRM_HeaderRight", "gap": 16, "children": [ - {"type": "icon_font", "id": "CRM_SearchIcon", "width": 20, "height": 20, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "icon_font", "id": "CRM_MenuIcon", "width": 20, "height": 20, "iconFontName": "menu", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "CRM_ScrollContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "padding": [16, 16], - "gap": 16, - "children": [ - { - "type": "frame", "id": "CRM_KPIGrid", "width": "fill_container", "gap": 12, "flexWrap": "wrap", - "children": [ - { - "type": "frame", "id": "CRM_KPITotal", "fill": "$bg-card", "layout": "vertical", "gap": 6, "padding": 16, "stroke": {"fill": "$border", "thickness": 1}, "width": "fill_container(171)", - "children": [ - {"type": "text", "id": "CRM_KPITotalLabel", "content": "TOTAL CUSTOMERS", "fill": "$text-secondary", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}, - {"type": "frame", "id": "CRM_KPITotalRow", "width": "fill_container", "justifyContent": "space_between", "alignItems": "end", "children": [ - {"type": "text", "id": "CRM_KPITotalValue", "content": "12,456", "fill": "$text-primary", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "frame", "id": "CRM_KPITotalChange", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CRM_KPITotalArrow", "width": 10, "height": 10, "iconFontName": "arrow-up-right", "iconFontFamily": "lucide", "fill": "$success"}, - {"type": "text", "id": "CRM_KPITotalPercent", "content": "5%", "fill": "$success", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]} - ] - }, - { - "type": "frame", "id": "CRM_KPIActive", "fill": "$bg-card", "layout": "vertical", "gap": 6, "padding": 16, "stroke": {"fill": "$border", "thickness": 1}, "width": "fill_container(171)", - "children": [ - {"type": "text", "id": "CRM_KPIActiveLabel", "content": "ACTIVE", "fill": "$text-secondary", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}, - {"type": "frame", "id": "CRM_KPIActiveRow", "width": "fill_container", "justifyContent": "space_between", "alignItems": "end", "children": [ - {"type": "text", "id": "CRM_KPIActiveValue", "content": "4,892", "fill": "$text-primary", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "frame", "id": "CRM_KPIActiveChange", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CRM_KPIActiveArrow", "width": 10, "height": 10, "iconFontName": "arrow-up-right", "iconFontFamily": "lucide", "fill": "$success"}, - {"type": "text", "id": "CRM_KPIActivePercent", "content": "12%", "fill": "$success", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]} - ] - }, - { - "type": "frame", "id": "CRM_KPINew", "fill": "$bg-card", "layout": "vertical", "gap": 6, "padding": 16, "stroke": {"fill": "$border", "thickness": 1}, "width": "fill_container(171)", - "children": [ - {"type": "text", "id": "CRM_KPINewLabel", "content": "NEW TODAY", "fill": "$text-secondary", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}, - {"type": "frame", "id": "CRM_KPINewRow", "width": "fill_container", "justifyContent": "space_between", "alignItems": "end", "children": [ - {"type": "text", "id": "CRM_KPINewValue", "content": "+342", "fill": "$text-primary", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "text", "id": "CRM_KPINewBadge", "content": "NEW", "fill": "$info", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"} - ]} - ] - }, - { - "type": "frame", "id": "CRM_KPISegments", "fill": "$bg-card", "layout": "vertical", "gap": 6, "padding": 16, "stroke": {"fill": "$border", "thickness": 1}, "width": "fill_container(171)", - "children": [ - {"type": "text", "id": "CRM_KPISegmentsLabel", "content": "SEGMENTS", "fill": "$text-secondary", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}, - {"type": "frame", "id": "CRM_KPISegmentsRow", "width": "fill_container", "justifyContent": "space_between", "alignItems": "end", "children": [ - {"type": "text", "id": "CRM_KPISegmentsValue", "content": "8", "fill": "$text-primary", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "text", "id": "CRM_KPISegmentsDesc", "content": "GROUPS", "fill": "$text-tertiary", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]} - ] - } - ] - }, - { - "type": "frame", "id": "CRM_ListHeader", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", - "children": [ - {"type": "frame", "id": "CRM_ListHeaderLeft", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CRM_ListIcon", "width": 14, "height": 14, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "$yellow-primary"}, - {"type": "text", "id": "CRM_ListTitle", "content": "CUSTOMER LIST", "fill": "$text-primary", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "CRM_ListActions", "gap": 8, "children": [ - {"type": "frame", "id": "CRM_FilterBtn", "padding": [6, 10], "stroke": {"fill": "$border", "thickness": 1}, "alignItems": "center", "gap": 4, "children": [ - {"type": "icon_font", "id": "CRM_FilterIcon", "width": 10, "height": 10, "iconFontName": "filter", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "CRM_FilterText", "content": "FILTER", "fill": "$text-secondary", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]} - ]} - ] - }, - { - "type": "frame", "id": "CRM_CustomerCard1", "width": "fill_container", "fill": "$bg-card", "layout": "vertical", "gap": 10, "padding": 16, "stroke": {"fill": "$border", "thickness": 1}, - "children": [ - {"type": "frame", "id": "CRM_Card1Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "CRM_Card1NameRow", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "CRM_Card1Avatar", "width": 32, "height": 32, "fill": "$yellow-primary", "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "CRM_Card1Initial", "content": "NA", "fill": "$bg-card", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "CRM_Card1Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "CRM_Card1Name", "content": "Nguyễn Văn A", "fill": "$text-primary", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "CRM_Card1Phone", "content": "0912 xxx xxx", "fill": "$text-secondary", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]} - ]}, - {"type": "frame", "id": "CRM_Card1Actions", "gap": 12, "children": [ - {"type": "icon_font", "id": "CRM_Card1View", "width": 16, "height": 16, "iconFontName": "eye", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "icon_font", "id": "CRM_Card1Edit", "width": 16, "height": 16, "iconFontName": "edit-2", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]} - ]}, - {"type": "frame", "id": "CRM_Card1Bottom", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "CRM_Card1Channel", "content": "ZALO", "fill": "#0068FF", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}, - {"type": "text", "id": "CRM_Card1Score", "content": "★★★★☆", "fill": "$yellow-primary", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ]} - ] - }, - { - "type": "frame", "id": "CRM_CustomerCard2", "width": "fill_container", "fill": "$bg-card", "layout": "vertical", "gap": 10, "padding": 16, "stroke": {"fill": "$border", "thickness": 1}, - "children": [ - {"type": "frame", "id": "CRM_Card2Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "CRM_Card2NameRow", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "CRM_Card2Avatar", "width": 32, "height": 32, "fill": "#3B82F6", "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "CRM_Card2Initial", "content": "TB", "fill": "#FFFFFF", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "CRM_Card2Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "CRM_Card2Name", "content": "Trần Thị B", "fill": "$text-primary", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "CRM_Card2Phone", "content": "0987 xxx xxx", "fill": "$text-secondary", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]} - ]}, - {"type": "frame", "id": "CRM_Card2Actions", "gap": 12, "children": [ - {"type": "icon_font", "id": "CRM_Card2View", "width": 16, "height": 16, "iconFontName": "eye", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "icon_font", "id": "CRM_Card2Edit", "width": 16, "height": 16, "iconFontName": "edit-2", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]} - ]}, - {"type": "frame", "id": "CRM_Card2Bottom", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "CRM_Card2Channel", "content": "FB", "fill": "#3B82F6", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}, - {"type": "text", "id": "CRM_Card2Score", "content": "★★★☆☆", "fill": "$yellow-primary", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ]} - ] - }, - { - "type": "frame", "id": "CRM_CustomerCard3", "width": "fill_container", "fill": "$bg-card", "layout": "vertical", "gap": 10, "padding": 16, "stroke": {"fill": "$border", "thickness": 1}, - "children": [ - {"type": "frame", "id": "CRM_Card3Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "CRM_Card3NameRow", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "CRM_Card3Avatar", "width": 32, "height": 32, "fill": "#E1306C", "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "CRM_Card3Initial", "content": "LC", "fill": "#FFFFFF", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "CRM_Card3Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "CRM_Card3Name", "content": "Lê Văn C", "fill": "$text-primary", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "CRM_Card3Phone", "content": "0909 xxx xxx", "fill": "$text-secondary", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]} - ]}, - {"type": "frame", "id": "CRM_Card3Actions", "gap": 12, "children": [ - {"type": "icon_font", "id": "CRM_Card3View", "width": 16, "height": 16, "iconFontName": "eye", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "icon_font", "id": "CRM_Card3Edit", "width": 16, "height": 16, "iconFontName": "edit-2", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]} - ]}, - {"type": "frame", "id": "CRM_Card3Bottom", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "CRM_Card3Channel", "content": "IG", "fill": "#E1306C", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}, - {"type": "text", "id": "CRM_Card3Score", "content": "★★★★★", "fill": "$yellow-primary", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ]} - ] - }, - { - "type": "frame", "id": "CRM_CustomerCard4", "width": "fill_container", "fill": "$bg-card", "layout": "vertical", "gap": 10, "padding": 16, "stroke": {"fill": "$border", "thickness": 1}, - "children": [ - {"type": "frame", "id": "CRM_Card4Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "CRM_Card4NameRow", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "CRM_Card4Avatar", "width": 32, "height": 32, "fill": "#25D366", "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "CRM_Card4Initial", "content": "PD", "fill": "#FFFFFF", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "CRM_Card4Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "CRM_Card4Name", "content": "Phạm Thị D", "fill": "$text-primary", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "CRM_Card4Phone", "content": "0888 xxx xxx", "fill": "$text-secondary", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]} - ]}, - {"type": "frame", "id": "CRM_Card4Actions", "gap": 12, "children": [ - {"type": "icon_font", "id": "CRM_Card4View", "width": 16, "height": 16, "iconFontName": "eye", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "icon_font", "id": "CRM_Card4Edit", "width": 16, "height": 16, "iconFontName": "edit-2", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]} - ]}, - {"type": "frame", "id": "CRM_Card4Bottom", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "CRM_Card4Channel", "content": "WA", "fill": "#25D366", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}, - {"type": "text", "id": "CRM_Card4Score", "content": "★★☆☆☆", "fill": "$yellow-primary", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "CRM_BottomTabBar", - "width": "fill_container", - "height": 64, - "fill": "$bg-card", - "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, - "justifyContent": "space_around", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "CRM_TabHub", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CRM_TabHubIcon", "width": 20, "height": 20, "iconFontName": "layout-grid", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "CRM_TabHubText", "fill": "$text-tertiary", "content": "HUB", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "CRM_TabChat", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CRM_TabChatIcon", "width": 20, "height": 20, "iconFontName": "message-circle", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "CRM_TabChatText", "fill": "$text-tertiary", "content": "CHAT", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "CRM_TabCRM", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CRM_TabCRMIcon", "width": 20, "height": 20, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "$yellow-primary"}, - {"type": "text", "id": "CRM_TabCRMText", "fill": "$yellow-primary", "content": "CRM", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "CRM_TabAI", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CRM_TabAIIcon", "width": 20, "height": 20, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "CRM_TabAIText", "fill": "$text-tertiary", "content": "AI", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "CRM_TabStats", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CRM_TabStatsIcon", "width": 20, "height": 20, "iconFontName": "bar-chart-3", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "CRM_TabStatsText", "fill": "$text-tertiary", "content": "STATS", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]} - ] - } - ] - }], - "variables": { - "bg-page": {"type": "color", "value": "#18181B"}, - "bg-card": {"type": "color", "value": "#0F0F10"}, - "yellow-primary": {"type": "color", "value": "#FACC15"}, - "text-primary": {"type": "color", "value": "#FAFAFA"}, - "text-secondary": {"type": "color", "value": "#71717A"}, - "text-tertiary": {"type": "color", "value": "#52525B"}, - "border": {"type": "color", "value": "#27272A"}, - "success": {"type": "color", "value": "#22C55E"}, - "warning": {"type": "color", "value": "#FACC15"}, - "error": {"type": "color", "value": "#EF4444"}, - "info": {"type": "color", "value": "#3B82F6"} - } -} \ No newline at end of file diff --git a/pencil-design/src/pages/tMarketing/mobile/livechat-console.pen b/pencil-design/src/pages/tMarketing/mobile/livechat-console.pen deleted file mode 100644 index 67317b13..00000000 --- a/pencil-design/src/pages/tMarketing/mobile/livechat-console.pen +++ /dev/null @@ -1,219 +0,0 @@ -{ - "version": "2.6", - "children": [{ - "type": "frame", - "id": "LCM_Root", - "name": "Screen/Livechat Mobile", - "reusable": true, - "width": 390, - "height": 844, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "LCM_Header", - "width": "fill_container", - "height": 56, - "fill": "$bg-card", - "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, - "padding": [0, 16], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "LCM_HeaderLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "LCM_LogoMark", "width": 28, "height": 28, "fill": "$yellow-primary", "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "LCM_LogoLetter", "fill": "$bg-card", "content": "M", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} - ]}, - {"type": "text", "id": "LCM_PageTitle", "fill": "$text-primary", "content": "LIVECHAT", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "LCM_HeaderRight", "gap": 16, "children": [ - {"type": "icon_font", "id": "LCM_SearchIcon", "width": 20, "height": 20, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "icon_font", "id": "LCM_MenuIcon", "width": 20, "height": 20, "iconFontName": "menu", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "LCM_StatusBar", - "width": "fill_container", - "padding": [10, 16], - "fill": "#22C55E15", - "gap": 8, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "LCM_StatusDot", "width": 8, "height": 8, "fill": "$success"}, - {"type": "text", "id": "LCM_StatusText", "content": "ONLINE", "fill": "$success", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}, - {"type": "text", "id": "LCM_StatusSep", "content": "|", "fill": "$text-tertiary", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"}, - {"type": "text", "id": "LCM_StatusQueue", "content": "4 conversations", "fill": "$text-secondary", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "500"} - ] - }, - { - "type": "frame", - "id": "LCM_ScrollContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "gap": 0, - "children": [ - { - "type": "frame", "id": "LCM_ConvHeader", "width": "fill_container", "padding": [12, 16], "justifyContent": "space_between", "alignItems": "center", "stroke": {"fill": "$border", "thickness": 1, "align": "inside"}, - "children": [ - {"type": "text", "id": "LCM_ConvTitle", "content": "CONVERSATIONS", "fill": "$text-primary", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}, - {"type": "frame", "id": "LCM_ConvActions", "gap": 8, "children": [ - {"type": "frame", "id": "LCM_FilterBtn", "padding": [6, 10], "stroke": {"fill": "$border", "thickness": 1}, "alignItems": "center", "gap": 6, "children": [ - {"type": "text", "id": "LCM_FilterText", "content": "ALL", "fill": "$text-secondary", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}, - {"type": "icon_font", "id": "LCM_FilterArrow", "width": 10, "height": 10, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]} - ]} - ] - }, - { - "type": "frame", "id": "LCM_Conv1", "width": "fill_container", "layout": "vertical", "gap": 8, "padding": [14, 16], "fill": "#FACC1510", "stroke": {"fill": "$yellow-primary", "thickness": 2, "align": "inside"}, - "children": [ - {"type": "frame", "id": "LCM_Conv1Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "LCM_Conv1Left", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "LCM_Conv1Dot", "width": 8, "height": 8, "fill": "$success"}, - {"type": "text", "id": "LCM_Conv1Name", "content": "Nguyễn Văn A", "fill": "$text-primary", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "LCM_Conv1Right", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "LCM_Conv1Platform", "content": "ZALO", "fill": "#0068FF", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "700"}, - {"type": "text", "id": "LCM_Conv1Time", "content": "2m", "fill": "$text-tertiary", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"} - ]} - ]}, - {"type": "text", "id": "LCM_Conv1Preview", "content": "\"Tôi muốn hỏi về sản phẩm...\"", "fill": "$text-secondary", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ] - }, - { - "type": "frame", "id": "LCM_Conv2", "width": "fill_container", "layout": "vertical", "gap": 8, "padding": [14, 16], "stroke": {"fill": "$border", "thickness": 1, "align": "inside"}, - "children": [ - {"type": "frame", "id": "LCM_Conv2Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "LCM_Conv2Left", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "LCM_Conv2Dot", "width": 8, "height": 8, "fill": "$warning"}, - {"type": "text", "id": "LCM_Conv2Name", "content": "Trần Thị B", "fill": "$text-primary", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "LCM_Conv2Right", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "LCM_Conv2Platform", "content": "FB", "fill": "#3B82F6", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "700"}, - {"type": "text", "id": "LCM_Conv2Time", "content": "5m", "fill": "$text-tertiary", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"} - ]} - ]}, - {"type": "text", "id": "LCM_Conv2Preview", "content": "\"Giá bao nhiêu vậy shop?\"", "fill": "$text-secondary", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ] - }, - { - "type": "frame", "id": "LCM_Conv3", "width": "fill_container", "layout": "vertical", "gap": 8, "padding": [14, 16], "stroke": {"fill": "$border", "thickness": 1, "align": "inside"}, - "children": [ - {"type": "frame", "id": "LCM_Conv3Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "LCM_Conv3Left", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "LCM_Conv3Dot", "width": 8, "height": 8, "fill": "$text-tertiary"}, - {"type": "text", "id": "LCM_Conv3Name", "content": "Lê Văn C", "fill": "$text-primary", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "LCM_Conv3Right", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "LCM_Conv3Platform", "content": "IG", "fill": "#E1306C", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "700"}, - {"type": "text", "id": "LCM_Conv3Time", "content": "12m", "fill": "$text-tertiary", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"} - ]} - ]}, - {"type": "text", "id": "LCM_Conv3Preview", "content": "\"Cảm ơn shop nhé!\"", "fill": "$text-secondary", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ] - }, - { - "type": "frame", "id": "LCM_Conv4", "width": "fill_container", "layout": "vertical", "gap": 8, "padding": [14, 16], "stroke": {"fill": "$border", "thickness": 1, "align": "inside"}, - "children": [ - {"type": "frame", "id": "LCM_Conv4Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "LCM_Conv4Left", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "LCM_Conv4Dot", "width": 8, "height": 8, "fill": "$success"}, - {"type": "text", "id": "LCM_Conv4Name", "content": "+84912xxx", "fill": "$text-primary", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "LCM_Conv4Right", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "LCM_Conv4Platform", "content": "WA", "fill": "#25D366", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "700"}, - {"type": "text", "id": "LCM_Conv4Time", "content": "15m", "fill": "$text-tertiary", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"} - ]} - ]}, - {"type": "text", "id": "LCM_Conv4Preview", "content": "\"Hi, I want to order...\"", "fill": "$text-secondary", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ] - }, - { - "type": "frame", "id": "LCM_QuickRepliesSection", "width": "fill_container", "layout": "vertical", "gap": 12, "padding": [16, 16], "fill": "$bg-card", "stroke": {"fill": "$border", "thickness": 1, "align": "inside"}, - "children": [ - {"type": "text", "id": "LCM_QuickLabel", "content": "QUICK REPLIES", "fill": "$text-tertiary", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}, - {"type": "frame", "id": "LCM_QuickBtns", "gap": 8, "flexWrap": "wrap", "width": "fill_container", "children": [ - {"type": "frame", "id": "LCM_Quick1", "padding": [6, 12], "fill": "$bg-page", "stroke": {"fill": "$border", "thickness": 1}, "children": [ - {"type": "text", "id": "LCM_Quick1Text", "content": "Xin chào!", "fill": "$text-secondary", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "LCM_Quick2", "padding": [6, 12], "fill": "$bg-page", "stroke": {"fill": "$border", "thickness": 1}, "children": [ - {"type": "text", "id": "LCM_Quick2Text", "content": "Cảm ơn", "fill": "$text-secondary", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "LCM_Quick3", "padding": [6, 12], "fill": "$bg-page", "stroke": {"fill": "$border", "thickness": 1}, "children": [ - {"type": "text", "id": "LCM_Quick3Text", "content": "Đang kiểm tra", "fill": "$text-secondary", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "LCM_Quick4", "padding": [6, 12], "fill": "$bg-page", "stroke": {"fill": "$border", "thickness": 1}, "children": [ - {"type": "text", "id": "LCM_Quick4Text", "content": "Liên hệ CSKH", "fill": "$text-secondary", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]} - ]} - ] - }, - { - "type": "frame", "id": "LCM_InputBar", "width": "fill_container", "padding": [12, 16], "gap": 10, "alignItems": "center", "fill": "$bg-card", - "children": [ - {"type": "frame", "id": "LCM_AttachBtn", "width": 36, "height": 36, "justifyContent": "center", "alignItems": "center", "stroke": {"fill": "$border", "thickness": 1}, "children": [ - {"type": "icon_font", "id": "LCM_AttachIcon", "width": 16, "height": 16, "iconFontName": "paperclip", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]}, - {"type": "frame", "id": "LCM_InputField", "width": "fill_container", "height": 36, "fill": "$bg-page", "padding": [0, 12], "alignItems": "center", "stroke": {"fill": "$border", "thickness": 1}, "children": [ - {"type": "text", "id": "LCM_InputPlaceholder", "content": "Type your message...", "fill": "$text-tertiary", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "LCM_SendBtn", "width": 36, "height": 36, "fill": "$yellow-primary", "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LCM_SendIcon", "width": 16, "height": 16, "iconFontName": "send", "iconFontFamily": "lucide", "fill": "$bg-card"} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "LCM_BottomTabBar", - "width": "fill_container", - "height": 64, - "fill": "$bg-card", - "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, - "justifyContent": "space_around", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "LCM_TabHub", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LCM_TabHubIcon", "width": 20, "height": 20, "iconFontName": "layout-grid", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "LCM_TabHubText", "fill": "$text-tertiary", "content": "HUB", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "LCM_TabChat", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LCM_TabChatIcon", "width": 20, "height": 20, "iconFontName": "message-circle", "iconFontFamily": "lucide", "fill": "$yellow-primary"}, - {"type": "text", "id": "LCM_TabChatText", "fill": "$yellow-primary", "content": "CHAT", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "LCM_TabCRM", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LCM_TabCRMIcon", "width": 20, "height": 20, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "LCM_TabCRMText", "fill": "$text-tertiary", "content": "CRM", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "LCM_TabAI", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LCM_TabAIIcon", "width": 20, "height": 20, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "LCM_TabAIText", "fill": "$text-tertiary", "content": "AI", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "LCM_TabStats", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LCM_TabStatsIcon", "width": 20, "height": 20, "iconFontName": "bar-chart-3", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "LCM_TabStatsText", "fill": "$text-tertiary", "content": "STATS", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]} - ] - } - ] - }], - "variables": { - "bg-page": {"type": "color", "value": "#18181B"}, - "bg-card": {"type": "color", "value": "#0F0F10"}, - "yellow-primary": {"type": "color", "value": "#FACC15"}, - "text-primary": {"type": "color", "value": "#FAFAFA"}, - "text-secondary": {"type": "color", "value": "#71717A"}, - "text-tertiary": {"type": "color", "value": "#52525B"}, - "border": {"type": "color", "value": "#27272A"}, - "success": {"type": "color", "value": "#22C55E"}, - "warning": {"type": "color", "value": "#FACC15"}, - "error": {"type": "color", "value": "#EF4444"}, - "info": {"type": "color", "value": "#3B82F6"} - } -} \ No newline at end of file diff --git a/pencil-design/src/pages/tMarketing/mobile/social-hub.pen b/pencil-design/src/pages/tMarketing/mobile/social-hub.pen deleted file mode 100644 index 65c40359..00000000 --- a/pencil-design/src/pages/tMarketing/mobile/social-hub.pen +++ /dev/null @@ -1,254 +0,0 @@ -{ - "version": "2.6", - "children": [{ - "type": "frame", - "id": "SHM_Root", - "name": "Screen/Social Hub Mobile", - "reusable": true, - "width": 390, - "height": 844, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "SHM_Header", - "width": "fill_container", - "height": 56, - "fill": "$bg-card", - "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, - "padding": [0, 16], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "SHM_HeaderLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "SHM_LogoMark", "width": 28, "height": 28, "fill": "$yellow-primary", "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SHM_LogoLetter", "fill": "$bg-card", "content": "M", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} - ]}, - {"type": "text", "id": "SHM_PageTitle", "fill": "$text-primary", "content": "SOCIAL HUB", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SHM_HeaderRight", "gap": 16, "children": [ - {"type": "icon_font", "id": "SHM_SearchIcon", "width": 20, "height": 20, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "icon_font", "id": "SHM_MenuIcon", "width": 20, "height": 20, "iconFontName": "menu", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "SHM_ScrollContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "padding": [16, 16], - "gap": 16, - "children": [ - { - "type": "frame", "id": "SHM_KPIGrid", "width": "fill_container", "gap": 12, "flexWrap": "wrap", - "children": [ - { - "type": "frame", "id": "SHM_KPIReach", "fill": "$bg-card", "layout": "vertical", "gap": 8, "padding": 16, "stroke": {"fill": "$border", "thickness": 1}, "width": "fill_container(171)", - "children": [ - {"type": "text", "id": "SHM_KPIReachLabel", "content": "TOTAL REACH", "fill": "$text-secondary", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}, - {"type": "text", "id": "SHM_KPIReachValue", "content": "45.2K", "fill": "$text-primary", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "frame", "id": "SHM_KPIReachChange", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SHM_KPIReachArrow", "width": 12, "height": 12, "iconFontName": "arrow-up-right", "iconFontFamily": "lucide", "fill": "$success"}, - {"type": "text", "id": "SHM_KPIReachPercent", "content": "12.5%", "fill": "$success", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ] - }, - { - "type": "frame", "id": "SHM_KPIEngage", "fill": "$bg-card", "layout": "vertical", "gap": 8, "padding": 16, "stroke": {"fill": "$border", "thickness": 1}, "width": "fill_container(171)", - "children": [ - {"type": "text", "id": "SHM_KPIEngageLabel", "content": "ENGAGEMENT", "fill": "$text-secondary", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}, - {"type": "text", "id": "SHM_KPIEngageValue", "content": "12.8%", "fill": "$text-primary", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "frame", "id": "SHM_KPIEngageChange", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SHM_KPIEngageArrow", "width": 12, "height": 12, "iconFontName": "arrow-up-right", "iconFontFamily": "lucide", "fill": "$success"}, - {"type": "text", "id": "SHM_KPIEngagePercent", "content": "8.2%", "fill": "$success", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ] - }, - { - "type": "frame", "id": "SHM_KPIFollowers", "fill": "$bg-card", "layout": "vertical", "gap": 8, "padding": 16, "stroke": {"fill": "$border", "thickness": 1}, "width": "fill_container(171)", - "children": [ - {"type": "text", "id": "SHM_KPIFollowersLabel", "content": "NEW FOLLOWERS", "fill": "$text-secondary", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}, - {"type": "text", "id": "SHM_KPIFollowersValue", "content": "+1.2K", "fill": "$text-primary", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "frame", "id": "SHM_KPIFollowersChange", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SHM_KPIFollowersArrow", "width": 12, "height": 12, "iconFontName": "arrow-up-right", "iconFontFamily": "lucide", "fill": "$success"}, - {"type": "text", "id": "SHM_KPIFollowersPercent", "content": "24.1%", "fill": "$success", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ] - }, - { - "type": "frame", "id": "SHM_KPIMessages", "fill": "$bg-card", "layout": "vertical", "gap": 8, "padding": 16, "stroke": {"fill": "$border", "thickness": 1}, "width": "fill_container(171)", - "children": [ - {"type": "text", "id": "SHM_KPIMessagesLabel", "content": "MESSAGES", "fill": "$text-secondary", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}, - {"type": "text", "id": "SHM_KPIMessagesValue", "content": "234", "fill": "$text-primary", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "frame", "id": "SHM_KPIMessagesChange", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SHM_KPIMessagesArrow", "width": 12, "height": 12, "iconFontName": "minus", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "SHM_KPIMessagesPercent", "content": "0.0%", "fill": "$text-tertiary", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ] - } - ] - }, - { - "type": "frame", "id": "SHM_PlatformStatus", "fill": "$bg-card", "layout": "vertical", "stroke": {"fill": "$border", "thickness": 1}, "width": "fill_container", - "children": [ - {"type": "frame", "id": "SHM_PlatformHeader", "width": "fill_container", "padding": [12, 16], "gap": 10, "alignItems": "center", "stroke": {"fill": "$border", "thickness": 1, "align": "inside"}, - "children": [ - {"type": "icon_font", "id": "SHM_PlatformIcon", "width": 14, "height": 14, "iconFontName": "globe", "iconFontFamily": "lucide", "fill": "$yellow-primary"}, - {"type": "text", "id": "SHM_PlatformTitle", "content": "PLATFORM STATUS", "fill": "$text-primary", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"} - ] - }, - {"type": "frame", "id": "SHM_PlatformList", "width": "fill_container", "layout": "vertical", "gap": 10, "padding": [12, 16], - "children": [ - {"type": "frame", "id": "SHM_PlatFB", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SHM_PlatFBLeft", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "SHM_FBDot", "width": 8, "height": 8, "fill": "#3B82F6"}, - {"type": "text", "id": "SHM_FBName", "content": "Facebook", "fill": "$text-primary", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "text", "id": "SHM_FBStatus", "content": "ACTIVE", "fill": "$success", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SHM_PlatIG", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SHM_PlatIGLeft", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "SHM_IGDot", "width": 8, "height": 8, "fill": "#E1306C"}, - {"type": "text", "id": "SHM_IGName", "content": "Instagram", "fill": "$text-primary", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "text", "id": "SHM_IGStatus", "content": "ACTIVE", "fill": "$success", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SHM_PlatZalo", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SHM_PlatZaloLeft", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "SHM_ZaloDot", "width": 8, "height": 8, "fill": "#0068FF"}, - {"type": "text", "id": "SHM_ZaloName", "content": "Zalo", "fill": "$text-primary", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "text", "id": "SHM_ZaloStatus", "content": "ACTIVE", "fill": "$success", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SHM_PlatX", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SHM_PlatXLeft", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "SHM_XDot", "width": 8, "height": 8, "fill": "$text-secondary"}, - {"type": "text", "id": "SHM_XName", "content": "X (Twitter)", "fill": "$text-primary", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "text", "id": "SHM_XStatus", "content": "PENDING", "fill": "$warning", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SHM_PlatWA", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SHM_PlatWALeft", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "SHM_WADot", "width": 8, "height": 8, "fill": "#25D366"}, - {"type": "text", "id": "SHM_WAName", "content": "WhatsApp", "fill": "$text-primary", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "text", "id": "SHM_WAStatus", "content": "ACTIVE", "fill": "$success", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"} - ]} - ] - } - ] - }, - { - "type": "frame", "id": "SHM_UnifiedFeed", "fill": "$bg-card", "layout": "vertical", "stroke": {"fill": "$border", "thickness": 1}, "width": "fill_container", - "children": [ - {"type": "frame", "id": "SHM_FeedHeader", "width": "fill_container", "padding": [12, 16], "justifyContent": "space_between", "alignItems": "center", "stroke": {"fill": "$border", "thickness": 1, "align": "inside"}, - "children": [ - {"type": "frame", "id": "SHM_FeedHeaderLeft", "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SHM_FeedIcon", "width": 14, "height": 14, "iconFontName": "rss", "iconFontFamily": "lucide", "fill": "$yellow-primary"}, - {"type": "text", "id": "SHM_FeedTitle", "content": "UNIFIED FEED", "fill": "$text-primary", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SHM_FeedActions", "gap": 8, "children": [ - {"type": "icon_font", "id": "SHM_RefreshIcon", "width": 14, "height": 14, "iconFontName": "refresh-cw", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - {"type": "frame", "id": "SHM_FeedList", "width": "fill_container", "layout": "vertical", "padding": 12, "gap": 0, - "children": [ - {"type": "frame", "id": "SHM_FeedItem1", "width": "fill_container", "padding": [12, 0], "gap": 10, "alignItems": "center", "stroke": {"fill": "$border", "thickness": 1, "align": "inside"}, - "children": [ - {"type": "frame", "id": "SHM_Ind1", "width": 3, "height": 36, "fill": "#3B82F6"}, - {"type": "frame", "id": "SHM_FeedContent1", "layout": "vertical", "gap": 4, "width": "fill_container", "children": [ - {"type": "text", "id": "SHM_FeedTitle1", "content": "@customer1 commented on your post", "fill": "$text-primary", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}, - {"type": "text", "id": "SHM_FeedDesc1", "content": "\"Great product! Love it!\"", "fill": "$text-secondary", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"} - ]}, - {"type": "text", "id": "SHM_FeedBadge1", "content": "FB", "fill": "#3B82F6", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"} - ] - }, - {"type": "frame", "id": "SHM_FeedItem2", "width": "fill_container", "padding": [12, 0], "gap": 10, "alignItems": "center", "stroke": {"fill": "$border", "thickness": 1, "align": "inside"}, - "children": [ - {"type": "frame", "id": "SHM_Ind2", "width": 3, "height": 36, "fill": "#E1306C"}, - {"type": "frame", "id": "SHM_FeedContent2", "layout": "vertical", "gap": 4, "width": "fill_container", "children": [ - {"type": "text", "id": "SHM_FeedTitle2", "content": "@user123 liked your post", "fill": "$text-primary", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}, - {"type": "text", "id": "SHM_FeedDesc2", "content": "Spring Collection 2026 announcement", "fill": "$text-secondary", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"} - ]}, - {"type": "text", "id": "SHM_FeedBadge2", "content": "IG", "fill": "#E1306C", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"} - ] - }, - {"type": "frame", "id": "SHM_FeedItem3", "width": "fill_container", "padding": [12, 0], "gap": 10, "alignItems": "center", "stroke": {"fill": "$border", "thickness": 1, "align": "inside"}, - "children": [ - {"type": "frame", "id": "SHM_Ind3", "width": 3, "height": 36, "fill": "#0068FF"}, - {"type": "frame", "id": "SHM_FeedContent3", "layout": "vertical", "gap": 4, "width": "fill_container", "children": [ - {"type": "text", "id": "SHM_FeedTitle3", "content": "Khách hàng gửi tin nhắn mới", "fill": "$text-primary", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}, - {"type": "text", "id": "SHM_FeedDesc3", "content": "\"Cho mình hỏi giá sản phẩm X...\"", "fill": "$text-secondary", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"} - ]}, - {"type": "text", "id": "SHM_FeedBadge3", "content": "ZALO", "fill": "#0068FF", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"} - ] - }, - {"type": "frame", "id": "SHM_FeedItem4", "width": "fill_container", "padding": [12, 0], "gap": 10, "alignItems": "center", - "children": [ - {"type": "frame", "id": "SHM_Ind4", "width": 3, "height": 36, "fill": "#25D366"}, - {"type": "frame", "id": "SHM_FeedContent4", "layout": "vertical", "gap": 4, "width": "fill_container", "children": [ - {"type": "text", "id": "SHM_FeedTitle4", "content": "+84912xxx sent a message", "fill": "$text-primary", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}, - {"type": "text", "id": "SHM_FeedDesc4", "content": "\"Hi, I want to order...\"", "fill": "$text-secondary", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"} - ]}, - {"type": "text", "id": "SHM_FeedBadge4", "content": "WA", "fill": "#25D366", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"} - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SHM_BottomTabBar", - "width": "fill_container", - "height": 64, - "fill": "$bg-card", - "stroke": {"thickness": 1, "fill": "$border", "align": "inside"}, - "justifyContent": "space_around", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "SHM_TabHub", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SHM_TabHubIcon", "width": 20, "height": 20, "iconFontName": "layout-grid", "iconFontFamily": "lucide", "fill": "$yellow-primary"}, - {"type": "text", "id": "SHM_TabHubText", "fill": "$yellow-primary", "content": "HUB", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "SHM_TabChat", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SHM_TabChatIcon", "width": 20, "height": 20, "iconFontName": "message-circle", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "SHM_TabChatText", "fill": "$text-tertiary", "content": "CHAT", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "SHM_TabCRM", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SHM_TabCRMIcon", "width": 20, "height": 20, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "SHM_TabCRMText", "fill": "$text-tertiary", "content": "CRM", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "SHM_TabAI", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SHM_TabAIIcon", "width": 20, "height": 20, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "SHM_TabAIText", "fill": "$text-tertiary", "content": "AI", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "SHM_TabStats", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SHM_TabStatsIcon", "width": 20, "height": 20, "iconFontName": "bar-chart-3", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "SHM_TabStatsText", "fill": "$text-tertiary", "content": "STATS", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]} - ] - } - ] - }], - "variables": { - "bg-page": {"type": "color", "value": "#18181B"}, - "bg-card": {"type": "color", "value": "#0F0F10"}, - "yellow-primary": {"type": "color", "value": "#FACC15"}, - "text-primary": {"type": "color", "value": "#FAFAFA"}, - "text-secondary": {"type": "color", "value": "#71717A"}, - "text-tertiary": {"type": "color", "value": "#52525B"}, - "border": {"type": "color", "value": "#27272A"}, - "success": {"type": "color", "value": "#22C55E"}, - "warning": {"type": "color", "value": "#FACC15"}, - "error": {"type": "color", "value": "#EF4444"}, - "info": {"type": "color", "value": "#3B82F6"} - } -} \ No newline at end of file diff --git a/pencil-design/src/pages/tPOS/admin/admin-dashboard.pen b/pencil-design/src/pages/tPOS/admin/admin-dashboard.pen deleted file mode 100644 index c490f1ff..00000000 --- a/pencil-design/src/pages/tPOS/admin/admin-dashboard.pen +++ /dev/null @@ -1,404 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "AdminDashboard", - "name": "Admin/Dashboard", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "$bg-page", - "clip": true, - "children": [ - { - "type": "frame", - "id": "ADSidebar", - "width": 260, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, - "layout": "vertical", - "children": [ - {"type": "frame", "id": "ADSidebarLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "ADLogoIcon", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "ADLogoText", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"} - ]}, - {"type": "frame", "id": "ADLogoTextGroup", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "ADLogoName", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "ADLogoSub", "fill": "$text-tertiary", "content": "Management Console", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "ADSidebarNav", "width": "fill_container", "height": "fill_container", "padding": [16, 12], "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "ADNavLabel1", "fill": "$text-tertiary", "content": "TỔNG QUAN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 12, 8, 12]}, - {"type": "frame", "id": "ADNavDashboard", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADNavDashboardIcon", "width": 20, "height": 20, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "ADNavDashboardText", "fill": "#FFFFFF", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - - {"type": "text", "id": "ADNavLabel2", "fill": "$text-tertiary", "content": "CỬA HÀNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "ADNavStores", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "ADNavStoresLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADNavStoresIcon", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "ADNavStoresText", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "ADNavStoresBadge", "width": 22, "height": 22, "fill": "$bg-interactive", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "ADNavStoresBadgeT", "fill": "$text-tertiary", "content": "3", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "ADNavProducts", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADNavProductsIcon", "width": 18, "height": 18, "iconFontName": "package", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "ADNavProductsText", "fill": "$text-tertiary", "content": "Sản phẩm & Menu", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "ADNavStaff", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADNavStaffIcon", "width": 18, "height": 18, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "ADNavStaffText", "fill": "$text-tertiary", "content": "Nhân sự", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "ADNavInventory", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADNavInventoryIcon", "width": 18, "height": 18, "iconFontName": "warehouse", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "ADNavInventoryText", "fill": "$text-tertiary", "content": "Kho hàng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "ADNavDevices", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12, 0, 36], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADNavDevicesIcon", "width": 18, "height": 18, "iconFontName": "monitor", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "ADNavDevicesText", "fill": "$text-tertiary", "content": "Thiết bị", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - - {"type": "text", "id": "ADNavLabel3", "fill": "$text-tertiary", "content": "KINH DOANH", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "ADNavCustomers", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADNavCustomersIcon", "width": 20, "height": 20, "iconFontName": "heart", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "ADNavCustomersText", "fill": "$text-secondary", "content": "Khách hàng & Loyalty", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "ADNavReports", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADNavReportsIcon", "width": 20, "height": 20, "iconFontName": "bar-chart-2", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "ADNavReportsText", "fill": "$text-secondary", "content": "Báo cáo & Phân tích", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "ADNavFinance", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADNavFinanceIcon", "width": 20, "height": 20, "iconFontName": "wallet", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "ADNavFinanceText", "fill": "$text-secondary", "content": "Tài chính", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - - {"type": "text", "id": "ADNavLabel4", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]}, - {"type": "frame", "id": "ADNavRoles", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADNavRolesIcon", "width": 20, "height": 20, "iconFontName": "shield", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "ADNavRolesText", "fill": "$text-secondary", "content": "Phân quyền", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "ADNavSettings", "width": "fill_container", "height": 44, "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADNavSettingsIcon", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "ADNavSettingsText", "fill": "$text-secondary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "ADSidebarUser", "width": "fill_container", "padding": [16, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "ADUserAvatar", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "ADUserAvatarT", "fill": "#FFFFFF", "content": "VH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "ADUserInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "ADUserName", "fill": "$text-primary", "content": "Velik Ho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "ADUserRole", "fill": "$text-tertiary", "content": "Owner", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "icon_font", "id": "ADUserLogout", "width": 18, "height": 18, "iconFontName": "log-out", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]} - ] - }, - { - "type": "frame", - "id": "ADMain", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "children": [ - {"type": "frame", "id": "ADHeader", "width": "fill_container", "padding": [16, 32], "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "ADHeaderLeft", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "ADHeaderTitle", "fill": "$text-primary", "content": "Dashboard", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "text", "id": "ADHeaderSubtitle", "fill": "$text-tertiary", "content": "Tổng quan kinh doanh • 11/02/2026", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "ADHeaderRight", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "ADSearch", "width": 260, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADSearchIcon", "width": 18, "height": 18, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "ADSearchPlaceholder", "fill": "$text-tertiary", "content": "Tìm kiếm...", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "ADNotifBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADNotifIcon", "width": 20, "height": 20, "iconFontName": "bell", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "frame", "id": "ADNotifDot", "width": 8, "height": 8, "fill": "#EF4444", "cornerRadius": 100, "x": 28, "y": 8} - ]}, - {"type": "frame", "id": "ADNewStore", "fill": "$orange-primary", "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADNewStoreIcon", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "ADNewStoreText", "fill": "#FFFFFF", "content": "Tạo cửa hàng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ]}, - {"type": "frame", "id": "ADContent", "width": "fill_container", "height": "fill_container", "padding": 28, "layout": "vertical", "gap": 24, "clip": true, "children": [ - {"type": "frame", "id": "ADKPIRow", "width": "fill_container", "gap": 20, "children": [ - {"type": "frame", "id": "ADKPI1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "padding": 20, "layout": "vertical", "gap": 14, "children": [ - {"type": "frame", "id": "ADKPI1Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "ADKPI1Icon", "width": 44, "height": 44, "fill": "#22C55E20", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADKPI1IconI", "width": 22, "height": 22, "iconFontName": "trending-up", "iconFontFamily": "lucide", "fill": "#22C55E"} - ]}, - {"type": "frame", "id": "ADKPI1Badge", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 8], "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADKPI1BadgeIcon", "width": 12, "height": 12, "iconFontName": "arrow-up", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "ADKPI1BadgeText", "fill": "#22C55E", "content": "+18.2%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]} - ]}, - {"type": "text", "id": "ADKPI1Value", "fill": "$text-primary", "content": "128.5M", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, - {"type": "text", "id": "ADKPI1Label", "fill": "$text-tertiary", "content": "Tổng doanh thu", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "ADKPI2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "padding": 20, "layout": "vertical", "gap": 14, "children": [ - {"type": "frame", "id": "ADKPI2Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "ADKPI2Icon", "width": 44, "height": 44, "fill": "#3B82F620", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADKPI2IconI", "width": 22, "height": 22, "iconFontName": "shopping-bag", "iconFontFamily": "lucide", "fill": "#3B82F6"} - ]}, - {"type": "frame", "id": "ADKPI2Badge", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 8], "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADKPI2BadgeIcon", "width": 12, "height": 12, "iconFontName": "arrow-up", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "ADKPI2BadgeText", "fill": "#22C55E", "content": "+12.4%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]} - ]}, - {"type": "text", "id": "ADKPI2Value", "fill": "$text-primary", "content": "1,247", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, - {"type": "text", "id": "ADKPI2Label", "fill": "$text-tertiary", "content": "Tổng đơn hàng", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "ADKPI3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "padding": 20, "layout": "vertical", "gap": 14, "children": [ - {"type": "frame", "id": "ADKPI3Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "ADKPI3Icon", "width": 44, "height": 44, "fill": "#8B5CF620", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADKPI3IconI", "width": 22, "height": 22, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "#8B5CF6"} - ]}, - {"type": "frame", "id": "ADKPI3Badge", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 8], "children": [ - {"type": "text", "id": "ADKPI3BadgeText", "fill": "#22C55E", "content": "3 online", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]} - ]}, - {"type": "text", "id": "ADKPI3Value", "fill": "$text-primary", "content": "3", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, - {"type": "text", "id": "ADKPI3Label", "fill": "$text-tertiary", "content": "Cửa hàng hoạt động", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "ADKPI4", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "padding": 20, "layout": "vertical", "gap": 14, "children": [ - {"type": "frame", "id": "ADKPI4Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "ADKPI4Icon", "width": 44, "height": 44, "fill": "#EC489920", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADKPI4IconI", "width": 22, "height": 22, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "#EC4899"} - ]}, - {"type": "frame", "id": "ADKPI4Badge", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 8], "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADKPI4BadgeIcon", "width": 12, "height": 12, "iconFontName": "arrow-up", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "ADKPI4BadgeText", "fill": "#22C55E", "content": "+22.7%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]} - ]}, - {"type": "text", "id": "ADKPI4Value", "fill": "$text-primary", "content": "12", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, - {"type": "text", "id": "ADKPI4Label", "fill": "$text-tertiary", "content": "Nhân viên online", "fontFamily": "Roboto", "fontSize": 13} - ]} - ]}, - - {"type": "frame", "id": "ADBottomRow", "width": "fill_container", "height": "fill_container", "gap": 24, "children": [ - {"type": "frame", "id": "ADStoreOverview", "width": "fill_container", "height": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "layout": "vertical", "children": [ - {"type": "frame", "id": "ADStoreHeader", "width": "fill_container", "padding": [16, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "ADStoreTitleG", "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADStoreIcon", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "text", "id": "ADStoreTitle", "fill": "$text-primary", "content": "Cửa hàng của bạn", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ]}, - {"type": "text", "id": "ADStoreViewAll", "fill": "$orange-primary", "content": "Quản lý tất cả →", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "ADStoreBody", "width": "fill_container", "height": "fill_container", "padding": 16, "layout": "vertical", "gap": 12, "clip": true, "children": [ - {"type": "frame", "id": "ADStore1", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 14, "padding": 16, "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "ADStore1Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "ADStore1Info", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "ADStore1Avatar", "width": 40, "height": 40, "fill": "#FF5C0020", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADStore1AvatarIcon", "width": 20, "height": 20, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "$orange-primary"} - ]}, - {"type": "frame", "id": "ADStore1NameG", "layout": "vertical", "gap": 3, "children": [ - {"type": "text", "id": "ADStore1Name", "fill": "$text-primary", "content": "Coffee House Q1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "ADStore1Type", "fill": "$text-tertiary", "content": "Café • 123 Nguyễn Huệ, Q1", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "ADStore1Status", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "ADStore1Dot", "width": 6, "height": 6, "fill": "#22C55E", "cornerRadius": 100}, - {"type": "text", "id": "ADStore1StatusT", "fill": "#22C55E", "content": "Đang mở", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "ADStore1Stats", "width": "fill_container", "gap": 16, "children": [ - {"type": "frame", "id": "ADStore1Stat1", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 8, "padding": [8, 12], "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "ADStore1Stat1V", "fill": "$text-primary", "content": "45.2M", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}, - {"type": "text", "id": "ADStore1Stat1L", "fill": "$text-tertiary", "content": "Doanh thu", "fontFamily": "Roboto", "fontSize": 10} - ]}, - {"type": "frame", "id": "ADStore1Stat2", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 8, "padding": [8, 12], "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "ADStore1Stat2V", "fill": "$text-primary", "content": "342", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}, - {"type": "text", "id": "ADStore1Stat2L", "fill": "$text-tertiary", "content": "Đơn hàng", "fontFamily": "Roboto", "fontSize": 10} - ]}, - {"type": "frame", "id": "ADStore1Stat3", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 8, "padding": [8, 12], "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "ADStore1Stat3V", "fill": "$text-primary", "content": "5", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}, - {"type": "text", "id": "ADStore1Stat3L", "fill": "$text-tertiary", "content": "Nhân viên", "fontFamily": "Roboto", "fontSize": 10} - ]}, - {"type": "frame", "id": "ADStore1Stat4", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 8, "padding": [8, 12], "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "ADStore1Stat4V", "fill": "$text-primary", "content": "48", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}, - {"type": "text", "id": "ADStore1Stat4L", "fill": "$text-tertiary", "content": "Sản phẩm", "fontFamily": "Roboto", "fontSize": 10} - ]} - ]} - ]}, - - {"type": "frame", "id": "ADStore2", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 14, "padding": 16, "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "ADStore2Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "ADStore2Info", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "ADStore2Avatar", "width": 40, "height": 40, "fill": "#3B82F620", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADStore2AvatarIcon", "width": 20, "height": 20, "iconFontName": "utensils", "iconFontFamily": "lucide", "fill": "#3B82F6"} - ]}, - {"type": "frame", "id": "ADStore2NameG", "layout": "vertical", "gap": 3, "children": [ - {"type": "text", "id": "ADStore2Name", "fill": "$text-primary", "content": "Nhà hàng Q3", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "ADStore2Type", "fill": "$text-tertiary", "content": "Restaurant • 456 Lê Văn Sỹ, Q3", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "ADStore2Status", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "ADStore2Dot", "width": 6, "height": 6, "fill": "#22C55E", "cornerRadius": 100}, - {"type": "text", "id": "ADStore2StatusT", "fill": "#22C55E", "content": "Đang mở", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "ADStore2Stats", "width": "fill_container", "gap": 16, "children": [ - {"type": "frame", "id": "ADStore2Stat1", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 8, "padding": [8, 12], "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "ADStore2Stat1V", "fill": "$text-primary", "content": "62.8M", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}, - {"type": "text", "id": "ADStore2Stat1L", "fill": "$text-tertiary", "content": "Doanh thu", "fontFamily": "Roboto", "fontSize": 10} - ]}, - {"type": "frame", "id": "ADStore2Stat2", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 8, "padding": [8, 12], "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "ADStore2Stat2V", "fill": "$text-primary", "content": "185", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}, - {"type": "text", "id": "ADStore2Stat2L", "fill": "$text-tertiary", "content": "Đơn hàng", "fontFamily": "Roboto", "fontSize": 10} - ]}, - {"type": "frame", "id": "ADStore2Stat3", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 8, "padding": [8, 12], "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "ADStore2Stat3V", "fill": "$text-primary", "content": "8", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}, - {"type": "text", "id": "ADStore2Stat3L", "fill": "$text-tertiary", "content": "Nhân viên", "fontFamily": "Roboto", "fontSize": 10} - ]}, - {"type": "frame", "id": "ADStore2Stat4", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 8, "padding": [8, 12], "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "ADStore2Stat4V", "fill": "$text-primary", "content": "72", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}, - {"type": "text", "id": "ADStore2Stat4L", "fill": "$text-tertiary", "content": "Sản phẩm", "fontFamily": "Roboto", "fontSize": 10} - ]} - ]} - ]}, - - {"type": "frame", "id": "ADStore3", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 14, "padding": 16, "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "ADStore3Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "ADStore3Info", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "ADStore3Avatar", "width": 40, "height": 40, "fill": "#8B5CF620", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADStore3AvatarIcon", "width": 20, "height": 20, "iconFontName": "mic", "iconFontFamily": "lucide", "fill": "#8B5CF6"} - ]}, - {"type": "frame", "id": "ADStore3NameG", "layout": "vertical", "gap": 3, "children": [ - {"type": "text", "id": "ADStore3Name", "fill": "$text-primary", "content": "Karaoke Star Q7", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "ADStore3Type", "fill": "$text-tertiary", "content": "Karaoke • 789 Nguyễn Thị Thập, Q7", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "ADStore3Status", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [4, 10], "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "ADStore3Dot", "width": 6, "height": 6, "fill": "#F59E0B", "cornerRadius": 100}, - {"type": "text", "id": "ADStore3StatusT", "fill": "#F59E0B", "content": "Thiết lập", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "ADStore3Stats", "width": "fill_container", "gap": 16, "children": [ - {"type": "frame", "id": "ADStore3Stat1", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 8, "padding": [8, 12], "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "ADStore3Stat1V", "fill": "$text-tertiary", "content": "--", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}, - {"type": "text", "id": "ADStore3Stat1L", "fill": "$text-tertiary", "content": "Doanh thu", "fontFamily": "Roboto", "fontSize": 10} - ]}, - {"type": "frame", "id": "ADStore3Stat2", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 8, "padding": [8, 12], "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "ADStore3Stat2V", "fill": "$text-tertiary", "content": "--", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}, - {"type": "text", "id": "ADStore3Stat2L", "fill": "$text-tertiary", "content": "Đơn hàng", "fontFamily": "Roboto", "fontSize": 10} - ]}, - {"type": "frame", "id": "ADStore3Stat3", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 8, "padding": [8, 12], "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "ADStore3Stat3V", "fill": "$text-primary", "content": "0", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}, - {"type": "text", "id": "ADStore3Stat3L", "fill": "$text-tertiary", "content": "Nhân viên", "fontFamily": "Roboto", "fontSize": 10} - ]}, - {"type": "frame", "id": "ADStore3Stat4", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 8, "padding": [8, 12], "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "ADStore3Stat4V", "fill": "$text-primary", "content": "0", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}, - {"type": "text", "id": "ADStore3Stat4L", "fill": "$text-tertiary", "content": "Sản phẩm", "fontFamily": "Roboto", "fontSize": 10} - ]} - ]}, - {"type": "frame", "id": "ADStore3CTA", "width": "fill_container", "height": 36, "fill": "#F59E0B20", "stroke": {"thickness": 1, "fill": "#F59E0B40"}, "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "gap": 8, "children": [ - {"type": "icon_font", "id": "ADStore3CTAIcon", "width": 14, "height": 14, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "text", "id": "ADStore3CTAText", "fill": "#F59E0B", "content": "Hoàn tất thiết lập", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]} - ]} - ]} - ]}, - - {"type": "frame", "id": "ADRightCol", "width": 380, "height": "fill_container", "layout": "vertical", "gap": 20, "children": [ - {"type": "frame", "id": "ADAlerts", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "layout": "vertical", "children": [ - {"type": "frame", "id": "ADAlertsHeader", "width": "fill_container", "padding": [16, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADAlertsIcon", "width": 20, "height": 20, "iconFontName": "alert-triangle", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "text", "id": "ADAlertsTitle", "fill": "$text-primary", "content": "Cảnh báo", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, - {"type": "frame", "id": "ADAlertsBadge", "width": 22, "height": 22, "fill": "#EF4444", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "ADAlertsBadgeT", "fill": "#FFFFFF", "content": "4", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"} - ]} - ]}, - {"type": "frame", "id": "ADAlertsBody", "width": "fill_container", "padding": 12, "layout": "vertical", "gap": 8, "children": [ - {"type": "frame", "id": "ADAlert1", "width": "fill_container", "fill": "#EF444415", "cornerRadius": 10, "padding": [10, 14], "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADAlert1Icon", "width": 16, "height": 16, "iconFontName": "package-x", "iconFontFamily": "lucide", "fill": "#EF4444"}, - {"type": "frame", "id": "ADAlert1Text", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "ADAlert1Title", "fill": "$text-primary", "content": "5 sản phẩm sắp hết hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "ADAlert1Sub", "fill": "$text-tertiary", "content": "Coffee House Q1", "fontFamily": "Roboto", "fontSize": 10} - ]} - ]}, - {"type": "frame", "id": "ADAlert2", "width": "fill_container", "fill": "#F59E0B15", "cornerRadius": 10, "padding": [10, 14], "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADAlert2Icon", "width": 16, "height": 16, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "frame", "id": "ADAlert2Text", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "ADAlert2Title", "fill": "$text-primary", "content": "Ca tối thiếu 1 nhân viên", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "ADAlert2Sub", "fill": "$text-tertiary", "content": "Nhà hàng Q3 • Ngày mai", "fontFamily": "Roboto", "fontSize": 10} - ]} - ]}, - {"type": "frame", "id": "ADAlert3", "width": "fill_container", "fill": "#3B82F615", "cornerRadius": 10, "padding": [10, 14], "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADAlert3Icon", "width": 16, "height": 16, "iconFontName": "printer", "iconFontFamily": "lucide", "fill": "#3B82F6"}, - {"type": "frame", "id": "ADAlert3Text", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "ADAlert3Title", "fill": "$text-primary", "content": "Máy in mất kết nối", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "ADAlert3Sub", "fill": "$text-tertiary", "content": "Coffee House Q1 • Kitchen", "fontFamily": "Roboto", "fontSize": 10} - ]} - ]} - ]} - ]}, - - {"type": "frame", "id": "ADRecentActivity", "width": "fill_container", "height": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "layout": "vertical", "children": [ - {"type": "frame", "id": "ADActivityHeader", "width": "fill_container", "padding": [16, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ADActivityIcon", "width": 20, "height": 20, "iconFontName": "activity", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "ADActivityTitle", "fill": "$text-primary", "content": "Hoạt động gần đây", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "ADActivityBody", "width": "fill_container", "height": "fill_container", "padding": 12, "layout": "vertical", "gap": 6, "clip": true, "children": [ - {"type": "frame", "id": "ADAct1", "width": "fill_container", "padding": [8, 12], "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "ADAct1Dot", "width": 8, "height": 8, "fill": "#22C55E", "cornerRadius": 100}, - {"type": "frame", "id": "ADAct1Text", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "ADAct1Title", "fill": "$text-primary", "content": "Đơn #2847 hoàn thành", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "ADAct1Time", "fill": "$text-tertiary", "content": "Coffee House Q1 • 2 phút trước", "fontFamily": "Roboto", "fontSize": 10} - ]} - ]}, - {"type": "frame", "id": "ADAct2", "width": "fill_container", "padding": [8, 12], "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "ADAct2Dot", "width": 8, "height": 8, "fill": "#3B82F6", "cornerRadius": 100}, - {"type": "frame", "id": "ADAct2Text", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "ADAct2Title", "fill": "$text-primary", "content": "Nguyễn Văn A clock-in", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "ADAct2Time", "fill": "$text-tertiary", "content": "Nhà hàng Q3 • 5 phút trước", "fontFamily": "Roboto", "fontSize": 10} - ]} - ]}, - {"type": "frame", "id": "ADAct3", "width": "fill_container", "padding": [8, 12], "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "ADAct3Dot", "width": 8, "height": 8, "fill": "#F59E0B", "cornerRadius": 100}, - {"type": "frame", "id": "ADAct3Text", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "ADAct3Title", "fill": "$text-primary", "content": "Nhập kho 15 sản phẩm", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "ADAct3Time", "fill": "$text-tertiary", "content": "Coffee House Q1 • 12 phút trước", "fontFamily": "Roboto", "fontSize": 10} - ]} - ]}, - {"type": "frame", "id": "ADAct4", "width": "fill_container", "padding": [8, 12], "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "ADAct4Dot", "width": 8, "height": 8, "fill": "#8B5CF6", "cornerRadius": 100}, - {"type": "frame", "id": "ADAct4Text", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "ADAct4Title", "fill": "$text-primary", "content": "Cập nhật menu buổi tối", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "ADAct4Time", "fill": "$text-tertiary", "content": "Nhà hàng Q3 • 28 phút trước", "fontFamily": "Roboto", "fontSize": 10} - ]} - ]}, - {"type": "frame", "id": "ADAct5", "width": "fill_container", "padding": [8, 12], "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "ADAct5Dot", "width": 8, "height": 8, "fill": "#EC4899", "cornerRadius": 100}, - {"type": "frame", "id": "ADAct5Text", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "ADAct5Title", "fill": "$text-primary", "content": "Khách VIP mới: Trần Thị B", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "ADAct5Time", "fill": "$text-tertiary", "content": "Hệ thống • 45 phút trước", "fontFamily": "Roboto", "fontSize": 10} - ]} - ]} - ]} - ]} - ]} - ]} - ]} - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/admin/attendance-dashboard.pen b/pencil-design/src/pages/tPOS/admin/attendance-dashboard.pen deleted file mode 100644 index c174a426..00000000 --- a/pencil-design/src/pages/tPOS/admin/attendance-dashboard.pen +++ /dev/null @@ -1,1703 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "AttendDash", - "name": "Admin/AttendanceDashboard", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "$bg-page", - "clip": true, - "children": [ - { - "type": "frame", - "id": "ATSidebar", - "width": 260, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "right" - ] - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "ATLogo", - "width": "fill_container", - "padding": [ - 24, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ATLogoIc", - "width": 40, - "height": 40, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ATLogoT", - "fill": "#FFFFFF", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "800" - } - ] - }, - { - "type": "frame", - "id": "ATLogoGr", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "ATLogoN", - "fill": "$text-primary", - "content": "GoodGo Admin", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "text", - "id": "ATLogoSub", - "fill": "$text-tertiary", - "content": "Management Console", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "ATNav", - "width": "fill_container", - "height": "fill_container", - "padding": [ - 16, - 12 - ], - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "ATNavL1", - "fill": "$text-tertiary", - "content": "TỔNG QUAN", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 0, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "ATNavDash", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ATNavDashI", - "width": 20, - "height": 20, - "iconFontName": "layout-dashboard", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "ATNavDashT", - "fill": "$text-secondary", - "content": "Dashboard", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "ATNavL2", - "fill": "$text-tertiary", - "content": "CỬA HÀNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "ATNavStores", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "ATNavStoresLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ATNavStoresI", - "width": 20, - "height": 20, - "iconFontName": "store", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "ATNavStoresT", - "fill": "$text-secondary", - "content": "Quản lý cửa hàng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "ATNavStoresBdg", - "width": 22, - "height": 22, - "fill": "$bg-interactive", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ATNavStoresBdgT", - "fill": "$text-tertiary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "ATNavProd", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ATNavProdI", - "width": 18, - "height": 18, - "iconFontName": "package", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "ATNavProdT", - "fill": "$text-tertiary", - "content": "Sản phẩm & Menu", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "ATNavStaff", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ATNavStaffI", - "width": 18, - "height": 18, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "ATNavStaffT", - "fill": "#FFFFFF", - "content": "Nhân sự", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ], - "fill": "$orange-primary" - }, - { - "type": "frame", - "id": "ATNavInv", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ATNavInvI", - "width": 18, - "height": 18, - "iconFontName": "warehouse", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "ATNavInvT", - "fill": "$text-tertiary", - "content": "Kho hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "ATNavDev", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ATNavDevI", - "width": 18, - "height": 18, - "iconFontName": "monitor", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "ATNavDevT", - "fill": "$text-tertiary", - "content": "Thiết bị", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "ATNavL3", - "fill": "$text-tertiary", - "content": "KINH DOANH", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "ATNavCust", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ATNavCustI", - "width": 20, - "height": 20, - "iconFontName": "heart", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "ATNavCustT", - "fill": "$text-secondary", - "content": "Khách hàng & Loyalty", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "ATNavRpt", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ATNavRptI", - "width": 20, - "height": 20, - "iconFontName": "bar-chart-2", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "ATNavRptT", - "fill": "$text-secondary", - "content": "Báo cáo & Phân tích", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "ATNavFin", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ATNavFinI", - "width": 20, - "height": 20, - "iconFontName": "wallet", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "ATNavFinT", - "fill": "$text-secondary", - "content": "Tài chính", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "ATNavL4", - "fill": "$text-tertiary", - "content": "HỆ THỐNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "ATNavRoles", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ATNavRolesI", - "width": 20, - "height": 20, - "iconFontName": "shield", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "ATNavRolesT", - "fill": "$text-secondary", - "content": "Phân quyền", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "ATNavSet", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ATNavSetI", - "width": 20, - "height": 20, - "iconFontName": "settings", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "ATNavSetT", - "fill": "$text-secondary", - "content": "Cài đặt", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "ATUsr", - "width": "fill_container", - "padding": [ - 16, - 16 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ATUsrAv", - "width": 36, - "height": 36, - "fill": "#3B82F6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ATUsrAvT", - "fill": "#FFFFFF", - "content": "VH", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "ATUsrInf", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "ATUsrN", - "fill": "$text-primary", - "content": "Velik Ho", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "ATUsrR", - "fill": "$text-tertiary", - "content": "Owner", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ATMain", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "ATHeader", - "width": "fill_container", - "padding": [ - 16, - 32 - ], - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ATTitle", - "fill": "$text-primary", - "content": "Tổng hợp chấm công", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "ATActions", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "ATDateR", - "height": 40, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ATDateI", - "width": 16, - "height": 16, - "iconFontName": "calendar", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "ATDateT", - "fill": "$text-primary", - "content": "01/02 - 11/02/2026", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "id": "ATExport", - "height": 40, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 16 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ATExpI", - "width": 16, - "height": 16, - "iconFontName": "download", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "ATExpT", - "fill": "$text-secondary", - "content": "Export", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ATContent", - "width": "fill_container", - "height": "fill_container", - "padding": 24, - "layout": "vertical", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "ATStats", - "width": "fill_container", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "ATS1", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 20, - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "ATS1L", - "fill": "$text-tertiary", - "content": "Đúng giờ", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "ATS1V", - "fill": "#22C55E", - "content": "85%", - "fontFamily": "Roboto", - "fontSize": 32, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "ATS1Bar", - "width": "fill_container", - "height": 6, - "fill": "$bg-interactive", - "cornerRadius": 100, - "children": [ - { - "type": "frame", - "id": "ATS1Fl", - "width": 204, - "height": 6, - "fill": "#22C55E", - "cornerRadius": 100 - } - ] - } - ] - }, - { - "type": "frame", - "id": "ATS2", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 20, - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "ATS2L", - "fill": "$text-tertiary", - "content": "Đi muộn", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "ATS2V", - "fill": "#F59E0B", - "content": "10%", - "fontFamily": "Roboto", - "fontSize": 32, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "ATS2Bar", - "width": "fill_container", - "height": 6, - "fill": "$bg-interactive", - "cornerRadius": 100, - "children": [ - { - "type": "frame", - "id": "ATS2Fl", - "width": 24, - "height": 6, - "fill": "#F59E0B", - "cornerRadius": 100 - } - ] - } - ] - }, - { - "type": "frame", - "id": "ATS3", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 20, - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "ATS3L", - "fill": "$text-tertiary", - "content": "Vắng mặt", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "ATS3V", - "fill": "#EF4444", - "content": "5%", - "fontFamily": "Roboto", - "fontSize": 32, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "ATS3Bar", - "width": "fill_container", - "height": 6, - "fill": "$bg-interactive", - "cornerRadius": 100, - "children": [ - { - "type": "frame", - "id": "ATS3Fl", - "width": 12, - "height": 6, - "fill": "#EF4444", - "cornerRadius": 100 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ATTable", - "width": "fill_container", - "height": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "ATTHead", - "width": "fill_container", - "padding": [ - 14, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "children": [ - { - "type": "text", - "id": "ATTH1", - "width": 180, - "fill": "$text-tertiary", - "content": "Nhân viên", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "ATTH2", - "width": 120, - "fill": "$text-tertiary", - "content": "Ngày", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "ATTH3", - "width": 100, - "fill": "$text-tertiary", - "content": "Giờ vào", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "ATTH4", - "width": 100, - "fill": "$text-tertiary", - "content": "Giờ ra", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "ATTH5", - "width": 80, - "fill": "$text-tertiary", - "content": "Tổng giờ", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "ATTH6", - "width": 80, - "fill": "$text-tertiary", - "content": "OT", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "ATTH7", - "fill": "$text-tertiary", - "content": "Trạng thái", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "ATR1", - "width": "fill_container", - "padding": [ - 14, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ATR1N", - "width": 180, - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ATR1Av", - "width": 32, - "height": 32, - "fill": "#8B5CF6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ATR1AvT", - "fill": "#FFFFFF", - "content": "TN", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "ATR1Nm", - "fill": "$text-primary", - "content": "Trần Nhật", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "text", - "id": "ATR1D", - "width": 120, - "fill": "$text-primary", - "content": "11/02/2026", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "ATR1In", - "width": 100, - "fill": "$text-primary", - "content": "05:58", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "ATR1Out", - "width": 100, - "fill": "$text-primary", - "content": "14:05", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "ATR1H", - "width": 80, - "fill": "$text-primary", - "content": "8h 07m", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "ATR1OT", - "width": 80, - "fill": "$text-tertiary", - "content": "—", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "frame", - "id": "ATR1St", - "children": [ - { - "type": "frame", - "id": "ATR1StB", - "fill": "#22C55E20", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "ATR1StT", - "fill": "#22C55E", - "content": "Đúng giờ", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ATR2", - "width": "fill_container", - "padding": [ - 14, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ATR2N", - "width": 180, - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ATR2Av", - "width": 32, - "height": 32, - "fill": "#F59E0B", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ATR2AvT", - "fill": "#FFFFFF", - "content": "LM", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "ATR2Nm", - "fill": "$text-primary", - "content": "Lê Minh", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "text", - "id": "ATR2D", - "width": 120, - "fill": "$text-primary", - "content": "11/02/2026", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "ATR2In", - "width": 100, - "fill": "#F59E0B", - "content": "14:23", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "ATR2Out", - "width": 100, - "fill": "$text-primary", - "content": "22:15", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "ATR2H", - "width": 80, - "fill": "$text-primary", - "content": "7h 52m", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "ATR2OT", - "width": 80, - "fill": "$text-tertiary", - "content": "—", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "frame", - "id": "ATR2St", - "children": [ - { - "type": "frame", - "id": "ATR2StB", - "fill": "#F59E0B20", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "ATR2StT", - "fill": "#F59E0B", - "content": "Muộn 23p", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ATR3", - "width": "fill_container", - "padding": [ - 14, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ATR3N", - "width": 180, - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ATR3Av", - "width": 32, - "height": 32, - "fill": "#EF4444", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ATR3AvT", - "fill": "#FFFFFF", - "content": "PH", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "ATR3Nm", - "fill": "$text-primary", - "content": "Phạm Hương", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "text", - "id": "ATR3D", - "width": 120, - "fill": "$text-primary", - "content": "11/02/2026", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "ATR3In", - "width": 100, - "fill": "$text-primary", - "content": "21:55", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "ATR3Out", - "width": 100, - "fill": "$text-primary", - "content": "06:10", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "ATR3H", - "width": 80, - "fill": "$text-primary", - "content": "8h 15m", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "ATR3OT", - "width": 80, - "fill": "$orange-primary", - "content": "0h 15m", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "frame", - "id": "ATR3St", - "children": [ - { - "type": "frame", - "id": "ATR3StB", - "fill": "#22C55E20", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "ATR3StT", - "fill": "#22C55E", - "content": "Đúng giờ", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ATR4", - "width": "fill_container", - "padding": [ - 14, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ATR4N", - "width": 180, - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ATR4Av", - "width": 32, - "height": 32, - "fill": "#22C55E", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ATR4AvT", - "fill": "#FFFFFF", - "content": "NB", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "ATR4Nm", - "fill": "$text-primary", - "content": "Nguyễn Bảo", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "text", - "id": "ATR4D", - "width": 120, - "fill": "$text-primary", - "content": "11/02/2026", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "ATR4In", - "width": 100, - "fill": "#EF4444", - "content": "—", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "ATR4Out", - "width": 100, - "fill": "#EF4444", - "content": "—", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "ATR4H", - "width": 80, - "fill": "#EF4444", - "content": "0h", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "ATR4OT", - "width": 80, - "fill": "$text-tertiary", - "content": "—", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "frame", - "id": "ATR4St", - "children": [ - { - "type": "frame", - "id": "ATR4StB", - "fill": "#EF444420", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "ATR4StT", - "fill": "#EF4444", - "content": "Vắng mặt", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ATR5", - "width": "fill_container", - "padding": [ - 14, - 20 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ATR5N", - "width": 180, - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ATR5Av", - "width": 32, - "height": 32, - "fill": "#EC4899", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ATR5AvT", - "fill": "#FFFFFF", - "content": "VT", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "ATR5Nm", - "fill": "$text-primary", - "content": "Võ Thảo", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "text", - "id": "ATR5D", - "width": 120, - "fill": "$text-primary", - "content": "11/02/2026", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "ATR5In", - "width": 100, - "fill": "$text-primary", - "content": "06:02", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "ATR5Out", - "width": 100, - "fill": "$text-primary", - "content": "14:00", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "ATR5H", - "width": 80, - "fill": "$text-primary", - "content": "7h 58m", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "ATR5OT", - "width": 80, - "fill": "$text-tertiary", - "content": "—", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "frame", - "id": "ATR5St", - "children": [ - { - "type": "frame", - "id": "ATR5StB", - "fill": "#22C55E20", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "ATR5StT", - "fill": "#22C55E", - "content": "Đúng giờ", - "fontFamily": "Roboto", - "fontSize": 11, - "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/admin/audit-log.pen b/pencil-design/src/pages/tPOS/admin/audit-log.pen deleted file mode 100644 index 7b107f79..00000000 --- a/pencil-design/src/pages/tPOS/admin/audit-log.pen +++ /dev/null @@ -1,1899 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "AuditLog", - "name": "Admin/AuditLog", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "$bg-page", - "clip": true, - "children": [ - { - "type": "frame", - "id": "ALSidebar", - "width": 260, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "right" - ] - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "ALSidebarLogo", - "width": "fill_container", - "padding": [ - 24, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ALLogoIcon", - "width": 40, - "height": 40, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ALLogoT", - "fill": "#FFFFFF", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "800" - } - ] - }, - { - "type": "frame", - "id": "ALLogoTG", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "ALLogoN", - "fill": "$text-primary", - "content": "GoodGo Admin", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "text", - "id": "ALLogoS", - "fill": "$text-tertiary", - "content": "Management Console", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "ALSidebarNav", - "width": "fill_container", - "height": "fill_container", - "padding": [ - 16, - 12 - ], - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "ALNavL1", - "fill": "$text-tertiary", - "content": "TỔNG QUAN", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 0, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "ALNavDash", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ALNavDashI", - "width": 20, - "height": 20, - "iconFontName": "layout-dashboard", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "ALNavDashT", - "fill": "$text-secondary", - "content": "Dashboard", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "ALNavL2", - "fill": "$text-tertiary", - "content": "CỬA HÀNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "ALNavStores", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "ALNavStoresLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ALNavStoresI", - "width": 20, - "height": 20, - "iconFontName": "store", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "ALNavStoresT", - "fill": "$text-secondary", - "content": "Quản lý cửa hàng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "ALNavStoresBdg", - "width": 22, - "height": 22, - "fill": "$bg-interactive", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ALNavStoresBdgT", - "fill": "$text-tertiary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "ALNavProd", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ALNavProdI", - "width": 18, - "height": 18, - "iconFontName": "package", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "ALNavProdT", - "fill": "$text-tertiary", - "content": "Sản phẩm & Menu", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "ALNavStaff", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ALNavStaffI", - "width": 18, - "height": 18, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "ALNavStaffT", - "fill": "$text-tertiary", - "content": "Nhân sự", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "ALNavInv", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ALNavInvI", - "width": 18, - "height": 18, - "iconFontName": "warehouse", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "ALNavInvT", - "fill": "$text-tertiary", - "content": "Kho hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "ALNavDev", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ALNavDevI", - "width": 18, - "height": 18, - "iconFontName": "monitor", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "ALNavDevT", - "fill": "$text-tertiary", - "content": "Thiết bị", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "ALNavL3", - "fill": "$text-tertiary", - "content": "KINH DOANH", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "ALNavCust", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ALNavCustI", - "width": 20, - "height": 20, - "iconFontName": "heart", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "ALNavCustT", - "fill": "$text-secondary", - "content": "Khách hàng & Loyalty", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "ALNavRpt", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ALNavRptI", - "width": 20, - "height": 20, - "iconFontName": "bar-chart-2", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "ALNavRptT", - "fill": "$text-secondary", - "content": "Báo cáo & Phân tích", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "ALNavFin", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ALNavFinI", - "width": 20, - "height": 20, - "iconFontName": "wallet", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "ALNavFinT", - "fill": "$text-secondary", - "content": "Tài chính", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "ALNavL4", - "fill": "$text-tertiary", - "content": "HỆ THỐNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "ALNavRoles", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ALNavRolesI", - "width": 20, - "height": 20, - "iconFontName": "shield", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "ALNavRolesT", - "fill": "$text-secondary", - "content": "Phân quyền", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "ALNavSet", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ALNavSetI", - "width": 20, - "height": 20, - "iconFontName": "settings", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "ALNavSetT", - "fill": "#FFFFFF", - "content": "Cài đặt", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ], - "fill": "$orange-primary" - } - ] - }, - { - "type": "frame", - "id": "ALSidebarUser", - "width": "fill_container", - "padding": [ - 16, - 16 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ALUserAv", - "width": 36, - "height": 36, - "fill": "#3B82F6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ALUserAvT", - "fill": "#FFFFFF", - "content": "VH", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "ALUserInfo", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "ALUserN", - "fill": "$text-primary", - "content": "Velik Ho", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "ALUserR", - "fill": "$text-tertiary", - "content": "Owner", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ALMain", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "ALHeader", - "width": "fill_container", - "padding": [ - 16, - 32 - ], - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ALHeaderLeft", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "frame", - "id": "ALBreadcrumb", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ALBread1", - "fill": "$text-tertiary", - "content": "Hệ thống", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "ALBreadSep", - "fill": "$text-tertiary", - "content": "/", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "ALBread2", - "fill": "$orange-primary", - "content": "Nhật ký", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "ALHeaderTitle", - "fill": "$text-primary", - "content": "Nhật ký hoạt động", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "ALHeaderRight", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "ALDateRange", - "height": 40, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ALDateI", - "width": 16, - "height": 16, - "iconFontName": "calendar", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "ALDateT", - "fill": "$text-primary", - "content": "01/02 - 11/02/2026", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "icon_font", - "id": "ALDateChev", - "width": 14, - "height": 14, - "iconFontName": "chevron-down", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - }, - { - "type": "frame", - "id": "ALFilterUser", - "height": 40, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ALFilterUserI", - "width": 16, - "height": 16, - "iconFontName": "user", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "ALFilterUserT", - "fill": "$text-secondary", - "content": "Người dùng", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "icon_font", - "id": "ALFilterUserChev", - "width": 14, - "height": 14, - "iconFontName": "chevron-down", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - }, - { - "type": "frame", - "id": "ALFilterAction", - "height": 40, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ALFilterActI", - "width": 16, - "height": 16, - "iconFontName": "filter", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "ALFilterActT", - "fill": "$text-secondary", - "content": "Hành động", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "icon_font", - "id": "ALFilterActChev", - "width": 14, - "height": 14, - "iconFontName": "chevron-down", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ALContent", - "width": "fill_container", - "height": "fill_container", - "padding": 32, - "layout": "vertical", - "gap": 0, - "clip": true, - "children": [ - { - "type": "frame", - "id": "ALTableHead", - "width": "fill_container", - "fill": "$bg-interactive", - "cornerRadius": [ - 10, - 10, - 0, - 0 - ], - "padding": [ - 14, - 20 - ], - "children": [ - { - "type": "text", - "id": "ALTh1", - "width": 160, - "fill": "$text-tertiary", - "content": "Thời gian", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "700" - }, - { - "type": "text", - "id": "ALTh2", - "width": 160, - "fill": "$text-tertiary", - "content": "Người dùng", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "700" - }, - { - "type": "text", - "id": "ALTh3", - "width": "fill_container", - "fill": "$text-tertiary", - "content": "Hành động", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "700" - }, - { - "type": "text", - "id": "ALTh4", - "width": 140, - "fill": "$text-tertiary", - "content": "Địa chỉ IP", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "700" - }, - { - "type": "text", - "id": "ALTh5", - "width": 100, - "fill": "$text-tertiary", - "content": "Module", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "ALRow1", - "width": "fill_container", - "fill": "$bg-elevated", - "padding": [ - 14, - 20 - ], - "alignItems": "center", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "children": [ - { - "type": "text", - "id": "ALR1C1", - "width": 160, - "fill": "$text-secondary", - "content": "11/02/2026 09:45:12", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "frame", - "id": "ALR1C2", - "width": 160, - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ALR1Av", - "width": 28, - "height": 28, - "fill": "#3B82F6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ALR1AvT", - "fill": "#FFFFFF", - "content": "VH", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "ALR1Name", - "fill": "$text-primary", - "content": "Velik Ho", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "ALR1C3", - "width": "fill_container", - "fill": "$text-primary", - "content": "Đăng nhập hệ thống", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "ALR1C4", - "width": 140, - "fill": "$text-tertiary", - "content": "192.168.1.100", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "frame", - "id": "ALR1Badge", - "width": 100, - "children": [ - { - "type": "frame", - "id": "ALR1BadgeF", - "fill": "#3B82F620", - "cornerRadius": 6, - "padding": [ - 4, - 8 - ], - "children": [ - { - "type": "text", - "id": "ALR1BadgeT", - "fill": "#3B82F6", - "content": "Xác thực", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ALRow2", - "width": "fill_container", - "fill": "$bg-elevated", - "padding": [ - 14, - 20 - ], - "alignItems": "center", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "children": [ - { - "type": "text", - "id": "ALR2C1", - "width": 160, - "fill": "$text-secondary", - "content": "11/02/2026 09:32:05", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "frame", - "id": "ALR2C2", - "width": 160, - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ALR2Av", - "width": 28, - "height": 28, - "fill": "#EC4899", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ALR2AvT", - "fill": "#FFFFFF", - "content": "NA", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "ALR2Name", - "fill": "$text-primary", - "content": "Ngọc Anh", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "ALR2C3", - "width": "fill_container", - "fill": "$text-primary", - "content": "Thay đổi giá SP \"Cà phê sữa đá\"", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "ALR2C4", - "width": 140, - "fill": "$text-tertiary", - "content": "192.168.1.101", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "frame", - "id": "ALR2Badge", - "width": 100, - "children": [ - { - "type": "frame", - "id": "ALR2BadgeF", - "fill": "#F59E0B20", - "cornerRadius": 6, - "padding": [ - 4, - 8 - ], - "children": [ - { - "type": "text", - "id": "ALR2BadgeT", - "fill": "#F59E0B", - "content": "Sản phẩm", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ALRow3", - "width": "fill_container", - "fill": "$bg-elevated", - "padding": [ - 14, - 20 - ], - "alignItems": "center", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "children": [ - { - "type": "text", - "id": "ALR3C1", - "width": 160, - "fill": "$text-secondary", - "content": "11/02/2026 09:15:30", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "frame", - "id": "ALR3C2", - "width": 160, - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ALR3Av", - "width": 28, - "height": 28, - "fill": "#22C55E", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ALR3AvT", - "fill": "#FFFFFF", - "content": "MT", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "ALR3Name", - "fill": "$text-primary", - "content": "Minh Tuấn", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "ALR3C3", - "width": "fill_container", - "fill": "#EF4444", - "content": "Void đơn hàng #1234", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "text", - "id": "ALR3C4", - "width": 140, - "fill": "$text-tertiary", - "content": "192.168.1.102", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "frame", - "id": "ALR3Badge", - "width": 100, - "children": [ - { - "type": "frame", - "id": "ALR3BadgeF", - "fill": "#EF444420", - "cornerRadius": 6, - "padding": [ - 4, - 8 - ], - "children": [ - { - "type": "text", - "id": "ALR3BadgeT", - "fill": "#EF4444", - "content": "Đơn hàng", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ALRow4", - "width": "fill_container", - "fill": "$bg-elevated", - "padding": [ - 14, - 20 - ], - "alignItems": "center", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "children": [ - { - "type": "text", - "id": "ALR4C1", - "width": 160, - "fill": "$text-secondary", - "content": "11/02/2026 08:55:18", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "frame", - "id": "ALR4C2", - "width": 160, - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ALR4Av", - "width": 28, - "height": 28, - "fill": "#3B82F6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ALR4AvT", - "fill": "#FFFFFF", - "content": "VH", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "ALR4Name", - "fill": "$text-primary", - "content": "Velik Ho", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "ALR4C3", - "width": "fill_container", - "fill": "$text-primary", - "content": "Thêm nhân viên \"Trần Văn B\"", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "ALR4C4", - "width": 140, - "fill": "$text-tertiary", - "content": "192.168.1.100", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "frame", - "id": "ALR4Badge", - "width": 100, - "children": [ - { - "type": "frame", - "id": "ALR4BadgeF", - "fill": "#22C55E20", - "cornerRadius": 6, - "padding": [ - 4, - 8 - ], - "children": [ - { - "type": "text", - "id": "ALR4BadgeT", - "fill": "#22C55E", - "content": "Nhân sự", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ALRow5", - "width": "fill_container", - "fill": "$bg-elevated", - "padding": [ - 14, - 20 - ], - "alignItems": "center", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "children": [ - { - "type": "text", - "id": "ALR5C1", - "width": 160, - "fill": "$text-secondary", - "content": "11/02/2026 08:40:22", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "frame", - "id": "ALR5C2", - "width": 160, - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ALR5Av", - "width": 28, - "height": 28, - "fill": "#EC4899", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ALR5AvT", - "fill": "#FFFFFF", - "content": "NA", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "ALR5Name", - "fill": "$text-primary", - "content": "Ngọc Anh", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "ALR5C3", - "width": "fill_container", - "fill": "$text-primary", - "content": "Export báo cáo doanh thu T1/2026", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "ALR5C4", - "width": 140, - "fill": "$text-tertiary", - "content": "192.168.1.101", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "frame", - "id": "ALR5Badge", - "width": 100, - "children": [ - { - "type": "frame", - "id": "ALR5BadgeF", - "fill": "#8B5CF620", - "cornerRadius": 6, - "padding": [ - 4, - 8 - ], - "children": [ - { - "type": "text", - "id": "ALR5BadgeT", - "fill": "#8B5CF6", - "content": "Báo cáo", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ALRow6", - "width": "fill_container", - "fill": "$bg-elevated", - "padding": [ - 14, - 20 - ], - "alignItems": "center", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "children": [ - { - "type": "text", - "id": "ALR6C1", - "width": 160, - "fill": "$text-secondary", - "content": "11/02/2026 08:20:10", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "frame", - "id": "ALR6C2", - "width": 160, - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ALR6Av", - "width": 28, - "height": 28, - "fill": "#22C55E", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ALR6AvT", - "fill": "#FFFFFF", - "content": "MT", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "ALR6Name", - "fill": "$text-primary", - "content": "Minh Tuấn", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "ALR6C3", - "width": "fill_container", - "fill": "$text-primary", - "content": "Cập nhật menu danh mục \"Đồ uống\"", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "ALR6C4", - "width": 140, - "fill": "$text-tertiary", - "content": "192.168.1.102", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "frame", - "id": "ALR6Badge", - "width": 100, - "children": [ - { - "type": "frame", - "id": "ALR6BadgeF", - "fill": "#F59E0B20", - "cornerRadius": 6, - "padding": [ - 4, - 8 - ], - "children": [ - { - "type": "text", - "id": "ALR6BadgeT", - "fill": "#F59E0B", - "content": "Sản phẩm", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ALRow7", - "width": "fill_container", - "fill": "$bg-elevated", - "padding": [ - 14, - 20 - ], - "alignItems": "center", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "children": [ - { - "type": "text", - "id": "ALR7C1", - "width": 160, - "fill": "$text-secondary", - "content": "11/02/2026 08:05:33", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "frame", - "id": "ALR7C2", - "width": 160, - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ALR7Av", - "width": 28, - "height": 28, - "fill": "#3B82F6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ALR7AvT", - "fill": "#FFFFFF", - "content": "VH", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "ALR7Name", - "fill": "$text-primary", - "content": "Velik Ho", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "ALR7C3", - "width": "fill_container", - "fill": "$text-primary", - "content": "Thay đổi quyền role \"Thu ngân\"", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "ALR7C4", - "width": 140, - "fill": "$text-tertiary", - "content": "192.168.1.100", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "frame", - "id": "ALR7Badge", - "width": 100, - "children": [ - { - "type": "frame", - "id": "ALR7BadgeF", - "fill": "#FF5C0020", - "cornerRadius": 6, - "padding": [ - 4, - 8 - ], - "children": [ - { - "type": "text", - "id": "ALR7BadgeT", - "fill": "$orange-primary", - "content": "Phân quyền", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ALRow8", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": [ - 0, - 0, - 10, - 10 - ], - "padding": [ - 14, - 20 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ALR8C1", - "width": 160, - "fill": "$text-secondary", - "content": "11/02/2026 07:50:45", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "frame", - "id": "ALR8C2", - "width": 160, - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ALR8Av", - "width": 28, - "height": 28, - "fill": "#EC4899", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ALR8AvT", - "fill": "#FFFFFF", - "content": "NA", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "ALR8Name", - "fill": "$text-primary", - "content": "Ngọc Anh", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "ALR8C3", - "width": "fill_container", - "fill": "$text-primary", - "content": "Đăng nhập hệ thống", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "ALR8C4", - "width": 140, - "fill": "$text-tertiary", - "content": "192.168.1.101", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "frame", - "id": "ALR8Badge", - "width": 100, - "children": [ - { - "type": "frame", - "id": "ALR8BadgeF", - "fill": "#3B82F620", - "cornerRadius": 6, - "padding": [ - 4, - 8 - ], - "children": [ - { - "type": "text", - "id": "ALR8BadgeT", - "fill": "#3B82F6", - "content": "Xác thực", - "fontFamily": "Roboto", - "fontSize": 11, - "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/admin/customer-database.pen b/pencil-design/src/pages/tPOS/admin/customer-database.pen deleted file mode 100644 index fab746d6..00000000 --- a/pencil-design/src/pages/tPOS/admin/customer-database.pen +++ /dev/null @@ -1,1738 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "CustomerDatabase", - "name": "Admin/CustomerDatabase", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "$bg-page", - "clip": true, - "children": [ - { - "type": "frame", - "id": "CDSidebar", - "width": 260, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "right" - ] - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "CDSidebarLogo", - "width": "fill_container", - "padding": [ - 24, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CDLogoIcon", - "width": 40, - "height": 40, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "CDLogoT", - "fill": "#FFFFFF", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "800" - } - ] - }, - { - "type": "frame", - "id": "CDLogoTG", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "CDLogoN", - "fill": "$text-primary", - "content": "GoodGo Admin", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "text", - "id": "CDLogoS", - "fill": "$text-tertiary", - "content": "Management Console", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "CDSidebarNav", - "width": "fill_container", - "height": "fill_container", - "padding": [ - 16, - 12 - ], - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "CDNavL1", - "fill": "$text-tertiary", - "content": "TỔNG QUAN", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 0, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "CDNavDash", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CDNavDashI", - "width": 20, - "height": 20, - "iconFontName": "layout-dashboard", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "CDNavDashT", - "fill": "$text-secondary", - "content": "Dashboard", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "CDNavL2", - "fill": "$text-tertiary", - "content": "CỬA HÀNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "CDNavStores", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "CDNavStoresLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CDNavStoresI", - "width": 20, - "height": 20, - "iconFontName": "store", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "CDNavStoresT", - "fill": "$text-secondary", - "content": "Quản lý cửa hàng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "CDNavStoresBdg", - "width": 22, - "height": 22, - "fill": "$bg-interactive", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "CDNavStoresBdgT", - "fill": "$text-tertiary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "CDNavProd", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CDNavProdI", - "width": 18, - "height": 18, - "iconFontName": "package", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "CDNavProdT", - "fill": "$text-tertiary", - "content": "Sản phẩm & Menu", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "CDNavStaff", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CDNavStaffI", - "width": 18, - "height": 18, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "CDNavStaffT", - "fill": "$text-tertiary", - "content": "Nhân sự", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "CDNavInv", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CDNavInvI", - "width": 18, - "height": 18, - "iconFontName": "warehouse", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "CDNavInvT", - "fill": "$text-tertiary", - "content": "Kho hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "CDNavDev", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CDNavDevI", - "width": 18, - "height": 18, - "iconFontName": "monitor", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "CDNavDevT", - "fill": "$text-tertiary", - "content": "Thiết bị", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "CDNavL3", - "fill": "$text-tertiary", - "content": "KINH DOANH", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "CDNavCust", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CDNavCustI", - "width": 20, - "height": 20, - "iconFontName": "heart", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "CDNavCustT", - "fill": "#FFFFFF", - "content": "Khách hàng & Loyalty", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ], - "fill": "$orange-primary" - }, - { - "type": "frame", - "id": "CDNavRpt", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CDNavRptI", - "width": 20, - "height": 20, - "iconFontName": "bar-chart-2", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "CDNavRptT", - "fill": "$text-secondary", - "content": "Báo cáo & Phân tích", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "CDNavFin", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CDNavFinI", - "width": 20, - "height": 20, - "iconFontName": "wallet", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "CDNavFinT", - "fill": "$text-secondary", - "content": "Tài chính", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "CDNavL4", - "fill": "$text-tertiary", - "content": "HỆ THỐNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "CDNavRoles", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CDNavRolesI", - "width": 20, - "height": 20, - "iconFontName": "shield", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "CDNavRolesT", - "fill": "$text-secondary", - "content": "Phân quyền", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "CDNavSet", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CDNavSetI", - "width": 20, - "height": 20, - "iconFontName": "settings", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "CDNavSetT", - "fill": "$text-secondary", - "content": "Cài đặt", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "CDSidebarUser", - "width": "fill_container", - "padding": [ - 16, - 16 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CDUserAv", - "width": 36, - "height": 36, - "fill": "#3B82F6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "CDUserAvT", - "fill": "#FFFFFF", - "content": "VH", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "CDUserInfo", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "CDUserN", - "fill": "$text-primary", - "content": "Velik Ho", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "CDUserR", - "fill": "$text-tertiary", - "content": "Owner", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "CDMain", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "CDHeader", - "width": "fill_container", - "padding": [ - 16, - 32 - ], - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CDHeaderLeft", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "frame", - "id": "CDBreadcrumb", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "CDBread1", - "fill": "$text-tertiary", - "content": "Kinh doanh", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "CDBreadSep", - "fill": "$text-tertiary", - "content": "/", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "CDBread2", - "fill": "$orange-primary", - "content": "Khách hàng", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "CDHeaderTitle", - "fill": "$text-primary", - "content": "Khách hàng", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "CDHeaderRight", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CDSearchBox", - "width": 240, - "height": 40, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CDSearchI", - "width": 18, - "height": 18, - "iconFontName": "search", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "CDSearchP", - "fill": "$text-tertiary", - "content": "Tìm khách hàng...", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "id": "CDAddBtn", - "fill": "$orange-primary", - "cornerRadius": 10, - "padding": [ - 10, - 16 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CDAddI", - "width": 18, - "height": 18, - "iconFontName": "plus", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "CDAddT", - "fill": "#FFFFFF", - "content": "Thêm KH", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "CDContent", - "width": "fill_container", - "height": "fill_container", - "padding": 24, - "layout": "vertical", - "gap": 20, - "clip": true, - "children": [ - { - "type": "frame", - "id": "CDTabs", - "width": "fill_container", - "gap": 0, - "children": [ - { - "type": "frame", - "id": "CDTab1", - "padding": [ - 10, - 20 - ], - "stroke": { - "thickness": 2, - "fill": "$orange-primary", - "sides": [ - "bottom" - ] - }, - "children": [ - { - "type": "text", - "id": "CDTab1T", - "fill": "$orange-primary", - "content": "Tất cả (156)", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "CDTab2", - "padding": [ - 10, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "children": [ - { - "type": "text", - "id": "CDTab2T", - "fill": "$text-tertiary", - "content": "VIP (23)", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "CDTab3", - "padding": [ - 10, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "children": [ - { - "type": "text", - "id": "CDTab3T", - "fill": "$text-tertiary", - "content": "Thường xuyên (45)", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "CDTab4", - "padding": [ - 10, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "children": [ - { - "type": "text", - "id": "CDTab4T", - "fill": "$text-tertiary", - "content": "Mới (88)", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "CDTable", - "width": "fill_container", - "height": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "CDTableHead", - "width": "fill_container", - "height": 48, - "padding": [ - 0, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "CDTh1", - "width": 200, - "fill": "$text-tertiary", - "content": "Khách hàng", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "CDTh2", - "width": 130, - "fill": "$text-tertiary", - "content": "Số điện thoại", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "CDTh3", - "width": 100, - "fill": "$text-tertiary", - "content": "Nhóm", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "CDTh4", - "width": 130, - "fill": "$text-tertiary", - "content": "Tổng chi tiêu", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "CDTh5", - "width": 80, - "fill": "$text-tertiary", - "content": "Đơn hàng", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "CDTh6", - "width": 80, - "fill": "$text-tertiary", - "content": "Điểm", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "CDTh7", - "width": 110, - "fill": "$text-tertiary", - "content": "Lần cuối", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "CDRow1", - "width": "fill_container", - "height": 60, - "padding": [ - 0, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CDR1Name", - "width": 200, - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CDR1Av", - "width": 36, - "height": 36, - "fill": "#7C3AED", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "CDR1AvT", - "fill": "#FFFFFF", - "content": "NV", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "CDR1NameT", - "fill": "$text-primary", - "content": "Nguyễn Văn An", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "CDR1Phone", - "width": 130, - "fill": "$text-secondary", - "content": "0901 234 567", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "frame", - "id": "CDR1Group", - "width": 100, - "children": [ - { - "type": "frame", - "id": "CDR1GroupF", - "fill": "#F59E0B20", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "CDR1GroupT", - "fill": "#F59E0B", - "content": "VIP", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "text", - "id": "CDR1Spent", - "width": 130, - "fill": "$text-primary", - "content": "15,200,000₫", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "CDR1Orders", - "width": 80, - "fill": "$text-secondary", - "content": "142", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "CDR1Points", - "width": 80, - "fill": "$orange-primary", - "content": "1,520", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "CDR1Last", - "width": 110, - "fill": "$text-secondary", - "content": "Hôm nay", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "id": "CDRow2", - "width": "fill_container", - "height": 60, - "padding": [ - 0, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CDR2Name", - "width": 200, - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CDR2Av", - "width": 36, - "height": 36, - "fill": "#EC4899", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "CDR2AvT", - "fill": "#FFFFFF", - "content": "TT", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "CDR2NameT", - "fill": "$text-primary", - "content": "Trần Thị Bình", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "CDR2Phone", - "width": 130, - "fill": "$text-secondary", - "content": "0912 345 678", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "frame", - "id": "CDR2Group", - "width": 100, - "children": [ - { - "type": "frame", - "id": "CDR2GroupF", - "fill": "#F59E0B20", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "CDR2GroupT", - "fill": "#F59E0B", - "content": "VIP", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "text", - "id": "CDR2Spent", - "width": 130, - "fill": "$text-primary", - "content": "12,800,000₫", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "CDR2Orders", - "width": 80, - "fill": "$text-secondary", - "content": "98", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "CDR2Points", - "width": 80, - "fill": "$orange-primary", - "content": "1,280", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "CDR2Last", - "width": 110, - "fill": "$text-secondary", - "content": "Hôm qua", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "id": "CDRow3", - "width": "fill_container", - "height": 60, - "padding": [ - 0, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CDR3Name", - "width": 200, - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CDR3Av", - "width": 36, - "height": 36, - "fill": "#3B82F6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "CDR3AvT", - "fill": "#FFFFFF", - "content": "LH", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "CDR3NameT", - "fill": "$text-primary", - "content": "Lê Hoàng Cường", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "CDR3Phone", - "width": 130, - "fill": "$text-secondary", - "content": "0923 456 789", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "frame", - "id": "CDR3Group", - "width": 100, - "children": [ - { - "type": "frame", - "id": "CDR3GroupF", - "fill": "#3B82F620", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "CDR3GroupT", - "fill": "#3B82F6", - "content": "Thường xuyên", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "text", - "id": "CDR3Spent", - "width": 130, - "fill": "$text-primary", - "content": "4,500,000₫", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "CDR3Orders", - "width": 80, - "fill": "$text-secondary", - "content": "52", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "CDR3Points", - "width": 80, - "fill": "$orange-primary", - "content": "450", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "CDR3Last", - "width": 110, - "fill": "$text-secondary", - "content": "20/01/2024", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "id": "CDRow4", - "width": "fill_container", - "height": 60, - "padding": [ - 0, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CDR4Name", - "width": 200, - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CDR4Av", - "width": 36, - "height": 36, - "fill": "#22C55E", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "CDR4AvT", - "fill": "#FFFFFF", - "content": "PD", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "CDR4NameT", - "fill": "$text-primary", - "content": "Phạm Đình Dũng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "CDR4Phone", - "width": 130, - "fill": "$text-secondary", - "content": "0934 567 890", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "frame", - "id": "CDR4Group", - "width": 100, - "children": [ - { - "type": "frame", - "id": "CDR4GroupF", - "fill": "#3B82F620", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "CDR4GroupT", - "fill": "#3B82F6", - "content": "Thường xuyên", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "text", - "id": "CDR4Spent", - "width": 130, - "fill": "$text-primary", - "content": "3,200,000₫", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "CDR4Orders", - "width": 80, - "fill": "$text-secondary", - "content": "38", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "CDR4Points", - "width": 80, - "fill": "$orange-primary", - "content": "320", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "CDR4Last", - "width": 110, - "fill": "$text-secondary", - "content": "18/01/2024", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "id": "CDRow5", - "width": "fill_container", - "height": 60, - "padding": [ - 0, - 20 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CDR5Name", - "width": 200, - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CDR5Av", - "width": 36, - "height": 36, - "fill": "#F59E0B", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "CDR5AvT", - "fill": "#FFFFFF", - "content": "HM", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "CDR5NameT", - "fill": "$text-primary", - "content": "Hoàng Mai Lan", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "CDR5Phone", - "width": 130, - "fill": "$text-secondary", - "content": "0945 678 901", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "frame", - "id": "CDR5Group", - "width": 100, - "children": [ - { - "type": "frame", - "id": "CDR5GroupF", - "fill": "#22C55E20", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "CDR5GroupT", - "fill": "#22C55E", - "content": "Mới", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "text", - "id": "CDR5Spent", - "width": 130, - "fill": "$text-primary", - "content": "185,000₫", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "CDR5Orders", - "width": 80, - "fill": "$text-secondary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "CDR5Points", - "width": 80, - "fill": "$orange-primary", - "content": "18", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "CDR5Last", - "width": 110, - "fill": "$text-secondary", - "content": "22/01/2024", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "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/admin/customer-feedback.pen b/pencil-design/src/pages/tPOS/admin/customer-feedback.pen deleted file mode 100644 index c56b49bd..00000000 --- a/pencil-design/src/pages/tPOS/admin/customer-feedback.pen +++ /dev/null @@ -1,1814 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "CustomerFeedback", - "name": "Admin/CustomerFeedback", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "$bg-page", - "clip": true, - "children": [ - { - "type": "frame", - "id": "CFSidebar", - "width": 260, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "right" - ] - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "CFSidebarLogo", - "width": "fill_container", - "padding": [ - 24, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CFLogoIcon", - "width": 40, - "height": 40, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "CFLogoT", - "fill": "#FFFFFF", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "800" - } - ] - }, - { - "type": "frame", - "id": "CFLogoTG", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "CFLogoN", - "fill": "$text-primary", - "content": "GoodGo Admin", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "text", - "id": "CFLogoS", - "fill": "$text-tertiary", - "content": "Management Console", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "CFSidebarNav", - "width": "fill_container", - "height": "fill_container", - "padding": [ - 16, - 12 - ], - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "CFNavL1", - "fill": "$text-tertiary", - "content": "TỔNG QUAN", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 0, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "CFNavDash", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CFNavDashI", - "width": 20, - "height": 20, - "iconFontName": "layout-dashboard", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "CFNavDashT", - "fill": "$text-secondary", - "content": "Dashboard", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "CFNavL2", - "fill": "$text-tertiary", - "content": "CỬA HÀNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "CFNavStores", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "CFNavStoresLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CFNavStoresI", - "width": 20, - "height": 20, - "iconFontName": "store", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "CFNavStoresT", - "fill": "$text-secondary", - "content": "Quản lý cửa hàng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "CFNavStoresBdg", - "width": 22, - "height": 22, - "fill": "$bg-interactive", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "CFNavStoresBdgT", - "fill": "$text-tertiary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "CFNavProd", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CFNavProdI", - "width": 18, - "height": 18, - "iconFontName": "package", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "CFNavProdT", - "fill": "$text-tertiary", - "content": "Sản phẩm & Menu", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "CFNavStaff", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CFNavStaffI", - "width": 18, - "height": 18, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "CFNavStaffT", - "fill": "$text-tertiary", - "content": "Nhân sự", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "CFNavInv", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CFNavInvI", - "width": 18, - "height": 18, - "iconFontName": "warehouse", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "CFNavInvT", - "fill": "$text-tertiary", - "content": "Kho hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "CFNavDev", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CFNavDevI", - "width": 18, - "height": 18, - "iconFontName": "monitor", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "CFNavDevT", - "fill": "$text-tertiary", - "content": "Thiết bị", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "CFNavL3", - "fill": "$text-tertiary", - "content": "KINH DOANH", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "CFNavCust", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CFNavCustI", - "width": 20, - "height": 20, - "iconFontName": "heart", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "CFNavCustT", - "fill": "#FFFFFF", - "content": "Khách hàng & Loyalty", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ], - "fill": "$orange-primary" - }, - { - "type": "frame", - "id": "CFNavRpt", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CFNavRptI", - "width": 20, - "height": 20, - "iconFontName": "bar-chart-2", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "CFNavRptT", - "fill": "$text-secondary", - "content": "Báo cáo & Phân tích", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "CFNavFin", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CFNavFinI", - "width": 20, - "height": 20, - "iconFontName": "wallet", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "CFNavFinT", - "fill": "$text-secondary", - "content": "Tài chính", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "CFNavL4", - "fill": "$text-tertiary", - "content": "HỆ THỐNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "CFNavRoles", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CFNavRolesI", - "width": 20, - "height": 20, - "iconFontName": "shield", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "CFNavRolesT", - "fill": "$text-secondary", - "content": "Phân quyền", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "CFNavSet", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CFNavSetI", - "width": 20, - "height": 20, - "iconFontName": "settings", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "CFNavSetT", - "fill": "$text-secondary", - "content": "Cài đặt", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "CFSidebarUser", - "width": "fill_container", - "padding": [ - 16, - 16 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CFUserAv", - "width": 36, - "height": 36, - "fill": "#3B82F6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "CFUserAvT", - "fill": "#FFFFFF", - "content": "VH", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "CFUserInfo", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "CFUserN", - "fill": "$text-primary", - "content": "Velik Ho", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "CFUserR", - "fill": "$text-tertiary", - "content": "Owner", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "CFMain", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "CFHeader", - "width": "fill_container", - "padding": [ - 16, - 32 - ], - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CFHeaderLeft", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "CFHeaderTitle", - "fill": "$text-primary", - "content": "Đánh giá khách hàng", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "700" - }, - { - "type": "text", - "id": "CFHeaderSub", - "fill": "$text-tertiary", - "content": "Theo dõi và quản lý phản hồi từ khách hàng", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "id": "CFHeaderRight", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CFFilterBtn", - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 10, - 16 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CFFilterI", - "width": 18, - "height": 18, - "iconFontName": "filter", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "CFFilterT", - "fill": "$text-secondary", - "content": "Lọc đánh giá", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "CFContent", - "width": "fill_container", - "height": "fill_container", - "padding": 28, - "layout": "vertical", - "gap": 20, - "clip": true, - "children": [ - { - "type": "frame", - "id": "CFSummaryRow", - "width": "fill_container", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "CFAvgCard", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 24, - "gap": 20, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CFAvgLeft", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "CFAvgLabel", - "fill": "$text-tertiary", - "content": "Đánh giá trung bình", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "frame", - "id": "CFAvgVal", - "gap": 8, - "alignItems": "baseline", - "children": [ - { - "type": "text", - "id": "CFAvgNum", - "fill": "$text-primary", - "content": "4.2", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "700" - }, - { - "type": "text", - "id": "CFAvgOf", - "fill": "$text-tertiary", - "content": "/ 5", - "fontFamily": "Roboto", - "fontSize": 16 - } - ] - }, - { - "type": "frame", - "id": "CFStarsRow", - "gap": 4, - "children": [ - { - "type": "icon_font", - "id": "CFStar1", - "width": 20, - "height": 20, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - }, - { - "type": "icon_font", - "id": "CFStar2", - "width": 20, - "height": 20, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - }, - { - "type": "icon_font", - "id": "CFStar3", - "width": 20, - "height": 20, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - }, - { - "type": "icon_font", - "id": "CFStar4", - "width": 20, - "height": 20, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - }, - { - "type": "icon_font", - "id": "CFStar5", - "width": 20, - "height": 20, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "CFAvgRight", - "layout": "vertical", - "gap": 4, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "CFTotalNum", - "fill": "$text-primary", - "content": "234", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "700" - }, - { - "type": "text", - "id": "CFTotalLabel", - "fill": "$text-tertiary", - "content": "tổng đánh giá", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - }, - { - "type": "frame", - "id": "CFDistCard", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 24, - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "CFDistTitle", - "fill": "$text-primary", - "content": "Phân bố đánh giá", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "CFBar5", - "width": "fill_container", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "CFBar5L", - "fill": "$text-secondary", - "content": "5 ★", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500", - "width": 32 - }, - { - "type": "frame", - "id": "CFBar5BG", - "width": "fill_container", - "height": 12, - "fill": "$bg-interactive", - "cornerRadius": 6, - "children": [ - { - "type": "frame", - "id": "CFBar5Fill", - "width": "45%", - "height": "fill_container", - "fill": "#22C55E", - "cornerRadius": 6 - } - ] - }, - { - "type": "text", - "id": "CFBar5V", - "fill": "$text-tertiary", - "content": "45%", - "fontFamily": "Roboto", - "fontSize": 12, - "width": 36 - } - ] - }, - { - "type": "frame", - "id": "CFBar4", - "width": "fill_container", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "CFBar4L", - "fill": "$text-secondary", - "content": "4 ★", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500", - "width": 32 - }, - { - "type": "frame", - "id": "CFBar4BG", - "width": "fill_container", - "height": 12, - "fill": "$bg-interactive", - "cornerRadius": 6, - "children": [ - { - "type": "frame", - "id": "CFBar4Fill", - "width": "30%", - "height": "fill_container", - "fill": "#3B82F6", - "cornerRadius": 6 - } - ] - }, - { - "type": "text", - "id": "CFBar4V", - "fill": "$text-tertiary", - "content": "30%", - "fontFamily": "Roboto", - "fontSize": 12, - "width": 36 - } - ] - }, - { - "type": "frame", - "id": "CFBar3", - "width": "fill_container", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "CFBar3L", - "fill": "$text-secondary", - "content": "3 ★", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500", - "width": 32 - }, - { - "type": "frame", - "id": "CFBar3BG", - "width": "fill_container", - "height": 12, - "fill": "$bg-interactive", - "cornerRadius": 6, - "children": [ - { - "type": "frame", - "id": "CFBar3Fill", - "width": "15%", - "height": "fill_container", - "fill": "#F59E0B", - "cornerRadius": 6 - } - ] - }, - { - "type": "text", - "id": "CFBar3V", - "fill": "$text-tertiary", - "content": "15%", - "fontFamily": "Roboto", - "fontSize": 12, - "width": 36 - } - ] - }, - { - "type": "frame", - "id": "CFBar2", - "width": "fill_container", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "CFBar2L", - "fill": "$text-secondary", - "content": "2 ★", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500", - "width": 32 - }, - { - "type": "frame", - "id": "CFBar2BG", - "width": "fill_container", - "height": 12, - "fill": "$bg-interactive", - "cornerRadius": 6, - "children": [ - { - "type": "frame", - "id": "CFBar2Fill", - "width": "7%", - "height": "fill_container", - "fill": "$orange-primary", - "cornerRadius": 6 - } - ] - }, - { - "type": "text", - "id": "CFBar2V", - "fill": "$text-tertiary", - "content": "7%", - "fontFamily": "Roboto", - "fontSize": 12, - "width": 36 - } - ] - }, - { - "type": "frame", - "id": "CFBar1", - "width": "fill_container", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "CFBar1L", - "fill": "$text-secondary", - "content": "1 ★", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500", - "width": 32 - }, - { - "type": "frame", - "id": "CFBar1BG", - "width": "fill_container", - "height": 12, - "fill": "$bg-interactive", - "cornerRadius": 6, - "children": [ - { - "type": "frame", - "id": "CFBar1Fill", - "width": "3%", - "height": "fill_container", - "fill": "#EF4444", - "cornerRadius": 6 - } - ] - }, - { - "type": "text", - "id": "CFBar1V", - "fill": "$text-tertiary", - "content": "3%", - "fontFamily": "Roboto", - "fontSize": 12, - "width": 36 - } - ] - } - ] - } - ] - }, - { - "type": "text", - "id": "CFRecentTitle", - "fill": "$text-primary", - "content": "Đánh giá gần đây", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "CFReview1", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 20, - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "CFRev1Top", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CFRev1User", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CFRev1Av", - "width": 36, - "height": 36, - "fill": "#22C55E", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "CFRev1AvT", - "fill": "#FFFFFF", - "content": "NT", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "CFRev1Info", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "CFRev1Name", - "fill": "$text-primary", - "content": "Nguyễn Thảo", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "text", - "id": "CFRev1Store", - "fill": "$text-tertiary", - "content": "GoodGo Lê Văn Sỹ", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - }, - { - "type": "frame", - "id": "CFRev1Right", - "layout": "vertical", - "gap": 4, - "alignItems": "flex_end", - "children": [ - { - "type": "frame", - "id": "CFRev1Stars", - "gap": 3, - "children": [ - { - "type": "icon_font", - "id": "CFR1S1", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - }, - { - "type": "icon_font", - "id": "CFR1S2", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - }, - { - "type": "icon_font", - "id": "CFR1S3", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - }, - { - "type": "icon_font", - "id": "CFR1S4", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - }, - { - "type": "icon_font", - "id": "CFR1S5", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - } - ] - }, - { - "type": "text", - "id": "CFRev1Date", - "fill": "$text-tertiary", - "content": "10/02/2026", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "text", - "id": "CFRev1Text", - "fill": "$text-secondary", - "content": "Đồ ăn rất ngon, phục vụ nhanh. Nhân viên thân thiện và nhiệt tình. Sẽ quay lại lần sau!", - "fontFamily": "Roboto", - "fontSize": 13, - "lineHeight": 1.5 - } - ] - }, - { - "type": "frame", - "id": "CFReview2", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 20, - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "CFRev2Top", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CFRev2User", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CFRev2Av", - "width": 36, - "height": 36, - "fill": "#3B82F6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "CFRev2AvT", - "fill": "#FFFFFF", - "content": "TM", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "CFRev2Info", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "CFRev2Name", - "fill": "$text-primary", - "content": "Trần Minh", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "text", - "id": "CFRev2Store", - "fill": "$text-tertiary", - "content": "GoodGo Nguyễn Huệ", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - }, - { - "type": "frame", - "id": "CFRev2Right", - "layout": "vertical", - "gap": 4, - "alignItems": "flex_end", - "children": [ - { - "type": "frame", - "id": "CFRev2Stars", - "gap": 3, - "children": [ - { - "type": "icon_font", - "id": "CFR2S1", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - }, - { - "type": "icon_font", - "id": "CFR2S2", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - }, - { - "type": "icon_font", - "id": "CFR2S3", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - }, - { - "type": "icon_font", - "id": "CFR2S4", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - }, - { - "type": "icon_font", - "id": "CFR2S5", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - }, - { - "type": "text", - "id": "CFRev2Date", - "fill": "$text-tertiary", - "content": "09/02/2026", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "text", - "id": "CFRev2Text", - "fill": "$text-secondary", - "content": "Không gian đẹp, sạch sẽ. Món ăn hơi chậm nhưng chất lượng tốt. Giá cả hợp lý.", - "fontFamily": "Roboto", - "fontSize": 13, - "lineHeight": 1.5 - } - ] - }, - { - "type": "frame", - "id": "CFReview3", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 20, - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "CFRev3Top", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CFRev3User", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CFRev3Av", - "width": 36, - "height": 36, - "fill": "#F59E0B", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "CFRev3AvT", - "fill": "#FFFFFF", - "content": "LH", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "CFRev3Info", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "CFRev3Name", - "fill": "$text-primary", - "content": "Lê Hương", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "text", - "id": "CFRev3Store", - "fill": "$text-tertiary", - "content": "GoodGo Phạm Ngọc Thạch", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - }, - { - "type": "frame", - "id": "CFRev3Right", - "layout": "vertical", - "gap": 4, - "alignItems": "flex_end", - "children": [ - { - "type": "frame", - "id": "CFRev3Stars", - "gap": 3, - "children": [ - { - "type": "icon_font", - "id": "CFR3S1", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - }, - { - "type": "icon_font", - "id": "CFR3S2", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - }, - { - "type": "icon_font", - "id": "CFR3S3", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - }, - { - "type": "icon_font", - "id": "CFR3S4", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "icon_font", - "id": "CFR3S5", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - }, - { - "type": "text", - "id": "CFRev3Date", - "fill": "$text-tertiary", - "content": "08/02/2026", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "text", - "id": "CFRev3Text", - "fill": "$text-secondary", - "content": "Trà sữa khá ngon nhưng topping hơi ít. Mong cửa hàng cải thiện thêm.", - "fontFamily": "Roboto", - "fontSize": 13, - "lineHeight": 1.5 - } - ] - }, - { - "type": "frame", - "id": "CFReview4", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 20, - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "CFRev4Top", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CFRev4User", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CFRev4Av", - "width": 36, - "height": 36, - "fill": "#8B5CF6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "CFRev4AvT", - "fill": "#FFFFFF", - "content": "PD", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "CFRev4Info", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "CFRev4Name", - "fill": "$text-primary", - "content": "Phạm Dũng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "text", - "id": "CFRev4Store", - "fill": "$text-tertiary", - "content": "GoodGo Lê Văn Sỹ", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - }, - { - "type": "frame", - "id": "CFRev4Right", - "layout": "vertical", - "gap": 4, - "alignItems": "flex_end", - "children": [ - { - "type": "frame", - "id": "CFRev4Stars", - "gap": 3, - "children": [ - { - "type": "icon_font", - "id": "CFR4S1", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - }, - { - "type": "icon_font", - "id": "CFR4S2", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - }, - { - "type": "icon_font", - "id": "CFR4S3", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "icon_font", - "id": "CFR4S4", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "icon_font", - "id": "CFR4S5", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - }, - { - "type": "text", - "id": "CFRev4Date", - "fill": "$text-tertiary", - "content": "07/02/2026", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "text", - "id": "CFRev4Text", - "fill": "$text-secondary", - "content": "Phục vụ chậm, phải đợi 30 phút. Nhân viên không xin lỗi. Cần cải thiện dịch vụ.", - "fontFamily": "Roboto", - "fontSize": 13, - "lineHeight": 1.5 - } - ] - } - ] - } - ] - } - ] - } - ], - "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/admin/device-management.pen b/pencil-design/src/pages/tPOS/admin/device-management.pen deleted file mode 100644 index a865d103..00000000 --- a/pencil-design/src/pages/tPOS/admin/device-management.pen +++ /dev/null @@ -1,1690 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "DeviceManagement", - "name": "Admin/DeviceManagement", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "$bg-page", - "clip": true, - "children": [ - { - "type": "frame", - "id": "DMSidebar", - "width": 260, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "right" - ] - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "DMSidebarLogo", - "width": "fill_container", - "padding": [ - 24, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "DMLogoIcon", - "width": 40, - "height": 40, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "DMLogoT", - "fill": "#FFFFFF", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "800" - } - ] - }, - { - "type": "frame", - "id": "DMLogoTG", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "DMLogoN", - "fill": "$text-primary", - "content": "GoodGo Admin", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "text", - "id": "DMLogoS", - "fill": "$text-tertiary", - "content": "Management Console", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "DMSidebarNav", - "width": "fill_container", - "height": "fill_container", - "padding": [ - 16, - 12 - ], - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "DMNavL1", - "fill": "$text-tertiary", - "content": "TỔNG QUAN", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 0, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "DMNavDash", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "DMNavDashI", - "width": 20, - "height": 20, - "iconFontName": "layout-dashboard", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "DMNavDashT", - "fill": "$text-secondary", - "content": "Dashboard", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "DMNavL2", - "fill": "$text-tertiary", - "content": "CỬA HÀNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "DMNavStores", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "DMNavStoresLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "DMNavStoresI", - "width": 20, - "height": 20, - "iconFontName": "store", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "DMNavStoresT", - "fill": "$text-secondary", - "content": "Quản lý cửa hàng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "DMNavStoresBdg", - "width": 22, - "height": 22, - "fill": "$bg-interactive", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "DMNavStoresBdgT", - "fill": "$text-tertiary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "DMNavProd", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "DMNavProdI", - "width": 18, - "height": 18, - "iconFontName": "package", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "DMNavProdT", - "fill": "$text-tertiary", - "content": "Sản phẩm & Menu", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "DMNavStaff", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "DMNavStaffI", - "width": 18, - "height": 18, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "DMNavStaffT", - "fill": "$text-tertiary", - "content": "Nhân sự", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "DMNavInv", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "DMNavInvI", - "width": 18, - "height": 18, - "iconFontName": "warehouse", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "DMNavInvT", - "fill": "$text-tertiary", - "content": "Kho hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "DMNavDev", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "DMNavDevI", - "width": 18, - "height": 18, - "iconFontName": "monitor", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "DMNavDevT", - "fill": "#FFFFFF", - "content": "Thiết bị", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ], - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "DMNavL3", - "fill": "$text-tertiary", - "content": "KINH DOANH", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "DMNavCust", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "DMNavCustI", - "width": 20, - "height": 20, - "iconFontName": "heart", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "DMNavCustT", - "fill": "$text-secondary", - "content": "Khách hàng & Loyalty", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "DMNavRpt", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "DMNavRptI", - "width": 20, - "height": 20, - "iconFontName": "bar-chart-2", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "DMNavRptT", - "fill": "$text-secondary", - "content": "Báo cáo & Phân tích", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "DMNavFin", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "DMNavFinI", - "width": 20, - "height": 20, - "iconFontName": "wallet", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "DMNavFinT", - "fill": "$text-secondary", - "content": "Tài chính", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "DMNavL4", - "fill": "$text-tertiary", - "content": "HỆ THỐNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "DMNavRoles", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "DMNavRolesI", - "width": 20, - "height": 20, - "iconFontName": "shield", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "DMNavRolesT", - "fill": "$text-secondary", - "content": "Phân quyền", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "DMNavSet", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "DMNavSetI", - "width": 20, - "height": 20, - "iconFontName": "settings", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "DMNavSetT", - "fill": "$text-secondary", - "content": "Cài đặt", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "DMSidebarUser", - "width": "fill_container", - "padding": [ - 16, - 16 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "DMUserAv", - "width": 36, - "height": 36, - "fill": "#3B82F6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "DMUserAvT", - "fill": "#FFFFFF", - "content": "VH", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "DMUserInfo", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "DMUserN", - "fill": "$text-primary", - "content": "Velik Ho", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "DMUserR", - "fill": "$text-tertiary", - "content": "Owner", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "DMMain", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "DMHeader", - "width": "fill_container", - "padding": [ - 16, - 32 - ], - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "DMHeaderLeft", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "frame", - "id": "DMBreadcrumb", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "DMBread1", - "fill": "$text-tertiary", - "content": "Hệ thống", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "DMBreadSep", - "fill": "$text-tertiary", - "content": "/", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "DMBread2", - "fill": "$orange-primary", - "content": "Thiết bị", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "DMHeaderTitle", - "fill": "$text-primary", - "content": "Thiết bị", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "DMHeaderRight", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "DMAddBtn", - "fill": "$orange-primary", - "cornerRadius": 10, - "padding": [ - 10, - 20 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "DMAddBtnI", - "width": 18, - "height": 18, - "iconFontName": "plus", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "DMAddBtnT", - "fill": "#FFFFFF", - "content": "Thêm thiết bị", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "DMContent", - "width": "fill_container", - "height": "fill_container", - "padding": 32, - "layout": "vertical", - "gap": 20, - "clip": true, - "children": [ - { - "type": "frame", - "id": "DMStats", - "width": "fill_container", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "DMStat1", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": [ - 20, - 20 - ], - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "DMStat1L", - "fill": "$text-tertiary", - "content": "Tổng thiết bị", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "DMStat1V", - "fill": "$text-primary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "DMStat2", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": [ - 20, - 20 - ], - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "DMStat2L", - "fill": "$text-tertiary", - "content": "Đang hoạt động", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "DMStat2V", - "fill": "#22C55E", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "DMStat3", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": [ - 20, - 20 - ], - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "DMStat3L", - "fill": "$text-tertiary", - "content": "Ngoại tuyến", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "DMStat3V", - "fill": "$text-primary", - "content": "0", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "700" - } - ] - } - ] - }, - { - "type": "frame", - "id": "DMCard1", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 24, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "DMCard1Left", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "DMCard1Icon", - "width": 48, - "height": 48, - "fill": "#FF5C0015", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "DMCard1IconI", - "width": 24, - "height": 24, - "iconFontName": "tablet", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - } - ] - }, - { - "type": "frame", - "id": "DMCard1Info", - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "frame", - "id": "DMCard1NameRow", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "DMCard1Name", - "fill": "$text-primary", - "content": "POS Terminal #1", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "DMCard1Badge", - "fill": "#22C55E20", - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "DMCard1Dot", - "width": 8, - "height": 8, - "fill": "#22C55E", - "cornerRadius": 100 - }, - { - "type": "text", - "id": "DMCard1StatusT", - "fill": "#22C55E", - "content": "Online", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "DMCard1Details", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "DMCard1D1", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "DMCard1D1L", - "fill": "$text-tertiary", - "content": "Loại:", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "DMCard1D1V", - "fill": "$text-secondary", - "content": "iPad Pro 12.9\"", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "DMCard1D2", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "DMCard1D2L", - "fill": "$text-tertiary", - "content": "S/N:", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "DMCard1D2V", - "fill": "$text-secondary", - "content": "IPD-2024-001", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "DMCard1D3", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "DMCard1D3L", - "fill": "$text-tertiary", - "content": "Kết nối:", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "DMCard1D3V", - "fill": "$text-secondary", - "content": "2 máy in", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "DMCard1D4", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "DMCard1D4L", - "fill": "$text-tertiary", - "content": "Cửa hàng:", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "DMCard1D4V", - "fill": "$text-secondary", - "content": "Coffee House Q1", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "DMCard1Actions", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "DMCard1Edit", - "width": 36, - "height": 36, - "fill": "$bg-interactive", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "DMCard1EditI", - "width": 16, - "height": 16, - "iconFontName": "pencil", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - }, - { - "type": "frame", - "id": "DMCard1Del", - "width": 36, - "height": 36, - "fill": "$bg-interactive", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "DMCard1DelI", - "width": 16, - "height": 16, - "iconFontName": "trash-2", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "DMCard2", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 24, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "DMCard2Left", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "DMCard2Icon", - "width": 48, - "height": 48, - "fill": "#3B82F620", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "DMCard2IconI", - "width": 24, - "height": 24, - "iconFontName": "monitor", - "iconFontFamily": "lucide", - "fill": "#3B82F6" - } - ] - }, - { - "type": "frame", - "id": "DMCard2Info", - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "frame", - "id": "DMCard2NameRow", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "DMCard2Name", - "fill": "$text-primary", - "content": "Kitchen Display", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "DMCard2Badge", - "fill": "#22C55E20", - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "DMCard2Dot", - "width": 8, - "height": 8, - "fill": "#22C55E", - "cornerRadius": 100 - }, - { - "type": "text", - "id": "DMCard2StatusT", - "fill": "#22C55E", - "content": "Online", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "DMCard2Details", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "DMCard2D1", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "DMCard2D1L", - "fill": "$text-tertiary", - "content": "Loại:", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "DMCard2D1V", - "fill": "$text-secondary", - "content": "Android Tablet", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "DMCard2D2", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "DMCard2D2L", - "fill": "$text-tertiary", - "content": "S/N:", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "DMCard2D2V", - "fill": "$text-secondary", - "content": "KDS-2024-001", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "DMCard2D3", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "DMCard2D3L", - "fill": "$text-tertiary", - "content": "Lần cuối:", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "DMCard2D3V", - "fill": "$text-secondary", - "content": "Vừa xong", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "DMCard2D4", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "DMCard2D4L", - "fill": "$text-tertiary", - "content": "Cửa hàng:", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "DMCard2D4V", - "fill": "$text-secondary", - "content": "Coffee House Q1", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "DMCard2Actions", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "DMCard2Edit", - "width": 36, - "height": 36, - "fill": "$bg-interactive", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "DMCard2EditI", - "width": 16, - "height": 16, - "iconFontName": "pencil", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - }, - { - "type": "frame", - "id": "DMCard2Del", - "width": 36, - "height": 36, - "fill": "$bg-interactive", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "DMCard2DelI", - "width": 16, - "height": 16, - "iconFontName": "trash-2", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "DMCard3", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 24, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "DMCard3Left", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "DMCard3Icon", - "width": 48, - "height": 48, - "fill": "#F59E0B20", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "DMCard3IconI", - "width": 24, - "height": 24, - "iconFontName": "printer", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - } - ] - }, - { - "type": "frame", - "id": "DMCard3Info", - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "frame", - "id": "DMCard3NameRow", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "DMCard3Name", - "fill": "$text-primary", - "content": "Máy in Receipt", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "DMCard3Badge", - "fill": "#22C55E20", - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "DMCard3Dot", - "width": 8, - "height": 8, - "fill": "#22C55E", - "cornerRadius": 100 - }, - { - "type": "text", - "id": "DMCard3StatusT", - "fill": "#22C55E", - "content": "Online", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "DMCard3Details", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "DMCard3D1", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "DMCard3D1L", - "fill": "$text-tertiary", - "content": "Loại:", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "DMCard3D1V", - "fill": "$text-secondary", - "content": "Star TSP143", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "DMCard3D2", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "DMCard3D2L", - "fill": "$text-tertiary", - "content": "S/N:", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "DMCard3D2V", - "fill": "$text-secondary", - "content": "PRT-2024-001", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "DMCard3D3", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "DMCard3D3L", - "fill": "$text-tertiary", - "content": "Lần cuối:", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "DMCard3D3V", - "fill": "$text-secondary", - "content": "5 phút trước", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "DMCard3D4", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "DMCard3D4L", - "fill": "$text-tertiary", - "content": "Cửa hàng:", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "DMCard3D4V", - "fill": "$text-secondary", - "content": "Coffee House Q1", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "DMCard3Actions", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "DMCard3Edit", - "width": 36, - "height": 36, - "fill": "$bg-interactive", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "DMCard3EditI", - "width": 16, - "height": 16, - "iconFontName": "pencil", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - }, - { - "type": "frame", - "id": "DMCard3Del", - "width": 36, - "height": 36, - "fill": "$bg-interactive", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "DMCard3DelI", - "width": 16, - "height": 16, - "iconFontName": "trash-2", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - } - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "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/admin/expense-management.pen b/pencil-design/src/pages/tPOS/admin/expense-management.pen deleted file mode 100644 index 047275fc..00000000 --- a/pencil-design/src/pages/tPOS/admin/expense-management.pen +++ /dev/null @@ -1,1711 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "ExpenseManagement", - "name": "Admin/ExpenseManagement", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "$bg-page", - "clip": true, - "children": [ - { - "type": "frame", - "id": "EMSidebar", - "width": 260, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "right" - ] - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "EMSidebarLogo", - "width": "fill_container", - "padding": [ - 24, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "EMLogoIcon", - "width": 40, - "height": 40, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "EMLogoT", - "fill": "#FFFFFF", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "800" - } - ] - }, - { - "type": "frame", - "id": "EMLogoTG", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "EMLogoN", - "fill": "$text-primary", - "content": "GoodGo Admin", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "text", - "id": "EMLogoS", - "fill": "$text-tertiary", - "content": "Management Console", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "EMSidebarNav", - "width": "fill_container", - "height": "fill_container", - "padding": [ - 16, - 12 - ], - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "EMNavL1", - "fill": "$text-tertiary", - "content": "TỔNG QUAN", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 0, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "EMNavDash", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "EMNavDashI", - "width": 20, - "height": 20, - "iconFontName": "layout-dashboard", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "EMNavDashT", - "fill": "$text-secondary", - "content": "Dashboard", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "EMNavL2", - "fill": "$text-tertiary", - "content": "CỬA HÀNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "EMNavStores", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "EMNavStoresLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "EMNavStoresI", - "width": 20, - "height": 20, - "iconFontName": "store", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "EMNavStoresT", - "fill": "$text-secondary", - "content": "Quản lý cửa hàng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "EMNavStoresBdg", - "width": 22, - "height": 22, - "fill": "$bg-interactive", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "EMNavStoresBdgT", - "fill": "$text-tertiary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "EMNavProd", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "EMNavProdI", - "width": 18, - "height": 18, - "iconFontName": "package", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "EMNavProdT", - "fill": "$text-tertiary", - "content": "Sản phẩm & Menu", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "EMNavStaff", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "EMNavStaffI", - "width": 18, - "height": 18, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "EMNavStaffT", - "fill": "$text-tertiary", - "content": "Nhân sự", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "EMNavInv", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "EMNavInvI", - "width": 18, - "height": 18, - "iconFontName": "warehouse", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "EMNavInvT", - "fill": "$text-tertiary", - "content": "Kho hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "EMNavDev", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "EMNavDevI", - "width": 18, - "height": 18, - "iconFontName": "monitor", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "EMNavDevT", - "fill": "$text-tertiary", - "content": "Thiết bị", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "EMNavL3", - "fill": "$text-tertiary", - "content": "KINH DOANH", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "EMNavCust", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "EMNavCustI", - "width": 20, - "height": 20, - "iconFontName": "heart", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "EMNavCustT", - "fill": "$text-secondary", - "content": "Khách hàng & Loyalty", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "EMNavRpt", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "EMNavRptI", - "width": 20, - "height": 20, - "iconFontName": "bar-chart-2", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "EMNavRptT", - "fill": "$text-secondary", - "content": "Báo cáo & Phân tích", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "EMNavFin", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "EMNavFinI", - "width": 20, - "height": 20, - "iconFontName": "wallet", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "EMNavFinT", - "fill": "#FFFFFF", - "content": "Tài chính", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ], - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "EMNavL4", - "fill": "$text-tertiary", - "content": "HỆ THỐNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "EMNavRoles", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "EMNavRolesI", - "width": 20, - "height": 20, - "iconFontName": "shield", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "EMNavRolesT", - "fill": "$text-secondary", - "content": "Phân quyền", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "EMNavSet", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "EMNavSetI", - "width": 20, - "height": 20, - "iconFontName": "settings", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "EMNavSetT", - "fill": "$text-secondary", - "content": "Cài đặt", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "EMSidebarUser", - "width": "fill_container", - "padding": [ - 16, - 16 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "EMUserAv", - "width": 36, - "height": 36, - "fill": "#3B82F6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "EMUserAvT", - "fill": "#FFFFFF", - "content": "VH", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "EMUserInfo", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "EMUserN", - "fill": "$text-primary", - "content": "Velik Ho", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "EMUserR", - "fill": "$text-tertiary", - "content": "Owner", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "EMMain", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "EMHeader", - "width": "fill_container", - "padding": [ - 16, - 32 - ], - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "EMHeaderLeft", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "EMHeaderTitle", - "fill": "$text-primary", - "content": "Chi phí", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "700" - }, - { - "type": "text", - "id": "EMHeaderSub", - "fill": "$text-tertiary", - "content": "Quản lý và theo dõi chi phí hoạt động", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "id": "EMHeaderRight", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "EMMonthPicker", - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 10, - 16 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "EMMonthI", - "width": 18, - "height": 18, - "iconFontName": "calendar", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "EMMonthT", - "fill": "$text-secondary", - "content": "Tháng 02/2026", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "icon_font", - "id": "EMMonthChev", - "width": 16, - "height": 16, - "iconFontName": "chevron-down", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - }, - { - "type": "frame", - "id": "EMAddBtn", - "fill": "$orange-primary", - "cornerRadius": 10, - "padding": [ - 10, - 16 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "EMAddI", - "width": 18, - "height": 18, - "iconFontName": "plus", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "EMAddT", - "fill": "#FFFFFF", - "content": "Thêm chi phí", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "EMContent", - "width": "fill_container", - "height": "fill_container", - "padding": 28, - "layout": "vertical", - "gap": 20, - "clip": true, - "children": [ - { - "type": "frame", - "id": "EMCatRow", - "width": "fill_container", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "EMCat1", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 20, - "layout": "vertical", - "gap": 10, - "children": [ - { - "type": "frame", - "id": "EMCat1Top", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "EMCat1N", - "fill": "$text-secondary", - "content": "Nguyên liệu", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "EMCat1P", - "fill": "$orange-primary", - "content": "65%", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "EMCat1Bar", - "width": "fill_container", - "height": 6, - "fill": "$bg-interactive", - "cornerRadius": 3, - "children": [ - { - "type": "frame", - "id": "EMCat1Fill", - "width": "65%", - "height": "fill_container", - "fill": "$orange-primary", - "cornerRadius": 3 - } - ] - } - ] - }, - { - "type": "frame", - "id": "EMCat2", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 20, - "layout": "vertical", - "gap": 10, - "children": [ - { - "type": "frame", - "id": "EMCat2Top", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "EMCat2N", - "fill": "$text-secondary", - "content": "Nhân sự", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "EMCat2P", - "fill": "#3B82F6", - "content": "20%", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "EMCat2Bar", - "width": "fill_container", - "height": 6, - "fill": "$bg-interactive", - "cornerRadius": 3, - "children": [ - { - "type": "frame", - "id": "EMCat2Fill", - "width": "20%", - "height": "fill_container", - "fill": "#3B82F6", - "cornerRadius": 3 - } - ] - } - ] - }, - { - "type": "frame", - "id": "EMCat3", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 20, - "layout": "vertical", - "gap": 10, - "children": [ - { - "type": "frame", - "id": "EMCat3Top", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "EMCat3N", - "fill": "$text-secondary", - "content": "Mặt bằng", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "EMCat3P", - "fill": "#22C55E", - "content": "10%", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "EMCat3Bar", - "width": "fill_container", - "height": 6, - "fill": "$bg-interactive", - "cornerRadius": 3, - "children": [ - { - "type": "frame", - "id": "EMCat3Fill", - "width": "10%", - "height": "fill_container", - "fill": "#22C55E", - "cornerRadius": 3 - } - ] - } - ] - }, - { - "type": "frame", - "id": "EMCat4", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 20, - "layout": "vertical", - "gap": 10, - "children": [ - { - "type": "frame", - "id": "EMCat4Top", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "EMCat4N", - "fill": "$text-secondary", - "content": "Khác", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "EMCat4P", - "fill": "#F59E0B", - "content": "5%", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "EMCat4Bar", - "width": "fill_container", - "height": 6, - "fill": "$bg-interactive", - "cornerRadius": 3, - "children": [ - { - "type": "frame", - "id": "EMCat4Fill", - "width": "5%", - "height": "fill_container", - "fill": "#F59E0B", - "cornerRadius": 3 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "EMTable", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "EMTblHdr", - "width": "fill_container", - "padding": [ - 12, - 24 - ], - "fill": "$bg-interactive", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "EMTblH1", - "fill": "$text-tertiary", - "content": "Ngày", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600", - "width": 80 - }, - { - "type": "text", - "id": "EMTblH2", - "fill": "$text-tertiary", - "content": "Mô tả", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600", - "width": "fill_container" - }, - { - "type": "text", - "id": "EMTblH3", - "fill": "$text-tertiary", - "content": "Danh mục", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600", - "width": 110 - }, - { - "type": "text", - "id": "EMTblH4", - "fill": "$text-tertiary", - "content": "Cửa hàng", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600", - "width": 150 - }, - { - "type": "text", - "id": "EMTblH5", - "fill": "$text-tertiary", - "content": "Số tiền", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600", - "width": 100 - }, - { - "type": "text", - "id": "EMTblH6", - "fill": "$text-tertiary", - "content": "Người tạo", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600", - "width": 100 - } - ] - }, - { - "type": "frame", - "id": "EMRow1", - "width": "fill_container", - "padding": [ - 14, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "EMR1D", - "fill": "$text-secondary", - "content": "11/02", - "fontFamily": "Roboto", - "fontSize": 13, - "width": 80 - }, - { - "type": "text", - "id": "EMR1N", - "fill": "$text-primary", - "content": "Mua thịt bò Úc nhập khẩu", - "fontFamily": "Roboto", - "fontSize": 13, - "width": "fill_container" - }, - { - "type": "frame", - "id": "EMR1Badge", - "width": 110, - "children": [ - { - "type": "frame", - "id": "EMR1BG", - "fill": "#FF5C0020", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "EMR1BT", - "fill": "$orange-primary", - "content": "Nguyên liệu", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "text", - "id": "EMR1S", - "fill": "$text-secondary", - "content": "Nguyễn Huệ", - "fontFamily": "Roboto", - "fontSize": 13, - "width": 150 - }, - { - "type": "text", - "id": "EMR1A", - "fill": "#EF4444", - "content": "-8.5M", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600", - "width": 100 - }, - { - "type": "text", - "id": "EMR1C", - "fill": "$text-secondary", - "content": "Minh Anh", - "fontFamily": "Roboto", - "fontSize": 13, - "width": 100 - } - ] - }, - { - "type": "frame", - "id": "EMRow2", - "width": "fill_container", - "padding": [ - 14, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "EMR2D", - "fill": "$text-secondary", - "content": "10/02", - "fontFamily": "Roboto", - "fontSize": 13, - "width": 80 - }, - { - "type": "text", - "id": "EMR2N", - "fill": "$text-primary", - "content": "Lương tháng 01 nhân viên", - "fontFamily": "Roboto", - "fontSize": 13, - "width": "fill_container" - }, - { - "type": "frame", - "id": "EMR2Badge", - "width": 110, - "children": [ - { - "type": "frame", - "id": "EMR2BG", - "fill": "#3B82F620", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "EMR2BT", - "fill": "#3B82F6", - "content": "Nhân sự", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "text", - "id": "EMR2S", - "fill": "$text-secondary", - "content": "Tất cả", - "fontFamily": "Roboto", - "fontSize": 13, - "width": 150 - }, - { - "type": "text", - "id": "EMR2A", - "fill": "#EF4444", - "content": "-45.0M", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600", - "width": 100 - }, - { - "type": "text", - "id": "EMR2C", - "fill": "$text-secondary", - "content": "Velik Ho", - "fontFamily": "Roboto", - "fontSize": 13, - "width": 100 - } - ] - }, - { - "type": "frame", - "id": "EMRow3", - "width": "fill_container", - "padding": [ - 14, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "EMR3D", - "fill": "$text-secondary", - "content": "09/02", - "fontFamily": "Roboto", - "fontSize": 13, - "width": 80 - }, - { - "type": "text", - "id": "EMR3N", - "fill": "$text-primary", - "content": "Mua rau củ hữu cơ", - "fontFamily": "Roboto", - "fontSize": 13, - "width": "fill_container" - }, - { - "type": "frame", - "id": "EMR3Badge", - "width": 110, - "children": [ - { - "type": "frame", - "id": "EMR3BG", - "fill": "#FF5C0020", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "EMR3BT", - "fill": "$orange-primary", - "content": "Nguyên liệu", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "text", - "id": "EMR3S", - "fill": "$text-secondary", - "content": "Lê Văn Sỹ", - "fontFamily": "Roboto", - "fontSize": 13, - "width": 150 - }, - { - "type": "text", - "id": "EMR3A", - "fill": "#EF4444", - "content": "-3.2M", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600", - "width": 100 - }, - { - "type": "text", - "id": "EMR3C", - "fill": "$text-secondary", - "content": "Thanh Hà", - "fontFamily": "Roboto", - "fontSize": 13, - "width": 100 - } - ] - }, - { - "type": "frame", - "id": "EMRow4", - "width": "fill_container", - "padding": [ - 14, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "EMR4D", - "fill": "$text-secondary", - "content": "08/02", - "fontFamily": "Roboto", - "fontSize": 13, - "width": 80 - }, - { - "type": "text", - "id": "EMR4N", - "fill": "$text-primary", - "content": "Tiền thuê mặt bằng T2", - "fontFamily": "Roboto", - "fontSize": 13, - "width": "fill_container" - }, - { - "type": "frame", - "id": "EMR4Badge", - "width": 110, - "children": [ - { - "type": "frame", - "id": "EMR4BG", - "fill": "#22C55E20", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "EMR4BT", - "fill": "#22C55E", - "content": "Mặt bằng", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "text", - "id": "EMR4S", - "fill": "$text-secondary", - "content": "Nguyễn Huệ", - "fontFamily": "Roboto", - "fontSize": 13, - "width": 150 - }, - { - "type": "text", - "id": "EMR4A", - "fill": "#EF4444", - "content": "-15.0M", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600", - "width": 100 - }, - { - "type": "text", - "id": "EMR4C", - "fill": "$text-secondary", - "content": "Velik Ho", - "fontFamily": "Roboto", - "fontSize": 13, - "width": 100 - } - ] - }, - { - "type": "frame", - "id": "EMRow5", - "width": "fill_container", - "padding": [ - 14, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "EMR5D", - "fill": "$text-secondary", - "content": "07/02", - "fontFamily": "Roboto", - "fontSize": 13, - "width": 80 - }, - { - "type": "text", - "id": "EMR5N", - "fill": "$text-primary", - "content": "Sửa chữa máy pha cà phê", - "fontFamily": "Roboto", - "fontSize": 13, - "width": "fill_container" - }, - { - "type": "frame", - "id": "EMR5Badge", - "width": 110, - "children": [ - { - "type": "frame", - "id": "EMR5BG", - "fill": "#F59E0B20", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "EMR5BT", - "fill": "#F59E0B", - "content": "Khác", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "text", - "id": "EMR5S", - "fill": "$text-secondary", - "content": "P. Ngọc Thạch", - "fontFamily": "Roboto", - "fontSize": 13, - "width": 150 - }, - { - "type": "text", - "id": "EMR5A", - "fill": "#EF4444", - "content": "-2.8M", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600", - "width": 100 - }, - { - "type": "text", - "id": "EMR5C", - "fill": "$text-secondary", - "content": "Đức Anh", - "fontFamily": "Roboto", - "fontSize": 13, - "width": 100 - } - ] - }, - { - "type": "frame", - "id": "EMRow6", - "width": "fill_container", - "padding": [ - 14, - 24 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "EMR6D", - "fill": "$text-secondary", - "content": "06/02", - "fontFamily": "Roboto", - "fontSize": 13, - "width": 80 - }, - { - "type": "text", - "id": "EMR6N", - "fill": "$text-primary", - "content": "Mua bao bì, ly giấy", - "fontFamily": "Roboto", - "fontSize": 13, - "width": "fill_container" - }, - { - "type": "frame", - "id": "EMR6Badge", - "width": 110, - "children": [ - { - "type": "frame", - "id": "EMR6BG", - "fill": "#FF5C0020", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "EMR6BT", - "fill": "$orange-primary", - "content": "Nguyên liệu", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "text", - "id": "EMR6S", - "fill": "$text-secondary", - "content": "Tất cả", - "fontFamily": "Roboto", - "fontSize": 13, - "width": 150 - }, - { - "type": "text", - "id": "EMR6A", - "fill": "#EF4444", - "content": "-1.5M", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600", - "width": 100 - }, - { - "type": "text", - "id": "EMR6C", - "fill": "$text-secondary", - "content": "Minh Anh", - "fontFamily": "Roboto", - "fontSize": 13, - "width": 100 - } - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "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/admin/financial-overview.pen b/pencil-design/src/pages/tPOS/admin/financial-overview.pen deleted file mode 100644 index 53d57999..00000000 --- a/pencil-design/src/pages/tPOS/admin/financial-overview.pen +++ /dev/null @@ -1,1825 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "FinancialOverview", - "name": "Admin/FinancialOverview", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "$bg-page", - "clip": true, - "children": [ - { - "type": "frame", - "id": "FOSidebar", - "width": 260, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "right" - ] - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "FOSidebarLogo", - "width": "fill_container", - "padding": [ - 24, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "FOLogoIcon", - "width": 40, - "height": 40, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "FOLogoT", - "fill": "#FFFFFF", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "800" - } - ] - }, - { - "type": "frame", - "id": "FOLogoTG", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "FOLogoN", - "fill": "$text-primary", - "content": "GoodGo Admin", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "text", - "id": "FOLogoS", - "fill": "$text-tertiary", - "content": "Management Console", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "FOSidebarNav", - "width": "fill_container", - "height": "fill_container", - "padding": [ - 16, - 12 - ], - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "FONavL1", - "fill": "$text-tertiary", - "content": "TỔNG QUAN", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 0, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "FONavDash", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "FONavDashI", - "width": 20, - "height": 20, - "iconFontName": "layout-dashboard", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "FONavDashT", - "fill": "$text-secondary", - "content": "Dashboard", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "FONavL2", - "fill": "$text-tertiary", - "content": "CỬA HÀNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "FONavStores", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "FONavStoresLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "FONavStoresI", - "width": 20, - "height": 20, - "iconFontName": "store", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "FONavStoresT", - "fill": "$text-secondary", - "content": "Quản lý cửa hàng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "FONavStoresBdg", - "width": 22, - "height": 22, - "fill": "$bg-interactive", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "FONavStoresBdgT", - "fill": "$text-tertiary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "FONavProd", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "FONavProdI", - "width": 18, - "height": 18, - "iconFontName": "package", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "FONavProdT", - "fill": "$text-tertiary", - "content": "Sản phẩm & Menu", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "FONavStaff", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "FONavStaffI", - "width": 18, - "height": 18, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "FONavStaffT", - "fill": "$text-tertiary", - "content": "Nhân sự", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "FONavInv", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "FONavInvI", - "width": 18, - "height": 18, - "iconFontName": "warehouse", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "FONavInvT", - "fill": "$text-tertiary", - "content": "Kho hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "FONavDev", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "FONavDevI", - "width": 18, - "height": 18, - "iconFontName": "monitor", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "FONavDevT", - "fill": "$text-tertiary", - "content": "Thiết bị", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "FONavL3", - "fill": "$text-tertiary", - "content": "KINH DOANH", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "FONavCust", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "FONavCustI", - "width": 20, - "height": 20, - "iconFontName": "heart", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "FONavCustT", - "fill": "$text-secondary", - "content": "Khách hàng & Loyalty", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "FONavRpt", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "FONavRptI", - "width": 20, - "height": 20, - "iconFontName": "bar-chart-2", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "FONavRptT", - "fill": "$text-secondary", - "content": "Báo cáo & Phân tích", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "FONavFin", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "FONavFinI", - "width": 20, - "height": 20, - "iconFontName": "wallet", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "FONavFinT", - "fill": "#FFFFFF", - "content": "Tài chính", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ], - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "FONavL4", - "fill": "$text-tertiary", - "content": "HỆ THỐNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "FONavRoles", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "FONavRolesI", - "width": 20, - "height": 20, - "iconFontName": "shield", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "FONavRolesT", - "fill": "$text-secondary", - "content": "Phân quyền", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "FONavSet", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "FONavSetI", - "width": 20, - "height": 20, - "iconFontName": "settings", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "FONavSetT", - "fill": "$text-secondary", - "content": "Cài đặt", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "FOSidebarUser", - "width": "fill_container", - "padding": [ - 16, - 16 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "FOUserAv", - "width": 36, - "height": 36, - "fill": "#3B82F6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "FOUserAvT", - "fill": "#FFFFFF", - "content": "VH", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "FOUserInfo", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "FOUserN", - "fill": "$text-primary", - "content": "Velik Ho", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "FOUserR", - "fill": "$text-tertiary", - "content": "Owner", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "FOMain", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "FOHeader", - "width": "fill_container", - "padding": [ - 16, - 32 - ], - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "FOHeaderLeft", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "FOHeaderTitle", - "fill": "$text-primary", - "content": "Tài chính", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "700" - }, - { - "type": "text", - "id": "FOHeaderSub", - "fill": "$text-tertiary", - "content": "Tổng quan tình hình tài chính doanh nghiệp", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "id": "FOHeaderRight", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "FOMonthPicker", - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 10, - 16 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "FOMonthI", - "width": 18, - "height": 18, - "iconFontName": "calendar", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "FOMonthT", - "fill": "$text-secondary", - "content": "Tháng 02/2026", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "icon_font", - "id": "FOMonthChev", - "width": 16, - "height": 16, - "iconFontName": "chevron-down", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "FOContent", - "width": "fill_container", - "height": "fill_container", - "padding": 28, - "layout": "vertical", - "gap": 20, - "clip": true, - "children": [ - { - "type": "frame", - "id": "FOKpiRow", - "width": "fill_container", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "FOKpi1", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 20, - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "FOKpi1Top", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "FOKpi1Icon", - "width": 32, - "height": 32, - "fill": "#22C55E20", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "FOKpi1I", - "width": 18, - "height": 18, - "iconFontName": "trending-up", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - }, - { - "type": "text", - "id": "FOKpi1L", - "fill": "$text-tertiary", - "content": "Doanh thu", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "text", - "id": "FOKpi1V", - "fill": "$text-primary", - "content": "458M", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "FOKpi2", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 20, - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "FOKpi2Top", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "FOKpi2Icon", - "width": 32, - "height": 32, - "fill": "#EF444420", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "FOKpi2I", - "width": 18, - "height": 18, - "iconFontName": "trending-down", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - }, - { - "type": "text", - "id": "FOKpi2L", - "fill": "$text-tertiary", - "content": "Chi phí", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "text", - "id": "FOKpi2V", - "fill": "$text-primary", - "content": "312M", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "FOKpi3", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 20, - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "FOKpi3Top", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "FOKpi3Icon", - "width": 32, - "height": 32, - "fill": "#3B82F620", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "FOKpi3I", - "width": 18, - "height": 18, - "iconFontName": "dollar-sign", - "iconFontFamily": "lucide", - "fill": "#3B82F6" - } - ] - }, - { - "type": "text", - "id": "FOKpi3L", - "fill": "$text-tertiary", - "content": "Lợi nhuận", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "text", - "id": "FOKpi3V", - "fill": "$text-primary", - "content": "146M", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "FOKpi4", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 20, - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "FOKpi4Top", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "FOKpi4Icon", - "width": 32, - "height": 32, - "fill": "#F59E0B20", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "FOKpi4I", - "width": 18, - "height": 18, - "iconFontName": "percent", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - } - ] - }, - { - "type": "text", - "id": "FOKpi4L", - "fill": "$text-tertiary", - "content": "Biên lợi nhuận", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "text", - "id": "FOKpi4V", - "fill": "$text-primary", - "content": "31.9%", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "700" - } - ] - } - ] - }, - { - "type": "frame", - "id": "FOTwoCol", - "width": "fill_container", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "FORevByStore", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 24, - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "text", - "id": "FORevTitle", - "fill": "$text-primary", - "content": "Doanh thu theo cửa hàng", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "FOStoreBar1", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "frame", - "id": "FOSBar1Top", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "FOSBar1N", - "fill": "$text-secondary", - "content": "GoodGo Nguyễn Huệ", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "FOSBar1V", - "fill": "$text-primary", - "content": "185M", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "FOSBar1BG", - "width": "fill_container", - "height": 12, - "fill": "$bg-interactive", - "cornerRadius": 6, - "children": [ - { - "type": "frame", - "id": "FOSBar1Fill", - "width": "75%", - "height": "fill_container", - "fill": "$orange-primary", - "cornerRadius": 6 - } - ] - } - ] - }, - { - "type": "frame", - "id": "FOStoreBar2", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "frame", - "id": "FOSBar2Top", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "FOSBar2N", - "fill": "$text-secondary", - "content": "GoodGo Lê Văn Sỹ", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "FOSBar2V", - "fill": "$text-primary", - "content": "152M", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "FOSBar2BG", - "width": "fill_container", - "height": 12, - "fill": "$bg-interactive", - "cornerRadius": 6, - "children": [ - { - "type": "frame", - "id": "FOSBar2Fill", - "width": "60%", - "height": "fill_container", - "fill": "#3B82F6", - "cornerRadius": 6 - } - ] - } - ] - }, - { - "type": "frame", - "id": "FOStoreBar3", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "frame", - "id": "FOSBar3Top", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "FOSBar3N", - "fill": "$text-secondary", - "content": "GoodGo Phạm Ngọc Thạch", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "FOSBar3V", - "fill": "$text-primary", - "content": "121M", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "FOSBar3BG", - "width": "fill_container", - "height": 12, - "fill": "$bg-interactive", - "cornerRadius": 6, - "children": [ - { - "type": "frame", - "id": "FOSBar3Fill", - "width": "48%", - "height": "fill_container", - "fill": "#22C55E", - "cornerRadius": 6 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "FOExpBreak", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 24, - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "text", - "id": "FOExpTitle", - "fill": "$text-primary", - "content": "Chi phí breakdown", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "FOExp1", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "padding": [ - 12, - 0 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "children": [ - { - "type": "frame", - "id": "FOExp1Left", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "FOExp1Dot", - "width": 10, - "height": 10, - "fill": "$orange-primary", - "cornerRadius": 100 - }, - { - "type": "text", - "id": "FOExp1N", - "fill": "$text-secondary", - "content": "Nguyên liệu", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "text", - "id": "FOExp1V", - "fill": "$text-primary", - "content": "156M", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "FOExp2", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "padding": [ - 12, - 0 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "children": [ - { - "type": "frame", - "id": "FOExp2Left", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "FOExp2Dot", - "width": 10, - "height": 10, - "fill": "#3B82F6", - "cornerRadius": 100 - }, - { - "type": "text", - "id": "FOExp2N", - "fill": "$text-secondary", - "content": "Nhân sự", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "text", - "id": "FOExp2V", - "fill": "$text-primary", - "content": "89M", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "FOExp3", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "padding": [ - 12, - 0 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "children": [ - { - "type": "frame", - "id": "FOExp3Left", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "FOExp3Dot", - "width": 10, - "height": 10, - "fill": "#22C55E", - "cornerRadius": 100 - }, - { - "type": "text", - "id": "FOExp3N", - "fill": "$text-secondary", - "content": "Mặt bằng", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "text", - "id": "FOExp3V", - "fill": "$text-primary", - "content": "45M", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "FOExp4", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "padding": [ - 12, - 0 - ], - "children": [ - { - "type": "frame", - "id": "FOExp4Left", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "FOExp4Dot", - "width": 10, - "height": 10, - "fill": "#F59E0B", - "cornerRadius": 100 - }, - { - "type": "text", - "id": "FOExp4N", - "fill": "$text-secondary", - "content": "Khác", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "text", - "id": "FOExp4V", - "fill": "$text-primary", - "content": "22M", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "FOCashFlow", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "FOCFHead", - "width": "fill_container", - "padding": [ - 16, - 24 - ], - "children": [ - { - "type": "text", - "id": "FOCFTitle", - "fill": "$text-primary", - "content": "Dòng tiền gần đây", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "FOCFHdr", - "width": "fill_container", - "padding": [ - 12, - 24 - ], - "fill": "$bg-interactive", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "FOCFH1", - "fill": "$text-tertiary", - "content": "Ngày", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600", - "width": 100 - }, - { - "type": "text", - "id": "FOCFH2", - "fill": "$text-tertiary", - "content": "Mô tả", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600", - "width": "fill_container" - }, - { - "type": "text", - "id": "FOCFH3", - "fill": "$text-tertiary", - "content": "Thu/Chi", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600", - "width": 120 - }, - { - "type": "text", - "id": "FOCFH4", - "fill": "$text-tertiary", - "content": "Số dư", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600", - "width": 120 - } - ] - }, - { - "type": "frame", - "id": "FOCFR1", - "width": "fill_container", - "padding": [ - 14, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "FOCF1D", - "fill": "$text-secondary", - "content": "11/02", - "fontFamily": "Roboto", - "fontSize": 13, - "width": 100 - }, - { - "type": "text", - "id": "FOCF1N", - "fill": "$text-primary", - "content": "Doanh thu bán hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "width": "fill_container" - }, - { - "type": "text", - "id": "FOCF1A", - "fill": "#22C55E", - "content": "+18.5M", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600", - "width": 120 - }, - { - "type": "text", - "id": "FOCF1B", - "fill": "$text-primary", - "content": "245.2M", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600", - "width": 120 - } - ] - }, - { - "type": "frame", - "id": "FOCFR2", - "width": "fill_container", - "padding": [ - 14, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "FOCF2D", - "fill": "$text-secondary", - "content": "10/02", - "fontFamily": "Roboto", - "fontSize": 13, - "width": 100 - }, - { - "type": "text", - "id": "FOCF2N", - "fill": "$text-primary", - "content": "Nhập nguyên liệu", - "fontFamily": "Roboto", - "fontSize": 13, - "width": "fill_container" - }, - { - "type": "text", - "id": "FOCF2A", - "fill": "#EF4444", - "content": "-12.3M", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600", - "width": 120 - }, - { - "type": "text", - "id": "FOCF2B", - "fill": "$text-primary", - "content": "226.7M", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600", - "width": 120 - } - ] - }, - { - "type": "frame", - "id": "FOCFR3", - "width": "fill_container", - "padding": [ - 14, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "FOCF3D", - "fill": "$text-secondary", - "content": "09/02", - "fontFamily": "Roboto", - "fontSize": 13, - "width": 100 - }, - { - "type": "text", - "id": "FOCF3N", - "fill": "$text-primary", - "content": "Doanh thu bán hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "width": "fill_container" - }, - { - "type": "text", - "id": "FOCF3A", - "fill": "#22C55E", - "content": "+21.0M", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600", - "width": 120 - }, - { - "type": "text", - "id": "FOCF3B", - "fill": "$text-primary", - "content": "239.0M", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600", - "width": 120 - } - ] - }, - { - "type": "frame", - "id": "FOCFR4", - "width": "fill_container", - "padding": [ - 14, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "FOCF4D", - "fill": "$text-secondary", - "content": "08/02", - "fontFamily": "Roboto", - "fontSize": 13, - "width": 100 - }, - { - "type": "text", - "id": "FOCF4N", - "fill": "$text-primary", - "content": "Lương nhân viên", - "fontFamily": "Roboto", - "fontSize": 13, - "width": "fill_container" - }, - { - "type": "text", - "id": "FOCF4A", - "fill": "#EF4444", - "content": "-45.0M", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600", - "width": 120 - }, - { - "type": "text", - "id": "FOCF4B", - "fill": "$text-primary", - "content": "218.0M", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600", - "width": 120 - } - ] - }, - { - "type": "frame", - "id": "FOCFR5", - "width": "fill_container", - "padding": [ - 14, - 24 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "FOCF5D", - "fill": "$text-secondary", - "content": "07/02", - "fontFamily": "Roboto", - "fontSize": 13, - "width": 100 - }, - { - "type": "text", - "id": "FOCF5N", - "fill": "$text-primary", - "content": "Tiền thuê mặt bằng", - "fontFamily": "Roboto", - "fontSize": 13, - "width": "fill_container" - }, - { - "type": "text", - "id": "FOCF5A", - "fill": "#EF4444", - "content": "-15.0M", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600", - "width": 120 - }, - { - "type": "text", - "id": "FOCF5B", - "fill": "$text-primary", - "content": "263.0M", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600", - "width": 120 - } - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "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/admin/integration-hub.pen b/pencil-design/src/pages/tPOS/admin/integration-hub.pen deleted file mode 100644 index b026db75..00000000 --- a/pencil-design/src/pages/tPOS/admin/integration-hub.pen +++ /dev/null @@ -1,1688 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "IntegrationHub", - "name": "Admin/IntegrationHub", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "$bg-page", - "clip": true, - "children": [ - { - "type": "frame", - "id": "IHSidebar", - "width": 260, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "right" - ] - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "IHSidebarLogo", - "width": "fill_container", - "padding": [ - 24, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "IHLogoIcon", - "width": 40, - "height": 40, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "IHLogoT", - "fill": "#FFFFFF", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "800" - } - ] - }, - { - "type": "frame", - "id": "IHLogoTG", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "IHLogoN", - "fill": "$text-primary", - "content": "GoodGo Admin", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "text", - "id": "IHLogoS", - "fill": "$text-tertiary", - "content": "Management Console", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "IHSidebarNav", - "width": "fill_container", - "height": "fill_container", - "padding": [ - 16, - 12 - ], - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "IHNavL1", - "fill": "$text-tertiary", - "content": "TỔNG QUAN", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 0, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "IHNavDash", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "IHNavDashI", - "width": 20, - "height": 20, - "iconFontName": "layout-dashboard", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "IHNavDashT", - "fill": "$text-secondary", - "content": "Dashboard", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "IHNavL2", - "fill": "$text-tertiary", - "content": "CỬA HÀNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "IHNavStores", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "IHNavStoresLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "IHNavStoresI", - "width": 20, - "height": 20, - "iconFontName": "store", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "IHNavStoresT", - "fill": "$text-secondary", - "content": "Quản lý cửa hàng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "IHNavStoresBdg", - "width": 22, - "height": 22, - "fill": "$bg-interactive", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "IHNavStoresBdgT", - "fill": "$text-tertiary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "IHNavProd", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "IHNavProdI", - "width": 18, - "height": 18, - "iconFontName": "package", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "IHNavProdT", - "fill": "$text-tertiary", - "content": "Sản phẩm & Menu", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "IHNavStaff", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "IHNavStaffI", - "width": 18, - "height": 18, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "IHNavStaffT", - "fill": "$text-tertiary", - "content": "Nhân sự", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "IHNavInv", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "IHNavInvI", - "width": 18, - "height": 18, - "iconFontName": "warehouse", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "IHNavInvT", - "fill": "$text-tertiary", - "content": "Kho hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "IHNavDev", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "IHNavDevI", - "width": 18, - "height": 18, - "iconFontName": "monitor", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "IHNavDevT", - "fill": "$text-tertiary", - "content": "Thiết bị", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "IHNavL3", - "fill": "$text-tertiary", - "content": "KINH DOANH", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "IHNavCust", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "IHNavCustI", - "width": 20, - "height": 20, - "iconFontName": "heart", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "IHNavCustT", - "fill": "$text-secondary", - "content": "Khách hàng & Loyalty", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "IHNavRpt", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "IHNavRptI", - "width": 20, - "height": 20, - "iconFontName": "bar-chart-2", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "IHNavRptT", - "fill": "$text-secondary", - "content": "Báo cáo & Phân tích", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "IHNavFin", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "IHNavFinI", - "width": 20, - "height": 20, - "iconFontName": "wallet", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "IHNavFinT", - "fill": "$text-secondary", - "content": "Tài chính", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "IHNavL4", - "fill": "$text-tertiary", - "content": "HỆ THỐNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "IHNavRoles", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "IHNavRolesI", - "width": 20, - "height": 20, - "iconFontName": "shield", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "IHNavRolesT", - "fill": "$text-secondary", - "content": "Phân quyền", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "IHNavSet", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "IHNavSetI", - "width": 20, - "height": 20, - "iconFontName": "settings", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "IHNavSetT", - "fill": "#FFFFFF", - "content": "Cài đặt", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ], - "fill": "$orange-primary" - } - ] - }, - { - "type": "frame", - "id": "IHSidebarUser", - "width": "fill_container", - "padding": [ - 16, - 16 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "IHUserAv", - "width": 36, - "height": 36, - "fill": "#3B82F6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "IHUserAvT", - "fill": "#FFFFFF", - "content": "VH", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "IHUserInfo", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "IHUserN", - "fill": "$text-primary", - "content": "Velik Ho", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "IHUserR", - "fill": "$text-tertiary", - "content": "Owner", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "IHMain", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "IHHeader", - "width": "fill_container", - "padding": [ - 16, - 32 - ], - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "IHHeaderLeft", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "frame", - "id": "IHBreadcrumb", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "IHBread1", - "fill": "$text-tertiary", - "content": "Hệ thống", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "IHBreadSep", - "fill": "$text-tertiary", - "content": "/", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "IHBread2", - "fill": "$orange-primary", - "content": "Tích hợp", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "IHHeaderTitle", - "fill": "$text-primary", - "content": "Tích hợp", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "IHHeaderRight", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "IHSearch", - "width": 280, - "height": 40, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "IHSearchI", - "width": 16, - "height": 16, - "iconFontName": "search", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "IHSearchT", - "fill": "$text-tertiary", - "content": "Tìm kiếm tích hợp...", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "IHContent", - "width": "fill_container", - "height": "fill_container", - "padding": 32, - "layout": "vertical", - "gap": 24, - "clip": true, - "children": [ - { - "type": "text", - "id": "IHSectionPay", - "fill": "$text-tertiary", - "content": "THANH TOÁN", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "IHPayRow", - "width": "fill_container", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "IHCard1", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 24, - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "IHCard1Top", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "flex_start", - "children": [ - { - "type": "frame", - "id": "IHCard1IconWrap", - "width": 48, - "height": 48, - "fill": "#3B82F620", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "IHCard1IconT", - "fill": "#3B82F6", - "content": "VN", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "800" - } - ] - }, - { - "type": "frame", - "id": "IHCard1Status", - "fill": "#22C55E20", - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "IHCard1Dot", - "width": 8, - "height": 8, - "fill": "#22C55E", - "cornerRadius": 100 - }, - { - "type": "text", - "id": "IHCard1StatusT", - "fill": "#22C55E", - "content": "Đã kết nối", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "IHCard1Info", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "IHCard1Name", - "fill": "$text-primary", - "content": "VNPay", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "IHCard1Cat", - "children": [ - { - "type": "frame", - "id": "IHCard1CatBg", - "fill": "#3B82F615", - "cornerRadius": 6, - "padding": [ - 3, - 8 - ], - "children": [ - { - "type": "text", - "id": "IHCard1CatT", - "fill": "#3B82F6", - "content": "Thanh toán", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "IHCard1Btn", - "width": "fill_container", - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 10, - 0 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "IHCard1BtnT", - "fill": "#EF4444", - "content": "Ngắt kết nối", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "IHCard2", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 24, - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "IHCard2Top", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "flex_start", - "children": [ - { - "type": "frame", - "id": "IHCard2IconWrap", - "width": 48, - "height": 48, - "fill": "#EC489920", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "IHCard2IconT", - "fill": "#EC4899", - "content": "M", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "800" - } - ] - }, - { - "type": "frame", - "id": "IHCard2Status", - "fill": "#22C55E20", - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "IHCard2Dot", - "width": 8, - "height": 8, - "fill": "#22C55E", - "cornerRadius": 100 - }, - { - "type": "text", - "id": "IHCard2StatusT", - "fill": "#22C55E", - "content": "Đã kết nối", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "IHCard2Info", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "IHCard2Name", - "fill": "$text-primary", - "content": "Momo", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "IHCard2Cat", - "children": [ - { - "type": "frame", - "id": "IHCard2CatBg", - "fill": "#3B82F615", - "cornerRadius": 6, - "padding": [ - 3, - 8 - ], - "children": [ - { - "type": "text", - "id": "IHCard2CatT", - "fill": "#3B82F6", - "content": "Thanh toán", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "IHCard2Btn", - "width": "fill_container", - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 10, - 0 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "IHCard2BtnT", - "fill": "#EF4444", - "content": "Ngắt kết nối", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "IHCard3", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 24, - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "IHCard3Top", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "flex_start", - "children": [ - { - "type": "frame", - "id": "IHCard3IconWrap", - "width": 48, - "height": 48, - "fill": "#3B82F620", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "IHCard3IconT", - "fill": "#3B82F6", - "content": "Z", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "800" - } - ] - }, - { - "type": "frame", - "id": "IHCard3Status", - "fill": "$bg-interactive", - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "IHCard3StatusT", - "fill": "$text-tertiary", - "content": "Chưa kết nối", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "IHCard3Info", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "IHCard3Name", - "fill": "$text-primary", - "content": "ZaloPay", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "IHCard3Cat", - "children": [ - { - "type": "frame", - "id": "IHCard3CatBg", - "fill": "#3B82F615", - "cornerRadius": 6, - "padding": [ - 3, - 8 - ], - "children": [ - { - "type": "text", - "id": "IHCard3CatT", - "fill": "#3B82F6", - "content": "Thanh toán", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "IHCard3Btn", - "width": "fill_container", - "fill": "$orange-primary", - "cornerRadius": 10, - "padding": [ - 10, - 0 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "IHCard3BtnT", - "fill": "#FFFFFF", - "content": "Kết nối", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "text", - "id": "IHSectionDel", - "fill": "$text-tertiary", - "content": "GIAO HÀNG", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "IHDelRow", - "width": "fill_container", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "IHCard4", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 24, - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "IHCard4Top", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "flex_start", - "children": [ - { - "type": "frame", - "id": "IHCard4IconWrap", - "width": 48, - "height": 48, - "fill": "#22C55E20", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "IHCard4IconT", - "fill": "#22C55E", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "800" - } - ] - }, - { - "type": "frame", - "id": "IHCard4Status", - "fill": "#22C55E20", - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "IHCard4Dot", - "width": 8, - "height": 8, - "fill": "#22C55E", - "cornerRadius": 100 - }, - { - "type": "text", - "id": "IHCard4StatusT", - "fill": "#22C55E", - "content": "Đã kết nối", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "IHCard4Info", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "IHCard4Name", - "fill": "$text-primary", - "content": "Grab", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "IHCard4Cat", - "children": [ - { - "type": "frame", - "id": "IHCard4CatBg", - "fill": "#22C55E15", - "cornerRadius": 6, - "padding": [ - 3, - 8 - ], - "children": [ - { - "type": "text", - "id": "IHCard4CatT", - "fill": "#22C55E", - "content": "Giao hàng", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "IHCard4Btn", - "width": "fill_container", - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 10, - 0 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "IHCard4BtnT", - "fill": "#EF4444", - "content": "Ngắt kết nối", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "IHCard5", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 24, - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "IHCard5Top", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "flex_start", - "children": [ - { - "type": "frame", - "id": "IHCard5IconWrap", - "width": 48, - "height": 48, - "fill": "#F59E0B20", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "IHCard5IconT", - "fill": "#F59E0B", - "content": "S", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "800" - } - ] - }, - { - "type": "frame", - "id": "IHCard5Status", - "fill": "#F59E0B20", - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "IHCard5Dot", - "width": 8, - "height": 8, - "fill": "#F59E0B", - "cornerRadius": 100 - }, - { - "type": "text", - "id": "IHCard5StatusT", - "fill": "#F59E0B", - "content": "Đang chờ", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "IHCard5Info", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "IHCard5Name", - "fill": "$text-primary", - "content": "ShopeeFood", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "IHCard5Cat", - "children": [ - { - "type": "frame", - "id": "IHCard5CatBg", - "fill": "#22C55E15", - "cornerRadius": 6, - "padding": [ - 3, - 8 - ], - "children": [ - { - "type": "text", - "id": "IHCard5CatT", - "fill": "#22C55E", - "content": "Giao hàng", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "IHCard5Btn", - "width": "fill_container", - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 10, - 0 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "IHCard5BtnT", - "fill": "$text-secondary", - "content": "Đang xử lý...", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "IHCard6", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 24, - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "IHCard6Top", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "flex_start", - "children": [ - { - "type": "frame", - "id": "IHCard6IconWrap", - "width": 48, - "height": 48, - "fill": "#EF444420", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "IHCard6IconT", - "fill": "#EF4444", - "content": "GF", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "800" - } - ] - }, - { - "type": "frame", - "id": "IHCard6Status", - "fill": "$bg-interactive", - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "IHCard6StatusT", - "fill": "$text-tertiary", - "content": "Chưa kết nối", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "IHCard6Info", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "IHCard6Name", - "fill": "$text-primary", - "content": "GoFood", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "IHCard6Cat", - "children": [ - { - "type": "frame", - "id": "IHCard6CatBg", - "fill": "#22C55E15", - "cornerRadius": 6, - "padding": [ - 3, - 8 - ], - "children": [ - { - "type": "text", - "id": "IHCard6CatT", - "fill": "#22C55E", - "content": "Giao hàng", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "IHCard6Btn", - "width": "fill_container", - "fill": "$orange-primary", - "cornerRadius": 10, - "padding": [ - 10, - 0 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "IHCard6BtnT", - "fill": "#FFFFFF", - "content": "Kết nối", - "fontFamily": "Roboto", - "fontSize": 13, - "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/admin/inventory-dashboard.pen b/pencil-design/src/pages/tPOS/admin/inventory-dashboard.pen deleted file mode 100644 index d62bfb7d..00000000 --- a/pencil-design/src/pages/tPOS/admin/inventory-dashboard.pen +++ /dev/null @@ -1,1615 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "InvDash", - "name": "Admin/InventoryDashboard", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "$bg-page", - "clip": true, - "children": [ - { - "type": "frame", - "id": "IVSidebar", - "width": 260, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "right" - ] - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "IVLogo", - "width": "fill_container", - "padding": [ - 24, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "IVLogoIc", - "width": 40, - "height": 40, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "IVLogoT", - "fill": "#FFFFFF", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "800" - } - ] - }, - { - "type": "frame", - "id": "IVLogoGr", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "IVLogoN", - "fill": "$text-primary", - "content": "GoodGo Admin", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "text", - "id": "IVLogoSub", - "fill": "$text-tertiary", - "content": "Management Console", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "IVNav", - "width": "fill_container", - "height": "fill_container", - "padding": [ - 16, - 12 - ], - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "IVNavL1", - "fill": "$text-tertiary", - "content": "TỔNG QUAN", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 0, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "IVNavDash", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "IVNavDashI", - "width": 20, - "height": 20, - "iconFontName": "layout-dashboard", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "IVNavDashT", - "fill": "$text-secondary", - "content": "Dashboard", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "IVNavL2", - "fill": "$text-tertiary", - "content": "CỬA HÀNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "IVNavStores", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "IVNavStoresLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "IVNavStoresI", - "width": 20, - "height": 20, - "iconFontName": "store", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "IVNavStoresT", - "fill": "$text-secondary", - "content": "Quản lý cửa hàng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "IVNavStoresBdg", - "width": 22, - "height": 22, - "fill": "$bg-interactive", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "IVNavStoresBdgT", - "fill": "$text-tertiary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "IVNavProd", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "IVNavProdI", - "width": 18, - "height": 18, - "iconFontName": "package", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "IVNavProdT", - "fill": "$text-tertiary", - "content": "Sản phẩm & Menu", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "IVNavStaff", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "IVNavStaffI", - "width": 18, - "height": 18, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "IVNavStaffT", - "fill": "$text-tertiary", - "content": "Nhân sự", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "IVNavInv", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "IVNavInvI", - "width": 18, - "height": 18, - "iconFontName": "warehouse", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "IVNavInvT", - "fill": "#FFFFFF", - "content": "Kho hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ], - "fill": "$orange-primary" - }, - { - "type": "frame", - "id": "IVNavDev", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "IVNavDevI", - "width": 18, - "height": 18, - "iconFontName": "monitor", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "IVNavDevT", - "fill": "$text-tertiary", - "content": "Thiết bị", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "IVNavL3", - "fill": "$text-tertiary", - "content": "KINH DOANH", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "IVNavCust", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "IVNavCustI", - "width": 20, - "height": 20, - "iconFontName": "heart", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "IVNavCustT", - "fill": "$text-secondary", - "content": "Khách hàng & Loyalty", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "IVNavRpt", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "IVNavRptI", - "width": 20, - "height": 20, - "iconFontName": "bar-chart-2", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "IVNavRptT", - "fill": "$text-secondary", - "content": "Báo cáo & Phân tích", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "IVNavFin", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "IVNavFinI", - "width": 20, - "height": 20, - "iconFontName": "wallet", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "IVNavFinT", - "fill": "$text-secondary", - "content": "Tài chính", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "IVNavL4", - "fill": "$text-tertiary", - "content": "HỆ THỐNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "IVNavRoles", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "IVNavRolesI", - "width": 20, - "height": 20, - "iconFontName": "shield", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "IVNavRolesT", - "fill": "$text-secondary", - "content": "Phân quyền", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "IVNavSet", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "IVNavSetI", - "width": 20, - "height": 20, - "iconFontName": "settings", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "IVNavSetT", - "fill": "$text-secondary", - "content": "Cài đặt", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "IVUsr", - "width": "fill_container", - "padding": [ - 16, - 16 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "IVUsrAv", - "width": 36, - "height": 36, - "fill": "#3B82F6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "IVUsrAvT", - "fill": "#FFFFFF", - "content": "VH", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "IVUsrInf", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "IVUsrN", - "fill": "$text-primary", - "content": "Velik Ho", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "IVUsrR", - "fill": "$text-tertiary", - "content": "Owner", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "IVMain", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "IVHeader", - "width": "fill_container", - "padding": [ - 16, - 32 - ], - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "IVTitle", - "fill": "$text-primary", - "content": "Kho hàng", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "IVActions", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "IVStore", - "height": 40, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "IVStoreI", - "width": 16, - "height": 16, - "iconFontName": "store", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "IVStoreT", - "fill": "$text-primary", - "content": "Coffee House Q1", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "icon_font", - "id": "IVStoreChev", - "width": 16, - "height": 16, - "iconFontName": "chevron-down", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - }, - { - "type": "frame", - "id": "IVSearch", - "height": 40, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "IVSearchI", - "width": 16, - "height": 16, - "iconFontName": "search", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "IVSearchT", - "fill": "$text-tertiary", - "content": "Tìm sản phẩm...", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "IVContent", - "width": "fill_container", - "height": "fill_container", - "padding": 24, - "layout": "vertical", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "IVKPIs", - "width": "fill_container", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "IVK1", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 20, - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "IVK1L", - "fill": "$text-tertiary", - "content": "Tổng sản phẩm", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "IVK1V", - "fill": "$text-primary", - "content": "245", - "fontFamily": "Roboto", - "fontSize": 32, - "fontWeight": "700" - }, - { - "type": "text", - "id": "IVK1C", - "fill": "$text-tertiary", - "content": "Đang kinh doanh", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - }, - { - "type": "frame", - "id": "IVK2", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 20, - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "IVK2L", - "fill": "$text-tertiary", - "content": "Sắp hết", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "IVK2V", - "fill": "#F59E0B", - "content": "12", - "fontFamily": "Roboto", - "fontSize": 32, - "fontWeight": "700" - }, - { - "type": "text", - "id": "IVK2C", - "fill": "#F59E0B", - "content": "Cần nhập thêm", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - }, - { - "type": "frame", - "id": "IVK3", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 20, - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "IVK3L", - "fill": "$text-tertiary", - "content": "Hết hàng", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "IVK3V", - "fill": "#EF4444", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 32, - "fontWeight": "700" - }, - { - "type": "text", - "id": "IVK3C", - "fill": "#EF4444", - "content": "Ngừng bán", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - }, - { - "type": "frame", - "id": "IVK4", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 20, - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "IVK4L", - "fill": "$text-tertiary", - "content": "Sắp hết hạn", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "IVK4V", - "fill": "#EF4444", - "content": "5", - "fontFamily": "Roboto", - "fontSize": 32, - "fontWeight": "700" - }, - { - "type": "text", - "id": "IVK4C", - "fill": "#EF4444", - "content": "< 7 ngày", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "IVTable", - "width": "fill_container", - "height": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "IVTHead", - "width": "fill_container", - "padding": [ - 14, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "children": [ - { - "type": "text", - "id": "IVTH1", - "width": 220, - "fill": "$text-tertiary", - "content": "Sản phẩm", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "IVTH2", - "width": 120, - "fill": "$text-tertiary", - "content": "Mã SKU", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "IVTH3", - "width": 100, - "fill": "$text-tertiary", - "content": "Tồn kho", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "IVTH4", - "width": 100, - "fill": "$text-tertiary", - "content": "Ngưỡng", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "IVTH5", - "width": 120, - "fill": "$text-tertiary", - "content": "Trạng thái", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "IVTH6", - "fill": "$text-tertiary", - "content": "Cập nhật", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "IVR1", - "width": "fill_container", - "padding": [ - 14, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "IVR1N", - "width": 220, - "fill": "$text-primary", - "content": "☕ Cà phê Arabica", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "IVR1SKU", - "width": 120, - "fill": "$text-tertiary", - "content": "CF-ARB-001", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "IVR1Qty", - "width": 100, - "fill": "$text-primary", - "content": "156 kg", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "IVR1Min", - "width": 100, - "fill": "$text-tertiary", - "content": "20 kg", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "frame", - "id": "IVR1St", - "width": 120, - "children": [ - { - "type": "frame", - "id": "IVR1StB", - "fill": "#22C55E20", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "IVR1StT", - "fill": "#22C55E", - "content": "Đủ hàng", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "text", - "id": "IVR1Up", - "fill": "$text-tertiary", - "content": "Hôm nay", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - }, - { - "type": "frame", - "id": "IVR2", - "width": "fill_container", - "padding": [ - 14, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "IVR2N", - "width": 220, - "fill": "$text-primary", - "content": "🥛 Sữa tươi", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "IVR2SKU", - "width": 120, - "fill": "$text-tertiary", - "content": "ML-FRE-002", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "IVR2Qty", - "width": 100, - "fill": "#F59E0B", - "content": "8 lít", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "IVR2Min", - "width": 100, - "fill": "$text-tertiary", - "content": "20 lít", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "frame", - "id": "IVR2St", - "width": 120, - "children": [ - { - "type": "frame", - "id": "IVR2StB", - "fill": "#F59E0B20", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "IVR2StT", - "fill": "#F59E0B", - "content": "Sắp hết", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "text", - "id": "IVR2Up", - "fill": "$text-tertiary", - "content": "2 giờ trước", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - }, - { - "type": "frame", - "id": "IVR3", - "width": "fill_container", - "padding": [ - 14, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "IVR3N", - "width": 220, - "fill": "$text-primary", - "content": "🍬 Đường", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "IVR3SKU", - "width": 120, - "fill": "$text-tertiary", - "content": "SG-WHT-003", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "IVR3Qty", - "width": 100, - "fill": "$text-primary", - "content": "45 kg", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "IVR3Min", - "width": 100, - "fill": "$text-tertiary", - "content": "10 kg", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "frame", - "id": "IVR3St", - "width": 120, - "children": [ - { - "type": "frame", - "id": "IVR3StB", - "fill": "#22C55E20", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "IVR3StT", - "fill": "#22C55E", - "content": "Đủ hàng", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "text", - "id": "IVR3Up", - "fill": "$text-tertiary", - "content": "Hôm qua", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - }, - { - "type": "frame", - "id": "IVR4", - "width": "fill_container", - "padding": [ - 14, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "IVR4N", - "width": 220, - "fill": "$text-primary", - "content": "🍵 Trà oolong", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "IVR4SKU", - "width": 120, - "fill": "$text-tertiary", - "content": "TE-OOL-004", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "IVR4Qty", - "width": 100, - "fill": "#F59E0B", - "content": "5 kg", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "IVR4Min", - "width": 100, - "fill": "$text-tertiary", - "content": "15 kg", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "frame", - "id": "IVR4St", - "width": 120, - "children": [ - { - "type": "frame", - "id": "IVR4StB", - "fill": "#F59E0B20", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "IVR4StT", - "fill": "#F59E0B", - "content": "Sắp hết", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "text", - "id": "IVR4Up", - "fill": "$text-tertiary", - "content": "3 ngày trước", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - }, - { - "type": "frame", - "id": "IVR5", - "width": "fill_container", - "padding": [ - 14, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "IVR5N", - "width": 220, - "fill": "$text-primary", - "content": "🍯 Syrup vanilla", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "IVR5SKU", - "width": 120, - "fill": "$text-tertiary", - "content": "SY-VAN-005", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "IVR5Qty", - "width": 100, - "fill": "#EF4444", - "content": "0 chai", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "IVR5Min", - "width": 100, - "fill": "$text-tertiary", - "content": "10 chai", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "frame", - "id": "IVR5St", - "width": 120, - "children": [ - { - "type": "frame", - "id": "IVR5StB", - "fill": "#EF444420", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "IVR5StT", - "fill": "#EF4444", - "content": "Hết hàng", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "text", - "id": "IVR5Up", - "fill": "$text-tertiary", - "content": "Hôm nay", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - }, - { - "type": "frame", - "id": "IVR6", - "width": "fill_container", - "padding": [ - 14, - 20 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "IVR6N", - "width": 220, - "fill": "$text-primary", - "content": "🥤 Ly giấy", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "IVR6SKU", - "width": 120, - "fill": "$text-tertiary", - "content": "CU-PAP-006", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "IVR6Qty", - "width": 100, - "fill": "$text-primary", - "content": "500 cái", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "IVR6Min", - "width": 100, - "fill": "$text-tertiary", - "content": "100 cái", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "frame", - "id": "IVR6St", - "width": 120, - "children": [ - { - "type": "frame", - "id": "IVR6StB", - "fill": "#22C55E20", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "IVR6StT", - "fill": "#22C55E", - "content": "Đủ hàng", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "text", - "id": "IVR6Up", - "fill": "$text-tertiary", - "content": "5 ngày trước", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "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/admin/loyalty-program.pen b/pencil-design/src/pages/tPOS/admin/loyalty-program.pen deleted file mode 100644 index fd686d11..00000000 --- a/pencil-design/src/pages/tPOS/admin/loyalty-program.pen +++ /dev/null @@ -1,1991 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "LoyaltyProgram", - "name": "Admin/LoyaltyProgram", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "$bg-page", - "clip": true, - "children": [ - { - "type": "frame", - "id": "LPSidebar", - "width": 260, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "right" - ] - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "LPSidebarLogo", - "width": "fill_container", - "padding": [ - 24, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "LPLogoIcon", - "width": 40, - "height": 40, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "LPLogoT", - "fill": "#FFFFFF", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "800" - } - ] - }, - { - "type": "frame", - "id": "LPLogoTG", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "LPLogoN", - "fill": "$text-primary", - "content": "GoodGo Admin", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "text", - "id": "LPLogoS", - "fill": "$text-tertiary", - "content": "Management Console", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "LPSidebarNav", - "width": "fill_container", - "height": "fill_container", - "padding": [ - 16, - 12 - ], - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "LPNavL1", - "fill": "$text-tertiary", - "content": "TỔNG QUAN", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 0, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "LPNavDash", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "LPNavDashI", - "width": 20, - "height": 20, - "iconFontName": "layout-dashboard", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "LPNavDashT", - "fill": "$text-secondary", - "content": "Dashboard", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "LPNavL2", - "fill": "$text-tertiary", - "content": "CỬA HÀNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "LPNavStores", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "LPNavStoresLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "LPNavStoresI", - "width": 20, - "height": 20, - "iconFontName": "store", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "LPNavStoresT", - "fill": "$text-secondary", - "content": "Quản lý cửa hàng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "LPNavStoresBdg", - "width": 22, - "height": 22, - "fill": "$bg-interactive", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "LPNavStoresBdgT", - "fill": "$text-tertiary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "LPNavProd", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "LPNavProdI", - "width": 18, - "height": 18, - "iconFontName": "package", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "LPNavProdT", - "fill": "$text-tertiary", - "content": "Sản phẩm & Menu", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "LPNavStaff", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "LPNavStaffI", - "width": 18, - "height": 18, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "LPNavStaffT", - "fill": "$text-tertiary", - "content": "Nhân sự", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "LPNavInv", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "LPNavInvI", - "width": 18, - "height": 18, - "iconFontName": "warehouse", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "LPNavInvT", - "fill": "$text-tertiary", - "content": "Kho hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "LPNavDev", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "LPNavDevI", - "width": 18, - "height": 18, - "iconFontName": "monitor", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "LPNavDevT", - "fill": "$text-tertiary", - "content": "Thiết bị", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "LPNavL3", - "fill": "$text-tertiary", - "content": "KINH DOANH", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "LPNavCust", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "LPNavCustI", - "width": 20, - "height": 20, - "iconFontName": "heart", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "LPNavCustT", - "fill": "#FFFFFF", - "content": "Khách hàng & Loyalty", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ], - "fill": "$orange-primary" - }, - { - "type": "frame", - "id": "LPNavRpt", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "LPNavRptI", - "width": 20, - "height": 20, - "iconFontName": "bar-chart-2", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "LPNavRptT", - "fill": "$text-secondary", - "content": "Báo cáo & Phân tích", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "LPNavFin", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "LPNavFinI", - "width": 20, - "height": 20, - "iconFontName": "wallet", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "LPNavFinT", - "fill": "$text-secondary", - "content": "Tài chính", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "LPNavL4", - "fill": "$text-tertiary", - "content": "HỆ THỐNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "LPNavRoles", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "LPNavRolesI", - "width": 20, - "height": 20, - "iconFontName": "shield", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "LPNavRolesT", - "fill": "$text-secondary", - "content": "Phân quyền", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "LPNavSet", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "LPNavSetI", - "width": 20, - "height": 20, - "iconFontName": "settings", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "LPNavSetT", - "fill": "$text-secondary", - "content": "Cài đặt", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "LPSidebarUser", - "width": "fill_container", - "padding": [ - 16, - 16 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "LPUserAv", - "width": 36, - "height": 36, - "fill": "#3B82F6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "LPUserAvT", - "fill": "#FFFFFF", - "content": "VH", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "LPUserInfo", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "LPUserN", - "fill": "$text-primary", - "content": "Velik Ho", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "LPUserR", - "fill": "$text-tertiary", - "content": "Owner", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "LPMain", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "LPHeader", - "width": "fill_container", - "padding": [ - 16, - 32 - ], - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "LPHeaderLeft", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "frame", - "id": "LPBreadcrumb", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "LPBread1", - "fill": "$text-tertiary", - "content": "Kinh doanh", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "LPBreadSep", - "fill": "$text-tertiary", - "content": "/", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "LPBread2", - "fill": "$orange-primary", - "content": "Loyalty", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "LPHeaderTitle", - "fill": "$text-primary", - "content": "Chương trình Loyalty", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "LPHeaderRight", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "LPToggleLabel", - "fill": "$text-secondary", - "content": "Trạng thái:", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "frame", - "id": "LPToggle", - "width": 44, - "height": 24, - "fill": "#22C55E", - "cornerRadius": 100, - "padding": [ - 2, - 2 - ], - "justifyContent": "flex_end", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "LPToggleDot", - "width": 20, - "height": 20, - "fill": "#FFFFFF", - "cornerRadius": 100 - } - ] - }, - { - "type": "text", - "id": "LPToggleStatus", - "fill": "#22C55E", - "content": "Đang bật", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "LPContent", - "width": "fill_container", - "height": "fill_container", - "padding": 24, - "layout": "vertical", - "gap": 24, - "clip": true, - "children": [ - { - "type": "frame", - "id": "LPPointsSection", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 24, - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "LPPointsHeader", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "LPPointsTitle", - "fill": "$text-primary", - "content": "Quy tắc tích điểm", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "LPPointsSave", - "fill": "$orange-primary", - "cornerRadius": 8, - "padding": [ - 8, - 14 - ], - "children": [ - { - "type": "text", - "id": "LPPointsSaveT", - "fill": "#FFFFFF", - "content": "Lưu thay đổi", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "LPPointsRule", - "width": "fill_container", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "LPPointsRuleT1", - "fill": "$text-secondary", - "content": "Cứ mỗi", - "fontFamily": "Roboto", - "fontSize": 14 - }, - { - "type": "frame", - "id": "LPPointsInput", - "width": 140, - "height": 44, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "LPPointsInputV", - "fill": "$text-primary", - "content": "10,000₫", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "LPPointsRuleT2", - "fill": "$text-secondary", - "content": "chi tiêu, khách hàng nhận được", - "fontFamily": "Roboto", - "fontSize": 14 - }, - { - "type": "frame", - "id": "LPPointsInput2", - "width": 80, - "height": 44, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "LPPointsInput2V", - "fill": "$orange-primary", - "content": "1", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "LPPointsRuleT3", - "fill": "$text-secondary", - "content": "điểm thưởng", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "id": "LPPointsInfo", - "width": "fill_container", - "fill": "#FF5C0010", - "cornerRadius": 10, - "padding": [ - 12, - 16 - ], - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "LPPointsInfoI", - "width": 18, - "height": 18, - "iconFontName": "info", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "LPPointsInfoT", - "fill": "$text-secondary", - "content": "Điểm sẽ được tích lũy tự động sau mỗi giao dịch thành công", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - } - ] - }, - { - "type": "frame", - "id": "LPTiersSection", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "LPTiersTitle", - "fill": "$text-primary", - "content": "Bậc thành viên", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "LPTiersGrid", - "width": "fill_container", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "LPTier1", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 20, - "layout": "vertical", - "gap": 12, - "stroke": { - "thickness": 1, - "fill": "#CD7F3240", - "sides": [ - "top", - "right", - "bottom", - "left" - ] - }, - "children": [ - { - "type": "frame", - "id": "LPT1Icon", - "width": 48, - "height": 48, - "fill": "#CD7F3220", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "LPT1IconI", - "width": 24, - "height": 24, - "iconFontName": "award", - "iconFontFamily": "lucide", - "fill": "#CD7F32" - } - ] - }, - { - "type": "text", - "id": "LPT1Name", - "fill": "#CD7F32", - "content": "Bronze", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "700" - }, - { - "type": "text", - "id": "LPT1Desc", - "fill": "$text-tertiary", - "content": "Từ 0 điểm", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "frame", - "id": "LPT1Divider", - "width": "fill_container", - "height": 1, - "fill": "$border-subtle" - }, - { - "type": "frame", - "id": "LPT1Benefits", - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "frame", - "id": "LPT1B1", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "LPT1B1I", - "width": 14, - "height": 14, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#22C55E" - }, - { - "type": "text", - "id": "LPT1B1T", - "fill": "$text-secondary", - "content": "Tích điểm cơ bản", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - }, - { - "type": "frame", - "id": "LPT1B2", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "LPT1B2I", - "width": 14, - "height": 14, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#22C55E" - }, - { - "type": "text", - "id": "LPT1B2T", - "fill": "$text-secondary", - "content": "Ưu đãi sinh nhật", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "LPTier2", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 20, - "layout": "vertical", - "gap": 12, - "stroke": { - "thickness": 1, - "fill": "#C0C0C040", - "sides": [ - "top", - "right", - "bottom", - "left" - ] - }, - "children": [ - { - "type": "frame", - "id": "LPT2Icon", - "width": 48, - "height": 48, - "fill": "#C0C0C020", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "LPT2IconI", - "width": 24, - "height": 24, - "iconFontName": "award", - "iconFontFamily": "lucide", - "fill": "#C0C0C0" - } - ] - }, - { - "type": "text", - "id": "LPT2Name", - "fill": "#C0C0C0", - "content": "Silver", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "700" - }, - { - "type": "text", - "id": "LPT2Desc", - "fill": "$text-tertiary", - "content": "Từ 500 điểm", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "frame", - "id": "LPT2Divider", - "width": "fill_container", - "height": 1, - "fill": "$border-subtle" - }, - { - "type": "frame", - "id": "LPT2Benefits", - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "frame", - "id": "LPT2B1", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "LPT2B1I", - "width": 14, - "height": 14, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#22C55E" - }, - { - "type": "text", - "id": "LPT2B1T", - "fill": "$text-secondary", - "content": "Giảm 5% mọi đơn", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - }, - { - "type": "frame", - "id": "LPT2B2", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "LPT2B2I", - "width": 14, - "height": 14, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#22C55E" - }, - { - "type": "text", - "id": "LPT2B2T", - "fill": "$text-secondary", - "content": "x1.5 điểm thưởng", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "LPTier3", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 20, - "layout": "vertical", - "gap": 12, - "stroke": { - "thickness": 1, - "fill": "#FFD70040", - "sides": [ - "top", - "right", - "bottom", - "left" - ] - }, - "children": [ - { - "type": "frame", - "id": "LPT3Icon", - "width": 48, - "height": 48, - "fill": "#FFD70020", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "LPT3IconI", - "width": 24, - "height": 24, - "iconFontName": "award", - "iconFontFamily": "lucide", - "fill": "#FFD700" - } - ] - }, - { - "type": "text", - "id": "LPT3Name", - "fill": "#FFD700", - "content": "Gold", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "700" - }, - { - "type": "text", - "id": "LPT3Desc", - "fill": "$text-tertiary", - "content": "Từ 2,000 điểm", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "frame", - "id": "LPT3Divider", - "width": "fill_container", - "height": 1, - "fill": "$border-subtle" - }, - { - "type": "frame", - "id": "LPT3Benefits", - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "frame", - "id": "LPT3B1", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "LPT3B1I", - "width": 14, - "height": 14, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#22C55E" - }, - { - "type": "text", - "id": "LPT3B1T", - "fill": "$text-secondary", - "content": "Giảm 10% mọi đơn", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - }, - { - "type": "frame", - "id": "LPT3B2", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "LPT3B2I", - "width": 14, - "height": 14, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#22C55E" - }, - { - "type": "text", - "id": "LPT3B2T", - "fill": "$text-secondary", - "content": "x2 điểm thưởng", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "LPTier4", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 20, - "layout": "vertical", - "gap": 12, - "stroke": { - "thickness": 1, - "fill": "#E5E4E240", - "sides": [ - "top", - "right", - "bottom", - "left" - ] - }, - "children": [ - { - "type": "frame", - "id": "LPT4Icon", - "width": 48, - "height": 48, - "fill": "#A78BFA20", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "LPT4IconI", - "width": 24, - "height": 24, - "iconFontName": "crown", - "iconFontFamily": "lucide", - "fill": "#A78BFA" - } - ] - }, - { - "type": "text", - "id": "LPT4Name", - "fill": "#A78BFA", - "content": "Platinum", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "700" - }, - { - "type": "text", - "id": "LPT4Desc", - "fill": "$text-tertiary", - "content": "Từ 5,000 điểm", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "frame", - "id": "LPT4Divider", - "width": "fill_container", - "height": 1, - "fill": "$border-subtle" - }, - { - "type": "frame", - "id": "LPT4Benefits", - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "frame", - "id": "LPT4B1", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "LPT4B1I", - "width": 14, - "height": 14, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#22C55E" - }, - { - "type": "text", - "id": "LPT4B1T", - "fill": "$text-secondary", - "content": "Giảm 15% mọi đơn", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - }, - { - "type": "frame", - "id": "LPT4B2", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "LPT4B2I", - "width": 14, - "height": 14, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#22C55E" - }, - { - "type": "text", - "id": "LPT4B2T", - "fill": "$text-secondary", - "content": "x3 điểm + ưu đãi VIP", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "LPRewardsSection", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "LPRewardsTitle", - "fill": "$text-primary", - "content": "Danh sách phần thưởng", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "LPRewardsTable", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "LPRTHead", - "width": "fill_container", - "height": 48, - "padding": [ - 0, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "LPRTh1", - "width": 250, - "fill": "$text-tertiary", - "content": "Tên phần thưởng", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "LPRTh2", - "width": 120, - "fill": "$text-tertiary", - "content": "Điểm cần", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "LPRTh3", - "width": 150, - "fill": "$text-tertiary", - "content": "Loại", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "LPRTh4", - "width": 120, - "fill": "$text-tertiary", - "content": "Trạng thái", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "LPRRow1", - "width": "fill_container", - "height": 52, - "padding": [ - 0, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "LPRR1C1", - "width": 250, - "fill": "$text-primary", - "content": "Giảm 20% đơn hàng tiếp theo", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "LPRR1C2", - "width": 120, - "fill": "$orange-primary", - "content": "100 điểm", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "LPRR1C3", - "width": 150, - "children": [ - { - "type": "frame", - "id": "LPRR1C3F", - "fill": "#3B82F620", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "LPRR1C3T", - "fill": "#3B82F6", - "content": "Giảm giá", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "LPRR1C4", - "width": 120, - "children": [ - { - "type": "frame", - "id": "LPRR1C4F", - "fill": "#22C55E20", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "LPRR1C4T", - "fill": "#22C55E", - "content": "Hoạt động", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "LPRRow2", - "width": "fill_container", - "height": 52, - "padding": [ - 0, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "LPRR2C1", - "width": 250, - "fill": "$text-primary", - "content": "1 ly cà phê miễn phí (size M)", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "LPRR2C2", - "width": 120, - "fill": "$orange-primary", - "content": "200 điểm", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "LPRR2C3", - "width": 150, - "children": [ - { - "type": "frame", - "id": "LPRR2C3F", - "fill": "#22C55E20", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "LPRR2C3T", - "fill": "#22C55E", - "content": "Sản phẩm miễn phí", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "LPRR2C4", - "width": 120, - "children": [ - { - "type": "frame", - "id": "LPRR2C4F", - "fill": "#22C55E20", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "LPRR2C4T", - "fill": "#22C55E", - "content": "Hoạt động", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "LPRRow3", - "width": "fill_container", - "height": 52, - "padding": [ - 0, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "LPRR3C1", - "width": 250, - "fill": "$text-primary", - "content": "Combo bánh + nước giảm 50%", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "LPRR3C2", - "width": 120, - "fill": "$orange-primary", - "content": "350 điểm", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "LPRR3C3", - "width": 150, - "children": [ - { - "type": "frame", - "id": "LPRR3C3F", - "fill": "#3B82F620", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "LPRR3C3T", - "fill": "#3B82F6", - "content": "Giảm giá", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "LPRR3C4", - "width": 120, - "children": [ - { - "type": "frame", - "id": "LPRR3C4F", - "fill": "#22C55E20", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "LPRR3C4T", - "fill": "#22C55E", - "content": "Hoạt động", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "LPRRow4", - "width": "fill_container", - "height": 52, - "padding": [ - 0, - 20 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "LPRR4C1", - "width": 250, - "fill": "$text-primary", - "content": "Merchandise GoodGo (ly, áo)", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "LPRR4C2", - "width": 120, - "fill": "$orange-primary", - "content": "500 điểm", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "LPRR4C3", - "width": 150, - "children": [ - { - "type": "frame", - "id": "LPRR4C3F", - "fill": "#F59E0B20", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "LPRR4C3T", - "fill": "#F59E0B", - "content": "Quà tặng", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "LPRR4C4", - "width": 120, - "children": [ - { - "type": "frame", - "id": "LPRR4C4F", - "fill": "#8B8B9020", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "LPRR4C4T", - "fill": "$text-tertiary", - "content": "Tạm ngưng", - "fontFamily": "Roboto", - "fontSize": 11, - "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/admin/menu-builder.pen b/pencil-design/src/pages/tPOS/admin/menu-builder.pen deleted file mode 100644 index 2f3e73bb..00000000 --- a/pencil-design/src/pages/tPOS/admin/menu-builder.pen +++ /dev/null @@ -1,1630 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "MenuBuilder", - "name": "Admin/MenuBuilder", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "$bg-page", - "clip": true, - "children": [ - { - "type": "frame", - "id": "MBSidebar", - "width": 260, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "right" - ] - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "MBSidebarLogo", - "width": "fill_container", - "padding": [ - 24, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "MBLogoIcon", - "width": 40, - "height": 40, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "MBLogoT", - "fill": "#FFFFFF", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "800" - } - ] - }, - { - "type": "frame", - "id": "MBLogoTG", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "MBLogoN", - "fill": "$text-primary", - "content": "GoodGo Admin", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "text", - "id": "MBLogoS", - "fill": "$text-tertiary", - "content": "Management Console", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "MBSidebarNav", - "width": "fill_container", - "height": "fill_container", - "padding": [ - 16, - 12 - ], - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "MBNavL1", - "fill": "$text-tertiary", - "content": "TỔNG QUAN", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 0, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "MBNavDash", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MBNavDashI", - "width": 20, - "height": 20, - "iconFontName": "layout-dashboard", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "MBNavDashT", - "fill": "$text-secondary", - "content": "Dashboard", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "MBNavL2", - "fill": "$text-tertiary", - "content": "CỬA HÀNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "MBNavStores", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "MBNavStoresLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MBNavStoresI", - "width": 20, - "height": 20, - "iconFontName": "store", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "MBNavStoresT", - "fill": "$text-secondary", - "content": "Quản lý cửa hàng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "MBNavStoresBdg", - "width": 22, - "height": 22, - "fill": "$bg-interactive", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "MBNavStoresBdgT", - "fill": "$text-tertiary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "MBNavProd", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MBNavProdI", - "width": 18, - "height": 18, - "iconFontName": "package", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "MBNavProdT", - "fill": "#FFFFFF", - "content": "Sản phẩm & Menu", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ], - "fill": "$orange-primary" - }, - { - "type": "frame", - "id": "MBNavStaff", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MBNavStaffI", - "width": 18, - "height": 18, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "MBNavStaffT", - "fill": "$text-tertiary", - "content": "Nhân sự", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "MBNavInv", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MBNavInvI", - "width": 18, - "height": 18, - "iconFontName": "warehouse", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "MBNavInvT", - "fill": "$text-tertiary", - "content": "Kho hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "MBNavDev", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MBNavDevI", - "width": 18, - "height": 18, - "iconFontName": "monitor", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "MBNavDevT", - "fill": "$text-tertiary", - "content": "Thiết bị", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "MBNavL3", - "fill": "$text-tertiary", - "content": "KINH DOANH", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "MBNavCust", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MBNavCustI", - "width": 20, - "height": 20, - "iconFontName": "heart", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "MBNavCustT", - "fill": "$text-secondary", - "content": "Khách hàng & Loyalty", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "MBNavRpt", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MBNavRptI", - "width": 20, - "height": 20, - "iconFontName": "bar-chart-2", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "MBNavRptT", - "fill": "$text-secondary", - "content": "Báo cáo & Phân tích", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "MBNavFin", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MBNavFinI", - "width": 20, - "height": 20, - "iconFontName": "wallet", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "MBNavFinT", - "fill": "$text-secondary", - "content": "Tài chính", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "MBNavL4", - "fill": "$text-tertiary", - "content": "HỆ THỐNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "MBNavRoles", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MBNavRolesI", - "width": 20, - "height": 20, - "iconFontName": "shield", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "MBNavRolesT", - "fill": "$text-secondary", - "content": "Phân quyền", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "MBNavSet", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MBNavSetI", - "width": 20, - "height": 20, - "iconFontName": "settings", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "MBNavSetT", - "fill": "$text-secondary", - "content": "Cài đặt", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "MBSidebarUser", - "width": "fill_container", - "padding": [ - 16, - 16 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "MBUserAv", - "width": 36, - "height": 36, - "fill": "#3B82F6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "MBUserAvT", - "fill": "#FFFFFF", - "content": "VH", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "MBUserInfo", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "MBUserN", - "fill": "$text-primary", - "content": "Velik Ho", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "MBUserR", - "fill": "$text-tertiary", - "content": "Owner", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "MBMain", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "MBHeader", - "width": "fill_container", - "padding": [ - 16, - 32 - ], - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "MBHeaderLeft", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "MBStoreSel", - "height": 40, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MBStoreSelI", - "width": 16, - "height": 16, - "iconFontName": "coffee", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "MBStoreSelT", - "fill": "$text-primary", - "content": "Coffee House Q1", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "icon_font", - "id": "MBStoreSelChev", - "width": 14, - "height": 14, - "iconFontName": "chevron-down", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - }, - { - "type": "frame", - "id": "MBHeaderTitleWrap", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "MBHeaderTitle", - "fill": "$text-primary", - "content": "Menu chính", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "700" - }, - { - "type": "text", - "id": "MBHeaderSub", - "fill": "$text-tertiary", - "content": "30 sản phẩm · Cập nhật 10/02/2026", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - }, - { - "type": "frame", - "id": "MBPublishBtn", - "fill": "$orange-primary", - "cornerRadius": 10, - "padding": [ - 10, - 20 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MBPublishI", - "width": 18, - "height": 18, - "iconFontName": "send", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "MBPublishT", - "fill": "#FFFFFF", - "content": "Publish", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "MBBody", - "width": "fill_container", - "height": "fill_container", - "children": [ - { - "type": "frame", - "id": "MBLeftPanel", - "width": 240, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "right" - ] - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "MBLeftHeader", - "width": "fill_container", - "padding": [ - 12, - 16 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "children": [ - { - "type": "text", - "id": "MBLeftTitle", - "fill": "$text-primary", - "content": "Sản phẩm có sẵn", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "MBSearch", - "width": "fill_container", - "padding": [ - 8, - 12 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "children": [ - { - "type": "frame", - "id": "MBSearchInput", - "width": "fill_container", - "height": 36, - "fill": "$bg-interactive", - "cornerRadius": 8, - "padding": [ - 0, - 10 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MBSearchI", - "width": 14, - "height": 14, - "iconFontName": "search", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "MBSearchT", - "fill": "$text-tertiary", - "content": "Tìm sản phẩm...", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - }, - { - "type": "frame", - "id": "MBLeftList", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "padding": [ - 4, - 0 - ], - "children": [ - { - "type": "frame", - "id": "MBCat1", - "width": "fill_container", - "padding": [ - 10, - 16 - ], - "justifyContent": "space_between", - "alignItems": "center", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "children": [ - { - "type": "frame", - "id": "MBCat1Left", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MBCat1I", - "width": 16, - "height": 16, - "iconFontName": "coffee", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "MBCat1T", - "fill": "$text-primary", - "content": "Cà phê", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "MBCat1Count", - "fill": "$bg-interactive", - "cornerRadius": 100, - "padding": [ - 2, - 8 - ], - "children": [ - { - "type": "text", - "id": "MBCat1CountT", - "fill": "$text-secondary", - "content": "12", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "MBCat2", - "width": "fill_container", - "padding": [ - 10, - 16 - ], - "justifyContent": "space_between", - "alignItems": "center", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "children": [ - { - "type": "frame", - "id": "MBCat2Left", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MBCat2I", - "width": 16, - "height": 16, - "iconFontName": "cup-soda", - "iconFontFamily": "lucide", - "fill": "#A855F7" - }, - { - "type": "text", - "id": "MBCat2T", - "fill": "$text-primary", - "content": "Trà sữa", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "MBCat2Count", - "fill": "$bg-interactive", - "cornerRadius": 100, - "padding": [ - 2, - 8 - ], - "children": [ - { - "type": "text", - "id": "MBCat2CountT", - "fill": "$text-secondary", - "content": "8", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "MBCat3", - "width": "fill_container", - "padding": [ - 10, - 16 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "MBCat3Left", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MBCat3I", - "width": 16, - "height": 16, - "iconFontName": "citrus", - "iconFontFamily": "lucide", - "fill": "#22C55E" - }, - { - "type": "text", - "id": "MBCat3T", - "fill": "$text-primary", - "content": "Nước ép", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "MBCat3Count", - "fill": "$bg-interactive", - "cornerRadius": 100, - "padding": [ - 2, - 8 - ], - "children": [ - { - "type": "text", - "id": "MBCat3CountT", - "fill": "$text-secondary", - "content": "10", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "MBRight", - "width": "fill_container", - "height": "fill_container", - "padding": 24, - "layout": "vertical", - "gap": 16, - "clip": true, - "children": [ - { - "type": "text", - "id": "MBMenuTitle", - "fill": "$text-primary", - "content": "Menu hiện tại", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "MBMenuCat1", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "MBMenuCat1Head", - "width": "fill_container", - "padding": [ - 12, - 16 - ], - "fill": "#FF5C0010", - "justifyContent": "space_between", - "alignItems": "center", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "children": [ - { - "type": "frame", - "id": "MBMenuCat1Left", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MBMenuCat1DragI", - "width": 16, - "height": 16, - "iconFontName": "grip-vertical", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "icon_font", - "id": "MBMenuCat1CofI", - "width": 16, - "height": 16, - "iconFontName": "coffee", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "MBMenuCat1Title", - "fill": "$text-primary", - "content": "Cà phê", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "MBMenuCat1Count", - "fill": "$text-tertiary", - "content": "8 sản phẩm", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - }, - { - "type": "frame", - "id": "MBMenuItem1", - "width": "fill_container", - "padding": [ - 10, - 16, - 10, - 40 - ], - "justifyContent": "space_between", - "alignItems": "center", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "children": [ - { - "type": "frame", - "id": "MBMenuItem1L", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MBMenuItem1Drag", - "width": 14, - "height": 14, - "iconFontName": "grip-vertical", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "MBMenuItem1T", - "fill": "$text-primary", - "content": "Espresso", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "text", - "id": "MBMenuItem1P", - "fill": "$text-secondary", - "content": "35,000 ₫", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "id": "MBMenuItem2", - "width": "fill_container", - "padding": [ - 10, - 16, - 10, - 40 - ], - "justifyContent": "space_between", - "alignItems": "center", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "children": [ - { - "type": "frame", - "id": "MBMenuItem2L", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MBMenuItem2Drag", - "width": 14, - "height": 14, - "iconFontName": "grip-vertical", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "MBMenuItem2T", - "fill": "$text-primary", - "content": "Americano", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "text", - "id": "MBMenuItem2P", - "fill": "$text-secondary", - "content": "39,000 ₫", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "id": "MBMenuItem3", - "width": "fill_container", - "padding": [ - 10, - 16, - 10, - 40 - ], - "justifyContent": "space_between", - "alignItems": "center", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "children": [ - { - "type": "frame", - "id": "MBMenuItem3L", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MBMenuItem3Drag", - "width": 14, - "height": 14, - "iconFontName": "grip-vertical", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "MBMenuItem3T", - "fill": "$text-primary", - "content": "Cappuccino", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "text", - "id": "MBMenuItem3P", - "fill": "$text-secondary", - "content": "45,000 ₫", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "id": "MBMenuItem4", - "width": "fill_container", - "padding": [ - 10, - 16, - 10, - 40 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "MBMenuItem4L", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MBMenuItem4Drag", - "width": 14, - "height": 14, - "iconFontName": "grip-vertical", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "MBMenuItem4T", - "fill": "$text-primary", - "content": "Latte", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "text", - "id": "MBMenuItem4P", - "fill": "$text-secondary", - "content": "49,000 ₫", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - } - ] - }, - { - "type": "frame", - "id": "MBMenuCat2", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "MBMenuCat2Head", - "width": "fill_container", - "padding": [ - 12, - 16 - ], - "fill": "#A855F710", - "justifyContent": "space_between", - "alignItems": "center", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "children": [ - { - "type": "frame", - "id": "MBMenuCat2Left", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MBMenuCat2DragI", - "width": 16, - "height": 16, - "iconFontName": "grip-vertical", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "icon_font", - "id": "MBMenuCat2CupI", - "width": 16, - "height": 16, - "iconFontName": "cup-soda", - "iconFontFamily": "lucide", - "fill": "#A855F7" - }, - { - "type": "text", - "id": "MBMenuCat2Title", - "fill": "$text-primary", - "content": "Trà sữa", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "MBMenuCat2Count", - "fill": "$text-tertiary", - "content": "5 sản phẩm", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - }, - { - "type": "frame", - "id": "MBMenuItem5", - "width": "fill_container", - "padding": [ - 10, - 16, - 10, - 40 - ], - "justifyContent": "space_between", - "alignItems": "center", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "children": [ - { - "type": "frame", - "id": "MBMenuItem5L", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MBMenuItem5Drag", - "width": 14, - "height": 14, - "iconFontName": "grip-vertical", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "MBMenuItem5T", - "fill": "$text-primary", - "content": "Trà sữa truyền thống", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "text", - "id": "MBMenuItem5P", - "fill": "$text-secondary", - "content": "35,000 ₫", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "id": "MBMenuItem6", - "width": "fill_container", - "padding": [ - 10, - 16, - 10, - 40 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "MBMenuItem6L", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MBMenuItem6Drag", - "width": 14, - "height": 14, - "iconFontName": "grip-vertical", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "MBMenuItem6T", - "fill": "$text-primary", - "content": "Trà sữa matcha", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "text", - "id": "MBMenuItem6P", - "fill": "$text-secondary", - "content": "42,000 ₫", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - } - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "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/admin/modifier-groups.pen b/pencil-design/src/pages/tPOS/admin/modifier-groups.pen deleted file mode 100644 index b4081e19..00000000 --- a/pencil-design/src/pages/tPOS/admin/modifier-groups.pen +++ /dev/null @@ -1,1431 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "ModifierGroups", - "name": "Admin/ModifierGroups", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "$bg-page", - "clip": true, - "children": [ - { - "type": "frame", - "id": "MGSidebar", - "width": 260, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "right" - ] - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "MGSidebarLogo", - "width": "fill_container", - "padding": [ - 24, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "MGLogoIcon", - "width": 40, - "height": 40, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "MGLogoT", - "fill": "#FFFFFF", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "800" - } - ] - }, - { - "type": "frame", - "id": "MGLogoTG", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "MGLogoN", - "fill": "$text-primary", - "content": "GoodGo Admin", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "text", - "id": "MGLogoS", - "fill": "$text-tertiary", - "content": "Management Console", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "MGSidebarNav", - "width": "fill_container", - "height": "fill_container", - "padding": [ - 16, - 12 - ], - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "MGNavL1", - "fill": "$text-tertiary", - "content": "TỔNG QUAN", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 0, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "MGNavDash", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MGNavDashI", - "width": 20, - "height": 20, - "iconFontName": "layout-dashboard", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "MGNavDashT", - "fill": "$text-secondary", - "content": "Dashboard", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "MGNavL2", - "fill": "$text-tertiary", - "content": "CỬA HÀNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "MGNavStores", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "MGNavStoresLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MGNavStoresI", - "width": 20, - "height": 20, - "iconFontName": "store", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "MGNavStoresT", - "fill": "$text-secondary", - "content": "Quản lý cửa hàng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "MGNavStoresBdg", - "width": 22, - "height": 22, - "fill": "$bg-interactive", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "MGNavStoresBdgT", - "fill": "$text-tertiary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "MGNavProd", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MGNavProdI", - "width": 18, - "height": 18, - "iconFontName": "package", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "MGNavProdT", - "fill": "#FFFFFF", - "content": "Sản phẩm & Menu", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ], - "fill": "$orange-primary" - }, - { - "type": "frame", - "id": "MGNavStaff", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MGNavStaffI", - "width": 18, - "height": 18, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "MGNavStaffT", - "fill": "$text-tertiary", - "content": "Nhân sự", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "MGNavInv", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MGNavInvI", - "width": 18, - "height": 18, - "iconFontName": "warehouse", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "MGNavInvT", - "fill": "$text-tertiary", - "content": "Kho hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "MGNavDev", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MGNavDevI", - "width": 18, - "height": 18, - "iconFontName": "monitor", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "MGNavDevT", - "fill": "$text-tertiary", - "content": "Thiết bị", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "MGNavL3", - "fill": "$text-tertiary", - "content": "KINH DOANH", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "MGNavCust", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MGNavCustI", - "width": 20, - "height": 20, - "iconFontName": "heart", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "MGNavCustT", - "fill": "$text-secondary", - "content": "Khách hàng & Loyalty", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "MGNavRpt", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MGNavRptI", - "width": 20, - "height": 20, - "iconFontName": "bar-chart-2", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "MGNavRptT", - "fill": "$text-secondary", - "content": "Báo cáo & Phân tích", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "MGNavFin", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MGNavFinI", - "width": 20, - "height": 20, - "iconFontName": "wallet", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "MGNavFinT", - "fill": "$text-secondary", - "content": "Tài chính", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "MGNavL4", - "fill": "$text-tertiary", - "content": "HỆ THỐNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "MGNavRoles", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MGNavRolesI", - "width": 20, - "height": 20, - "iconFontName": "shield", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "MGNavRolesT", - "fill": "$text-secondary", - "content": "Phân quyền", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "MGNavSet", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MGNavSetI", - "width": 20, - "height": 20, - "iconFontName": "settings", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "MGNavSetT", - "fill": "$text-secondary", - "content": "Cài đặt", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "MGSidebarUser", - "width": "fill_container", - "padding": [ - 16, - 16 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "MGUserAv", - "width": 36, - "height": 36, - "fill": "#3B82F6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "MGUserAvT", - "fill": "#FFFFFF", - "content": "VH", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "MGUserInfo", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "MGUserN", - "fill": "$text-primary", - "content": "Velik Ho", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "MGUserR", - "fill": "$text-tertiary", - "content": "Owner", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "MGMain", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "MGHeader", - "width": "fill_container", - "padding": [ - 16, - 32 - ], - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "MGHeaderLeft", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "frame", - "id": "MGBreadcrumb", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "MGBread1", - "fill": "$text-tertiary", - "content": "Sản phẩm", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "MGBreadSep", - "fill": "$text-tertiary", - "content": "/", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "MGBread2", - "fill": "$orange-primary", - "content": "Nhóm Modifier", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "MGHeaderTitle", - "fill": "$text-primary", - "content": "Nhóm Modifier", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "MGHeaderRight", - "children": [ - { - "type": "frame", - "id": "MGCreateBtn", - "fill": "$orange-primary", - "cornerRadius": 10, - "padding": [ - 10, - 20 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MGCreateI", - "width": 18, - "height": 18, - "iconFontName": "plus", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "MGCreateT", - "fill": "#FFFFFF", - "content": "Tạo nhóm mới", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "MGContent", - "width": "fill_container", - "height": "fill_container", - "padding": 28, - "layout": "vertical", - "gap": 20, - "clip": true, - "children": [ - { - "type": "frame", - "id": "MGCard1", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "MGCard1Head", - "width": "fill_container", - "padding": [ - 16, - 20 - ], - "justifyContent": "space_between", - "alignItems": "center", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "children": [ - { - "type": "frame", - "id": "MGCard1Left", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MGCard1Chev", - "width": 18, - "height": 18, - "iconFontName": "chevron-down", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "frame", - "id": "MGCard1Info", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "frame", - "id": "MGCard1TitleRow", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "MGCard1Title", - "fill": "$text-primary", - "content": "Size", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "MGCard1Badge", - "fill": "#EF444420", - "cornerRadius": 100, - "padding": [ - 3, - 8 - ], - "children": [ - { - "type": "text", - "id": "MGCard1BadgeT", - "fill": "#EF4444", - "content": "Bắt buộc", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "text", - "id": "MGCard1Sub", - "fill": "$text-tertiary", - "content": "Chọn 1 · 3 tùy chọn", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - }, - { - "type": "frame", - "id": "MGCard1Actions", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "MGCard1Edit", - "width": 32, - "height": 32, - "fill": "$bg-interactive", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MGCard1EditI", - "width": 16, - "height": 16, - "iconFontName": "pencil", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - }, - { - "type": "frame", - "id": "MGCard1Del", - "width": 32, - "height": 32, - "fill": "$bg-interactive", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MGCard1DelI", - "width": 16, - "height": 16, - "iconFontName": "trash-2", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "MGCard1Body", - "width": "fill_container", - "padding": [ - 0, - 20 - ], - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "MGOpt1", - "width": "fill_container", - "padding": [ - 14, - 0 - ], - "justifyContent": "space_between", - "alignItems": "center", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "children": [ - { - "type": "frame", - "id": "MGOpt1Left", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MGOpt1Drag", - "width": 16, - "height": 16, - "iconFontName": "grip-vertical", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "MGOpt1Name", - "fill": "$text-primary", - "content": "S", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "text", - "id": "MGOpt1Price", - "fill": "$text-secondary", - "content": "0 ₫", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "id": "MGOpt2", - "width": "fill_container", - "padding": [ - 14, - 0 - ], - "justifyContent": "space_between", - "alignItems": "center", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "children": [ - { - "type": "frame", - "id": "MGOpt2Left", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MGOpt2Drag", - "width": 16, - "height": 16, - "iconFontName": "grip-vertical", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "MGOpt2Name", - "fill": "$text-primary", - "content": "M", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "text", - "id": "MGOpt2Price", - "fill": "#22C55E", - "content": "+10,000 ₫", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "MGOpt3", - "width": "fill_container", - "padding": [ - 14, - 0 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "MGOpt3Left", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MGOpt3Drag", - "width": 16, - "height": 16, - "iconFontName": "grip-vertical", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "MGOpt3Name", - "fill": "$text-primary", - "content": "L", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "text", - "id": "MGOpt3Price", - "fill": "#22C55E", - "content": "+15,000 ₫", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "MGCard2", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "MGCard2Head", - "width": "fill_container", - "padding": [ - 16, - 20 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "MGCard2Left", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MGCard2Chev", - "width": 18, - "height": 18, - "iconFontName": "chevron-right", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "frame", - "id": "MGCard2Info", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "frame", - "id": "MGCard2TitleRow", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "MGCard2Title", - "fill": "$text-primary", - "content": "Đường", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "MGCard2Badge", - "fill": "#EF444420", - "cornerRadius": 100, - "padding": [ - 3, - 8 - ], - "children": [ - { - "type": "text", - "id": "MGCard2BadgeT", - "fill": "#EF4444", - "content": "Bắt buộc", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "text", - "id": "MGCard2Sub", - "fill": "$text-tertiary", - "content": "Chọn 1 · 5 tùy chọn: 0%, 30%, 50%, 70%, 100%", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - }, - { - "type": "frame", - "id": "MGCard2Actions", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "MGCard2Edit", - "width": 32, - "height": 32, - "fill": "$bg-interactive", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MGCard2EditI", - "width": 16, - "height": 16, - "iconFontName": "pencil", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - }, - { - "type": "frame", - "id": "MGCard2Del", - "width": 32, - "height": 32, - "fill": "$bg-interactive", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MGCard2DelI", - "width": 16, - "height": 16, - "iconFontName": "trash-2", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "MGCard3", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "MGCard3Head", - "width": "fill_container", - "padding": [ - 16, - 20 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "MGCard3Left", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MGCard3Chev", - "width": 18, - "height": 18, - "iconFontName": "chevron-right", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "frame", - "id": "MGCard3Info", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "frame", - "id": "MGCard3TitleRow", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "MGCard3Title", - "fill": "$text-primary", - "content": "Topping", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "MGCard3Badge", - "fill": "#3B82F620", - "cornerRadius": 100, - "padding": [ - 3, - 8 - ], - "children": [ - { - "type": "text", - "id": "MGCard3BadgeT", - "fill": "#3B82F6", - "content": "Tùy chọn", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "text", - "id": "MGCard3Sub", - "fill": "$text-tertiary", - "content": "Chọn tối đa 3 · 6 tùy chọn", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - }, - { - "type": "frame", - "id": "MGCard3Actions", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "MGCard3Edit", - "width": 32, - "height": 32, - "fill": "$bg-interactive", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MGCard3EditI", - "width": 16, - "height": 16, - "iconFontName": "pencil", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - }, - { - "type": "frame", - "id": "MGCard3Del", - "width": 32, - "height": 32, - "fill": "$bg-interactive", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MGCard3DelI", - "width": 16, - "height": 16, - "iconFontName": "trash-2", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - } - ] - } - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "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/admin/notification-center.pen b/pencil-design/src/pages/tPOS/admin/notification-center.pen deleted file mode 100644 index b2f61365..00000000 --- a/pencil-design/src/pages/tPOS/admin/notification-center.pen +++ /dev/null @@ -1,1692 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "NotificationCenter", - "name": "Admin/NotificationCenter", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "$bg-page", - "clip": true, - "children": [ - { - "type": "frame", - "id": "NCSidebar", - "width": 260, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "right" - ] - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "NCSidebarLogo", - "width": "fill_container", - "padding": [ - 24, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "NCLogoIcon", - "width": 40, - "height": 40, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NCLogoT", - "fill": "#FFFFFF", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "800" - } - ] - }, - { - "type": "frame", - "id": "NCLogoTG", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "NCLogoN", - "fill": "$text-primary", - "content": "GoodGo Admin", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "text", - "id": "NCLogoS", - "fill": "$text-tertiary", - "content": "Management Console", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "NCSidebarNav", - "width": "fill_container", - "height": "fill_container", - "padding": [ - 16, - 12 - ], - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "NCNavL1", - "fill": "$text-tertiary", - "content": "TỔNG QUAN", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 0, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "NCNavDash", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "NCNavDashI", - "width": 20, - "height": 20, - "iconFontName": "layout-dashboard", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "NCNavDashT", - "fill": "$text-secondary", - "content": "Dashboard", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "NCNavL2", - "fill": "$text-tertiary", - "content": "CỬA HÀNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "NCNavStores", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "NCNavStoresLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "NCNavStoresI", - "width": 20, - "height": 20, - "iconFontName": "store", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "NCNavStoresT", - "fill": "$text-secondary", - "content": "Quản lý cửa hàng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "NCNavStoresBdg", - "width": 22, - "height": 22, - "fill": "$bg-interactive", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NCNavStoresBdgT", - "fill": "$text-tertiary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "NCNavProd", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "NCNavProdI", - "width": 18, - "height": 18, - "iconFontName": "package", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "NCNavProdT", - "fill": "$text-tertiary", - "content": "Sản phẩm & Menu", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "NCNavStaff", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "NCNavStaffI", - "width": 18, - "height": 18, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "NCNavStaffT", - "fill": "$text-tertiary", - "content": "Nhân sự", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "NCNavInv", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "NCNavInvI", - "width": 18, - "height": 18, - "iconFontName": "warehouse", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "NCNavInvT", - "fill": "$text-tertiary", - "content": "Kho hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "NCNavDev", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "NCNavDevI", - "width": 18, - "height": 18, - "iconFontName": "monitor", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "NCNavDevT", - "fill": "$text-tertiary", - "content": "Thiết bị", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "NCNavL3", - "fill": "$text-tertiary", - "content": "KINH DOANH", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "NCNavCust", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "NCNavCustI", - "width": 20, - "height": 20, - "iconFontName": "heart", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "NCNavCustT", - "fill": "$text-secondary", - "content": "Khách hàng & Loyalty", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "NCNavRpt", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "NCNavRptI", - "width": 20, - "height": 20, - "iconFontName": "bar-chart-2", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "NCNavRptT", - "fill": "$text-secondary", - "content": "Báo cáo & Phân tích", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "NCNavFin", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "NCNavFinI", - "width": 20, - "height": 20, - "iconFontName": "wallet", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "NCNavFinT", - "fill": "$text-secondary", - "content": "Tài chính", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "NCNavL4", - "fill": "$text-tertiary", - "content": "HỆ THỐNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "NCNavRoles", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "NCNavRolesI", - "width": 20, - "height": 20, - "iconFontName": "shield", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "NCNavRolesT", - "fill": "$text-secondary", - "content": "Phân quyền", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "NCNavSet", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "NCNavSetI", - "width": 20, - "height": 20, - "iconFontName": "settings", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "NCNavSetT", - "fill": "#FFFFFF", - "content": "Cài đặt", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ], - "fill": "$orange-primary" - } - ] - }, - { - "type": "frame", - "id": "NCSidebarUser", - "width": "fill_container", - "padding": [ - 16, - 16 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "NCUserAv", - "width": 36, - "height": 36, - "fill": "#3B82F6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NCUserAvT", - "fill": "#FFFFFF", - "content": "VH", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "NCUserInfo", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "NCUserN", - "fill": "$text-primary", - "content": "Velik Ho", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "NCUserR", - "fill": "$text-tertiary", - "content": "Owner", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "NCMain", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "NCHeader", - "width": "fill_container", - "padding": [ - 16, - 32 - ], - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "NCHeaderLeft", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "frame", - "id": "NCBreadcrumb", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NCBread1", - "fill": "$text-tertiary", - "content": "Hệ thống", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "NCBreadSep", - "fill": "$text-tertiary", - "content": "/", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "NCBread2", - "fill": "$orange-primary", - "content": "Thông báo", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "NCHeaderTitle", - "fill": "$text-primary", - "content": "Thông báo", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "NCHeaderRight", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "NCMarkAll", - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 10, - 16 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "NCMarkAllI", - "width": 16, - "height": 16, - "iconFontName": "check-check", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "NCMarkAllT", - "fill": "$text-secondary", - "content": "Đánh dấu tất cả đã đọc", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "NCContent", - "width": "fill_container", - "height": "fill_container", - "padding": 32, - "layout": "vertical", - "gap": 24, - "clip": true, - "children": [ - { - "type": "frame", - "id": "NCTabs", - "gap": 0, - "children": [ - { - "type": "frame", - "id": "NCTab1", - "fill": "$orange-primary", - "cornerRadius": [ - 10, - 0, - 0, - 10 - ], - "padding": [ - 10, - 20 - ], - "children": [ - { - "type": "text", - "id": "NCTab1T", - "fill": "#FFFFFF", - "content": "Tất cả", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NCTab2", - "fill": "$bg-interactive", - "padding": [ - 10, - 20 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NCTab2T", - "fill": "$text-secondary", - "content": "Chưa đọc", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "frame", - "id": "NCTab2Badge", - "fill": "#EF4444", - "cornerRadius": 100, - "padding": [ - 2, - 8 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NCTab2BadgeT", - "fill": "#FFFFFF", - "content": "5", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "700" - } - ] - } - ] - }, - { - "type": "frame", - "id": "NCTab3", - "fill": "$bg-interactive", - "cornerRadius": [ - 0, - 10, - 10, - 0 - ], - "padding": [ - 10, - 20 - ], - "children": [ - { - "type": "text", - "id": "NCTab3T", - "fill": "$text-secondary", - "content": "Đã đọc", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - } - ] - }, - { - "type": "frame", - "id": "NCSettingsCard", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 28, - "layout": "vertical", - "gap": 24, - "children": [ - { - "type": "frame", - "id": "NCSettingsHeader", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NCSettingsTitle", - "fill": "$text-primary", - "content": "Cài đặt thông báo", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "NCChannelLabels", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "NCLabelEmail", - "width": 60, - "justifyContent": "center", - "children": [ - { - "type": "text", - "id": "NCLabelEmailT", - "fill": "$text-tertiary", - "content": "Email", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NCLabelSMS", - "width": 60, - "justifyContent": "center", - "children": [ - { - "type": "text", - "id": "NCLabelSMST", - "fill": "$text-tertiary", - "content": "SMS", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NCLabelPush", - "width": 60, - "justifyContent": "center", - "children": [ - { - "type": "text", - "id": "NCLabelPushT", - "fill": "$text-tertiary", - "content": "Push", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "NCDivider1", - "width": "fill_container", - "height": 1, - "fill": "$border-subtle" - }, - { - "type": "frame", - "id": "NCChannel1", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "NCCh1Left", - "gap": 14, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "NCCh1Icon", - "width": 40, - "height": 40, - "fill": "#22C55E15", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "NCCh1IconI", - "width": 20, - "height": 20, - "iconFontName": "shopping-bag", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - }, - { - "type": "frame", - "id": "NCCh1Text", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "NCCh1Title", - "fill": "$text-primary", - "content": "Đơn hàng mới", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "text", - "id": "NCCh1Desc", - "fill": "$text-tertiary", - "content": "Thông báo khi có đơn hàng mới được tạo", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - }, - { - "type": "frame", - "id": "NCCh1Toggles", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "NCCh1TgEmail", - "width": 60, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "NCCh1SwEmail", - "width": 44, - "height": 24, - "fill": "$orange-primary", - "cornerRadius": 100, - "padding": [ - 2, - 2 - ], - "justifyContent": "flex_end", - "children": [ - { - "type": "frame", - "id": "NCCh1DotEmail", - "width": 20, - "height": 20, - "fill": "#FFFFFF", - "cornerRadius": 100 - } - ] - } - ] - }, - { - "type": "frame", - "id": "NCCh1TgSMS", - "width": 60, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "NCCh1SwSMS", - "width": 44, - "height": 24, - "fill": "$bg-interactive", - "cornerRadius": 100, - "padding": [ - 2, - 2 - ], - "children": [ - { - "type": "frame", - "id": "NCCh1DotSMS", - "width": 20, - "height": 20, - "fill": "$text-tertiary", - "cornerRadius": 100 - } - ] - } - ] - }, - { - "type": "frame", - "id": "NCCh1TgPush", - "width": 60, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "NCCh1SwPush", - "width": 44, - "height": 24, - "fill": "$orange-primary", - "cornerRadius": 100, - "padding": [ - 2, - 2 - ], - "justifyContent": "flex_end", - "children": [ - { - "type": "frame", - "id": "NCCh1DotPush", - "width": 20, - "height": 20, - "fill": "#FFFFFF", - "cornerRadius": 100 - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "NCDivider2", - "width": "fill_container", - "height": 1, - "fill": "$border-subtle" - }, - { - "type": "frame", - "id": "NCChannel2", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "NCCh2Left", - "gap": 14, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "NCCh2Icon", - "width": 40, - "height": 40, - "fill": "#EF444415", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "NCCh2IconI", - "width": 20, - "height": 20, - "iconFontName": "package-x", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - }, - { - "type": "frame", - "id": "NCCh2Text", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "NCCh2Title", - "fill": "$text-primary", - "content": "Hết hàng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "text", - "id": "NCCh2Desc", - "fill": "$text-tertiary", - "content": "Cảnh báo khi sản phẩm sắp hết hoặc đã hết hàng", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - }, - { - "type": "frame", - "id": "NCCh2Toggles", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "NCCh2TgEmail", - "width": 60, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "NCCh2SwEmail", - "width": 44, - "height": 24, - "fill": "$orange-primary", - "cornerRadius": 100, - "padding": [ - 2, - 2 - ], - "justifyContent": "flex_end", - "children": [ - { - "type": "frame", - "id": "NCCh2DotEmail", - "width": 20, - "height": 20, - "fill": "#FFFFFF", - "cornerRadius": 100 - } - ] - } - ] - }, - { - "type": "frame", - "id": "NCCh2TgSMS", - "width": 60, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "NCCh2SwSMS", - "width": 44, - "height": 24, - "fill": "$orange-primary", - "cornerRadius": 100, - "padding": [ - 2, - 2 - ], - "justifyContent": "flex_end", - "children": [ - { - "type": "frame", - "id": "NCCh2DotSMS", - "width": 20, - "height": 20, - "fill": "#FFFFFF", - "cornerRadius": 100 - } - ] - } - ] - }, - { - "type": "frame", - "id": "NCCh2TgPush", - "width": 60, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "NCCh2SwPush", - "width": 44, - "height": 24, - "fill": "$orange-primary", - "cornerRadius": 100, - "padding": [ - 2, - 2 - ], - "justifyContent": "flex_end", - "children": [ - { - "type": "frame", - "id": "NCCh2DotPush", - "width": 20, - "height": 20, - "fill": "#FFFFFF", - "cornerRadius": 100 - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "NCDivider3", - "width": "fill_container", - "height": 1, - "fill": "$border-subtle" - }, - { - "type": "frame", - "id": "NCChannel3", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "NCCh3Left", - "gap": 14, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "NCCh3Icon", - "width": 40, - "height": 40, - "fill": "#3B82F615", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "NCCh3IconI", - "width": 20, - "height": 20, - "iconFontName": "user-check", - "iconFontFamily": "lucide", - "fill": "#3B82F6" - } - ] - }, - { - "type": "frame", - "id": "NCCh3Text", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "NCCh3Title", - "fill": "$text-primary", - "content": "Nhân viên check-in", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "text", - "id": "NCCh3Desc", - "fill": "$text-tertiary", - "content": "Thông báo khi nhân viên check-in/check-out ca làm", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - }, - { - "type": "frame", - "id": "NCCh3Toggles", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "NCCh3TgEmail", - "width": 60, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "NCCh3SwEmail", - "width": 44, - "height": 24, - "fill": "$bg-interactive", - "cornerRadius": 100, - "padding": [ - 2, - 2 - ], - "children": [ - { - "type": "frame", - "id": "NCCh3DotEmail", - "width": 20, - "height": 20, - "fill": "$text-tertiary", - "cornerRadius": 100 - } - ] - } - ] - }, - { - "type": "frame", - "id": "NCCh3TgSMS", - "width": 60, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "NCCh3SwSMS", - "width": 44, - "height": 24, - "fill": "$bg-interactive", - "cornerRadius": 100, - "padding": [ - 2, - 2 - ], - "children": [ - { - "type": "frame", - "id": "NCCh3DotSMS", - "width": 20, - "height": 20, - "fill": "$text-tertiary", - "cornerRadius": 100 - } - ] - } - ] - }, - { - "type": "frame", - "id": "NCCh3TgPush", - "width": 60, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "NCCh3SwPush", - "width": 44, - "height": 24, - "fill": "$orange-primary", - "cornerRadius": 100, - "padding": [ - 2, - 2 - ], - "justifyContent": "flex_end", - "children": [ - { - "type": "frame", - "id": "NCCh3DotPush", - "width": 20, - "height": 20, - "fill": "#FFFFFF", - "cornerRadius": 100 - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "NCDivider4", - "width": "fill_container", - "height": 1, - "fill": "$border-subtle" - }, - { - "type": "frame", - "id": "NCChannel4", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "NCCh4Left", - "gap": 14, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "NCCh4Icon", - "width": 40, - "height": 40, - "fill": "#F59E0B15", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "NCCh4IconI", - "width": 20, - "height": 20, - "iconFontName": "trending-up", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - } - ] - }, - { - "type": "frame", - "id": "NCCh4Text", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "NCCh4Title", - "fill": "$text-primary", - "content": "Doanh thu hàng ngày", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "text", - "id": "NCCh4Desc", - "fill": "$text-tertiary", - "content": "Báo cáo tổng doanh thu cuối ngày", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - }, - { - "type": "frame", - "id": "NCCh4Toggles", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "NCCh4TgEmail", - "width": 60, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "NCCh4SwEmail", - "width": 44, - "height": 24, - "fill": "$orange-primary", - "cornerRadius": 100, - "padding": [ - 2, - 2 - ], - "justifyContent": "flex_end", - "children": [ - { - "type": "frame", - "id": "NCCh4DotEmail", - "width": 20, - "height": 20, - "fill": "#FFFFFF", - "cornerRadius": 100 - } - ] - } - ] - }, - { - "type": "frame", - "id": "NCCh4TgSMS", - "width": 60, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "NCCh4SwSMS", - "width": 44, - "height": 24, - "fill": "$bg-interactive", - "cornerRadius": 100, - "padding": [ - 2, - 2 - ], - "children": [ - { - "type": "frame", - "id": "NCCh4DotSMS", - "width": 20, - "height": 20, - "fill": "$text-tertiary", - "cornerRadius": 100 - } - ] - } - ] - }, - { - "type": "frame", - "id": "NCCh4TgPush", - "width": 60, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "NCCh4SwPush", - "width": 44, - "height": 24, - "fill": "$orange-primary", - "cornerRadius": 100, - "padding": [ - 2, - 2 - ], - "justifyContent": "flex_end", - "children": [ - { - "type": "frame", - "id": "NCCh4DotPush", - "width": 20, - "height": 20, - "fill": "#FFFFFF", - "cornerRadius": 100 - } - ] - } - ] - } - ] - } - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "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/admin/onboarding-business.pen b/pencil-design/src/pages/tPOS/admin/onboarding-business.pen deleted file mode 100644 index b99f85a5..00000000 --- a/pencil-design/src/pages/tPOS/admin/onboarding-business.pen +++ /dev/null @@ -1,145 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "OB1Root", - "name": "Admin/OnboardingBusiness", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "$bg-page", - "clip": true, - "children": [ - { - "type": "frame", "id": "OB1Sidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", - "children": [ - {"type": "frame", "id": "OB1SLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "OB1LogoIc", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "OB1LogoG", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"} - ]}, - {"type": "frame", "id": "OB1LogoTG", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "OB1LogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "OB1LogoS", "fill": "$text-tertiary", "content": "Thiết lập ban đầu", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "OB1Steps", "width": "fill_container", "height": "fill_container", "padding": [32, 24], "layout": "vertical", "gap": 0, "children": [ - {"type": "text", "id": "OB1StepLabel", "fill": "$text-tertiary", "content": "TIẾN TRÌNH", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 0, 20, 0]}, - {"type": "frame", "id": "OB1S1", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "fill": "#FF5C0015", "cornerRadius": 10, "children": [ - {"type": "frame", "id": "OB1S1C", "width": 32, "height": 32, "fill": "$orange-primary", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "OB1S1N", "fill": "#FFFFFF", "content": "1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "text", "id": "OB1S1T", "fill": "$orange-primary", "content": "Doanh nghiệp", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "OB1L12", "width": 2, "height": 24, "fill": "$border-default", "marginLeft": 23}, - {"type": "frame", "id": "OB1S2", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [ - {"type": "frame", "id": "OB1S2C", "width": 32, "height": 32, "fill": "$bg-interactive", "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "OB1S2N", "fill": "$text-tertiary", "content": "2", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "text", "id": "OB1S2T", "fill": "$text-tertiary", "content": "Cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "OB1L23", "width": 2, "height": 24, "fill": "$border-default", "marginLeft": 23}, - {"type": "frame", "id": "OB1S3", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [ - {"type": "frame", "id": "OB1S3C", "width": 32, "height": 32, "fill": "$bg-interactive", "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "OB1S3N", "fill": "$text-tertiary", "content": "3", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "text", "id": "OB1S3T", "fill": "$text-tertiary", "content": "Sản phẩm", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "OB1L34", "width": 2, "height": 24, "fill": "$border-default", "marginLeft": 23}, - {"type": "frame", "id": "OB1S4", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [ - {"type": "frame", "id": "OB1S4C", "width": 32, "height": 32, "fill": "$bg-interactive", "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "OB1S4N", "fill": "$text-tertiary", "content": "4", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "text", "id": "OB1S4T", "fill": "$text-tertiary", "content": "Nhân viên", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "OB1L45", "width": 2, "height": 24, "fill": "$border-default", "marginLeft": 23}, - {"type": "frame", "id": "OB1S5", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [ - {"type": "frame", "id": "OB1S5C", "width": 32, "height": 32, "fill": "$bg-interactive", "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "OB1S5N", "fill": "$text-tertiary", "content": "5", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "text", "id": "OB1S5T", "fill": "$text-tertiary", "content": "Thiết bị", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "OB1L56", "width": 2, "height": 24, "fill": "$border-default", "marginLeft": 23}, - {"type": "frame", "id": "OB1S6", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [ - {"type": "frame", "id": "OB1S6C", "width": 32, "height": 32, "fill": "$bg-interactive", "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "OB1S6N", "fill": "$text-tertiary", "content": "6", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"} - ]}, - {"type": "text", "id": "OB1S6T", "fill": "$text-tertiary", "content": "Hoàn tất", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]} - ]} - ] - }, - { - "type": "frame", "id": "OB1Main", "width": "fill_container", "height": "fill_container", "layout": "vertical", "justifyContent": "center", "alignItems": "center", "padding": [40, 40], - "children": [ - {"type": "frame", "id": "OB1Card", "width": 720, "fill": "$bg-elevated", "cornerRadius": 16, "padding": 32, "layout": "vertical", "gap": 24, "children": [ - {"type": "frame", "id": "OB1FH", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "OB1FTitle", "fill": "$text-primary", "content": "Thông tin doanh nghiệp", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "text", "id": "OB1FSub", "fill": "$text-tertiary", "content": "Nhập thông tin cơ bản về doanh nghiệp của bạn", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "OB1Row1", "width": "fill_container", "gap": 20, "children": [ - {"type": "frame", "id": "OB1F1", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "OB1F1L", "fill": "$text-secondary", "content": "Tên doanh nghiệp *", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "OB1F1I", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [ - {"type": "text", "id": "OB1F1P", "fill": "$text-tertiary", "content": "VD: Công ty TNHH ABC", "fontFamily": "Roboto", "fontSize": 14} - ]} - ]}, - {"type": "frame", "id": "OB1F2", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "OB1F2L", "fill": "$text-secondary", "content": "Mã số thuế", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "OB1F2I", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [ - {"type": "text", "id": "OB1F2P", "fill": "$text-tertiary", "content": "VD: 0312345678", "fontFamily": "Roboto", "fontSize": 14} - ]} - ]} - ]}, - {"type": "frame", "id": "OB1Row2", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "OB1F3L", "fill": "$text-secondary", "content": "Địa chỉ trụ sở *", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "OB1F3I", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [ - {"type": "text", "id": "OB1F3P", "fill": "$text-tertiary", "content": "Nhập địa chỉ trụ sở chính", "fontFamily": "Roboto", "fontSize": 14} - ]} - ]}, - {"type": "frame", "id": "OB1Row3", "width": "fill_container", "gap": 20, "children": [ - {"type": "frame", "id": "OB1F4", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "OB1F4L", "fill": "$text-secondary", "content": "Số điện thoại *", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "OB1F4I", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [ - {"type": "text", "id": "OB1F4P", "fill": "$text-tertiary", "content": "VD: 028 1234 5678", "fontFamily": "Roboto", "fontSize": 14} - ]} - ]}, - {"type": "frame", "id": "OB1F5", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "OB1F5L", "fill": "$text-secondary", "content": "Email", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "OB1F5I", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [ - {"type": "text", "id": "OB1F5P", "fill": "$text-tertiary", "content": "contact@company.com", "fontFamily": "Roboto", "fontSize": 14} - ]} - ]} - ]}, - {"type": "frame", "id": "OB1Row4", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "OB1F6L", "fill": "$text-secondary", "content": "Logo doanh nghiệp", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "OB1F6I", "width": "fill_container", "height": 100, "fill": "$bg-interactive", "cornerRadius": 10, "stroke": {"thickness": 2, "fill": "$border-default", "dasharray": "6 4"}, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "gap": 8, "children": [ - {"type": "icon_font", "id": "OB1F6Ic", "width": 28, "height": 28, "iconFontName": "upload", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "OB1F6T", "fill": "$text-tertiary", "content": "Kéo thả hoặc nhấn để tải logo", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "OB1F6S", "fill": "$text-tertiary", "content": "PNG, JPG tối đa 2MB", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "OB1Footer", "width": "fill_container", "justifyContent": "flex_end", "padding": [8, 0, 0, 0], "children": [ - {"type": "frame", "id": "OB1NextBtn", "fill": "$orange-primary", "cornerRadius": 10, "padding": [12, 28], "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "OB1NextT", "fill": "#FFFFFF", "content": "Tiếp theo", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "icon_font", "id": "OB1NextI", "width": 18, "height": 18, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "#FFFFFF"} - ]} - ]} - ]} - ] - } - ] - } - ], - "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/admin/onboarding-device.pen b/pencil-design/src/pages/tPOS/admin/onboarding-device.pen deleted file mode 100644 index d1afbdea..00000000 --- a/pencil-design/src/pages/tPOS/admin/onboarding-device.pen +++ /dev/null @@ -1,79 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", "id": "OB5Root", "name": "Admin/OnboardingDevice", "reusable": true, "width": 1440, "height": 900, "fill": "$bg-page", "clip": true, - "children": [ - {"type": "frame", "id": "OB5Sidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", "children": [ - {"type": "frame", "id": "OB5SLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "OB5LogoIc", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "OB5LogoG", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"}]}, - {"type": "frame", "id": "OB5LogoTG", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "OB5LogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, {"type": "text", "id": "OB5LogoS", "fill": "$text-tertiary", "content": "Thiết lập ban đầu", "fontFamily": "Roboto", "fontSize": 11}]} - ]}, - {"type": "frame", "id": "OB5Steps", "width": "fill_container", "height": "fill_container", "padding": [32, 24], "layout": "vertical", "gap": 0, "children": [ - {"type": "text", "id": "OB5StepLabel", "fill": "$text-tertiary", "content": "TIẾN TRÌNH", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 0, 20, 0]}, - {"type": "frame", "id": "OB5S1", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [{"type": "frame", "id": "OB5S1C", "width": 32, "height": 32, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "OB5S1Ck", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}]}, {"type": "text", "id": "OB5S1T", "fill": "$text-primary", "content": "Doanh nghiệp", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "OB5L12", "width": 2, "height": 24, "fill": "#22C55E", "marginLeft": 23}, - {"type": "frame", "id": "OB5S2", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [{"type": "frame", "id": "OB5S2C", "width": 32, "height": 32, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "OB5S2Ck", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}]}, {"type": "text", "id": "OB5S2T", "fill": "$text-primary", "content": "Cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "OB5L23", "width": 2, "height": 24, "fill": "#22C55E", "marginLeft": 23}, - {"type": "frame", "id": "OB5S3", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [{"type": "frame", "id": "OB5S3C", "width": 32, "height": 32, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "OB5S3Ck", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}]}, {"type": "text", "id": "OB5S3T", "fill": "$text-primary", "content": "Sản phẩm", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "OB5L34", "width": 2, "height": 24, "fill": "#22C55E", "marginLeft": 23}, - {"type": "frame", "id": "OB5S4", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [{"type": "frame", "id": "OB5S4C", "width": 32, "height": 32, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "OB5S4Ck", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}]}, {"type": "text", "id": "OB5S4T", "fill": "$text-primary", "content": "Nhân viên", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "OB5L45", "width": 2, "height": 24, "fill": "#22C55E", "marginLeft": 23}, - {"type": "frame", "id": "OB5S5", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "fill": "#FF5C0015", "cornerRadius": 10, "children": [{"type": "frame", "id": "OB5S5C", "width": 32, "height": 32, "fill": "$orange-primary", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "OB5S5N", "fill": "#FFFFFF", "content": "5", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, {"type": "text", "id": "OB5S5T", "fill": "$orange-primary", "content": "Thiết bị", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, - {"type": "frame", "id": "OB5L56", "width": 2, "height": 24, "fill": "$border-default", "marginLeft": 23}, - {"type": "frame", "id": "OB5S6", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [{"type": "frame", "id": "OB5S6C", "width": 32, "height": 32, "fill": "$bg-interactive", "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "OB5S6N", "fill": "$text-tertiary", "content": "6", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, {"type": "text", "id": "OB5S6T", "fill": "$text-tertiary", "content": "Hoàn tất", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]} - ]} - ]}, - {"type": "frame", "id": "OB5Main", "width": "fill_container", "height": "fill_container", "layout": "vertical", "justifyContent": "center", "alignItems": "center", "padding": [40, 40], "children": [ - {"type": "frame", "id": "OB5Card", "width": 720, "fill": "$bg-elevated", "cornerRadius": 16, "padding": 32, "layout": "vertical", "gap": 24, "children": [ - {"type": "frame", "id": "OB5FH", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "OB5FTitle", "fill": "$text-primary", "content": "Kết nối thiết bị", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "text", "id": "OB5FSub", "fill": "$text-tertiary", "content": "Kết nối thiết bị POS và máy in để bắt đầu bán hàng", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "OB5Pairing", "width": "fill_container", "gap": 24, "children": [ - {"type": "frame", "id": "OB5QR", "width": 160, "height": 160, "fill": "#FFFFFF", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "frame", "id": "OB5QRInner", "width": 120, "height": 120, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "OB5QRIc", "width": 48, "height": 48, "iconFontName": "qr-code", "iconFontFamily": "lucide", "fill": "$text-tertiary"}]} - ]}, - {"type": "frame", "id": "OB5PairInfo", "width": "fill_container", "layout": "vertical", "gap": 16, "justifyContent": "center", "children": [ - {"type": "text", "id": "OB5PairT1", "fill": "$text-primary", "content": "Quét mã QR hoặc nhập mã kết nối", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "text", "id": "OB5PairT2", "fill": "$text-tertiary", "content": "Mở ứng dụng GoodGo POS trên thiết bị và quét mã QR bên trái", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "frame", "id": "OB5CodeWrap", "layout": "vertical", "gap": 6, "children": [ - {"type": "text", "id": "OB5CodeL", "fill": "$text-secondary", "content": "Mã kết nối", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "frame", "id": "OB5CodeBox", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [12, 16], "gap": 12, "alignItems": "center", "children": [ - {"type": "text", "id": "OB5Code", "fill": "$orange-primary", "content": "8A3F-K2M9", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700", "letterSpacing": 4}, - {"type": "icon_font", "id": "OB5CopyIc", "width": 18, "height": 18, "iconFontName": "copy", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]} - ]} - ]} - ]}, - {"type": "frame", "id": "OB5Devices", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ - {"type": "text", "id": "OB5DevH", "fill": "$text-secondary", "content": "Thiết bị đã kết nối (1)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "OB5Dev1", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 12, "padding": [14, 16], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "OB5Dev1L", "gap": 14, "alignItems": "center", "children": [ - {"type": "frame", "id": "OB5Dev1Ic", "width": 44, "height": 44, "fill": "#3B82F620", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "OB5Dev1IcI", "width": 22, "height": 22, "iconFontName": "tablet", "iconFontFamily": "lucide", "fill": "#3B82F6"}]}, - {"type": "frame", "id": "OB5Dev1Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "OB5Dev1N", "fill": "$text-primary", "content": "iPad Pro - Quầy 1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "OB5Dev1S", "fill": "$text-tertiary", "content": "Kết nối lúc 10:30 hôm nay", "fontFamily": "Roboto", "fontSize": 12}]} - ]}, - {"type": "frame", "id": "OB5Dev1Badge", "fill": "#22C55E20", "cornerRadius": 8, "padding": [4, 10], "children": [{"type": "text", "id": "OB5Dev1BT", "fill": "#22C55E", "content": "Đã kết nối", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]} - ]} - ]}, - {"type": "frame", "id": "OB5Printer", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ - {"type": "text", "id": "OB5PrintH", "fill": "$text-secondary", "content": "Thiết lập máy in", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "OB5PrintOpts", "width": "fill_container", "gap": 12, "children": [ - {"type": "frame", "id": "OB5PrintAuto", "width": "fill_container", "height": 56, "fill": "#FF5C0015", "stroke": {"thickness": 2, "fill": "$orange-primary"}, "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "gap": 8, "children": [{"type": "icon_font", "id": "OB5PrintAutoI", "width": 18, "height": 18, "iconFontName": "scan-search", "iconFontFamily": "lucide", "fill": "$orange-primary"}, {"type": "text", "id": "OB5PrintAutoT", "fill": "$orange-primary", "content": "Tự động phát hiện", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, - {"type": "frame", "id": "OB5PrintMan", "width": "fill_container", "height": 56, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "gap": 8, "children": [{"type": "icon_font", "id": "OB5PrintManI", "width": 18, "height": 18, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "OB5PrintManT", "fill": "$text-secondary", "content": "Cài đặt thủ công", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]} - ]} - ]}, - {"type": "frame", "id": "OB5Footer", "width": "fill_container", "justifyContent": "space_between", "padding": [8, 0, 0, 0], "children": [ - {"type": "frame", "id": "OB5FootL", "gap": 12, "children": [{"type": "frame", "id": "OB5BackBtn", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [12, 28], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "OB5BackI", "width": 18, "height": 18, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "OB5BackT", "fill": "$text-secondary", "content": "Quay lại", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}]}, - {"type": "frame", "id": "OB5FootR", "gap": 12, "children": [ - {"type": "frame", "id": "OB5SkipBtn", "cornerRadius": 10, "padding": [12, 20], "alignItems": "center", "children": [{"type": "text", "id": "OB5SkipT", "fill": "$text-tertiary", "content": "Bỏ qua", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "OB5NextBtn", "fill": "$orange-primary", "cornerRadius": 10, "padding": [12, 28], "gap": 8, "alignItems": "center", "children": [{"type": "text", "id": "OB5NextT", "fill": "#FFFFFF", "content": "Tiếp theo", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "icon_font", "id": "OB5NextI", "width": 18, "height": 18, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "#FFFFFF"}]} - ]} - ]} - ]} - ]} - ] - } - ], - "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/admin/onboarding-products.pen b/pencil-design/src/pages/tPOS/admin/onboarding-products.pen deleted file mode 100644 index 5ce4b72f..00000000 --- a/pencil-design/src/pages/tPOS/admin/onboarding-products.pen +++ /dev/null @@ -1,1159 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "OB3Root", - "name": "Admin/OnboardingProducts", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "$bg-page", - "clip": true, - "children": [ - { - "type": "frame", - "id": "OB3Sidebar", - "width": 260, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "right" - ] - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "OB3SLogo", - "width": "fill_container", - "padding": [ - 24, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "OB3LogoIc", - "width": 40, - "height": 40, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "OB3LogoG", - "fill": "#FFFFFF", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "800" - } - ] - }, - { - "type": "frame", - "id": "OB3LogoTG", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "OB3LogoN", - "fill": "$text-primary", - "content": "GoodGo Admin", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "text", - "id": "OB3LogoS", - "fill": "$text-tertiary", - "content": "Thiết lập ban đầu", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "OB3Steps", - "width": "fill_container", - "height": "fill_container", - "padding": [ - 32, - 24 - ], - "layout": "vertical", - "gap": 0, - "children": [ - { - "type": "text", - "id": "OB3StepLabel", - "fill": "$text-tertiary", - "content": "TIẾN TRÌNH", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 0, - 0, - 20, - 0 - ] - }, - { - "type": "frame", - "id": "OB3S1", - "width": "fill_container", - "gap": 14, - "alignItems": "center", - "padding": [ - 10, - 8 - ], - "children": [ - { - "type": "frame", - "id": "OB3S1C", - "width": 32, - "height": 32, - "fill": "#22C55E", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "OB3S1Ck", - "width": 18, - "height": 18, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - } - ] - }, - { - "type": "text", - "id": "OB3S1T", - "fill": "$text-primary", - "content": "Doanh nghiệp", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "OB3L12", - "width": 2, - "height": 24, - "fill": "#22C55E", - "marginLeft": 23 - }, - { - "type": "frame", - "id": "OB3S2", - "width": "fill_container", - "gap": 14, - "alignItems": "center", - "padding": [ - 10, - 8 - ], - "children": [ - { - "type": "frame", - "id": "OB3S2C", - "width": 32, - "height": 32, - "fill": "#22C55E", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "OB3S2Ck", - "width": 18, - "height": 18, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - } - ] - }, - { - "type": "text", - "id": "OB3S2T", - "fill": "$text-primary", - "content": "Cửa hàng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "OB3L23", - "width": 2, - "height": 24, - "fill": "#22C55E", - "marginLeft": 23 - }, - { - "type": "frame", - "id": "OB3S3", - "width": "fill_container", - "gap": 14, - "alignItems": "center", - "padding": [ - 10, - 8 - ], - "fill": "#FF5C0015", - "cornerRadius": 10, - "children": [ - { - "type": "frame", - "id": "OB3S3C", - "width": 32, - "height": 32, - "fill": "$orange-primary", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "OB3S3N", - "fill": "#FFFFFF", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "OB3S3T", - "fill": "$orange-primary", - "content": "Sản phẩm", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "OB3L34", - "width": 2, - "height": 24, - "fill": "$border-default", - "marginLeft": 23 - }, - { - "type": "frame", - "id": "OB3S4", - "width": "fill_container", - "gap": 14, - "alignItems": "center", - "padding": [ - 10, - 8 - ], - "children": [ - { - "type": "frame", - "id": "OB3S4C", - "width": 32, - "height": 32, - "fill": "$bg-interactive", - "stroke": { - "thickness": 2, - "fill": "$border-default" - }, - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "OB3S4N", - "fill": "$text-tertiary", - "content": "4", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "OB3S4T", - "fill": "$text-tertiary", - "content": "Nhân viên", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "OB3L45", - "width": 2, - "height": 24, - "fill": "$border-default", - "marginLeft": 23 - }, - { - "type": "frame", - "id": "OB3S5", - "width": "fill_container", - "gap": 14, - "alignItems": "center", - "padding": [ - 10, - 8 - ], - "children": [ - { - "type": "frame", - "id": "OB3S5C", - "width": 32, - "height": 32, - "fill": "$bg-interactive", - "stroke": { - "thickness": 2, - "fill": "$border-default" - }, - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "OB3S5N", - "fill": "$text-tertiary", - "content": "5", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "OB3S5T", - "fill": "$text-tertiary", - "content": "Thiết bị", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "OB3L56", - "width": 2, - "height": 24, - "fill": "$border-default", - "marginLeft": 23 - }, - { - "type": "frame", - "id": "OB3S6", - "width": "fill_container", - "gap": 14, - "alignItems": "center", - "padding": [ - 10, - 8 - ], - "children": [ - { - "type": "frame", - "id": "OB3S6C", - "width": 32, - "height": 32, - "fill": "$bg-interactive", - "stroke": { - "thickness": 2, - "fill": "$border-default" - }, - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "OB3S6N", - "fill": "$text-tertiary", - "content": "6", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "OB3S6T", - "fill": "$text-tertiary", - "content": "Hoàn tất", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "OB3Main", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "padding": [ - 40, - 40 - ], - "children": [ - { - "type": "frame", - "id": "OB3Card", - "width": 720, - "fill": "$bg-elevated", - "cornerRadius": 16, - "padding": 32, - "layout": "vertical", - "gap": 24, - "children": [ - { - "type": "frame", - "id": "OB3FH", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "OB3FTitle", - "fill": "$text-primary", - "content": "Thêm sản phẩm", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "700" - }, - { - "type": "text", - "id": "OB3FSub", - "fill": "$text-tertiary", - "content": "Thêm sản phẩm vào cửa hàng hoặc bỏ qua để thêm sau", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "id": "OB3Opts", - "width": "fill_container", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "OB3OptCSV", - "width": "fill_container", - "height": 80, - "fill": "$bg-interactive", - "cornerRadius": 12, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "gap": 8, - "children": [ - { - "type": "icon_font", - "id": "OB3OptCSVI", - "width": 24, - "height": 24, - "iconFontName": "file-spreadsheet", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "OB3OptCSVT", - "fill": "$text-secondary", - "content": "Import từ CSV", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "OB3OptMan", - "width": "fill_container", - "height": 80, - "fill": "#FF5C0015", - "stroke": { - "thickness": 2, - "fill": "$orange-primary" - }, - "cornerRadius": 12, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "gap": 8, - "children": [ - { - "type": "icon_font", - "id": "OB3OptManI", - "width": 24, - "height": 24, - "iconFontName": "pencil", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "OB3OptManT", - "fill": "$orange-primary", - "content": "Thêm thủ công", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "OB3QForm", - "width": "fill_container", - "gap": 12, - "alignItems": "flex_end", - "children": [ - { - "type": "frame", - "id": "OB3QF1", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "text", - "id": "OB3QF1L", - "fill": "$text-secondary", - "content": "Tên sản phẩm", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "OB3QF1I", - "width": "fill_container", - "height": 40, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "OB3QF1P", - "fill": "$text-tertiary", - "content": "Tên SP", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - } - ] - }, - { - "type": "frame", - "id": "OB3QF2", - "width": 140, - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "text", - "id": "OB3QF2L", - "fill": "$text-secondary", - "content": "Giá", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "OB3QF2I", - "width": "fill_container", - "height": 40, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "OB3QF2P", - "fill": "$text-tertiary", - "content": "0 đ", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - } - ] - }, - { - "type": "frame", - "id": "OB3QF3", - "width": 140, - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "text", - "id": "OB3QF3L", - "fill": "$text-secondary", - "content": "Danh mục", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "OB3QF3I", - "width": "fill_container", - "height": 40, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "alignItems": "center", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "OB3QF3P", - "fill": "$text-tertiary", - "content": "Chọn", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "icon_font", - "id": "OB3QF3Ic", - "width": 16, - "height": 16, - "iconFontName": "chevron-down", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "OB3AddBtn", - "width": 40, - "height": 40, - "fill": "$orange-primary", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "OB3AddI", - "width": 18, - "height": 18, - "iconFontName": "plus", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - } - ] - } - ] - }, - { - "type": "frame", - "id": "OB3List", - "width": "fill_container", - "layout": "vertical", - "gap": 0, - "children": [ - { - "type": "text", - "id": "OB3ListH", - "fill": "$text-secondary", - "content": "Sản phẩm đã thêm (3)", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600", - "padding": [ - 0, - 0, - 12, - 0 - ] - }, - { - "type": "frame", - "id": "OB3P1", - "width": "fill_container", - "padding": [ - 12, - 0 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "OB3P1L", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "OB3P1Av", - "width": 36, - "height": 36, - "fill": "#FF5C0020", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "OB3P1E", - "content": "☕", - "fontSize": 18, - "fontFamily": "Roboto" - } - ] - }, - { - "type": "frame", - "id": "OB3P1Info", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "OB3P1N", - "fill": "$text-primary", - "content": "Cà phê sữa đá", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "text", - "id": "OB3P1Cat", - "fill": "$text-tertiary", - "content": "Đồ uống", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - }, - { - "type": "text", - "id": "OB3P1Price", - "fill": "$orange-primary", - "content": "29.000đ", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "OB3P2", - "width": "fill_container", - "padding": [ - 12, - 0 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "OB3P2L", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "OB3P2Av", - "width": 36, - "height": 36, - "fill": "#3B82F620", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "OB3P2E", - "content": "🧋", - "fontSize": 18, - "fontFamily": "Roboto" - } - ] - }, - { - "type": "frame", - "id": "OB3P2Info", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "OB3P2N", - "fill": "$text-primary", - "content": "Trà sữa trân châu", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "text", - "id": "OB3P2Cat", - "fill": "$text-tertiary", - "content": "Đồ uống", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - }, - { - "type": "text", - "id": "OB3P2Price", - "fill": "$orange-primary", - "content": "35.000đ", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "OB3P3", - "width": "fill_container", - "padding": [ - 12, - 0 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "OB3P3L", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "OB3P3Av", - "width": 36, - "height": 36, - "fill": "#F59E0B20", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "OB3P3E", - "content": "🥐", - "fontSize": 18, - "fontFamily": "Roboto" - } - ] - }, - { - "type": "frame", - "id": "OB3P3Info", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "OB3P3N", - "fill": "$text-primary", - "content": "Bánh croissant", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "text", - "id": "OB3P3Cat", - "fill": "$text-tertiary", - "content": "Bánh ngọt", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - }, - { - "type": "text", - "id": "OB3P3Price", - "fill": "$orange-primary", - "content": "25.000đ", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "OB3Footer", - "width": "fill_container", - "justifyContent": "space_between", - "padding": [ - 8, - 0, - 0, - 0 - ], - "children": [ - { - "type": "frame", - "id": "OB3FootL", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "OB3BackBtn", - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 12, - 28 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "OB3BackI", - "width": 18, - "height": 18, - "iconFontName": "arrow-left", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "OB3BackT", - "fill": "$text-secondary", - "content": "Quay lại", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "OB3FootR", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "OB3SkipBtn", - "cornerRadius": 10, - "padding": [ - 12, - 20 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "OB3SkipT", - "fill": "$text-tertiary", - "content": "Bỏ qua", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "OB3NextBtn", - "fill": "$orange-primary", - "cornerRadius": 10, - "padding": [ - 12, - 28 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "OB3NextT", - "fill": "#FFFFFF", - "content": "Tiếp theo", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "icon_font", - "id": "OB3NextI", - "width": 18, - "height": 18, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - } - ] - } - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "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/admin/onboarding-ready.pen b/pencil-design/src/pages/tPOS/admin/onboarding-ready.pen deleted file mode 100644 index 1631a234..00000000 --- a/pencil-design/src/pages/tPOS/admin/onboarding-ready.pen +++ /dev/null @@ -1,67 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", "id": "OB6Root", "name": "Admin/OnboardingReady", "reusable": true, "width": 1440, "height": 900, "fill": "$bg-page", "clip": true, - "children": [ - {"type": "frame", "id": "OB6Sidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", "children": [ - {"type": "frame", "id": "OB6SLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "OB6LogoIc", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "OB6LogoG", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"}]}, - {"type": "frame", "id": "OB6LogoTG", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "OB6LogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, {"type": "text", "id": "OB6LogoS", "fill": "$text-tertiary", "content": "Thiết lập ban đầu", "fontFamily": "Roboto", "fontSize": 11}]} - ]}, - {"type": "frame", "id": "OB6Steps", "width": "fill_container", "height": "fill_container", "padding": [32, 24], "layout": "vertical", "gap": 0, "children": [ - {"type": "text", "id": "OB6StepLabel", "fill": "$text-tertiary", "content": "TIẾN TRÌNH", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 0, 20, 0]}, - {"type": "frame", "id": "OB6S1", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [{"type": "frame", "id": "OB6S1C", "width": 32, "height": 32, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "OB6S1Ck", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}]}, {"type": "text", "id": "OB6S1T", "fill": "$text-primary", "content": "Doanh nghiệp", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "OB6L12", "width": 2, "height": 24, "fill": "#22C55E", "marginLeft": 23}, - {"type": "frame", "id": "OB6S2", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [{"type": "frame", "id": "OB6S2C", "width": 32, "height": 32, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "OB6S2Ck", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}]}, {"type": "text", "id": "OB6S2T", "fill": "$text-primary", "content": "Cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "OB6L23", "width": 2, "height": 24, "fill": "#22C55E", "marginLeft": 23}, - {"type": "frame", "id": "OB6S3", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [{"type": "frame", "id": "OB6S3C", "width": 32, "height": 32, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "OB6S3Ck", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}]}, {"type": "text", "id": "OB6S3T", "fill": "$text-primary", "content": "Sản phẩm", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "OB6L34", "width": 2, "height": 24, "fill": "#22C55E", "marginLeft": 23}, - {"type": "frame", "id": "OB6S4", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [{"type": "frame", "id": "OB6S4C", "width": 32, "height": 32, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "OB6S4Ck", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}]}, {"type": "text", "id": "OB6S4T", "fill": "$text-primary", "content": "Nhân viên", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "OB6L45", "width": 2, "height": 24, "fill": "#22C55E", "marginLeft": 23}, - {"type": "frame", "id": "OB6S5", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [{"type": "frame", "id": "OB6S5C", "width": 32, "height": 32, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "OB6S5Ck", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}]}, {"type": "text", "id": "OB6S5T", "fill": "$text-primary", "content": "Thiết bị", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "OB6L56", "width": 2, "height": 24, "fill": "#22C55E", "marginLeft": 23}, - {"type": "frame", "id": "OB6S6", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "fill": "#22C55E15", "cornerRadius": 10, "children": [{"type": "frame", "id": "OB6S6C", "width": 32, "height": 32, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "OB6S6Ck", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}]}, {"type": "text", "id": "OB6S6T", "fill": "#22C55E", "content": "Hoàn tất", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]} - ]} - ]}, - {"type": "frame", "id": "OB6Main", "width": "fill_container", "height": "fill_container", "layout": "vertical", "justifyContent": "center", "alignItems": "center", "padding": [40, 40], "children": [ - {"type": "frame", "id": "OB6Card", "width": 560, "fill": "$bg-elevated", "cornerRadius": 16, "padding": 40, "layout": "vertical", "gap": 32, "alignItems": "center", "children": [ - {"type": "frame", "id": "OB6SuccessIc", "width": 72, "height": 72, "fill": "#22C55E15", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "OB6PartIc", "width": 36, "height": 36, "iconFontName": "party-popper", "iconFontFamily": "lucide", "fill": "#22C55E"}]}, - {"type": "frame", "id": "OB6SuccTxt", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "OB6Title", "fill": "$text-primary", "content": "Thiết lập hoàn tất!", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700", "textAlign": "center"}, - {"type": "text", "id": "OB6Sub", "fill": "$text-tertiary", "content": "Mọi thứ đã sẵn sàng để bạn bắt đầu bán hàng", "fontFamily": "Roboto", "fontSize": 14, "textAlign": "center"} - ]}, - {"type": "frame", "id": "OB6Checklist", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 12, "padding": [16, 20], "layout": "vertical", "gap": 14, "children": [ - {"type": "frame", "id": "OB6Chk1", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "OB6Chk1L", "gap": 10, "alignItems": "center", "children": [{"type": "icon_font", "id": "OB6Chk1Ic", "width": 18, "height": 18, "iconFontName": "circle-check", "iconFontFamily": "lucide", "fill": "#22C55E"}, {"type": "text", "id": "OB6Chk1T", "fill": "$text-primary", "content": "Thông tin doanh nghiệp", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "text", "id": "OB6Chk1V", "fill": "#22C55E", "content": "Hoàn thành", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "OB6Chk2", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "OB6Chk2L", "gap": 10, "alignItems": "center", "children": [{"type": "icon_font", "id": "OB6Chk2Ic", "width": 18, "height": 18, "iconFontName": "circle-check", "iconFontFamily": "lucide", "fill": "#22C55E"}, {"type": "text", "id": "OB6Chk2T", "fill": "$text-primary", "content": "Cửa hàng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "text", "id": "OB6Chk2V", "fill": "#22C55E", "content": "Hoàn thành", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "OB6Chk3", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "OB6Chk3L", "gap": 10, "alignItems": "center", "children": [{"type": "icon_font", "id": "OB6Chk3Ic", "width": 18, "height": 18, "iconFontName": "circle-check", "iconFontFamily": "lucide", "fill": "#22C55E"}, {"type": "text", "id": "OB6Chk3T", "fill": "$text-primary", "content": "Sản phẩm", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "text", "id": "OB6Chk3V", "fill": "$text-tertiary", "content": "12 sản phẩm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "OB6Chk4", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "OB6Chk4L", "gap": 10, "alignItems": "center", "children": [{"type": "icon_font", "id": "OB6Chk4Ic", "width": 18, "height": 18, "iconFontName": "circle-check", "iconFontFamily": "lucide", "fill": "#22C55E"}, {"type": "text", "id": "OB6Chk4T", "fill": "$text-primary", "content": "Nhân viên", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "text", "id": "OB6Chk4V", "fill": "$text-tertiary", "content": "3 nhân viên", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "OB6Chk5", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "OB6Chk5L", "gap": 10, "alignItems": "center", "children": [{"type": "icon_font", "id": "OB6Chk5Ic", "width": 18, "height": 18, "iconFontName": "circle-check", "iconFontFamily": "lucide", "fill": "#22C55E"}, {"type": "text", "id": "OB6Chk5T", "fill": "$text-primary", "content": "Thiết bị POS", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "text", "id": "OB6Chk5V", "fill": "$text-tertiary", "content": "1 thiết bị", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "OB6CTA", "width": "fill_container", "height": 52, "fill": "$orange-primary", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "gap": 10, "children": [ - {"type": "icon_font", "id": "OB6CTAIc", "width": 20, "height": 20, "iconFontName": "rocket", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "OB6CTAT", "fill": "#FFFFFF", "content": "Bắt đầu bán hàng", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]}, - {"type": "text", "id": "OB6Guide", "fill": "$text-tertiary", "content": "Xem hướng dẫn sử dụng", "fontFamily": "Roboto", "fontSize": 13, "textDecoration": "underline"} - ]} - ]} - ] - } - ], - "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/admin/onboarding-staff.pen b/pencil-design/src/pages/tPOS/admin/onboarding-staff.pen deleted file mode 100644 index 98e83709..00000000 --- a/pencil-design/src/pages/tPOS/admin/onboarding-staff.pen +++ /dev/null @@ -1,79 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", "id": "OB4Root", "name": "Admin/OnboardingStaff", "reusable": true, "width": 1440, "height": 900, "fill": "$bg-page", "clip": true, - "children": [ - {"type": "frame", "id": "OB4Sidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", "children": [ - {"type": "frame", "id": "OB4SLogo", "width": "fill_container", "padding": [24, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "OB4LogoIc", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "OB4LogoG", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "800"} - ]}, - {"type": "frame", "id": "OB4LogoTG", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "OB4LogoN", "fill": "$text-primary", "content": "GoodGo Admin", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "OB4LogoS", "fill": "$text-tertiary", "content": "Thiết lập ban đầu", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "OB4Steps", "width": "fill_container", "height": "fill_container", "padding": [32, 24], "layout": "vertical", "gap": 0, "children": [ - {"type": "text", "id": "OB4StepLabel", "fill": "$text-tertiary", "content": "TIẾN TRÌNH", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [0, 0, 20, 0]}, - {"type": "frame", "id": "OB4S1", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [{"type": "frame", "id": "OB4S1C", "width": 32, "height": 32, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "OB4S1Ck", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}]}, {"type": "text", "id": "OB4S1T", "fill": "$text-primary", "content": "Doanh nghiệp", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "OB4L12", "width": 2, "height": 24, "fill": "#22C55E", "marginLeft": 23}, - {"type": "frame", "id": "OB4S2", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [{"type": "frame", "id": "OB4S2C", "width": 32, "height": 32, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "OB4S2Ck", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}]}, {"type": "text", "id": "OB4S2T", "fill": "$text-primary", "content": "Cửa hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "OB4L23", "width": 2, "height": 24, "fill": "#22C55E", "marginLeft": 23}, - {"type": "frame", "id": "OB4S3", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [{"type": "frame", "id": "OB4S3C", "width": 32, "height": 32, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "OB4S3Ck", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}]}, {"type": "text", "id": "OB4S3T", "fill": "$text-primary", "content": "Sản phẩm", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "OB4L34", "width": 2, "height": 24, "fill": "#22C55E", "marginLeft": 23}, - {"type": "frame", "id": "OB4S4", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "fill": "#FF5C0015", "cornerRadius": 10, "children": [{"type": "frame", "id": "OB4S4C", "width": 32, "height": 32, "fill": "$orange-primary", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "OB4S4N", "fill": "#FFFFFF", "content": "4", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, {"type": "text", "id": "OB4S4T", "fill": "$orange-primary", "content": "Nhân viên", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, - {"type": "frame", "id": "OB4L45", "width": 2, "height": 24, "fill": "$border-default", "marginLeft": 23}, - {"type": "frame", "id": "OB4S5", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [{"type": "frame", "id": "OB4S5C", "width": 32, "height": 32, "fill": "$bg-interactive", "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "OB4S5N", "fill": "$text-tertiary", "content": "5", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, {"type": "text", "id": "OB4S5T", "fill": "$text-tertiary", "content": "Thiết bị", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "OB4L56", "width": 2, "height": 24, "fill": "$border-default", "marginLeft": 23}, - {"type": "frame", "id": "OB4S6", "width": "fill_container", "gap": 14, "alignItems": "center", "padding": [10, 8], "children": [{"type": "frame", "id": "OB4S6C", "width": 32, "height": 32, "fill": "$bg-interactive", "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "OB4S6N", "fill": "$text-tertiary", "content": "6", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, {"type": "text", "id": "OB4S6T", "fill": "$text-tertiary", "content": "Hoàn tất", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]} - ]} - ]}, - {"type": "frame", "id": "OB4Main", "width": "fill_container", "height": "fill_container", "layout": "vertical", "justifyContent": "center", "alignItems": "center", "padding": [40, 40], "children": [ - {"type": "frame", "id": "OB4Card", "width": 720, "fill": "$bg-elevated", "cornerRadius": 16, "padding": 32, "layout": "vertical", "gap": 24, "children": [ - {"type": "frame", "id": "OB4FH", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "OB4FTitle", "fill": "$text-primary", "content": "Thêm nhân viên", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "text", "id": "OB4FSub", "fill": "$text-tertiary", "content": "Mời nhân viên tham gia hệ thống hoặc bỏ qua để thêm sau", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "OB4Invite", "width": "fill_container", "gap": 12, "alignItems": "flex_end", "children": [ - {"type": "frame", "id": "OB4IF1", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "text", "id": "OB4IF1L", "fill": "$text-secondary", "content": "Email hoặc SĐT", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "frame", "id": "OB4IF1I", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "children": [{"type": "text", "id": "OB4IF1P", "fill": "$text-tertiary", "content": "email@example.com", "fontFamily": "Roboto", "fontSize": 14}]} - ]}, - {"type": "frame", "id": "OB4IF2", "width": 200, "layout": "vertical", "gap": 6, "children": [ - {"type": "text", "id": "OB4IF2L", "fill": "$text-secondary", "content": "Vai trò", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "frame", "id": "OB4IF2I", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "alignItems": "center", "justifyContent": "space_between", "children": [{"type": "text", "id": "OB4IF2V", "fill": "$text-secondary", "content": "Thu ngân", "fontFamily": "Roboto", "fontSize": 14}, {"type": "icon_font", "id": "OB4IF2Ic", "width": 16, "height": 16, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"}]} - ]}, - {"type": "frame", "id": "OB4InvBtn", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 20], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "OB4InvI", "width": 18, "height": 18, "iconFontName": "send", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, {"type": "text", "id": "OB4InvT", "fill": "#FFFFFF", "content": "Mời", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]} - ]}, - {"type": "frame", "id": "OB4StaffList", "width": "fill_container", "layout": "vertical", "gap": 0, "children": [ - {"type": "text", "id": "OB4SLH", "fill": "$text-secondary", "content": "Đã mời (2)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "padding": [0, 0, 12, 0]}, - {"type": "frame", "id": "OB4Staff1", "width": "fill_container", "padding": [14, 0], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "OB4St1L", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "OB4St1Av", "width": 40, "height": 40, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "OB4St1AvT", "fill": "#FFFFFF", "content": "NT", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}, - {"type": "frame", "id": "OB4St1Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "OB4St1N", "fill": "$text-primary", "content": "nguyenthu@email.com", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "OB4St1R", "fill": "$text-tertiary", "content": "Thu ngân", "fontFamily": "Roboto", "fontSize": 12}]} - ]}, - {"type": "frame", "id": "OB4St1Badge", "fill": "#F59E0B20", "cornerRadius": 8, "padding": [4, 10], "children": [{"type": "text", "id": "OB4St1BT", "fill": "#F59E0B", "content": "Chờ xác nhận", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]} - ]}, - {"type": "frame", "id": "OB4Staff2", "width": "fill_container", "padding": [14, 0], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "OB4St2L", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "OB4St2Av", "width": 40, "height": 40, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "OB4St2AvT", "fill": "#FFFFFF", "content": "LH", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}, - {"type": "frame", "id": "OB4St2Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "OB4St2N", "fill": "$text-primary", "content": "0901234567", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "OB4St2R", "fill": "$text-tertiary", "content": "Phục vụ", "fontFamily": "Roboto", "fontSize": 12}]} - ]}, - {"type": "frame", "id": "OB4St2Badge", "fill": "#F59E0B20", "cornerRadius": 8, "padding": [4, 10], "children": [{"type": "text", "id": "OB4St2BT", "fill": "#F59E0B", "content": "Chờ xác nhận", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]} - ]} - ]}, - {"type": "frame", "id": "OB4Footer", "width": "fill_container", "justifyContent": "space_between", "padding": [8, 0, 0, 0], "children": [ - {"type": "frame", "id": "OB4FootL", "gap": 12, "children": [{"type": "frame", "id": "OB4BackBtn", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [12, 28], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "OB4BackI", "width": 18, "height": 18, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "OB4BackT", "fill": "$text-secondary", "content": "Quay lại", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}]}, - {"type": "frame", "id": "OB4FootR", "gap": 12, "children": [ - {"type": "frame", "id": "OB4SkipBtn", "cornerRadius": 10, "padding": [12, 20], "alignItems": "center", "children": [{"type": "text", "id": "OB4SkipT", "fill": "$text-tertiary", "content": "Bỏ qua", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "OB4NextBtn", "fill": "$orange-primary", "cornerRadius": 10, "padding": [12, 28], "gap": 8, "alignItems": "center", "children": [{"type": "text", "id": "OB4NextT", "fill": "#FFFFFF", "content": "Tiếp theo", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "icon_font", "id": "OB4NextI", "width": 18, "height": 18, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "#FFFFFF"}]} - ]} - ]} - ]} - ]} - ] - } - ], - "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/admin/onboarding-store.pen b/pencil-design/src/pages/tPOS/admin/onboarding-store.pen deleted file mode 100644 index b358074d..00000000 --- a/pencil-design/src/pages/tPOS/admin/onboarding-store.pen +++ /dev/null @@ -1,932 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "OB2Root", - "name": "Admin/OnboardingStore", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "$bg-page", - "clip": true, - "children": [ - { - "type": "frame", - "id": "OB2Sidebar", - "width": 260, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "right" - ] - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "OB2SLogo", - "width": "fill_container", - "padding": [ - 24, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "OB2LogoIc", - "width": 40, - "height": 40, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "OB2LogoG", - "fill": "#FFFFFF", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "800" - } - ] - }, - { - "type": "frame", - "id": "OB2LogoTG", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "OB2LogoN", - "fill": "$text-primary", - "content": "GoodGo Admin", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "text", - "id": "OB2LogoS", - "fill": "$text-tertiary", - "content": "Thiết lập ban đầu", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "OB2Steps", - "width": "fill_container", - "height": "fill_container", - "padding": [ - 32, - 24 - ], - "layout": "vertical", - "gap": 0, - "children": [ - { - "type": "text", - "id": "OB2StepLabel", - "fill": "$text-tertiary", - "content": "TIẾN TRÌNH", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 0, - 0, - 20, - 0 - ] - }, - { - "type": "frame", - "id": "OB2S1", - "width": "fill_container", - "gap": 14, - "alignItems": "center", - "padding": [ - 10, - 8 - ], - "children": [ - { - "type": "frame", - "id": "OB2S1C", - "width": 32, - "height": 32, - "fill": "#22C55E", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "OB2S1Ck", - "width": 18, - "height": 18, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - } - ] - }, - { - "type": "text", - "id": "OB2S1T", - "fill": "$text-primary", - "content": "Doanh nghiệp", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "OB2L12", - "width": 2, - "height": 24, - "fill": "#22C55E", - "marginLeft": 23 - }, - { - "type": "frame", - "id": "OB2S2", - "width": "fill_container", - "gap": 14, - "alignItems": "center", - "padding": [ - 10, - 8 - ], - "fill": "#FF5C0015", - "cornerRadius": 10, - "children": [ - { - "type": "frame", - "id": "OB2S2C", - "width": 32, - "height": 32, - "fill": "$orange-primary", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "OB2S2N", - "fill": "#FFFFFF", - "content": "2", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "OB2S2T", - "fill": "$orange-primary", - "content": "Cửa hàng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "OB2L23", - "width": 2, - "height": 24, - "fill": "$border-default", - "marginLeft": 23 - }, - { - "type": "frame", - "id": "OB2S3", - "width": "fill_container", - "gap": 14, - "alignItems": "center", - "padding": [ - 10, - 8 - ], - "children": [ - { - "type": "frame", - "id": "OB2S3C", - "width": 32, - "height": 32, - "fill": "$bg-interactive", - "stroke": { - "thickness": 2, - "fill": "$border-default" - }, - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "OB2S3N", - "fill": "$text-tertiary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "OB2S3T", - "fill": "$text-tertiary", - "content": "Sản phẩm", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "OB2L34", - "width": 2, - "height": 24, - "fill": "$border-default", - "marginLeft": 23 - }, - { - "type": "frame", - "id": "OB2S4", - "width": "fill_container", - "gap": 14, - "alignItems": "center", - "padding": [ - 10, - 8 - ], - "children": [ - { - "type": "frame", - "id": "OB2S4C", - "width": 32, - "height": 32, - "fill": "$bg-interactive", - "stroke": { - "thickness": 2, - "fill": "$border-default" - }, - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "OB2S4N", - "fill": "$text-tertiary", - "content": "4", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "OB2S4T", - "fill": "$text-tertiary", - "content": "Nhân viên", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "OB2L45", - "width": 2, - "height": 24, - "fill": "$border-default", - "marginLeft": 23 - }, - { - "type": "frame", - "id": "OB2S5", - "width": "fill_container", - "gap": 14, - "alignItems": "center", - "padding": [ - 10, - 8 - ], - "children": [ - { - "type": "frame", - "id": "OB2S5C", - "width": 32, - "height": 32, - "fill": "$bg-interactive", - "stroke": { - "thickness": 2, - "fill": "$border-default" - }, - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "OB2S5N", - "fill": "$text-tertiary", - "content": "5", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "OB2S5T", - "fill": "$text-tertiary", - "content": "Thiết bị", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "OB2L56", - "width": 2, - "height": 24, - "fill": "$border-default", - "marginLeft": 23 - }, - { - "type": "frame", - "id": "OB2S6", - "width": "fill_container", - "gap": 14, - "alignItems": "center", - "padding": [ - 10, - 8 - ], - "children": [ - { - "type": "frame", - "id": "OB2S6C", - "width": 32, - "height": 32, - "fill": "$bg-interactive", - "stroke": { - "thickness": 2, - "fill": "$border-default" - }, - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "OB2S6N", - "fill": "$text-tertiary", - "content": "6", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "OB2S6T", - "fill": "$text-tertiary", - "content": "Hoàn tất", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "OB2Main", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "padding": [ - 40, - 40 - ], - "children": [ - { - "type": "frame", - "id": "OB2Card", - "width": 720, - "fill": "$bg-elevated", - "cornerRadius": 16, - "padding": 32, - "layout": "vertical", - "gap": 24, - "children": [ - { - "type": "frame", - "id": "OB2FH", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "OB2FTitle", - "fill": "$text-primary", - "content": "Tạo cửa hàng đầu tiên", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "700" - }, - { - "type": "text", - "id": "OB2FSub", - "fill": "$text-tertiary", - "content": "Thiết lập thông tin cửa hàng và chọn loại hình kinh doanh", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "id": "OB2Row1", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "OB2F1L", - "fill": "$text-secondary", - "content": "Tên cửa hàng *", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "OB2F1I", - "width": "fill_container", - "height": 44, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "OB2F1P", - "fill": "$text-tertiary", - "content": "VD: Coffee House Quận 1", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - }, - { - "type": "frame", - "id": "OB2Row2", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "OB2F2L", - "fill": "$text-secondary", - "content": "Địa chỉ *", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "OB2F2I", - "width": "fill_container", - "height": 44, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "OB2F2P", - "fill": "$text-tertiary", - "content": "Nhập địa chỉ cửa hàng", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - }, - { - "type": "frame", - "id": "OB2Row3", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "OB2F3L", - "fill": "$text-secondary", - "content": "Số điện thoại *", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "OB2F3I", - "width": "fill_container", - "height": 44, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "OB2F3P", - "fill": "$text-tertiary", - "content": "VD: 028 1234 5678", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - }, - { - "type": "frame", - "id": "OB2Row4", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "OB2F4L", - "fill": "$text-secondary", - "content": "Chọn loại hình kinh doanh *", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "OB2BizTypes", - "width": "fill_container", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "OB2Biz1", - "width": "fill_container", - "height": 80, - "fill": "#FF5C0015", - "stroke": { - "thickness": 2, - "fill": "$orange-primary" - }, - "cornerRadius": 12, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "gap": 6, - "children": [ - { - "type": "text", - "id": "OB2Biz1E", - "content": "☕", - "fontSize": 24, - "fontFamily": "Roboto" - }, - { - "type": "text", - "id": "OB2Biz1T", - "fill": "$orange-primary", - "content": "Quán café", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "OB2Biz2", - "width": "fill_container", - "height": 80, - "fill": "$bg-interactive", - "cornerRadius": 12, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "gap": 6, - "children": [ - { - "type": "text", - "id": "OB2Biz2E", - "content": "🍽️", - "fontSize": 24, - "fontFamily": "Roboto" - }, - { - "type": "text", - "id": "OB2Biz2T", - "fill": "$text-secondary", - "content": "Nhà hàng", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "OB2Biz3", - "width": "fill_container", - "height": 80, - "fill": "$bg-interactive", - "cornerRadius": 12, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "gap": 6, - "children": [ - { - "type": "text", - "id": "OB2Biz3E", - "content": "🎤", - "fontSize": 24, - "fontFamily": "Roboto" - }, - { - "type": "text", - "id": "OB2Biz3T", - "fill": "$text-secondary", - "content": "Karaoke", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "OB2Biz4", - "width": "fill_container", - "height": 80, - "fill": "$bg-interactive", - "cornerRadius": 12, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "gap": 6, - "children": [ - { - "type": "text", - "id": "OB2Biz4E", - "content": "💆", - "fontSize": 24, - "fontFamily": "Roboto" - }, - { - "type": "text", - "id": "OB2Biz4T", - "fill": "$text-secondary", - "content": "Spa", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "OB2Biz5", - "width": "fill_container", - "height": 80, - "fill": "$bg-interactive", - "cornerRadius": 12, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "gap": 6, - "children": [ - { - "type": "text", - "id": "OB2Biz5E", - "content": "🛒", - "fontSize": 24, - "fontFamily": "Roboto" - }, - { - "type": "text", - "id": "OB2Biz5T", - "fill": "$text-secondary", - "content": "Bán lẻ", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "OB2Footer", - "width": "fill_container", - "justifyContent": "space_between", - "padding": [ - 8, - 0, - 0, - 0 - ], - "children": [ - { - "type": "frame", - "id": "OB2BackBtn", - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 12, - 28 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "OB2BackI", - "width": 18, - "height": 18, - "iconFontName": "arrow-left", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "OB2BackT", - "fill": "$text-secondary", - "content": "Quay lại", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "OB2NextBtn", - "fill": "$orange-primary", - "cornerRadius": 10, - "padding": [ - 12, - 28 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "OB2NextT", - "fill": "#FFFFFF", - "content": "Tiếp theo", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "icon_font", - "id": "OB2NextI", - "width": 18, - "height": 18, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - } - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "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/admin/payroll-commission.pen b/pencil-design/src/pages/tPOS/admin/payroll-commission.pen deleted file mode 100644 index f7ea2d64..00000000 --- a/pencil-design/src/pages/tPOS/admin/payroll-commission.pen +++ /dev/null @@ -1,1842 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "PayrollComm", - "name": "Admin/PayrollCommission", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "$bg-page", - "clip": true, - "children": [ - { - "type": "frame", - "id": "PCSidebar", - "width": 260, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "right" - ] - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "PCLogo", - "width": "fill_container", - "padding": [ - 24, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PCLogoIc", - "width": 40, - "height": 40, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PCLogoT", - "fill": "#FFFFFF", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "800" - } - ] - }, - { - "type": "frame", - "id": "PCLogoGr", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "PCLogoN", - "fill": "$text-primary", - "content": "GoodGo Admin", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "text", - "id": "PCLogoSub", - "fill": "$text-tertiary", - "content": "Management Console", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "PCNav", - "width": "fill_container", - "height": "fill_container", - "padding": [ - 16, - 12 - ], - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "PCNavL1", - "fill": "$text-tertiary", - "content": "TỔNG QUAN", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 0, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "PCNavDash", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCNavDashI", - "width": 20, - "height": 20, - "iconFontName": "layout-dashboard", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PCNavDashT", - "fill": "$text-secondary", - "content": "Dashboard", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "PCNavL2", - "fill": "$text-tertiary", - "content": "CỬA HÀNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "PCNavStores", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "PCNavStoresLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCNavStoresI", - "width": 20, - "height": 20, - "iconFontName": "store", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PCNavStoresT", - "fill": "$text-secondary", - "content": "Quản lý cửa hàng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PCNavStoresBdg", - "width": 22, - "height": 22, - "fill": "$bg-interactive", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PCNavStoresBdgT", - "fill": "$text-tertiary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PCNavProd", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCNavProdI", - "width": 18, - "height": 18, - "iconFontName": "package", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "PCNavProdT", - "fill": "$text-tertiary", - "content": "Sản phẩm & Menu", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PCNavStaff", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCNavStaffI", - "width": 18, - "height": 18, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "PCNavStaffT", - "fill": "#FFFFFF", - "content": "Nhân sự", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ], - "fill": "$orange-primary" - }, - { - "type": "frame", - "id": "PCNavInv", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCNavInvI", - "width": 18, - "height": 18, - "iconFontName": "warehouse", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "PCNavInvT", - "fill": "$text-tertiary", - "content": "Kho hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PCNavDev", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCNavDevI", - "width": 18, - "height": 18, - "iconFontName": "monitor", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "PCNavDevT", - "fill": "$text-tertiary", - "content": "Thiết bị", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "PCNavL3", - "fill": "$text-tertiary", - "content": "KINH DOANH", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "PCNavCust", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCNavCustI", - "width": 20, - "height": 20, - "iconFontName": "heart", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PCNavCustT", - "fill": "$text-secondary", - "content": "Khách hàng & Loyalty", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PCNavRpt", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCNavRptI", - "width": 20, - "height": 20, - "iconFontName": "bar-chart-2", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PCNavRptT", - "fill": "$text-secondary", - "content": "Báo cáo & Phân tích", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PCNavFin", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCNavFinI", - "width": 20, - "height": 20, - "iconFontName": "wallet", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PCNavFinT", - "fill": "$text-secondary", - "content": "Tài chính", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "PCNavL4", - "fill": "$text-tertiary", - "content": "HỆ THỐNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "PCNavRoles", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCNavRolesI", - "width": 20, - "height": 20, - "iconFontName": "shield", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PCNavRolesT", - "fill": "$text-secondary", - "content": "Phân quyền", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PCNavSet", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCNavSetI", - "width": 20, - "height": 20, - "iconFontName": "settings", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PCNavSetT", - "fill": "$text-secondary", - "content": "Cài đặt", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PCUsr", - "width": "fill_container", - "padding": [ - 16, - 16 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PCUsrAv", - "width": 36, - "height": 36, - "fill": "#3B82F6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PCUsrAvT", - "fill": "#FFFFFF", - "content": "VH", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "PCUsrInf", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "PCUsrN", - "fill": "$text-primary", - "content": "Velik Ho", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "PCUsrR", - "fill": "$text-tertiary", - "content": "Owner", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PCMain", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "PCHeader", - "width": "fill_container", - "padding": [ - 16, - 32 - ], - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PCTitle", - "fill": "$text-primary", - "content": "Bảng lương & Hoa hồng", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "PCActions", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PCMonth", - "height": 40, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCMonthI", - "width": 16, - "height": 16, - "iconFontName": "calendar", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PCMonthT", - "fill": "$text-primary", - "content": "Tháng 02/2026", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "icon_font", - "id": "PCMonthChev", - "width": 16, - "height": 16, - "iconFontName": "chevron-down", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - }, - { - "type": "frame", - "id": "PCExport", - "height": 40, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 16 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCExpI", - "width": 16, - "height": 16, - "iconFontName": "download", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PCExpT", - "fill": "$text-secondary", - "content": "Export", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PCContent", - "width": "fill_container", - "height": "fill_container", - "padding": 24, - "layout": "vertical", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "PCKPIs", - "width": "fill_container", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "PCK1", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 20, - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "PCK1L", - "fill": "$text-tertiary", - "content": "Tổng lương", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "PCK1V", - "fill": "$text-primary", - "content": "45,600,000₫", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "700" - }, - { - "type": "text", - "id": "PCK1C", - "fill": "#22C55E", - "content": "+8.2% vs tháng trước", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - }, - { - "type": "frame", - "id": "PCK2", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 20, - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "PCK2L", - "fill": "$text-tertiary", - "content": "Hoa hồng", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "PCK2V", - "fill": "$orange-primary", - "content": "3,200,000₫", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "700" - }, - { - "type": "text", - "id": "PCK2C", - "fill": "$text-tertiary", - "content": "7 nhân viên", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - }, - { - "type": "frame", - "id": "PCK3", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 20, - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "PCK3L", - "fill": "$text-tertiary", - "content": "Phụ cấp", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "PCK3V", - "fill": "#3B82F6", - "content": "1,800,000₫", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "700" - }, - { - "type": "text", - "id": "PCK3C", - "fill": "$text-tertiary", - "content": "Ăn trưa + đi lại", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "PCTable", - "width": "fill_container", - "height": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "PCTblHead", - "width": "fill_container", - "padding": [ - 14, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "children": [ - { - "type": "text", - "id": "PCTH1", - "width": 180, - "fill": "$text-tertiary", - "content": "Nhân viên", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "PCTH2", - "width": 100, - "fill": "$text-tertiary", - "content": "Vai trò", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "PCTH3", - "width": 80, - "fill": "$text-tertiary", - "content": "Giờ làm", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "PCTH4", - "width": 130, - "fill": "$text-tertiary", - "content": "Lương CB", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "PCTH5", - "width": 110, - "fill": "$text-tertiary", - "content": "Hoa hồng", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "PCTH6", - "width": 100, - "fill": "$text-tertiary", - "content": "Phụ cấp", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "PCTH7", - "width": 130, - "fill": "$text-tertiary", - "content": "Tổng", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "PCTH8", - "fill": "$text-tertiary", - "content": "Trạng thái", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "PCR1", - "width": "fill_container", - "padding": [ - 14, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PCR1N", - "width": 180, - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PCR1Av", - "width": 32, - "height": 32, - "fill": "#8B5CF6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PCR1AvT", - "fill": "#FFFFFF", - "content": "TN", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "PCR1Nm", - "fill": "$text-primary", - "content": "Trần Nhật", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PCR1Role", - "width": 100, - "children": [ - { - "type": "frame", - "id": "PCR1RBdg", - "fill": "#3B82F620", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "PCR1RT", - "fill": "#3B82F6", - "content": "Manager", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "text", - "id": "PCR1H", - "width": 80, - "fill": "$text-primary", - "content": "176h", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "PCR1S", - "width": 130, - "fill": "$text-primary", - "content": "12,000,000₫", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "PCR1C", - "width": 110, - "fill": "$orange-primary", - "content": "800,000₫", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "PCR1A", - "width": 100, - "fill": "$text-secondary", - "content": "400,000₫", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "PCR1T", - "width": 130, - "fill": "$text-primary", - "content": "13,200,000₫", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "PCR1St", - "children": [ - { - "type": "frame", - "id": "PCR1StBdg", - "fill": "#22C55E20", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "PCR1StT", - "fill": "#22C55E", - "content": "Đã trả", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PCR2", - "width": "fill_container", - "padding": [ - 14, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PCR2N", - "width": 180, - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PCR2Av", - "width": 32, - "height": 32, - "fill": "#F59E0B", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PCR2AvT", - "fill": "#FFFFFF", - "content": "LM", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "PCR2Nm", - "fill": "$text-primary", - "content": "Lê Minh", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PCR2Role", - "width": 100, - "children": [ - { - "type": "frame", - "id": "PCR2RBdg", - "fill": "#22C55E20", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "PCR2RT", - "fill": "#22C55E", - "content": "Cashier", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "text", - "id": "PCR2H", - "width": 80, - "fill": "$text-primary", - "content": "168h", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "PCR2S", - "width": 130, - "fill": "$text-primary", - "content": "7,500,000₫", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "PCR2C", - "width": 110, - "fill": "$orange-primary", - "content": "650,000₫", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "PCR2A", - "width": 100, - "fill": "$text-secondary", - "content": "300,000₫", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "PCR2T", - "width": 130, - "fill": "$text-primary", - "content": "8,450,000₫", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "PCR2St", - "children": [ - { - "type": "frame", - "id": "PCR2StBdg", - "fill": "#22C55E20", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "PCR2StT", - "fill": "#22C55E", - "content": "Đã trả", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PCR3", - "width": "fill_container", - "padding": [ - 14, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PCR3N", - "width": 180, - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PCR3Av", - "width": 32, - "height": 32, - "fill": "#EF4444", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PCR3AvT", - "fill": "#FFFFFF", - "content": "PH", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "PCR3Nm", - "fill": "$text-primary", - "content": "Phạm Hương", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PCR3Role", - "width": 100, - "children": [ - { - "type": "frame", - "id": "PCR3RBdg", - "fill": "#F59E0B20", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "PCR3RT", - "fill": "#F59E0B", - "content": "Barista", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "text", - "id": "PCR3H", - "width": 80, - "fill": "$text-primary", - "content": "160h", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "PCR3S", - "width": 130, - "fill": "$text-primary", - "content": "6,500,000₫", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "PCR3C", - "width": 110, - "fill": "$orange-primary", - "content": "520,000₫", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "PCR3A", - "width": 100, - "fill": "$text-secondary", - "content": "300,000₫", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "PCR3T", - "width": 130, - "fill": "$text-primary", - "content": "7,320,000₫", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "PCR3St", - "children": [ - { - "type": "frame", - "id": "PCR3StBdg", - "fill": "#F59E0B20", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "PCR3StT", - "fill": "#F59E0B", - "content": "Chờ duyệt", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PCR4", - "width": "fill_container", - "padding": [ - 14, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PCR4N", - "width": 180, - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PCR4Av", - "width": 32, - "height": 32, - "fill": "#22C55E", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PCR4AvT", - "fill": "#FFFFFF", - "content": "NB", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "PCR4Nm", - "fill": "$text-primary", - "content": "Nguyễn Bảo", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PCR4Role", - "width": 100, - "children": [ - { - "type": "frame", - "id": "PCR4RBdg", - "fill": "#8B5CF620", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "PCR4RT", - "fill": "#8B5CF6", - "content": "Waiter", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "text", - "id": "PCR4H", - "width": 80, - "fill": "$text-primary", - "content": "152h", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "PCR4S", - "width": 130, - "fill": "$text-primary", - "content": "5,800,000₫", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "PCR4C", - "width": 110, - "fill": "$orange-primary", - "content": "430,000₫", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "PCR4A", - "width": 100, - "fill": "$text-secondary", - "content": "300,000₫", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "PCR4T", - "width": 130, - "fill": "$text-primary", - "content": "6,530,000₫", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "PCR4St", - "children": [ - { - "type": "frame", - "id": "PCR4StBdg", - "fill": "#F59E0B20", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "PCR4StT", - "fill": "#F59E0B", - "content": "Chờ duyệt", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PCR5", - "width": "fill_container", - "padding": [ - 14, - 20 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PCR5N", - "width": 180, - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PCR5Av", - "width": 32, - "height": 32, - "fill": "#EC4899", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PCR5AvT", - "fill": "#FFFFFF", - "content": "VT", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "PCR5Nm", - "fill": "$text-primary", - "content": "Võ Thảo", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PCR5Role", - "width": 100, - "children": [ - { - "type": "frame", - "id": "PCR5RBdg", - "fill": "#EF444420", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "PCR5RT", - "fill": "#EF4444", - "content": "Kitchen", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "text", - "id": "PCR5H", - "width": 80, - "fill": "$text-primary", - "content": "168h", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "PCR5S", - "width": 130, - "fill": "$text-primary", - "content": "6,000,000₫", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "PCR5C", - "width": 110, - "fill": "$orange-primary", - "content": "0₫", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "PCR5A", - "width": 100, - "fill": "$text-secondary", - "content": "300,000₫", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "PCR5T", - "width": 130, - "fill": "$text-primary", - "content": "6,300,000₫", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "PCR5St", - "children": [ - { - "type": "frame", - "id": "PCR5StBdg", - "fill": "#22C55E20", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "PCR5StT", - "fill": "#22C55E", - "content": "Đã trả", - "fontFamily": "Roboto", - "fontSize": 11, - "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/admin/pricing-rules.pen b/pencil-design/src/pages/tPOS/admin/pricing-rules.pen deleted file mode 100644 index 36334471..00000000 --- a/pencil-design/src/pages/tPOS/admin/pricing-rules.pen +++ /dev/null @@ -1,1528 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "PricingRules", - "name": "Admin/PricingRules", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "$bg-page", - "clip": true, - "children": [ - { - "type": "frame", - "id": "PRSidebar", - "width": 260, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "right" - ] - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "PRSidebarLogo", - "width": "fill_container", - "padding": [ - 24, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PRLogoIcon", - "width": 40, - "height": 40, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PRLogoT", - "fill": "#FFFFFF", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "800" - } - ] - }, - { - "type": "frame", - "id": "PRLogoTG", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "PRLogoN", - "fill": "$text-primary", - "content": "GoodGo Admin", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "text", - "id": "PRLogoS", - "fill": "$text-tertiary", - "content": "Management Console", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "PRSidebarNav", - "width": "fill_container", - "height": "fill_container", - "padding": [ - 16, - 12 - ], - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "PRNavL1", - "fill": "$text-tertiary", - "content": "TỔNG QUAN", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 0, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "PRNavDash", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PRNavDashI", - "width": 20, - "height": 20, - "iconFontName": "layout-dashboard", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PRNavDashT", - "fill": "$text-secondary", - "content": "Dashboard", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "PRNavL2", - "fill": "$text-tertiary", - "content": "CỬA HÀNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "PRNavStores", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "PRNavStoresLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PRNavStoresI", - "width": 20, - "height": 20, - "iconFontName": "store", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PRNavStoresT", - "fill": "$text-secondary", - "content": "Quản lý cửa hàng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PRNavStoresBdg", - "width": 22, - "height": 22, - "fill": "$bg-interactive", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PRNavStoresBdgT", - "fill": "$text-tertiary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PRNavProd", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PRNavProdI", - "width": 18, - "height": 18, - "iconFontName": "package", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "PRNavProdT", - "fill": "#FFFFFF", - "content": "Sản phẩm & Menu", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ], - "fill": "$orange-primary" - }, - { - "type": "frame", - "id": "PRNavStaff", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PRNavStaffI", - "width": 18, - "height": 18, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "PRNavStaffT", - "fill": "$text-tertiary", - "content": "Nhân sự", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PRNavInv", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PRNavInvI", - "width": 18, - "height": 18, - "iconFontName": "warehouse", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "PRNavInvT", - "fill": "$text-tertiary", - "content": "Kho hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PRNavDev", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PRNavDevI", - "width": 18, - "height": 18, - "iconFontName": "monitor", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "PRNavDevT", - "fill": "$text-tertiary", - "content": "Thiết bị", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "PRNavL3", - "fill": "$text-tertiary", - "content": "KINH DOANH", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "PRNavCust", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PRNavCustI", - "width": 20, - "height": 20, - "iconFontName": "heart", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PRNavCustT", - "fill": "$text-secondary", - "content": "Khách hàng & Loyalty", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PRNavRpt", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PRNavRptI", - "width": 20, - "height": 20, - "iconFontName": "bar-chart-2", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PRNavRptT", - "fill": "$text-secondary", - "content": "Báo cáo & Phân tích", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PRNavFin", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PRNavFinI", - "width": 20, - "height": 20, - "iconFontName": "wallet", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PRNavFinT", - "fill": "$text-secondary", - "content": "Tài chính", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "PRNavL4", - "fill": "$text-tertiary", - "content": "HỆ THỐNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "PRNavRoles", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PRNavRolesI", - "width": 20, - "height": 20, - "iconFontName": "shield", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PRNavRolesT", - "fill": "$text-secondary", - "content": "Phân quyền", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PRNavSet", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PRNavSetI", - "width": 20, - "height": 20, - "iconFontName": "settings", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PRNavSetT", - "fill": "$text-secondary", - "content": "Cài đặt", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PRSidebarUser", - "width": "fill_container", - "padding": [ - 16, - 16 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PRUserAv", - "width": 36, - "height": 36, - "fill": "#3B82F6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PRUserAvT", - "fill": "#FFFFFF", - "content": "VH", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "PRUserInfo", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "PRUserN", - "fill": "$text-primary", - "content": "Velik Ho", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "PRUserR", - "fill": "$text-tertiary", - "content": "Owner", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PRMain", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "PRHeader", - "width": "fill_container", - "padding": [ - 16, - 32 - ], - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PRHeaderTitle", - "fill": "$text-primary", - "content": "Khuyến mãi", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "PRHeaderRight", - "children": [ - { - "type": "frame", - "id": "PRCreateBtn", - "fill": "$orange-primary", - "cornerRadius": 10, - "padding": [ - 10, - 20 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PRCreateI", - "width": 18, - "height": 18, - "iconFontName": "plus", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "PRCreateT", - "fill": "#FFFFFF", - "content": "Tạo KM mới", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PRTabsRow", - "width": "fill_container", - "fill": "$bg-elevated", - "padding": [ - 0, - 32 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "children": [ - { - "type": "frame", - "id": "PRTabActive", - "padding": [ - 12, - 16 - ], - "stroke": { - "thickness": 2, - "fill": "$orange-primary", - "sides": [ - "bottom" - ] - }, - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PRTabActiveT", - "fill": "$orange-primary", - "content": "Đang chạy", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "PRTabActiveBadge", - "fill": "$orange-primary", - "cornerRadius": 100, - "padding": [ - 1, - 6 - ], - "children": [ - { - "type": "text", - "id": "PRTabActiveBadgeT", - "fill": "#FFFFFF", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PRTab2", - "padding": [ - 12, - 16 - ], - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PRTab2T", - "fill": "$text-secondary", - "content": "Lên lịch", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "PRTab2Badge", - "fill": "$bg-interactive", - "cornerRadius": 100, - "padding": [ - 1, - 6 - ], - "children": [ - { - "type": "text", - "id": "PRTab2BadgeT", - "fill": "$text-secondary", - "content": "2", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PRTab3", - "padding": [ - 12, - 16 - ], - "children": [ - { - "type": "text", - "id": "PRTab3T", - "fill": "$text-secondary", - "content": "Đã kết thúc", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PRContent", - "width": "fill_container", - "height": "fill_container", - "padding": 28, - "layout": "vertical", - "gap": 0, - "clip": true, - "children": [ - { - "type": "frame", - "id": "PRTableCard", - "width": "fill_container", - "height": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "PRTableHead", - "width": "fill_container", - "padding": [ - 12, - 20 - ], - "fill": "$bg-page", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "children": [ - { - "type": "text", - "id": "PRTh1", - "width": "fill_container", - "fill": "$text-tertiary", - "content": "Tên chương trình", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "PRTh2", - "width": 120, - "fill": "$text-tertiary", - "content": "Loại", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "PRTh3", - "width": 180, - "fill": "$text-tertiary", - "content": "Thời gian", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "PRTh4", - "width": 140, - "fill": "$text-tertiary", - "content": "Cửa hàng", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "PRTh5", - "width": 100, - "fill": "$text-tertiary", - "content": "Trạng thái", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "PRRow1", - "width": "fill_container", - "padding": [ - 14, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PRRow1C1", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "PRRow1Name", - "fill": "$text-primary", - "content": "Flash Sale cuối tuần", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "PRRow1Desc", - "fill": "$text-tertiary", - "content": "Giảm 20% tất cả đồ uống", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - }, - { - "type": "frame", - "id": "PRRow1C2", - "width": 120, - "children": [ - { - "type": "frame", - "id": "PRRow1TypeBadge", - "fill": "#3B82F620", - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "PRRow1TypeT", - "fill": "#3B82F6", - "content": "Giảm giá", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PRRow1C3", - "width": 180, - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "PRRow1Date1", - "fill": "$text-secondary", - "content": "08/02 - 14/02/2026", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "PRRow1Date2", - "fill": "$text-tertiary", - "content": "T7 & CN, 14:00-18:00", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - }, - { - "type": "text", - "id": "PRRow1C4", - "width": 140, - "fill": "$text-secondary", - "content": "Tất cả (3)", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "frame", - "id": "PRRow1C5", - "width": 100, - "children": [ - { - "type": "frame", - "id": "PRRow1StatusBadge", - "fill": "#22C55E20", - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "PRRow1StatusT", - "fill": "#22C55E", - "content": "Đang chạy", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PRRow2", - "width": "fill_container", - "padding": [ - 14, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PRRow2C1", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "PRRow2Name", - "fill": "$text-primary", - "content": "Combo Sáng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "PRRow2Desc", - "fill": "$text-tertiary", - "content": "Cà phê + Bánh mì 49K", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - }, - { - "type": "frame", - "id": "PRRow2C2", - "width": 120, - "children": [ - { - "type": "frame", - "id": "PRRow2TypeBadge", - "fill": "#A855F720", - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "PRRow2TypeT", - "fill": "#A855F7", - "content": "Combo", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PRRow2C3", - "width": 180, - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "PRRow2Date1", - "fill": "$text-secondary", - "content": "01/02 - 28/02/2026", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "PRRow2Date2", - "fill": "$text-tertiary", - "content": "Hàng ngày, 06:00-10:00", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - }, - { - "type": "text", - "id": "PRRow2C4", - "width": 140, - "fill": "$text-secondary", - "content": "Coffee House Q1", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "frame", - "id": "PRRow2C5", - "width": 100, - "children": [ - { - "type": "frame", - "id": "PRRow2StatusBadge", - "fill": "#22C55E20", - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "PRRow2StatusT", - "fill": "#22C55E", - "content": "Đang chạy", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PRRow3", - "width": "fill_container", - "padding": [ - 14, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PRRow3C1", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "PRRow3Name", - "fill": "$text-primary", - "content": "Mua 1 tặng 1 Trà sữa", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "PRRow3Desc", - "fill": "$text-tertiary", - "content": "Mua ly thứ 2 giá 0đ", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - }, - { - "type": "frame", - "id": "PRRow3C2", - "width": 120, - "children": [ - { - "type": "frame", - "id": "PRRow3TypeBadge", - "fill": "#F59E0B20", - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "PRRow3TypeT", - "fill": "#F59E0B", - "content": "BOGO", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PRRow3C3", - "width": 180, - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "PRRow3Date1", - "fill": "$text-secondary", - "content": "10/02 - 16/02/2026", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "PRRow3Date2", - "fill": "$text-tertiary", - "content": "Thứ 2-6, cả ngày", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - }, - { - "type": "text", - "id": "PRRow3C4", - "width": 140, - "fill": "$text-secondary", - "content": "Tất cả (3)", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "frame", - "id": "PRRow3C5", - "width": 100, - "children": [ - { - "type": "frame", - "id": "PRRow3StatusBadge", - "fill": "#22C55E20", - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "PRRow3StatusT", - "fill": "#22C55E", - "content": "Đang chạy", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PRRow4", - "width": "fill_container", - "padding": [ - 14, - 20 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PRRow4C1", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "PRRow4Name", - "fill": "$text-primary", - "content": "Happy Hour Chiều", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "PRRow4Desc", - "fill": "$text-tertiary", - "content": "Giảm 30% từ 15:00-17:00", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - }, - { - "type": "frame", - "id": "PRRow4C2", - "width": 120, - "children": [ - { - "type": "frame", - "id": "PRRow4TypeBadge", - "fill": "#3B82F620", - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "PRRow4TypeT", - "fill": "#3B82F6", - "content": "Giảm giá", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PRRow4C3", - "width": 180, - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "PRRow4Date1", - "fill": "$text-secondary", - "content": "15/02 - 28/02/2026", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "PRRow4Date2", - "fill": "$text-tertiary", - "content": "Hàng ngày, 15:00-17:00", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - }, - { - "type": "text", - "id": "PRRow4C4", - "width": 140, - "fill": "$text-secondary", - "content": "Coffee House Q1", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "frame", - "id": "PRRow4C5", - "width": 100, - "children": [ - { - "type": "frame", - "id": "PRRow4StatusBadge", - "fill": "#F59E0B20", - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "PRRow4StatusT", - "fill": "#F59E0B", - "content": "Lên lịch", - "fontFamily": "Roboto", - "fontSize": 11, - "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/admin/product-catalog.pen b/pencil-design/src/pages/tPOS/admin/product-catalog.pen deleted file mode 100644 index 5af19ae8..00000000 --- a/pencil-design/src/pages/tPOS/admin/product-catalog.pen +++ /dev/null @@ -1,1757 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "ProductCatalog", - "name": "Admin/ProductCatalog", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "$bg-page", - "clip": true, - "children": [ - { - "type": "frame", - "id": "PCSidebar", - "width": 260, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "right" - ] - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "PCSidebarLogo", - "width": "fill_container", - "padding": [ - 24, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PCLogoIcon", - "width": 40, - "height": 40, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PCLogoT", - "fill": "#FFFFFF", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "800" - } - ] - }, - { - "type": "frame", - "id": "PCLogoTG", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "PCLogoN", - "fill": "$text-primary", - "content": "GoodGo Admin", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "text", - "id": "PCLogoS", - "fill": "$text-tertiary", - "content": "Management Console", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "PCSidebarNav", - "width": "fill_container", - "height": "fill_container", - "padding": [ - 16, - 12 - ], - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "PCNavL1", - "fill": "$text-tertiary", - "content": "TỔNG QUAN", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 0, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "PCNavDash", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCNavDashI", - "width": 20, - "height": 20, - "iconFontName": "layout-dashboard", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PCNavDashT", - "fill": "$text-secondary", - "content": "Dashboard", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "PCNavL2", - "fill": "$text-tertiary", - "content": "CỬA HÀNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "PCNavStores", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "PCNavStoresLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCNavStoresI", - "width": 20, - "height": 20, - "iconFontName": "store", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PCNavStoresT", - "fill": "$text-secondary", - "content": "Quản lý cửa hàng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PCNavStoresBdg", - "width": 22, - "height": 22, - "fill": "$bg-interactive", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PCNavStoresBdgT", - "fill": "$text-tertiary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PCNavProd", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCNavProdI", - "width": 18, - "height": 18, - "iconFontName": "package", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "PCNavProdT", - "fill": "#FFFFFF", - "content": "Sản phẩm & Menu", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ], - "fill": "$orange-primary" - }, - { - "type": "frame", - "id": "PCNavStaff", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCNavStaffI", - "width": 18, - "height": 18, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "PCNavStaffT", - "fill": "$text-tertiary", - "content": "Nhân sự", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PCNavInv", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCNavInvI", - "width": 18, - "height": 18, - "iconFontName": "warehouse", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "PCNavInvT", - "fill": "$text-tertiary", - "content": "Kho hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PCNavDev", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCNavDevI", - "width": 18, - "height": 18, - "iconFontName": "monitor", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "PCNavDevT", - "fill": "$text-tertiary", - "content": "Thiết bị", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "PCNavL3", - "fill": "$text-tertiary", - "content": "KINH DOANH", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "PCNavCust", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCNavCustI", - "width": 20, - "height": 20, - "iconFontName": "heart", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PCNavCustT", - "fill": "$text-secondary", - "content": "Khách hàng & Loyalty", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PCNavRpt", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCNavRptI", - "width": 20, - "height": 20, - "iconFontName": "bar-chart-2", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PCNavRptT", - "fill": "$text-secondary", - "content": "Báo cáo & Phân tích", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PCNavFin", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCNavFinI", - "width": 20, - "height": 20, - "iconFontName": "wallet", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PCNavFinT", - "fill": "$text-secondary", - "content": "Tài chính", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "PCNavL4", - "fill": "$text-tertiary", - "content": "HỆ THỐNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "PCNavRoles", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCNavRolesI", - "width": 20, - "height": 20, - "iconFontName": "shield", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PCNavRolesT", - "fill": "$text-secondary", - "content": "Phân quyền", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PCNavSet", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCNavSetI", - "width": 20, - "height": 20, - "iconFontName": "settings", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PCNavSetT", - "fill": "$text-secondary", - "content": "Cài đặt", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PCSidebarUser", - "width": "fill_container", - "padding": [ - 16, - 16 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PCUserAv", - "width": 36, - "height": 36, - "fill": "#3B82F6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PCUserAvT", - "fill": "#FFFFFF", - "content": "VH", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "PCUserInfo", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "PCUserN", - "fill": "$text-primary", - "content": "Velik Ho", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "PCUserR", - "fill": "$text-tertiary", - "content": "Owner", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PCMain", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "PCHeader", - "width": "fill_container", - "padding": [ - 16, - 32 - ], - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PCHeaderLeft", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "frame", - "id": "PCBreadcrumb", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PCBread1", - "fill": "$text-tertiary", - "content": "Coffee House Q1", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "PCBreadSep", - "fill": "$text-tertiary", - "content": "/", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "PCBread2", - "fill": "$orange-primary", - "content": "Sản phẩm", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "PCHeaderTitle", - "fill": "$text-primary", - "content": "Sản phẩm & Menu", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "PCHeaderRight", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PCStoreSel", - "height": 40, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCStoreSelI", - "width": 16, - "height": 16, - "iconFontName": "coffee", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "PCStoreSelT", - "fill": "$text-primary", - "content": "Coffee House Q1", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "icon_font", - "id": "PCStoreSelChevron", - "width": 14, - "height": 14, - "iconFontName": "chevron-down", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - }, - { - "type": "frame", - "id": "PCSearch", - "width": 220, - "height": 40, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCSearchI", - "width": 18, - "height": 18, - "iconFontName": "search", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "PCSearchP", - "fill": "$text-tertiary", - "content": "Tìm sản phẩm...", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "id": "PCAddBtn", - "fill": "$orange-primary", - "cornerRadius": 10, - "padding": [ - 10, - 16 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCAddI", - "width": 18, - "height": 18, - "iconFontName": "plus", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "PCAddT", - "fill": "#FFFFFF", - "content": "Thêm sản phẩm", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PCBody", - "width": "fill_container", - "height": "fill_container", - "children": [ - { - "type": "frame", - "id": "PCCategories", - "width": 220, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "right" - ] - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "PCCatHeader", - "width": "fill_container", - "padding": [ - 14, - 16 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PCCatTitle", - "fill": "$text-primary", - "content": "Danh mục", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "icon_font", - "id": "PCCatAdd", - "width": 18, - "height": 18, - "iconFontName": "plus", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - } - ] - }, - { - "type": "frame", - "id": "PCCatList", - "width": "fill_container", - "height": "fill_container", - "padding": 8, - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "frame", - "id": "PCCat1", - "width": "fill_container", - "height": 42, - "fill": "#FF5C0015", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "gap": 10, - "alignItems": "center", - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "PCCat1L", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PCCat1Emoji", - "content": "☕", - "fontSize": 16, - "fontFamily": "Roboto" - }, - { - "type": "text", - "id": "PCCat1T", - "fill": "$orange-primary", - "content": "Cà phê", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "PCCat1C", - "fill": "$orange-primary", - "content": "12", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "PCCat2", - "width": "fill_container", - "height": 42, - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "gap": 10, - "alignItems": "center", - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "PCCat2L", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PCCat2Emoji", - "content": "🧋", - "fontSize": 16, - "fontFamily": "Roboto" - }, - { - "type": "text", - "id": "PCCat2T", - "fill": "$text-secondary", - "content": "Trà sữa", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "PCCat2C", - "fill": "$text-tertiary", - "content": "8", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - }, - { - "type": "frame", - "id": "PCCat3", - "width": "fill_container", - "height": 42, - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "gap": 10, - "alignItems": "center", - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "PCCat3L", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PCCat3Emoji", - "content": "🧃", - "fontSize": 16, - "fontFamily": "Roboto" - }, - { - "type": "text", - "id": "PCCat3T", - "fill": "$text-secondary", - "content": "Nước ép", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "PCCat3C", - "fill": "$text-tertiary", - "content": "10", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - }, - { - "type": "frame", - "id": "PCCat4", - "width": "fill_container", - "height": 42, - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "gap": 10, - "alignItems": "center", - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "PCCat4L", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PCCat4Emoji", - "content": "🍰", - "fontSize": 16, - "fontFamily": "Roboto" - }, - { - "type": "text", - "id": "PCCat4T", - "fill": "$text-secondary", - "content": "Bánh ngọt", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "PCCat4C", - "fill": "$text-tertiary", - "content": "6", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - }, - { - "type": "frame", - "id": "PCCat5", - "width": "fill_container", - "height": 42, - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "gap": 10, - "alignItems": "center", - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "PCCat5L", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PCCat5Emoji", - "content": "🧊", - "fontSize": 16, - "fontFamily": "Roboto" - }, - { - "type": "text", - "id": "PCCat5T", - "fill": "$text-secondary", - "content": "Đá xay", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "PCCat5C", - "fill": "$text-tertiary", - "content": "7", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - }, - { - "type": "frame", - "id": "PCCat6", - "width": "fill_container", - "height": 42, - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "gap": 10, - "alignItems": "center", - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "PCCat6L", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PCCat6Emoji", - "content": "🍕", - "fontSize": 16, - "fontFamily": "Roboto" - }, - { - "type": "text", - "id": "PCCat6T", - "fill": "$text-secondary", - "content": "Snack", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "PCCat6C", - "fill": "$text-tertiary", - "content": "5", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PCProductGrid", - "width": "fill_container", - "height": "fill_container", - "padding": 24, - "layout": "vertical", - "gap": 20, - "clip": true, - "children": [ - { - "type": "frame", - "id": "PCGridHeader", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PCGridTitle", - "fill": "$text-primary", - "content": "Cà phê (12 sản phẩm)", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "PCGridSort", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PCViewGrid", - "width": 36, - "height": 36, - "fill": "$orange-primary", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCViewGridI", - "width": 16, - "height": 16, - "iconFontName": "grid-2x2", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - } - ] - }, - { - "type": "frame", - "id": "PCViewList", - "width": 36, - "height": 36, - "fill": "$bg-interactive", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCViewListI", - "width": 16, - "height": 16, - "iconFontName": "list", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PCGrid", - "width": "fill_container", - "height": "fill_container", - "gap": 16, - "wrap": true, - "children": [ - { - "type": "frame", - "id": "PCP1", - "width": 200, - "fill": "$bg-elevated", - "cornerRadius": 14, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "PCP1Img", - "width": "fill_container", - "height": 140, - "fill": "#2A1F16", - "cornerRadius": [ - 14, - 14, - 0, - 0 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PCP1ImgT", - "content": "☕", - "fontSize": 48, - "fontFamily": "Roboto" - } - ] - }, - { - "type": "frame", - "id": "PCP1Info", - "width": "fill_container", - "padding": [ - 12, - 14 - ], - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "PCP1Name", - "fill": "$text-primary", - "content": "Cà phê đen", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "text", - "id": "PCP1Desc", - "fill": "$text-tertiary", - "content": "Espresso đậm đà", - "fontFamily": "Roboto", - "fontSize": 11 - }, - { - "type": "frame", - "id": "PCP1Bottom", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PCP1Price", - "fill": "$orange-primary", - "content": "29,000₫", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "PCP1Stock", - "fill": "#22C55E20", - "cornerRadius": 4, - "padding": [ - 2, - 6 - ], - "children": [ - { - "type": "text", - "id": "PCP1StockT", - "fill": "#22C55E", - "content": "Còn hàng", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "600" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PCP2", - "width": 200, - "fill": "$bg-elevated", - "cornerRadius": 14, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "PCP2Img", - "width": "fill_container", - "height": 140, - "fill": "#1F2216", - "cornerRadius": [ - 14, - 14, - 0, - 0 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PCP2ImgT", - "content": "🍵", - "fontSize": 48, - "fontFamily": "Roboto" - } - ] - }, - { - "type": "frame", - "id": "PCP2Info", - "width": "fill_container", - "padding": [ - 12, - 14 - ], - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "PCP2Name", - "fill": "$text-primary", - "content": "Cà phê sữa đá", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "text", - "id": "PCP2Desc", - "fill": "$text-tertiary", - "content": "Espresso + sữa đặc", - "fontFamily": "Roboto", - "fontSize": 11 - }, - { - "type": "frame", - "id": "PCP2Bottom", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PCP2Price", - "fill": "$orange-primary", - "content": "35,000₫", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "PCP2Stock", - "fill": "#22C55E20", - "cornerRadius": 4, - "padding": [ - 2, - 6 - ], - "children": [ - { - "type": "text", - "id": "PCP2StockT", - "fill": "#22C55E", - "content": "Còn hàng", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "600" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PCP3", - "width": 200, - "fill": "$bg-elevated", - "cornerRadius": 14, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "PCP3Img", - "width": "fill_container", - "height": 140, - "fill": "#16201F", - "cornerRadius": [ - 14, - 14, - 0, - 0 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PCP3ImgT", - "content": "🥤", - "fontSize": 48, - "fontFamily": "Roboto" - } - ] - }, - { - "type": "frame", - "id": "PCP3Info", - "width": "fill_container", - "padding": [ - 12, - 14 - ], - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "PCP3Name", - "fill": "$text-primary", - "content": "Latte", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "text", - "id": "PCP3Desc", - "fill": "$text-tertiary", - "content": "Espresso + sữa tươi", - "fontFamily": "Roboto", - "fontSize": 11 - }, - { - "type": "frame", - "id": "PCP3Bottom", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PCP3Price", - "fill": "$orange-primary", - "content": "49,000₫", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "PCP3Stock", - "fill": "#F59E0B20", - "cornerRadius": 4, - "padding": [ - 2, - 6 - ], - "children": [ - { - "type": "text", - "id": "PCP3StockT", - "fill": "#F59E0B", - "content": "Sắp hết", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "600" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PCP4", - "width": 200, - "fill": "$bg-elevated", - "cornerRadius": 14, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "PCP4Img", - "width": "fill_container", - "height": 140, - "fill": "#1A1620", - "cornerRadius": [ - 14, - 14, - 0, - 0 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PCP4ImgT", - "content": "🍫", - "fontSize": 48, - "fontFamily": "Roboto" - } - ] - }, - { - "type": "frame", - "id": "PCP4Info", - "width": "fill_container", - "padding": [ - 12, - 14 - ], - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "PCP4Name", - "fill": "$text-primary", - "content": "Mocha", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "text", - "id": "PCP4Desc", - "fill": "$text-tertiary", - "content": "Espresso + chocolate", - "fontFamily": "Roboto", - "fontSize": 11 - }, - { - "type": "frame", - "id": "PCP4Bottom", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PCP4Price", - "fill": "$orange-primary", - "content": "55,000₫", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "PCP4Stock", - "fill": "#22C55E20", - "cornerRadius": 4, - "padding": [ - 2, - 6 - ], - "children": [ - { - "type": "text", - "id": "PCP4StockT", - "fill": "#22C55E", - "content": "Còn hàng", - "fontFamily": "Roboto", - "fontSize": 10, - "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/admin/product-create.pen b/pencil-design/src/pages/tPOS/admin/product-create.pen deleted file mode 100644 index 3f9dc829..00000000 --- a/pencil-design/src/pages/tPOS/admin/product-create.pen +++ /dev/null @@ -1,1386 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "ProductCreate", - "name": "Admin/ProductCreate", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "$bg-page", - "clip": true, - "children": [ - { - "type": "frame", - "id": "PCSidebar", - "width": 260, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "right" - ] - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "PCSidebarLogo", - "width": "fill_container", - "padding": [ - 24, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PCLogoIcon", - "width": 40, - "height": 40, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PCLogoT", - "fill": "#FFFFFF", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "800" - } - ] - }, - { - "type": "frame", - "id": "PCLogoTG", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "PCLogoN", - "fill": "$text-primary", - "content": "GoodGo Admin", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "text", - "id": "PCLogoS", - "fill": "$text-tertiary", - "content": "Management Console", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "PCSidebarNav", - "width": "fill_container", - "height": "fill_container", - "padding": [ - 16, - 12 - ], - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "PCNavL1", - "fill": "$text-tertiary", - "content": "TỔNG QUAN", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 0, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "PCNavDash", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCNavDashI", - "width": 20, - "height": 20, - "iconFontName": "layout-dashboard", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PCNavDashT", - "fill": "$text-secondary", - "content": "Dashboard", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "PCNavL2", - "fill": "$text-tertiary", - "content": "CỬA HÀNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "PCNavStores", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "PCNavStoresLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCNavStoresI", - "width": 20, - "height": 20, - "iconFontName": "store", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PCNavStoresT", - "fill": "$text-secondary", - "content": "Quản lý cửa hàng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PCNavStoresBdg", - "width": 22, - "height": 22, - "fill": "$bg-interactive", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PCNavStoresBdgT", - "fill": "$text-tertiary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PCNavProd", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCNavProdI", - "width": 18, - "height": 18, - "iconFontName": "package", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "PCNavProdT", - "fill": "#FFFFFF", - "content": "Sản phẩm & Menu", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ], - "fill": "$orange-primary" - }, - { - "type": "frame", - "id": "PCNavStaff", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCNavStaffI", - "width": 18, - "height": 18, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "PCNavStaffT", - "fill": "$text-tertiary", - "content": "Nhân sự", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PCNavInv", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCNavInvI", - "width": 18, - "height": 18, - "iconFontName": "warehouse", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "PCNavInvT", - "fill": "$text-tertiary", - "content": "Kho hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PCNavDev", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCNavDevI", - "width": 18, - "height": 18, - "iconFontName": "monitor", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "PCNavDevT", - "fill": "$text-tertiary", - "content": "Thiết bị", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "PCNavL3", - "fill": "$text-tertiary", - "content": "KINH DOANH", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "PCNavCust", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCNavCustI", - "width": 20, - "height": 20, - "iconFontName": "heart", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PCNavCustT", - "fill": "$text-secondary", - "content": "Khách hàng & Loyalty", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PCNavRpt", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCNavRptI", - "width": 20, - "height": 20, - "iconFontName": "bar-chart-2", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PCNavRptT", - "fill": "$text-secondary", - "content": "Báo cáo & Phân tích", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PCNavFin", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCNavFinI", - "width": 20, - "height": 20, - "iconFontName": "wallet", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PCNavFinT", - "fill": "$text-secondary", - "content": "Tài chính", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "PCNavL4", - "fill": "$text-tertiary", - "content": "HỆ THỐNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "PCNavRoles", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCNavRolesI", - "width": 20, - "height": 20, - "iconFontName": "shield", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PCNavRolesT", - "fill": "$text-secondary", - "content": "Phân quyền", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PCNavSet", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCNavSetI", - "width": 20, - "height": 20, - "iconFontName": "settings", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PCNavSetT", - "fill": "$text-secondary", - "content": "Cài đặt", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PCSidebarUser", - "width": "fill_container", - "padding": [ - 16, - 16 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PCUserAv", - "width": 36, - "height": 36, - "fill": "#3B82F6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PCUserAvT", - "fill": "#FFFFFF", - "content": "VH", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "PCUserInfo", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "PCUserN", - "fill": "$text-primary", - "content": "Velik Ho", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "PCUserR", - "fill": "$text-tertiary", - "content": "Owner", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PCMain", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "PCHeader", - "width": "fill_container", - "padding": [ - 16, - 32 - ], - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PCHeaderLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PCBackBtn", - "width": 36, - "height": 36, - "fill": "$bg-interactive", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCBackI", - "width": 18, - "height": 18, - "iconFontName": "arrow-left", - "iconFontFamily": "lucide", - "fill": "$text-primary" - } - ] - }, - { - "type": "text", - "id": "PCHeaderTitle", - "fill": "$text-primary", - "content": "Thêm sản phẩm mới", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "PCHeaderRight", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "PCCancelBtn", - "height": 40, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 20 - ], - "alignItems": "center", - "justifyContent": "center", - "children": [ - { - "type": "text", - "id": "PCCancelBtnT", - "fill": "$text-primary", - "content": "Hủy", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PCSaveBtn", - "fill": "$orange-primary", - "cornerRadius": 10, - "padding": [ - 10, - 20 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PCSaveI", - "width": 18, - "height": 18, - "iconFontName": "save", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "PCSaveT", - "fill": "#FFFFFF", - "content": "Lưu sản phẩm", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PCBody", - "width": "fill_container", - "height": "fill_container", - "padding": 28, - "gap": 24, - "clip": true, - "children": [ - { - "type": "frame", - "id": "PCFormLeft", - "width": "fill_container", - "layout": "vertical", - "gap": 24, - "children": [ - { - "type": "frame", - "id": "PCInfoCard", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 24, - "layout": "vertical", - "gap": 20, - "children": [ - { - "type": "text", - "id": "PCInfoTitle", - "fill": "$text-primary", - "content": "Thông tin sản phẩm", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "PCFieldName", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "PCFieldNameL", - "fill": "$text-secondary", - "content": "Tên sản phẩm *", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "PCFieldNameInput", - "width": "fill_container", - "height": 44, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PCFieldNameV", - "fill": "$text-tertiary", - "content": "Nhập tên sản phẩm...", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - }, - { - "type": "frame", - "id": "PCFieldSKU", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "PCFieldSKUL", - "fill": "$text-secondary", - "content": "Mã SKU", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "PCFieldSKUInput", - "width": "fill_container", - "height": 44, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PCFieldSKUV", - "fill": "$text-tertiary", - "content": "VD: CF-ESP-001", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - }, - { - "type": "frame", - "id": "PCFieldDesc", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "PCFieldDescL", - "fill": "$text-secondary", - "content": "Mô tả", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "PCFieldDescInput", - "width": "fill_container", - "height": 100, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": 14, - "children": [ - { - "type": "text", - "id": "PCFieldDescV", - "fill": "$text-tertiary", - "content": "Nhập mô tả sản phẩm...", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - }, - { - "type": "frame", - "id": "PCFieldCat", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "PCFieldCatL", - "fill": "$text-secondary", - "content": "Danh mục", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "PCFieldCatInput", - "width": "fill_container", - "height": 44, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "alignItems": "center", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "PCFieldCatV", - "fill": "$text-tertiary", - "content": "Chọn danh mục...", - "fontFamily": "Roboto", - "fontSize": 14 - }, - { - "type": "icon_font", - "id": "PCFieldCatChev", - "width": 16, - "height": 16, - "iconFontName": "chevron-down", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PCPriceRow", - "width": "fill_container", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "PCFieldPrice", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "PCFieldPriceL", - "fill": "$text-secondary", - "content": "Giá bán (₫)", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "PCFieldPriceInput", - "width": "fill_container", - "height": 44, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PCFieldPriceV", - "fill": "$text-primary", - "content": "35,000", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - }, - { - "type": "frame", - "id": "PCFieldCost", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "PCFieldCostL", - "fill": "$text-secondary", - "content": "Giá vốn (₫)", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "PCFieldCostInput", - "width": "fill_container", - "height": 44, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PCFieldCostV", - "fill": "$text-primary", - "content": "12,000", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PCFormRight", - "width": 360, - "layout": "vertical", - "gap": 24, - "children": [ - { - "type": "frame", - "id": "PCImageCard", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 24, - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "text", - "id": "PCImageTitle", - "fill": "$text-primary", - "content": "Hình ảnh", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "PCImageUpload", - "width": "fill_container", - "height": 160, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "layout": "vertical", - "gap": 12, - "stroke": { - "thickness": 2, - "fill": "$border-default", - "dashArray": [ - 6, - 4 - ] - }, - "children": [ - { - "type": "icon_font", - "id": "PCImageUploadI", - "width": 32, - "height": 32, - "iconFontName": "image-plus", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "PCImageUploadT", - "fill": "$text-secondary", - "content": "Kéo thả hoặc nhấn để tải ảnh", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "PCImageUploadS", - "fill": "$text-tertiary", - "content": "PNG, JPG tối đa 5MB", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "PCStockCard", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 24, - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "text", - "id": "PCStockTitle", - "fill": "$text-primary", - "content": "Kho hàng", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "PCFieldQty", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "PCFieldQtyL", - "fill": "$text-secondary", - "content": "Số lượng tồn kho", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "PCFieldQtyInput", - "width": "fill_container", - "height": 44, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PCFieldQtyV", - "fill": "$text-primary", - "content": "100", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - }, - { - "type": "frame", - "id": "PCFieldAlert", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "PCFieldAlertL", - "fill": "$text-secondary", - "content": "Ngưỡng cảnh báo", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "PCFieldAlertInput", - "width": "fill_container", - "height": 44, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PCFieldAlertV", - "fill": "$text-primary", - "content": "10", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PCToggleCard", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 24, - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "text", - "id": "PCToggleTitle", - "fill": "$text-primary", - "content": "Hiển thị", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "PCTogglePOS", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PCTogglePOSL", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "PCTogglePOST", - "fill": "$text-primary", - "content": "Hiển thị trên POS", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "text", - "id": "PCTogglePOSSub", - "fill": "$text-tertiary", - "content": "Sản phẩm sẽ hiện trên màn hình POS", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - }, - { - "type": "frame", - "id": "PCTogglePOSSw", - "width": 44, - "height": 24, - "fill": "$orange-primary", - "cornerRadius": 100, - "padding": [ - 2, - 2 - ], - "justifyContent": "flex_end", - "children": [ - { - "type": "frame", - "id": "PCTogglePOSDot", - "width": 20, - "height": 20, - "fill": "#FFFFFF", - "cornerRadius": 100 - } - ] - } - ] - } - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "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/admin/purchase-orders.pen b/pencil-design/src/pages/tPOS/admin/purchase-orders.pen deleted file mode 100644 index 47eb726c..00000000 --- a/pencil-design/src/pages/tPOS/admin/purchase-orders.pen +++ /dev/null @@ -1,1559 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "PurchaseOrders", - "name": "Admin/PurchaseOrders", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "$bg-page", - "clip": true, - "children": [ - { - "type": "frame", - "id": "POSidebar", - "width": 260, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "right" - ] - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "POSidebarLogo", - "width": "fill_container", - "padding": [ - 24, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "POLogoIcon", - "width": 40, - "height": 40, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "POLogoT", - "fill": "#FFFFFF", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "800" - } - ] - }, - { - "type": "frame", - "id": "POLogoTG", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "POLogoN", - "fill": "$text-primary", - "content": "GoodGo Admin", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "text", - "id": "POLogoS", - "fill": "$text-tertiary", - "content": "Management Console", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "POSidebarNav", - "width": "fill_container", - "height": "fill_container", - "padding": [ - 16, - 12 - ], - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "PONavL1", - "fill": "$text-tertiary", - "content": "TỔNG QUAN", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 0, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "PONavDash", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PONavDashI", - "width": 20, - "height": 20, - "iconFontName": "layout-dashboard", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PONavDashT", - "fill": "$text-secondary", - "content": "Dashboard", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "PONavL2", - "fill": "$text-tertiary", - "content": "CỬA HÀNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "PONavStores", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "PONavStoresLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PONavStoresI", - "width": 20, - "height": 20, - "iconFontName": "store", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PONavStoresT", - "fill": "$text-secondary", - "content": "Quản lý cửa hàng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PONavStoresBdg", - "width": 22, - "height": 22, - "fill": "$bg-interactive", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PONavStoresBdgT", - "fill": "$text-tertiary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PONavProd", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PONavProdI", - "width": 18, - "height": 18, - "iconFontName": "package", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "PONavProdT", - "fill": "$text-tertiary", - "content": "Sản phẩm & Menu", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PONavStaff", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PONavStaffI", - "width": 18, - "height": 18, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "PONavStaffT", - "fill": "$text-tertiary", - "content": "Nhân sự", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PONavInv", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PONavInvI", - "width": 18, - "height": 18, - "iconFontName": "warehouse", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "PONavInvT", - "fill": "#FFFFFF", - "content": "Kho hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ], - "fill": "$orange-primary" - }, - { - "type": "frame", - "id": "PONavDev", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PONavDevI", - "width": 18, - "height": 18, - "iconFontName": "monitor", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "PONavDevT", - "fill": "$text-tertiary", - "content": "Thiết bị", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "PONavL3", - "fill": "$text-tertiary", - "content": "KINH DOANH", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "PONavCust", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PONavCustI", - "width": 20, - "height": 20, - "iconFontName": "heart", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PONavCustT", - "fill": "$text-secondary", - "content": "Khách hàng & Loyalty", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PONavRpt", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PONavRptI", - "width": 20, - "height": 20, - "iconFontName": "bar-chart-2", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PONavRptT", - "fill": "$text-secondary", - "content": "Báo cáo & Phân tích", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PONavFin", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PONavFinI", - "width": 20, - "height": 20, - "iconFontName": "wallet", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PONavFinT", - "fill": "$text-secondary", - "content": "Tài chính", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "PONavL4", - "fill": "$text-tertiary", - "content": "HỆ THỐNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "PONavRoles", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PONavRolesI", - "width": 20, - "height": 20, - "iconFontName": "shield", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PONavRolesT", - "fill": "$text-secondary", - "content": "Phân quyền", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PONavSet", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PONavSetI", - "width": 20, - "height": 20, - "iconFontName": "settings", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PONavSetT", - "fill": "$text-secondary", - "content": "Cài đặt", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "POSidebarUser", - "width": "fill_container", - "padding": [ - 16, - 16 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "POUserAv", - "width": 36, - "height": 36, - "fill": "#3B82F6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "POUserAvT", - "fill": "#FFFFFF", - "content": "VH", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "POUserInfo", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "POUserN", - "fill": "$text-primary", - "content": "Velik Ho", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "POUserR", - "fill": "$text-tertiary", - "content": "Owner", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "POMain", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "POHeader", - "width": "fill_container", - "padding": [ - 16, - 32 - ], - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "POHeaderLeft", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "frame", - "id": "POBreadcrumb", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "POBread1", - "fill": "$text-tertiary", - "content": "Kho hàng", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "POBreadSep", - "fill": "$text-tertiary", - "content": "/", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "POBread2", - "fill": "$orange-primary", - "content": "Đơn đặt hàng", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "POHeaderTitle", - "fill": "$text-primary", - "content": "Đơn đặt hàng", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "POHeaderRight", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "POSearchBox", - "width": 220, - "height": 40, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "POSearchI", - "width": 18, - "height": 18, - "iconFontName": "search", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "POSearchP", - "fill": "$text-tertiary", - "content": "Tìm đơn hàng...", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "id": "POAddBtn", - "fill": "$orange-primary", - "cornerRadius": 10, - "padding": [ - 10, - 16 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "POAddI", - "width": 18, - "height": 18, - "iconFontName": "plus", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "POAddT", - "fill": "#FFFFFF", - "content": "Tạo PO mới", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "POContent", - "width": "fill_container", - "height": "fill_container", - "padding": 24, - "layout": "vertical", - "gap": 20, - "clip": true, - "children": [ - { - "type": "frame", - "id": "POTabs", - "width": "fill_container", - "gap": 0, - "children": [ - { - "type": "frame", - "id": "POTab1", - "padding": [ - 10, - 20 - ], - "stroke": { - "thickness": 2, - "fill": "$orange-primary", - "sides": [ - "bottom" - ] - }, - "children": [ - { - "type": "text", - "id": "POTab1T", - "fill": "$orange-primary", - "content": "Tất cả (5)", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "POTab2", - "padding": [ - 10, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "children": [ - { - "type": "text", - "id": "POTab2T", - "fill": "$text-tertiary", - "content": "Draft (1)", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "POTab3", - "padding": [ - 10, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "children": [ - { - "type": "text", - "id": "POTab3T", - "fill": "$text-tertiary", - "content": "Chờ duyệt (1)", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "POTab4", - "padding": [ - 10, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "children": [ - { - "type": "text", - "id": "POTab4T", - "fill": "$text-tertiary", - "content": "Đang giao (1)", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "POTab5", - "padding": [ - 10, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "children": [ - { - "type": "text", - "id": "POTab5T", - "fill": "$text-tertiary", - "content": "Đã nhận (2)", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "POTable", - "width": "fill_container", - "height": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "POTableHead", - "width": "fill_container", - "height": 48, - "padding": [ - 0, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "POTh1", - "width": 130, - "fill": "$text-tertiary", - "content": "Mã PO", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "POTh2", - "width": 200, - "fill": "$text-tertiary", - "content": "Nhà cung cấp", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "POTh3", - "width": 140, - "fill": "$text-tertiary", - "content": "Ngày tạo", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "POTh4", - "width": 160, - "fill": "$text-tertiary", - "content": "Tổng tiền", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "POTh5", - "width": 100, - "fill": "$text-tertiary", - "content": "Số SP", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "POTh6", - "width": 120, - "fill": "$text-tertiary", - "content": "Trạng thái", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "PORow1", - "width": "fill_container", - "height": 56, - "padding": [ - 0, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "POR1C1", - "width": 130, - "fill": "$orange-primary", - "content": "PO-2024-001", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "POR1C2", - "width": 200, - "fill": "$text-primary", - "content": "Lavazza Vietnam", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "POR1C3", - "width": 140, - "fill": "$text-secondary", - "content": "15/01/2024", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "POR1C4", - "width": 160, - "fill": "$text-primary", - "content": "12,500,000₫", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "POR1C5", - "width": 100, - "fill": "$text-secondary", - "content": "8", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "frame", - "id": "POR1Badge", - "width": 120, - "children": [ - { - "type": "frame", - "id": "POR1BadgeF", - "fill": "#22C55E20", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "POR1BadgeT", - "fill": "#22C55E", - "content": "Đã nhận", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PORow2", - "width": "fill_container", - "height": 56, - "padding": [ - 0, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "POR2C1", - "width": 130, - "fill": "$orange-primary", - "content": "PO-2024-002", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "POR2C2", - "width": 200, - "fill": "$text-primary", - "content": "Milo Vietnam", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "POR2C3", - "width": 140, - "fill": "$text-secondary", - "content": "18/01/2024", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "POR2C4", - "width": 160, - "fill": "$text-primary", - "content": "8,200,000₫", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "POR2C5", - "width": 100, - "fill": "$text-secondary", - "content": "5", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "frame", - "id": "POR2Badge", - "width": 120, - "children": [ - { - "type": "frame", - "id": "POR2BadgeF", - "fill": "#3B82F620", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "POR2BadgeT", - "fill": "#3B82F6", - "content": "Đang giao", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PORow3", - "width": "fill_container", - "height": 56, - "padding": [ - 0, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "POR3C1", - "width": 130, - "fill": "$orange-primary", - "content": "PO-2024-003", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "POR3C2", - "width": 200, - "fill": "$text-primary", - "content": "Vinamilk", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "POR3C3", - "width": 140, - "fill": "$text-secondary", - "content": "20/01/2024", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "POR3C4", - "width": 160, - "fill": "$text-primary", - "content": "5,800,000₫", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "POR3C5", - "width": 100, - "fill": "$text-secondary", - "content": "12", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "frame", - "id": "POR3Badge", - "width": 120, - "children": [ - { - "type": "frame", - "id": "POR3BadgeF", - "fill": "#F59E0B20", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "POR3BadgeT", - "fill": "#F59E0B", - "content": "Chờ duyệt", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PORow4", - "width": "fill_container", - "height": 56, - "padding": [ - 0, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "POR4C1", - "width": 130, - "fill": "$orange-primary", - "content": "PO-2024-004", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "POR4C2", - "width": 200, - "fill": "$text-primary", - "content": "Fresh Garden", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "POR4C3", - "width": 140, - "fill": "$text-secondary", - "content": "22/01/2024", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "POR4C4", - "width": 160, - "fill": "$text-primary", - "content": "3,400,000₫", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "POR4C5", - "width": 100, - "fill": "$text-secondary", - "content": "6", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "frame", - "id": "POR4Badge", - "width": 120, - "children": [ - { - "type": "frame", - "id": "POR4BadgeF", - "fill": "#8B8B9020", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "POR4BadgeT", - "fill": "$text-tertiary", - "content": "Draft", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PORow5", - "width": "fill_container", - "height": 56, - "padding": [ - 0, - 20 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "POR5C1", - "width": 130, - "fill": "$orange-primary", - "content": "PO-2024-005", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "POR5C2", - "width": 200, - "fill": "$text-primary", - "content": "Đường Biên Hòa", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "POR5C3", - "width": 140, - "fill": "$text-secondary", - "content": "10/01/2024", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "POR5C4", - "width": 160, - "fill": "$text-primary", - "content": "2,100,000₫", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "POR5C5", - "width": 100, - "fill": "$text-secondary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "frame", - "id": "POR5Badge", - "width": 120, - "children": [ - { - "type": "frame", - "id": "POR5BadgeF", - "fill": "#22C55E20", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "POR5BadgeT", - "fill": "#22C55E", - "content": "Đã nhận", - "fontFamily": "Roboto", - "fontSize": 11, - "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/admin/revenue-analytics.pen b/pencil-design/src/pages/tPOS/admin/revenue-analytics.pen deleted file mode 100644 index 5227e565..00000000 --- a/pencil-design/src/pages/tPOS/admin/revenue-analytics.pen +++ /dev/null @@ -1,1600 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "RevenueAnalytics", - "name": "Admin/RevenueAnalytics", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "$bg-page", - "clip": true, - "children": [ - { - "type": "frame", - "id": "RASidebar", - "width": 260, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "right" - ] - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "RASidebarLogo", - "width": "fill_container", - "padding": [ - 24, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "RALogoIcon", - "width": 40, - "height": 40, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "RALogoT", - "fill": "#FFFFFF", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "800" - } - ] - }, - { - "type": "frame", - "id": "RALogoTG", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "RALogoN", - "fill": "$text-primary", - "content": "GoodGo Admin", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "text", - "id": "RALogoS", - "fill": "$text-tertiary", - "content": "Management Console", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "RASidebarNav", - "width": "fill_container", - "height": "fill_container", - "padding": [ - 16, - 12 - ], - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "RANavL1", - "fill": "$text-tertiary", - "content": "TỔNG QUAN", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 0, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "RANavDash", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "RANavDashI", - "width": 20, - "height": 20, - "iconFontName": "layout-dashboard", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "RANavDashT", - "fill": "$text-secondary", - "content": "Dashboard", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "RANavL2", - "fill": "$text-tertiary", - "content": "CỬA HÀNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "RANavStores", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "RANavStoresLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "RANavStoresI", - "width": 20, - "height": 20, - "iconFontName": "store", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "RANavStoresT", - "fill": "$text-secondary", - "content": "Quản lý cửa hàng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "RANavStoresBdg", - "width": 22, - "height": 22, - "fill": "$bg-interactive", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "RANavStoresBdgT", - "fill": "$text-tertiary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "RANavProd", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "RANavProdI", - "width": 18, - "height": 18, - "iconFontName": "package", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "RANavProdT", - "fill": "$text-tertiary", - "content": "Sản phẩm & Menu", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "RANavStaff", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "RANavStaffI", - "width": 18, - "height": 18, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "RANavStaffT", - "fill": "$text-tertiary", - "content": "Nhân sự", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "RANavInv", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "RANavInvI", - "width": 18, - "height": 18, - "iconFontName": "warehouse", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "RANavInvT", - "fill": "$text-tertiary", - "content": "Kho hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "RANavDev", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "RANavDevI", - "width": 18, - "height": 18, - "iconFontName": "monitor", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "RANavDevT", - "fill": "$text-tertiary", - "content": "Thiết bị", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "RANavL3", - "fill": "$text-tertiary", - "content": "KINH DOANH", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "RANavCust", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "RANavCustI", - "width": 20, - "height": 20, - "iconFontName": "heart", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "RANavCustT", - "fill": "$text-secondary", - "content": "Khách hàng & Loyalty", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "RANavRpt", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "RANavRptI", - "width": 20, - "height": 20, - "iconFontName": "bar-chart-2", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "RANavRptT", - "fill": "#FFFFFF", - "content": "Báo cáo & Phân tích", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ], - "fill": "$orange-primary" - }, - { - "type": "frame", - "id": "RANavFin", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "RANavFinI", - "width": 20, - "height": 20, - "iconFontName": "wallet", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "RANavFinT", - "fill": "$text-secondary", - "content": "Tài chính", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "RANavL4", - "fill": "$text-tertiary", - "content": "HỆ THỐNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "RANavRoles", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "RANavRolesI", - "width": 20, - "height": 20, - "iconFontName": "shield", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "RANavRolesT", - "fill": "$text-secondary", - "content": "Phân quyền", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "RANavSet", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "RANavSetI", - "width": 20, - "height": 20, - "iconFontName": "settings", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "RANavSetT", - "fill": "$text-secondary", - "content": "Cài đặt", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "RASidebarUser", - "width": "fill_container", - "padding": [ - 16, - 16 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "RAUserAv", - "width": 36, - "height": 36, - "fill": "#3B82F6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "RAUserAvT", - "fill": "#FFFFFF", - "content": "VH", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "RAUserInfo", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "RAUserN", - "fill": "$text-primary", - "content": "Velik Ho", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "RAUserR", - "fill": "$text-tertiary", - "content": "Owner", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "RAMain", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "RAHeader", - "width": "fill_container", - "padding": [ - 16, - 32 - ], - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "RAHeaderLeft", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "RAHeaderTitle", - "fill": "$text-primary", - "content": "Phân tích doanh thu", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "700" - }, - { - "type": "text", - "id": "RAHeaderSub", - "fill": "$text-tertiary", - "content": "Theo dõi và phân tích hiệu suất kinh doanh", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "id": "RAHeaderRight", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "RADatePicker", - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 10, - 16 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "RADateI", - "width": 18, - "height": 18, - "iconFontName": "calendar", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "RADateT", - "fill": "$text-secondary", - "content": "01/02 - 11/02/2026", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "RAStoreSelect", - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 10, - 16 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "RAStoreI", - "width": 18, - "height": 18, - "iconFontName": "store", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "RAStoreT", - "fill": "$text-secondary", - "content": "Tất cả cửa hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "icon_font", - "id": "RAStoreChev", - "width": 16, - "height": 16, - "iconFontName": "chevron-down", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "RAContent", - "width": "fill_container", - "height": "fill_container", - "padding": 28, - "layout": "vertical", - "gap": 20, - "clip": true, - "children": [ - { - "type": "frame", - "id": "RAKpiRow", - "width": "fill_container", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "RAKpi1", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 20, - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "RAKpi1L", - "fill": "$text-tertiary", - "content": "Tổng doanh thu", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "RAKpi1V", - "fill": "$text-primary", - "content": "156.8M", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "RAKpi1Change", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "RAKpi1Arrow", - "width": 14, - "height": 14, - "iconFontName": "trending-up", - "iconFontFamily": "lucide", - "fill": "#22C55E" - }, - { - "type": "text", - "id": "RAKpi1Pct", - "fill": "#22C55E", - "content": "+12.3%", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "RAKpi1Vs", - "fill": "$text-tertiary", - "content": "vs tháng trước", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "RAKpi2", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 20, - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "RAKpi2L", - "fill": "$text-tertiary", - "content": "Đơn hàng TB", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "RAKpi2V", - "fill": "$text-primary", - "content": "125K", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "RAKpi2Change", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "RAKpi2Arrow", - "width": 14, - "height": 14, - "iconFontName": "trending-up", - "iconFontFamily": "lucide", - "fill": "#22C55E" - }, - { - "type": "text", - "id": "RAKpi2Pct", - "fill": "#22C55E", - "content": "+5.2%", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "RAKpi3", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 20, - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "RAKpi3L", - "fill": "$text-tertiary", - "content": "Đơn hàng", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "RAKpi3V", - "fill": "$text-primary", - "content": "1,254", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "RAKpi3Change", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "RAKpi3Arrow", - "width": 14, - "height": 14, - "iconFontName": "trending-up", - "iconFontFamily": "lucide", - "fill": "#22C55E" - }, - { - "type": "text", - "id": "RAKpi3Pct", - "fill": "#22C55E", - "content": "+8.1%", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "RAKpi4", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 20, - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "RAKpi4L", - "fill": "$text-tertiary", - "content": "Khách mới", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "RAKpi4V", - "fill": "$text-primary", - "content": "89", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "RAKpi4Change", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "RAKpi4Arrow", - "width": 14, - "height": 14, - "iconFontName": "trending-down", - "iconFontFamily": "lucide", - "fill": "#EF4444" - }, - { - "type": "text", - "id": "RAKpi4Pct", - "fill": "#EF4444", - "content": "-3.4%", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "RAChartCard", - "width": "fill_container", - "height": 260, - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 24, - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "RAChartHead", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "RAChartTitle", - "fill": "$text-primary", - "content": "Xu hướng doanh thu", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "RAChartLegend", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "RALeg1", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "RALeg1Dot", - "width": 10, - "height": 10, - "fill": "$orange-primary", - "cornerRadius": 100 - }, - { - "type": "text", - "id": "RALeg1T", - "fill": "$text-tertiary", - "content": "Doanh thu", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - }, - { - "type": "frame", - "id": "RALeg2", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "RALeg2Dot", - "width": 10, - "height": 10, - "fill": "#3B82F6", - "cornerRadius": 100 - }, - { - "type": "text", - "id": "RALeg2T", - "fill": "$text-tertiary", - "content": "Tháng trước", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "RAChartArea", - "width": "fill_container", - "height": "fill_container", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom", - "left" - ] - }, - "children": [ - { - "type": "frame", - "id": "RAGrid1", - "width": "fill_container", - "height": 1, - "fill": "$border-subtle", - "y": 40 - }, - { - "type": "frame", - "id": "RAGrid2", - "width": "fill_container", - "height": 1, - "fill": "$border-subtle", - "y": 80 - }, - { - "type": "frame", - "id": "RAGrid3", - "width": "fill_container", - "height": 1, - "fill": "$border-subtle", - "y": 120 - }, - { - "type": "text", - "id": "RAYLabel1", - "fill": "$text-tertiary", - "content": "20M", - "fontFamily": "Roboto", - "fontSize": 10, - "x": -30, - "y": 35 - }, - { - "type": "text", - "id": "RAYLabel2", - "fill": "$text-tertiary", - "content": "15M", - "fontFamily": "Roboto", - "fontSize": 10, - "x": -30, - "y": 75 - }, - { - "type": "text", - "id": "RAYLabel3", - "fill": "$text-tertiary", - "content": "10M", - "fontFamily": "Roboto", - "fontSize": 10, - "x": -30, - "y": 115 - } - ] - } - ] - }, - { - "type": "frame", - "id": "RATableCard", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "RATableHead", - "width": "fill_container", - "padding": [ - 16, - 24 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "RATableTitle", - "fill": "$text-primary", - "content": "Top sản phẩm bán chạy", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "RATblHdr", - "width": "fill_container", - "padding": [ - 12, - 24 - ], - "fill": "$bg-interactive", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "RATblH1", - "fill": "$text-tertiary", - "content": "Sản phẩm", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600", - "width": "fill_container" - }, - { - "type": "text", - "id": "RATblH2", - "fill": "$text-tertiary", - "content": "SL bán", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600", - "width": 100 - }, - { - "type": "text", - "id": "RATblH3", - "fill": "$text-tertiary", - "content": "Doanh thu", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600", - "width": 120 - }, - { - "type": "text", - "id": "RATblH4", - "fill": "$text-tertiary", - "content": "% Tổng", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600", - "width": 80 - } - ] - }, - { - "type": "frame", - "id": "RATblR1", - "width": "fill_container", - "padding": [ - 14, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "RATR1N", - "fill": "$text-primary", - "content": "Trà sữa trân châu", - "fontFamily": "Roboto", - "fontSize": 13, - "width": "fill_container" - }, - { - "type": "text", - "id": "RATR1Q", - "fill": "$text-secondary", - "content": "342", - "fontFamily": "Roboto", - "fontSize": 13, - "width": 100 - }, - { - "type": "text", - "id": "RATR1R", - "fill": "$text-primary", - "content": "34.2M", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600", - "width": 120 - }, - { - "type": "text", - "id": "RATR1P", - "fill": "$orange-primary", - "content": "21.8%", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600", - "width": 80 - } - ] - }, - { - "type": "frame", - "id": "RATblR2", - "width": "fill_container", - "padding": [ - 14, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "RATR2N", - "fill": "$text-primary", - "content": "Cà phê sữa đá", - "fontFamily": "Roboto", - "fontSize": 13, - "width": "fill_container" - }, - { - "type": "text", - "id": "RATR2Q", - "fill": "$text-secondary", - "content": "289", - "fontFamily": "Roboto", - "fontSize": 13, - "width": 100 - }, - { - "type": "text", - "id": "RATR2R", - "fill": "$text-primary", - "content": "28.9M", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600", - "width": 120 - }, - { - "type": "text", - "id": "RATR2P", - "fill": "$orange-primary", - "content": "18.4%", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600", - "width": 80 - } - ] - }, - { - "type": "frame", - "id": "RATblR3", - "width": "fill_container", - "padding": [ - 14, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "RATR3N", - "fill": "$text-primary", - "content": "Bánh mì thịt nướng", - "fontFamily": "Roboto", - "fontSize": 13, - "width": "fill_container" - }, - { - "type": "text", - "id": "RATR3Q", - "fill": "$text-secondary", - "content": "215", - "fontFamily": "Roboto", - "fontSize": 13, - "width": 100 - }, - { - "type": "text", - "id": "RATR3R", - "fill": "$text-primary", - "content": "21.5M", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600", - "width": 120 - }, - { - "type": "text", - "id": "RATR3P", - "fill": "$orange-primary", - "content": "13.7%", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600", - "width": 80 - } - ] - }, - { - "type": "frame", - "id": "RATblR4", - "width": "fill_container", - "padding": [ - 14, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "RATR4N", - "fill": "$text-primary", - "content": "Phở bò đặc biệt", - "fontFamily": "Roboto", - "fontSize": 13, - "width": "fill_container" - }, - { - "type": "text", - "id": "RATR4Q", - "fill": "$text-secondary", - "content": "178", - "fontFamily": "Roboto", - "fontSize": 13, - "width": 100 - }, - { - "type": "text", - "id": "RATR4R", - "fill": "$text-primary", - "content": "17.8M", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600", - "width": 120 - }, - { - "type": "text", - "id": "RATR4P", - "fill": "$orange-primary", - "content": "11.3%", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600", - "width": 80 - } - ] - }, - { - "type": "frame", - "id": "RATblR5", - "width": "fill_container", - "padding": [ - 14, - 24 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "RATR5N", - "fill": "$text-primary", - "content": "Bún bò Huế", - "fontFamily": "Roboto", - "fontSize": 13, - "width": "fill_container" - }, - { - "type": "text", - "id": "RATR5Q", - "fill": "$text-secondary", - "content": "156", - "fontFamily": "Roboto", - "fontSize": 13, - "width": 100 - }, - { - "type": "text", - "id": "RATR5R", - "fill": "$text-primary", - "content": "15.6M", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600", - "width": 120 - }, - { - "type": "text", - "id": "RATR5P", - "fill": "$orange-primary", - "content": "9.9%", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600", - "width": 80 - } - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "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/admin/role-permissions.pen b/pencil-design/src/pages/tPOS/admin/role-permissions.pen deleted file mode 100644 index 0bb99827..00000000 --- a/pencil-design/src/pages/tPOS/admin/role-permissions.pen +++ /dev/null @@ -1,2561 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "RolePermissions", - "name": "Admin/RolePermissions", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "$bg-page", - "clip": true, - "children": [ - { - "type": "frame", - "id": "RPSidebar", - "width": 260, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "right" - ] - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "RPSidebarLogo", - "width": "fill_container", - "padding": [ - 24, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "RPLogoIcon", - "width": 40, - "height": 40, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "RPLogoT", - "fill": "#FFFFFF", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "800" - } - ] - }, - { - "type": "frame", - "id": "RPLogoTG", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "RPLogoN", - "fill": "$text-primary", - "content": "GoodGo Admin", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "text", - "id": "RPLogoS", - "fill": "$text-tertiary", - "content": "Management Console", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "RPSidebarNav", - "width": "fill_container", - "height": "fill_container", - "padding": [ - 16, - 12 - ], - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "RPNavL1", - "fill": "$text-tertiary", - "content": "TỔNG QUAN", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 0, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "RPNavDash", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "RPNavDashI", - "width": 20, - "height": 20, - "iconFontName": "layout-dashboard", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "RPNavDashT", - "fill": "$text-secondary", - "content": "Dashboard", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "RPNavL2", - "fill": "$text-tertiary", - "content": "CỬA HÀNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "RPNavStores", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "RPNavStoresLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "RPNavStoresI", - "width": 20, - "height": 20, - "iconFontName": "store", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "RPNavStoresT", - "fill": "$text-secondary", - "content": "Quản lý cửa hàng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "RPNavStoresBdg", - "width": 22, - "height": 22, - "fill": "$bg-interactive", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "RPNavStoresBdgT", - "fill": "$text-tertiary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "RPNavProd", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "RPNavProdI", - "width": 18, - "height": 18, - "iconFontName": "package", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "RPNavProdT", - "fill": "$text-tertiary", - "content": "Sản phẩm & Menu", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "RPNavStaff", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "RPNavStaffI", - "width": 18, - "height": 18, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "RPNavStaffT", - "fill": "$text-tertiary", - "content": "Nhân sự", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "RPNavInv", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "RPNavInvI", - "width": 18, - "height": 18, - "iconFontName": "warehouse", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "RPNavInvT", - "fill": "$text-tertiary", - "content": "Kho hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "RPNavDev", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "RPNavDevI", - "width": 18, - "height": 18, - "iconFontName": "monitor", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "RPNavDevT", - "fill": "$text-tertiary", - "content": "Thiết bị", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "RPNavL3", - "fill": "$text-tertiary", - "content": "KINH DOANH", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "RPNavCust", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "RPNavCustI", - "width": 20, - "height": 20, - "iconFontName": "heart", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "RPNavCustT", - "fill": "$text-secondary", - "content": "Khách hàng & Loyalty", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "RPNavRpt", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "RPNavRptI", - "width": 20, - "height": 20, - "iconFontName": "bar-chart-2", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "RPNavRptT", - "fill": "$text-secondary", - "content": "Báo cáo & Phân tích", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "RPNavFin", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "RPNavFinI", - "width": 20, - "height": 20, - "iconFontName": "wallet", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "RPNavFinT", - "fill": "$text-secondary", - "content": "Tài chính", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "RPNavL4", - "fill": "$text-tertiary", - "content": "HỆ THỐNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "RPNavRoles", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "RPNavRolesI", - "width": 20, - "height": 20, - "iconFontName": "shield", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "RPNavRolesT", - "fill": "#FFFFFF", - "content": "Phân quyền", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ], - "fill": "$orange-primary" - }, - { - "type": "frame", - "id": "RPNavSet", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "RPNavSetI", - "width": 20, - "height": 20, - "iconFontName": "settings", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "RPNavSetT", - "fill": "$text-secondary", - "content": "Cài đặt", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "RPSidebarUser", - "width": "fill_container", - "padding": [ - 16, - 16 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "RPUserAv", - "width": 36, - "height": 36, - "fill": "#3B82F6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "RPUserAvT", - "fill": "#FFFFFF", - "content": "VH", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "RPUserInfo", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "RPUserN", - "fill": "$text-primary", - "content": "Velik Ho", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "RPUserR", - "fill": "$text-tertiary", - "content": "Owner", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "RPMain", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "RPHeader", - "width": "fill_container", - "padding": [ - 16, - 32 - ], - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "RPHeaderLeft", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "RPHeaderTitle", - "fill": "$text-primary", - "content": "Phân quyền vai trò", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "700" - }, - { - "type": "text", - "id": "RPHeaderSub", - "fill": "$text-tertiary", - "content": "Quản lý quyền hạn cho từng vai trò trong hệ thống", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "id": "RPHeaderRight", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "RPAddRole", - "fill": "$orange-primary", - "cornerRadius": 10, - "padding": [ - 10, - 16 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "RPAddI", - "width": 18, - "height": 18, - "iconFontName": "plus", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "RPAddT", - "fill": "#FFFFFF", - "content": "Tạo vai trò", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "RPContent", - "width": "fill_container", - "height": "fill_container", - "padding": 28, - "layout": "vertical", - "gap": 0, - "clip": true, - "children": [ - { - "type": "frame", - "id": "RPMatrixHeader", - "width": "fill_container", - "padding": [ - 16, - 0 - ], - "fill": "$bg-elevated", - "cornerRadius": [ - 12, - 12, - 0, - 0 - ], - "gap": 0, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "RPMH0", - "width": 200, - "padding": [ - 0, - 20 - ], - "children": [ - { - "type": "text", - "id": "RPMH0T", - "fill": "$text-tertiary", - "content": "Quyền hạn", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "RPMH1", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "RPMH1G", - "layout": "vertical", - "gap": 4, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "RPMH1Badge", - "fill": "$orange-primary", - "cornerRadius": 6, - "padding": [ - 3, - 10 - ], - "children": [ - { - "type": "text", - "id": "RPMH1T", - "fill": "#FFFFFF", - "content": "Owner", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "RPMH1S", - "fill": "$text-tertiary", - "content": "1 người", - "fontFamily": "Roboto", - "fontSize": 10 - } - ] - } - ] - }, - { - "type": "frame", - "id": "RPMH2", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "RPMH2G", - "layout": "vertical", - "gap": 4, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "RPMH2Badge", - "fill": "#3B82F6", - "cornerRadius": 6, - "padding": [ - 3, - 10 - ], - "children": [ - { - "type": "text", - "id": "RPMH2T", - "fill": "#FFFFFF", - "content": "Admin", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "RPMH2S", - "fill": "$text-tertiary", - "content": "2 người", - "fontFamily": "Roboto", - "fontSize": 10 - } - ] - } - ] - }, - { - "type": "frame", - "id": "RPMH3", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "RPMH3G", - "layout": "vertical", - "gap": 4, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "RPMH3Badge", - "fill": "#22C55E", - "cornerRadius": 6, - "padding": [ - 3, - 10 - ], - "children": [ - { - "type": "text", - "id": "RPMH3T", - "fill": "#FFFFFF", - "content": "Manager", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "RPMH3S", - "fill": "$text-tertiary", - "content": "3 người", - "fontFamily": "Roboto", - "fontSize": 10 - } - ] - } - ] - }, - { - "type": "frame", - "id": "RPMH4", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "RPMH4G", - "layout": "vertical", - "gap": 4, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "RPMH4Badge", - "fill": "#F59E0B", - "cornerRadius": 6, - "padding": [ - 3, - 10 - ], - "children": [ - { - "type": "text", - "id": "RPMH4T", - "fill": "#FFFFFF", - "content": "Cashier", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "RPMH4S", - "fill": "$text-tertiary", - "content": "4 người", - "fontFamily": "Roboto", - "fontSize": 10 - } - ] - } - ] - }, - { - "type": "frame", - "id": "RPMH5", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "RPMH5G", - "layout": "vertical", - "gap": 4, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "RPMH5Badge", - "fill": "#EC4899", - "cornerRadius": 6, - "padding": [ - 3, - 10 - ], - "children": [ - { - "type": "text", - "id": "RPMH5T", - "fill": "#FFFFFF", - "content": "Waiter", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "RPMH5S", - "fill": "$text-tertiary", - "content": "5 người", - "fontFamily": "Roboto", - "fontSize": 10 - } - ] - } - ] - }, - { - "type": "frame", - "id": "RPMH6", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "RPMH6G", - "layout": "vertical", - "gap": 4, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "RPMH6Badge", - "fill": "#8B5CF6", - "cornerRadius": 6, - "padding": [ - 3, - 10 - ], - "children": [ - { - "type": "text", - "id": "RPMH6T", - "fill": "#FFFFFF", - "content": "Kitchen", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "RPMH6S", - "fill": "$text-tertiary", - "content": "4 người", - "fontFamily": "Roboto", - "fontSize": 10 - } - ] - } - ] - } - ] - }, - { - "type": "text", - "id": "RPSec1", - "fill": "$text-primary", - "content": "Bán hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700", - "padding": [ - 16, - 20, - 8, - 20 - ] - }, - { - "type": "frame", - "id": "RPR1", - "width": "fill_container", - "padding": [ - 12, - 0 - ], - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "RPR1L", - "width": 200, - "padding": [ - 0, - 20 - ], - "children": [ - { - "type": "text", - "id": "RPR1T", - "fill": "$text-secondary", - "content": "Tạo đơn hàng", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "id": "RPR1C1", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR1C1I", - "width": 20, - "height": 20, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - }, - { - "type": "frame", - "id": "RPR1C2", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR1C2I", - "width": 20, - "height": 20, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - }, - { - "type": "frame", - "id": "RPR1C3", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR1C3I", - "width": 20, - "height": 20, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - }, - { - "type": "frame", - "id": "RPR1C4", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR1C4I", - "width": 20, - "height": 20, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - }, - { - "type": "frame", - "id": "RPR1C5", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR1C5I", - "width": 20, - "height": 20, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - }, - { - "type": "frame", - "id": "RPR1C6", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR1C6I", - "width": 20, - "height": 20, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - } - ] - }, - { - "type": "frame", - "id": "RPR2", - "width": "fill_container", - "padding": [ - 12, - 0 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "RPR2L", - "width": 200, - "padding": [ - 0, - 20 - ], - "children": [ - { - "type": "text", - "id": "RPR2T", - "fill": "$text-secondary", - "content": "Thanh toán", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "id": "RPR2C1", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR2C1I", - "width": 20, - "height": 20, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - }, - { - "type": "frame", - "id": "RPR2C2", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR2C2I", - "width": 20, - "height": 20, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - }, - { - "type": "frame", - "id": "RPR2C3", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR2C3I", - "width": 20, - "height": 20, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - }, - { - "type": "frame", - "id": "RPR2C4", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR2C4I", - "width": 20, - "height": 20, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - }, - { - "type": "frame", - "id": "RPR2C5", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR2C5I", - "width": 20, - "height": 20, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - }, - { - "type": "frame", - "id": "RPR2C6", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR2C6I", - "width": 20, - "height": 20, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - } - ] - }, - { - "type": "frame", - "id": "RPR3", - "width": "fill_container", - "padding": [ - 12, - 0 - ], - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "RPR3L", - "width": 200, - "padding": [ - 0, - 20 - ], - "children": [ - { - "type": "text", - "id": "RPR3T", - "fill": "$text-secondary", - "content": "Void / Hoàn tiền", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "id": "RPR3C1", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR3C1I", - "width": 20, - "height": 20, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - }, - { - "type": "frame", - "id": "RPR3C2", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR3C2I", - "width": 20, - "height": 20, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - }, - { - "type": "frame", - "id": "RPR3C3", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR3C3I", - "width": 20, - "height": 20, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - }, - { - "type": "frame", - "id": "RPR3C4", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR3C4I", - "width": 20, - "height": 20, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - }, - { - "type": "frame", - "id": "RPR3C5", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR3C5I", - "width": 20, - "height": 20, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - }, - { - "type": "frame", - "id": "RPR3C6", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR3C6I", - "width": 20, - "height": 20, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - } - ] - }, - { - "type": "frame", - "id": "RPR4", - "width": "fill_container", - "padding": [ - 12, - 0 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "RPR4L", - "width": 200, - "padding": [ - 0, - 20 - ], - "children": [ - { - "type": "text", - "id": "RPR4T", - "fill": "$text-secondary", - "content": "Áp dụng giảm giá", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "id": "RPR4C1", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR4C1I", - "width": 20, - "height": 20, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - }, - { - "type": "frame", - "id": "RPR4C2", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR4C2I", - "width": 20, - "height": 20, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - }, - { - "type": "frame", - "id": "RPR4C3", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR4C3I", - "width": 20, - "height": 20, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - }, - { - "type": "frame", - "id": "RPR4C4", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR4C4I", - "width": 20, - "height": 20, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - }, - { - "type": "frame", - "id": "RPR4C5", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR4C5I", - "width": 20, - "height": 20, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - }, - { - "type": "frame", - "id": "RPR4C6", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR4C6I", - "width": 20, - "height": 20, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - } - ] - }, - { - "type": "text", - "id": "RPSec2", - "fill": "$text-primary", - "content": "Quản lý", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700", - "padding": [ - 16, - 20, - 8, - 20 - ] - }, - { - "type": "frame", - "id": "RPR5", - "width": "fill_container", - "padding": [ - 12, - 0 - ], - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "RPR5L", - "width": 200, - "padding": [ - 0, - 20 - ], - "children": [ - { - "type": "text", - "id": "RPR5T", - "fill": "$text-secondary", - "content": "Xem báo cáo", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "id": "RPR5C1", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR5C1I", - "width": 20, - "height": 20, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - }, - { - "type": "frame", - "id": "RPR5C2", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR5C2I", - "width": 20, - "height": 20, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - }, - { - "type": "frame", - "id": "RPR5C3", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR5C3I", - "width": 20, - "height": 20, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - }, - { - "type": "frame", - "id": "RPR5C4", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR5C4I", - "width": 20, - "height": 20, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - }, - { - "type": "frame", - "id": "RPR5C5", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR5C5I", - "width": 20, - "height": 20, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - }, - { - "type": "frame", - "id": "RPR5C6", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR5C6I", - "width": 20, - "height": 20, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - } - ] - }, - { - "type": "frame", - "id": "RPR6", - "width": "fill_container", - "padding": [ - 12, - 0 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "RPR6L", - "width": 200, - "padding": [ - 0, - 20 - ], - "children": [ - { - "type": "text", - "id": "RPR6T", - "fill": "$text-secondary", - "content": "Quản lý sản phẩm", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "id": "RPR6C1", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR6C1I", - "width": 20, - "height": 20, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - }, - { - "type": "frame", - "id": "RPR6C2", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR6C2I", - "width": 20, - "height": 20, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - }, - { - "type": "frame", - "id": "RPR6C3", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR6C3I", - "width": 20, - "height": 20, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - }, - { - "type": "frame", - "id": "RPR6C4", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR6C4I", - "width": 20, - "height": 20, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - }, - { - "type": "frame", - "id": "RPR6C5", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR6C5I", - "width": 20, - "height": 20, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - }, - { - "type": "frame", - "id": "RPR6C6", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR6C6I", - "width": 20, - "height": 20, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - } - ] - }, - { - "type": "frame", - "id": "RPR7", - "width": "fill_container", - "padding": [ - 12, - 0 - ], - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "RPR7L", - "width": 200, - "padding": [ - 0, - 20 - ], - "children": [ - { - "type": "text", - "id": "RPR7T", - "fill": "$text-secondary", - "content": "Quản lý nhân sự", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "id": "RPR7C1", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR7C1I", - "width": 20, - "height": 20, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - }, - { - "type": "frame", - "id": "RPR7C2", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR7C2I", - "width": 20, - "height": 20, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - }, - { - "type": "frame", - "id": "RPR7C3", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR7C3I", - "width": 20, - "height": 20, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - }, - { - "type": "frame", - "id": "RPR7C4", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR7C4I", - "width": 20, - "height": 20, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - }, - { - "type": "frame", - "id": "RPR7C5", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR7C5I", - "width": 20, - "height": 20, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - }, - { - "type": "frame", - "id": "RPR7C6", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR7C6I", - "width": 20, - "height": 20, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - } - ] - }, - { - "type": "frame", - "id": "RPR8", - "width": "fill_container", - "padding": [ - 12, - 0 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "RPR8L", - "width": 200, - "padding": [ - 0, - 20 - ], - "children": [ - { - "type": "text", - "id": "RPR8T", - "fill": "$text-secondary", - "content": "Quản lý cửa hàng", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "id": "RPR8C1", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR8C1I", - "width": 20, - "height": 20, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - }, - { - "type": "frame", - "id": "RPR8C2", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR8C2I", - "width": 20, - "height": 20, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - }, - { - "type": "frame", - "id": "RPR8C3", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR8C3I", - "width": 20, - "height": 20, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - }, - { - "type": "frame", - "id": "RPR8C4", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR8C4I", - "width": 20, - "height": 20, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - }, - { - "type": "frame", - "id": "RPR8C5", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR8C5I", - "width": 20, - "height": 20, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - }, - { - "type": "frame", - "id": "RPR8C6", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR8C6I", - "width": 20, - "height": 20, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - } - ] - }, - { - "type": "text", - "id": "RPSec3", - "fill": "$text-primary", - "content": "Hệ thống", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700", - "padding": [ - 16, - 20, - 8, - 20 - ] - }, - { - "type": "frame", - "id": "RPR9", - "width": "fill_container", - "padding": [ - 12, - 0 - ], - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "RPR9L", - "width": 200, - "padding": [ - 0, - 20 - ], - "children": [ - { - "type": "text", - "id": "RPR9T", - "fill": "$text-secondary", - "content": "Cài đặt hệ thống", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "id": "RPR9C1", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR9C1I", - "width": 20, - "height": 20, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - }, - { - "type": "frame", - "id": "RPR9C2", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR9C2I", - "width": 20, - "height": 20, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - }, - { - "type": "frame", - "id": "RPR9C3", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR9C3I", - "width": 20, - "height": 20, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - }, - { - "type": "frame", - "id": "RPR9C4", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR9C4I", - "width": 20, - "height": 20, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - }, - { - "type": "frame", - "id": "RPR9C5", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR9C5I", - "width": 20, - "height": 20, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - }, - { - "type": "frame", - "id": "RPR9C6", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR9C6I", - "width": 20, - "height": 20, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - } - ] - }, - { - "type": "frame", - "id": "RPR10", - "width": "fill_container", - "padding": [ - 12, - 0 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "RPR10L", - "width": 200, - "padding": [ - 0, - 20 - ], - "children": [ - { - "type": "text", - "id": "RPR10T", - "fill": "$text-secondary", - "content": "Xem tài chính", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "id": "RPR10C1", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR10C1I", - "width": 20, - "height": 20, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - }, - { - "type": "frame", - "id": "RPR10C2", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR10C2I", - "width": 20, - "height": 20, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - }, - { - "type": "frame", - "id": "RPR10C3", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR10C3I", - "width": 20, - "height": 20, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - }, - { - "type": "frame", - "id": "RPR10C4", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR10C4I", - "width": 20, - "height": 20, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - }, - { - "type": "frame", - "id": "RPR10C5", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR10C5I", - "width": 20, - "height": 20, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - }, - { - "type": "frame", - "id": "RPR10C6", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "RPR10C6I", - "width": 20, - "height": 20, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "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/admin/staff-create.pen b/pencil-design/src/pages/tPOS/admin/staff-create.pen deleted file mode 100644 index d6640afe..00000000 --- a/pencil-design/src/pages/tPOS/admin/staff-create.pen +++ /dev/null @@ -1,1471 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "StaffCreate", - "name": "Admin/StaffCreate", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "$bg-page", - "clip": true, - "children": [ - { - "type": "frame", - "id": "SCSidebar", - "width": 260, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "right" - ] - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "SCLogo", - "width": "fill_container", - "padding": [ - 24, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SCLogoIc", - "width": 40, - "height": 40, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SCLogoTx", - "fill": "#FFFFFF", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "800" - } - ] - }, - { - "type": "frame", - "id": "SCLogoGr", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "SCLogoN", - "fill": "$text-primary", - "content": "GoodGo Admin", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "text", - "id": "SCLogoSub", - "fill": "$text-tertiary", - "content": "Management Console", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SCNav", - "width": "fill_container", - "height": "fill_container", - "padding": [ - 16, - 12 - ], - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "SCNavL1", - "fill": "$text-tertiary", - "content": "TỔNG QUAN", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 0, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "SCNavDash", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SCNavDashI", - "width": 20, - "height": 20, - "iconFontName": "layout-dashboard", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SCNavDashT", - "fill": "$text-secondary", - "content": "Dashboard", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "SCNavL2", - "fill": "$text-tertiary", - "content": "CỬA HÀNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "SCNavStores", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "SCNavStoresLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SCNavStoresI", - "width": 20, - "height": 20, - "iconFontName": "store", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SCNavStoresT", - "fill": "$text-secondary", - "content": "Quản lý cửa hàng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SCNavStoresBdg", - "width": 22, - "height": 22, - "fill": "$bg-interactive", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SCNavStoresBdgT", - "fill": "$text-tertiary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SCNavProd", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SCNavProdI", - "width": 18, - "height": 18, - "iconFontName": "package", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SCNavProdT", - "fill": "$text-tertiary", - "content": "Sản phẩm & Menu", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SCNavStaff", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SCNavStaffI", - "width": 18, - "height": 18, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "SCNavStaffT", - "fill": "#FFFFFF", - "content": "Nhân sự", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ], - "fill": "$orange-primary" - }, - { - "type": "frame", - "id": "SCNavInv", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SCNavInvI", - "width": 18, - "height": 18, - "iconFontName": "warehouse", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SCNavInvT", - "fill": "$text-tertiary", - "content": "Kho hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SCNavDev", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SCNavDevI", - "width": 18, - "height": 18, - "iconFontName": "monitor", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SCNavDevT", - "fill": "$text-tertiary", - "content": "Thiết bị", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "SCNavL3", - "fill": "$text-tertiary", - "content": "KINH DOANH", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "SCNavCust", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SCNavCustI", - "width": 20, - "height": 20, - "iconFontName": "heart", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SCNavCustT", - "fill": "$text-secondary", - "content": "Khách hàng & Loyalty", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SCNavRpt", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SCNavRptI", - "width": 20, - "height": 20, - "iconFontName": "bar-chart-2", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SCNavRptT", - "fill": "$text-secondary", - "content": "Báo cáo & Phân tích", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SCNavFin", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SCNavFinI", - "width": 20, - "height": 20, - "iconFontName": "wallet", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SCNavFinT", - "fill": "$text-secondary", - "content": "Tài chính", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "SCNavL4", - "fill": "$text-tertiary", - "content": "HỆ THỐNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "SCNavRoles", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SCNavRolesI", - "width": 20, - "height": 20, - "iconFontName": "shield", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SCNavRolesT", - "fill": "$text-secondary", - "content": "Phân quyền", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SCNavSet", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SCNavSetI", - "width": 20, - "height": 20, - "iconFontName": "settings", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SCNavSetT", - "fill": "$text-secondary", - "content": "Cài đặt", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SCUser", - "width": "fill_container", - "padding": [ - 16, - 16 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SCUserAv", - "width": 36, - "height": 36, - "fill": "#3B82F6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SCUserAvT", - "fill": "#FFFFFF", - "content": "VH", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "SCUserInf", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "SCUserNm", - "fill": "$text-primary", - "content": "Velik Ho", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "SCUserRl", - "fill": "$text-tertiary", - "content": "Owner", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SCMain", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "SCHeader", - "width": "fill_container", - "padding": [ - 16, - 32 - ], - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SCHdrL", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SCBackBtn", - "width": 40, - "height": 40, - "fill": "$bg-interactive", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SCBackI", - "width": 20, - "height": 20, - "iconFontName": "arrow-left", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - }, - { - "type": "frame", - "id": "SCHdrTG", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "frame", - "id": "SCBc", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SCBc1", - "fill": "$text-tertiary", - "content": "Nhân sự", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "SCBcS", - "fill": "$text-tertiary", - "content": "/", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "SCBc2", - "fill": "$orange-primary", - "content": "Thêm mới", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "SCTitle", - "fill": "$text-primary", - "content": "Thêm nhân viên", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "700" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SCHdrR", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "SCCancel", - "height": 40, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 20 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SCCancelT", - "fill": "$text-secondary", - "content": "Hủy bỏ", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SCSave", - "fill": "$orange-primary", - "cornerRadius": 10, - "padding": [ - 10, - 20 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SCSaveI", - "width": 18, - "height": 18, - "iconFontName": "user-plus", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "SCSaveT", - "fill": "#FFFFFF", - "content": "Lưu & Gửi mời", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SCContent", - "width": "fill_container", - "height": "fill_container", - "padding": [ - 32, - 48 - ], - "gap": 24, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "SCInfoCard", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 28, - "layout": "vertical", - "gap": 20, - "children": [ - { - "type": "text", - "id": "SCInfoT", - "fill": "$text-primary", - "content": "Thông tin cá nhân", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "SCRow1", - "width": "fill_container", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "SCF1", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "SCF1L", - "fill": "$text-secondary", - "content": "Họ và tên *", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "SCF1I", - "width": "fill_container", - "height": 44, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SCF1P", - "fill": "$text-tertiary", - "content": "Nhập họ và tên", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SCF2", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "SCF2L", - "fill": "$text-secondary", - "content": "Số điện thoại *", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "SCF2I", - "width": "fill_container", - "height": 44, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SCF2P", - "fill": "$text-tertiary", - "content": "0901 234 567", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SCRow2", - "width": "fill_container", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "SCF3", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "SCF3L", - "fill": "$text-secondary", - "content": "Email", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "SCF3I", - "width": "fill_container", - "height": 44, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SCF3P", - "fill": "$text-tertiary", - "content": "email@example.com", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SCF4", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "SCF4L", - "fill": "$text-secondary", - "content": "CMND/CCCD", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "SCF4I", - "width": "fill_container", - "height": 44, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SCF4P", - "fill": "$text-tertiary", - "content": "Nhập số CMND/CCCD", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SCRoleCard", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 28, - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "text", - "id": "SCRoleT", - "fill": "$text-primary", - "content": "Chọn vai trò *", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "SCRoles", - "width": "fill_container", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "SCR1", - "width": "fill_container", - "height": 72, - "fill": "#FF5C0015", - "stroke": { - "thickness": 2, - "fill": "$orange-primary" - }, - "cornerRadius": 12, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "gap": 4, - "children": [ - { - "type": "icon_font", - "id": "SCR1I", - "width": 22, - "height": 22, - "iconFontName": "monitor", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "SCR1T", - "fill": "$orange-primary", - "content": "Cashier", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "SCR2", - "width": "fill_container", - "height": 72, - "fill": "$bg-interactive", - "cornerRadius": 12, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "gap": 4, - "children": [ - { - "type": "icon_font", - "id": "SCR2I", - "width": 22, - "height": 22, - "iconFontName": "utensils", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SCR2T", - "fill": "$text-secondary", - "content": "Waiter", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SCR3", - "width": "fill_container", - "height": 72, - "fill": "$bg-interactive", - "cornerRadius": 12, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "gap": 4, - "children": [ - { - "type": "icon_font", - "id": "SCR3I", - "width": 22, - "height": 22, - "iconFontName": "chef-hat", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SCR3T", - "fill": "$text-secondary", - "content": "Kitchen", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SCR4", - "width": "fill_container", - "height": 72, - "fill": "$bg-interactive", - "cornerRadius": 12, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "gap": 4, - "children": [ - { - "type": "icon_font", - "id": "SCR4I", - "width": 22, - "height": 22, - "iconFontName": "coffee", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SCR4T", - "fill": "$text-secondary", - "content": "Barista", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SCR5", - "width": "fill_container", - "height": 72, - "fill": "$bg-interactive", - "cornerRadius": 12, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "gap": 4, - "children": [ - { - "type": "icon_font", - "id": "SCR5I", - "width": 22, - "height": 22, - "iconFontName": "shield", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SCR5T", - "fill": "$text-secondary", - "content": "Manager", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SCStoreCard", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 28, - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "text", - "id": "SCStoreT", - "fill": "$text-primary", - "content": "Gán cửa hàng *", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "SCStores", - "width": "fill_container", - "layout": "vertical", - "gap": 10, - "children": [ - { - "type": "frame", - "id": "SCS1", - "width": "fill_container", - "height": 44, - "fill": "#FF5C0015", - "stroke": { - "thickness": 1, - "fill": "$orange-primary" - }, - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SCS1Chk", - "width": 20, - "height": 20, - "fill": "$orange-primary", - "cornerRadius": 4, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SCS1ChI", - "width": 14, - "height": 14, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - } - ] - }, - { - "type": "text", - "id": "SCS1T", - "fill": "$text-primary", - "content": "Coffee House Q1", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SCS2", - "width": "fill_container", - "height": 44, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SCS2Chk", - "width": 20, - "height": 20, - "stroke": { - "thickness": 2, - "fill": "$border-default" - }, - "cornerRadius": 4 - }, - { - "type": "text", - "id": "SCS2T", - "fill": "$text-secondary", - "content": "Nhà hàng Q3", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "id": "SCS3", - "width": "fill_container", - "height": 44, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SCS3Chk", - "width": 20, - "height": 20, - "stroke": { - "thickness": 2, - "fill": "$border-default" - }, - "cornerRadius": 4 - }, - { - "type": "text", - "id": "SCS3T", - "fill": "$text-secondary", - "content": "Karaoke Star Q7", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SCInvite", - "width": "fill_container", - "padding": [ - 12, - 0, - 0, - 0 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SCInvT", - "fill": "$text-secondary", - "content": "Gửi email mời nhân viên", - "fontFamily": "Roboto", - "fontSize": 14 - }, - { - "type": "frame", - "id": "SCToggle", - "width": 44, - "height": 24, - "fill": "$orange-primary", - "cornerRadius": 100, - "padding": [ - 2, - 2 - ], - "justifyContent": "flex_end", - "children": [ - { - "type": "frame", - "id": "SCTogDot", - "width": 20, - "height": 20, - "fill": "#FFFFFF", - "cornerRadius": 100 - } - ] - } - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "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/admin/staff-directory.pen b/pencil-design/src/pages/tPOS/admin/staff-directory.pen deleted file mode 100644 index 047ad5b5..00000000 --- a/pencil-design/src/pages/tPOS/admin/staff-directory.pen +++ /dev/null @@ -1,2292 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "StaffDirectory", - "name": "Admin/StaffDirectory", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "$bg-page", - "clip": true, - "children": [ - { - "type": "frame", - "id": "SDSidebar", - "width": 260, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "right" - ] - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "SDSidebarLogo", - "width": "fill_container", - "padding": [ - 24, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SDLogoIcon", - "width": 40, - "height": 40, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SDLogoT", - "fill": "#FFFFFF", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "800" - } - ] - }, - { - "type": "frame", - "id": "SDLogoTG", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "SDLogoN", - "fill": "$text-primary", - "content": "GoodGo Admin", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "text", - "id": "SDLogoS", - "fill": "$text-tertiary", - "content": "Management Console", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SDSidebarNav", - "width": "fill_container", - "height": "fill_container", - "padding": [ - 16, - 12 - ], - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "SDNavL1", - "fill": "$text-tertiary", - "content": "TỔNG QUAN", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 0, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "SDNavDash", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SDNavDashI", - "width": 20, - "height": 20, - "iconFontName": "layout-dashboard", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SDNavDashT", - "fill": "$text-secondary", - "content": "Dashboard", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "SDNavL2", - "fill": "$text-tertiary", - "content": "CỬA HÀNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "SDNavStores", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "SDNavStoresLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SDNavStoresI", - "width": 20, - "height": 20, - "iconFontName": "store", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SDNavStoresT", - "fill": "$text-secondary", - "content": "Quản lý cửa hàng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SDNavStoresBdg", - "width": 22, - "height": 22, - "fill": "$bg-interactive", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SDNavStoresBdgT", - "fill": "$text-tertiary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SDNavProd", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SDNavProdI", - "width": 18, - "height": 18, - "iconFontName": "package", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SDNavProdT", - "fill": "$text-tertiary", - "content": "Sản phẩm & Menu", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SDNavStaff", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SDNavStaffI", - "width": 18, - "height": 18, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "SDNavStaffT", - "fill": "#FFFFFF", - "content": "Nhân sự", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ], - "fill": "$orange-primary" - }, - { - "type": "frame", - "id": "SDNavInv", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SDNavInvI", - "width": 18, - "height": 18, - "iconFontName": "warehouse", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SDNavInvT", - "fill": "$text-tertiary", - "content": "Kho hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SDNavDev", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SDNavDevI", - "width": 18, - "height": 18, - "iconFontName": "monitor", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SDNavDevT", - "fill": "$text-tertiary", - "content": "Thiết bị", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "SDNavL3", - "fill": "$text-tertiary", - "content": "KINH DOANH", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "SDNavCust", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SDNavCustI", - "width": 20, - "height": 20, - "iconFontName": "heart", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SDNavCustT", - "fill": "$text-secondary", - "content": "Khách hàng & Loyalty", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SDNavRpt", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SDNavRptI", - "width": 20, - "height": 20, - "iconFontName": "bar-chart-2", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SDNavRptT", - "fill": "$text-secondary", - "content": "Báo cáo & Phân tích", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SDNavFin", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SDNavFinI", - "width": 20, - "height": 20, - "iconFontName": "wallet", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SDNavFinT", - "fill": "$text-secondary", - "content": "Tài chính", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "SDNavL4", - "fill": "$text-tertiary", - "content": "HỆ THỐNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "SDNavRoles", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SDNavRolesI", - "width": 20, - "height": 20, - "iconFontName": "shield", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SDNavRolesT", - "fill": "$text-secondary", - "content": "Phân quyền", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SDNavSet", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SDNavSetI", - "width": 20, - "height": 20, - "iconFontName": "settings", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SDNavSetT", - "fill": "$text-secondary", - "content": "Cài đặt", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SDSidebarUser", - "width": "fill_container", - "padding": [ - 16, - 16 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SDUserAv", - "width": 36, - "height": 36, - "fill": "#3B82F6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SDUserAvT", - "fill": "#FFFFFF", - "content": "VH", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "SDUserInfo", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "SDUserN", - "fill": "$text-primary", - "content": "Velik Ho", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "SDUserR", - "fill": "$text-tertiary", - "content": "Owner", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SDMain", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "SDHeader", - "width": "fill_container", - "padding": [ - 16, - 32 - ], - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SDHeaderLeft", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "frame", - "id": "SDBreadcrumb", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SDBread1", - "fill": "$text-tertiary", - "content": "Tất cả cửa hàng", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "SDBreadSep", - "fill": "$text-tertiary", - "content": "/", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "SDBread2", - "fill": "$orange-primary", - "content": "Nhân sự", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "SDHeaderTitle", - "fill": "$text-primary", - "content": "Quản lý nhân sự", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "SDHeaderRight", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SDStoreSel", - "height": 40, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SDStoreSelI", - "width": 16, - "height": 16, - "iconFontName": "store", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "SDStoreSelT", - "fill": "$text-primary", - "content": "Tất cả cửa hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "icon_font", - "id": "SDStoreSelChev", - "width": 14, - "height": 14, - "iconFontName": "chevron-down", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - }, - { - "type": "frame", - "id": "SDSearch", - "width": 220, - "height": 40, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SDSearchI", - "width": 18, - "height": 18, - "iconFontName": "search", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SDSearchP", - "fill": "$text-tertiary", - "content": "Tìm nhân viên...", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "id": "SDAddBtn", - "fill": "$orange-primary", - "cornerRadius": 10, - "padding": [ - 10, - 16 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SDAddI", - "width": 18, - "height": 18, - "iconFontName": "user-plus", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "SDAddT", - "fill": "#FFFFFF", - "content": "Thêm nhân viên", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SDStats", - "width": "fill_container", - "padding": [ - 16, - 32 - ], - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "gap": 32, - "children": [ - { - "type": "frame", - "id": "SDStat1", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SDStat1I", - "width": 36, - "height": 36, - "fill": "#3B82F620", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SDStat1Icon", - "width": 18, - "height": 18, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "#3B82F6" - } - ] - }, - { - "type": "frame", - "id": "SDStat1T", - "layout": "vertical", - "gap": 1, - "children": [ - { - "type": "text", - "id": "SDStat1V", - "fill": "$text-primary", - "content": "19", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "text", - "id": "SDStat1L", - "fill": "$text-tertiary", - "content": "Tổng nhân viên", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SDStat2", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SDStat2I", - "width": 36, - "height": 36, - "fill": "#22C55E20", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SDStat2Icon", - "width": 18, - "height": 18, - "iconFontName": "circle-check", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - }, - { - "type": "frame", - "id": "SDStat2T", - "layout": "vertical", - "gap": 1, - "children": [ - { - "type": "text", - "id": "SDStat2V", - "fill": "#22C55E", - "content": "12", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "text", - "id": "SDStat2L", - "fill": "$text-tertiary", - "content": "Đang online", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SDStat3", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SDStat3I", - "width": 36, - "height": 36, - "fill": "#F59E0B20", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SDStat3Icon", - "width": 18, - "height": 18, - "iconFontName": "clock", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - } - ] - }, - { - "type": "frame", - "id": "SDStat3T", - "layout": "vertical", - "gap": 1, - "children": [ - { - "type": "text", - "id": "SDStat3V", - "fill": "#F59E0B", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "text", - "id": "SDStat3L", - "fill": "$text-tertiary", - "content": "Chờ kích hoạt", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SDStat4", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SDStat4I", - "width": 36, - "height": 36, - "fill": "#EF444420", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SDStat4Icon", - "width": 18, - "height": 18, - "iconFontName": "user-x", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - }, - { - "type": "frame", - "id": "SDStat4T", - "layout": "vertical", - "gap": 1, - "children": [ - { - "type": "text", - "id": "SDStat4V", - "fill": "#EF4444", - "content": "4", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "text", - "id": "SDStat4L", - "fill": "$text-tertiary", - "content": "Nghỉ phép", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SDContent", - "width": "fill_container", - "height": "fill_container", - "padding": [ - 0, - 28, - 28, - 28 - ], - "layout": "vertical", - "gap": 0, - "clip": true, - "children": [ - { - "type": "frame", - "id": "SDTableHead", - "width": "fill_container", - "padding": [ - 14, - 20 - ], - "gap": 0, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SDTH0", - "width": 40, - "children": [ - { - "type": "frame", - "id": "SDCheckAll", - "width": 20, - "height": 20, - "stroke": { - "thickness": 2, - "fill": "$border-default" - }, - "cornerRadius": 4 - } - ] - }, - { - "type": "frame", - "id": "SDTH1", - "width": 240, - "children": [ - { - "type": "text", - "id": "SDTH1T", - "fill": "$text-tertiary", - "content": "Nhân viên", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "SDTH2", - "width": 120, - "children": [ - { - "type": "text", - "id": "SDTH2T", - "fill": "$text-tertiary", - "content": "Vai trò", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "SDTH3", - "width": 180, - "children": [ - { - "type": "text", - "id": "SDTH3T", - "fill": "$text-tertiary", - "content": "Cửa hàng", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "SDTH4", - "width": 100, - "children": [ - { - "type": "text", - "id": "SDTH4T", - "fill": "$text-tertiary", - "content": "Trạng thái", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "SDTH5", - "width": "fill_container", - "children": [ - { - "type": "text", - "id": "SDTH5T", - "fill": "$text-tertiary", - "content": "Ca hôm nay", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "SDTH6", - "width": 80, - "children": [] - } - ] - }, - { - "type": "frame", - "id": "SDRow1", - "width": "fill_container", - "padding": [ - 14, - 20 - ], - "fill": "$bg-elevated", - "cornerRadius": 12, - "gap": 0, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SDR1C0", - "width": 40, - "children": [ - { - "type": "frame", - "id": "SDR1Check", - "width": 20, - "height": 20, - "stroke": { - "thickness": 2, - "fill": "$border-default" - }, - "cornerRadius": 4 - } - ] - }, - { - "type": "frame", - "id": "SDR1C1", - "width": 240, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SDR1Av", - "width": 40, - "height": 40, - "fill": "#22C55E", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SDR1AvT", - "fill": "#FFFFFF", - "content": "NA", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "SDR1Info", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "SDR1Name", - "fill": "$text-primary", - "content": "Nguyễn Văn A", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "text", - "id": "SDR1Phone", - "fill": "$text-tertiary", - "content": "0901 234 567", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SDR1C2", - "width": 120, - "children": [ - { - "type": "frame", - "id": "SDR1Role", - "fill": "#3B82F620", - "cornerRadius": 6, - "padding": [ - 3, - 10 - ], - "children": [ - { - "type": "text", - "id": "SDR1RoleT", - "fill": "#3B82F6", - "content": "Manager", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SDR1C3", - "width": 180, - "children": [ - { - "type": "text", - "id": "SDR1Store", - "fill": "$text-secondary", - "content": "Coffee House Q1", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "id": "SDR1C4", - "width": 100, - "children": [ - { - "type": "frame", - "id": "SDR1Status", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SDR1Dot", - "width": 8, - "height": 8, - "fill": "#22C55E", - "cornerRadius": 100 - }, - { - "type": "text", - "id": "SDR1StatusT", - "fill": "#22C55E", - "content": "Online", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SDR1C5", - "width": "fill_container", - "children": [ - { - "type": "text", - "id": "SDR1Shift", - "fill": "$text-secondary", - "content": "06:00 - 14:00", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "id": "SDR1C6", - "width": 80, - "justifyContent": "flex_end", - "children": [ - { - "type": "frame", - "id": "SDR1More", - "width": 32, - "height": 32, - "fill": "$bg-interactive", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SDR1MoreI", - "width": 16, - "height": 16, - "iconFontName": "more-horizontal", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SDRow2", - "width": "fill_container", - "padding": [ - 14, - 20 - ], - "gap": 0, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SDR2C0", - "width": 40, - "children": [ - { - "type": "frame", - "id": "SDR2Check", - "width": 20, - "height": 20, - "stroke": { - "thickness": 2, - "fill": "$border-default" - }, - "cornerRadius": 4 - } - ] - }, - { - "type": "frame", - "id": "SDR2C1", - "width": 240, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SDR2Av", - "width": 40, - "height": 40, - "fill": "#8B5CF6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SDR2AvT", - "fill": "#FFFFFF", - "content": "TB", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "SDR2Info", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "SDR2Name", - "fill": "$text-primary", - "content": "Trần Thị B", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "text", - "id": "SDR2Phone", - "fill": "$text-tertiary", - "content": "0912 345 678", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SDR2C2", - "width": 120, - "children": [ - { - "type": "frame", - "id": "SDR2Role", - "fill": "#22C55E20", - "cornerRadius": 6, - "padding": [ - 3, - 10 - ], - "children": [ - { - "type": "text", - "id": "SDR2RoleT", - "fill": "#22C55E", - "content": "Cashier", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SDR2C3", - "width": 180, - "children": [ - { - "type": "text", - "id": "SDR2Store", - "fill": "$text-secondary", - "content": "Coffee House Q1", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "id": "SDR2C4", - "width": 100, - "children": [ - { - "type": "frame", - "id": "SDR2Status", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SDR2Dot", - "width": 8, - "height": 8, - "fill": "#22C55E", - "cornerRadius": 100 - }, - { - "type": "text", - "id": "SDR2StatusT", - "fill": "#22C55E", - "content": "Online", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SDR2C5", - "width": "fill_container", - "children": [ - { - "type": "text", - "id": "SDR2Shift", - "fill": "$text-secondary", - "content": "06:00 - 14:00", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "id": "SDR2C6", - "width": 80, - "justifyContent": "flex_end", - "children": [ - { - "type": "frame", - "id": "SDR2More", - "width": 32, - "height": 32, - "fill": "$bg-interactive", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SDR2MoreI", - "width": 16, - "height": 16, - "iconFontName": "more-horizontal", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SDRow3", - "width": "fill_container", - "padding": [ - 14, - 20 - ], - "fill": "$bg-elevated", - "cornerRadius": 12, - "gap": 0, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SDR3C0", - "width": 40, - "children": [ - { - "type": "frame", - "id": "SDR3Check", - "width": 20, - "height": 20, - "stroke": { - "thickness": 2, - "fill": "$border-default" - }, - "cornerRadius": 4 - } - ] - }, - { - "type": "frame", - "id": "SDR3C1", - "width": 240, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SDR3Av", - "width": 40, - "height": 40, - "fill": "#EC4899", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SDR3AvT", - "fill": "#FFFFFF", - "content": "LC", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "SDR3Info", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "SDR3Name", - "fill": "$text-primary", - "content": "Lê Văn C", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "text", - "id": "SDR3Phone", - "fill": "$text-tertiary", - "content": "0923 456 789", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SDR3C2", - "width": 120, - "children": [ - { - "type": "frame", - "id": "SDR3Role", - "fill": "#F59E0B20", - "cornerRadius": 6, - "padding": [ - 3, - 10 - ], - "children": [ - { - "type": "text", - "id": "SDR3RoleT", - "fill": "#F59E0B", - "content": "Barista", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SDR3C3", - "width": 180, - "children": [ - { - "type": "text", - "id": "SDR3Store", - "fill": "$text-secondary", - "content": "Coffee House Q1", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "id": "SDR3C4", - "width": 100, - "children": [ - { - "type": "frame", - "id": "SDR3Status", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SDR3Dot", - "width": 8, - "height": 8, - "fill": "#22C55E", - "cornerRadius": 100 - }, - { - "type": "text", - "id": "SDR3StatusT", - "fill": "#22C55E", - "content": "Online", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SDR3C5", - "width": "fill_container", - "children": [ - { - "type": "text", - "id": "SDR3Shift", - "fill": "$text-secondary", - "content": "14:00 - 22:00", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "id": "SDR3C6", - "width": 80, - "justifyContent": "flex_end", - "children": [ - { - "type": "frame", - "id": "SDR3More", - "width": 32, - "height": 32, - "fill": "$bg-interactive", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SDR3MoreI", - "width": 16, - "height": 16, - "iconFontName": "more-horizontal", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SDRow4", - "width": "fill_container", - "padding": [ - 14, - 20 - ], - "gap": 0, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SDR4C0", - "width": 40, - "children": [ - { - "type": "frame", - "id": "SDR4Check", - "width": 20, - "height": 20, - "stroke": { - "thickness": 2, - "fill": "$border-default" - }, - "cornerRadius": 4 - } - ] - }, - { - "type": "frame", - "id": "SDR4C1", - "width": 240, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SDR4Av", - "width": 40, - "height": 40, - "fill": "#3B82F6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SDR4AvT", - "fill": "#FFFFFF", - "content": "PD", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "SDR4Info", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "SDR4Name", - "fill": "$text-primary", - "content": "Phạm Thị D", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "text", - "id": "SDR4Phone", - "fill": "$text-tertiary", - "content": "0934 567 890", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SDR4C2", - "width": 120, - "children": [ - { - "type": "frame", - "id": "SDR4Role", - "fill": "#EC489920", - "cornerRadius": 6, - "padding": [ - 3, - 10 - ], - "children": [ - { - "type": "text", - "id": "SDR4RoleT", - "fill": "#EC4899", - "content": "Waiter", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SDR4C3", - "width": 180, - "children": [ - { - "type": "text", - "id": "SDR4Store", - "fill": "$text-secondary", - "content": "Nhà hàng Phố Q3", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "id": "SDR4C4", - "width": 100, - "children": [ - { - "type": "frame", - "id": "SDR4Status", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SDR4Dot", - "width": 8, - "height": 8, - "fill": "#F59E0B", - "cornerRadius": 100 - }, - { - "type": "text", - "id": "SDR4StatusT", - "fill": "#F59E0B", - "content": "Chờ KH", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SDR4C5", - "width": "fill_container", - "children": [ - { - "type": "text", - "id": "SDR4Shift", - "fill": "$text-secondary", - "content": "14:00 - 22:00", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "id": "SDR4C6", - "width": 80, - "justifyContent": "flex_end", - "children": [ - { - "type": "frame", - "id": "SDR4More", - "width": 32, - "height": 32, - "fill": "$bg-interactive", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SDR4MoreI", - "width": 16, - "height": 16, - "iconFontName": "more-horizontal", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SDRow5", - "width": "fill_container", - "padding": [ - 14, - 20 - ], - "fill": "$bg-elevated", - "cornerRadius": 12, - "gap": 0, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SDR5C0", - "width": 40, - "children": [ - { - "type": "frame", - "id": "SDR5Check", - "width": 20, - "height": 20, - "stroke": { - "thickness": 2, - "fill": "$border-default" - }, - "cornerRadius": 4 - } - ] - }, - { - "type": "frame", - "id": "SDR5C1", - "width": 240, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SDR5Av", - "width": 40, - "height": 40, - "fill": "#6366F1", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SDR5AvT", - "fill": "#FFFFFF", - "content": "HE", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "SDR5Info", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "SDR5Name", - "fill": "$text-primary", - "content": "Hoàng Văn E", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "text", - "id": "SDR5Phone", - "fill": "$text-tertiary", - "content": "0945 678 901", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SDR5C2", - "width": 120, - "children": [ - { - "type": "frame", - "id": "SDR5Role", - "fill": "#8B5CF620", - "cornerRadius": 6, - "padding": [ - 3, - 10 - ], - "children": [ - { - "type": "text", - "id": "SDR5RoleT", - "fill": "#8B5CF6", - "content": "Kitchen", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SDR5C3", - "width": 180, - "children": [ - { - "type": "text", - "id": "SDR5Store", - "fill": "$text-secondary", - "content": "Nhà hàng Phố Q3", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "id": "SDR5C4", - "width": 100, - "children": [ - { - "type": "frame", - "id": "SDR5Status", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SDR5Dot", - "width": 8, - "height": 8, - "fill": "$text-tertiary", - "cornerRadius": 100 - }, - { - "type": "text", - "id": "SDR5StatusT", - "fill": "$text-tertiary", - "content": "Offline", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SDR5C5", - "width": "fill_container", - "children": [ - { - "type": "text", - "id": "SDR5Shift", - "fill": "$text-tertiary", - "content": "Nghỉ phép", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "id": "SDR5C6", - "width": 80, - "justifyContent": "flex_end", - "children": [ - { - "type": "frame", - "id": "SDR5More", - "width": 32, - "height": 32, - "fill": "$bg-interactive", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SDR5MoreI", - "width": 16, - "height": 16, - "iconFontName": "more-horizontal", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "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/admin/staff-schedule.pen b/pencil-design/src/pages/tPOS/admin/staff-schedule.pen deleted file mode 100644 index ef39b561..00000000 --- a/pencil-design/src/pages/tPOS/admin/staff-schedule.pen +++ /dev/null @@ -1,2243 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "StaffSchedule", - "name": "Admin/StaffSchedule", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "$bg-page", - "clip": true, - "children": [ - { - "type": "frame", - "id": "SSSidebar", - "width": 260, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "right" - ] - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "SSLogo", - "width": "fill_container", - "padding": [ - 24, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SSLogoIc", - "width": 40, - "height": 40, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SSLogoT", - "fill": "#FFFFFF", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "800" - } - ] - }, - { - "type": "frame", - "id": "SSLogoGr", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "SSLogoN", - "fill": "$text-primary", - "content": "GoodGo Admin", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "text", - "id": "SSLogoSub", - "fill": "$text-tertiary", - "content": "Management Console", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SSNav", - "width": "fill_container", - "height": "fill_container", - "padding": [ - 16, - 12 - ], - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "SSNavL1", - "fill": "$text-tertiary", - "content": "TỔNG QUAN", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 0, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "SSNavDash", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SSNavDashI", - "width": 20, - "height": 20, - "iconFontName": "layout-dashboard", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SSNavDashT", - "fill": "$text-secondary", - "content": "Dashboard", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "SSNavL2", - "fill": "$text-tertiary", - "content": "CỬA HÀNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "SSNavStores", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "SSNavStoresLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SSNavStoresI", - "width": 20, - "height": 20, - "iconFontName": "store", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SSNavStoresT", - "fill": "$text-secondary", - "content": "Quản lý cửa hàng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SSNavStoresBdg", - "width": 22, - "height": 22, - "fill": "$bg-interactive", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SSNavStoresBdgT", - "fill": "$text-tertiary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SSNavProd", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SSNavProdI", - "width": 18, - "height": 18, - "iconFontName": "package", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SSNavProdT", - "fill": "$text-tertiary", - "content": "Sản phẩm & Menu", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SSNavStaff", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SSNavStaffI", - "width": 18, - "height": 18, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "SSNavStaffT", - "fill": "#FFFFFF", - "content": "Nhân sự", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ], - "fill": "$orange-primary" - }, - { - "type": "frame", - "id": "SSNavInv", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SSNavInvI", - "width": 18, - "height": 18, - "iconFontName": "warehouse", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SSNavInvT", - "fill": "$text-tertiary", - "content": "Kho hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SSNavDev", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SSNavDevI", - "width": 18, - "height": 18, - "iconFontName": "monitor", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SSNavDevT", - "fill": "$text-tertiary", - "content": "Thiết bị", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "SSNavL3", - "fill": "$text-tertiary", - "content": "KINH DOANH", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "SSNavCust", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SSNavCustI", - "width": 20, - "height": 20, - "iconFontName": "heart", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SSNavCustT", - "fill": "$text-secondary", - "content": "Khách hàng & Loyalty", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SSNavRpt", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SSNavRptI", - "width": 20, - "height": 20, - "iconFontName": "bar-chart-2", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SSNavRptT", - "fill": "$text-secondary", - "content": "Báo cáo & Phân tích", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SSNavFin", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SSNavFinI", - "width": 20, - "height": 20, - "iconFontName": "wallet", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SSNavFinT", - "fill": "$text-secondary", - "content": "Tài chính", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "SSNavL4", - "fill": "$text-tertiary", - "content": "HỆ THỐNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "SSNavRoles", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SSNavRolesI", - "width": 20, - "height": 20, - "iconFontName": "shield", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SSNavRolesT", - "fill": "$text-secondary", - "content": "Phân quyền", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SSNavSet", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SSNavSetI", - "width": 20, - "height": 20, - "iconFontName": "settings", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SSNavSetT", - "fill": "$text-secondary", - "content": "Cài đặt", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SSUsr", - "width": "fill_container", - "padding": [ - 16, - 16 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SSUsrAv", - "width": 36, - "height": 36, - "fill": "#3B82F6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SSUsrAvT", - "fill": "#FFFFFF", - "content": "VH", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "SSUsrInf", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "SSUsrN", - "fill": "$text-primary", - "content": "Velik Ho", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "SSUsrR", - "fill": "$text-tertiary", - "content": "Owner", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SSMain", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "SSHeader", - "width": "fill_container", - "padding": [ - 16, - 32 - ], - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SSTitle", - "fill": "$text-primary", - "content": "Lịch làm việc", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "SSWeekSel", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SSWkPrev", - "width": 36, - "height": 36, - "fill": "$bg-interactive", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SSWkPrevI", - "width": 18, - "height": 18, - "iconFontName": "chevron-left", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - }, - { - "type": "text", - "id": "SSWkTxt", - "fill": "$text-primary", - "content": "Tuần 10/02 - 16/02", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "SSWkNext", - "width": 36, - "height": 36, - "fill": "$bg-interactive", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SSWkNextI", - "width": 18, - "height": 18, - "iconFontName": "chevron-right", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SSAddShift", - "fill": "$orange-primary", - "cornerRadius": 10, - "padding": [ - 10, - 16 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SSAddI", - "width": 18, - "height": 18, - "iconFontName": "plus", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "SSAddT", - "fill": "#FFFFFF", - "content": "Phân ca", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SSCalendar", - "width": "fill_container", - "height": "fill_container", - "padding": [ - 24, - 24 - ], - "layout": "vertical", - "gap": 0, - "children": [ - { - "type": "frame", - "id": "SSCalHead", - "width": "fill_container", - "children": [ - { - "type": "frame", - "id": "SSCalN", - "width": 140, - "height": 44, - "padding": [ - 0, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SSCalNT", - "fill": "$text-tertiary", - "content": "Nhân viên", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "SSD1", - "width": "fill_container", - "height": 44, - "justifyContent": "center", - "alignItems": "center", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "left" - ] - }, - "children": [ - { - "type": "text", - "id": "SSD1T", - "fill": "$text-secondary", - "content": "T2 10/02", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SSD2", - "width": "fill_container", - "height": 44, - "justifyContent": "center", - "alignItems": "center", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "left" - ] - }, - "children": [ - { - "type": "text", - "id": "SSD2T", - "fill": "$text-secondary", - "content": "T3 11/02", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SSD3", - "width": "fill_container", - "height": 44, - "justifyContent": "center", - "alignItems": "center", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "left" - ] - }, - "children": [ - { - "type": "text", - "id": "SSD3T", - "fill": "$orange-primary", - "content": "T4 12/02", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "SSD4", - "width": "fill_container", - "height": 44, - "justifyContent": "center", - "alignItems": "center", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "left" - ] - }, - "children": [ - { - "type": "text", - "id": "SSD4T", - "fill": "$text-secondary", - "content": "T5 13/02", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SSD5", - "width": "fill_container", - "height": 44, - "justifyContent": "center", - "alignItems": "center", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "left" - ] - }, - "children": [ - { - "type": "text", - "id": "SSD5T", - "fill": "$text-secondary", - "content": "T6 14/02", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SSD6", - "width": "fill_container", - "height": 44, - "justifyContent": "center", - "alignItems": "center", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "left" - ] - }, - "children": [ - { - "type": "text", - "id": "SSD6T", - "fill": "$text-secondary", - "content": "T7 15/02", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SSD7", - "width": "fill_container", - "height": 44, - "justifyContent": "center", - "alignItems": "center", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "left" - ] - }, - "children": [ - { - "type": "text", - "id": "SSD7T", - "fill": "$text-tertiary", - "content": "CN 16/02", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SSRow1", - "width": "fill_container", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "children": [ - { - "type": "frame", - "id": "SSR1N", - "width": 140, - "height": 64, - "padding": [ - 0, - 12 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SSR1Av", - "width": 32, - "height": 32, - "fill": "#8B5CF6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SSR1AvT", - "fill": "#FFFFFF", - "content": "TN", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "SSR1Nm", - "fill": "$text-primary", - "content": "Trần Nhật", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SSR1D1", - "width": "fill_container", - "height": 64, - "padding": 6, - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "left" - ] - }, - "alignItems": "center", - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "SSR1D1S", - "width": "fill_container", - "height": "fill_container", - "fill": "#3B82F620", - "cornerRadius": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SSR1D1T", - "fill": "#3B82F6", - "content": "Sáng", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SSR1D2", - "width": "fill_container", - "height": 64, - "padding": 6, - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "left" - ] - }, - "alignItems": "center", - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "SSR1D2S", - "width": "fill_container", - "height": "fill_container", - "fill": "#3B82F620", - "cornerRadius": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SSR1D2T", - "fill": "#3B82F6", - "content": "Sáng", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SSR1D3", - "width": "fill_container", - "height": 64, - "padding": 6, - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "left" - ] - }, - "alignItems": "center", - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "SSR1D3S", - "width": "fill_container", - "height": "fill_container", - "fill": "#22C55E20", - "cornerRadius": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SSR1D3T", - "fill": "#22C55E", - "content": "Chiều", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SSR1D4", - "width": "fill_container", - "height": 64, - "padding": 6, - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "left" - ] - } - }, - { - "type": "frame", - "id": "SSR1D5", - "width": "fill_container", - "height": 64, - "padding": 6, - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "left" - ] - }, - "alignItems": "center", - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "SSR1D5S", - "width": "fill_container", - "height": "fill_container", - "fill": "#3B82F620", - "cornerRadius": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SSR1D5T", - "fill": "#3B82F6", - "content": "Sáng", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SSR1D6", - "width": "fill_container", - "height": 64, - "padding": 6, - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "left" - ] - } - }, - { - "type": "frame", - "id": "SSR1D7", - "width": "fill_container", - "height": 64, - "padding": 6, - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "left" - ] - } - } - ] - }, - { - "type": "frame", - "id": "SSRow2", - "width": "fill_container", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "children": [ - { - "type": "frame", - "id": "SSR2N", - "width": 140, - "height": 64, - "padding": [ - 0, - 12 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SSR2Av", - "width": 32, - "height": 32, - "fill": "#F59E0B", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SSR2AvT", - "fill": "#FFFFFF", - "content": "LM", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "SSR2Nm", - "fill": "$text-primary", - "content": "Lê Minh", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SSR2D1", - "width": "fill_container", - "height": 64, - "padding": 6, - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "left" - ] - }, - "alignItems": "center", - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "SSR2D1S", - "width": "fill_container", - "height": "fill_container", - "fill": "#22C55E20", - "cornerRadius": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SSR2D1T", - "fill": "#22C55E", - "content": "Chiều", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SSR2D2", - "width": "fill_container", - "height": 64, - "padding": 6, - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "left" - ] - }, - "alignItems": "center", - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "SSR2D2S", - "width": "fill_container", - "height": "fill_container", - "fill": "#22C55E20", - "cornerRadius": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SSR2D2T", - "fill": "#22C55E", - "content": "Chiều", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SSR2D3", - "width": "fill_container", - "height": 64, - "padding": 6, - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "left" - ] - } - }, - { - "type": "frame", - "id": "SSR2D4", - "width": "fill_container", - "height": 64, - "padding": 6, - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "left" - ] - }, - "alignItems": "center", - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "SSR2D4S", - "width": "fill_container", - "height": "fill_container", - "fill": "#8B5CF620", - "cornerRadius": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SSR2D4T", - "fill": "#8B5CF6", - "content": "Tối", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SSR2D5", - "width": "fill_container", - "height": 64, - "padding": 6, - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "left" - ] - }, - "alignItems": "center", - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "SSR2D5S", - "width": "fill_container", - "height": "fill_container", - "fill": "#8B5CF620", - "cornerRadius": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SSR2D5T", - "fill": "#8B5CF6", - "content": "Tối", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SSR2D6", - "width": "fill_container", - "height": 64, - "padding": 6, - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "left" - ] - }, - "alignItems": "center", - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "SSR2D6S", - "width": "fill_container", - "height": "fill_container", - "fill": "#3B82F620", - "cornerRadius": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SSR2D6T", - "fill": "#3B82F6", - "content": "Sáng", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SSR2D7", - "width": "fill_container", - "height": 64, - "padding": 6, - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "left" - ] - } - } - ] - }, - { - "type": "frame", - "id": "SSRow3", - "width": "fill_container", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "children": [ - { - "type": "frame", - "id": "SSR3N", - "width": 140, - "height": 64, - "padding": [ - 0, - 12 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SSR3Av", - "width": 32, - "height": 32, - "fill": "#EF4444", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SSR3AvT", - "fill": "#FFFFFF", - "content": "PH", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "SSR3Nm", - "fill": "$text-primary", - "content": "Phạm Hương", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SSR3D1", - "width": "fill_container", - "height": 64, - "padding": 6, - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "left" - ] - }, - "alignItems": "center", - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "SSR3D1S", - "width": "fill_container", - "height": "fill_container", - "fill": "#8B5CF620", - "cornerRadius": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SSR3D1T", - "fill": "#8B5CF6", - "content": "Tối", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SSR3D2", - "width": "fill_container", - "height": 64, - "padding": 6, - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "left" - ] - } - }, - { - "type": "frame", - "id": "SSR3D3", - "width": "fill_container", - "height": 64, - "padding": 6, - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "left" - ] - }, - "alignItems": "center", - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "SSR3D3S", - "width": "fill_container", - "height": "fill_container", - "fill": "#3B82F620", - "cornerRadius": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SSR3D3T", - "fill": "#3B82F6", - "content": "Sáng", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SSR3D4", - "width": "fill_container", - "height": 64, - "padding": 6, - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "left" - ] - }, - "alignItems": "center", - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "SSR3D4S", - "width": "fill_container", - "height": "fill_container", - "fill": "#3B82F620", - "cornerRadius": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SSR3D4T", - "fill": "#3B82F6", - "content": "Sáng", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SSR3D5", - "width": "fill_container", - "height": 64, - "padding": 6, - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "left" - ] - } - }, - { - "type": "frame", - "id": "SSR3D6", - "width": "fill_container", - "height": 64, - "padding": 6, - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "left" - ] - }, - "alignItems": "center", - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "SSR3D6S", - "width": "fill_container", - "height": "fill_container", - "fill": "#22C55E20", - "cornerRadius": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SSR3D6T", - "fill": "#22C55E", - "content": "Chiều", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SSR3D7", - "width": "fill_container", - "height": 64, - "padding": 6, - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "left" - ] - }, - "alignItems": "center", - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "SSR3D7S", - "width": "fill_container", - "height": "fill_container", - "fill": "#22C55E20", - "cornerRadius": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SSR3D7T", - "fill": "#22C55E", - "content": "Chiều", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SSRow4", - "width": "fill_container", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "children": [ - { - "type": "frame", - "id": "SSR4N", - "width": 140, - "height": 64, - "padding": [ - 0, - 12 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SSR4Av", - "width": 32, - "height": 32, - "fill": "#22C55E", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SSR4AvT", - "fill": "#FFFFFF", - "content": "NB", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "SSR4Nm", - "fill": "$text-primary", - "content": "Nguyễn Bảo", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SSR4D1", - "width": "fill_container", - "height": 64, - "padding": 6, - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "left" - ] - } - }, - { - "type": "frame", - "id": "SSR4D2", - "width": "fill_container", - "height": 64, - "padding": 6, - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "left" - ] - }, - "alignItems": "center", - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "SSR4D2S", - "width": "fill_container", - "height": "fill_container", - "fill": "#3B82F620", - "cornerRadius": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SSR4D2T", - "fill": "#3B82F6", - "content": "Sáng", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SSR4D3", - "width": "fill_container", - "height": 64, - "padding": 6, - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "left" - ] - }, - "alignItems": "center", - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "SSR4D3S", - "width": "fill_container", - "height": "fill_container", - "fill": "#22C55E20", - "cornerRadius": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SSR4D3T", - "fill": "#22C55E", - "content": "Chiều", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SSR4D4", - "width": "fill_container", - "height": 64, - "padding": 6, - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "left" - ] - }, - "alignItems": "center", - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "SSR4D4S", - "width": "fill_container", - "height": "fill_container", - "fill": "#22C55E20", - "cornerRadius": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SSR4D4T", - "fill": "#22C55E", - "content": "Chiều", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SSR4D5", - "width": "fill_container", - "height": 64, - "padding": 6, - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "left" - ] - }, - "alignItems": "center", - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "SSR4D5S", - "width": "fill_container", - "height": "fill_container", - "fill": "#8B5CF620", - "cornerRadius": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SSR4D5T", - "fill": "#8B5CF6", - "content": "Tối", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SSR4D6", - "width": "fill_container", - "height": 64, - "padding": 6, - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "left" - ] - }, - "alignItems": "center", - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "SSR4D6S", - "width": "fill_container", - "height": "fill_container", - "fill": "#8B5CF620", - "cornerRadius": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SSR4D6T", - "fill": "#8B5CF6", - "content": "Tối", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SSR4D7", - "width": "fill_container", - "height": 64, - "padding": 6, - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "left" - ] - } - } - ] - }, - { - "type": "frame", - "id": "SSLegend", - "width": "fill_container", - "padding": [ - 16, - 0, - 0, - 0 - ], - "gap": 24, - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "children": [ - { - "type": "frame", - "id": "SSLg1", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SSLg1C", - "width": 14, - "height": 14, - "fill": "#3B82F6", - "cornerRadius": 4 - }, - { - "type": "text", - "id": "SSLg1T", - "fill": "$text-secondary", - "content": "Sáng 6h-14h", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - }, - { - "type": "frame", - "id": "SSLg2", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SSLg2C", - "width": 14, - "height": 14, - "fill": "#22C55E", - "cornerRadius": 4 - }, - { - "type": "text", - "id": "SSLg2T", - "fill": "$text-secondary", - "content": "Chiều 14h-22h", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - }, - { - "type": "frame", - "id": "SSLg3", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SSLg3C", - "width": 14, - "height": 14, - "fill": "#8B5CF6", - "cornerRadius": 4 - }, - { - "type": "text", - "id": "SSLg3T", - "fill": "$text-secondary", - "content": "Tối 22h-6h", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "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/admin/stock-transfer.pen b/pencil-design/src/pages/tPOS/admin/stock-transfer.pen deleted file mode 100644 index fcbc36c2..00000000 --- a/pencil-design/src/pages/tPOS/admin/stock-transfer.pen +++ /dev/null @@ -1,1649 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "StockTransfer", - "name": "Admin/StockTransfer", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "$bg-page", - "clip": true, - "children": [ - { - "type": "frame", - "id": "STSidebar", - "width": 260, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "right" - ] - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "STSidebarLogo", - "width": "fill_container", - "padding": [ - 24, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "STLogoIcon", - "width": 40, - "height": 40, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "STLogoT", - "fill": "#FFFFFF", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "800" - } - ] - }, - { - "type": "frame", - "id": "STLogoTG", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "STLogoN", - "fill": "$text-primary", - "content": "GoodGo Admin", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "text", - "id": "STLogoS", - "fill": "$text-tertiary", - "content": "Management Console", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "STSidebarNav", - "width": "fill_container", - "height": "fill_container", - "padding": [ - 16, - 12 - ], - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "STNavL1", - "fill": "$text-tertiary", - "content": "TỔNG QUAN", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 0, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "STNavDash", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "STNavDashI", - "width": 20, - "height": 20, - "iconFontName": "layout-dashboard", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "STNavDashT", - "fill": "$text-secondary", - "content": "Dashboard", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "STNavL2", - "fill": "$text-tertiary", - "content": "CỬA HÀNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "STNavStores", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "STNavStoresLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "STNavStoresI", - "width": 20, - "height": 20, - "iconFontName": "store", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "STNavStoresT", - "fill": "$text-secondary", - "content": "Quản lý cửa hàng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "STNavStoresBdg", - "width": 22, - "height": 22, - "fill": "$bg-interactive", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "STNavStoresBdgT", - "fill": "$text-tertiary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "STNavProd", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "STNavProdI", - "width": 18, - "height": 18, - "iconFontName": "package", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "STNavProdT", - "fill": "$text-tertiary", - "content": "Sản phẩm & Menu", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "STNavStaff", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "STNavStaffI", - "width": 18, - "height": 18, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "STNavStaffT", - "fill": "$text-tertiary", - "content": "Nhân sự", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "STNavInv", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "STNavInvI", - "width": 18, - "height": 18, - "iconFontName": "warehouse", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "STNavInvT", - "fill": "#FFFFFF", - "content": "Kho hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ], - "fill": "$orange-primary" - }, - { - "type": "frame", - "id": "STNavDev", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "STNavDevI", - "width": 18, - "height": 18, - "iconFontName": "monitor", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "STNavDevT", - "fill": "$text-tertiary", - "content": "Thiết bị", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "STNavL3", - "fill": "$text-tertiary", - "content": "KINH DOANH", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "STNavCust", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "STNavCustI", - "width": 20, - "height": 20, - "iconFontName": "heart", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "STNavCustT", - "fill": "$text-secondary", - "content": "Khách hàng & Loyalty", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "STNavRpt", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "STNavRptI", - "width": 20, - "height": 20, - "iconFontName": "bar-chart-2", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "STNavRptT", - "fill": "$text-secondary", - "content": "Báo cáo & Phân tích", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "STNavFin", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "STNavFinI", - "width": 20, - "height": 20, - "iconFontName": "wallet", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "STNavFinT", - "fill": "$text-secondary", - "content": "Tài chính", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "STNavL4", - "fill": "$text-tertiary", - "content": "HỆ THỐNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "STNavRoles", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "STNavRolesI", - "width": 20, - "height": 20, - "iconFontName": "shield", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "STNavRolesT", - "fill": "$text-secondary", - "content": "Phân quyền", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "STNavSet", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "STNavSetI", - "width": 20, - "height": 20, - "iconFontName": "settings", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "STNavSetT", - "fill": "$text-secondary", - "content": "Cài đặt", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "STSidebarUser", - "width": "fill_container", - "padding": [ - 16, - 16 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "STUserAv", - "width": 36, - "height": 36, - "fill": "#3B82F6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "STUserAvT", - "fill": "#FFFFFF", - "content": "VH", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "STUserInfo", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "STUserN", - "fill": "$text-primary", - "content": "Velik Ho", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "STUserR", - "fill": "$text-tertiary", - "content": "Owner", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "STMain", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "STHeader", - "width": "fill_container", - "padding": [ - 16, - 32 - ], - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "STHeaderLeft", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "frame", - "id": "STBreadcrumb", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "STBread1", - "fill": "$text-tertiary", - "content": "Kho hàng", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "STBreadSep", - "fill": "$text-tertiary", - "content": "/", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "STBread2", - "fill": "$orange-primary", - "content": "Chuyển kho", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "STHeaderTitle", - "fill": "$text-primary", - "content": "Chuyển kho", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "STHeaderRight", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "STAddBtn", - "fill": "$orange-primary", - "cornerRadius": 10, - "padding": [ - 10, - 16 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "STAddI", - "width": 18, - "height": 18, - "iconFontName": "plus", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "STAddT", - "fill": "#FFFFFF", - "content": "Tạo phiếu chuyển", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "STContent", - "width": "fill_container", - "height": "fill_container", - "padding": 24, - "layout": "vertical", - "gap": 24, - "clip": true, - "children": [ - { - "type": "frame", - "id": "STTableSection", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "STTableTitle", - "fill": "$text-primary", - "content": "Phiếu chuyển kho gần đây", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "STTable", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "STTableHead", - "width": "fill_container", - "height": 48, - "padding": [ - 0, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "STTh1", - "width": 120, - "fill": "$text-tertiary", - "content": "Mã phiếu", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "STTh2", - "width": 180, - "fill": "$text-tertiary", - "content": "Từ cửa hàng", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "STTh3", - "width": 180, - "fill": "$text-tertiary", - "content": "Đến cửa hàng", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "STTh4", - "width": 80, - "fill": "$text-tertiary", - "content": "Số SP", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "STTh5", - "width": 120, - "fill": "$text-tertiary", - "content": "Trạng thái", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "STTh6", - "width": 120, - "fill": "$text-tertiary", - "content": "Ngày tạo", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "STRow1", - "width": "fill_container", - "height": 56, - "padding": [ - 0, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "STR1C1", - "width": 120, - "fill": "$orange-primary", - "content": "TF-001", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "STR1C2", - "width": 180, - "fill": "$text-primary", - "content": "Coffee House Q1", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "STR1C3", - "width": 180, - "fill": "$text-primary", - "content": "Coffee House Q3", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "STR1C4", - "width": 80, - "fill": "$text-secondary", - "content": "5", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "frame", - "id": "STR1Badge", - "width": 120, - "children": [ - { - "type": "frame", - "id": "STR1BadgeF", - "fill": "#3B82F620", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "STR1BadgeT", - "fill": "#3B82F6", - "content": "Đang vận chuyển", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "text", - "id": "STR1C6", - "width": 120, - "fill": "$text-secondary", - "content": "20/01/2024", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "id": "STRow2", - "width": "fill_container", - "height": 56, - "padding": [ - 0, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "STR2C1", - "width": 120, - "fill": "$orange-primary", - "content": "TF-002", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "STR2C2", - "width": 180, - "fill": "$text-primary", - "content": "Coffee House Q7", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "STR2C3", - "width": 180, - "fill": "$text-primary", - "content": "Coffee House Q1", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "STR2C4", - "width": 80, - "fill": "$text-secondary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "frame", - "id": "STR2Badge", - "width": 120, - "children": [ - { - "type": "frame", - "id": "STR2BadgeF", - "fill": "#22C55E20", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "STR2BadgeT", - "fill": "#22C55E", - "content": "Hoàn thành", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "text", - "id": "STR2C6", - "width": 120, - "fill": "$text-secondary", - "content": "18/01/2024", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "id": "STRow3", - "width": "fill_container", - "height": 56, - "padding": [ - 0, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "STR3C1", - "width": 120, - "fill": "$orange-primary", - "content": "TF-003", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "STR3C2", - "width": 180, - "fill": "$text-primary", - "content": "Coffee House Thủ Đức", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "STR3C3", - "width": 180, - "fill": "$text-primary", - "content": "Coffee House Q7", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "STR3C4", - "width": 80, - "fill": "$text-secondary", - "content": "8", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "frame", - "id": "STR3Badge", - "width": 120, - "children": [ - { - "type": "frame", - "id": "STR3BadgeF", - "fill": "#F59E0B20", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "STR3BadgeT", - "fill": "#F59E0B", - "content": "Chờ xác nhận", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "text", - "id": "STR3C6", - "width": 120, - "fill": "$text-secondary", - "content": "15/01/2024", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "id": "STRow4", - "width": "fill_container", - "height": 56, - "padding": [ - 0, - 20 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "STR4C1", - "width": 120, - "fill": "$orange-primary", - "content": "TF-004", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "STR4C2", - "width": 180, - "fill": "$text-primary", - "content": "Coffee House Q3", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "STR4C3", - "width": 180, - "fill": "$text-primary", - "content": "Coffee House Thủ Đức", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "STR4C4", - "width": 80, - "fill": "$text-secondary", - "content": "2", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "frame", - "id": "STR4Badge", - "width": 120, - "children": [ - { - "type": "frame", - "id": "STR4BadgeF", - "fill": "#22C55E20", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "STR4BadgeT", - "fill": "#22C55E", - "content": "Hoàn thành", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "text", - "id": "STR4C6", - "width": 120, - "fill": "$text-secondary", - "content": "12/01/2024", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "STFormSection", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 24, - "layout": "vertical", - "gap": 20, - "children": [ - { - "type": "text", - "id": "STFormTitle", - "fill": "$text-primary", - "content": "Tạo phiếu chuyển kho mới", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "STFormRow1", - "width": "fill_container", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "STFormFrom", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "STFormFromL", - "fill": "$text-secondary", - "content": "Cửa hàng gửi", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "STFormFromDD", - "width": "fill_container", - "height": 44, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "STFormFromV", - "fill": "$text-primary", - "content": "Coffee House Q1", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "icon_font", - "id": "STFormFromChev", - "width": 16, - "height": 16, - "iconFontName": "chevron-down", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "STFormArrow", - "width": 44, - "height": 44, - "justifyContent": "center", - "alignItems": "flex_end", - "children": [ - { - "type": "icon_font", - "id": "STFormArrowI", - "width": 24, - "height": 24, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - } - ] - }, - { - "type": "frame", - "id": "STFormTo", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "STFormToL", - "fill": "$text-secondary", - "content": "Cửa hàng nhận", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "STFormToDD", - "width": "fill_container", - "height": 44, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "STFormToV", - "fill": "$text-tertiary", - "content": "Chọn cửa hàng...", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "icon_font", - "id": "STFormToChev", - "width": 16, - "height": 16, - "iconFontName": "chevron-down", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "STFormProducts", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "STFormProdL", - "fill": "$text-secondary", - "content": "Danh sách sản phẩm chuyển", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "STFormProdList", - "width": "fill_container", - "fill": "$bg-interactive", - "cornerRadius": 10, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "STFProd1", - "width": "fill_container", - "height": 44, - "padding": [ - 0, - 14 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "STFProd1N", - "fill": "$text-primary", - "content": "Cà phê Arabica 500g", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "frame", - "id": "STFProd1Qty", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "STFProd1QL", - "fill": "$text-tertiary", - "content": "SL:", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "frame", - "id": "STFProd1QV", - "width": 60, - "height": 30, - "fill": "$bg-page", - "cornerRadius": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "STFProd1QT", - "fill": "$text-primary", - "content": "10", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "STFProd2", - "width": "fill_container", - "height": 44, - "padding": [ - 0, - 14 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "STFProd2N", - "fill": "$text-primary", - "content": "Sữa tươi Vinamilk 1L", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "frame", - "id": "STFProd2Qty", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "STFProd2QL", - "fill": "$text-tertiary", - "content": "SL:", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "frame", - "id": "STFProd2QV", - "width": 60, - "height": 30, - "fill": "$bg-page", - "cornerRadius": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "STFProd2QT", - "fill": "$text-primary", - "content": "24", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "STFProdAdd", - "width": "fill_container", - "height": 44, - "padding": [ - 0, - 14 - ], - "gap": 8, - "alignItems": "center", - "justifyContent": "center", - "children": [ - { - "type": "icon_font", - "id": "STFProdAddI", - "width": 16, - "height": 16, - "iconFontName": "plus", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "STFProdAddT", - "fill": "$orange-primary", - "content": "Thêm sản phẩm", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-elevated": { - "type": "color", - "value": "#1A1A1D" - }, - "bg-interactive": { - "type": "color", - "value": "#2A2A2E" - }, - "bg-page": { - "type": "color", - "value": "#0A0A0B" - }, - "border-default": { - "type": "color", - "value": "#2A2A2E" - }, - "border-subtle": { - "type": "color", - "value": "#1F1F23" - }, - "orange-primary": { - "type": "color", - "value": "#FF5C00" - }, - "text-primary": { - "type": "color", - "value": "#FFFFFF" - }, - "text-secondary": { - "type": "color", - "value": "#ADADB0" - }, - "text-tertiary": { - "type": "color", - "value": "#8B8B90" - } - } -} \ No newline at end of file diff --git a/pencil-design/src/pages/tPOS/admin/store-create.pen b/pencil-design/src/pages/tPOS/admin/store-create.pen deleted file mode 100644 index dcc27f1a..00000000 --- a/pencil-design/src/pages/tPOS/admin/store-create.pen +++ /dev/null @@ -1,1549 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "StoreCreate", - "name": "Admin/StoreCreate", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "$bg-page", - "clip": true, - "children": [ - { - "type": "frame", - "id": "SCSidebar", - "width": 260, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "right" - ] - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "SCSidebarLogo", - "width": "fill_container", - "padding": [ - 24, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SCLogoIcon", - "width": 40, - "height": 40, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SCLogoT", - "fill": "#FFFFFF", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "800" - } - ] - }, - { - "type": "frame", - "id": "SCLogoTG", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "SCLogoN", - "fill": "$text-primary", - "content": "GoodGo Admin", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "text", - "id": "SCLogoS", - "fill": "$text-tertiary", - "content": "Management Console", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SCSidebarNav", - "width": "fill_container", - "height": "fill_container", - "padding": [ - 16, - 12 - ], - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "SCNavL1", - "fill": "$text-tertiary", - "content": "TỔNG QUAN", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 0, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "SCNavDash", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SCNavDashI", - "width": 20, - "height": 20, - "iconFontName": "layout-dashboard", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SCNavDashT", - "fill": "$text-secondary", - "content": "Dashboard", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "SCNavL2", - "fill": "$text-tertiary", - "content": "CỬA HÀNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "SCNavStores", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SCNavStoresI", - "width": 20, - "height": 20, - "iconFontName": "store", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "SCNavStoresT", - "fill": "#FFFFFF", - "content": "Quản lý cửa hàng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ], - "fill": "$orange-primary" - }, - { - "type": "frame", - "id": "SCNavProd", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SCNavProdI", - "width": 18, - "height": 18, - "iconFontName": "package", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SCNavProdT", - "fill": "$text-tertiary", - "content": "Sản phẩm & Menu", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SCNavStaff", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SCNavStaffI", - "width": 18, - "height": 18, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SCNavStaffT", - "fill": "$text-tertiary", - "content": "Nhân sự", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SCNavInv", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SCNavInvI", - "width": 18, - "height": 18, - "iconFontName": "warehouse", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SCNavInvT", - "fill": "$text-tertiary", - "content": "Kho hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SCNavDev", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SCNavDevI", - "width": 18, - "height": 18, - "iconFontName": "monitor", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SCNavDevT", - "fill": "$text-tertiary", - "content": "Thiết bị", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "SCNavL3", - "fill": "$text-tertiary", - "content": "KINH DOANH", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "SCNavCust", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SCNavCustI", - "width": 20, - "height": 20, - "iconFontName": "heart", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SCNavCustT", - "fill": "$text-secondary", - "content": "Khách hàng & Loyalty", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SCNavRpt", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SCNavRptI", - "width": 20, - "height": 20, - "iconFontName": "bar-chart-2", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SCNavRptT", - "fill": "$text-secondary", - "content": "Báo cáo & Phân tích", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SCNavFin", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SCNavFinI", - "width": 20, - "height": 20, - "iconFontName": "wallet", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SCNavFinT", - "fill": "$text-secondary", - "content": "Tài chính", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "SCNavL4", - "fill": "$text-tertiary", - "content": "HỆ THỐNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "SCNavRoles", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SCNavRolesI", - "width": 20, - "height": 20, - "iconFontName": "shield", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SCNavRolesT", - "fill": "$text-secondary", - "content": "Phân quyền", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SCNavSet", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SCNavSetI", - "width": 20, - "height": 20, - "iconFontName": "settings", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SCNavSetT", - "fill": "$text-secondary", - "content": "Cài đặt", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SCSidebarUser", - "width": "fill_container", - "padding": [ - 16, - 16 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SCUserAv", - "width": 36, - "height": 36, - "fill": "#3B82F6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SCUserAvT", - "fill": "#FFFFFF", - "content": "VH", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "SCUserInfo", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "SCUserN", - "fill": "$text-primary", - "content": "Velik Ho", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "SCUserR", - "fill": "$text-tertiary", - "content": "Owner", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SCMain", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "SCHeader", - "width": "fill_container", - "padding": [ - 16, - 32 - ], - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SCHeaderLeft", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SCBack", - "width": 40, - "height": 40, - "fill": "$bg-interactive", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SCBackI", - "width": 20, - "height": 20, - "iconFontName": "arrow-left", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - }, - { - "type": "frame", - "id": "SCHeaderTG", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "frame", - "id": "SCBreadcrumb", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SCBread1", - "fill": "$text-tertiary", - "content": "Cửa hàng", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "SCBreadSep", - "fill": "$text-tertiary", - "content": "/", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "SCBread2", - "fill": "$orange-primary", - "content": "Tạo mới", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "SCHeaderTitle", - "fill": "$text-primary", - "content": "Tạo cửa hàng mới", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "700" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SCHeaderRight", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "SCCancelBtn", - "height": 40, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 20 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SCCancelT", - "fill": "$text-secondary", - "content": "Hủy bỏ", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SCCreateBtn", - "fill": "$orange-primary", - "cornerRadius": 10, - "padding": [ - 10, - 20 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SCCreateI", - "width": 18, - "height": 18, - "iconFontName": "plus", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "SCCreateT", - "fill": "#FFFFFF", - "content": "Tạo cửa hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SCSteps", - "width": "fill_container", - "padding": [ - 20, - 32 - ], - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "center", - "gap": 0, - "children": [ - { - "type": "frame", - "id": "SCStep1", - "layout": "vertical", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SCStep1Circle", - "width": 36, - "height": 36, - "fill": "$orange-primary", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SCStep1Num", - "fill": "#FFFFFF", - "content": "1", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "SCStep1T", - "fill": "$orange-primary", - "content": "Thông tin", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "SCStepLine1", - "width": 100, - "height": 2, - "fill": "$orange-primary", - "marginTop": 18 - }, - { - "type": "frame", - "id": "SCStep2", - "layout": "vertical", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SCStep2Circle", - "width": 36, - "height": 36, - "fill": "$bg-interactive", - "stroke": { - "thickness": 2, - "fill": "$border-default" - }, - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SCStep2Num", - "fill": "$text-tertiary", - "content": "2", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "SCStep2T", - "fill": "$text-tertiary", - "content": "Loại hình", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SCStepLine2", - "width": 100, - "height": 2, - "fill": "$border-default", - "marginTop": 18 - }, - { - "type": "frame", - "id": "SCStep3", - "layout": "vertical", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SCStep3Circle", - "width": 36, - "height": 36, - "fill": "$bg-interactive", - "stroke": { - "thickness": 2, - "fill": "$border-default" - }, - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SCStep3Num", - "fill": "$text-tertiary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "SCStep3T", - "fill": "$text-tertiary", - "content": "Cấu hình", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SCStepLine3", - "width": 100, - "height": 2, - "fill": "$border-default", - "marginTop": 18 - }, - { - "type": "frame", - "id": "SCStep4", - "layout": "vertical", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SCStep4Circle", - "width": 36, - "height": 36, - "fill": "$bg-interactive", - "stroke": { - "thickness": 2, - "fill": "$border-default" - }, - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SCStep4Num", - "fill": "$text-tertiary", - "content": "4", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "SCStep4T", - "fill": "$text-tertiary", - "content": "Xác nhận", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SCFormArea", - "width": "fill_container", - "height": "fill_container", - "padding": [ - 32, - 80 - ], - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "SCFormCard", - "width": 720, - "fill": "$bg-elevated", - "cornerRadius": 16, - "padding": 32, - "layout": "vertical", - "gap": 24, - "children": [ - { - "type": "frame", - "id": "SCFormHeader", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "SCFormTitle", - "fill": "$text-primary", - "content": "Thông tin cửa hàng", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "700" - }, - { - "type": "text", - "id": "SCFormSub", - "fill": "$text-tertiary", - "content": "Nhập thông tin cơ bản để tạo cửa hàng mới", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "id": "SCFormRow1", - "width": "fill_container", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "SCF1", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "SCF1L", - "fill": "$text-secondary", - "content": "Tên cửa hàng *", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "SCF1I", - "width": "fill_container", - "height": 44, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SCF1P", - "fill": "$text-tertiary", - "content": "VD: Coffee House Q1", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SCF2", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "SCF2L", - "fill": "$text-secondary", - "content": "Mã cửa hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "SCF2I", - "width": "fill_container", - "height": 44, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SCF2P", - "fill": "$text-tertiary", - "content": "Tự động tạo", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SCFormRow2", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "SCF3L", - "fill": "$text-secondary", - "content": "Địa chỉ *", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "SCF3I", - "width": "fill_container", - "height": 44, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SCF3P", - "fill": "$text-tertiary", - "content": "Nhập địa chỉ cửa hàng", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SCFormRow3", - "width": "fill_container", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "SCF4", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "SCF4L", - "fill": "$text-secondary", - "content": "Số điện thoại *", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "SCF4I", - "width": "fill_container", - "height": 44, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SCF4P", - "fill": "$text-tertiary", - "content": "VD: 028 1234 5678", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SCF5", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "SCF5L", - "fill": "$text-secondary", - "content": "Email", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "SCF5I", - "width": "fill_container", - "height": 44, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SCF5P", - "fill": "$text-tertiary", - "content": "store@example.com", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SCFormRow4", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "SCF6L", - "fill": "$text-secondary", - "content": "Chọn loại hình kinh doanh *", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "SCBizTypes", - "width": "fill_container", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "SCBiz1", - "width": "fill_container", - "height": 80, - "fill": "#FF5C0015", - "stroke": { - "thickness": 2, - "fill": "$orange-primary" - }, - "cornerRadius": 12, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "gap": 6, - "children": [ - { - "type": "text", - "id": "SCBiz1E", - "content": "☕", - "fontSize": 24, - "fontFamily": "Roboto" - }, - { - "type": "text", - "id": "SCBiz1T", - "fill": "$orange-primary", - "content": "Quán cà phê", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "SCBiz2", - "width": "fill_container", - "height": 80, - "fill": "$bg-interactive", - "cornerRadius": 12, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "gap": 6, - "children": [ - { - "type": "text", - "id": "SCBiz2E", - "content": "🍽️", - "fontSize": 24, - "fontFamily": "Roboto" - }, - { - "type": "text", - "id": "SCBiz2T", - "fill": "$text-secondary", - "content": "Nhà hàng", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SCBiz3", - "width": "fill_container", - "height": 80, - "fill": "$bg-interactive", - "cornerRadius": 12, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "gap": 6, - "children": [ - { - "type": "text", - "id": "SCBiz3E", - "content": "🎤", - "fontSize": 24, - "fontFamily": "Roboto" - }, - { - "type": "text", - "id": "SCBiz3T", - "fill": "$text-secondary", - "content": "Karaoke", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SCBiz4", - "width": "fill_container", - "height": 80, - "fill": "$bg-interactive", - "cornerRadius": 12, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "gap": 6, - "children": [ - { - "type": "text", - "id": "SCBiz4E", - "content": "💆", - "fontSize": 24, - "fontFamily": "Roboto" - }, - { - "type": "text", - "id": "SCBiz4T", - "fill": "$text-secondary", - "content": "Spa", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SCBiz5", - "width": "fill_container", - "height": 80, - "fill": "$bg-interactive", - "cornerRadius": 12, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "gap": 6, - "children": [ - { - "type": "text", - "id": "SCBiz5E", - "content": "🛒", - "fontSize": 24, - "fontFamily": "Roboto" - }, - { - "type": "text", - "id": "SCBiz5T", - "fill": "$text-secondary", - "content": "Bán lẻ", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SCFormFooter", - "width": "fill_container", - "justifyContent": "flex_end", - "gap": 12, - "padding": [ - 8, - 0, - 0, - 0 - ], - "children": [ - { - "type": "frame", - "id": "SCNextBtn", - "fill": "$orange-primary", - "cornerRadius": 10, - "padding": [ - 12, - 28 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SCNextT", - "fill": "#FFFFFF", - "content": "Tiếp theo", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "icon_font", - "id": "SCNextI", - "width": 18, - "height": 18, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - } - ] - } - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "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/admin/store-detail.pen b/pencil-design/src/pages/tPOS/admin/store-detail.pen deleted file mode 100644 index 062a76e6..00000000 --- a/pencil-design/src/pages/tPOS/admin/store-detail.pen +++ /dev/null @@ -1,1736 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "StoreDetail", - "name": "Admin/StoreDetail", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "$bg-page", - "clip": true, - "children": [ - { - "type": "frame", - "id": "SDSidebar", - "width": 260, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "right" - ] - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "SDSidebarLogo", - "width": "fill_container", - "padding": [ - 24, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SDLogoIcon", - "width": 40, - "height": 40, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SDLogoT", - "fill": "#FFFFFF", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "800" - } - ] - }, - { - "type": "frame", - "id": "SDLogoTG", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "SDLogoN", - "fill": "$text-primary", - "content": "GoodGo Admin", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "text", - "id": "SDLogoS", - "fill": "$text-tertiary", - "content": "Management Console", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SDSidebarNav", - "width": "fill_container", - "height": "fill_container", - "padding": [ - 16, - 12 - ], - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "SDNavL1", - "fill": "$text-tertiary", - "content": "TỔNG QUAN", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 0, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "SDNavDash", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SDNavDashI", - "width": 20, - "height": 20, - "iconFontName": "layout-dashboard", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SDNavDashT", - "fill": "$text-secondary", - "content": "Dashboard", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "SDNavL2", - "fill": "$text-tertiary", - "content": "CỬA HÀNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "SDNavStores", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SDNavStoresI", - "width": 20, - "height": 20, - "iconFontName": "store", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "SDNavStoresT", - "fill": "#FFFFFF", - "content": "Quản lý cửa hàng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ], - "fill": "$orange-primary" - }, - { - "type": "frame", - "id": "SDNavProd", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SDNavProdI", - "width": 18, - "height": 18, - "iconFontName": "package", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SDNavProdT", - "fill": "$text-tertiary", - "content": "Sản phẩm & Menu", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SDNavStaff", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SDNavStaffI", - "width": 18, - "height": 18, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SDNavStaffT", - "fill": "$text-tertiary", - "content": "Nhân sự", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SDNavInv", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SDNavInvI", - "width": 18, - "height": 18, - "iconFontName": "warehouse", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SDNavInvT", - "fill": "$text-tertiary", - "content": "Kho hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SDNavDev", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SDNavDevI", - "width": 18, - "height": 18, - "iconFontName": "monitor", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SDNavDevT", - "fill": "$text-tertiary", - "content": "Thiết bị", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "SDNavL3", - "fill": "$text-tertiary", - "content": "KINH DOANH", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "SDNavCust", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SDNavCustI", - "width": 20, - "height": 20, - "iconFontName": "heart", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SDNavCustT", - "fill": "$text-secondary", - "content": "Khách hàng & Loyalty", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SDNavRpt", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SDNavRptI", - "width": 20, - "height": 20, - "iconFontName": "bar-chart-2", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SDNavRptT", - "fill": "$text-secondary", - "content": "Báo cáo & Phân tích", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SDNavFin", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SDNavFinI", - "width": 20, - "height": 20, - "iconFontName": "wallet", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SDNavFinT", - "fill": "$text-secondary", - "content": "Tài chính", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "SDNavL4", - "fill": "$text-tertiary", - "content": "HỆ THỐNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "SDNavRoles", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SDNavRolesI", - "width": 20, - "height": 20, - "iconFontName": "shield", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SDNavRolesT", - "fill": "$text-secondary", - "content": "Phân quyền", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SDNavSet", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SDNavSetI", - "width": 20, - "height": 20, - "iconFontName": "settings", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SDNavSetT", - "fill": "$text-secondary", - "content": "Cài đặt", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SDSidebarUser", - "width": "fill_container", - "padding": [ - 16, - 16 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SDUserAv", - "width": 36, - "height": 36, - "fill": "#3B82F6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SDUserAvT", - "fill": "#FFFFFF", - "content": "VH", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "SDUserInfo", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "SDUserN", - "fill": "$text-primary", - "content": "Velik Ho", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "SDUserR", - "fill": "$text-tertiary", - "content": "Owner", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SDMain", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "SDHeader", - "width": "fill_container", - "padding": [ - 16, - 32 - ], - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SDHeaderLeft", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "frame", - "id": "SDBreadcrumb", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SDBread1", - "fill": "$text-tertiary", - "content": "Cửa hàng", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "SDBreadSep", - "fill": "$text-tertiary", - "content": "/", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "SDBread2", - "fill": "$orange-primary", - "content": "Coffee House Q1", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "SDHeaderTitleRow", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SDHeaderTitle", - "fill": "$text-primary", - "content": "Coffee House Q1", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "SDStatusBadge", - "fill": "#22C55E20", - "cornerRadius": 100, - "padding": [ - 4, - 12 - ], - "alignItems": "center", - "gap": 6, - "children": [ - { - "type": "frame", - "id": "SDStatusDot", - "width": 6, - "height": 6, - "fill": "#22C55E", - "cornerRadius": 100 - }, - { - "type": "text", - "id": "SDStatusText", - "fill": "#22C55E", - "content": "Active", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SDHeaderRight", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "SDEditBtn", - "height": 40, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 16 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SDEditBtnI", - "width": 16, - "height": 16, - "iconFontName": "pencil", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "SDEditBtnT", - "fill": "$text-primary", - "content": "Chỉnh sửa", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SDPauseBtn", - "height": 40, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 16 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SDPauseBtnI", - "width": 16, - "height": 16, - "iconFontName": "pause-circle", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - }, - { - "type": "text", - "id": "SDPauseBtnT", - "fill": "$text-primary", - "content": "Tạm ngưng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SDTabsRow", - "width": "fill_container", - "fill": "$bg-elevated", - "padding": [ - 0, - 32 - ], - "gap": 0, - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "children": [ - { - "type": "frame", - "id": "SDTabActive", - "padding": [ - 12, - 16 - ], - "stroke": { - "thickness": 2, - "fill": "$orange-primary", - "sides": [ - "bottom" - ] - }, - "children": [ - { - "type": "text", - "id": "SDTabActiveT", - "fill": "$orange-primary", - "content": "Tổng quan", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "SDTab2", - "padding": [ - 12, - 16 - ], - "children": [ - { - "type": "text", - "id": "SDTab2T", - "fill": "$text-secondary", - "content": "Sản phẩm", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SDTab3", - "padding": [ - 12, - 16 - ], - "children": [ - { - "type": "text", - "id": "SDTab3T", - "fill": "$text-secondary", - "content": "Nhân sự", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SDTab4", - "padding": [ - 12, - 16 - ], - "children": [ - { - "type": "text", - "id": "SDTab4T", - "fill": "$text-secondary", - "content": "Kho", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SDTab5", - "padding": [ - 12, - 16 - ], - "children": [ - { - "type": "text", - "id": "SDTab5T", - "fill": "$text-secondary", - "content": "Thiết bị", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SDTab6", - "padding": [ - 12, - 16 - ], - "children": [ - { - "type": "text", - "id": "SDTab6T", - "fill": "$text-secondary", - "content": "Cài đặt", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SDContent", - "width": "fill_container", - "height": "fill_container", - "padding": 28, - "layout": "vertical", - "gap": 24, - "clip": true, - "children": [ - { - "type": "frame", - "id": "SDKPIRow", - "width": "fill_container", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "SDKPI1", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 20, - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "SDKPI1Top", - "justifyContent": "space_between", - "alignItems": "center", - "width": "fill_container", - "children": [ - { - "type": "text", - "id": "SDKPI1Label", - "fill": "$text-secondary", - "content": "Doanh thu", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "SDKPI1Icon", - "width": 36, - "height": 36, - "fill": "#FF5C0015", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SDKPI1I", - "width": 18, - "height": 18, - "iconFontName": "trending-up", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - } - ] - } - ] - }, - { - "type": "text", - "id": "SDKPI1Value", - "fill": "$text-primary", - "content": "45.2M ₫", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "700" - }, - { - "type": "text", - "id": "SDKPI1Sub", - "fill": "#22C55E", - "content": "+12.5% so với tháng trước", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - }, - { - "type": "frame", - "id": "SDKPI2", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 20, - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "SDKPI2Top", - "justifyContent": "space_between", - "alignItems": "center", - "width": "fill_container", - "children": [ - { - "type": "text", - "id": "SDKPI2Label", - "fill": "$text-secondary", - "content": "Đơn hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "SDKPI2Icon", - "width": 36, - "height": 36, - "fill": "#3B82F615", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SDKPI2I", - "width": 18, - "height": 18, - "iconFontName": "shopping-bag", - "iconFontFamily": "lucide", - "fill": "#3B82F6" - } - ] - } - ] - }, - { - "type": "text", - "id": "SDKPI2Value", - "fill": "$text-primary", - "content": "328", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "700" - }, - { - "type": "text", - "id": "SDKPI2Sub", - "fill": "#22C55E", - "content": "+8.2% so với tháng trước", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - }, - { - "type": "frame", - "id": "SDKPI3", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 20, - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "SDKPI3Top", - "justifyContent": "space_between", - "alignItems": "center", - "width": "fill_container", - "children": [ - { - "type": "text", - "id": "SDKPI3Label", - "fill": "$text-secondary", - "content": "Nhân viên", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "SDKPI3Icon", - "width": 36, - "height": 36, - "fill": "#22C55E15", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SDKPI3I", - "width": 18, - "height": 18, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - } - ] - }, - { - "type": "text", - "id": "SDKPI3Value", - "fill": "$text-primary", - "content": "8", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "700" - }, - { - "type": "text", - "id": "SDKPI3Sub", - "fill": "$text-tertiary", - "content": "6 đang làm việc", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - }, - { - "type": "frame", - "id": "SDKPI4", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 20, - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "SDKPI4Top", - "justifyContent": "space_between", - "alignItems": "center", - "width": "fill_container", - "children": [ - { - "type": "text", - "id": "SDKPI4Label", - "fill": "$text-secondary", - "content": "Sản phẩm", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "SDKPI4Icon", - "width": 36, - "height": 36, - "fill": "#F59E0B15", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SDKPI4I", - "width": 18, - "height": 18, - "iconFontName": "package", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - } - ] - } - ] - }, - { - "type": "text", - "id": "SDKPI4Value", - "fill": "$text-primary", - "content": "48", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "700" - }, - { - "type": "text", - "id": "SDKPI4Sub", - "fill": "$text-tertiary", - "content": "3 hết hàng", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SDTableCard", - "width": "fill_container", - "height": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "SDTableHeader", - "width": "fill_container", - "padding": [ - 16, - 20 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SDTableTitle", - "fill": "$text-primary", - "content": "Đơn hàng gần đây", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "text", - "id": "SDTableLink", - "fill": "$orange-primary", - "content": "Xem tất cả →", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SDTableHead", - "width": "fill_container", - "padding": [ - 10, - 20 - ], - "fill": "$bg-page", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "children": [ - { - "type": "text", - "id": "SDTh1", - "width": 120, - "fill": "$text-tertiary", - "content": "Mã đơn", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "SDTh2", - "width": 140, - "fill": "$text-tertiary", - "content": "Thời gian", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "SDTh3", - "width": "fill_container", - "fill": "$text-tertiary", - "content": "Khách hàng", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "SDTh4", - "width": 140, - "fill": "$text-tertiary", - "content": "Tổng tiền", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "text", - "id": "SDTh5", - "width": 120, - "fill": "$text-tertiary", - "content": "Trạng thái", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "SDTr1", - "width": "fill_container", - "padding": [ - 14, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SDTr1C1", - "width": 120, - "fill": "$orange-primary", - "content": "#DH-1024", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "SDTr1C2", - "width": 140, - "fill": "$text-secondary", - "content": "14:32, 10/02/2026", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "SDTr1C3", - "width": "fill_container", - "fill": "$text-primary", - "content": "Nguyễn Văn An", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "SDTr1C4", - "width": 140, - "fill": "$text-primary", - "content": "185,000 ₫", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "SDTr1Badge", - "width": 120, - "children": [ - { - "type": "frame", - "id": "SDTr1BadgeF", - "fill": "#22C55E20", - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "SDTr1BadgeT", - "fill": "#22C55E", - "content": "Hoàn thành", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SDTr2", - "width": "fill_container", - "padding": [ - 14, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SDTr2C1", - "width": 120, - "fill": "$orange-primary", - "content": "#DH-1023", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "SDTr2C2", - "width": 140, - "fill": "$text-secondary", - "content": "14:15, 10/02/2026", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "SDTr2C3", - "width": "fill_container", - "fill": "$text-primary", - "content": "Trần Thị Mai", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "SDTr2C4", - "width": 140, - "fill": "$text-primary", - "content": "92,000 ₫", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "SDTr2Badge", - "width": 120, - "children": [ - { - "type": "frame", - "id": "SDTr2BadgeF", - "fill": "#F59E0B20", - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "SDTr2BadgeT", - "fill": "#F59E0B", - "content": "Đang pha", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SDTr3", - "width": "fill_container", - "padding": [ - 14, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SDTr3C1", - "width": 120, - "fill": "$orange-primary", - "content": "#DH-1022", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "SDTr3C2", - "width": 140, - "fill": "$text-secondary", - "content": "13:48, 10/02/2026", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "SDTr3C3", - "width": "fill_container", - "fill": "$text-primary", - "content": "Lê Hoàng Dũng", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "SDTr3C4", - "width": 140, - "fill": "$text-primary", - "content": "256,000 ₫", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "SDTr3Badge", - "width": 120, - "children": [ - { - "type": "frame", - "id": "SDTr3BadgeF", - "fill": "#22C55E20", - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "SDTr3BadgeT", - "fill": "#22C55E", - "content": "Hoàn thành", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SDTr4", - "width": "fill_container", - "padding": [ - 14, - 20 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SDTr4C1", - "width": 120, - "fill": "$orange-primary", - "content": "#DH-1021", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "SDTr4C2", - "width": 140, - "fill": "$text-secondary", - "content": "13:22, 10/02/2026", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "SDTr4C3", - "width": "fill_container", - "fill": "$text-primary", - "content": "Phạm Quốc Bảo", - "fontFamily": "Roboto", - "fontSize": 13 - }, - { - "type": "text", - "id": "SDTr4C4", - "width": 140, - "fill": "$text-primary", - "content": "124,000 ₫", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "SDTr4Badge", - "width": 120, - "children": [ - { - "type": "frame", - "id": "SDTr4BadgeF", - "fill": "#EF444420", - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "SDTr4BadgeT", - "fill": "#EF4444", - "content": "Đã hủy", - "fontFamily": "Roboto", - "fontSize": 11, - "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/admin/store-list.pen b/pencil-design/src/pages/tPOS/admin/store-list.pen deleted file mode 100644 index b2939a92..00000000 --- a/pencil-design/src/pages/tPOS/admin/store-list.pen +++ /dev/null @@ -1,2186 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "StoreList", - "name": "Admin/StoreList", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "$bg-page", - "clip": true, - "children": [ - { - "type": "frame", - "id": "SLSidebar", - "width": 260, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "right" - ] - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "SLSidebarLogo", - "width": "fill_container", - "padding": [ - 24, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SLLogoIcon", - "width": 40, - "height": 40, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SLLogoText", - "fill": "#FFFFFF", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "800" - } - ] - }, - { - "type": "frame", - "id": "SLLogoTextG", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "SLLogoName", - "fill": "$text-primary", - "content": "GoodGo Admin", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "text", - "id": "SLLogoSub", - "fill": "$text-tertiary", - "content": "Management Console", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SLSidebarNav", - "width": "fill_container", - "height": "fill_container", - "padding": [ - 16, - 12 - ], - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "SLNavL1", - "fill": "$text-tertiary", - "content": "TỔNG QUAN", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 0, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "SLNavDash", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SLNavDashI", - "width": 20, - "height": 20, - "iconFontName": "layout-dashboard", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SLNavDashT", - "fill": "$text-secondary", - "content": "Dashboard", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "SLNavL2", - "fill": "$text-tertiary", - "content": "CỬA HÀNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "SLNavStores", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SLNavStoresI", - "width": 20, - "height": 20, - "iconFontName": "store", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "SLNavStoresT", - "fill": "#FFFFFF", - "content": "Quản lý cửa hàng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ], - "fill": "$orange-primary" - }, - { - "type": "frame", - "id": "SLNavProd", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SLNavProdI", - "width": 18, - "height": 18, - "iconFontName": "package", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SLNavProdT", - "fill": "$text-tertiary", - "content": "Sản phẩm & Menu", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SLNavStaff", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SLNavStaffI", - "width": 18, - "height": 18, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SLNavStaffT", - "fill": "$text-tertiary", - "content": "Nhân sự", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SLNavInv", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SLNavInvI", - "width": 18, - "height": 18, - "iconFontName": "warehouse", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SLNavInvT", - "fill": "$text-tertiary", - "content": "Kho hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SLNavDev", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SLNavDevI", - "width": 18, - "height": 18, - "iconFontName": "monitor", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SLNavDevT", - "fill": "$text-tertiary", - "content": "Thiết bị", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "SLNavL3", - "fill": "$text-tertiary", - "content": "KINH DOANH", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "SLNavCust", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SLNavCustI", - "width": 20, - "height": 20, - "iconFontName": "heart", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SLNavCustT", - "fill": "$text-secondary", - "content": "Khách hàng & Loyalty", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SLNavRpt", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SLNavRptI", - "width": 20, - "height": 20, - "iconFontName": "bar-chart-2", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SLNavRptT", - "fill": "$text-secondary", - "content": "Báo cáo & Phân tích", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SLNavFin", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SLNavFinI", - "width": 20, - "height": 20, - "iconFontName": "wallet", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SLNavFinT", - "fill": "$text-secondary", - "content": "Tài chính", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "SLNavL4", - "fill": "$text-tertiary", - "content": "HỆ THỐNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "SLNavRoles", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SLNavRolesI", - "width": 20, - "height": 20, - "iconFontName": "shield", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SLNavRolesT", - "fill": "$text-secondary", - "content": "Phân quyền", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SLNavSet", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SLNavSetI", - "width": 20, - "height": 20, - "iconFontName": "settings", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SLNavSetT", - "fill": "$text-secondary", - "content": "Cài đặt", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SLSidebarUser", - "width": "fill_container", - "padding": [ - 16, - 16 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SLUserAv", - "width": 36, - "height": 36, - "fill": "#3B82F6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SLUserAvT", - "fill": "#FFFFFF", - "content": "VH", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "SLUserInfo", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "SLUserName", - "fill": "$text-primary", - "content": "Velik Ho", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "SLUserRole", - "fill": "$text-tertiary", - "content": "Owner", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SLMain", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "SLHeader", - "width": "fill_container", - "padding": [ - 16, - 32 - ], - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SLHeaderLeft", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "SLHeaderTitle", - "fill": "$text-primary", - "content": "Quản lý cửa hàng", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "700" - }, - { - "type": "text", - "id": "SLHeaderSub", - "fill": "$text-tertiary", - "content": "Tạo và quản lý tất cả cửa hàng trong hệ thống", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "id": "SLHeaderRight", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SLFilterBtn", - "height": 40, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SLFilterI", - "width": 18, - "height": 18, - "iconFontName": "filter", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SLFilterT", - "fill": "$text-secondary", - "content": "Bộ lọc", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SLSearch", - "width": 260, - "height": 40, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SLSearchI", - "width": 18, - "height": 18, - "iconFontName": "search", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SLSearchP", - "fill": "$text-tertiary", - "content": "Tìm cửa hàng...", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "id": "SLNewStore", - "fill": "$orange-primary", - "cornerRadius": 10, - "padding": [ - 10, - 16 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SLNewStoreI", - "width": 18, - "height": 18, - "iconFontName": "plus", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "SLNewStoreT", - "fill": "#FFFFFF", - "content": "Tạo cửa hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SLTabs", - "width": "fill_container", - "padding": [ - 0, - 32 - ], - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "gap": 0, - "children": [ - { - "type": "frame", - "id": "SLTabAll", - "padding": [ - 12, - 20 - ], - "stroke": { - "thickness": 2, - "fill": "$orange-primary", - "sides": [ - "bottom" - ] - }, - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SLTabAllT", - "fill": "$orange-primary", - "content": "Tất cả", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "SLTabAllBadge", - "fill": "$orange-primary", - "cornerRadius": 6, - "padding": [ - 2, - 8 - ], - "children": [ - { - "type": "text", - "id": "SLTabAllBadgeT", - "fill": "#FFFFFF", - "content": "5", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SLTabActive", - "padding": [ - 12, - 20 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SLTabActiveT", - "fill": "$text-tertiary", - "content": "Hoạt động", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "SLTabActiveBadge", - "fill": "$bg-interactive", - "cornerRadius": 6, - "padding": [ - 2, - 8 - ], - "children": [ - { - "type": "text", - "id": "SLTabActiveBadgeT", - "fill": "$text-tertiary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SLTabSetup", - "padding": [ - 12, - 20 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SLTabSetupT", - "fill": "$text-tertiary", - "content": "Thiết lập", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "SLTabSetupBadge", - "fill": "$bg-interactive", - "cornerRadius": 6, - "padding": [ - 2, - 8 - ], - "children": [ - { - "type": "text", - "id": "SLTabSetupBadgeT", - "fill": "$text-tertiary", - "content": "1", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SLTabPaused", - "padding": [ - 12, - 20 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SLTabPausedT", - "fill": "$text-tertiary", - "content": "Tạm dừng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "SLTabPausedBadge", - "fill": "$bg-interactive", - "cornerRadius": 6, - "padding": [ - 2, - 8 - ], - "children": [ - { - "type": "text", - "id": "SLTabPausedBadgeT", - "fill": "$text-tertiary", - "content": "1", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SLContent", - "width": "fill_container", - "height": "fill_container", - "padding": 28, - "layout": "vertical", - "gap": 16, - "clip": true, - "children": [ - { - "type": "frame", - "id": "SLCard1", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 16, - "padding": 20, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SLC1Left", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SLC1Av", - "width": 52, - "height": 52, - "fill": "#FF5C0020", - "cornerRadius": 14, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SLC1AvI", - "width": 24, - "height": 24, - "iconFontName": "coffee", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - } - ] - }, - { - "type": "frame", - "id": "SLC1Info", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "frame", - "id": "SLC1NameRow", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SLC1Name", - "fill": "$text-primary", - "content": "Coffee House Q1", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "SLC1Status", - "fill": "#22C55E20", - "cornerRadius": 6, - "padding": [ - 3, - 10 - ], - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SLC1Dot", - "width": 6, - "height": 6, - "fill": "#22C55E", - "cornerRadius": 100 - }, - { - "type": "text", - "id": "SLC1StatusT", - "fill": "#22C55E", - "content": "Hoạt động", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "text", - "id": "SLC1Addr", - "fill": "$text-tertiary", - "content": "Café • 123 Nguyễn Huệ, Q1, TP.HCM", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SLC1Stats", - "gap": 32, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SLC1S1", - "layout": "vertical", - "gap": 2, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SLC1S1V", - "fill": "$text-primary", - "content": "45.2M", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "700" - }, - { - "type": "text", - "id": "SLC1S1L", - "fill": "$text-tertiary", - "content": "Doanh thu", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - }, - { - "type": "frame", - "id": "SLC1S2", - "layout": "vertical", - "gap": 2, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SLC1S2V", - "fill": "$text-primary", - "content": "342", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "700" - }, - { - "type": "text", - "id": "SLC1S2L", - "fill": "$text-tertiary", - "content": "Đơn hàng", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - }, - { - "type": "frame", - "id": "SLC1S3", - "layout": "vertical", - "gap": 2, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SLC1S3V", - "fill": "$text-primary", - "content": "5", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "700" - }, - { - "type": "text", - "id": "SLC1S3L", - "fill": "$text-tertiary", - "content": "Nhân viên", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - }, - { - "type": "frame", - "id": "SLC1S4", - "layout": "vertical", - "gap": 2, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SLC1S4V", - "fill": "$text-primary", - "content": "48", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "700" - }, - { - "type": "text", - "id": "SLC1S4L", - "fill": "$text-tertiary", - "content": "Sản phẩm", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - }, - { - "type": "frame", - "id": "SLC1Actions", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "SLC1Edit", - "width": 36, - "height": 36, - "fill": "$bg-interactive", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SLC1EditI", - "width": 16, - "height": 16, - "iconFontName": "pencil", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - }, - { - "type": "frame", - "id": "SLC1More", - "width": 36, - "height": 36, - "fill": "$bg-interactive", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SLC1MoreI", - "width": 16, - "height": 16, - "iconFontName": "more-horizontal", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SLCard2", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 16, - "padding": 20, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SLC2Left", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SLC2Av", - "width": 52, - "height": 52, - "fill": "#3B82F620", - "cornerRadius": 14, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SLC2AvI", - "width": 24, - "height": 24, - "iconFontName": "utensils", - "iconFontFamily": "lucide", - "fill": "#3B82F6" - } - ] - }, - { - "type": "frame", - "id": "SLC2Info", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "frame", - "id": "SLC2NameRow", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SLC2Name", - "fill": "$text-primary", - "content": "Nhà hàng Phố Q3", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "SLC2Status", - "fill": "#22C55E20", - "cornerRadius": 6, - "padding": [ - 3, - 10 - ], - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SLC2Dot", - "width": 6, - "height": 6, - "fill": "#22C55E", - "cornerRadius": 100 - }, - { - "type": "text", - "id": "SLC2StatusT", - "fill": "#22C55E", - "content": "Hoạt động", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "text", - "id": "SLC2Addr", - "fill": "$text-tertiary", - "content": "Restaurant • 456 Lê Văn Sỹ, Q3, TP.HCM", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SLC2Stats", - "gap": 32, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SLC2S1", - "layout": "vertical", - "gap": 2, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SLC2S1V", - "fill": "$text-primary", - "content": "62.8M", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "700" - }, - { - "type": "text", - "id": "SLC2S1L", - "fill": "$text-tertiary", - "content": "Doanh thu", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - }, - { - "type": "frame", - "id": "SLC2S2", - "layout": "vertical", - "gap": 2, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SLC2S2V", - "fill": "$text-primary", - "content": "185", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "700" - }, - { - "type": "text", - "id": "SLC2S2L", - "fill": "$text-tertiary", - "content": "Đơn hàng", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - }, - { - "type": "frame", - "id": "SLC2S3", - "layout": "vertical", - "gap": 2, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SLC2S3V", - "fill": "$text-primary", - "content": "8", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "700" - }, - { - "type": "text", - "id": "SLC2S3L", - "fill": "$text-tertiary", - "content": "Nhân viên", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - }, - { - "type": "frame", - "id": "SLC2S4", - "layout": "vertical", - "gap": 2, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SLC2S4V", - "fill": "$text-primary", - "content": "72", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "700" - }, - { - "type": "text", - "id": "SLC2S4L", - "fill": "$text-tertiary", - "content": "Sản phẩm", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - }, - { - "type": "frame", - "id": "SLC2Actions", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "SLC2Edit", - "width": 36, - "height": 36, - "fill": "$bg-interactive", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SLC2EditI", - "width": 16, - "height": 16, - "iconFontName": "pencil", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - }, - { - "type": "frame", - "id": "SLC2More", - "width": 36, - "height": 36, - "fill": "$bg-interactive", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SLC2MoreI", - "width": 16, - "height": 16, - "iconFontName": "more-horizontal", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SLCard3", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 16, - "padding": 20, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SLC3Left", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SLC3Av", - "width": 52, - "height": 52, - "fill": "#EC489920", - "cornerRadius": 14, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SLC3AvI", - "width": 24, - "height": 24, - "iconFontName": "sparkles", - "iconFontFamily": "lucide", - "fill": "#EC4899" - } - ] - }, - { - "type": "frame", - "id": "SLC3Info", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "frame", - "id": "SLC3NameRow", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SLC3Name", - "fill": "$text-primary", - "content": "Spa Serene Thảo Điền", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "SLC3Status", - "fill": "#22C55E20", - "cornerRadius": 6, - "padding": [ - 3, - 10 - ], - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SLC3Dot", - "width": 6, - "height": 6, - "fill": "#22C55E", - "cornerRadius": 100 - }, - { - "type": "text", - "id": "SLC3StatusT", - "fill": "#22C55E", - "content": "Hoạt động", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "text", - "id": "SLC3Addr", - "fill": "$text-tertiary", - "content": "Spa • 101 Xuân Thuỷ, Q2, TP.HCM", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SLC3Stats", - "gap": 32, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SLC3S1", - "layout": "vertical", - "gap": 2, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SLC3S1V", - "fill": "$text-primary", - "content": "38.5M", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "700" - }, - { - "type": "text", - "id": "SLC3S1L", - "fill": "$text-tertiary", - "content": "Doanh thu", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - }, - { - "type": "frame", - "id": "SLC3S2", - "layout": "vertical", - "gap": 2, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SLC3S2V", - "fill": "$text-primary", - "content": "96", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "700" - }, - { - "type": "text", - "id": "SLC3S2L", - "fill": "$text-tertiary", - "content": "Lịch hẹn", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - }, - { - "type": "frame", - "id": "SLC3S3", - "layout": "vertical", - "gap": 2, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SLC3S3V", - "fill": "$text-primary", - "content": "6", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "700" - }, - { - "type": "text", - "id": "SLC3S3L", - "fill": "$text-tertiary", - "content": "Nhân viên", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - }, - { - "type": "frame", - "id": "SLC3S4", - "layout": "vertical", - "gap": 2, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SLC3S4V", - "fill": "$text-primary", - "content": "24", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "700" - }, - { - "type": "text", - "id": "SLC3S4L", - "fill": "$text-tertiary", - "content": "Dịch vụ", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - }, - { - "type": "frame", - "id": "SLC3Actions", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "SLC3Edit", - "width": 36, - "height": 36, - "fill": "$bg-interactive", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SLC3EditI", - "width": 16, - "height": 16, - "iconFontName": "pencil", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - }, - { - "type": "frame", - "id": "SLC3More", - "width": 36, - "height": 36, - "fill": "$bg-interactive", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SLC3MoreI", - "width": 16, - "height": 16, - "iconFontName": "more-horizontal", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SLCard4", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 16, - "padding": 20, - "stroke": { - "thickness": 1, - "fill": "#F59E0B40" - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SLC4Left", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SLC4Av", - "width": 52, - "height": 52, - "fill": "#8B5CF620", - "cornerRadius": 14, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SLC4AvI", - "width": 24, - "height": 24, - "iconFontName": "mic", - "iconFontFamily": "lucide", - "fill": "#8B5CF6" - } - ] - }, - { - "type": "frame", - "id": "SLC4Info", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "frame", - "id": "SLC4NameRow", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SLC4Name", - "fill": "$text-primary", - "content": "Karaoke Star Q7", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "SLC4Status", - "fill": "#F59E0B20", - "cornerRadius": 6, - "padding": [ - 3, - 10 - ], - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SLC4Dot", - "width": 6, - "height": 6, - "fill": "#F59E0B", - "cornerRadius": 100 - }, - { - "type": "text", - "id": "SLC4StatusT", - "fill": "#F59E0B", - "content": "Thiết lập", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SLC4Progress", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SLC4Addr", - "fill": "$text-tertiary", - "content": "Karaoke • 789 Nguyễn Thị Thập, Q7", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "SLC4ProgT", - "fill": "#F59E0B", - "content": "• 2/5 bước hoàn thành", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SLC4Right", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SLC4ProgBar", - "width": 120, - "height": 6, - "fill": "$bg-interactive", - "cornerRadius": 100, - "children": [ - { - "type": "frame", - "id": "SLC4ProgFill", - "width": 48, - "height": 6, - "fill": "#F59E0B", - "cornerRadius": 100 - } - ] - }, - { - "type": "frame", - "id": "SLC4CTA", - "fill": "#F59E0B", - "cornerRadius": 10, - "padding": [ - 10, - 16 - ], - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SLC4CTAI", - "width": 16, - "height": 16, - "iconFontName": "settings", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "SLC4CTAT", - "fill": "#FFFFFF", - "content": "Tiếp tục", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SLCard5", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 16, - "padding": 20, - "justifyContent": "space_between", - "alignItems": "center", - "opacity": 0.5, - "children": [ - { - "type": "frame", - "id": "SLC5Left", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SLC5Av", - "width": 52, - "height": 52, - "fill": "#EF444420", - "cornerRadius": 14, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SLC5AvI", - "width": 24, - "height": 24, - "iconFontName": "coffee", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - }, - { - "type": "frame", - "id": "SLC5Info", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "frame", - "id": "SLC5NameRow", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SLC5Name", - "fill": "$text-primary", - "content": "Coffee House Q5 (cũ)", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "SLC5Status", - "fill": "#EF444420", - "cornerRadius": 6, - "padding": [ - 3, - 10 - ], - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SLC5Dot", - "width": 6, - "height": 6, - "fill": "#EF4444", - "cornerRadius": 100 - }, - { - "type": "text", - "id": "SLC5StatusT", - "fill": "#EF4444", - "content": "Tạm dừng", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "text", - "id": "SLC5Addr", - "fill": "$text-tertiary", - "content": "Café • 321 Trần Hưng Đạo, Q5 • Tạm dừng từ 01/01/2026", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SLC5Right", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "SLC5Reopen", - "fill": "#22C55E20", - "stroke": { - "thickness": 1, - "fill": "#22C55E40" - }, - "cornerRadius": 10, - "padding": [ - 10, - 16 - ], - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SLC5ReopenI", - "width": 16, - "height": 16, - "iconFontName": "rotate-ccw", - "iconFontFamily": "lucide", - "fill": "#22C55E" - }, - { - "type": "text", - "id": "SLC5ReopenT", - "fill": "#22C55E", - "content": "Mở lại", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "SLC5More", - "width": 36, - "height": 36, - "fill": "$bg-interactive", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SLC5MoreI", - "width": 16, - "height": 16, - "iconFontName": "more-horizontal", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - } - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-elevated": { - "type": "color", - "value": "#1A1A1D" - }, - "bg-interactive": { - "type": "color", - "value": "#2A2A2E" - }, - "bg-page": { - "type": "color", - "value": "#0A0A0B" - }, - "border-default": { - "type": "color", - "value": "#2A2A2E" - }, - "border-subtle": { - "type": "color", - "value": "#1F1F23" - }, - "orange-primary": { - "type": "color", - "value": "#FF5C00" - }, - "text-primary": { - "type": "color", - "value": "#FFFFFF" - }, - "text-secondary": { - "type": "color", - "value": "#ADADB0" - }, - "text-tertiary": { - "type": "color", - "value": "#8B8B90" - } - } -} \ No newline at end of file diff --git a/pencil-design/src/pages/tPOS/admin/store-settings.pen b/pencil-design/src/pages/tPOS/admin/store-settings.pen deleted file mode 100644 index 047c87f4..00000000 --- a/pencil-design/src/pages/tPOS/admin/store-settings.pen +++ /dev/null @@ -1,1608 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "StoreSettings", - "name": "Admin/StoreSettings", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "$bg-page", - "clip": true, - "children": [ - { - "type": "frame", - "id": "SSSidebar", - "width": 260, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "right" - ] - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "SSSidebarLogo", - "width": "fill_container", - "padding": [ - 24, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SSLogoIcon", - "width": 40, - "height": 40, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SSLogoT", - "fill": "#FFFFFF", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "800" - } - ] - }, - { - "type": "frame", - "id": "SSLogoTG", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "SSLogoN", - "fill": "$text-primary", - "content": "GoodGo Admin", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "text", - "id": "SSLogoS", - "fill": "$text-tertiary", - "content": "Management Console", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SSSidebarNav", - "width": "fill_container", - "height": "fill_container", - "padding": [ - 16, - 12 - ], - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "SSNavL1", - "fill": "$text-tertiary", - "content": "TỔNG QUAN", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 0, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "SSNavDash", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SSNavDashI", - "width": 20, - "height": 20, - "iconFontName": "layout-dashboard", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SSNavDashT", - "fill": "$text-secondary", - "content": "Dashboard", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "SSNavL2", - "fill": "$text-tertiary", - "content": "CỬA HÀNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "SSNavStores", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SSNavStoresI", - "width": 20, - "height": 20, - "iconFontName": "store", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "SSNavStoresT", - "fill": "#FFFFFF", - "content": "Quản lý cửa hàng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ], - "fill": "$orange-primary" - }, - { - "type": "frame", - "id": "SSNavProd", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SSNavProdI", - "width": 18, - "height": 18, - "iconFontName": "package", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SSNavProdT", - "fill": "$text-tertiary", - "content": "Sản phẩm & Menu", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SSNavStaff", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SSNavStaffI", - "width": 18, - "height": 18, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SSNavStaffT", - "fill": "$text-tertiary", - "content": "Nhân sự", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SSNavInv", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SSNavInvI", - "width": 18, - "height": 18, - "iconFontName": "warehouse", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SSNavInvT", - "fill": "$text-tertiary", - "content": "Kho hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SSNavDev", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SSNavDevI", - "width": 18, - "height": 18, - "iconFontName": "monitor", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SSNavDevT", - "fill": "$text-tertiary", - "content": "Thiết bị", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "SSNavL3", - "fill": "$text-tertiary", - "content": "KINH DOANH", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "SSNavCust", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SSNavCustI", - "width": 20, - "height": 20, - "iconFontName": "heart", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SSNavCustT", - "fill": "$text-secondary", - "content": "Khách hàng & Loyalty", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SSNavRpt", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SSNavRptI", - "width": 20, - "height": 20, - "iconFontName": "bar-chart-2", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SSNavRptT", - "fill": "$text-secondary", - "content": "Báo cáo & Phân tích", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SSNavFin", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SSNavFinI", - "width": 20, - "height": 20, - "iconFontName": "wallet", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SSNavFinT", - "fill": "$text-secondary", - "content": "Tài chính", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "SSNavL4", - "fill": "$text-tertiary", - "content": "HỆ THỐNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "SSNavRoles", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SSNavRolesI", - "width": 20, - "height": 20, - "iconFontName": "shield", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SSNavRolesT", - "fill": "$text-secondary", - "content": "Phân quyền", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SSNavSet", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SSNavSetI", - "width": 20, - "height": 20, - "iconFontName": "settings", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SSNavSetT", - "fill": "$text-secondary", - "content": "Cài đặt", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SSSidebarUser", - "width": "fill_container", - "padding": [ - 16, - 16 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SSUserAv", - "width": 36, - "height": 36, - "fill": "#3B82F6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SSUserAvT", - "fill": "#FFFFFF", - "content": "VH", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "SSUserInfo", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "SSUserN", - "fill": "$text-primary", - "content": "Velik Ho", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "SSUserR", - "fill": "$text-tertiary", - "content": "Owner", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SSMain", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "SSHeader", - "width": "fill_container", - "padding": [ - 16, - 32 - ], - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SSHeaderLeft", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "frame", - "id": "SSBreadcrumb", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SSBread1", - "fill": "$text-tertiary", - "content": "Coffee House Q1", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "SSBreadSep", - "fill": "$text-tertiary", - "content": "/", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "SSBread2", - "fill": "$orange-primary", - "content": "Cài đặt", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "SSHeaderTitle", - "fill": "$text-primary", - "content": "Cài đặt cửa hàng", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "SSHeaderRight", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "SSStoreSel", - "height": 40, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SSStoreSelI", - "width": 16, - "height": 16, - "iconFontName": "coffee", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "SSStoreSelT", - "fill": "$text-primary", - "content": "Coffee House Q1", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "icon_font", - "id": "SSStoreSelChev", - "width": 14, - "height": 14, - "iconFontName": "chevron-down", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - }, - { - "type": "frame", - "id": "SSSaveBtn", - "fill": "$orange-primary", - "cornerRadius": 10, - "padding": [ - 10, - 20 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SSSaveI", - "width": 18, - "height": 18, - "iconFontName": "save", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "SSSaveT", - "fill": "#FFFFFF", - "content": "Lưu thay đổi", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SSBody", - "width": "fill_container", - "height": "fill_container", - "children": [ - { - "type": "frame", - "id": "SSTabs", - "width": 220, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "right" - ] - }, - "padding": 12, - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "frame", - "id": "SSTab1", - "width": "fill_container", - "height": 42, - "fill": "#FF5C0015", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SSTab1I", - "width": 18, - "height": 18, - "iconFontName": "building", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "SSTab1T", - "fill": "$orange-primary", - "content": "Thông tin chung", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "SSTab2", - "width": "fill_container", - "height": 42, - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SSTab2I", - "width": 18, - "height": 18, - "iconFontName": "clock", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SSTab2T", - "fill": "$text-secondary", - "content": "Giờ hoạt động", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SSTab3", - "width": "fill_container", - "height": 42, - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SSTab3I", - "width": 18, - "height": 18, - "iconFontName": "credit-card", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SSTab3T", - "fill": "$text-secondary", - "content": "Thanh toán", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SSTab4", - "width": "fill_container", - "height": 42, - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SSTab4I", - "width": 18, - "height": 18, - "iconFontName": "printer", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SSTab4T", - "fill": "$text-secondary", - "content": "Máy in & Thiết bị", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SSTab5", - "width": "fill_container", - "height": 42, - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SSTab5I", - "width": 18, - "height": 18, - "iconFontName": "receipt", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SSTab5T", - "fill": "$text-secondary", - "content": "Thuế & Hóa đơn", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SSTab6", - "width": "fill_container", - "height": 42, - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SSTab6I", - "width": 18, - "height": 18, - "iconFontName": "bell", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SSTab6T", - "fill": "$text-secondary", - "content": "Thông báo", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SSForm", - "width": "fill_container", - "height": "fill_container", - "padding": 32, - "layout": "vertical", - "gap": 28, - "clip": true, - "children": [ - { - "type": "text", - "id": "SSFormTitle", - "fill": "$text-primary", - "content": "Thông tin cửa hàng", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "SSRow1", - "width": "fill_container", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "SSField1", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "SSField1L", - "fill": "$text-secondary", - "content": "Tên cửa hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "SSField1Input", - "width": "fill_container", - "height": 44, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SSField1V", - "fill": "$text-primary", - "content": "Coffee House Q1", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SSField2", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "SSField2L", - "fill": "$text-secondary", - "content": "Loại hình kinh doanh", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "SSField2Input", - "width": "fill_container", - "height": 44, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "alignItems": "center", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "SSField2V", - "fill": "$text-primary", - "content": "Quán cà phê", - "fontFamily": "Roboto", - "fontSize": 14 - }, - { - "type": "icon_font", - "id": "SSField2Chev", - "width": 16, - "height": 16, - "iconFontName": "chevron-down", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SSRow2", - "width": "fill_container", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "SSField3", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "SSField3L", - "fill": "$text-secondary", - "content": "Địa chỉ", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "SSField3Input", - "width": "fill_container", - "height": 44, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SSField3V", - "fill": "$text-primary", - "content": "123 Nguyễn Huệ, P. Bến Nghé, Q.1, TP.HCM", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SSRow3", - "width": "fill_container", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "SSField4", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "SSField4L", - "fill": "$text-secondary", - "content": "Số điện thoại", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "SSField4Input", - "width": "fill_container", - "height": 44, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SSField4V", - "fill": "$text-primary", - "content": "028 1234 5678", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SSField5", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "SSField5L", - "fill": "$text-secondary", - "content": "Email", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "SSField5Input", - "width": "fill_container", - "height": 44, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SSField5V", - "fill": "$text-primary", - "content": "coffeehouse.q1@goodgo.vn", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SSDivider", - "width": "fill_container", - "height": 1, - "fill": "$border-subtle" - }, - { - "type": "text", - "id": "SSFormTitle2", - "fill": "$text-primary", - "content": "Cấu hình POS", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "SSRow4", - "width": "fill_container", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "SSField6", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "SSField6L", - "fill": "$text-secondary", - "content": "Đơn vị tiền tệ", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "SSField6Input", - "width": "fill_container", - "height": 44, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "alignItems": "center", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "SSField6V", - "fill": "$text-primary", - "content": "VND (₫)", - "fontFamily": "Roboto", - "fontSize": 14 - }, - { - "type": "icon_font", - "id": "SSField6Chev", - "width": 16, - "height": 16, - "iconFontName": "chevron-down", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SSField7", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "SSField7L", - "fill": "$text-secondary", - "content": "Thuế mặc định (%)", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "SSField7Input", - "width": "fill_container", - "height": 44, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SSField7V", - "fill": "$text-primary", - "content": "10", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SSToggles", - "width": "fill_container", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "SSToggle1", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SSToggle1L", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "SSToggle1T", - "fill": "$text-primary", - "content": "In hóa đơn tự động", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "text", - "id": "SSToggle1S", - "fill": "$text-tertiary", - "content": "Tự động in hóa đơn sau khi thanh toán", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - }, - { - "type": "frame", - "id": "SSToggle1Sw", - "width": 44, - "height": 24, - "fill": "$orange-primary", - "cornerRadius": 100, - "padding": [ - 2, - 2 - ], - "justifyContent": "flex_end", - "children": [ - { - "type": "frame", - "id": "SSToggle1Dot", - "width": 20, - "height": 20, - "fill": "#FFFFFF", - "cornerRadius": 100 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SSToggle2", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SSToggle2L", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "SSToggle2T", - "fill": "$text-primary", - "content": "Yêu cầu xác nhận trước khi xóa", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "text", - "id": "SSToggle2S", - "fill": "$text-tertiary", - "content": "Hiển thị hộp thoại xác nhận khi xóa đơn hàng", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - }, - { - "type": "frame", - "id": "SSToggle2Sw", - "width": 44, - "height": 24, - "fill": "$orange-primary", - "cornerRadius": 100, - "padding": [ - 2, - 2 - ], - "justifyContent": "flex_end", - "children": [ - { - "type": "frame", - "id": "SSToggle2Dot", - "width": 20, - "height": 20, - "fill": "#FFFFFF", - "cornerRadius": 100 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SSToggle3", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SSToggle3L", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "SSToggle3T", - "fill": "$text-primary", - "content": "Chế độ bàn phục vụ", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "text", - "id": "SSToggle3S", - "fill": "$text-tertiary", - "content": "Bật chế độ quản lý bàn cho nhà hàng", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - }, - { - "type": "frame", - "id": "SSToggle3Sw", - "width": 44, - "height": 24, - "fill": "$bg-interactive", - "cornerRadius": 100, - "padding": [ - 2, - 2 - ], - "children": [ - { - "type": "frame", - "id": "SSToggle3Dot", - "width": 20, - "height": 20, - "fill": "$text-tertiary", - "cornerRadius": 100 - } - ] - } - ] - } - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "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/admin/supplier-management.pen b/pencil-design/src/pages/tPOS/admin/supplier-management.pen deleted file mode 100644 index c6e84a60..00000000 --- a/pencil-design/src/pages/tPOS/admin/supplier-management.pen +++ /dev/null @@ -1,2499 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "SupplierMgmt", - "name": "Admin/SupplierManagement", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "$bg-page", - "clip": true, - "children": [ - { - "type": "frame", - "id": "SMSidebar", - "width": 260, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "right" - ] - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "SMSidebarLogo", - "width": "fill_container", - "padding": [ - 24, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SMLogoIcon", - "width": 40, - "height": 40, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SMLogoT", - "fill": "#FFFFFF", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "800" - } - ] - }, - { - "type": "frame", - "id": "SMLogoTG", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "SMLogoN", - "fill": "$text-primary", - "content": "GoodGo Admin", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "text", - "id": "SMLogoS", - "fill": "$text-tertiary", - "content": "Management Console", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SMSidebarNav", - "width": "fill_container", - "height": "fill_container", - "padding": [ - 16, - 12 - ], - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "SMNavL1", - "fill": "$text-tertiary", - "content": "TỔNG QUAN", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 0, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "SMNavDash", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SMNavDashI", - "width": 20, - "height": 20, - "iconFontName": "layout-dashboard", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SMNavDashT", - "fill": "$text-secondary", - "content": "Dashboard", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "SMNavL2", - "fill": "$text-tertiary", - "content": "CỬA HÀNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "SMNavStores", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "SMNavStoresLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SMNavStoresI", - "width": 20, - "height": 20, - "iconFontName": "store", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SMNavStoresT", - "fill": "$text-secondary", - "content": "Quản lý cửa hàng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SMNavStoresBdg", - "width": 22, - "height": 22, - "fill": "$bg-interactive", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SMNavStoresBdgT", - "fill": "$text-tertiary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SMNavProd", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SMNavProdI", - "width": 18, - "height": 18, - "iconFontName": "package", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SMNavProdT", - "fill": "$text-tertiary", - "content": "Sản phẩm & Menu", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SMNavStaff", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SMNavStaffI", - "width": 18, - "height": 18, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SMNavStaffT", - "fill": "$text-tertiary", - "content": "Nhân sự", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SMNavInv", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SMNavInvI", - "width": 18, - "height": 18, - "iconFontName": "warehouse", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "SMNavInvT", - "fill": "#FFFFFF", - "content": "Kho hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ], - "fill": "$orange-primary" - }, - { - "type": "frame", - "id": "SMNavDev", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SMNavDevI", - "width": 18, - "height": 18, - "iconFontName": "monitor", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SMNavDevT", - "fill": "$text-tertiary", - "content": "Thiết bị", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "SMNavL3", - "fill": "$text-tertiary", - "content": "KINH DOANH", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "SMNavCust", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SMNavCustI", - "width": 20, - "height": 20, - "iconFontName": "heart", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SMNavCustT", - "fill": "$text-secondary", - "content": "Khách hàng & Loyalty", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SMNavRpt", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SMNavRptI", - "width": 20, - "height": 20, - "iconFontName": "bar-chart-2", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SMNavRptT", - "fill": "$text-secondary", - "content": "Báo cáo & Phân tích", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SMNavFin", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SMNavFinI", - "width": 20, - "height": 20, - "iconFontName": "wallet", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SMNavFinT", - "fill": "$text-secondary", - "content": "Tài chính", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "SMNavL4", - "fill": "$text-tertiary", - "content": "HỆ THỐNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "SMNavRoles", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SMNavRolesI", - "width": 20, - "height": 20, - "iconFontName": "shield", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SMNavRolesT", - "fill": "$text-secondary", - "content": "Phân quyền", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SMNavSet", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SMNavSetI", - "width": 20, - "height": 20, - "iconFontName": "settings", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SMNavSetT", - "fill": "$text-secondary", - "content": "Cài đặt", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SMSidebarUser", - "width": "fill_container", - "padding": [ - 16, - 16 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SMUserAv", - "width": 36, - "height": 36, - "fill": "#3B82F6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SMUserAvT", - "fill": "#FFFFFF", - "content": "VH", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "SMUserInfo", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "SMUserN", - "fill": "$text-primary", - "content": "Velik Ho", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "SMUserR", - "fill": "$text-tertiary", - "content": "Owner", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SMMain", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "SMHeader", - "width": "fill_container", - "padding": [ - 16, - 32 - ], - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SMHeaderLeft", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "frame", - "id": "SMBreadcrumb", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SMBread1", - "fill": "$text-tertiary", - "content": "Kho hàng", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "SMBreadSep", - "fill": "$text-tertiary", - "content": "/", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "SMBread2", - "fill": "$orange-primary", - "content": "Nhà cung cấp", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "SMHeaderTitle", - "fill": "$text-primary", - "content": "Nhà cung cấp", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "SMHeaderRight", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SMSearchBox", - "width": 220, - "height": 40, - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 0, - 14 - ], - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SMSearchI", - "width": 18, - "height": 18, - "iconFontName": "search", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SMSearchP", - "fill": "$text-tertiary", - "content": "Tìm nhà cung cấp...", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "id": "SMAddBtn", - "fill": "$orange-primary", - "cornerRadius": 10, - "padding": [ - 10, - 16 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SMAddI", - "width": 18, - "height": 18, - "iconFontName": "plus", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "SMAddT", - "fill": "#FFFFFF", - "content": "Thêm NCC", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SMContent", - "width": "fill_container", - "height": "fill_container", - "padding": 24, - "layout": "vertical", - "gap": 20, - "clip": true, - "children": [ - { - "type": "frame", - "id": "SMStats", - "width": "fill_container", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "SMStat1", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": [ - 16, - 20 - ], - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "SMStat1L", - "fill": "$text-tertiary", - "content": "Tổng NCC", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "SMStat1V", - "fill": "$text-primary", - "content": "6", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "SMStat2", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": [ - 16, - 20 - ], - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "SMStat2L", - "fill": "$text-tertiary", - "content": "Đang hoạt động", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "SMStat2V", - "fill": "#22C55E", - "content": "5", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "SMStat3", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": [ - 16, - 20 - ], - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "SMStat3L", - "fill": "$text-tertiary", - "content": "PO tháng này", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "id": "SMStat3V", - "fill": "$orange-primary", - "content": "12", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "700" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SMGrid", - "width": "fill_container", - "height": "fill_container", - "gap": 16, - "wrap": true, - "children": [ - { - "type": "frame", - "id": "SMCard1", - "width": 340, - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 20, - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "SMC1Top", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SMC1AvatarWrap", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SMC1Av", - "width": 42, - "height": 42, - "fill": "#7C3AED", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SMC1AvT", - "fill": "#FFFFFF", - "content": "LV", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "SMC1NameWrap", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "SMC1Name", - "fill": "$text-primary", - "content": "Lavazza Vietnam", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - }, - { - "type": "text", - "id": "SMC1Cat", - "fill": "$text-tertiary", - "content": "Cà phê & Nguyên liệu", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SMC1Status", - "fill": "#22C55E20", - "cornerRadius": 6, - "padding": [ - 4, - 8 - ], - "children": [ - { - "type": "text", - "id": "SMC1StatusT", - "fill": "#22C55E", - "content": "Hoạt động", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SMC1Contact", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "frame", - "id": "SMC1Phone", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SMC1PhoneI", - "width": 14, - "height": 14, - "iconFontName": "phone", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SMC1PhoneT", - "fill": "$text-secondary", - "content": "028 3823 4567", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - }, - { - "type": "frame", - "id": "SMC1Email", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SMC1EmailI", - "width": 14, - "height": 14, - "iconFontName": "mail", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SMC1EmailT", - "fill": "$text-secondary", - "content": "order@lavazza.vn", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SMC1Bottom", - "width": "fill_container", - "padding": [ - 12, - 0, - 0, - 0 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SMC1POs", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "SMC1POsL", - "fill": "$text-tertiary", - "content": "Tổng PO", - "fontFamily": "Roboto", - "fontSize": 10 - }, - { - "type": "text", - "id": "SMC1POsV", - "fill": "$text-primary", - "content": "24", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "SMC1Stars", - "gap": 2, - "children": [ - { - "type": "icon_font", - "id": "SMC1S1", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - }, - { - "type": "icon_font", - "id": "SMC1S2", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - }, - { - "type": "icon_font", - "id": "SMC1S3", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - }, - { - "type": "icon_font", - "id": "SMC1S4", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - }, - { - "type": "icon_font", - "id": "SMC1S5", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SMCard2", - "width": 340, - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 20, - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "SMC2Top", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SMC2AvatarWrap", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SMC2Av", - "width": 42, - "height": 42, - "fill": "#22C55E", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SMC2AvT", - "fill": "#FFFFFF", - "content": "ML", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "SMC2NameWrap", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "SMC2Name", - "fill": "$text-primary", - "content": "Milo Vietnam", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - }, - { - "type": "text", - "id": "SMC2Cat", - "fill": "$text-tertiary", - "content": "Đồ uống & Bột", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SMC2Status", - "fill": "#22C55E20", - "cornerRadius": 6, - "padding": [ - 4, - 8 - ], - "children": [ - { - "type": "text", - "id": "SMC2StatusT", - "fill": "#22C55E", - "content": "Hoạt động", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SMC2Contact", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "frame", - "id": "SMC2Phone", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SMC2PhoneI", - "width": 14, - "height": 14, - "iconFontName": "phone", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SMC2PhoneT", - "fill": "$text-secondary", - "content": "028 3912 8888", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - }, - { - "type": "frame", - "id": "SMC2Email", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SMC2EmailI", - "width": 14, - "height": 14, - "iconFontName": "mail", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SMC2EmailT", - "fill": "$text-secondary", - "content": "sales@milovn.com", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SMC2Bottom", - "width": "fill_container", - "padding": [ - 12, - 0, - 0, - 0 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SMC2POs", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "SMC2POsL", - "fill": "$text-tertiary", - "content": "Tổng PO", - "fontFamily": "Roboto", - "fontSize": 10 - }, - { - "type": "text", - "id": "SMC2POsV", - "fill": "$text-primary", - "content": "18", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "SMC2Stars", - "gap": 2, - "children": [ - { - "type": "icon_font", - "id": "SMC2S1", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - }, - { - "type": "icon_font", - "id": "SMC2S2", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - }, - { - "type": "icon_font", - "id": "SMC2S3", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - }, - { - "type": "icon_font", - "id": "SMC2S4", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - }, - { - "type": "icon_font", - "id": "SMC2S5", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SMCard3", - "width": 340, - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 20, - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "SMC3Top", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SMC3AvatarWrap", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SMC3Av", - "width": 42, - "height": 42, - "fill": "#3B82F6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SMC3AvT", - "fill": "#FFFFFF", - "content": "VM", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "SMC3NameWrap", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "SMC3Name", - "fill": "$text-primary", - "content": "Vinamilk", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - }, - { - "type": "text", - "id": "SMC3Cat", - "fill": "$text-tertiary", - "content": "Sữa & Sản phẩm từ sữa", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SMC3Status", - "fill": "#22C55E20", - "cornerRadius": 6, - "padding": [ - 4, - 8 - ], - "children": [ - { - "type": "text", - "id": "SMC3StatusT", - "fill": "#22C55E", - "content": "Hoạt động", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SMC3Contact", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "frame", - "id": "SMC3Phone", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SMC3PhoneI", - "width": 14, - "height": 14, - "iconFontName": "phone", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SMC3PhoneT", - "fill": "$text-secondary", - "content": "028 3845 1234", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - }, - { - "type": "frame", - "id": "SMC3Email", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SMC3EmailI", - "width": 14, - "height": 14, - "iconFontName": "mail", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SMC3EmailT", - "fill": "$text-secondary", - "content": "b2b@vinamilk.com.vn", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SMC3Bottom", - "width": "fill_container", - "padding": [ - 12, - 0, - 0, - 0 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SMC3POs", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "SMC3POsL", - "fill": "$text-tertiary", - "content": "Tổng PO", - "fontFamily": "Roboto", - "fontSize": 10 - }, - { - "type": "text", - "id": "SMC3POsV", - "fill": "$text-primary", - "content": "31", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "SMC3Stars", - "gap": 2, - "children": [ - { - "type": "icon_font", - "id": "SMC3S1", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - }, - { - "type": "icon_font", - "id": "SMC3S2", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - }, - { - "type": "icon_font", - "id": "SMC3S3", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - }, - { - "type": "icon_font", - "id": "SMC3S4", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "icon_font", - "id": "SMC3S5", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SMCard4", - "width": 340, - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 20, - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "SMC4Top", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SMC4AvatarWrap", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SMC4Av", - "width": 42, - "height": 42, - "fill": "#EC4899", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SMC4AvT", - "fill": "#FFFFFF", - "content": "FG", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "SMC4NameWrap", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "SMC4Name", - "fill": "$text-primary", - "content": "Fresh Garden", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - }, - { - "type": "text", - "id": "SMC4Cat", - "fill": "$text-tertiary", - "content": "Rau củ & Trái cây tươi", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SMC4Status", - "fill": "#22C55E20", - "cornerRadius": 6, - "padding": [ - 4, - 8 - ], - "children": [ - { - "type": "text", - "id": "SMC4StatusT", - "fill": "#22C55E", - "content": "Hoạt động", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SMC4Contact", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "frame", - "id": "SMC4Phone", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SMC4PhoneI", - "width": 14, - "height": 14, - "iconFontName": "phone", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SMC4PhoneT", - "fill": "$text-secondary", - "content": "028 3756 9012", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - }, - { - "type": "frame", - "id": "SMC4Email", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SMC4EmailI", - "width": 14, - "height": 14, - "iconFontName": "mail", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SMC4EmailT", - "fill": "$text-secondary", - "content": "info@freshgarden.vn", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SMC4Bottom", - "width": "fill_container", - "padding": [ - 12, - 0, - 0, - 0 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SMC4POs", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "SMC4POsL", - "fill": "$text-tertiary", - "content": "Tổng PO", - "fontFamily": "Roboto", - "fontSize": 10 - }, - { - "type": "text", - "id": "SMC4POsV", - "fill": "$text-primary", - "content": "15", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "SMC4Stars", - "gap": 2, - "children": [ - { - "type": "icon_font", - "id": "SMC4S1", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - }, - { - "type": "icon_font", - "id": "SMC4S2", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - }, - { - "type": "icon_font", - "id": "SMC4S3", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - }, - { - "type": "icon_font", - "id": "SMC4S4", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - }, - { - "type": "icon_font", - "id": "SMC4S5", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SMCard5", - "width": 340, - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 20, - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "SMC5Top", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SMC5AvatarWrap", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SMC5Av", - "width": 42, - "height": 42, - "fill": "#F59E0B", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SMC5AvT", - "fill": "#FFFFFF", - "content": "AB", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "SMC5NameWrap", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "SMC5Name", - "fill": "$text-primary", - "content": "ABC Foods", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - }, - { - "type": "text", - "id": "SMC5Cat", - "fill": "$text-tertiary", - "content": "Gia vị & Nước chấm", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SMC5Status", - "fill": "#22C55E20", - "cornerRadius": 6, - "padding": [ - 4, - 8 - ], - "children": [ - { - "type": "text", - "id": "SMC5StatusT", - "fill": "#22C55E", - "content": "Hoạt động", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SMC5Contact", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "frame", - "id": "SMC5Phone", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SMC5PhoneI", - "width": 14, - "height": 14, - "iconFontName": "phone", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SMC5PhoneT", - "fill": "$text-secondary", - "content": "028 3678 5555", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - }, - { - "type": "frame", - "id": "SMC5Email", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SMC5EmailI", - "width": 14, - "height": 14, - "iconFontName": "mail", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SMC5EmailT", - "fill": "$text-secondary", - "content": "sales@abcfoods.vn", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SMC5Bottom", - "width": "fill_container", - "padding": [ - 12, - 0, - 0, - 0 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SMC5POs", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "SMC5POsL", - "fill": "$text-tertiary", - "content": "Tổng PO", - "fontFamily": "Roboto", - "fontSize": 10 - }, - { - "type": "text", - "id": "SMC5POsV", - "fill": "$text-primary", - "content": "9", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "SMC5Stars", - "gap": 2, - "children": [ - { - "type": "icon_font", - "id": "SMC5S1", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - }, - { - "type": "icon_font", - "id": "SMC5S2", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - }, - { - "type": "icon_font", - "id": "SMC5S3", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - }, - { - "type": "icon_font", - "id": "SMC5S4", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "icon_font", - "id": "SMC5S5", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SMCard6", - "width": 340, - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 20, - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "SMC6Top", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SMC6AvatarWrap", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SMC6Av", - "width": 42, - "height": 42, - "fill": "#EF4444", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SMC6AvT", - "fill": "#FFFFFF", - "content": "BH", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "SMC6NameWrap", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "SMC6Name", - "fill": "$text-primary", - "content": "Đường Biên Hòa", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - }, - { - "type": "text", - "id": "SMC6Cat", - "fill": "$text-tertiary", - "content": "Đường & Phụ gia", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SMC6Status", - "fill": "#8B8B9020", - "cornerRadius": 6, - "padding": [ - 4, - 8 - ], - "children": [ - { - "type": "text", - "id": "SMC6StatusT", - "fill": "$text-tertiary", - "content": "Tạm ngưng", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SMC6Contact", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "frame", - "id": "SMC6Phone", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SMC6PhoneI", - "width": 14, - "height": 14, - "iconFontName": "phone", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SMC6PhoneT", - "fill": "$text-secondary", - "content": "0251 382 1234", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - }, - { - "type": "frame", - "id": "SMC6Email", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SMC6EmailI", - "width": 14, - "height": 14, - "iconFontName": "mail", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SMC6EmailT", - "fill": "$text-secondary", - "content": "order@bhs.com.vn", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SMC6Bottom", - "width": "fill_container", - "padding": [ - 12, - 0, - 0, - 0 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SMC6POs", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "SMC6POsL", - "fill": "$text-tertiary", - "content": "Tổng PO", - "fontFamily": "Roboto", - "fontSize": 10 - }, - { - "type": "text", - "id": "SMC6POsV", - "fill": "$text-primary", - "content": "7", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "SMC6Stars", - "gap": 2, - "children": [ - { - "type": "icon_font", - "id": "SMC6S1", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - }, - { - "type": "icon_font", - "id": "SMC6S2", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - }, - { - "type": "icon_font", - "id": "SMC6S3", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - }, - { - "type": "icon_font", - "id": "SMC6S4", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "icon_font", - "id": "SMC6S5", - "width": 14, - "height": 14, - "iconFontName": "star", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - } - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "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/admin/tax-configuration.pen b/pencil-design/src/pages/tPOS/admin/tax-configuration.pen deleted file mode 100644 index 38c5e88c..00000000 --- a/pencil-design/src/pages/tPOS/admin/tax-configuration.pen +++ /dev/null @@ -1,1522 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "TaxConfiguration", - "name": "Admin/TaxConfiguration", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "$bg-page", - "clip": true, - "children": [ - { - "type": "frame", - "id": "TCSidebar", - "width": 260, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "right" - ] - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "TCSidebarLogo", - "width": "fill_container", - "padding": [ - 24, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "TCLogoIcon", - "width": 40, - "height": 40, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "TCLogoT", - "fill": "#FFFFFF", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "800" - } - ] - }, - { - "type": "frame", - "id": "TCLogoTG", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "TCLogoN", - "fill": "$text-primary", - "content": "GoodGo Admin", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "text", - "id": "TCLogoS", - "fill": "$text-tertiary", - "content": "Management Console", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - }, - { - "type": "frame", - "id": "TCSidebarNav", - "width": "fill_container", - "height": "fill_container", - "padding": [ - 16, - 12 - ], - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "TCNavL1", - "fill": "$text-tertiary", - "content": "TỔNG QUAN", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 0, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "TCNavDash", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "TCNavDashI", - "width": 20, - "height": 20, - "iconFontName": "layout-dashboard", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "TCNavDashT", - "fill": "$text-secondary", - "content": "Dashboard", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "TCNavL2", - "fill": "$text-tertiary", - "content": "CỬA HÀNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "TCNavStores", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "TCNavStoresLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "TCNavStoresI", - "width": 20, - "height": 20, - "iconFontName": "store", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "TCNavStoresT", - "fill": "$text-secondary", - "content": "Quản lý cửa hàng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "TCNavStoresBdg", - "width": 22, - "height": 22, - "fill": "$bg-interactive", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "TCNavStoresBdgT", - "fill": "$text-tertiary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "TCNavProd", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "TCNavProdI", - "width": 18, - "height": 18, - "iconFontName": "package", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "TCNavProdT", - "fill": "$text-tertiary", - "content": "Sản phẩm & Menu", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "TCNavStaff", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "TCNavStaffI", - "width": 18, - "height": 18, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "TCNavStaffT", - "fill": "$text-tertiary", - "content": "Nhân sự", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "TCNavInv", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "TCNavInvI", - "width": 18, - "height": 18, - "iconFontName": "warehouse", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "TCNavInvT", - "fill": "$text-tertiary", - "content": "Kho hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "TCNavDev", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12, - 0, - 36 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "TCNavDevI", - "width": 18, - "height": 18, - "iconFontName": "monitor", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "TCNavDevT", - "fill": "$text-tertiary", - "content": "Thiết bị", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "TCNavL3", - "fill": "$text-tertiary", - "content": "KINH DOANH", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "TCNavCust", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "TCNavCustI", - "width": 20, - "height": 20, - "iconFontName": "heart", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "TCNavCustT", - "fill": "$text-secondary", - "content": "Khách hàng & Loyalty", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "TCNavRpt", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "TCNavRptI", - "width": 20, - "height": 20, - "iconFontName": "bar-chart-2", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "TCNavRptT", - "fill": "$text-secondary", - "content": "Báo cáo & Phân tích", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "TCNavFin", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "TCNavFinI", - "width": 20, - "height": 20, - "iconFontName": "wallet", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "TCNavFinT", - "fill": "#FFFFFF", - "content": "Tài chính", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ], - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "TCNavL4", - "fill": "$text-tertiary", - "content": "HỆ THỐNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700", - "padding": [ - 16, - 12, - 8, - 12 - ] - }, - { - "type": "frame", - "id": "TCNavRoles", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "TCNavRolesI", - "width": 20, - "height": 20, - "iconFontName": "shield", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "TCNavRolesT", - "fill": "$text-secondary", - "content": "Phân quyền", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "TCNavSet", - "width": "fill_container", - "height": 44, - "cornerRadius": 10, - "padding": [ - 0, - 12 - ], - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "TCNavSetI", - "width": 20, - "height": 20, - "iconFontName": "settings", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "TCNavSetT", - "fill": "$text-secondary", - "content": "Cài đặt", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "TCSidebarUser", - "width": "fill_container", - "padding": [ - 16, - 16 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "top" - ] - }, - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "TCUserAv", - "width": 36, - "height": 36, - "fill": "#3B82F6", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "TCUserAvT", - "fill": "#FFFFFF", - "content": "VH", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "TCUserInfo", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "TCUserN", - "fill": "$text-primary", - "content": "Velik Ho", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "TCUserR", - "fill": "$text-tertiary", - "content": "Owner", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "TCMain", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "TCHeader", - "width": "fill_container", - "padding": [ - 16, - 32 - ], - "fill": "$bg-elevated", - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "TCHeaderLeft", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "TCHeaderTitle", - "fill": "$text-primary", - "content": "Cài đặt thuế", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "700" - }, - { - "type": "text", - "id": "TCHeaderSub", - "fill": "$text-tertiary", - "content": "Cấu hình thuế và phí dịch vụ áp dụng cho sản phẩm", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "id": "TCHeaderRight", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "TCSaveBtn", - "fill": "$orange-primary", - "cornerRadius": 10, - "padding": [ - 10, - 16 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "TCSaveI", - "width": 18, - "height": 18, - "iconFontName": "save", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "TCSaveT", - "fill": "#FFFFFF", - "content": "Lưu thay đổi", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "TCContent", - "width": "fill_container", - "height": "fill_container", - "padding": 28, - "layout": "vertical", - "gap": 24, - "clip": true, - "children": [ - { - "type": "text", - "id": "TCProfilesTitle", - "fill": "$text-primary", - "content": "Hồ sơ thuế", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "TCProfileRow", - "width": "fill_container", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "TCProf1", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 24, - "layout": "vertical", - "gap": 12, - "stroke": { - "thickness": 2, - "fill": "$orange-primary" - }, - "children": [ - { - "type": "frame", - "id": "TCProf1Top", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "TCProf1N", - "fill": "$text-primary", - "content": "VAT", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "TCProf1Badge", - "fill": "#22C55E20", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "TCProf1BT", - "fill": "#22C55E", - "content": "Mặc định", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "text", - "id": "TCProf1Rate", - "fill": "$orange-primary", - "content": "10%", - "fontFamily": "Roboto", - "fontSize": 32, - "fontWeight": "700" - }, - { - "type": "text", - "id": "TCProf1Desc", - "fill": "$text-tertiary", - "content": "Thuế giá trị gia tăng theo quy định", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - }, - { - "type": "frame", - "id": "TCProf2", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 24, - "layout": "vertical", - "gap": 12, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "children": [ - { - "type": "frame", - "id": "TCProf2Top", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "TCProf2N", - "fill": "$text-primary", - "content": "Phí dịch vụ", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "TCProf2Rate", - "fill": "#3B82F6", - "content": "5%", - "fontFamily": "Roboto", - "fontSize": 32, - "fontWeight": "700" - }, - { - "type": "text", - "id": "TCProf2Desc", - "fill": "$text-tertiary", - "content": "Phí dịch vụ phục vụ tại bàn", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - }, - { - "type": "frame", - "id": "TCProf3", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 24, - "layout": "vertical", - "gap": 12, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "children": [ - { - "type": "frame", - "id": "TCProf3Top", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "TCProf3N", - "fill": "$text-primary", - "content": "Không thuế", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "id": "TCProf3Rate", - "fill": "$text-tertiary", - "content": "0%", - "fontFamily": "Roboto", - "fontSize": 32, - "fontWeight": "700" - }, - { - "type": "text", - "id": "TCProf3Desc", - "fill": "$text-tertiary", - "content": "Miễn thuế cho sản phẩm nội bộ", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - }, - { - "type": "frame", - "id": "TCDefaultSel", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": [ - 16, - 24 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "TCDefLeft", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "TCDefLabel", - "fill": "$text-primary", - "content": "Thuế mặc định cho sản phẩm mới", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "text", - "id": "TCDefDesc", - "fill": "$text-tertiary", - "content": "Tự động áp dụng khi tạo sản phẩm mới", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - }, - { - "type": "frame", - "id": "TCDefSelect", - "fill": "$bg-interactive", - "cornerRadius": 10, - "padding": [ - 10, - 16 - ], - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "TCDefVal", - "fill": "$text-primary", - "content": "VAT 10%", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "icon_font", - "id": "TCDefChev", - "width": 16, - "height": 16, - "iconFontName": "chevron-down", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "TCRulesTable", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "TCRulesHead", - "width": "fill_container", - "padding": [ - 16, - 24 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "TCRulesTitle", - "fill": "$text-primary", - "content": "Quy tắc thuế theo nhóm sản phẩm", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "TCAddRule", - "fill": "$bg-interactive", - "cornerRadius": 8, - "padding": [ - 8, - 14 - ], - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "TCAddRuleI", - "width": 16, - "height": 16, - "iconFontName": "plus", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "TCAddRuleT", - "fill": "$text-secondary", - "content": "Thêm quy tắc", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "TCRHdr", - "width": "fill_container", - "padding": [ - 12, - 24 - ], - "fill": "$bg-interactive", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "TCRH1", - "fill": "$text-tertiary", - "content": "Nhóm sản phẩm", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600", - "width": "fill_container" - }, - { - "type": "text", - "id": "TCRH2", - "fill": "$text-tertiary", - "content": "Hồ sơ thuế", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600", - "width": 160 - }, - { - "type": "text", - "id": "TCRH3", - "fill": "$text-tertiary", - "content": "Thuế suất", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600", - "width": 100 - }, - { - "type": "text", - "id": "TCRH4", - "fill": "$text-tertiary", - "content": "Ngày áp dụng", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600", - "width": 120 - }, - { - "type": "text", - "id": "TCRH5", - "fill": "$text-tertiary", - "content": "Trạng thái", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600", - "width": 100 - } - ] - }, - { - "type": "frame", - "id": "TCRR1", - "width": "fill_container", - "padding": [ - 14, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "TCR1N", - "fill": "$text-primary", - "content": "Đồ uống", - "fontFamily": "Roboto", - "fontSize": 13, - "width": "fill_container" - }, - { - "type": "text", - "id": "TCR1P", - "fill": "$text-secondary", - "content": "VAT", - "fontFamily": "Roboto", - "fontSize": 13, - "width": 160 - }, - { - "type": "text", - "id": "TCR1R", - "fill": "$orange-primary", - "content": "10%", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600", - "width": 100 - }, - { - "type": "text", - "id": "TCR1D", - "fill": "$text-secondary", - "content": "01/01/2026", - "fontFamily": "Roboto", - "fontSize": 13, - "width": 120 - }, - { - "type": "frame", - "id": "TCR1Status", - "width": 100, - "children": [ - { - "type": "frame", - "id": "TCR1SBG", - "fill": "#22C55E20", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "TCR1ST", - "fill": "#22C55E", - "content": "Hoạt động", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "TCRR2", - "width": "fill_container", - "padding": [ - 14, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "TCR2N", - "fill": "$text-primary", - "content": "Món ăn chính", - "fontFamily": "Roboto", - "fontSize": 13, - "width": "fill_container" - }, - { - "type": "text", - "id": "TCR2P", - "fill": "$text-secondary", - "content": "VAT + Phí DV", - "fontFamily": "Roboto", - "fontSize": 13, - "width": 160 - }, - { - "type": "text", - "id": "TCR2R", - "fill": "$orange-primary", - "content": "15%", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600", - "width": 100 - }, - { - "type": "text", - "id": "TCR2D", - "fill": "$text-secondary", - "content": "01/01/2026", - "fontFamily": "Roboto", - "fontSize": 13, - "width": 120 - }, - { - "type": "frame", - "id": "TCR2Status", - "width": 100, - "children": [ - { - "type": "frame", - "id": "TCR2SBG", - "fill": "#22C55E20", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "TCR2ST", - "fill": "#22C55E", - "content": "Hoạt động", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "TCRR3", - "width": "fill_container", - "padding": [ - 14, - 24 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "TCR3N", - "fill": "$text-primary", - "content": "Tráng miệng", - "fontFamily": "Roboto", - "fontSize": 13, - "width": "fill_container" - }, - { - "type": "text", - "id": "TCR3P", - "fill": "$text-secondary", - "content": "VAT", - "fontFamily": "Roboto", - "fontSize": 13, - "width": 160 - }, - { - "type": "text", - "id": "TCR3R", - "fill": "$orange-primary", - "content": "10%", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600", - "width": 100 - }, - { - "type": "text", - "id": "TCR3D", - "fill": "$text-secondary", - "content": "15/01/2026", - "fontFamily": "Roboto", - "fontSize": 13, - "width": 120 - }, - { - "type": "frame", - "id": "TCR3Status", - "width": 100, - "children": [ - { - "type": "frame", - "id": "TCR3SBG", - "fill": "#22C55E20", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "TCR3ST", - "fill": "#22C55E", - "content": "Hoạt động", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "TCRR4", - "width": "fill_container", - "padding": [ - 14, - 24 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "TCR4N", - "fill": "$text-primary", - "content": "Combo / Set", - "fontFamily": "Roboto", - "fontSize": 13, - "width": "fill_container" - }, - { - "type": "text", - "id": "TCR4P", - "fill": "$text-secondary", - "content": "Không thuế", - "fontFamily": "Roboto", - "fontSize": 13, - "width": 160 - }, - { - "type": "text", - "id": "TCR4R", - "fill": "$text-tertiary", - "content": "0%", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600", - "width": 100 - }, - { - "type": "text", - "id": "TCR4D", - "fill": "$text-secondary", - "content": "01/02/2026", - "fontFamily": "Roboto", - "fontSize": 13, - "width": 120 - }, - { - "type": "frame", - "id": "TCR4Status", - "width": 100, - "children": [ - { - "type": "frame", - "id": "TCR4SBG", - "fill": "#F59E0B20", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "TCR4ST", - "fill": "#F59E0B", - "content": "Tạm dừng", - "fontFamily": "Roboto", - "fontSize": 11, - "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/auth/forgot-password/desktop.pen b/pencil-design/src/pages/tPOS/auth/forgot-password/desktop.pen deleted file mode 100644 index ee3aabbf..00000000 --- a/pencil-design/src/pages/tPOS/auth/forgot-password/desktop.pen +++ /dev/null @@ -1,372 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "ForgotPasswordPage", - "name": "Forgot Password Page - Desktop", - "width": 1440, - "height": 900, - "fill": "$bg-page", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "forgotCard", - "width": 440, - "fill": "$bg-surface", - "cornerRadius": 24, - "stroke": { "thickness": 1, "fill": "$border-subtle" }, - "layout": "vertical", - "gap": 32, - "padding": 48, - "children": [ - { - "type": "frame", - "name": "backLink", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "width": 16, - "height": 16, - "iconFontName": "arrow-left", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "fill": "$text-tertiary", - "content": "Quay lại đăng nhập", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "name": "cardHeader", - "width": "fill_container", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "iconContainer", - "width": 64, - "height": 64, - "fill": "$status-warning-bg", - "cornerRadius": 32, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "width": 28, - "height": 28, - "iconFontName": "key", - "iconFontFamily": "lucide", - "fill": "$status-warning" - } - ] - }, - { - "type": "text", - "fill": "$text-primary", - "content": "Quên mật khẩu?", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - }, - { - "type": "text", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 320, - "content": "Nhập email hoặc số điện thoại để nhận đường dẫn đặt lại mật khẩu.", - "lineHeight": 1.5, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "name": "formSection", - "width": "fill_container", - "layout": "vertical", - "gap": 20, - "children": [ - { - "type": "frame", - "name": "emailField", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "fill": "$text-secondary", - "content": "Email hoặc số điện thoại", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "padding": [0, 16], - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "width": 18, - "height": 18, - "iconFontName": "mail", - "iconFontFamily": "lucide", - "fill": "$text-muted" - }, - { - "type": "text", - "fill": "$text-muted", - "content": "Nhập email hoặc số điện thoại", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "name": "submitButton", - "width": "fill_container", - "height": 48, - "fill": { - "type": "gradient", - "gradientType": "linear", - "rotation": 135, - "colors": [ - { "color": "#FF5C00", "position": 0 }, - { "color": "#FF8A4C", "position": 1 } - ] - }, - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "$text-primary", - "content": "Gửi yêu cầu", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ResetSentPage", - "name": "Reset Sent Confirmation - Desktop", - "width": 1440, - "height": 900, - "fill": "$bg-page", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "confirmCard", - "width": 440, - "fill": "$bg-surface", - "cornerRadius": 24, - "stroke": { "thickness": 1, "fill": "$border-subtle" }, - "layout": "vertical", - "gap": 32, - "padding": 48, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "successIcon", - "width": 80, - "height": 80, - "fill": "$status-success-bg", - "cornerRadius": 40, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "width": 36, - "height": 36, - "iconFontName": "mail-check", - "iconFontFamily": "lucide", - "fill": "$status-success" - } - ] - }, - { - "type": "frame", - "name": "textContent", - "layout": "vertical", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "$text-primary", - "content": "Kiểm tra hộp thư", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - }, - { - "type": "text", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 320, - "content": "Chúng tôi đã gửi đường dẫn đặt lại mật khẩu đến:", - "lineHeight": 1.5, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 14 - }, - { - "type": "text", - "fill": "$orange-primary", - "content": "user@example.com", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "name": "actions", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "frame", - "name": "openEmailBtn", - "width": "fill_container", - "height": 48, - "fill": { - "type": "gradient", - "gradientType": "linear", - "rotation": 135, - "colors": [ - { "color": "#FF5C00", "position": 0 }, - { "color": "#FF8A4C", "position": 1 } - ] - }, - "cornerRadius": 10, - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "width": 18, - "height": 18, - "iconFontName": "external-link", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "fill": "$text-primary", - "content": "Mở ứng dụng email", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "name": "resendBtn", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "$text-secondary", - "content": "Gửi lại email", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "name": "helpText", - "layout": "vertical", - "gap": 4, - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "$text-muted", - "content": "Không nhận được email?", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "fill": "$text-muted", - "content": "Kiểm tra thư mục spam hoặc liên hệ hỗ trợ", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-page": { "type": "color", "value": "#0A0A0B" }, - "bg-surface": { "type": "color", "value": "#111113" }, - "bg-elevated": { "type": "color", "value": "#1A1A1D" }, - "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" }, - "text-muted": { "type": "color", "value": "#6B6B70" }, - "status-success": { "type": "color", "value": "#22C55E" }, - "status-success-bg": { "type": "color", "value": "#22C55E1A" }, - "status-warning": { "type": "color", "value": "#F59E0B" }, - "status-warning-bg": { "type": "color", "value": "#F59E0B1A" } - } -} diff --git a/pencil-design/src/pages/tPOS/auth/forgot-password/mobile.pen b/pencil-design/src/pages/tPOS/auth/forgot-password/mobile.pen deleted file mode 100644 index 419c2037..00000000 --- a/pencil-design/src/pages/tPOS/auth/forgot-password/mobile.pen +++ /dev/null @@ -1,112 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "ForgotPasswordMobile", - "name": "Forgot Password - Mobile", - "width": 390, - "height": 844, - "fill": "#0A0A0B", - "layout": "vertical", - "children": [ - { - "type": "frame", - "width": "fill_container", - "padding": [16, 24], - "children": [ - { - "type": "frame", - "gap": 6, - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "#8B8B90" }, - { "type": "text", "fill": "#8B8B90", "content": "Quay lại", "fontFamily": "Roboto", "fontSize": 14 } - ] - } - ] - }, - { - "type": "frame", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "justifyContent": "center", - "padding": 24, - "gap": 28, - "children": [ - { - "type": "frame", - "width": "fill_container", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "width": 72, - "height": 72, - "fill": "#F59E0B1A", - "cornerRadius": 36, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 32, "height": 32, "iconFontName": "key", "iconFontFamily": "lucide", "fill": "#F59E0B" } - ] - }, - { "type": "text", "fill": "#FFFFFF", "content": "Quên mật khẩu?", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" }, - { - "type": "text", - "fill": "#8B8B90", - "textGrowth": "fixed-width", - "width": 300, - "content": "Nhập email hoặc số điện thoại để nhận đường dẫn đặt lại mật khẩu.", - "lineHeight": 1.5, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { "type": "text", "fill": "#ADADB0", "content": "Email hoặc số điện thoại", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" }, - { - "type": "frame", - "width": "fill_container", - "height": 52, - "fill": "#1A1A1D", - "cornerRadius": 12, - "stroke": { "thickness": 1, "fill": "#2A2A2E" }, - "padding": [0, 16], - "gap": 10, - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 20, "height": 20, "iconFontName": "mail", "iconFontFamily": "lucide", "fill": "#6B6B70" }, - { "type": "text", "fill": "#6B6B70", "content": "Nhập email hoặc số điện thoại", "fontFamily": "Roboto", "fontSize": 15 } - ] - } - ] - }, - { - "type": "frame", - "width": "fill_container", - "height": 52, - "fill": { "type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{ "color": "#FF5C00", "position": 0 }, { "color": "#FF8A4C", "position": 1 }] }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "text", "fill": "#FFFFFF", "content": "Gửi yêu cầu", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600" } - ] - } - ] - } - ] - } - ] -} diff --git a/pencil-design/src/pages/tPOS/auth/forgot-password/tablet.pen b/pencil-design/src/pages/tPOS/auth/forgot-password/tablet.pen deleted file mode 100644 index 077fb134..00000000 --- a/pencil-design/src/pages/tPOS/auth/forgot-password/tablet.pen +++ /dev/null @@ -1,107 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "ForgotPasswordTablet", - "name": "Forgot Password - Tablet", - "width": 1024, - "height": 768, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "width": 440, - "fill": "#111113", - "cornerRadius": 24, - "stroke": { "thickness": 1, "fill": "#1F1F23" }, - "layout": "vertical", - "gap": 28, - "padding": 44, - "children": [ - { - "type": "frame", - "gap": 6, - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 16, "height": 16, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "#8B8B90" }, - { "type": "text", "fill": "#8B8B90", "content": "Quay lại đăng nhập", "fontFamily": "Roboto", "fontSize": 13 } - ] - }, - { - "type": "frame", - "width": "fill_container", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "width": 64, - "height": 64, - "fill": "#F59E0B1A", - "cornerRadius": 32, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 28, "height": 28, "iconFontName": "key", "iconFontFamily": "lucide", "fill": "#F59E0B" } - ] - }, - { "type": "text", "fill": "#FFFFFF", "content": "Quên mật khẩu?", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" }, - { - "type": "text", - "fill": "#8B8B90", - "textGrowth": "fixed-width", - "width": 320, - "content": "Nhập email hoặc số điện thoại để nhận đường dẫn đặt lại mật khẩu.", - "lineHeight": 1.5, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { "type": "text", "fill": "#ADADB0", "content": "Email hoặc số điện thoại", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" }, - { - "type": "frame", - "width": "fill_container", - "height": 50, - "fill": "#1A1A1D", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "#2A2A2E" }, - "padding": [0, 16], - "gap": 10, - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "mail", "iconFontFamily": "lucide", "fill": "#6B6B70" }, - { "type": "text", "fill": "#6B6B70", "content": "Nhập email hoặc số điện thoại", "fontFamily": "Roboto", "fontSize": 14 } - ] - } - ] - }, - { - "type": "frame", - "width": "fill_container", - "height": 50, - "fill": { "type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{ "color": "#FF5C00", "position": 0 }, { "color": "#FF8A4C", "position": 1 }] }, - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "text", "fill": "#FFFFFF", "content": "Gửi yêu cầu", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600" } - ] - } - ] - } - ] - } - ] -} diff --git a/pencil-design/src/pages/tPOS/auth/login/admin-desktop.pen b/pencil-design/src/pages/tPOS/auth/login/admin-desktop.pen deleted file mode 100644 index 60ac7316..00000000 --- a/pencil-design/src/pages/tPOS/auth/login/admin-desktop.pen +++ /dev/null @@ -1,306 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "AdminLoginPage", - "name": "Admin Login Page - Desktop", - "width": 1440, - "height": 900, - "fill": "$bg-page", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "loginCard", - "width": 440, - "fill": "$bg-surface", - "cornerRadius": 24, - "stroke": { "thickness": 1, "fill": "$border-subtle" }, - "layout": "vertical", - "gap": 32, - "padding": 48, - "children": [ - { - "type": "frame", - "name": "cardHeader", - "width": "fill_container", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "logoContainer", - "width": 64, - "height": 64, - "fill": { - "type": "gradient", - "gradientType": "linear", - "rotation": 135, - "colors": [ - { "color": "#3B82F6", "position": 0 }, - { "color": "#60A5FA", "position": 1 } - ] - }, - "cornerRadius": 16, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "width": 28, - "height": 28, - "iconFontName": "shield", - "iconFontFamily": "lucide", - "fill": "$text-primary" - } - ] - }, - { - "type": "frame", - "name": "roleBadge", - "fill": "$status-info-bg", - "cornerRadius": 100, - "padding": [6, 16], - "children": [ - { - "type": "text", - "fill": "$status-info", - "content": "QUẢN TRỊ HỆ THỐNG", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600", - "letterSpacing": 1 - } - ] - }, - { - "type": "text", - "fill": "$text-primary", - "content": "Đăng nhập Admin", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - }, - { - "type": "text", - "fill": "$text-tertiary", - "content": "Bảng điều khiển quản trị viên", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "name": "securityNotice", - "width": "fill_container", - "fill": "$status-warning-bg", - "cornerRadius": 8, - "padding": 12, - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "width": 16, - "height": 16, - "iconFontName": "shield-alert", - "iconFontFamily": "lucide", - "fill": "$status-warning" - }, - { - "type": "text", - "fill": "$status-warning", - "content": "Khu vực bảo mật cao - Chỉ dành cho quản trị viên", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "name": "formSection", - "width": "fill_container", - "layout": "vertical", - "gap": 20, - "children": [ - { - "type": "frame", - "name": "emailField", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "fill": "$text-secondary", - "content": "Email quản trị viên", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "inputWrapper", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "padding": [0, 16], - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "width": 18, - "height": 18, - "iconFontName": "shield", - "iconFontFamily": "lucide", - "fill": "$text-muted" - }, - { - "type": "text", - "fill": "$text-muted", - "content": "admin@company.com", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - }, - { - "type": "frame", - "name": "passwordField", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "fill": "$text-secondary", - "content": "Mật khẩu", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "inputWrapper", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "padding": [0, 16], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "width": 18, - "height": 18, - "iconFontName": "lock", - "iconFontFamily": "lucide", - "fill": "$text-muted" - }, - { - "type": "text", - "fill": "$text-muted", - "content": "••••••••••••", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "icon_font", - "width": 18, - "height": 18, - "iconFontName": "eye-off", - "iconFontFamily": "lucide", - "fill": "$text-muted" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "name": "submitButton", - "width": "fill_container", - "height": 48, - "fill": "$status-info", - "cornerRadius": 10, - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "width": 18, - "height": 18, - "iconFontName": "shield-check", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "fill": "$text-primary", - "content": "Đăng nhập bảo mật", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "name": "footer", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "$text-muted", - "content": "Phiên làm việc sẽ tự động kết thúc sau 30 phút không hoạt động", - "fontFamily": "Roboto", - "fontSize": 11 - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-page": { "type": "color", "value": "#0A0A0B" }, - "bg-surface": { "type": "color", "value": "#111113" }, - "bg-elevated": { "type": "color", "value": "#1A1A1D" }, - "border-default": { "type": "color", "value": "#2A2A2E" }, - "border-subtle": { "type": "color", "value": "#1F1F23" }, - "text-primary": { "type": "color", "value": "#FFFFFF" }, - "text-secondary": { "type": "color", "value": "#ADADB0" }, - "text-tertiary": { "type": "color", "value": "#8B8B90" }, - "text-muted": { "type": "color", "value": "#6B6B70" }, - "status-info": { "type": "color", "value": "#3B82F6" }, - "status-info-bg": { "type": "color", "value": "#3B82F61A" }, - "status-warning": { "type": "color", "value": "#F59E0B" }, - "status-warning-bg": { "type": "color", "value": "#F59E0B1A" } - } -} diff --git a/pencil-design/src/pages/tPOS/auth/login/admin-mobile.pen b/pencil-design/src/pages/tPOS/auth/login/admin-mobile.pen deleted file mode 100644 index ed6d9f3e..00000000 --- a/pencil-design/src/pages/tPOS/auth/login/admin-mobile.pen +++ /dev/null @@ -1,149 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "AdminLoginMobile", - "name": "Admin Login - Mobile", - "width": 390, - "height": 844, - "fill": "#0A0A0B", - "layout": "vertical", - "children": [ - { - "type": "frame", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "justifyContent": "center", - "padding": 24, - "gap": 28, - "children": [ - { - "type": "frame", - "width": "fill_container", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "width": 64, - "height": 64, - "fill": { "type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{ "color": "#3B82F6", "position": 0 }, { "color": "#60A5FA", "position": 1 }] }, - "cornerRadius": 16, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 28, "height": 28, "iconFontName": "shield", "iconFontFamily": "lucide", "fill": "#FFFFFF" } - ] - }, - { - "type": "frame", - "fill": "#3B82F61A", - "cornerRadius": 100, - "padding": [8, 16], - "children": [ - { "type": "text", "fill": "#3B82F6", "content": "QUẢN TRỊ", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600", "letterSpacing": 1 } - ] - }, - { "type": "text", "fill": "#FFFFFF", "content": "Đăng nhập Admin", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" } - ] - }, - { - "type": "frame", - "width": "fill_container", - "fill": "#F59E0B1A", - "cornerRadius": 10, - "padding": 14, - "gap": 10, - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "shield-alert", "iconFontFamily": "lucide", "fill": "#F59E0B" }, - { "type": "text", "fill": "#F59E0B", "content": "Khu vực bảo mật cao", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500" } - ] - }, - { - "type": "frame", - "width": "fill_container", - "layout": "vertical", - "gap": 20, - "children": [ - { - "type": "frame", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { "type": "text", "fill": "#ADADB0", "content": "Email quản trị viên", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" }, - { - "type": "frame", - "width": "fill_container", - "height": 52, - "fill": "#1A1A1D", - "cornerRadius": 12, - "stroke": { "thickness": 1, "fill": "#2A2A2E" }, - "padding": [0, 16], - "gap": 10, - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 20, "height": 20, "iconFontName": "shield", "iconFontFamily": "lucide", "fill": "#6B6B70" }, - { "type": "text", "fill": "#6B6B70", "content": "admin@company.com", "fontFamily": "Roboto", "fontSize": 15 } - ] - } - ] - }, - { - "type": "frame", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { "type": "text", "fill": "#ADADB0", "content": "Mật khẩu", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" }, - { - "type": "frame", - "width": "fill_container", - "height": 52, - "fill": "#1A1A1D", - "cornerRadius": 12, - "stroke": { "thickness": 1, "fill": "#2A2A2E" }, - "padding": [0, 16], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "gap": 10, - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 20, "height": 20, "iconFontName": "lock", "iconFontFamily": "lucide", "fill": "#6B6B70" }, - { "type": "text", "fill": "#6B6B70", "content": "••••••••••••", "fontFamily": "Roboto", "fontSize": 15 } - ] - }, - { "type": "icon_font", "width": 20, "height": 20, "iconFontName": "eye-off", "iconFontFamily": "lucide", "fill": "#6B6B70" } - ] - } - ] - } - ] - }, - { - "type": "frame", - "width": "fill_container", - "height": 52, - "fill": "#3B82F6", - "cornerRadius": 12, - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 20, "height": 20, "iconFontName": "shield-check", "iconFontFamily": "lucide", "fill": "#FFFFFF" }, - { "type": "text", "fill": "#FFFFFF", "content": "Đăng nhập bảo mật", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600" } - ] - } - ] - } - ] - } - ] -} diff --git a/pencil-design/src/pages/tPOS/auth/login/admin-tablet.pen b/pencil-design/src/pages/tPOS/auth/login/admin-tablet.pen deleted file mode 100644 index 3eace6e8..00000000 --- a/pencil-design/src/pages/tPOS/auth/login/admin-tablet.pen +++ /dev/null @@ -1,151 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "AdminLoginTablet", - "name": "Admin Login - Tablet", - "width": 1024, - "height": 768, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "width": 460, - "fill": "#111113", - "cornerRadius": 24, - "stroke": { "thickness": 1, "fill": "#1F1F23" }, - "layout": "vertical", - "gap": 28, - "padding": 44, - "children": [ - { - "type": "frame", - "width": "fill_container", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "width": 56, - "height": 56, - "fill": { "type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{ "color": "#3B82F6", "position": 0 }, { "color": "#60A5FA", "position": 1 }] }, - "cornerRadius": 14, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 26, "height": 26, "iconFontName": "shield", "iconFontFamily": "lucide", "fill": "#FFFFFF" } - ] - }, - { - "type": "frame", - "fill": "#3B82F61A", - "cornerRadius": 100, - "padding": [6, 16], - "children": [ - { "type": "text", "fill": "#3B82F6", "content": "QUẢN TRỊ HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600", "letterSpacing": 1 } - ] - }, - { "type": "text", "fill": "#FFFFFF", "content": "Đăng nhập Admin", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" } - ] - }, - { - "type": "frame", - "width": "fill_container", - "fill": "#F59E0B1A", - "cornerRadius": 8, - "padding": 12, - "gap": 10, - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 16, "height": 16, "iconFontName": "shield-alert", "iconFontFamily": "lucide", "fill": "#F59E0B" }, - { "type": "text", "fill": "#F59E0B", "content": "Khu vực bảo mật cao", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500" } - ] - }, - { - "type": "frame", - "width": "fill_container", - "layout": "vertical", - "gap": 20, - "children": [ - { - "type": "frame", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { "type": "text", "fill": "#ADADB0", "content": "Email quản trị viên", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" }, - { - "type": "frame", - "width": "fill_container", - "height": 50, - "fill": "#1A1A1D", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "#2A2A2E" }, - "padding": [0, 16], - "gap": 10, - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "shield", "iconFontFamily": "lucide", "fill": "#6B6B70" }, - { "type": "text", "fill": "#6B6B70", "content": "admin@company.com", "fontFamily": "Roboto", "fontSize": 14 } - ] - } - ] - }, - { - "type": "frame", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { "type": "text", "fill": "#ADADB0", "content": "Mật khẩu", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" }, - { - "type": "frame", - "width": "fill_container", - "height": 50, - "fill": "#1A1A1D", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "#2A2A2E" }, - "padding": [0, 16], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "gap": 10, - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "lock", "iconFontFamily": "lucide", "fill": "#6B6B70" }, - { "type": "text", "fill": "#6B6B70", "content": "••••••••••••", "fontFamily": "Roboto", "fontSize": 14 } - ] - }, - { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "eye-off", "iconFontFamily": "lucide", "fill": "#6B6B70" } - ] - } - ] - } - ] - }, - { - "type": "frame", - "width": "fill_container", - "height": 50, - "fill": "#3B82F6", - "cornerRadius": 10, - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "shield-check", "iconFontFamily": "lucide", "fill": "#FFFFFF" }, - { "type": "text", "fill": "#FFFFFF", "content": "Đăng nhập bảo mật", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600" } - ] - } - ] - } - ] - } - ] -} diff --git a/pencil-design/src/pages/tPOS/auth/login/branch-desktop.pen b/pencil-design/src/pages/tPOS/auth/login/branch-desktop.pen deleted file mode 100644 index 5287be46..00000000 --- a/pencil-design/src/pages/tPOS/auth/login/branch-desktop.pen +++ /dev/null @@ -1,413 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "BranchLoginPage", - "name": "Branch Login Page - Desktop", - "width": 1440, - "height": 900, - "fill": "$bg-page", - "layout": "horizontal", - "children": [ - { - "type": "frame", - "name": "brandPanel", - "width": 640, - "height": "fill_container", - "fill": { - "type": "gradient", - "gradientType": "linear", - "rotation": 180, - "colors": [ - { "color": "#FF5C00", "position": 0 }, - { "color": "#FF8A4C", "position": 0.5 }, - { "color": "#FFB347", "position": 1 } - ] - }, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "padding": 80, - "children": [ - { - "type": "frame", - "name": "brandContent", - "layout": "vertical", - "gap": 32, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "logoContainer", - "width": 100, - "height": 100, - "fill": "#FFFFFF20", - "cornerRadius": 24, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "$text-primary", - "content": "a", - "fontFamily": "Roboto", - "fontSize": 56, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "name": "textContent", - "layout": "vertical", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "$text-primary", - "content": "aPOS Branch Portal", - "fontFamily": "Roboto", - "fontSize": 32, - "fontWeight": "700" - }, - { - "type": "text", - "fill": "#FFFFFFCC", - "textGrowth": "fixed-width", - "width": 380, - "content": "Quản lý chi nhánh chuyên nghiệp, báo cáo thời gian thực, kiểm soát vận hành hiệu quả.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16 - } - ] - }, - { - "type": "frame", - "name": "stats", - "gap": 40, - "padding": [24, 0, 0, 0], - "children": [ - { - "type": "frame", - "layout": "vertical", - "alignItems": "center", - "gap": 4, - "children": [ - { - "type": "text", - "fill": "$text-primary", - "content": "1,200+", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "700" - }, - { - "type": "text", - "fill": "#FFFFFFAA", - "content": "Chi nhánh", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - }, - { - "type": "frame", - "layout": "vertical", - "alignItems": "center", - "gap": 4, - "children": [ - { - "type": "text", - "fill": "$text-primary", - "content": "50K+", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "700" - }, - { - "type": "text", - "fill": "#FFFFFFAA", - "content": "Đơn/ngày", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - }, - { - "type": "frame", - "layout": "vertical", - "alignItems": "center", - "gap": 4, - "children": [ - { - "type": "text", - "fill": "$text-primary", - "content": "99.9%", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "700" - }, - { - "type": "text", - "fill": "#FFFFFFAA", - "content": "Uptime", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "name": "authPanel", - "width": "fill_container", - "height": "fill_container", - "fill": "$bg-surface", - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "padding": 60, - "children": [ - { - "type": "frame", - "name": "loginCard", - "width": 400, - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "name": "cardHeader", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "fill": "$text-primary", - "content": "Đăng nhập Chi nhánh", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "600" - }, - { - "type": "text", - "fill": "$text-tertiary", - "content": "Quản lý và theo dõi chi nhánh của bạn", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "name": "formSection", - "width": "fill_container", - "layout": "vertical", - "gap": 20, - "children": [ - { - "type": "frame", - "name": "emailField", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "fill": "$text-secondary", - "content": "Email hoặc số điện thoại", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "inputWrapper", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "padding": [0, 16], - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "width": 18, - "height": 18, - "iconFontName": "building-2", - "iconFontFamily": "lucide", - "fill": "$text-muted" - }, - { - "type": "text", - "fill": "$text-muted", - "content": "branch@company.com", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - }, - { - "type": "frame", - "name": "passwordField", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "frame", - "name": "labelRow", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "$text-secondary", - "content": "Mật khẩu", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "text", - "fill": "$orange-primary", - "content": "Quên mật khẩu?", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - }, - { - "type": "frame", - "name": "inputWrapper", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "padding": [0, 16], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "width": 18, - "height": 18, - "iconFontName": "lock", - "iconFontFamily": "lucide", - "fill": "$text-muted" - }, - { - "type": "text", - "fill": "$text-muted", - "content": "••••••••", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "icon_font", - "width": 18, - "height": 18, - "iconFontName": "eye-off", - "iconFontFamily": "lucide", - "fill": "$text-muted" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "name": "submitButton", - "width": "fill_container", - "height": 48, - "fill": { - "type": "gradient", - "gradientType": "linear", - "rotation": 135, - "colors": [ - { "color": "#FF5C00", "position": 0 }, - { "color": "#FF8A4C", "position": 1 } - ] - }, - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "$text-primary", - "content": "Đăng nhập", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "name": "footerLinks", - "width": "fill_container", - "justifyContent": "center", - "gap": 4, - "children": [ - { - "type": "text", - "fill": "$text-tertiary", - "content": "Chưa có tài khoản chi nhánh?", - "fontFamily": "Roboto", - "fontSize": 14 - }, - { - "type": "text", - "fill": "$orange-primary", - "content": "Liên hệ", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-page": { "type": "color", "value": "#0A0A0B" }, - "bg-surface": { "type": "color", "value": "#111113" }, - "bg-elevated": { "type": "color", "value": "#1A1A1D" }, - "border-default": { "type": "color", "value": "#2A2A2E" }, - "orange-primary": { "type": "color", "value": "#FF5C00" }, - "text-primary": { "type": "color", "value": "#FFFFFF" }, - "text-secondary": { "type": "color", "value": "#ADADB0" }, - "text-tertiary": { "type": "color", "value": "#8B8B90" }, - "text-muted": { "type": "color", "value": "#6B6B70" } - } -} diff --git a/pencil-design/src/pages/tPOS/auth/login/branch-mobile.pen b/pencil-design/src/pages/tPOS/auth/login/branch-mobile.pen deleted file mode 100644 index ee080a50..00000000 --- a/pencil-design/src/pages/tPOS/auth/login/branch-mobile.pen +++ /dev/null @@ -1,160 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "BranchLoginMobile", - "name": "Branch Login - Mobile", - "width": 390, - "height": 844, - "fill": "#0A0A0B", - "layout": "vertical", - "children": [ - { - "type": "frame", - "width": "fill_container", - "padding": [16, 24], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "frame", - "width": 40, - "height": 40, - "fill": { "type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{ "color": "#FF5C00", "position": 0 }, { "color": "#FF8A4C", "position": 1 }] }, - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "text", "fill": "#FFFFFF", "content": "a", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700" } - ] - }, - { "type": "text", "fill": "#FFFFFF", "content": "aPOS Branch", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700" } - ] - } - ] - }, - { - "type": "frame", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "justifyContent": "center", - "padding": 24, - "gap": 28, - "children": [ - { - "type": "frame", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { "type": "text", "fill": "#FFFFFF", "content": "Đăng nhập Chi nhánh", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" }, - { "type": "text", "fill": "#8B8B90", "content": "Quản lý và theo dõi chi nhánh của bạn", "fontFamily": "Roboto", "fontSize": 14 } - ] - }, - { - "type": "frame", - "width": "fill_container", - "layout": "vertical", - "gap": 20, - "children": [ - { - "type": "frame", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { "type": "text", "fill": "#ADADB0", "content": "Email hoặc số điện thoại", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" }, - { - "type": "frame", - "width": "fill_container", - "height": 52, - "fill": "#1A1A1D", - "cornerRadius": 12, - "stroke": { "thickness": 1, "fill": "#2A2A2E" }, - "padding": [0, 16], - "gap": 10, - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 20, "height": 20, "iconFontName": "building-2", "iconFontFamily": "lucide", "fill": "#6B6B70" }, - { "type": "text", "fill": "#6B6B70", "content": "branch@company.com", "fontFamily": "Roboto", "fontSize": 15 } - ] - } - ] - }, - { - "type": "frame", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "frame", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { "type": "text", "fill": "#ADADB0", "content": "Mật khẩu", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" }, - { "type": "text", "fill": "#FF5C00", "content": "Quên mật khẩu?", "fontFamily": "Roboto", "fontSize": 13 } - ] - }, - { - "type": "frame", - "width": "fill_container", - "height": 52, - "fill": "#1A1A1D", - "cornerRadius": 12, - "stroke": { "thickness": 1, "fill": "#2A2A2E" }, - "padding": [0, 16], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "gap": 10, - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 20, "height": 20, "iconFontName": "lock", "iconFontFamily": "lucide", "fill": "#6B6B70" }, - { "type": "text", "fill": "#6B6B70", "content": "••••••••", "fontFamily": "Roboto", "fontSize": 15 } - ] - }, - { "type": "icon_font", "width": 20, "height": 20, "iconFontName": "eye-off", "iconFontFamily": "lucide", "fill": "#6B6B70" } - ] - } - ] - } - ] - }, - { - "type": "frame", - "width": "fill_container", - "height": 52, - "fill": { "type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{ "color": "#FF5C00", "position": 0 }, { "color": "#FF8A4C", "position": 1 }] }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "text", "fill": "#FFFFFF", "content": "Đăng nhập", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600" } - ] - }, - { - "type": "frame", - "width": "fill_container", - "justifyContent": "center", - "gap": 4, - "children": [ - { "type": "text", "fill": "#8B8B90", "content": "Chưa có tài khoản?", "fontFamily": "Roboto", "fontSize": 14 }, - { "type": "text", "fill": "#FF5C00", "content": "Liên hệ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" } - ] - } - ] - } - ] - } - ] -} diff --git a/pencil-design/src/pages/tPOS/auth/login/branch-tablet.pen b/pencil-design/src/pages/tPOS/auth/login/branch-tablet.pen deleted file mode 100644 index b0d8d2ee..00000000 --- a/pencil-design/src/pages/tPOS/auth/login/branch-tablet.pen +++ /dev/null @@ -1,146 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "BranchLoginTablet", - "name": "Branch Login - Tablet", - "width": 1024, - "height": 768, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "width": 480, - "fill": "#111113", - "cornerRadius": 24, - "stroke": { "thickness": 1, "fill": "#1F1F23" }, - "layout": "vertical", - "gap": 28, - "padding": 44, - "children": [ - { - "type": "frame", - "width": "fill_container", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "width": 56, - "height": 56, - "fill": { "type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{ "color": "#FF5C00", "position": 0 }, { "color": "#FF8A4C", "position": 1 }] }, - "cornerRadius": 14, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "text", "fill": "#FFFFFF", "content": "a", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700" } - ] - }, - { "type": "text", "fill": "#FFFFFF", "content": "aPOS Branch Portal", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" }, - { "type": "text", "fill": "#8B8B90", "content": "Quản lý và theo dõi chi nhánh", "fontFamily": "Roboto", "fontSize": 14 } - ] - }, - { - "type": "frame", - "width": "fill_container", - "layout": "vertical", - "gap": 20, - "children": [ - { - "type": "frame", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { "type": "text", "fill": "#ADADB0", "content": "Email hoặc số điện thoại", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" }, - { - "type": "frame", - "width": "fill_container", - "height": 50, - "fill": "#1A1A1D", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "#2A2A2E" }, - "padding": [0, 16], - "gap": 10, - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "building-2", "iconFontFamily": "lucide", "fill": "#6B6B70" }, - { "type": "text", "fill": "#6B6B70", "content": "branch@company.com", "fontFamily": "Roboto", "fontSize": 14 } - ] - } - ] - }, - { - "type": "frame", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "frame", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { "type": "text", "fill": "#ADADB0", "content": "Mật khẩu", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" }, - { "type": "text", "fill": "#FF5C00", "content": "Quên mật khẩu?", "fontFamily": "Roboto", "fontSize": 13 } - ] - }, - { - "type": "frame", - "width": "fill_container", - "height": 50, - "fill": "#1A1A1D", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "#2A2A2E" }, - "padding": [0, 16], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "gap": 10, - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "lock", "iconFontFamily": "lucide", "fill": "#6B6B70" }, - { "type": "text", "fill": "#6B6B70", "content": "••••••••", "fontFamily": "Roboto", "fontSize": 14 } - ] - }, - { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "eye-off", "iconFontFamily": "lucide", "fill": "#6B6B70" } - ] - } - ] - } - ] - }, - { - "type": "frame", - "width": "fill_container", - "height": 50, - "fill": { "type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{ "color": "#FF5C00", "position": 0 }, { "color": "#FF8A4C", "position": 1 }] }, - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "text", "fill": "#FFFFFF", "content": "Đăng nhập", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600" } - ] - }, - { - "type": "frame", - "width": "fill_container", - "justifyContent": "center", - "gap": 4, - "children": [ - { "type": "text", "fill": "#8B8B90", "content": "Chưa có tài khoản?", "fontFamily": "Roboto", "fontSize": 14 }, - { "type": "text", "fill": "#FF5C00", "content": "Liên hệ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" } - ] - } - ] - } - ] - } - ] -} diff --git a/pencil-design/src/pages/tPOS/auth/login/customer-desktop.pen b/pencil-design/src/pages/tPOS/auth/login/customer-desktop.pen deleted file mode 100644 index e88720a2..00000000 --- a/pencil-design/src/pages/tPOS/auth/login/customer-desktop.pen +++ /dev/null @@ -1,532 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "CustomerLoginPage", - "name": "Customer Login Page - Desktop", - "width": 1440, - "height": 900, - "fill": "$bg-page", - "layout": "horizontal", - "children": [ - { - "type": "frame", - "name": "brandPanel", - "width": 800, - "height": "fill_container", - "fill": { - "type": "gradient", - "gradientType": "linear", - "rotation": 135, - "colors": [ - { "color": "#0A0A0B", "position": 0 }, - { "color": "#1A1A1D", "position": 0.5 }, - { "color": "#0A0A0B", "position": 1 } - ] - }, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "padding": 80, - "children": [ - { - "type": "frame", - "name": "brandContent", - "layout": "vertical", - "gap": 40, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "logoContainer", - "width": 80, - "height": 80, - "fill": { - "type": "gradient", - "gradientType": "linear", - "rotation": 135, - "colors": [ - { "color": "#FF5C00", "position": 0 }, - { "color": "#FF8A4C", "position": 1 } - ] - }, - "cornerRadius": 20, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "logoText", - "fill": "$text-primary", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 40, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "name": "textContent", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "brandName", - "fill": "$text-primary", - "content": "GoodGo", - "fontFamily": "Roboto", - "fontSize": 48, - "fontWeight": "700", - "letterSpacing": -1 - }, - { - "type": "text", - "name": "tagline", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 400, - "content": "Đặt hàng dễ dàng, tích điểm nhanh chóng, nhận ưu đãi hấp dẫn.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 18 - } - ] - }, - { - "type": "frame", - "name": "features", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "frame", - "name": "feature1", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "width": 20, - "height": 20, - "iconFontName": "check-circle", - "iconFontFamily": "lucide", - "fill": "$status-success" - }, - { - "type": "text", - "fill": "$text-secondary", - "content": "Đặt hàng online 24/7", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "name": "feature2", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "width": 20, - "height": 20, - "iconFontName": "check-circle", - "iconFontFamily": "lucide", - "fill": "$status-success" - }, - { - "type": "text", - "fill": "$text-secondary", - "content": "Tích điểm mỗi đơn hàng", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "name": "feature3", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "width": 20, - "height": 20, - "iconFontName": "check-circle", - "iconFontFamily": "lucide", - "fill": "$status-success" - }, - { - "type": "text", - "fill": "$text-secondary", - "content": "Ưu đãi độc quyền cho thành viên", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "name": "authPanel", - "width": "fill_container", - "height": "fill_container", - "fill": "$bg-surface", - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "padding": 60, - "children": [ - { - "type": "frame", - "name": "loginCard", - "width": 400, - "layout": "vertical", - "gap": 32, - "children": [ - { - "type": "frame", - "name": "cardHeader", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "name": "cardTitle", - "fill": "$text-primary", - "content": "Đăng nhập", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "600" - }, - { - "type": "text", - "name": "cardSubtitle", - "fill": "$text-tertiary", - "content": "Đăng nhập để tiếp tục đặt hàng", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "name": "formSection", - "width": "fill_container", - "layout": "vertical", - "gap": 20, - "children": [ - { - "type": "frame", - "name": "phoneField", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "name": "label", - "fill": "$text-secondary", - "content": "Số điện thoại", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "inputWrapper", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "gap": 0, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "countryCode", - "height": "fill_container", - "fill": "$bg-interactive", - "cornerRadius": [10, 0, 0, 10], - "padding": [0, 12], - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "flag", - "content": "🇻🇳", - "fontSize": 16 - }, - { - "type": "text", - "name": "code", - "fill": "$text-secondary", - "content": "+84", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "name": "inputField", - "width": "fill_container", - "height": "fill_container", - "padding": [0, 12], - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "placeholder", - "fill": "$text-muted", - "content": "Nhập số điện thoại", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "name": "submitButton", - "width": "fill_container", - "height": 48, - "fill": { - "type": "gradient", - "gradientType": "linear", - "rotation": 135, - "colors": [ - { "color": "#FF5C00", "position": 0 }, - { "color": "#FF8A4C", "position": 1 } - ] - }, - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "name": "btnLabel", - "fill": "$text-primary", - "content": "Gửi mã OTP", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "name": "socialDivider", - "width": "fill_container", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "line1", - "width": "fill_container", - "height": 1, - "fill": "$border-default" - }, - { - "type": "text", - "name": "orText", - "fill": "$text-muted", - "content": "hoặc tiếp tục với", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "frame", - "name": "line2", - "width": "fill_container", - "height": 1, - "fill": "$border-default" - } - ] - }, - { - "type": "frame", - "name": "socialIconsRow", - "width": "fill_container", - "justifyContent": "center", - "gap": 16, - "children": [ - { - "type": "frame", - "name": "googleIcon", - "width": 56, - "height": 56, - "fill": "#FFFFFF", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "#4285F4", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "name": "appleIcon", - "width": 56, - "height": 56, - "fill": "#000000", - "cornerRadius": 12, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "width": 26, - "height": 26, - "iconFontName": "apple", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - } - ] - }, - { - "type": "frame", - "name": "zaloIcon", - "width": 56, - "height": 56, - "fill": "#0068FF", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "#FFFFFF", - "content": "Z", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "700" - } - ] - } - ] - }, - { - "type": "frame", - "name": "footerLinks", - "width": "fill_container", - "justifyContent": "center", - "gap": 4, - "children": [ - { - "type": "text", - "name": "text", - "fill": "$text-tertiary", - "content": "Lần đầu sử dụng?", - "fontFamily": "Roboto", - "fontSize": 14 - }, - { - "type": "text", - "name": "link", - "fill": "$orange-primary", - "content": "Tạo tài khoản", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "name": "footer", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "padding": [40, 0, 0, 0], - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "$text-muted", - "content": "Bằng việc đăng nhập, bạn đồng ý với", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "frame", - "name": "legalLinks", - "gap": 8, - "children": [ - { - "type": "text", - "fill": "$text-tertiary", - "content": "Điều khoản dịch vụ", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "fill": "$text-muted", - "content": "và", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "text", - "fill": "$text-tertiary", - "content": "Chính sách bảo mật", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-page": { "type": "color", "value": "#0A0A0B" }, - "bg-surface": { "type": "color", "value": "#111113" }, - "bg-elevated": { "type": "color", "value": "#1A1A1D" }, - "bg-interactive": { "type": "color", "value": "#2A2A2E" }, - "border-default": { "type": "color", "value": "#2A2A2E" }, - "orange-primary": { "type": "color", "value": "#FF5C00" }, - "text-primary": { "type": "color", "value": "#FFFFFF" }, - "text-secondary": { "type": "color", "value": "#ADADB0" }, - "text-tertiary": { "type": "color", "value": "#8B8B90" }, - "text-muted": { "type": "color", "value": "#6B6B70" }, - "status-success": { "type": "color", "value": "#22C55E" } - } -} diff --git a/pencil-design/src/pages/tPOS/auth/login/customer-mobile.pen b/pencil-design/src/pages/tPOS/auth/login/customer-mobile.pen deleted file mode 100644 index 2a2f2cdd..00000000 --- a/pencil-design/src/pages/tPOS/auth/login/customer-mobile.pen +++ /dev/null @@ -1,358 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "CustomerLoginMobile", - "name": "Customer Login - Mobile", - "width": 390, - "height": 844, - "fill": "$bg-page", - "layout": "vertical", - "children": [ - { - "type": "frame", - "name": "header", - "width": "fill_container", - "padding": [16, 24], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "logoRow", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "logoContainer", - "width": 40, - "height": 40, - "fill": { - "type": "gradient", - "gradientType": "linear", - "rotation": 135, - "colors": [ - { "color": "#FF5C00", "position": 0 }, - { "color": "#FF8A4C", "position": 1 } - ] - }, - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "$text-primary", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "fill": "$text-primary", - "content": "GoodGo", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "700" - } - ] - } - ] - }, - { - "type": "frame", - "name": "content", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "justifyContent": "space_between", - "padding": 24, - "children": [ - { - "type": "frame", - "name": "formArea", - "width": "fill_container", - "layout": "vertical", - "gap": 24, - "children": [ - { - "type": "frame", - "name": "headerText", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "fill": "$text-primary", - "content": "Đăng nhập", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "600" - }, - { - "type": "text", - "fill": "$text-tertiary", - "content": "Đăng nhập để tiếp tục đặt hàng", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "name": "phoneField", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "fill": "$text-secondary", - "content": "Số điện thoại", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "width": "fill_container", - "height": 52, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "gap": 0, - "alignItems": "center", - "children": [ - { - "type": "frame", - "height": "fill_container", - "fill": "$bg-interactive", - "cornerRadius": [12, 0, 0, 12], - "padding": [0, 14], - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "content": "🇻🇳", - "fontSize": 18 - }, - { - "type": "text", - "fill": "$text-secondary", - "content": "+84", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "width": "fill_container", - "height": "fill_container", - "padding": [0, 14], - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "$text-muted", - "content": "Nhập số điện thoại", - "fontFamily": "Roboto", - "fontSize": 15 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "name": "submitButton", - "width": "fill_container", - "height": 52, - "fill": { - "type": "gradient", - "gradientType": "linear", - "rotation": 135, - "colors": [ - { "color": "#FF5C00", "position": 0 }, - { "color": "#FF8A4C", "position": 1 } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "$text-primary", - "content": "Gửi mã OTP", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "name": "socialDivider", - "width": "fill_container", - "gap": 14, - "alignItems": "center", - "children": [ - { - "type": "frame", - "width": "fill_container", - "height": 1, - "fill": "$border-default" - }, - { - "type": "text", - "fill": "$text-muted", - "content": "hoặc", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "frame", - "width": "fill_container", - "height": 1, - "fill": "$border-default" - } - ] - }, - { - "type": "frame", - "name": "socialRow", - "width": "fill_container", - "justifyContent": "center", - "gap": 16, - "children": [ - { - "type": "frame", - "width": 60, - "height": 60, - "fill": "#FFFFFF", - "cornerRadius": 16, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "#4285F4", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 26, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "width": 60, - "height": 60, - "fill": "#000000", - "cornerRadius": 16, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "width": 28, - "height": 28, - "iconFontName": "apple", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - } - ] - }, - { - "type": "frame", - "width": 60, - "height": 60, - "fill": "#0068FF", - "cornerRadius": 16, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "#FFFFFF", - "content": "Z", - "fontFamily": "Roboto", - "fontSize": 26, - "fontWeight": "700" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "name": "footer", - "width": "fill_container", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "gap": 4, - "children": [ - { - "type": "text", - "fill": "$text-tertiary", - "content": "Lần đầu sử dụng?", - "fontFamily": "Roboto", - "fontSize": 14 - }, - { - "type": "text", - "fill": "$orange-primary", - "content": "Tạo tài khoản", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "fill": "$text-muted", - "textGrowth": "fixed-width", - "width": 280, - "content": "Bằng việc đăng nhập, bạn đồng ý với Điều khoản dịch vụ", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 11, - "lineHeight": 1.4 - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-page": { "type": "color", "value": "#0A0A0B" }, - "bg-elevated": { "type": "color", "value": "#1A1A1D" }, - "bg-interactive": { "type": "color", "value": "#2A2A2E" }, - "border-default": { "type": "color", "value": "#2A2A2E" }, - "orange-primary": { "type": "color", "value": "#FF5C00" }, - "text-primary": { "type": "color", "value": "#FFFFFF" }, - "text-secondary": { "type": "color", "value": "#ADADB0" }, - "text-tertiary": { "type": "color", "value": "#8B8B90" }, - "text-muted": { "type": "color", "value": "#6B6B70" } - } -} diff --git a/pencil-design/src/pages/tPOS/auth/login/customer-tablet.pen b/pencil-design/src/pages/tPOS/auth/login/customer-tablet.pen deleted file mode 100644 index 075c0470..00000000 --- a/pencil-design/src/pages/tPOS/auth/login/customer-tablet.pen +++ /dev/null @@ -1,328 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "CustomerLoginTablet", - "name": "Customer Login - Tablet", - "width": 1024, - "height": 768, - "fill": "$bg-page", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "loginCard", - "width": 480, - "fill": "$bg-surface", - "cornerRadius": 24, - "stroke": { "thickness": 1, "fill": "$border-subtle" }, - "layout": "vertical", - "gap": 28, - "padding": 40, - "children": [ - { - "type": "frame", - "name": "cardHeader", - "width": "fill_container", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "logoContainer", - "width": 56, - "height": 56, - "fill": { - "type": "gradient", - "gradientType": "linear", - "rotation": 135, - "colors": [ - { "color": "#FF5C00", "position": 0 }, - { "color": "#FF8A4C", "position": 1 } - ] - }, - "cornerRadius": 14, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "$text-primary", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "fill": "$text-primary", - "content": "Đăng nhập GoodGo", - "fontFamily": "Roboto", - "fontSize": 26, - "fontWeight": "600" - }, - { - "type": "text", - "fill": "$text-tertiary", - "content": "Đặt hàng dễ dàng, tích điểm nhanh chóng", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "name": "formSection", - "width": "fill_container", - "layout": "vertical", - "gap": 20, - "children": [ - { - "type": "frame", - "name": "phoneField", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "fill": "$text-secondary", - "content": "Số điện thoại", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "width": "fill_container", - "height": 50, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "gap": 0, - "alignItems": "center", - "children": [ - { - "type": "frame", - "height": "fill_container", - "fill": "$bg-interactive", - "cornerRadius": [10, 0, 0, 10], - "padding": [0, 14], - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "content": "🇻🇳", - "fontSize": 16 - }, - { - "type": "text", - "fill": "$text-secondary", - "content": "+84", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "width": "fill_container", - "height": "fill_container", - "padding": [0, 14], - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "$text-muted", - "content": "Nhập số điện thoại", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "name": "submitButton", - "width": "fill_container", - "height": 50, - "fill": { - "type": "gradient", - "gradientType": "linear", - "rotation": 135, - "colors": [ - { "color": "#FF5C00", "position": 0 }, - { "color": "#FF8A4C", "position": 1 } - ] - }, - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "$text-primary", - "content": "Gửi mã OTP", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "name": "socialDivider", - "width": "fill_container", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "width": "fill_container", - "height": 1, - "fill": "$border-default" - }, - { - "type": "text", - "fill": "$text-muted", - "content": "hoặc tiếp tục với", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "frame", - "width": "fill_container", - "height": 1, - "fill": "$border-default" - } - ] - }, - { - "type": "frame", - "name": "socialRow", - "width": "fill_container", - "justifyContent": "center", - "gap": 16, - "children": [ - { - "type": "frame", - "width": 54, - "height": 54, - "fill": "#FFFFFF", - "cornerRadius": 14, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "#4285F4", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "width": 54, - "height": 54, - "fill": "#000000", - "cornerRadius": 14, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "width": 26, - "height": 26, - "iconFontName": "apple", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - } - ] - }, - { - "type": "frame", - "width": 54, - "height": 54, - "fill": "#0068FF", - "cornerRadius": 14, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "#FFFFFF", - "content": "Z", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "700" - } - ] - } - ] - }, - { - "type": "frame", - "name": "footer", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "gap": 4, - "children": [ - { - "type": "text", - "fill": "$text-tertiary", - "content": "Lần đầu sử dụng?", - "fontFamily": "Roboto", - "fontSize": 14 - }, - { - "type": "text", - "fill": "$orange-primary", - "content": "Tạo tài khoản", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-page": { "type": "color", "value": "#0A0A0B" }, - "bg-surface": { "type": "color", "value": "#111113" }, - "bg-elevated": { "type": "color", "value": "#1A1A1D" }, - "bg-interactive": { "type": "color", "value": "#2A2A2E" }, - "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" }, - "text-muted": { "type": "color", "value": "#6B6B70" } - } -} diff --git a/pencil-design/src/pages/tPOS/auth/login/staff-desktop.pen b/pencil-design/src/pages/tPOS/auth/login/staff-desktop.pen deleted file mode 100644 index 461d3029..00000000 --- a/pencil-design/src/pages/tPOS/auth/login/staff-desktop.pen +++ /dev/null @@ -1,302 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "StaffLoginPage", - "name": "Staff Login Page - Desktop", - "width": 1440, - "height": 900, - "fill": "$bg-page", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "loginCard", - "width": 440, - "fill": "$bg-surface", - "cornerRadius": 24, - "stroke": { "thickness": 1, "fill": "$border-subtle" }, - "layout": "vertical", - "gap": 32, - "padding": 48, - "children": [ - { - "type": "frame", - "name": "cardHeader", - "width": "fill_container", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "logoRow", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "logoContainer", - "width": 48, - "height": 48, - "fill": { - "type": "gradient", - "gradientType": "linear", - "rotation": 135, - "colors": [ - { "color": "#FF5C00", "position": 0 }, - { "color": "#FF8A4C", "position": 1 } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "$text-primary", - "content": "a", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "fill": "$text-primary", - "content": "aPOS", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "name": "roleBadge", - "fill": "$status-success-bg", - "cornerRadius": 100, - "padding": [6, 16], - "children": [ - { - "type": "text", - "fill": "$status-success", - "content": "NHÂN VIÊN", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600", - "letterSpacing": 1 - } - ] - }, - { - "type": "text", - "fill": "$text-tertiary", - "content": "Đăng nhập để bắt đầu ca làm việc", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "name": "formSection", - "width": "fill_container", - "layout": "vertical", - "gap": 20, - "children": [ - { - "type": "frame", - "name": "emailField", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "fill": "$text-secondary", - "content": "Email hoặc số điện thoại", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "inputWrapper", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "padding": [0, 16], - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "width": 18, - "height": 18, - "iconFontName": "user", - "iconFontFamily": "lucide", - "fill": "$text-muted" - }, - { - "type": "text", - "fill": "$text-muted", - "content": "Tài khoản được cấp", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - }, - { - "type": "frame", - "name": "passwordField", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "fill": "$text-secondary", - "content": "Mật khẩu", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "name": "inputWrapper", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "padding": [0, 16], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "width": 18, - "height": 18, - "iconFontName": "lock", - "iconFontFamily": "lucide", - "fill": "$text-muted" - }, - { - "type": "text", - "fill": "$text-muted", - "content": "••••••••", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "icon_font", - "width": 18, - "height": 18, - "iconFontName": "eye-off", - "iconFontFamily": "lucide", - "fill": "$text-muted" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "name": "submitButton", - "width": "fill_container", - "height": 48, - "fill": "$status-success", - "cornerRadius": 10, - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "width": 18, - "height": 18, - "iconFontName": "log-in", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "fill": "$text-primary", - "content": "Bắt đầu ca", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "name": "helpLink", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "text", - "fill": "$text-tertiary", - "content": "Quên mật khẩu? Liên hệ quản lý", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - } - ] - }, - { - "type": "frame", - "name": "roleHint", - "layout": "vertical", - "gap": 8, - "padding": [40, 0, 0, 0], - "alignItems": "center", - "position": "absolute", - "x": 500, - "y": 780, - "children": [ - { - "type": "text", - "fill": "$text-muted", - "content": "Cũng dùng cho: Thu ngân · Bếp · Giao hàng · Kho", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - } - ] - } - ], - "variables": { - "bg-page": { "type": "color", "value": "#0A0A0B" }, - "bg-surface": { "type": "color", "value": "#111113" }, - "bg-elevated": { "type": "color", "value": "#1A1A1D" }, - "border-default": { "type": "color", "value": "#2A2A2E" }, - "border-subtle": { "type": "color", "value": "#1F1F23" }, - "text-primary": { "type": "color", "value": "#FFFFFF" }, - "text-secondary": { "type": "color", "value": "#ADADB0" }, - "text-tertiary": { "type": "color", "value": "#8B8B90" }, - "text-muted": { "type": "color", "value": "#6B6B70" }, - "status-success": { "type": "color", "value": "#22C55E" }, - "status-success-bg": { "type": "color", "value": "#22C55E1A" } - } -} diff --git a/pencil-design/src/pages/tPOS/auth/login/staff-mobile.pen b/pencil-design/src/pages/tPOS/auth/login/staff-mobile.pen deleted file mode 100644 index dd5651fc..00000000 --- a/pencil-design/src/pages/tPOS/auth/login/staff-mobile.pen +++ /dev/null @@ -1,291 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "StaffLoginMobile", - "name": "Staff Login - Mobile", - "width": 390, - "height": 844, - "fill": "$bg-page", - "layout": "vertical", - "children": [ - { - "type": "frame", - "name": "header", - "width": "fill_container", - "padding": [16, 24], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "frame", - "width": 40, - "height": 40, - "fill": { - "type": "gradient", - "gradientType": "linear", - "rotation": 135, - "colors": [ - { "color": "#FF5C00", "position": 0 }, - { "color": "#FF8A4C", "position": 1 } - ] - }, - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "$text-primary", - "content": "a", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "700" - } - ] - }, - { - "type": "text", - "fill": "$text-primary", - "content": "aPOS", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "700" - } - ] - } - ] - }, - { - "type": "frame", - "name": "content", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "justifyContent": "center", - "padding": 24, - "gap": 28, - "children": [ - { - "type": "frame", - "name": "headerContent", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "fill": "$status-success-bg", - "cornerRadius": 100, - "padding": [8, 16], - "children": [ - { - "type": "text", - "fill": "$status-success", - "content": "NHÂN VIÊN", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600", - "letterSpacing": 1 - } - ] - }, - { - "type": "text", - "fill": "$text-primary", - "content": "Đăng nhập hệ thống", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - }, - { - "type": "text", - "fill": "$text-tertiary", - "content": "Đăng nhập để bắt đầu ca làm việc", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "name": "formSection", - "width": "fill_container", - "layout": "vertical", - "gap": 20, - "children": [ - { - "type": "frame", - "name": "emailField", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "fill": "$text-secondary", - "content": "Email hoặc số điện thoại", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "width": "fill_container", - "height": 52, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "padding": [0, 16], - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "width": 20, - "height": 20, - "iconFontName": "user", - "iconFontFamily": "lucide", - "fill": "$text-muted" - }, - { - "type": "text", - "fill": "$text-muted", - "content": "Tài khoản được cấp", - "fontFamily": "Roboto", - "fontSize": 15 - } - ] - } - ] - }, - { - "type": "frame", - "name": "passwordField", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "fill": "$text-secondary", - "content": "Mật khẩu", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "width": "fill_container", - "height": 52, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "padding": [0, 16], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "width": 20, - "height": 20, - "iconFontName": "lock", - "iconFontFamily": "lucide", - "fill": "$text-muted" - }, - { - "type": "text", - "fill": "$text-muted", - "content": "••••••••", - "fontFamily": "Roboto", - "fontSize": 15 - } - ] - }, - { - "type": "icon_font", - "width": 20, - "height": 20, - "iconFontName": "eye-off", - "iconFontFamily": "lucide", - "fill": "$text-muted" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "name": "submitButton", - "width": "fill_container", - "height": 52, - "fill": "$status-success", - "cornerRadius": 12, - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "width": 20, - "height": 20, - "iconFontName": "log-in", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "fill": "$text-primary", - "content": "Bắt đầu ca", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "name": "helpLink", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "text", - "fill": "$text-tertiary", - "content": "Quên mật khẩu? Liên hệ quản lý", - "fontFamily": "Roboto", - "fontSize": 13 - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-page": { "type": "color", "value": "#0A0A0B" }, - "bg-elevated": { "type": "color", "value": "#1A1A1D" }, - "border-default": { "type": "color", "value": "#2A2A2E" }, - "text-primary": { "type": "color", "value": "#FFFFFF" }, - "text-secondary": { "type": "color", "value": "#ADADB0" }, - "text-tertiary": { "type": "color", "value": "#8B8B90" }, - "text-muted": { "type": "color", "value": "#6B6B70" }, - "status-success": { "type": "color", "value": "#22C55E" }, - "status-success-bg": { "type": "color", "value": "#22C55E1A" } - } -} diff --git a/pencil-design/src/pages/tPOS/auth/login/staff-tablet.pen b/pencil-design/src/pages/tPOS/auth/login/staff-tablet.pen deleted file mode 100644 index 1294208e..00000000 --- a/pencil-design/src/pages/tPOS/auth/login/staff-tablet.pen +++ /dev/null @@ -1,170 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "StaffLoginTablet", - "name": "Staff Login - Tablet", - "width": 1024, - "height": 768, - "fill": "$bg-page", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "loginCard", - "width": 460, - "fill": "$bg-surface", - "cornerRadius": 24, - "stroke": { "thickness": 1, "fill": "$border-subtle" }, - "layout": "vertical", - "gap": 32, - "padding": 44, - "children": [ - { - "type": "frame", - "name": "cardHeader", - "width": "fill_container", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "width": 48, - "height": 48, - "fill": { - "type": "gradient", - "gradientType": "linear", - "rotation": 135, - "colors": [ - { "color": "#FF5C00", "position": 0 }, - { "color": "#FF8A4C", "position": 1 } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "text", "fill": "#FFFFFF", "content": "a", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700" } - ] - }, - { "type": "text", "fill": "#FFFFFF", "content": "aPOS", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700" } - ] - }, - { - "type": "frame", - "fill": "#22C55E1A", - "cornerRadius": 100, - "padding": [6, 16], - "children": [ - { "type": "text", "fill": "#22C55E", "content": "NHÂN VIÊN", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600", "letterSpacing": 1 } - ] - }, - { "type": "text", "fill": "#8B8B90", "content": "Đăng nhập để bắt đầu ca làm việc", "fontFamily": "Roboto", "fontSize": 14 } - ] - }, - { - "type": "frame", - "name": "formSection", - "width": "fill_container", - "layout": "vertical", - "gap": 20, - "children": [ - { - "type": "frame", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { "type": "text", "fill": "#ADADB0", "content": "Email hoặc số điện thoại", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" }, - { - "type": "frame", - "width": "fill_container", - "height": 50, - "fill": "#1A1A1D", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "#2A2A2E" }, - "padding": [0, 16], - "gap": 10, - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "#6B6B70" }, - { "type": "text", "fill": "#6B6B70", "content": "Tài khoản được cấp", "fontFamily": "Roboto", "fontSize": 14 } - ] - } - ] - }, - { - "type": "frame", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { "type": "text", "fill": "#ADADB0", "content": "Mật khẩu", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" }, - { - "type": "frame", - "width": "fill_container", - "height": 50, - "fill": "#1A1A1D", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "#2A2A2E" }, - "padding": [0, 16], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "gap": 10, - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "lock", "iconFontFamily": "lucide", "fill": "#6B6B70" }, - { "type": "text", "fill": "#6B6B70", "content": "••••••••", "fontFamily": "Roboto", "fontSize": 14 } - ] - }, - { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "eye-off", "iconFontFamily": "lucide", "fill": "#6B6B70" } - ] - } - ] - } - ] - }, - { - "type": "frame", - "width": "fill_container", - "height": 50, - "fill": "#22C55E", - "cornerRadius": 10, - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "log-in", "iconFontFamily": "lucide", "fill": "#FFFFFF" }, - { "type": "text", "fill": "#FFFFFF", "content": "Bắt đầu ca", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600" } - ] - }, - { - "type": "frame", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { "type": "text", "fill": "#8B8B90", "content": "Quên mật khẩu? Liên hệ quản lý", "fontFamily": "Roboto", "fontSize": 13 } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-page": { "type": "color", "value": "#0A0A0B" }, - "bg-surface": { "type": "color", "value": "#111113" }, - "border-subtle": { "type": "color", "value": "#1F1F23" } - } -} diff --git a/pencil-design/src/pages/tPOS/auth/register/customer-desktop.pen b/pencil-design/src/pages/tPOS/auth/register/customer-desktop.pen deleted file mode 100644 index 3a07899b..00000000 --- a/pencil-design/src/pages/tPOS/auth/register/customer-desktop.pen +++ /dev/null @@ -1,592 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "RegisterPage", - "name": "Customer Register Page - Desktop", - "width": 1440, - "height": 1000, - "fill": "$bg-page", - "layout": "horizontal", - "children": [ - { - "type": "frame", - "name": "brandPanel", - "width": 640, - "height": "fill_container", - "fill": { - "type": "gradient", - "gradientType": "linear", - "rotation": 135, - "colors": [ - { "color": "#0A0A0B", "position": 0 }, - { "color": "#1A1A1D", "position": 0.5 }, - { "color": "#0A0A0B", "position": 1 } - ] - }, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "padding": 80, - "children": [ - { - "type": "frame", - "name": "brandContent", - "layout": "vertical", - "gap": 40, - "alignItems": "center", - "children": [ - { - "type": "frame", - "name": "logoContainer", - "width": 80, - "height": 80, - "fill": { - "type": "gradient", - "gradientType": "linear", - "rotation": 135, - "colors": [ - { "color": "#FF5C00", "position": 0 }, - { "color": "#FF8A4C", "position": 1 } - ] - }, - "cornerRadius": 20, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "$text-primary", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 40, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "$text-primary", - "content": "Tham gia GoodGo", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "700" - }, - { - "type": "text", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 380, - "content": "Đăng ký miễn phí để nhận ưu đãi độc quyền và tích điểm cho mọi đơn hàng.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16 - } - ] - }, - { - "type": "frame", - "name": "benefits", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "frame", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "width": 20, - "height": 20, - "iconFontName": "gift", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "fill": "$text-secondary", - "content": "Ưu đãi 50K cho đơn hàng đầu tiên", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "width": 20, - "height": 20, - "iconFontName": "coins", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "fill": "$text-secondary", - "content": "Tích 1 điểm cho mỗi 10.000đ", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "width": 20, - "height": 20, - "iconFontName": "zap", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "fill": "$text-secondary", - "content": "Flash sale độc quyền hàng tuần", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "name": "authPanel", - "width": "fill_container", - "height": "fill_container", - "fill": "$bg-surface", - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "padding": 60, - "children": [ - { - "type": "frame", - "name": "registerCard", - "width": 400, - "layout": "vertical", - "gap": 28, - "children": [ - { - "type": "frame", - "name": "cardHeader", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "fill": "$text-primary", - "content": "Tạo tài khoản", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "600" - }, - { - "type": "text", - "fill": "$text-tertiary", - "content": "Điền thông tin để đăng ký", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "name": "formSection", - "width": "fill_container", - "layout": "vertical", - "gap": 20, - "children": [ - { - "type": "frame", - "name": "nameField", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "fill": "$text-secondary", - "content": "Họ và tên", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "padding": [0, 16], - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "width": 18, - "height": 18, - "iconFontName": "user", - "iconFontFamily": "lucide", - "fill": "$text-muted" - }, - { - "type": "text", - "fill": "$text-muted", - "content": "Nguyễn Văn A", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - }, - { - "type": "frame", - "name": "phoneField", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "fill": "$text-secondary", - "content": "Số điện thoại", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "frame", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "gap": 0, - "alignItems": "center", - "children": [ - { - "type": "frame", - "height": "fill_container", - "fill": "$bg-interactive", - "cornerRadius": [10, 0, 0, 10], - "padding": [0, 12], - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "content": "🇻🇳", - "fontSize": 16 - }, - { - "type": "text", - "fill": "$text-secondary", - "content": "+84", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "width": "fill_container", - "height": "fill_container", - "padding": [0, 12], - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "$text-muted", - "content": "Nhập số điện thoại", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "name": "emailField", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "frame", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "fill": "$text-secondary", - "content": "Email", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "text", - "fill": "$text-muted", - "content": "(Tùy chọn)", - "fontFamily": "Roboto", - "fontSize": 12 - } - ] - }, - { - "type": "frame", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "padding": [0, 16], - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "width": 18, - "height": 18, - "iconFontName": "mail", - "iconFontFamily": "lucide", - "fill": "$text-muted" - }, - { - "type": "text", - "fill": "$text-muted", - "content": "email@example.com", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "name": "termsCheckbox", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "frame", - "width": 20, - "height": 20, - "fill": "$bg-elevated", - "cornerRadius": 4, - "stroke": { "thickness": 1, "fill": "$border-default" } - }, - { - "type": "frame", - "width": 280, - "children": [ - { - "type": "text", - "fill": "$text-tertiary", - "content": "Tôi đồng ý với Điều khoản dịch vụ và Chính sách bảo mật", - "fontFamily": "Roboto", - "fontSize": 13, - "lineHeight": 1.4 - } - ] - } - ] - }, - { - "type": "frame", - "name": "submitButton", - "width": "fill_container", - "height": 48, - "fill": { - "type": "gradient", - "gradientType": "linear", - "rotation": 135, - "colors": [ - { "color": "#FF5C00", "position": 0 }, - { "color": "#FF8A4C", "position": 1 } - ] - }, - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "$text-primary", - "content": "Đăng ký", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "name": "socialDivider", - "width": "fill_container", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "width": "fill_container", - "height": 1, - "fill": "$border-default" - }, - { - "type": "text", - "fill": "$text-muted", - "content": "hoặc đăng ký với", - "fontFamily": "Roboto", - "fontSize": 12 - }, - { - "type": "frame", - "width": "fill_container", - "height": 1, - "fill": "$border-default" - } - ] - }, - { - "type": "frame", - "name": "socialIconsRow", - "width": "fill_container", - "justifyContent": "center", - "gap": 16, - "children": [ - { - "type": "frame", - "width": 56, - "height": 56, - "fill": "#FFFFFF", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "#4285F4", - "content": "G", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "width": 56, - "height": 56, - "fill": "#000000", - "cornerRadius": 12, - "stroke": { "thickness": 1, "fill": "$border-default" }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "width": 26, - "height": 26, - "iconFontName": "apple", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - } - ] - }, - { - "type": "frame", - "width": 56, - "height": 56, - "fill": "#0068FF", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "fill": "#FFFFFF", - "content": "Z", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "700" - } - ] - } - ] - }, - { - "type": "frame", - "name": "footerLinks", - "width": "fill_container", - "justifyContent": "center", - "gap": 4, - "children": [ - { - "type": "text", - "fill": "$text-tertiary", - "content": "Đã có tài khoản?", - "fontFamily": "Roboto", - "fontSize": 14 - }, - { - "type": "text", - "fill": "$orange-primary", - "content": "Đăng nhập", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-page": { "type": "color", "value": "#0A0A0B" }, - "bg-surface": { "type": "color", "value": "#111113" }, - "bg-elevated": { "type": "color", "value": "#1A1A1D" }, - "bg-interactive": { "type": "color", "value": "#2A2A2E" }, - "border-default": { "type": "color", "value": "#2A2A2E" }, - "orange-primary": { "type": "color", "value": "#FF5C00" }, - "text-primary": { "type": "color", "value": "#FFFFFF" }, - "text-secondary": { "type": "color", "value": "#ADADB0" }, - "text-tertiary": { "type": "color", "value": "#8B8B90" }, - "text-muted": { "type": "color", "value": "#6B6B70" } - } -} diff --git a/pencil-design/src/pages/tPOS/auth/register/customer-mobile.pen b/pencil-design/src/pages/tPOS/auth/register/customer-mobile.pen deleted file mode 100644 index 440324d7..00000000 --- a/pencil-design/src/pages/tPOS/auth/register/customer-mobile.pen +++ /dev/null @@ -1,241 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "RegisterMobile", - "name": "Customer Register - Mobile", - "width": 390, - "height": 844, - "fill": "#0A0A0B", - "layout": "vertical", - "children": [ - { - "type": "frame", - "width": "fill_container", - "padding": [16, 24], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "frame", - "width": 40, - "height": 40, - "fill": { "type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{ "color": "#FF5C00", "position": 0 }, { "color": "#FF8A4C", "position": 1 }] }, - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "text", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700" } - ] - }, - { "type": "text", "fill": "#FFFFFF", "content": "GoodGo", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700" } - ] - } - ] - }, - { - "type": "frame", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "justifyContent": "space_between", - "padding": 24, - "children": [ - { - "type": "frame", - "width": "fill_container", - "layout": "vertical", - "gap": 24, - "children": [ - { - "type": "frame", - "layout": "vertical", - "gap": 8, - "children": [ - { "type": "text", "fill": "#FFFFFF", "content": "Tạo tài khoản", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "600" }, - { "type": "text", "fill": "#8B8B90", "content": "Đăng ký miễn phí để nhận ưu đãi", "fontFamily": "Roboto", "fontSize": 14 } - ] - }, - { - "type": "frame", - "width": "fill_container", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "frame", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { "type": "text", "fill": "#ADADB0", "content": "Họ và tên", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" }, - { - "type": "frame", - "width": "fill_container", - "height": 52, - "fill": "#1A1A1D", - "cornerRadius": 12, - "stroke": { "thickness": 1, "fill": "#2A2A2E" }, - "padding": [0, 16], - "gap": 10, - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 20, "height": 20, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "#6B6B70" }, - { "type": "text", "fill": "#6B6B70", "content": "Nguyễn Văn A", "fontFamily": "Roboto", "fontSize": 15 } - ] - } - ] - }, - { - "type": "frame", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { "type": "text", "fill": "#ADADB0", "content": "Số điện thoại", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" }, - { - "type": "frame", - "width": "fill_container", - "height": 52, - "fill": "#1A1A1D", - "cornerRadius": 12, - "stroke": { "thickness": 1, "fill": "#2A2A2E" }, - "alignItems": "center", - "children": [ - { - "type": "frame", - "height": "fill_container", - "fill": "#2A2A2E", - "cornerRadius": [12, 0, 0, 12], - "padding": [0, 14], - "gap": 6, - "alignItems": "center", - "children": [ - { "type": "text", "content": "🇻🇳", "fontSize": 18 }, - { "type": "text", "fill": "#ADADB0", "content": "+84", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500" } - ] - }, - { - "type": "frame", - "width": "fill_container", - "height": "fill_container", - "padding": [0, 14], - "alignItems": "center", - "children": [ - { "type": "text", "fill": "#6B6B70", "content": "Nhập số điện thoại", "fontFamily": "Roboto", "fontSize": 15 } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "frame", - "width": 22, - "height": 22, - "fill": "#1A1A1D", - "cornerRadius": 4, - "stroke": { "thickness": 1, "fill": "#2A2A2E" } - }, - { "type": "text", "fill": "#8B8B90", "content": "Tôi đồng ý với Điều khoản dịch vụ", "fontFamily": "Roboto", "fontSize": 13 } - ] - }, - { - "type": "frame", - "width": "fill_container", - "height": 52, - "fill": { "type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{ "color": "#FF5C00", "position": 0 }, { "color": "#FF8A4C", "position": 1 }] }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "text", "fill": "#FFFFFF", "content": "Đăng ký", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600" } - ] - }, - { - "type": "frame", - "width": "fill_container", - "gap": 14, - "alignItems": "center", - "children": [ - { "type": "frame", "width": "fill_container", "height": 1, "fill": "#2A2A2E" }, - { "type": "text", "fill": "#6B6B70", "content": "hoặc", "fontFamily": "Roboto", "fontSize": 12 }, - { "type": "frame", "width": "fill_container", "height": 1, "fill": "#2A2A2E" } - ] - }, - { - "type": "frame", - "width": "fill_container", - "justifyContent": "center", - "gap": 16, - "children": [ - { - "type": "frame", - "width": 60, - "height": 60, - "fill": "#FFFFFF", - "cornerRadius": 16, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "text", "fill": "#4285F4", "content": "G", "fontFamily": "Roboto", "fontSize": 26, "fontWeight": "700" } - ] - }, - { - "type": "frame", - "width": 60, - "height": 60, - "fill": "#000000", - "cornerRadius": 16, - "stroke": { "thickness": 1, "fill": "#2A2A2E" }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 28, "height": 28, "iconFontName": "apple", "iconFontFamily": "lucide", "fill": "#FFFFFF" } - ] - }, - { - "type": "frame", - "width": 60, - "height": 60, - "fill": "#0068FF", - "cornerRadius": 16, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "text", "fill": "#FFFFFF", "content": "Z", "fontFamily": "Roboto", "fontSize": 26, "fontWeight": "700" } - ] - } - ] - } - ] - }, - { - "type": "frame", - "width": "fill_container", - "justifyContent": "center", - "gap": 4, - "children": [ - { "type": "text", "fill": "#8B8B90", "content": "Đã có tài khoản?", "fontFamily": "Roboto", "fontSize": 14 }, - { "type": "text", "fill": "#FF5C00", "content": "Đăng nhập", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" } - ] - } - ] - } - ] - } - ] -} diff --git a/pencil-design/src/pages/tPOS/auth/register/customer-tablet.pen b/pencil-design/src/pages/tPOS/auth/register/customer-tablet.pen deleted file mode 100644 index 28976671..00000000 --- a/pencil-design/src/pages/tPOS/auth/register/customer-tablet.pen +++ /dev/null @@ -1,253 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "RegisterTablet", - "name": "Customer Register - Tablet", - "width": 1024, - "height": 768, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "width": 480, - "fill": "#111113", - "cornerRadius": 24, - "stroke": { "thickness": 1, "fill": "#1F1F23" }, - "layout": "vertical", - "gap": 24, - "padding": 40, - "children": [ - { - "type": "frame", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "width": 56, - "height": 56, - "fill": { "type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{ "color": "#FF5C00", "position": 0 }, { "color": "#FF8A4C", "position": 1 }] }, - "cornerRadius": 14, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "text", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700" } - ] - }, - { "type": "text", "fill": "#FFFFFF", "content": "Tạo tài khoản GoodGo", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" }, - { "type": "text", "fill": "#8B8B90", "content": "Đăng ký miễn phí để nhận ưu đãi", "fontFamily": "Roboto", "fontSize": 14 } - ] - }, - { - "type": "frame", - "width": "fill_container", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "frame", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "children": [ - { "type": "text", "fill": "#ADADB0", "content": "Họ và tên", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" }, - { - "type": "frame", - "width": "fill_container", - "height": 48, - "fill": "#1A1A1D", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "#2A2A2E" }, - "padding": [0, 16], - "gap": 10, - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "#6B6B70" }, - { "type": "text", "fill": "#6B6B70", "content": "Nguyễn Văn A", "fontFamily": "Roboto", "fontSize": 14 } - ] - } - ] - }, - { - "type": "frame", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "children": [ - { "type": "text", "fill": "#ADADB0", "content": "Số điện thoại", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" }, - { - "type": "frame", - "width": "fill_container", - "height": 48, - "fill": "#1A1A1D", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "#2A2A2E" }, - "alignItems": "center", - "children": [ - { - "type": "frame", - "height": "fill_container", - "fill": "#2A2A2E", - "cornerRadius": [10, 0, 0, 10], - "padding": [0, 12], - "gap": 6, - "alignItems": "center", - "children": [ - { "type": "text", "content": "🇻🇳", "fontSize": 16 }, - { "type": "text", "fill": "#ADADB0", "content": "+84", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" } - ] - }, - { - "type": "frame", - "width": "fill_container", - "height": "fill_container", - "padding": [0, 12], - "alignItems": "center", - "children": [ - { "type": "text", "fill": "#6B6B70", "content": "Nhập số điện thoại", "fontFamily": "Roboto", "fontSize": 14 } - ] - } - ] - } - ] - }, - { - "type": "frame", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "frame", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { "type": "text", "fill": "#ADADB0", "content": "Email", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" }, - { "type": "text", "fill": "#6B6B70", "content": "(Tùy chọn)", "fontFamily": "Roboto", "fontSize": 12 } - ] - }, - { - "type": "frame", - "width": "fill_container", - "height": 48, - "fill": "#1A1A1D", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "#2A2A2E" }, - "padding": [0, 16], - "gap": 10, - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "mail", "iconFontFamily": "lucide", "fill": "#6B6B70" }, - { "type": "text", "fill": "#6B6B70", "content": "email@example.com", "fontFamily": "Roboto", "fontSize": 14 } - ] - } - ] - } - ] - }, - { - "type": "frame", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "frame", - "width": 20, - "height": 20, - "fill": "#1A1A1D", - "cornerRadius": 4, - "stroke": { "thickness": 1, "fill": "#2A2A2E" } - }, - { "type": "text", "fill": "#8B8B90", "content": "Tôi đồng ý với Điều khoản dịch vụ", "fontFamily": "Roboto", "fontSize": 13 } - ] - }, - { - "type": "frame", - "width": "fill_container", - "height": 48, - "fill": { "type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{ "color": "#FF5C00", "position": 0 }, { "color": "#FF8A4C", "position": 1 }] }, - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "text", "fill": "#FFFFFF", "content": "Đăng ký", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600" } - ] - }, - { - "type": "frame", - "width": "fill_container", - "gap": 16, - "alignItems": "center", - "children": [ - { "type": "frame", "width": "fill_container", "height": 1, "fill": "#2A2A2E" }, - { "type": "text", "fill": "#6B6B70", "content": "hoặc", "fontFamily": "Roboto", "fontSize": 12 }, - { "type": "frame", "width": "fill_container", "height": 1, "fill": "#2A2A2E" } - ] - }, - { - "type": "frame", - "width": "fill_container", - "justifyContent": "center", - "gap": 16, - "children": [ - { - "type": "frame", - "width": 52, - "height": 52, - "fill": "#FFFFFF", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "text", "fill": "#4285F4", "content": "G", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700" } - ] - }, - { - "type": "frame", - "width": 52, - "height": 52, - "fill": "#000000", - "cornerRadius": 12, - "stroke": { "thickness": 1, "fill": "#2A2A2E" }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 24, "height": 24, "iconFontName": "apple", "iconFontFamily": "lucide", "fill": "#FFFFFF" } - ] - }, - { - "type": "frame", - "width": 52, - "height": 52, - "fill": "#0068FF", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "text", "fill": "#FFFFFF", "content": "Z", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700" } - ] - } - ] - }, - { - "type": "frame", - "width": "fill_container", - "justifyContent": "center", - "gap": 4, - "children": [ - { "type": "text", "fill": "#8B8B90", "content": "Đã có tài khoản?", "fontFamily": "Roboto", "fontSize": 14 }, - { "type": "text", "fill": "#FF5C00", "content": "Đăng nhập", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" } - ] - } - ] - } - ] - } - ] -} diff --git a/pencil-design/src/pages/tPOS/auth/workflow/email-sent.pen b/pencil-design/src/pages/tPOS/auth/workflow/email-sent.pen deleted file mode 100644 index 77f3a822..00000000 --- a/pencil-design/src/pages/tPOS/auth/workflow/email-sent.pen +++ /dev/null @@ -1,117 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "EmailSent", - "name": "Email Sent Confirmation", - "width": 1440, - "height": 900, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "width": 440, - "fill": "#111113", - "cornerRadius": 24, - "stroke": { "thickness": 1, "fill": "#1F1F23" }, - "layout": "vertical", - "gap": 28, - "padding": 48, - "alignItems": "center", - "children": [ - { - "type": "frame", - "width": 88, - "height": 88, - "fill": "#22C55E1A", - "cornerRadius": 44, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 40, "height": 40, "iconFontName": "mail-check", "iconFontFamily": "lucide", "fill": "#22C55E" } - ] - }, - { - "type": "frame", - "layout": "vertical", - "gap": 12, - "alignItems": "center", - "children": [ - { "type": "text", "fill": "#FFFFFF", "content": "Kiểm tra email của bạn", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" }, - { - "type": "text", - "fill": "#8B8B90", - "textGrowth": "fixed-width", - "width": 320, - "content": "Chúng tôi đã gửi đường dẫn đặt lại mật khẩu đến:", - "lineHeight": 1.5, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 14 - }, - { "type": "text", "fill": "#FFFFFF", "content": "n****a@gmail.com", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "500" } - ] - }, - { - "type": "frame", - "width": "fill_container", - "fill": "#F59E0B1A", - "cornerRadius": 10, - "padding": 16, - "gap": 10, - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "info", "iconFontFamily": "lucide", "fill": "#F59E0B" }, - { "type": "text", "fill": "#F59E0B", "content": "Link có hiệu lực trong 15 phút", "fontFamily": "Roboto", "fontSize": 13 } - ] - }, - { - "type": "frame", - "width": "fill_container", - "height": 50, - "fill": "#1A1A1D", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "#2A2A2E" }, - "justifyContent": "center", - "alignItems": "center", - "gap": 8, - "children": [ - { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "mail", "iconFontFamily": "lucide", "fill": "#FFFFFF" }, - { "type": "text", "fill": "#FFFFFF", "content": "Mở ứng dụng Email", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" } - ] - }, - { - "type": "frame", - "layout": "vertical", - "gap": 8, - "alignItems": "center", - "children": [ - { "type": "text", "fill": "#8B8B90", "content": "Không nhận được email?", "fontFamily": "Roboto", "fontSize": 13 }, - { - "type": "frame", - "gap": 4, - "children": [ - { "type": "text", "fill": "#8B8B90", "content": "Kiểm tra spam hoặc", "fontFamily": "Roboto", "fontSize": 13 }, - { "type": "text", "fill": "#FF5C00", "content": "gửi lại", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500" } - ] - } - ] - }, - { - "type": "frame", - "gap": 6, - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 16, "height": 16, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "#8B8B90" }, - { "type": "text", "fill": "#8B8B90", "content": "Quay lại đăng nhập", "fontFamily": "Roboto", "fontSize": 13 } - ] - } - ] - } - ] - } - ] -} diff --git a/pencil-design/src/pages/tPOS/auth/workflow/otp-verify.pen b/pencil-design/src/pages/tPOS/auth/workflow/otp-verify.pen deleted file mode 100644 index b77f5f80..00000000 --- a/pencil-design/src/pages/tPOS/auth/workflow/otp-verify.pen +++ /dev/null @@ -1,187 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "OTPVerifyDesktop", - "name": "OTP Verify - Desktop", - "width": 1440, - "height": 900, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "width": 440, - "fill": "#111113", - "cornerRadius": 24, - "stroke": { "thickness": 1, "fill": "#1F1F23" }, - "layout": "vertical", - "gap": 32, - "padding": 48, - "children": [ - { - "type": "frame", - "width": "fill_container", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "width": 72, - "height": 72, - "fill": "#22C55E1A", - "cornerRadius": 36, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 32, "height": 32, "iconFontName": "smartphone", "iconFontFamily": "lucide", "fill": "#22C55E" } - ] - }, - { "type": "text", "fill": "#FFFFFF", "content": "Xác thực OTP", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" }, - { - "type": "text", - "fill": "#8B8B90", - "textGrowth": "fixed-width", - "width": 320, - "content": "Nhập mã 6 số đã gửi đến số điện thoại +84 ••• ••• 678", - "lineHeight": 1.5, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "width": "fill_container", - "justifyContent": "center", - "gap": 12, - "children": [ - { "type": "frame", "width": 48, "height": 56, "fill": "#1A1A1D", "cornerRadius": 10, "stroke": { "thickness": 1, "fill": "#2A2A2E" }, "justifyContent": "center", "alignItems": "center", "children": [{ "type": "text", "fill": "#6B6B70", "content": "•", "fontFamily": "Roboto", "fontSize": 24 }] }, - { "type": "frame", "width": 48, "height": 56, "fill": "#1A1A1D", "cornerRadius": 10, "stroke": { "thickness": 1, "fill": "#2A2A2E" }, "justifyContent": "center", "alignItems": "center", "children": [{ "type": "text", "fill": "#6B6B70", "content": "•", "fontFamily": "Roboto", "fontSize": 24 }] }, - { "type": "frame", "width": 48, "height": 56, "fill": "#1A1A1D", "cornerRadius": 10, "stroke": { "thickness": 1, "fill": "#2A2A2E" }, "justifyContent": "center", "alignItems": "center", "children": [{ "type": "text", "fill": "#6B6B70", "content": "•", "fontFamily": "Roboto", "fontSize": 24 }] }, - { "type": "frame", "width": 48, "height": 56, "fill": "#1A1A1D", "cornerRadius": 10, "stroke": { "thickness": 1, "fill": "#2A2A2E" }, "justifyContent": "center", "alignItems": "center", "children": [{ "type": "text", "fill": "#6B6B70", "content": "•", "fontFamily": "Roboto", "fontSize": 24 }] }, - { "type": "frame", "width": 48, "height": 56, "fill": "#1A1A1D", "cornerRadius": 10, "stroke": { "thickness": 1, "fill": "#2A2A2E" }, "justifyContent": "center", "alignItems": "center", "children": [{ "type": "text", "fill": "#6B6B70", "content": "•", "fontFamily": "Roboto", "fontSize": 24 }] }, - { "type": "frame", "width": 48, "height": 56, "fill": "#1A1A1D", "cornerRadius": 10, "stroke": { "thickness": 1, "fill": "#2A2A2E" }, "justifyContent": "center", "alignItems": "center", "children": [{ "type": "text", "fill": "#6B6B70", "content": "•", "fontFamily": "Roboto", "fontSize": 24 }] } - ] - }, - { - "type": "frame", - "width": "fill_container", - "height": 50, - "fill": { "type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{ "color": "#FF5C00", "position": 0 }, { "color": "#FF8A4C", "position": 1 }] }, - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "text", "fill": "#FFFFFF", "content": "Xác nhận", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600" } - ] - }, - { - "type": "frame", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "gap": 8, - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 16, "height": 16, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#8B8B90" }, - { "type": "text", "fill": "#8B8B90", "content": "Mã hết hạn sau", "fontFamily": "Roboto", "fontSize": 13 }, - { "type": "text", "fill": "#FF5C00", "content": "04:32", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600" } - ] - }, - { - "type": "frame", - "gap": 4, - "children": [ - { "type": "text", "fill": "#8B8B90", "content": "Không nhận được mã?", "fontFamily": "Roboto", "fontSize": 13 }, - { "type": "text", "fill": "#FF5C00", "content": "Gửi lại", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500" } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "OTPVerifyFilled", - "name": "OTP Verify - Filled", - "x": 1540, - "width": 1440, - "height": 900, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "width": 440, - "fill": "#111113", - "cornerRadius": 24, - "stroke": { "thickness": 1, "fill": "#1F1F23" }, - "layout": "vertical", - "gap": 32, - "padding": 48, - "children": [ - { - "type": "frame", - "width": "fill_container", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "width": 72, - "height": 72, - "fill": "#22C55E1A", - "cornerRadius": 36, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 32, "height": 32, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E" } - ] - }, - { "type": "text", "fill": "#FFFFFF", "content": "Xác thực thành công!", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" }, - { "type": "text", "fill": "#22C55E", "content": "Đang chuyển hướng...", "fontFamily": "Roboto", "fontSize": 14 } - ] - }, - { - "type": "frame", - "width": "fill_container", - "justifyContent": "center", - "gap": 12, - "children": [ - { "type": "frame", "width": 48, "height": 56, "fill": "#22C55E1A", "cornerRadius": 10, "stroke": { "thickness": 2, "fill": "#22C55E" }, "justifyContent": "center", "alignItems": "center", "children": [{ "type": "text", "fill": "#22C55E", "content": "1", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600" }] }, - { "type": "frame", "width": 48, "height": 56, "fill": "#22C55E1A", "cornerRadius": 10, "stroke": { "thickness": 2, "fill": "#22C55E" }, "justifyContent": "center", "alignItems": "center", "children": [{ "type": "text", "fill": "#22C55E", "content": "2", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600" }] }, - { "type": "frame", "width": 48, "height": 56, "fill": "#22C55E1A", "cornerRadius": 10, "stroke": { "thickness": 2, "fill": "#22C55E" }, "justifyContent": "center", "alignItems": "center", "children": [{ "type": "text", "fill": "#22C55E", "content": "3", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600" }] }, - { "type": "frame", "width": 48, "height": 56, "fill": "#22C55E1A", "cornerRadius": 10, "stroke": { "thickness": 2, "fill": "#22C55E" }, "justifyContent": "center", "alignItems": "center", "children": [{ "type": "text", "fill": "#22C55E", "content": "4", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600" }] }, - { "type": "frame", "width": 48, "height": 56, "fill": "#22C55E1A", "cornerRadius": 10, "stroke": { "thickness": 2, "fill": "#22C55E" }, "justifyContent": "center", "alignItems": "center", "children": [{ "type": "text", "fill": "#22C55E", "content": "5", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600" }] }, - { "type": "frame", "width": 48, "height": 56, "fill": "#22C55E1A", "cornerRadius": 10, "stroke": { "thickness": 2, "fill": "#22C55E" }, "justifyContent": "center", "alignItems": "center", "children": [{ "type": "text", "fill": "#22C55E", "content": "6", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600" }] } - ] - }, - { - "type": "frame", - "width": "fill_container", - "height": 4, - "fill": "#1A1A1D", - "cornerRadius": 2, - "children": [ - { "type": "frame", "width": "70%", "height": "fill_container", "fill": "#22C55E", "cornerRadius": 2 } - ] - } - ] - } - ] - } - ] -} diff --git a/pencil-design/src/pages/tPOS/auth/workflow/password-reset.pen b/pencil-design/src/pages/tPOS/auth/workflow/password-reset.pen deleted file mode 100644 index 8d25adfe..00000000 --- a/pencil-design/src/pages/tPOS/auth/workflow/password-reset.pen +++ /dev/null @@ -1,254 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "PasswordReset", - "name": "Password Reset - Desktop", - "width": 1440, - "height": 900, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "width": 460, - "fill": "#111113", - "cornerRadius": 24, - "stroke": { "thickness": 1, "fill": "#1F1F23" }, - "layout": "vertical", - "gap": 28, - "padding": 48, - "children": [ - { - "type": "frame", - "gap": 6, - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 16, "height": 16, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "#8B8B90" }, - { "type": "text", "fill": "#8B8B90", "content": "Quay lại đăng nhập", "fontFamily": "Roboto", "fontSize": 13 } - ] - }, - { - "type": "frame", - "width": "fill_container", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "width": 72, - "height": 72, - "fill": "#3B82F61A", - "cornerRadius": 36, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 32, "height": 32, "iconFontName": "lock", "iconFontFamily": "lucide", "fill": "#3B82F6" } - ] - }, - { "type": "text", "fill": "#FFFFFF", "content": "Đặt lại mật khẩu", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" }, - { "type": "text", "fill": "#8B8B90", "content": "Tạo mật khẩu mới cho tài khoản của bạn", "fontFamily": "Roboto", "fontSize": 14 } - ] - }, - { - "type": "frame", - "width": "fill_container", - "layout": "vertical", - "gap": 20, - "children": [ - { - "type": "frame", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { "type": "text", "fill": "#ADADB0", "content": "Mật khẩu mới", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" }, - { - "type": "frame", - "width": "fill_container", - "height": 50, - "fill": "#1A1A1D", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "#2A2A2E" }, - "padding": [0, 16], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "gap": 10, - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "lock", "iconFontFamily": "lucide", "fill": "#6B6B70" }, - { "type": "text", "fill": "#6B6B70", "content": "Tối thiểu 8 ký tự", "fontFamily": "Roboto", "fontSize": 14 } - ] - }, - { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "eye-off", "iconFontFamily": "lucide", "fill": "#6B6B70" } - ] - } - ] - }, - { - "type": "frame", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { "type": "text", "fill": "#ADADB0", "content": "Xác nhận mật khẩu", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500" }, - { - "type": "frame", - "width": "fill_container", - "height": 50, - "fill": "#1A1A1D", - "cornerRadius": 10, - "stroke": { "thickness": 1, "fill": "#2A2A2E" }, - "padding": [0, 16], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "gap": 10, - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "lock", "iconFontFamily": "lucide", "fill": "#6B6B70" }, - { "type": "text", "fill": "#6B6B70", "content": "Nhập lại mật khẩu", "fontFamily": "Roboto", "fontSize": 14 } - ] - }, - { "type": "icon_font", "width": 18, "height": 18, "iconFontName": "eye-off", "iconFontFamily": "lucide", "fill": "#6B6B70" } - ] - } - ] - } - ] - }, - { - "type": "frame", - "width": "fill_container", - "fill": "#1A1A1D", - "cornerRadius": 10, - "padding": 16, - "layout": "vertical", - "gap": 10, - "children": [ - { "type": "text", "fill": "#ADADB0", "content": "Yêu cầu mật khẩu:", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500" }, - { - "type": "frame", - "gap": 8, - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 14, "height": 14, "iconFontName": "circle", "iconFontFamily": "lucide", "fill": "#6B6B70" }, - { "type": "text", "fill": "#8B8B90", "content": "Tối thiểu 8 ký tự", "fontFamily": "Roboto", "fontSize": 12 } - ] - }, - { - "type": "frame", - "gap": 8, - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 14, "height": 14, "iconFontName": "circle", "iconFontFamily": "lucide", "fill": "#6B6B70" }, - { "type": "text", "fill": "#8B8B90", "content": "Chữ hoa (A-Z) và chữ thường (a-z)", "fontFamily": "Roboto", "fontSize": 12 } - ] - }, - { - "type": "frame", - "gap": 8, - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 14, "height": 14, "iconFontName": "circle", "iconFontFamily": "lucide", "fill": "#6B6B70" }, - { "type": "text", "fill": "#8B8B90", "content": "Số (0-9) và ký tự đặc biệt", "fontFamily": "Roboto", "fontSize": 12 } - ] - } - ] - }, - { - "type": "frame", - "width": "fill_container", - "height": 50, - "fill": { "type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{ "color": "#FF5C00", "position": 0 }, { "color": "#FF8A4C", "position": 1 }] }, - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "text", "fill": "#FFFFFF", "content": "Đặt lại mật khẩu", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600" } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PasswordResetSuccess", - "name": "Password Reset - Success", - "x": 1540, - "width": 1440, - "height": 900, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "width": 440, - "fill": "#111113", - "cornerRadius": 24, - "stroke": { "thickness": 1, "fill": "#1F1F23" }, - "layout": "vertical", - "gap": 28, - "padding": 48, - "alignItems": "center", - "children": [ - { - "type": "frame", - "width": 88, - "height": 88, - "fill": "#22C55E1A", - "cornerRadius": 44, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 40, "height": 40, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#22C55E" } - ] - }, - { - "type": "frame", - "layout": "vertical", - "gap": 12, - "alignItems": "center", - "children": [ - { "type": "text", "fill": "#FFFFFF", "content": "Đặt lại thành công!", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" }, - { - "type": "text", - "fill": "#8B8B90", - "textGrowth": "fixed-width", - "width": 300, - "content": "Mật khẩu của bạn đã được cập nhật. Bạn có thể đăng nhập với mật khẩu mới.", - "lineHeight": 1.5, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "width": "fill_container", - "height": 50, - "fill": { "type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{ "color": "#FF5C00", "position": 0 }, { "color": "#FF8A4C", "position": 1 }] }, - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "text", "fill": "#FFFFFF", "content": "Đăng nhập ngay", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600" } - ] - } - ] - } - ] - } - ] -} diff --git a/pencil-design/src/pages/tPOS/auth/workflow/two-factor-auth.pen b/pencil-design/src/pages/tPOS/auth/workflow/two-factor-auth.pen deleted file mode 100644 index 4c01ffef..00000000 --- a/pencil-design/src/pages/tPOS/auth/workflow/two-factor-auth.pen +++ /dev/null @@ -1,105 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "TwoFactorAuth", - "name": "2FA Authenticator - Desktop", - "width": 1440, - "height": 900, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "width": 440, - "fill": "#111113", - "cornerRadius": 24, - "stroke": { "thickness": 1, "fill": "#1F1F23" }, - "layout": "vertical", - "gap": 28, - "padding": 48, - "children": [ - { - "type": "frame", - "width": "fill_container", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "width": 72, - "height": 72, - "fill": "#3B82F61A", - "cornerRadius": 36, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "icon_font", "width": 32, "height": 32, "iconFontName": "shield-check", "iconFontFamily": "lucide", "fill": "#3B82F6" } - ] - }, - { "type": "text", "fill": "#FFFFFF", "content": "Xác thực 2 lớp", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" }, - { - "type": "text", - "fill": "#8B8B90", - "textGrowth": "fixed-width", - "width": 320, - "content": "Nhập mã 6 số từ ứng dụng Google Authenticator hoặc Authy", - "lineHeight": 1.5, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 14 - } - ] - }, - { - "type": "frame", - "width": "fill_container", - "justifyContent": "center", - "gap": 10, - "children": [ - { "type": "frame", "width": 52, "height": 60, "fill": "#1A1A1D", "cornerRadius": 10, "stroke": { "thickness": 1, "fill": "#3B82F6" }, "justifyContent": "center", "alignItems": "center", "children": [{ "type": "text", "fill": "#FFFFFF", "content": "4", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" }] }, - { "type": "frame", "width": 52, "height": 60, "fill": "#1A1A1D", "cornerRadius": 10, "stroke": { "thickness": 1, "fill": "#3B82F6" }, "justifyContent": "center", "alignItems": "center", "children": [{ "type": "text", "fill": "#FFFFFF", "content": "7", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" }] }, - { "type": "frame", "width": 52, "height": 60, "fill": "#1A1A1D", "cornerRadius": 10, "stroke": { "thickness": 1, "fill": "#3B82F6" }, "justifyContent": "center", "alignItems": "center", "children": [{ "type": "text", "fill": "#FFFFFF", "content": "2", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600" }] }, - { "type": "frame", "width": 52, "height": 60, "fill": "#1A1A1D", "cornerRadius": 10, "stroke": { "thickness": 1, "fill": "#2A2A2E" }, "justifyContent": "center", "alignItems": "center", "children": [{ "type": "text", "fill": "#6B6B70", "content": "•", "fontFamily": "Roboto", "fontSize": 24 }] }, - { "type": "frame", "width": 52, "height": 60, "fill": "#1A1A1D", "cornerRadius": 10, "stroke": { "thickness": 1, "fill": "#2A2A2E" }, "justifyContent": "center", "alignItems": "center", "children": [{ "type": "text", "fill": "#6B6B70", "content": "•", "fontFamily": "Roboto", "fontSize": 24 }] }, - { "type": "frame", "width": 52, "height": 60, "fill": "#1A1A1D", "cornerRadius": 10, "stroke": { "thickness": 1, "fill": "#2A2A2E" }, "justifyContent": "center", "alignItems": "center", "children": [{ "type": "text", "fill": "#6B6B70", "content": "•", "fontFamily": "Roboto", "fontSize": 24 }] } - ] - }, - { - "type": "frame", - "width": "fill_container", - "height": 50, - "fill": "#3B82F6", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { "type": "text", "fill": "#FFFFFF", "content": "Xác nhận", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600" } - ] - }, - { - "type": "frame", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "gap": 4, - "children": [ - { "type": "text", "fill": "#8B8B90", "content": "Không thể truy cập authenticator?", "fontFamily": "Roboto", "fontSize": 13 }, - { "type": "text", "fill": "#3B82F6", "content": "Dùng backup code", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500" } - ] - } - ] - } - ] - } - ] - } - ] -} diff --git a/pencil-design/src/pages/tPOS/landing/desktop.pen b/pencil-design/src/pages/tPOS/landing/desktop.pen deleted file mode 100644 index ba410408..00000000 --- a/pencil-design/src/pages/tPOS/landing/desktop.pen +++ /dev/null @@ -1,3780 +0,0 @@ -{ - "version": "2.7", - "children": [ - { - "type": "frame", - "id": "IxtYA", - "x": 0, - "y": 0, - "name": "aPOS Landing Page", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "8qjLq", - "name": "newHeader", - "width": 1440, - "height": "fit_content(84)", - "padding": [ - 20, - 120 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "NvLg1", - "name": "navLogo", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "eLg01", - "name": "logoDot", - "fill": "$orange-primary", - "width": 12, - "height": 12 - }, - { - "type": "text", - "id": "tLg01", - "name": "logoText", - "fill": "$text-primary", - "content": "aPOS", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "600", - "letterSpacing": 3 - } - ] - }, - { - "type": "frame", - "id": "NvLnk", - "name": "navLinks", - "gap": 32, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "nL1", - "name": "navLink1", - "fill": "$text-secondary", - "content": "Tính năng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "nL2", - "name": "navLink2", - "fill": "$text-secondary", - "content": "Bảng giá", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "nL3", - "name": "navLink3", - "fill": "$text-secondary", - "content": "Liên hệ", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "NvCta", - "name": "navCta", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { "height": 1 }, - "colors": [ - { "color": "#FF5C00", "position": 0 }, - { "color": "#FF8A4C", "position": 1 } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [14, 24], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ctaTxt", - "name": "ctaText", - "fill": "$text-primary", - "content": "Dùng thử miễn phí", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "tpMHr", - "name": "Hero Section", - "width": "fill_container", - "layout": "vertical", - "gap": 40, - "padding": [ - 100, - 120, - 80, - 120 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "IFtQL", - "name": "newHeroBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "gap": 8, - "padding": [ - 8, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "G1DqV", - "name": "heroBadgeDot", - "fill": "$orange-primary", - "width": 8, - "height": 8 - }, - { - "type": "text", - "id": "dpRNf", - "name": "heroBadgeText", - "fill": "$orange-primary", - "content": "AI-Powered POS & Loyalty", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "z6SsC", - "name": "headline", - "fill": "$text-primary", - "textGrowth": "fixed-width", - "width": 900, - "content": "Quản lý bán hàng thông minh với AI", - "lineHeight": 1.15, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 56, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "50RjU", - "name": "subline", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 750, - "content": "Giải pháp POS toàn diện cho Nhà hàng, Cafe, Bar, Karaoke và Spa — tự động hóa kế toán, tích điểm khách hàng và báo cáo realtime.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "Ktf5k", - "name": "ctaRow", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "AqJ6X", - "name": "newPrimaryCta", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 16, - 32 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ocR1c", - "name": "btnPIcon", - "width": 18, - "height": 18, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "fEtjW", - "name": "btnPText", - "fill": "$text-primary", - "content": "Bắt đầu miễn phí", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "Dys8A", - "name": "newSecondaryCta", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 16, - 32 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CuXSB", - "name": "btnSIcon", - "width": 16, - "height": 16, - "iconFontName": "play", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "JptXG", - "name": "btnSText", - "fill": "$text-secondary", - "content": "Xem demo", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "CX0yT", - "name": "Product Mockup", - "clip": true, - "width": 1000, - "height": 560, - "fill": { - "type": "image", - "enabled": true, - "url": "../images/pos-dashboard.png", - "mode": "fill" - }, - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "FfW2s", - "name": "mockupLabel", - "fill": "$text-disabled", - "content": "POS Dashboard Preview", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "yEE9s", - "name": "newTrustStats", - "width": "fill_container", - "gap": 40, - "padding": [ - 20, - 0, - 0, - 0 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "QdxMK", - "name": "tsLabel", - "fill": "$text-disabled", - "content": "Hơn 2,000 doanh nghiệp đã tin tưởng sử dụng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "rectangle", - "id": "77g7e", - "name": "tsDivider1", - "fill": "$border-default", - "width": 1, - "height": 20 - }, - { - "type": "text", - "id": "jOexp", - "name": "tsStat1", - "fill": "$text-tertiary", - "content": "50,000+ giao dịch/ngày", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "rectangle", - "id": "yVcTj", - "name": "tsDivider2", - "fill": "$border-default", - "width": 1, - "height": 20 - }, - { - "type": "text", - "id": "2btDz", - "name": "tsStat2", - "fill": "$text-tertiary", - "content": "99.9% uptime", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "lZbGT", - "name": "Features Section", - "width": "fill_container", - "layout": "vertical", - "gap": 60, - "padding": [ - 100, - 120 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ztFwh", - "name": "newFeatHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "hz6Jy", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "zWi76", - "name": "badgeText", - "fill": "$orange-primary", - "content": "TÍNH NĂNG", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "AMYB9", - "name": "shTitle", - "fill": "$text-primary", - "content": "Tất cả công cụ bạn cần trong một nền tảng", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "xl0pr", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "Quản lý đơn hàng, tích điểm thành viên, báo cáo doanh thu — tất cả được tích hợp sẵn trong aPOS.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "jsaba", - "name": "Feature Grid", - "width": "fill_container", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "DA2ma", - "name": "newFC1", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "ttzoK", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#FF5C0018", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "IsPEk", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "monitor-smartphone", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - } - ] - }, - { - "type": "text", - "id": "V6MaB", - "name": "fcTitle", - "fill": "$text-primary", - "content": "POS Đa nền tảng", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "xzGQH", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Chạy mượt trên tablet, điện thoại và máy tính. Đồng bộ dữ liệu tức thì giữa các thiết bị.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "nnfv4", - "name": "newFC2", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "Vhe45", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#22C55E18", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "2R7jV", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "award", - "iconFontFamily": "lucide", - "fill": "$green-success" - } - ] - }, - { - "type": "text", - "id": "MiZas", - "name": "fcTitle", - "fill": "$text-primary", - "content": "Tích điểm thành viên", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "uVGg0", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Tự động tích điểm mỗi giao dịch, đổi quà và nâng hạng thành viên dựa trên chi tiêu.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "lRmHb", - "name": "newFC3", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "JLUHC", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#3B82F618", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "WX408", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "chart-bar", - "iconFontFamily": "lucide", - "fill": "#3B82F6" - } - ] - }, - { - "type": "text", - "id": "pFBcT", - "name": "fcTitle", - "fill": "$text-primary", - "content": "Báo cáo doanh thu", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "Y1FkX", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Dashboard trực quan với doanh thu realtime, sản phẩm bán chạy và phân tích xu hướng.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "pcbaX", - "name": "Feature Grid Row 2", - "width": "fill_container", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "J2O62", - "name": "newFC4", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "wgTRi", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#A855F718", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "IjVLP", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "#A855F7" - } - ] - }, - { - "type": "text", - "id": "FxXdh", - "name": "fcTitle", - "fill": "$text-primary", - "content": "Quản lý nhân viên", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "vVQ8D", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Phân quyền chi tiết, chấm công theo ca, tính toán lương và theo dõi hiệu suất bán hàng.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "GXocB", - "name": "newFC5", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "HJ8wD", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#F59E0B18", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "mdbjq", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "package", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - } - ] - }, - { - "type": "text", - "id": "NVthg", - "name": "fcTitle", - "fill": "$text-primary", - "content": "Quản lý kho hàng", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "8Yrnc", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Theo dõi tồn kho realtime, cảnh báo sắp hết hàng và tự động trừ kho khi bán.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "A2gcA", - "name": "newFC6", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "Yd3x5", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#EC489918", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "Y8w0u", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "qr-code", - "iconFontFamily": "lucide", - "fill": "#EC4899" - } - ] - }, - { - "type": "text", - "id": "ajm5S", - "name": "fcTitle", - "fill": "$text-primary", - "content": "Thanh toán đa kênh", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "6tgCh", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Tiền mặt, thẻ ngân hàng, QR Code, ví điện tử — tích hợp sẵn tất cả cổng thanh toán.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "1ZzyA", - "name": "Industry Solutions", - "width": "fill_container", - "fill": "$bg-surface", - "layout": "vertical", - "gap": 60, - "padding": [ - 100, - 120 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "eU7we", - "name": "newIndHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "p6J5O", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "vRiH8", - "name": "badgeText", - "fill": "$orange-primary", - "content": "NGÀNH NGHỀ", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "x6xl8", - "name": "shTitle", - "fill": "$text-primary", - "content": "Giải pháp AI tối ưu cho từng ngành", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "W18Kq", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "Mỗi ngành có AI riêng: tự động đối soát doanh thu, dự đoán nhu cầu hàng và gợi ý khuyến mãi phù hợp.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "rPxFV", - "name": "Industry Grid", - "width": "fill_container", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "oOZI0", - "name": "newInd1", - "clip": true, - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "J2ulP", - "name": "indImg", - "width": "fill_container", - "height": 200, - "fill": { - "type": "image", - "enabled": true, - "url": "../images/home/fnb-ai.png", - "mode": "fill" - } - }, - { - "type": "frame", - "id": "8t0Kl", - "name": "indContent", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "padding": 24, - "children": [ - { - "type": "text", - "id": "5yC7a", - "name": "indTitle", - "fill": "$text-primary", - "content": "Nhà hàng & F&B", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "Mi9F0", - "name": "indDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Tự động đối soát doanh thu cuối ca, thông báo bếp khi có order mới, báo cáo doanh thu theo giờ.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "Q0Hz2", - "name": "indTags", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "Xw9pj", - "name": "indTag1", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "E47BO", - "name": "chipText", - "fill": "$text-secondary", - "content": "AI Kế toán", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "ilssA", - "name": "indTag2", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "Iby7p", - "name": "chipText", - "fill": "$text-secondary", - "content": "Smart Kitchen", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "BBpEN", - "name": "newInd2", - "clip": true, - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "xJiSx", - "name": "indImg", - "width": "fill_container", - "height": 200, - "fill": { - "type": "image", - "enabled": true, - "url": "../images/home/bar-ai.png", - "mode": "fill" - } - }, - { - "type": "frame", - "id": "r6MIK", - "name": "indContent", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "padding": 24, - "children": [ - { - "type": "text", - "id": "kOgh7", - "name": "indTitle", - "fill": "$text-primary", - "content": "Bar & Lounge", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "tY4IM", - "name": "indDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Quản lý tab khách, theo dõi tồn rượu chính xác, tự động kích hoạt khuyến mãi happy hour.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "eRO4k", - "name": "indTags", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "x7J4F", - "name": "indTag1", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "dg43M", - "name": "chipText", - "fill": "$text-secondary", - "content": "AI Inventory", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "rAv1H", - "name": "indTag2", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "jxO6Q", - "name": "chipText", - "fill": "$text-secondary", - "content": "Revenue AI", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "4N0SP", - "name": "newInd3", - "clip": true, - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "nx1DJ", - "name": "indImg", - "width": "fill_container", - "height": 200, - "fill": { - "type": "image", - "enabled": true, - "url": "../images/home/karaoke-ai.png", - "mode": "fill" - } - }, - { - "type": "frame", - "id": "fDUMx", - "name": "indContent", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "padding": 24, - "children": [ - { - "type": "text", - "id": "S7Bu3", - "name": "indTitle", - "fill": "$text-primary", - "content": "Karaoke", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "C8Mdp", - "name": "indDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Gợi ý phòng theo số khách, tính tiền giờ tự động, theo dõi trạng thái phòng realtime.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "81mgY", - "name": "indTags", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "fqHyv", - "name": "indTag1", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "ifaEv", - "name": "chipText", - "fill": "$text-secondary", - "content": "AI Room", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "AWtwp", - "name": "indTag2", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "kbEcj", - "name": "chipText", - "fill": "$text-secondary", - "content": "Smart Billing", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "XwCiu", - "name": "newInd4", - "clip": true, - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "VdwON", - "name": "indImg", - "width": "fill_container", - "height": 200, - "fill": { - "type": "image", - "enabled": true, - "url": "../images/home/coffee-ai.png", - "mode": "fill" - } - }, - { - "type": "frame", - "id": "l4KPm", - "name": "indContent", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "padding": 24, - "children": [ - { - "type": "text", - "id": "E9IUZ", - "name": "indTitle", - "fill": "$text-primary", - "content": "Coffee Shop", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "RbSR7", - "name": "indDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Nhận diện khách quen khi thanh toán, dự đoán nguyên liệu cần nhập, tối ưu chương trình tích điểm.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "r1z2N", - "name": "indTags", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "LxRKS", - "name": "indTag1", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "rVd6g", - "name": "chipText", - "fill": "$text-secondary", - "content": "AI Order", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "z55bo", - "name": "indTag2", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "Xf7lP", - "name": "chipText", - "fill": "$text-secondary", - "content": "Loyalty AI", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SpA5c", - "name": "newInd5", - "clip": true, - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "SpImg", - "name": "indImg", - "width": "fill_container", - "height": 200, - "fill": { - "type": "image", - "enabled": true, - "url": "../images/home/spa-ai.png", - "mode": "fill" - } - }, - { - "type": "frame", - "id": "SpCnt", - "name": "indContent", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "padding": 24, - "children": [ - { - "type": "text", - "id": "SpTtl", - "name": "indTitle", - "fill": "$text-primary", - "content": "TMV/Spa", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "SpDsc", - "name": "indDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Đặt lịch hẹn thông minh, theo dõi liệu trình từng khách, gợi ý dịch vụ phù hợp.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "SpTags", - "name": "indTags", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "SpTag1", - "name": "indTag1", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "SpChp1", - "name": "chipText", - "fill": "$text-secondary", - "content": "AI Booking", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SpTag2", - "name": "indTag2", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "SpChp2", - "name": "chipText", - "fill": "$text-secondary", - "content": "Smart Track", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "EPpvo", - "name": "How It Works", - "width": "fill_container", - "layout": "vertical", - "gap": 60, - "padding": [ - 100, - 120 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "YuShH", - "name": "newHiwHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "eNKJn", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "vWIWI", - "name": "badgeText", - "fill": "$orange-primary", - "content": "BẮT ĐẦU DỄ DÀNG", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "QsxWM", - "name": "shTitle", - "fill": "$text-primary", - "content": "Bắt đầu chỉ với 3 bước đơn giản", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "67Eip", - "name": "shDesc", - "enabled": false, - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "Section description goes here with more details about this section.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "kHnqX", - "name": "stepsRow", - "width": "fill_container", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "6lrDg", - "name": "newStep1", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 20, - "padding": 32, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "4O5Qo", - "name": "stepNum", - "width": 56, - "height": 56, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 28, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "moJQR", - "name": "stepNumText", - "fill": "$text-primary", - "content": "1", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "i31Ol", - "name": "stepTitle", - "fill": "$text-primary", - "content": "Đăng ký tài khoản", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "bqaWg", - "name": "stepDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Tạo tài khoản miễn phí chỉ trong 2 phút. Không cần thẻ tín dụng.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "yXLbg", - "name": "newStep2", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 20, - "padding": 32, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "QZaPn", - "name": "stepNum", - "width": 56, - "height": 56, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 28, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "5S6qq", - "name": "stepNumText", - "fill": "$text-primary", - "content": "2", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "b4Geq", - "name": "stepTitle", - "fill": "$text-primary", - "content": "Cài đặt cửa hàng", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "9Kz1R", - "name": "stepDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Thêm menu, nhân viên và cấu hình hệ thống loyalty theo nhu cầu.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "dT4H5", - "name": "newStep3", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 20, - "padding": 32, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Kzh11", - "name": "stepNum", - "width": 56, - "height": 56, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 28, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "LjEwo", - "name": "stepNumText", - "fill": "$text-primary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "ZMaSf", - "name": "stepTitle", - "fill": "$text-primary", - "content": "Bắt đầu bán hàng", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "JsYU2", - "name": "stepDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Bắt đầu nhận đơn, tích điểm khách hàng và theo dõi doanh thu ngay lập tức.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PUXqC", - "name": "Pricing Section", - "width": "fill_container", - "fill": "$bg-surface", - "layout": "vertical", - "gap": 60, - "padding": [ - 100, - 120 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ApJyq", - "name": "newPrcHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "EqJK7", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "ywqo2", - "name": "badgeText", - "fill": "$orange-primary", - "content": "BẢNG GIÁ", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "fmNVg", - "name": "shTitle", - "fill": "$text-primary", - "content": "Gói cơ bản", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "FsJSQ", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 500, - "content": "Giá đã gồm AI credits và cloud.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "5kJ39", - "name": "Pricing Grid", - "width": "fill_container", - "gap": 24, - "children": [ - { - "type": "frame", - "id": "tgARM", - "name": "newStarter", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "kkMfs", - "name": "pcBadge", - "enabled": false, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "z4JfD", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Phổ biến nhất", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "2hC8D", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "AIl3d", - "name": "pcName", - "fill": "$text-secondary", - "content": "STARTER", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "J0Hmh", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "STsMe", - "name": "pcPrice", - "fill": "$text-primary", - "content": "2.990K", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "SBD8B", - "name": "pcPer", - "fill": "$text-tertiary", - "content": "/tháng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "bnncL", - "name": "pcDesc", - "fill": "$text-tertiary", - "content": "10K giao dịch + 2K AI credits/tháng", - "lineHeight": 1.5, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "rectangle", - "id": "jaNAs", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "KDm7t", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "gZW53", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "f6f2F", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "EmvXg", - "name": "checkText", - "fill": "$text-secondary", - "content": "1 cửa hàng · 5 nhân viên", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "nxrPn", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PT7fu", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "zKkeP", - "name": "checkText", - "fill": "$text-secondary", - "content": "10GB storage · 20K API calls", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "JCBnm", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "2wSt6", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "TKfKt", - "name": "checkText", - "fill": "$text-secondary", - "content": "AI: báo cáo, gợi ý cơ bản", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "W44Ge", - "name": "pcBtn", - "width": "fill_container", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "pA83d", - "name": "btnSIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "yDCY3", - "name": "btnSText", - "fill": "$text-primary", - "content": "Dùng thử 14 ngày", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "ZcmxL", - "name": "newPro", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 2, - "fill": "$orange-primary" - }, - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "VuEoj", - "name": "pcBadge", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "pSIOd", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Phổ biến nhất", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "Bq7HU", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "z9xYo", - "name": "pcName", - "fill": "$orange-primary", - "content": "GROWTH", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "BDGwY", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "SAUa0", - "name": "pcPrice", - "fill": "$text-primary", - "content": "8.990K", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "YnOnQ", - "name": "pcPer", - "fill": "$text-tertiary", - "content": "/tháng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "mGOke", - "name": "pcDesc", - "fill": "$text-tertiary", - "content": "50K giao dịch + 20K AI credits/tháng", - "lineHeight": 1.5, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "rectangle", - "id": "VirYB", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "kruAJ", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "HxBKP", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "iDfHq", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "2O1SN", - "name": "checkText", - "fill": "$text-secondary", - "content": "5 cửa hàng · 25 nhân viên", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "tTAOL", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "LHLCW", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "MYADR", - "name": "checkText", - "fill": "$text-secondary", - "content": "100GB storage · 200K API", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "pepsl", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "qsAwN", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "wSuyK", - "name": "checkText", - "fill": "$text-secondary", - "content": "Full AI: dự đoán, tự động hóa", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "FxkD9", - "name": "newProBtn", - "width": "fill_container", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ry6qH", - "name": "btnPIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "Y3oA2", - "name": "btnPText", - "fill": "$text-primary", - "content": "Dùng thử 14 ngày", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "xzGPb", - "name": "newEnt", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "lJRxo", - "name": "pcBadge", - "enabled": false, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "U5spD", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Phổ biến nhất", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "rQkVA", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "orOne", - "name": "pcName", - "fill": "$text-secondary", - "content": "ENTERPRISE", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "S6enu", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "zMXYz", - "name": "pcPrice", - "fill": "$text-primary", - "content": "Từ 49M", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "87ILE", - "name": "pcPer", - "fill": "$text-tertiary", - "content": "/tháng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "gvyl2", - "name": "pcDesc", - "fill": "$text-tertiary", - "content": "Unlimited + 200K AI. On-Premise: 350M", - "lineHeight": 1.5, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "rectangle", - "id": "eG9vj", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "kLIGa", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "ifsTy", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "m8IWV", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "lH5lK", - "name": "checkText", - "fill": "$text-secondary", - "content": "Unlimited stores & users", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "NGRVt", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "Q1EeF", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "YmInO", - "name": "checkText", - "fill": "$text-secondary", - "content": "1TB storage · Unlimited API", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "gXHga", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "uSsyg", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "WrHKB", - "name": "checkText", - "fill": "$text-secondary", - "content": "SLA 99.9% & Dedicated support", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "2VLLn", - "name": "pcBtn", - "width": "fill_container", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "4S2MD", - "name": "btnSIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "y95SA", - "name": "btnSText", - "fill": "$text-primary", - "content": "Liên hệ tư vấn", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "AddonsSection", - "name": "Add-ons Grid", - "width": "fill_container", - "layout": "vertical", - "gap": 24, - "padding": [ - 40, - 0, - 0, - 0 - ], - "children": [ - { - "type": "text", - "id": "AddonsTitle", - "name": "addonsTitle", - "fill": "$text-primary", - "content": "Mua thêm theo nhu cầu", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "AddonsRow1", - "name": "addonsRow1", - "width": "fill_container", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "Addon1", - "name": "addonStore", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "padding": 20, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Addon1Left", - "name": "addonLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "Addon1Icon", - "name": "addonIcon", - "width": 20, - "height": 20, - "iconFontName": "store", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "Addon1Name", - "name": "addonName", - "fill": "$text-secondary", - "content": "Thêm cửa hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "Addon1Price", - "name": "addonPrice", - "fill": "$text-primary", - "content": "990K/store/tháng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "Addon2", - "name": "addonCustomer", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "padding": 20, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Addon2Left", - "name": "addonLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "Addon2Icon", - "name": "addonIcon", - "width": 20, - "height": 20, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "Addon2Name", - "name": "addonName", - "fill": "$text-secondary", - "content": "Khách hàng quản lý", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "Addon2Price", - "name": "addonPrice", - "fill": "$text-primary", - "content": "500K/10K khách/tháng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "Addon3", - "name": "addonAI", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "padding": 20, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Addon3Left", - "name": "addonLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "Addon3Icon", - "name": "addonIcon", - "width": 20, - "height": 20, - "iconFontName": "sparkles", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "Addon3Name", - "name": "addonName", - "fill": "$text-secondary", - "content": "AI Credits (Opus)", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "Addon3Price", - "name": "addonPrice", - "fill": "$text-primary", - "content": "200K/1K credits", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "AddonsRow2", - "name": "addonsRow2", - "width": "fill_container", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "Addon4", - "name": "addonStorage", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "padding": 20, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Addon4Left", - "name": "addonLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "Addon4Icon", - "name": "addonIcon", - "width": 20, - "height": 20, - "iconFontName": "hard-drive", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "Addon4Name", - "name": "addonName", - "fill": "$text-secondary", - "content": "Storage", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "Addon4Price", - "name": "addonPrice", - "fill": "$text-primary", - "content": "200K/10GB/tháng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "Addon5", - "name": "addonAPI", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "padding": 20, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Addon5Left", - "name": "addonLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "Addon5Icon", - "name": "addonIcon", - "width": 20, - "height": 20, - "iconFontName": "code", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "Addon5Name", - "name": "addonName", - "fill": "$text-secondary", - "content": "API Calls", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "Addon5Price", - "name": "addonPrice", - "fill": "$text-primary", - "content": "100K/10K calls", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "Addon6", - "name": "addonStaff", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "padding": 20, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Addon6Left", - "name": "addonLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "Addon6Icon", - "name": "addonIcon", - "width": 20, - "height": 20, - "iconFontName": "user-plus", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "Addon6Name", - "name": "addonName", - "fill": "$text-secondary", - "content": "Thêm nhân viên", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "Addon6Price", - "name": "addonPrice", - "fill": "$text-primary", - "content": "99K/user/tháng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "KMcSO", - "name": "Final CTA", - "width": "fill_container", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 180, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C0015", - "position": 0 - }, - { - "color": "#0A0A0B", - "position": 1 - } - ] - }, - "layout": "vertical", - "gap": 32, - "padding": [ - 100, - 120 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "pZ0dD", - "name": "ctaTitle", - "fill": "$text-primary", - "textGrowth": "fixed-width", - "width": 700, - "content": "Sẵn sàng nâng cấp\ndoanh nghiệp của bạn?", - "lineHeight": 1.2, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 48, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "2f9hS", - "name": "ctaSub", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 550, - "content": "Hơn 2,000 doanh nghiệp đã tin tưởng aPOS. Tham gia ngay hôm nay — hoàn toàn miễn phí.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "NLwzN", - "name": "ctaBtnRow", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SEbxe", - "name": "newCtaBtn1", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "gap": 8, - "padding": [ - 18, - 40 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "2c1V5", - "name": "btnPIcon", - "width": 18, - "height": 18, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "dwOU4", - "name": "btnPText", - "fill": "$text-primary", - "content": "Bắt đầu miễn phí", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "UmV8x", - "name": "newCtaBtn2", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 18, - 40 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "5ZrRT", - "name": "btnSIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "6Uub3", - "name": "btnSText", - "fill": "$text-secondary", - "content": "Đặt lịch demo", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "text", - "id": "IUzS0", - "name": "ctaTrust", - "fill": "$text-disabled", - "content": "Không cần thẻ tín dụng · Thiết lập trong 2 phút · Hủy bất kỳ lúc nào", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "ZJjfQ", - "name": "Footer", - "width": "fill_container", - "fill": "$bg-surface", - "layout": "vertical", - "gap": 40, - "padding": [ - 60, - 120 - ], - "children": [ - { - "type": "frame", - "id": "RWIqm", - "name": "footTop", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "PbyTa", - "name": "footBrand", - "width": 320, - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "6Dm97", - "name": "newFootLogo", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "Vz7PV", - "name": "logoDot", - "fill": "$orange-primary", - "width": 10, - "height": 10 - }, - { - "type": "text", - "id": "5Rfgw", - "name": "logoText", - "fill": "$text-primary", - "content": "aPOS", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "600", - "letterSpacing": 3 - } - ] - }, - { - "type": "text", - "id": "hbZGS", - "name": "footTagline", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 300, - "content": "Giải pháp POS toàn diện cho Nhà hàng, Cafe, Bar, Karaoke và Spa — tự động hóa kế toán, tích điểm khách hàng và báo cáo realtime.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "iY8ru", - "name": "newFootCol1", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "text", - "id": "p5LpH", - "name": "footColTitle", - "fill": "$text-primary", - "content": "Sản phẩm", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "VfYlH", - "name": "footColL1", - "fill": "$text-tertiary", - "content": "POS System", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "iKBS3", - "name": "footColL2", - "fill": "$text-tertiary", - "content": "Loyalty & Membership", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "HQbaO", - "name": "footColL3", - "fill": "$text-tertiary", - "content": "Báo cáo & Analytics", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "ztrVL", - "name": "footColL4", - "fill": "$text-tertiary", - "content": "Quản lý kho", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "TO01Z", - "name": "newFootCol2", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "text", - "id": "ouZqX", - "name": "footColTitle", - "fill": "$text-primary", - "content": "Ngành nghề", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "VWP8z", - "name": "footColL1", - "fill": "$text-tertiary", - "content": "Nhà hàng & F&B", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "YMCcn", - "name": "footColL2", - "fill": "$text-tertiary", - "content": "Bar & Lounge", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "w5Eww", - "name": "footColL3", - "fill": "$text-tertiary", - "content": "Karaoke", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "8NsnV", - "name": "footColL4", - "fill": "$text-tertiary", - "content": "Coffee Shop", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "SU4XZ", - "name": "newFootCol3", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "text", - "id": "IJDFD", - "name": "footColTitle", - "fill": "$text-primary", - "content": "Hỗ trợ", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "XU1Cu", - "name": "footColL1", - "fill": "$text-tertiary", - "content": "Trung tâm trợ giúp", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "s6Nyu", - "name": "footColL2", - "fill": "$text-tertiary", - "content": "Liên hệ", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "R9Smd", - "name": "footColL3", - "fill": "$text-tertiary", - "content": "Chính sách bảo mật", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "IxH0i", - "name": "footColL4", - "fill": "$text-tertiary", - "content": "Điều khoản sử dụng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "rectangle", - "id": "n8eJ5", - "name": "newFootDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "OXqMx", - "name": "footBottom", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ujwE3", - "name": "footCopy", - "fill": "$text-disabled", - "content": "© 2026 aPOS. All rights reserved.", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "zRuDe", - "name": "footSocials", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "IvThd", - "name": "newSoc1", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "loHwh", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "facebook", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - }, - { - "type": "frame", - "id": "24g7T", - "name": "newSoc2", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "oDnuk", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "instagram", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - }, - { - "type": "frame", - "id": "TCdzl", - "name": "newSoc3", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "Ls6CG", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "youtube", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - }, - { - "type": "frame", - "id": "u9sTP", - "name": "newSoc4", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "OYJjl", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "linkedin", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-elevated": { - "type": "color", - "value": "#1A1A1D" - }, - "bg-interactive": { - "type": "color", - "value": "#2A2A2E" - }, - "bg-page": { - "type": "color", - "value": "#0A0A0B" - }, - "bg-surface": { - "type": "color", - "value": "#111113" - }, - "border-default": { - "type": "color", - "value": "#2A2A2E" - }, - "border-subtle": { - "type": "color", - "value": "#1F1F23" - }, - "green-success": { - "type": "color", - "value": "#22C55E" - }, - "orange-light": { - "type": "color", - "value": "#FF8A4C" - }, - "orange-primary": { - "type": "color", - "value": "#FF5C00" - }, - "text-disabled": { - "type": "color", - "value": "#6B6B70" - }, - "text-muted": { - "type": "color", - "value": "#FFFFFFCC" - }, - "text-primary": { - "type": "color", - "value": "#FFFFFF" - }, - "text-secondary": { - "type": "color", - "value": "#ADADB0" - }, - "text-tertiary": { - "type": "color", - "value": "#8B8B90" - } - } -} \ No newline at end of file diff --git a/pencil-design/src/pages/tPOS/landing/mobile.pen b/pencil-design/src/pages/tPOS/landing/mobile.pen deleted file mode 100644 index d58f9b8f..00000000 --- a/pencil-design/src/pages/tPOS/landing/mobile.pen +++ /dev/null @@ -1,1505 +0,0 @@ -{ - "version": "2.7", - "children": [ - { - "type": "frame", - "id": "MobPg", - "x": 0, - "y": 0, - "name": "aPOS Mobile Page", - "width": 390, - "fill": "$bg-page", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "mNav1", - "name": "mobileHeader", - "width": 390, - "padding": [ - 16, - 20 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "NsgO1", - "name": "mNavLogo", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "eWA05", - "name": "logoDot", - "fill": "$orange-primary", - "width": 10, - "height": 10 - }, - { - "type": "text", - "id": "WHoit", - "name": "logoText", - "fill": "$text-primary", - "content": "aPOS", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600", - "letterSpacing": 3 - } - ] - }, - { - "type": "icon_font", - "id": "4TnP7", - "name": "hamburgerIcon", - "width": 24, - "height": 24, - "iconFontName": "menu", - "iconFontFamily": "lucide", - "fill": "$text-primary" - } - ] - }, - { - "type": "frame", - "id": "mHero", - "name": "Mobile Hero Section", - "width": "fill_container", - "layout": "vertical", - "gap": 24, - "padding": [ - 60, - 24, - 40, - 24 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "mBadge1", - "name": "mHeroBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "gap": 8, - "padding": [ - 8, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "Z3jN0", - "name": "heroBadgeDot", - "fill": "$orange-primary", - "width": 8, - "height": 8 - }, - { - "type": "text", - "id": "6PLFF", - "name": "heroBadgeText", - "fill": "$orange-primary", - "content": "AI-Powered POS & Loyalty", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "mHead1", - "name": "mHeadline", - "fill": "$text-primary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Quản lý bán hàng\nthông minh với AI", - "lineHeight": 1.15, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 32, - "fontWeight": "normal", - "letterSpacing": -0.5 - }, - { - "type": "text", - "id": "mSub1", - "name": "mSubline", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Giải pháp POS cho Nhà hàng, Cafe, Bar, Karaoke và Spa — tự động hóa kế toán và báo cáo.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "mCtas", - "name": "mCtaStack", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "mCta1", - "name": "mPrimaryCta", - "width": "fill_container", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 16, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "I0W7T", - "name": "btnPIcon", - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "nCPiZ", - "name": "btnPText", - "fill": "$text-primary", - "content": "Dùng thử 14 ngày", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "mCta2", - "name": "mSecondaryCta", - "width": "fill_container", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 16, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "RIlLJ", - "name": "btnSIcon", - "width": 16, - "height": 16, - "iconFontName": "play", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "o0gUh", - "name": "btnSText", - "fill": "$text-secondary", - "content": "Xem demo", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "mMock", - "name": "mProductMockup", - "clip": true, - "width": "fill_container", - "height": 200, - "fill": { - "type": "image", - "enabled": true, - "url": "../images/pos-dashboard.png", - "mode": "fill" - }, - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - } - } - ] - }, - { - "type": "frame", - "id": "mFeat", - "name": "Mobile Features Section", - "width": "fill_container", - "fill": "$bg-surface", - "layout": "vertical", - "gap": 24, - "padding": [ - 48, - 24 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "mFeatH", - "name": "mFeatHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "GdSXX", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "tZhQQ", - "name": "badgeText", - "fill": "$orange-primary", - "content": "TÍNH NĂNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "yRqrX", - "name": "shTitle", - "fill": "$text-primary", - "content": "Tất cả trong một nền tảng", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "K0Bug", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Quản lý đơn hàng, tích điểm thành viên và báo cáo doanh thu.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "mFGrid", - "name": "mFeatureStack", - "width": "fill_container", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "mFC1", - "name": "mFeatureCard1", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "VJ1VO", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#FF5C0018", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "sscPx", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "monitor-smartphone", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - } - ] - }, - { - "type": "text", - "id": "QhgVN", - "name": "fcTitle", - "fill": "$text-primary", - "content": "POS Đa nền tảng", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - }, - { - "type": "text", - "id": "6QJrG", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Chạy mượt trên mọi thiết bị. Đồng bộ tức thì.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "mFC2", - "name": "mFeatureCard2", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "OoQbN", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#22C55E18", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "hamiI", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "award", - "iconFontFamily": "lucide", - "fill": "$green-success" - } - ] - }, - { - "type": "text", - "id": "kzMgW", - "name": "fcTitle", - "fill": "$text-primary", - "content": "Tích điểm thành viên", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - }, - { - "type": "text", - "id": "24rWi", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Tự động tích điểm, đổi quà và nâng hạng thành viên.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "mFC3", - "name": "mFeatureCard3", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "vrO4H", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#3B82F618", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "1u2mH", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "chart-bar", - "iconFontFamily": "lucide", - "fill": "#3B82F6" - } - ] - }, - { - "type": "text", - "id": "X50Q2", - "name": "fcTitle", - "fill": "$text-primary", - "content": "Báo cáo doanh thu", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - }, - { - "type": "text", - "id": "6UVmW", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Doanh thu realtime, sản phẩm bán chạy và xu hướng.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "mPrc", - "name": "Mobile Pricing Section", - "width": "fill_container", - "layout": "vertical", - "gap": 24, - "padding": [ - 48, - 24 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "mPrcH", - "name": "mPrcHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "0Y3Dv", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "ZshkQ", - "name": "badgeText", - "fill": "$orange-primary", - "content": "BẢNG GIÁ", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "P3itJ", - "name": "shTitle", - "fill": "$text-primary", - "content": "Gói cơ bản", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "ZdFWI", - "name": "shDesc", - "enabled": false, - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "Section description goes here with more details about this section.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "mPrcStack", - "name": "mPricingStack", - "width": "fill_container", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "mPrc1", - "name": "mProPlan", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 2, - "fill": "$orange-primary" - }, - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "o8knd", - "name": "pcBadge", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "Xow2x", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Phổ biến nhất", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "AO70W", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "3IOQL", - "name": "pcName", - "fill": "$orange-primary", - "content": "GROWTH", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "4iwqa", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "Ej9Qy", - "name": "pcPrice", - "fill": "$text-primary", - "content": "8.990K", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "pWlWk", - "name": "pcPer", - "fill": "$text-tertiary", - "content": "/tháng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "pFoWe", - "name": "pcDesc", - "fill": "$text-tertiary", - "content": "50K giao dịch + 20K AI credits/tháng", - "lineHeight": 1.5, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "rectangle", - "id": "1K3b5", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "P6JkD", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "HEWri", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "scGHI", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "sN1RU", - "name": "checkText", - "fill": "$text-secondary", - "content": "5 cửa hàng · 25 nhân viên", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "DEO1W", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "tC0eE", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "7zKf9", - "name": "checkText", - "fill": "$text-secondary", - "content": "100GB storage · 200K API", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "Ux752", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "Ujmo8", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "ZEdgf", - "name": "checkText", - "fill": "$text-secondary", - "content": "Full AI: dự đoán, tự động hóa", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "QYYET", - "name": "mProCta", - "width": "fill_container", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "Bz4ky", - "name": "btnPIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "dTZKl", - "name": "btnPText", - "fill": "$text-primary", - "content": "Dùng thử 14 ngày", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "mPrc2", - "name": "mStarterPlan", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "9mCvs", - "name": "pcBadge", - "enabled": false, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "HHpa9", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Phổ biến nhất", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "q7Yf1", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "cyHXI", - "name": "pcName", - "fill": "$text-secondary", - "content": "STARTER", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "sSnLb", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "XP12E", - "name": "pcPrice", - "fill": "$text-primary", - "content": "2.990K", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "qL0oG", - "name": "pcPer", - "fill": "$text-tertiary", - "content": "/tháng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "qlTKz", - "name": "pcDesc", - "fill": "$text-tertiary", - "content": "10K giao dịch + 2K AI credits/tháng", - "lineHeight": 1.5, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "rectangle", - "id": "7Uk8L", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "mEY76", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "0AwwL", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "Ao9nl", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "X4DFp", - "name": "checkText", - "fill": "$text-secondary", - "content": "1 cửa hàng · 5 nhân viên", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "JEfAL", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "zdFLa", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "MI3ss", - "name": "checkText", - "fill": "$text-secondary", - "content": "10GB storage · 20K API", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "9ih9l", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MsmeF", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "jjvqC", - "name": "checkText", - "fill": "$text-secondary", - "content": "AI: báo cáo, gợi ý cơ bản", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "MpGzn", - "name": "pcBtn", - "width": "fill_container", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MCCrg", - "name": "btnSIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "EhiuS", - "name": "btnSText", - "fill": "$text-primary", - "content": "Dùng thử 14 ngày", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "mCta", - "name": "Mobile CTA Section", - "width": "fill_container", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 180, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C0015", - "position": 0 - }, - { - "color": "#0A0A0B", - "position": 1 - } - ] - }, - "layout": "vertical", - "gap": 20, - "padding": [ - 48, - 24 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "mCtaT", - "name": "mCtaTitle", - "fill": "$text-primary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Sẵn sàng nâng cấp\ndoanh nghiệp?", - "lineHeight": 1.2, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "normal", - "letterSpacing": -0.5 - }, - { - "type": "frame", - "id": "mCtaBtn", - "name": "mCtaPrimary", - "width": "fill_container", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "gap": 8, - "padding": [ - 18, - 32 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "V9mJP", - "name": "btnPIcon", - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "LJPiD", - "name": "btnPText", - "fill": "$text-primary", - "content": "Bắt đầu miễn phí", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "mCtaTrust", - "name": "mCtaTrustText", - "fill": "$text-disabled", - "content": "Không cần thẻ · Thiết lập 2 phút", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "mFoot", - "name": "Mobile Footer", - "width": "fill_container", - "fill": "$bg-surface", - "layout": "vertical", - "gap": 24, - "padding": [ - 40, - 24 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "mFootLogo", - "name": "mFooterLogo", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "6cb08", - "name": "logoDot", - "fill": "$orange-primary", - "width": 10, - "height": 10 - }, - { - "type": "text", - "id": "Jb2YP", - "name": "logoText", - "fill": "$text-primary", - "content": "aPOS", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600", - "letterSpacing": 3 - } - ] - }, - { - "type": "text", - "id": "mFootTag", - "name": "mFooterTagline", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Hệ thống POS và tích điểm thành viên hàng đầu cho F&B tại Việt Nam.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "mSocRow", - "name": "mSocialRow", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "mS1", - "name": "mSoc1", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "Ha00P", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "facebook", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - }, - { - "type": "frame", - "id": "mS2", - "name": "mSoc2", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "tgwMC", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "instagram", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - }, - { - "type": "frame", - "id": "mS3", - "name": "mSoc3", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "FA77I", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "youtube", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - } - ] - }, - { - "type": "rectangle", - "id": "mFootDiv", - "name": "mFooterDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "text", - "id": "mCopy", - "name": "mCopyright", - "fill": "$text-disabled", - "content": "© 2026 aPOS. All rights reserved.", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - } - ] - } - ] - } - ], - "variables": { - "bg-elevated": { - "type": "color", - "value": "#1A1A1D" - }, - "bg-interactive": { - "type": "color", - "value": "#2A2A2E" - }, - "bg-page": { - "type": "color", - "value": "#0A0A0B" - }, - "bg-surface": { - "type": "color", - "value": "#111113" - }, - "border-default": { - "type": "color", - "value": "#2A2A2E" - }, - "border-subtle": { - "type": "color", - "value": "#1F1F23" - }, - "green-success": { - "type": "color", - "value": "#22C55E" - }, - "orange-light": { - "type": "color", - "value": "#FF8A4C" - }, - "orange-primary": { - "type": "color", - "value": "#FF5C00" - }, - "text-disabled": { - "type": "color", - "value": "#6B6B70" - }, - "text-muted": { - "type": "color", - "value": "#FFFFFFCC" - }, - "text-primary": { - "type": "color", - "value": "#FFFFFF" - }, - "text-secondary": { - "type": "color", - "value": "#ADADB0" - }, - "text-tertiary": { - "type": "color", - "value": "#8B8B90" - } - } -} \ No newline at end of file diff --git a/pencil-design/src/pages/tPOS/landing/tablet.pen b/pencil-design/src/pages/tPOS/landing/tablet.pen deleted file mode 100644 index 30b8168d..00000000 --- a/pencil-design/src/pages/tPOS/landing/tablet.pen +++ /dev/null @@ -1,1873 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "TabPg", - "x": 0, - "y": 0, - "name": "aPOS Tablet Page", - "width": 768, - "fill": "$bg-page", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "tNav", - "name": "Tablet NavBar", - "width": "fill_container", - "padding": [ - 16, - 40 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "tLogo", - "name": "tNavLogo", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "CH0we", - "name": "logoDot", - "fill": "$orange-primary", - "width": 10, - "height": 10 - }, - { - "type": "text", - "id": "55EeP", - "name": "logoText", - "fill": "$text-primary", - "content": "aPOS", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "600", - "letterSpacing": 3 - } - ] - }, - { - "type": "frame", - "id": "tNavLinks", - "name": "tNavLinksRow", - "gap": 24, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "tL1", - "name": "tNavL1", - "fill": "$text-secondary", - "content": "T\u00ednh n\u0103ng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "tL2", - "name": "tNavL2", - "fill": "$text-secondary", - "content": "B\u1ea3ng gi\u00e1", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "tL3", - "name": "tNavL3", - "fill": "$text-secondary", - "content": "Li\u00ean h\u1ec7", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "tNavCta", - "name": "tNavTrialBtn", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MdCZ7", - "name": "btnPIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "UHBDe", - "name": "btnPText", - "fill": "$text-primary", - "content": "D\u00f9ng th\u1eed", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "tHero", - "name": "Tablet Hero Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "padding": [ - 80, - 48, - 60, - 48 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "tBadge", - "name": "tHeroBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "gap": 8, - "padding": [ - 8, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "NEFdT", - "name": "heroBadgeDot", - "fill": "$orange-primary", - "width": 8, - "height": 8 - }, - { - "type": "text", - "id": "x5aXx", - "name": "heroBadgeText", - "fill": "$orange-primary", - "content": "AI-Powered POS \u0026 Loyalty", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "tHead", - "name": "tHeadline", - "fill": "$text-primary", - "textGrowth": "fixed-width", - "width": 650, - "content": "Qu\u1ea3n l\u00fd b\u00e1n h\u00e0ng th\u00f4ng minh v\u1edbi AI.\nT\u00edch \u0111i\u1ec3m kh\u00e1ch h\u00e0ng t\u1ef1 \u0111\u1ed9ng.", - "lineHeight": 1.15, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 40, - "fontWeight": "normal", - "letterSpacing": -0.5 - }, - { - "type": "text", - "id": "tSub", - "name": "tSubline", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 550, - "content": "Gi\u1ea3i ph\u00e1p POS to\u00e0n di\u1ec7n cho Nh\u00e0 h\u00e0ng, Cafe, Bar, Karaoke v\u00e0 Spa \u2014 t\u1ef1 \u0111\u1ed9ng h\u00f3a k\u1ebf to\u00e1n v\u00e0 b\u00e1o c\u00e1o realtime.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "tCtas", - "name": "tCtaRow", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "tCta1", - "name": "tPrimaryCta", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 16, - 32 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "DUSpV", - "name": "btnPIcon", - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "84psj", - "name": "btnPText", - "fill": "$text-primary", - "content": "D\u00f9ng th\u1eed 14 ng\u00e0y", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "tCta2", - "name": "tSecondaryCta", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 16, - 32 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "7xn7F", - "name": "btnSIcon", - "width": 16, - "height": 16, - "iconFontName": "play", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "lDTmo", - "name": "btnSText", - "fill": "$text-secondary", - "content": "Xem demo", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "tMock", - "name": "tProductMockup", - "clip": true, - "width": 650, - "height": 365, - "fill": { - "type": "image", - "enabled": true, - "url": "../images/pos-dashboard.png", - "mode": "fill" - }, - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - } - } - ] - }, - { - "type": "frame", - "id": "tFeat", - "name": "Tablet Features Section", - "width": "fill_container", - "layout": "vertical", - "gap": 40, - "padding": [ - 60, - 48 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "tFeatH", - "name": "tFeatHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "T79s5", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "RPSM5", - "name": "badgeText", - "fill": "$orange-primary", - "content": "T\u00cdNH N\u0102NG", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "0kwb9", - "name": "shTitle", - "fill": "$text-primary", - "content": "T\u1ea5t c\u1ea3 c\u00f4ng c\u1ee5 trong m\u1ed9t n\u1ec1n t\u1ea3ng", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 32, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "dr5Bu", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 500, - "content": "Qu\u1ea3n l\u00fd \u0111\u01a1n h\u00e0ng, t\u00edch \u0111i\u1ec3m th\u00e0nh vi\u00ean, b\u00e1o c\u00e1o doanh thu — t\u1ea5t c\u1ea3 t\u00edch h\u1ee3p s\u1eb5n.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "tFGrid", - "name": "tFeatureGrid", - "width": "fill_container", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "tFC1", - "name": "tFeatureCard1", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "CKliQ", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#FF5C0018", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "qwNCa", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "monitor-smartphone", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - } - ] - }, - { - "type": "text", - "id": "WzWhl", - "name": "fcTitle", - "fill": "$text-primary", - "content": "POS \u0110a n\u1ec1n t\u1ea3ng", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "hH4Ij", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Ch\u1ea1y m\u01b0\u1ee3t tr\u00ean m\u1ecdi thi\u1ebft b\u1ecb. \u0110\u1ed3ng b\u1ed9 t\u1ee9c th\u00ec.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "tFC2", - "name": "tFeatureCard2", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "KLhq7", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#22C55E18", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "uheZw", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "award", - "iconFontFamily": "lucide", - "fill": "$green-success" - } - ] - }, - { - "type": "text", - "id": "rToEP", - "name": "fcTitle", - "fill": "$text-primary", - "content": "T\u00edch \u0111i\u1ec3m th\u00e0nh vi\u00ean", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "Q9LlX", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "T\u1ef1 \u0111\u1ed9ng t\u00edch \u0111i\u1ec3m, \u0111\u1ed5i qu\u00e0 v\u00e0 n\u00e2ng h\u1ea1ng th\u00e0nh vi\u00ean.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "tFGrid2", - "name": "tFeatureGrid2", - "width": "fill_container", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "tFC3", - "name": "tFeatureCard3", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "6IGig", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#3B82F618", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "JRpGR", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "chart-bar", - "iconFontFamily": "lucide", - "fill": "#3B82F6" - } - ] - }, - { - "type": "text", - "id": "QXd9H", - "name": "fcTitle", - "fill": "$text-primary", - "content": "B\u00e1o c\u00e1o doanh thu", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "KCorA", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Doanh thu realtime, s\u1ea3n ph\u1ea9m b\u00e1n ch\u1ea1y v\u00e0 xu h\u01b0\u1edbng.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "tFC4", - "name": "tFeatureCard4", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "OrBY6", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#A855F718", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "wwx7N", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "#A855F7" - } - ] - }, - { - "type": "text", - "id": "EDunI", - "name": "fcTitle", - "fill": "$text-primary", - "content": "Qu\u1ea3n l\u00fd nh\u00e2n vi\u00ean", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "H5L0U", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Ph\u00e2n quy\u1ec1n chi ti\u1ebft, ch\u1ea5m c\u00f4ng v\u00e0 t\u00ednh l\u01b0\u01a1ng.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "tPrc", - "name": "Tablet Pricing Section", - "width": "fill_container", - "fill": "$bg-surface", - "layout": "vertical", - "gap": 40, - "padding": [ - 60, - 48 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "tPrcH", - "name": "tPrcHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "5A9ot", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "u0Adu", - "name": "badgeText", - "fill": "$orange-primary", - "content": "B\u1ea2NG GI\u00c1", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "qAvL2", - "name": "shTitle", - "fill": "$text-primary", - "content": "G\u00f3i c\u01a1 b\u1ea3n", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 32, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "oAkDh", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 400, - "content": "Gi\u00e1 \u0111\u00e3 g\u1ed3m AI credits v\u00e0 cloud.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "tPrcGrid", - "name": "tPricingGrid", - "width": "fill_container", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "tPrc1", - "name": "tStarterPlan", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "eJBIC", - "name": "pcBadge", - "enabled": false, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "8KP47", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Ph\u1ed5 bi\u1ebfn nh\u1ea5t", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "r4XQV", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "6FvlL", - "name": "pcName", - "fill": "$text-secondary", - "content": "STARTER", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "BA67c", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "G2fB2", - "name": "pcPrice", - "fill": "$text-primary", - "content": "2.990K", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "vMefg", - "name": "pcPer", - "fill": "$text-tertiary", - "content": "/th\u00e1ng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "t3jSo", - "name": "pcDesc", - "fill": "$text-tertiary", - "content": "10K giao d\u1ecbch + 2K AI credits/th\u00e1ng", - "lineHeight": 1.5, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "rectangle", - "id": "uU5EQ", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "l16NG", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "EN6Ut", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "VlKXx", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "YIaJg", - "name": "checkText", - "fill": "$text-secondary", - "content": "1 c\u1eeda h\u00e0ng · 5 nh\u00e2n vi\u00ean", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "CMC5G", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "OMeW3", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "EG7K3", - "name": "checkText", - "fill": "$text-secondary", - "content": "10GB storage · 20K API", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "PiwxZ", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "t2bi7", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "sgJ0T", - "name": "checkText", - "fill": "$text-secondary", - "content": "AI: b\u00e1o c\u00e1o, g\u1ee3i \u00fd c\u01a1 b\u1ea3n", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "wc9r2", - "name": "pcBtn", - "width": "fill_container", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "I93SS", - "name": "btnSIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "KbD8j", - "name": "btnSText", - "fill": "$text-primary", - "content": "D\u00f9ng th\u1eed 14 ng\u00e0y", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "tPrc2", - "name": "tProPlan", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 2, - "fill": "$orange-primary" - }, - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "tPRqe", - "name": "pcBadge", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "QT07v", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Ph\u1ed5 bi\u1ebfn nh\u1ea5t", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "BpPrf", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "0aX3K", - "name": "pcName", - "fill": "$orange-primary", - "content": "GROWTH", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "Yn0xA", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "ZM7dC", - "name": "pcPrice", - "fill": "$text-primary", - "content": "8.990K", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "qSsdQ", - "name": "pcPer", - "fill": "$text-tertiary", - "content": "/th\u00e1ng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "aKzal", - "name": "pcDesc", - "fill": "$text-tertiary", - "content": "50K giao d\u1ecbch + 20K AI credits/th\u00e1ng", - "lineHeight": 1.5, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "rectangle", - "id": "ZpCjl", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "kgCR9", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "6bqLl", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "vMQnD", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "SVxvC", - "name": "checkText", - "fill": "$text-secondary", - "content": "5 c\u1eeda h\u00e0ng · 25 nh\u00e2n vi\u00ean", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "AY7Uh", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "WXfvG", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "0zD8m", - "name": "checkText", - "fill": "$text-secondary", - "content": "100GB storage · 200K API", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "4egsm", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "Hd4C4", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "NHplH", - "name": "checkText", - "fill": "$text-secondary", - "content": "Full AI: d\u1ef1 \u0111o\u00e1n, t\u1ef1 \u0111\u1ed9ng h\u00f3a", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "Gg92n", - "name": "tProCta", - "width": "fill_container", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "E8Q4M", - "name": "btnPIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "cG89F", - "name": "btnPText", - "fill": "$text-primary", - "content": "D\u00f9ng th\u1eed 14 ng\u00e0y", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "tCta", - "name": "Tablet CTA Section", - "width": "fill_container", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 180, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C0015", - "position": 0 - }, - { - "color": "#0A0A0B", - "position": 1 - } - ] - }, - "layout": "vertical", - "gap": 24, - "padding": [ - 60, - 48 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "tCtaT", - "name": "tCtaTitle", - "fill": "$text-primary", - "textGrowth": "fixed-width", - "width": 500, - "content": "S\u1eb5n s\u00e0ng n\u00e2ng c\u1ea5p\ndoanh nghi\u1ec7p c\u1ee7a b\u1ea1n?", - "lineHeight": 1.2, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "normal", - "letterSpacing": -0.5 - }, - { - "type": "frame", - "id": "tCtaBtns", - "name": "tCtaButtons", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "tCtaB1", - "name": "tCtaPrimary", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "gap": 8, - "padding": [ - 18, - 40 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "8hMtq", - "name": "btnPIcon", - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "cAq9F", - "name": "btnPText", - "fill": "$text-primary", - "content": "B\u1eaft \u0111\u1ea7u mi\u1ec5n ph\u00ed", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "tCtaB2", - "name": "tCtaSecondary", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 18, - 40 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "q3Jhu", - "name": "btnSIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "cLISI", - "name": "btnSText", - "fill": "$text-secondary", - "content": "\u0110\u1eb7t l\u1ecbch demo", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "text", - "id": "tCtaTrust", - "name": "tCtaTrustText", - "fill": "$text-disabled", - "content": "Kh\u00f4ng c\u1ea7n th\u1ebb t\u00edn d\u1ee5ng \u00b7 Thi\u1ebft l\u1eadp trong 2 ph\u00fat \u00b7 H\u1ee7y b\u1ea5t k\u1ef3 l\u00fac n\u00e0o", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "tFoot", - "name": "Tablet Footer", - "width": "fill_container", - "fill": "$bg-surface", - "layout": "vertical", - "gap": 32, - "padding": 48, - "children": [ - { - "type": "frame", - "id": "tFootTop", - "name": "tFooterTop", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "tFootBrand", - "name": "tFooterBrand", - "width": 280, - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "tFLogo", - "name": "tFootLogo", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "2voAL", - "name": "logoDot", - "fill": "$orange-primary", - "width": 10, - "height": 10 - }, - { - "type": "text", - "id": "6WxMZ", - "name": "logoText", - "fill": "$text-primary", - "content": "aPOS", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "600", - "letterSpacing": 3 - } - ] - }, - { - "type": "text", - "id": "tFTag", - "name": "tFootTagline", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 260, - "content": "H\u1ec7 th\u1ed1ng POS v\u00e0 t\u00edch \u0111i\u1ec3m th\u00e0nh vi\u00ean h\u00e0ng \u0111\u1ea7u cho F&B t\u1ea1i Vi\u1ec7t Nam.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "tFootCols", - "name": "tFooterColumns", - "gap": 48, - "children": [ - { - "type": "frame", - "id": "tFCol1", - "name": "tFootCol1", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "text", - "id": "vQ3jr", - "name": "footColTitle", - "fill": "$text-primary", - "content": "S\u1ea3n ph\u1ea9m", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "vsK21", - "name": "footColL1", - "fill": "$text-tertiary", - "content": "POS System", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "YG2ju", - "name": "footColL2", - "fill": "$text-tertiary", - "content": "Loyalty", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "dg59B", - "name": "footColL3", - "fill": "$text-tertiary", - "content": "B\u00e1o c\u00e1o", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "eMbMV", - "name": "footColL4", - "fill": "$text-tertiary", - "content": "Qu\u1ea3n l\u00fd kho", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "tFCol2", - "name": "tFootCol2", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "text", - "id": "AwD8s", - "name": "footColTitle", - "fill": "$text-primary", - "content": "H\u1ed7 tr\u1ee3", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "sTwJb", - "name": "footColL1", - "fill": "$text-tertiary", - "content": "Tr\u1ee3 gi\u00fap", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "EOJmD", - "name": "footColL2", - "fill": "$text-tertiary", - "content": "Li\u00ean h\u1ec7", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "XpRcP", - "name": "footColL3", - "fill": "$text-tertiary", - "content": "B\u1ea3o m\u1eadt", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "qybaE", - "name": "footColL4", - "fill": "$text-tertiary", - "content": "\u0110i\u1ec1u kho\u1ea3n", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - } - ] - }, - { - "type": "rectangle", - "id": "tFootDiv", - "name": "tFooterDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "tFootBot", - "name": "tFooterBottom", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "tCopy", - "name": "tCopyright", - "fill": "$text-disabled", - "content": "\u00a9 2026 aPOS. All rights reserved.", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "tSocRow", - "name": "tSocialRow", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "tS1", - "name": "tSoc1", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "jTxLT", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "facebook", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - }, - { - "type": "frame", - "id": "tS2", - "name": "tSoc2", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "gxXJf", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "instagram", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - }, - { - "type": "frame", - "id": "tS3", - "name": "tSoc3", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "FtADR", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "youtube", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - }, - { - "type": "frame", - "id": "tS4", - "name": "tSoc4", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "kXQIC", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "linkedin", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-elevated": { - "type": "color", - "value": "#1A1A1D" - }, - "bg-interactive": { - "type": "color", - "value": "#2A2A2E" - }, - "bg-page": { - "type": "color", - "value": "#0A0A0B" - }, - "bg-surface": { - "type": "color", - "value": "#111113" - }, - "border-default": { - "type": "color", - "value": "#2A2A2E" - }, - "border-subtle": { - "type": "color", - "value": "#1F1F23" - }, - "green-success": { - "type": "color", - "value": "#22C55E" - }, - "orange-light": { - "type": "color", - "value": "#FF8A4C" - }, - "orange-primary": { - "type": "color", - "value": "#FF5C00" - }, - "text-disabled": { - "type": "color", - "value": "#6B6B70" - }, - "text-muted": { - "type": "color", - "value": "#FFFFFFCC" - }, - "text-primary": { - "type": "color", - "value": "#FFFFFF" - }, - "text-secondary": { - "type": "color", - "value": "#ADADB0" - }, - "text-tertiary": { - "type": "color", - "value": "#8B8B90" - } - } -} \ No newline at end of file diff --git a/pencil-design/src/pages/tPOS/pos/cafe/barista-queue.pen b/pencil-design/src/pages/tPOS/pos/cafe/barista-queue.pen deleted file mode 100644 index 0fc2d08f..00000000 --- a/pencil-design/src/pages/tPOS/pos/cafe/barista-queue.pen +++ /dev/null @@ -1,175 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "BaristaQueue", - "name": "Screen/Barista-Queue", - "reusable": true, - "width": 1400, - "height": 900, - "fill": "$bg-page", - "layout": "vertical", - "children": [ - { - "type": "frame", "id": "Header", "width": "fill_container", "padding": [16, 24], "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "justifyContent": "space_between", "alignItems": "center", - "children": [ - {"type": "frame", "id": "HeaderLeft", "gap": 16, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Logo", "width": 32, "height": 32, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "frame", "id": "TitleBox", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "Title", "fill": "$text-primary", "content": "BARISTA QUEUE", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}, - {"type": "text", "id": "Subtitle", "fill": "$text-secondary", "content": "Màn hình pha chế", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "HeaderRight", "gap": 16, "alignItems": "center", "children": [ - {"type": "frame", "id": "Stats", "gap": 24, "children": [ - {"type": "frame", "id": "Stat1", "layout": "vertical", "alignItems": "center", "children": [ - {"type": "text", "id": "Stat1Val", "fill": "#F59E0B", "content": "8", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, - {"type": "text", "id": "Stat1Lbl", "fill": "$text-tertiary", "content": "Đang chờ", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "frame", "id": "Stat2", "layout": "vertical", "alignItems": "center", "children": [ - {"type": "text", "id": "Stat2Val", "fill": "#22C55E", "content": "3", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, - {"type": "text", "id": "Stat2Lbl", "fill": "$text-tertiary", "content": "Đang làm", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "frame", "id": "Stat3", "layout": "vertical", "alignItems": "center", "children": [ - {"type": "text", "id": "Stat3Val", "fill": "#3B82F6", "content": "45", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, - {"type": "text", "id": "Stat3Lbl", "fill": "$text-tertiary", "content": "Hôm nay", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "Time", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [8, 16], "children": [ - {"type": "text", "id": "TimeText", "fill": "$text-primary", "content": "14:35:22", "fontFamily": "Roboto Mono", "fontSize": 18, "fontWeight": "600"} - ]} - ]} - ] - }, - { - "type": "frame", "id": "Content", "width": "fill_container", "height": "fill_container", "padding": 24, "gap": 24, - "children": [ - {"type": "frame", "id": "QueueCol", "width": 400, "height": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "layout": "vertical", "children": [ - {"type": "frame", "id": "QueueHeader", "width": "fill_container", "padding": 16, "fill": "#F59E0B", "cornerRadius": [16, 16, 0, 0], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "QueueTitle", "fill": "#FFF", "content": "🕐 ĐANG CHỜ", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "frame", "id": "QueueCount", "fill": "#FFFFFF30", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "QueueCountT", "fill": "#FFF", "content": "8 đơn", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]} - ]}, - {"type": "frame", "id": "QueueList", "width": "fill_container", "height": "fill_container", "padding": 12, "layout": "vertical", "gap": 10, "children": [ - {"type": "frame", "id": "Q1", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 12, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "Q1L", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "Q1Num", "width": 40, "height": 40, "fill": "$orange-primary", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Q1NumT", "fill": "#FFF", "content": "#58", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}, - {"type": "frame", "id": "Q1Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "Q1Name", "fill": "$text-primary", "content": "Latte Caramel", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "Q1Note", "fill": "$text-tertiary", "content": "Size L · Ít đường", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "Q1R", "layout": "vertical", "gap": 2, "alignItems": "flex_end", "children": [ - {"type": "text", "id": "Q1Time", "fill": "#F59E0B", "content": "3:24", "fontFamily": "Roboto Mono", "fontSize": 14, "fontWeight": "600"}, - {"type": "icon_font", "id": "Q1Btn", "width": 24, "height": 24, "iconFontName": "play", "iconFontFamily": "lucide", "fill": "#22C55E"} - ]} - ]}, - {"type": "frame", "id": "Q2", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 12, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "Q2L", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "Q2Num", "width": 40, "height": 40, "fill": "$orange-primary", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Q2NumT", "fill": "#FFF", "content": "#59", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}, - {"type": "frame", "id": "Q2Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "Q2Name", "fill": "$text-primary", "content": "Americano", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "Q2Note", "fill": "$text-tertiary", "content": "Size M · Đá riêng", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "Q2R", "layout": "vertical", "gap": 2, "alignItems": "flex_end", "children": [ - {"type": "text", "id": "Q2Time", "fill": "#F59E0B", "content": "2:51", "fontFamily": "Roboto Mono", "fontSize": 14, "fontWeight": "600"}, - {"type": "icon_font", "id": "Q2Btn", "width": 24, "height": 24, "iconFontName": "play", "iconFontFamily": "lucide", "fill": "#22C55E"} - ]} - ]}, - {"type": "frame", "id": "Q3", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 12, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "Q3L", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "Q3Num", "width": 40, "height": 40, "fill": "$orange-primary", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Q3NumT", "fill": "#FFF", "content": "#60", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}, - {"type": "frame", "id": "Q3Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "Q3Name", "fill": "$text-primary", "content": "Cappuccino", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "Q3Note", "fill": "$text-tertiary", "content": "x2 · Extra shot", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "Q3R", "layout": "vertical", "gap": 2, "alignItems": "flex_end", "children": [ - {"type": "text", "id": "Q3Time", "fill": "#F59E0B", "content": "1:45", "fontFamily": "Roboto Mono", "fontSize": 14, "fontWeight": "600"}, - {"type": "icon_font", "id": "Q3Btn", "width": 24, "height": 24, "iconFontName": "play", "iconFontFamily": "lucide", "fill": "#22C55E"} - ]} - ]} - ]} - ]}, - {"type": "frame", "id": "ProgressCol", "width": "fill_container", "height": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "layout": "vertical", "children": [ - {"type": "frame", "id": "ProgressHeader", "width": "fill_container", "padding": 16, "fill": "#22C55E", "cornerRadius": [16, 16, 0, 0], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "ProgressTitle", "fill": "#FFF", "content": "☕ ĐANG PHA CHẾ", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "frame", "id": "ProgressCount", "fill": "#FFFFFF30", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "ProgressCountT", "fill": "#FFF", "content": "3 đơn", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]} - ]}, - {"type": "frame", "id": "ProgressList", "width": "fill_container", "height": "fill_container", "padding": 16, "gap": 16, "children": [ - {"type": "frame", "id": "P1", "width": 280, "fill": "#22C55E10", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#22C55E"}, "layout": "vertical", "children": [ - {"type": "frame", "id": "P1Top", "width": "fill_container", "padding": 16, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "P1Num", "width": 48, "height": 48, "fill": "#22C55E", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "P1NumT", "fill": "#FFF", "content": "#55", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}]}, - {"type": "frame", "id": "P1Timer", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [6, 12], "children": [{"type": "text", "id": "P1TimerT", "fill": "#22C55E", "content": "1:32", "fontFamily": "Roboto Mono", "fontSize": 20, "fontWeight": "700"}]} - ]}, - {"type": "frame", "id": "P1Info", "width": "fill_container", "padding": [0, 16, 16, 16], "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "P1Name", "fill": "$text-primary", "content": "Mocha Đá Xay", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, - {"type": "text", "id": "P1Note", "fill": "$text-secondary", "content": "Size L · Whip cream", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "frame", "id": "P1BtnBox", "width": "fill_container", "gap": 8, "children": [ - {"type": "frame", "id": "P1BtnDone", "width": "fill_container", "height": 40, "fill": "#22C55E", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "P1BtnDoneT", "fill": "#FFF", "content": "✓ XONG", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]} - ]} - ]} - ]}, - {"type": "frame", "id": "P2", "width": 280, "fill": "#F59E0B10", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#F59E0B"}, "layout": "vertical", "children": [ - {"type": "frame", "id": "P2Top", "width": "fill_container", "padding": 16, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "P2Num", "width": 48, "height": 48, "fill": "#F59E0B", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "P2NumT", "fill": "#FFF", "content": "#56", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}]}, - {"type": "frame", "id": "P2Timer", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [6, 12], "children": [{"type": "text", "id": "P2TimerT", "fill": "#F59E0B", "content": "0:45", "fontFamily": "Roboto Mono", "fontSize": 20, "fontWeight": "700"}]} - ]}, - {"type": "frame", "id": "P2Info", "width": "fill_container", "padding": [0, 16, 16, 16], "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "P2Name", "fill": "$text-primary", "content": "Trà Sữa Trân Châu", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, - {"type": "text", "id": "P2Note", "fill": "$text-secondary", "content": "Size M · 50% đường", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "frame", "id": "P2BtnBox", "width": "fill_container", "gap": 8, "children": [ - {"type": "frame", "id": "P2BtnDone", "width": "fill_container", "height": 40, "fill": "#22C55E", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "P2BtnDoneT", "fill": "#FFF", "content": "✓ XONG", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]} - ]} - ]} - ]} - ]} - ]}, - {"type": "frame", "id": "ReadyCol", "width": 300, "height": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "layout": "vertical", "children": [ - {"type": "frame", "id": "ReadyHeader", "width": "fill_container", "padding": 16, "fill": "#3B82F6", "cornerRadius": [16, 16, 0, 0], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "ReadyTitle", "fill": "#FFF", "content": "🔔 SẴN SÀNG", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "frame", "id": "ReadyCount", "fill": "#FFFFFF30", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "ReadyCountT", "fill": "#FFF", "content": "5 đơn", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]} - ]}, - {"type": "frame", "id": "ReadyList", "width": "fill_container", "height": "fill_container", "padding": 12, "layout": "vertical", "gap": 8, "children": [ - {"type": "frame", "id": "R1", "width": "fill_container", "fill": "#3B82F620", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "R1L", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "R1Num", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "R1NumT", "fill": "#FFF", "content": "#52", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, - {"type": "text", "id": "R1Name", "fill": "$text-primary", "content": "Espresso", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "icon_font", "id": "R1Btn", "width": 24, "height": 24, "iconFontName": "bell-ring", "iconFontFamily": "lucide", "fill": "#3B82F6"} - ]}, - {"type": "frame", "id": "R2", "width": "fill_container", "fill": "#3B82F620", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "R2L", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "R2Num", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "R2NumT", "fill": "#FFF", "content": "#53", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, - {"type": "text", "id": "R2Name", "fill": "$text-primary", "content": "Latte", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "icon_font", "id": "R2Btn", "width": 24, "height": 24, "iconFontName": "bell-ring", "iconFontFamily": "lucide", "fill": "#3B82F6"} - ]}, - {"type": "frame", "id": "R3", "width": "fill_container", "fill": "#3B82F620", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "R3L", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "R3Num", "width": 36, "height": 36, "fill": "#3B82F6", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "R3NumT", "fill": "#FFF", "content": "#54", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, - {"type": "text", "id": "R3Name", "fill": "$text-primary", "content": "Matcha Latte", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "icon_font", "id": "R3Btn", "width": 24, "height": 24, "iconFontName": "bell-ring", "iconFontFamily": "lucide", "fill": "#3B82F6"} - ]} - ]} - ]} - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "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/cafe/customer-display.pen b/pencil-design/src/pages/tPOS/pos/cafe/customer-display.pen deleted file mode 100644 index 02de7860..00000000 --- a/pencil-design/src/pages/tPOS/pos/cafe/customer-display.pen +++ /dev/null @@ -1,174 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "CustomerDisplay", - "name": "Customer Display", - "width": 800, - "height": 480, - "fill": "#0A0A0B", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "CDHeader", - "width": "fill_container", - "height": 60, - "fill": "#111113", - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "padding": [0, 24], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "CDLogo", "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CDLogoI", "width": 28, "height": 28, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "#FF5C00"}, - {"type": "text", "id": "CDLogoT", "fill": "#FFFFFF", "content": "GoodGo Café", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "CDTime", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CDTimeI", "width": 16, "height": 16, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#8B8B90"}, - {"type": "text", "id": "CDTimeT", "fill": "#8B8B90", "content": "19:05 • 06/02/2026", "fontFamily": "Roboto", "fontSize": 14} - ]} - ] - }, - { - "type": "frame", - "id": "CDBody", - "width": "fill_container", - "height": "fill_container", - "padding": 24, - "gap": 24, - "children": [ - { - "type": "frame", - "id": "CDOrderList", - "width": "fill_container", - "height": "fill_container", - "fill": "#111113", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "children": [ - {"type": "frame", "id": "CDListHeader", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": [16, 16, 0, 0], "padding": 16, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "CDListTitle", "fill": "#FFFFFF", "content": "Đơn hàng của bạn", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "text", "id": "CDListCount", "fill": "#8B8B90", "content": "4 món", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "CDItems", "width": "fill_container", "height": "fill_container", "padding": 16, "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "CDItem1", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "CDI1L", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "CDI1Qty", "width": 32, "height": 32, "fill": "#FF5C0020", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "CDI1QtyT", "fill": "#FF5C00", "content": "2", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}, - {"type": "frame", "id": "CDI1Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "CDI1N", "fill": "#FFFFFF", "content": "Cà phê sữa đá", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"}, - {"type": "text", "id": "CDI1D", "fill": "#6B6B70", "content": "Size L, Ít đường", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "text", "id": "CDI1P", "fill": "#FFFFFF", "content": "58,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "CDItem2", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "CDI2L", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "CDI2Qty", "width": 32, "height": 32, "fill": "#FF5C0020", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "CDI2QtyT", "fill": "#FF5C00", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}, - {"type": "frame", "id": "CDI2Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "CDI2N", "fill": "#FFFFFF", "content": "Trà đào cam sả", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"}, - {"type": "text", "id": "CDI2D", "fill": "#6B6B70", "content": "Size M", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "text", "id": "CDI2P", "fill": "#FFFFFF", "content": "45,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "CDItem3", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "CDI3L", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "CDI3Qty", "width": 32, "height": 32, "fill": "#FF5C0020", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "CDI3QtyT", "fill": "#FF5C00", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}, - {"type": "frame", "id": "CDI3Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "CDI3N", "fill": "#FFFFFF", "content": "Bánh mì thịt nguội", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"}, - {"type": "text", "id": "CDI3D", "fill": "#6B6B70", "content": "Thêm pate", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "text", "id": "CDI3P", "fill": "#FFFFFF", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "CDTotalPanel", - "width": 280, - "height": "fill_container", - "fill": "#111113", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "justifyContent": "space_between", - "children": [ - {"type": "frame", "id": "CDTotalTop", "width": "fill_container", "padding": 20, "layout": "vertical", "gap": 16, "children": [ - {"type": "frame", "id": "CDSubtotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "CDSubtotalL", "fill": "#8B8B90", "content": "Tạm tính", "fontFamily": "Roboto", "fontSize": 14}, {"type": "text", "id": "CDSubtotalV", "fill": "#FFFFFF", "content": "138,000₫", "fontFamily": "Roboto", "fontSize": 14}]}, - {"type": "frame", "id": "CDLoyalty", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "CDLoyaltyL", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "CDLoyaltyI", "width": 14, "height": 14, "iconFontName": "coins", "iconFontFamily": "lucide", "fill": "#22C55E"}, {"type": "text", "id": "CDLoyaltyT", "fill": "#22C55E", "content": "Gold -5%", "fontFamily": "Roboto", "fontSize": 14}]}, - {"type": "text", "id": "CDLoyaltyV", "fill": "#22C55E", "content": "-6,900₫", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "CDDiv", "width": "fill_container", "height": 1, "fill": "#2A2A2E"} - ]}, - {"type": "frame", "id": "CDTotalBottom", "width": "fill_container", "fill": "#FF5C00", "cornerRadius": [0, 0, 16, 16], "padding": 20, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "CDTotalL", "fill": "#FFFFFF99", "content": "TỔNG THANH TOÁN", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "text", "id": "CDTotalV", "fill": "#FFFFFF", "content": "131,100₫", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"} - ]} - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "CustomerDisplayWaiting", - "name": "Customer Display/Waiting", - "x": 900, - "width": 800, - "height": 480, - "fill": "#0A0A0B", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "CDW_Header", - "width": "fill_container", - "height": 60, - "fill": "#111113", - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "padding": [0, 24], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "CDW_Logo", "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CDW_LogoI", "width": 28, "height": 28, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "#FF5C00"}, - {"type": "text", "id": "CDW_LogoT", "fill": "#FFFFFF", "content": "GoodGo Café", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "CDW_Time", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CDW_TimeI", "width": 16, "height": 16, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#8B8B90"}, - {"type": "text", "id": "CDW_TimeT", "fill": "#8B8B90", "content": "19:05 • 06/02/2026", "fontFamily": "Roboto", "fontSize": 14} - ]} - ] - }, - { - "type": "frame", - "id": "CDW_Body", - "width": "fill_container", - "height": "fill_container", - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "CDW_Content", "layout": "vertical", "gap": 24, "alignItems": "center", "children": [ - {"type": "frame", "id": "CDW_Promo", "fill": "#FF5C0010", "cornerRadius": 20, "padding": [16, 32], "layout": "vertical", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CDW_PromoI", "width": 48, "height": 48, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "#FF5C00"}, - {"type": "text", "id": "CDW_PromoT", "fill": "#FF5C00", "content": "Giảm 20% cho thành viên mới", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"} - ]}, - {"type": "text", "id": "CDW_Welcome", "fill": "#FFFFFF", "content": "Chào mừng quý khách!", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "600"}, - {"type": "text", "id": "CDW_Desc", "fill": "#8B8B90", "content": "Scan QR để tích điểm và nhận ưu đãi", "fontFamily": "Roboto", "fontSize": 16}, - {"type": "frame", "id": "CDW_QR", "width": 120, "height": 120, "fill": "#FFFFFF", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CDW_QRI", "width": 80, "height": 80, "iconFontName": "qr-code", "iconFontFamily": "lucide", "fill": "#0A0A0B"} - ]} - ]} - ] - } - ] - } - ] -} diff --git a/pencil-design/src/pages/tPOS/pos/cafe/desktop.pen b/pencil-design/src/pages/tPOS/pos/cafe/desktop.pen deleted file mode 100644 index 4f67d046..00000000 --- a/pencil-design/src/pages/tPOS/pos/cafe/desktop.pen +++ /dev/null @@ -1,832 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "POSMainScreen", - "name": "POS Main Screen", - "reusable": true, - "width": 1920, - "height": 1080, - "fill": "$bg-page", - "layout": "horizontal", - "clip": true, - "children": [ - { - "type": "frame", - "id": "POSLeftPanel", - "name": "leftPanel", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "POSHeader", - "name": "header", - "width": "fill_container", - "height": 64, - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "padding": [0, 24], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "POSHeaderLeft", - "name": "headerLeft", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "POSLogo", - "name": "logo", - "width": 40, - "height": 40, - "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "text", "id": "POSLogoText", "fill": "$text-primary", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"} - ] - }, - { - "type": "frame", - "id": "POSStoreInfo", - "name": "storeInfo", - "layout": "vertical", - "gap": 2, - "children": [ - {"type": "text", "id": "POSStoreName", "fill": "$text-primary", "content": "GoodGo Café", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "text", "id": "POSStoreLocation", "fill": "$text-secondary", "content": "Chi nhánh Nguyễn Huệ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ] - } - ] - }, - { - "type": "frame", - "id": "POSHeaderCenter", - "name": "headerCenter", - "width": 400, - "height": 44, - "fill": "$bg-surface", - "cornerRadius": 12, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "padding": [0, 16], - "gap": 12, - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "POSSearchIcon", "width": 20, "height": 20, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "POSSearchPlaceholder", "fill": "$text-tertiary", "content": "Tìm sản phẩm, mã vạch...", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, - {"type": "frame", "id": "POSSearchSpacer", "width": "fill_container", "height": 1}, - { - "type": "frame", - "id": "POSScanBtn", - "name": "scanBtn", - "fill": "$bg-interactive", - "cornerRadius": 8, - "padding": [6, 10], - "gap": 6, - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "POSScanIcon", "width": 16, "height": 16, "iconFontName": "scan-barcode", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "POSScanText", "fill": "$text-secondary", "content": "F2", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ] - } - ] - }, - { - "type": "frame", - "id": "POSHeaderRight", - "name": "headerRight", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "POSDateTime", - "name": "dateTime", - "layout": "vertical", - "gap": 2, - "alignItems": "flex_end", - "children": [ - {"type": "text", "id": "POSTime", "fill": "$text-primary", "content": "23:19", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "text", "id": "POSDate", "fill": "$text-secondary", "content": "05/02/2026", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ] - }, - { - "type": "frame", - "id": "POSUserAvatar", - "name": "userAvatar", - "width": 40, - "height": 40, - "fill": "#3B82F630", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "text", "id": "POSUserInitials", "fill": "#3B82F6", "content": "M", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"} - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "POSCategoryBar", - "name": "categoryBar", - "width": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "padding": [12, 24], - "gap": 12, - "children": [ - { - "type": "frame", - "id": "POSCatAll", - "name": "catAll", - "fill": "$orange-primary", - "cornerRadius": 100, - "padding": [10, 20], - "children": [ - {"type": "text", "id": "POSCatAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ] - }, - { - "type": "frame", - "id": "POSCatDrinks", - "name": "catDrinks", - "fill": "$bg-interactive", - "cornerRadius": 100, - "padding": [10, 20], - "children": [ - {"type": "text", "id": "POSCatDrinksText", "fill": "$text-secondary", "content": "Đồ uống", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ] - }, - { - "type": "frame", - "id": "POSCatFood", - "name": "catFood", - "fill": "$bg-interactive", - "cornerRadius": 100, - "padding": [10, 20], - "children": [ - {"type": "text", "id": "POSCatFoodText", "fill": "$text-secondary", "content": "Thức ăn", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ] - }, - { - "type": "frame", - "id": "POSCatDesserts", - "name": "catDesserts", - "fill": "$bg-interactive", - "cornerRadius": 100, - "padding": [10, 20], - "children": [ - {"type": "text", "id": "POSCatDessertsText", "fill": "$text-secondary", "content": "Tráng miệng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ] - }, - { - "type": "frame", - "id": "POSCatCombo", - "name": "catCombo", - "fill": "$bg-interactive", - "cornerRadius": 100, - "padding": [10, 20], - "children": [ - {"type": "text", "id": "POSCatComboText", "fill": "$text-secondary", "content": "Combo", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ] - } - ] - }, - { - "type": "frame", - "id": "POSProductArea", - "name": "productArea", - "width": "fill_container", - "height": "fill_container", - "padding": 24, - "gap": 20, - "wrap": true, - "alignContent": "flex_start", - "children": [ - { - "type": "frame", - "id": "POSProduct1", - "name": "product1", - "width": 180, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "layout": "vertical", - "clip": true, - "children": [ - {"type": "frame", "id": "POSProduct1Img", "name": "img", "width": "fill_container", "height": 120, "fill": "#3B82F618"}, - { - "type": "frame", - "id": "POSProduct1Content", - "name": "content", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "padding": 14, - "children": [ - {"type": "text", "id": "POSProduct1Name", "fill": "$text-primary", "content": "Cà Phê Sữa Đá", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "POSProduct1Price", "fill": "$orange-primary", "content": "29,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ] - } - ] - }, - { - "type": "frame", - "id": "POSProduct2", - "name": "product2", - "width": 180, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": {"thickness": 2, "fill": "$orange-primary"}, - "layout": "vertical", - "clip": true, - "children": [ - {"type": "frame", "id": "POSProduct2Img", "name": "img", "width": "fill_container", "height": 120, "fill": "#22C55E18"}, - { - "type": "frame", - "id": "POSProduct2Content", - "name": "content", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "padding": 14, - "children": [ - {"type": "text", "id": "POSProduct2Name", "fill": "$text-primary", "content": "Trà Đào Cam Sả", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "POSProduct2Price", "fill": "$orange-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ] - } - ] - }, - { - "type": "frame", - "id": "POSProduct3", - "name": "product3", - "width": 180, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "layout": "vertical", - "clip": true, - "children": [ - {"type": "frame", "id": "POSProduct3Img", "name": "img", "width": "fill_container", "height": 120, "fill": "#F59E0B18"}, - { - "type": "frame", - "id": "POSProduct3Content", - "name": "content", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "padding": 14, - "children": [ - {"type": "text", "id": "POSProduct3Name", "fill": "$text-primary", "content": "Bánh Mì Thịt Nguội", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "POSProduct3Price", "fill": "$orange-primary", "content": "45,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ] - } - ] - }, - { - "type": "frame", - "id": "POSProduct4", - "name": "product4", - "width": 180, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "layout": "vertical", - "clip": true, - "children": [ - {"type": "frame", "id": "POSProduct4Img", "name": "img", "width": "fill_container", "height": 120, "fill": "#8B5CF618"}, - { - "type": "frame", - "id": "POSProduct4Content", - "name": "content", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "padding": 14, - "children": [ - {"type": "text", "id": "POSProduct4Name", "fill": "$text-primary", "content": "Matcha Latte", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "POSProduct4Price", "fill": "$orange-primary", "content": "42,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ] - } - ] - }, - { - "type": "frame", - "id": "POSProduct5", - "name": "product5", - "width": 180, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "layout": "vertical", - "clip": true, - "children": [ - {"type": "frame", "id": "POSProduct5Img", "name": "img", "width": "fill_container", "height": 120, "fill": "#EC489918"}, - { - "type": "frame", - "id": "POSProduct5Content", - "name": "content", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "padding": 14, - "children": [ - {"type": "text", "id": "POSProduct5Name", "fill": "$text-primary", "content": "Sinh Tố Dâu", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "POSProduct5Price", "fill": "$orange-primary", "content": "38,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ] - } - ] - }, - { - "type": "frame", - "id": "POSProduct6", - "name": "product6", - "width": 180, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "layout": "vertical", - "clip": true, - "children": [ - {"type": "frame", "id": "POSProduct6Img", "name": "img", "width": "fill_container", "height": 120, "fill": "#06B6D418"}, - { - "type": "frame", - "id": "POSProduct6Content", - "name": "content", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "padding": 14, - "children": [ - {"type": "text", "id": "POSProduct6Name", "fill": "$text-primary", "content": "Nước Ép Cam", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "POSProduct6Price", "fill": "$orange-primary", "content": "32,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ] - } - ] - }, - { - "type": "frame", - "id": "POSProduct7", - "name": "product7", - "width": 180, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "layout": "vertical", - "clip": true, - "children": [ - {"type": "frame", "id": "POSProduct7Img", "name": "img", "width": "fill_container", "height": 120, "fill": "#F4393918"}, - { - "type": "frame", - "id": "POSProduct7Content", - "name": "content", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "padding": 14, - "children": [ - {"type": "text", "id": "POSProduct7Name", "fill": "$text-primary", "content": "Trà Sữa Trân Châu", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "POSProduct7Price", "fill": "$orange-primary", "content": "39,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ] - } - ] - }, - { - "type": "frame", - "id": "POSProduct8", - "name": "product8", - "width": 180, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "layout": "vertical", - "clip": true, - "opacity": 0.5, - "children": [ - { - "type": "frame", - "id": "POSProduct8Img", - "name": "img", - "width": "fill_container", - "height": 120, - "fill": "$bg-interactive", - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "text", "id": "POSProduct8OOS", "fill": "$text-disabled", "content": "Hết hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ] - }, - { - "type": "frame", - "id": "POSProduct8Content", - "name": "content", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "padding": 14, - "children": [ - {"type": "text", "id": "POSProduct8Name", "fill": "$text-disabled", "content": "Sinh Tố Bơ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "POSProduct8Price", "fill": "$text-disabled", "content": "45,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "POSBottomBar", - "name": "bottomBar", - "width": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, - "padding": [12, 24], - "gap": 12, - "children": [ - { - "type": "frame", - "id": "POSQuickNewOrder", - "name": "newOrderBtn", - "height": 52, - "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, - "cornerRadius": 12, - "padding": [0, 20], - "gap": 8, - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "POSQuickNewOrderIcon", "width": 20, "height": 20, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "POSQuickNewOrderText", "fill": "$text-primary", "content": "Đơn mới", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ] - }, - { - "type": "frame", - "id": "POSQuickHold", - "name": "holdBtn", - "width": 52, - "height": 52, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "POSQuickHoldIcon", "width": 22, "height": 22, "iconFontName": "pause", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ] - }, - { - "type": "frame", - "id": "POSQuickRecall", - "name": "recallBtn", - "width": 52, - "height": 52, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "POSQuickRecallIcon", "width": 22, "height": 22, "iconFontName": "clipboard-list", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - { - "type": "frame", - "id": "POSQuickRecallBadge", - "name": "badge", - "fill": "#EF4444", - "cornerRadius": 100, - "padding": [2, 5], - "position": "absolute", - "x": 34, - "y": 6, - "children": [ - {"type": "text", "id": "POSQuickRecallBadgeText", "fill": "#FFFFFF", "content": "3", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"} - ] - } - ] - }, - { - "type": "frame", - "id": "POSQuickDiscount", - "name": "discountBtn", - "width": 52, - "height": 52, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "POSQuickDiscountIcon", "width": 22, "height": 22, "iconFontName": "percent", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ] - }, - { - "type": "frame", - "id": "POSQuickCustomer", - "name": "customerBtn", - "width": 52, - "height": 52, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "POSQuickCustomerIcon", "width": 22, "height": 22, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ] - }, - { - "type": "frame", - "id": "POSQuickPrint", - "name": "printBtn", - "width": 52, - "height": 52, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "POSQuickPrintIcon", "width": 22, "height": 22, "iconFontName": "printer", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "POSRightPanel", - "name": "rightPanel", - "width": 420, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "POSOrderHeader", - "name": "orderHeader", - "width": "fill_container", - "padding": [16, 20], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "POSOrderInfo", - "name": "orderInfo", - "layout": "vertical", - "gap": 4, - "children": [ - {"type": "text", "id": "POSOrderNum", "fill": "$text-primary", "content": "Đơn #0042", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}, - {"type": "text", "id": "POSOrderTable", "fill": "$text-secondary", "content": "Bàn 12 • 3 món", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"} - ] - }, - { - "type": "frame", - "id": "POSOrderActions", - "name": "orderActions", - "gap": 8, - "children": [ - {"type": "frame", "id": "POSOrderHoldBtn", "name": "holdBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "POSOrderHoldIcon", "width": 20, "height": 20, "iconFontName": "pause", "iconFontFamily": "lucide", "fill": "$text-secondary"}]}, - {"type": "frame", "id": "POSOrderMoreBtn", "name": "moreBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "POSOrderMoreIcon", "width": 20, "height": 20, "iconFontName": "more-vertical", "iconFontFamily": "lucide", "fill": "$text-secondary"}]} - ] - } - ] - }, - { - "type": "frame", - "id": "POSCustomerSection", - "name": "customerSection", - "width": "fill_container", - "fill": "#14B8A610", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "padding": [12, 20], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "POSCustomerInfo", - "gap": 12, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "POSCustomerAvatar", "width": 36, "height": 36, "fill": "#14B8A630", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "POSCustomerAvatarIcon", "width": 18, "height": 18, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "#14B8A6"}]}, - { - "type": "frame", - "id": "POSCustomerDetails", - "layout": "vertical", - "gap": 2, - "children": [ - {"type": "frame", "id": "POSCustomerNameRow", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "POSCustomerName", "fill": "$text-primary", "content": "Nguyễn Văn A", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "frame", "id": "POSCustomerVIP", "fill": "#F59E0B", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "POSCustomerVIPText", "fill": "#000", "content": "Gold", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}]} - ]}, - {"type": "text", "id": "POSCustomerPhone", "fill": "$text-tertiary", "content": "0901***234 • 2,520 điểm", "fontFamily": "Roboto", "fontSize": 12} - ] - } - ] - }, - {"type": "frame", "id": "POSCustomerRemove", "width": 28, "height": 28, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "POSCustomerRemoveIcon", "width": 14, "height": 14, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-tertiary"}]} - ] - }, - { - "type": "frame", - "id": "POSOrderItems", - "name": "orderItems", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "gap": 0, - "children": [ - { - "type": "frame", - "id": "POSOrderItem1", - "name": "orderItem1", - "width": "fill_container", - "padding": [14, 20], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "POSOrderItem1Left", - "name": "leftContent", - "gap": 12, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "POSOrderItem1Qty", "name": "qtyBadge", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "POSOrderItem1QtyText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, - { - "type": "frame", - "id": "POSOrderItem1Info", - "name": "itemInfo", - "layout": "vertical", - "gap": 2, - "children": [ - {"type": "text", "id": "POSOrderItem1Name", "fill": "$text-primary", "content": "Cà Phê Sữa Đá", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "POSOrderItem1Note", "fill": "$text-tertiary", "content": "Ít đường", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ] - } - ] - }, - {"type": "text", "id": "POSOrderItem1Price", "fill": "$text-primary", "content": "58,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ] - }, - { - "type": "frame", - "id": "POSOrderItem2", - "name": "orderItem2", - "width": "fill_container", - "padding": [14, 20], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "POSOrderItem2Left", - "name": "leftContent", - "gap": 12, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "POSOrderItem2Qty", "name": "qtyBadge", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "POSOrderItem2QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, - {"type": "text", "id": "POSOrderItem2Name", "fill": "$text-primary", "content": "Bánh Mì Thịt Nguội", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ] - }, - {"type": "text", "id": "POSOrderItem2Price", "fill": "$text-primary", "content": "45,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ] - }, - { - "type": "frame", - "id": "POSOrderItem3", - "name": "orderItem3", - "width": "fill_container", - "padding": [14, 20], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "POSOrderItem3Left", - "name": "leftContent", - "gap": 12, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "POSOrderItem3Qty", "name": "qtyBadge", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "POSOrderItem3QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, - {"type": "text", "id": "POSOrderItem3Name", "fill": "$text-primary", "content": "Trà Đào Cam Sả", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ] - }, - {"type": "text", "id": "POSOrderItem3Price", "fill": "$text-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ] - } - ] - }, - { - "type": "frame", - "id": "POSOrderSummary", - "name": "orderSummary", - "width": "fill_container", - "fill": "$bg-surface", - "layout": "vertical", - "padding": 20, - "gap": 12, - "children": [ - { - "type": "frame", - "id": "POSSummarySubtotal", - "name": "subtotalRow", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - {"type": "text", "id": "POSSubtotalLabel", "fill": "$text-secondary", "content": "Tạm tính", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, - {"type": "text", "id": "POSSubtotalValue", "fill": "$text-primary", "content": "138,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ] - }, - { - "type": "frame", - "id": "POSSummaryDiscount", - "name": "discountRow", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - {"type": "text", "id": "POSDiscountLabel", "fill": "$text-secondary", "content": "Giảm giá", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, - {"type": "text", "id": "POSDiscountValue", "fill": "$green-success", "content": "-10,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ] - }, - { - "type": "frame", - "id": "POSSummaryLoyalty", - "name": "loyaltyRow", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - {"type": "frame", "id": "POSLoyaltyLabelRow", "gap": 6, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "POSLoyaltyIcon", "width": 14, "height": 14, "iconFontName": "coins", "iconFontFamily": "lucide", "fill": "#14B8A6"}, - {"type": "text", "id": "POSLoyaltyLabel", "fill": "#14B8A6", "content": "Dùng 100 điểm", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "POSLoyaltyValue", "fill": "#14B8A6", "content": "-10,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ] - }, - { - "type": "frame", - "id": "POSSummaryDivider", - "name": "divider", - "width": "fill_container", - "height": 1, - "fill": "$border-subtle" - }, - { - "type": "frame", - "id": "POSSummaryTotal", - "name": "totalRow", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - {"type": "text", "id": "POSTotalLabel", "fill": "$text-primary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}, - {"type": "text", "id": "POSTotalValue", "fill": "$orange-primary", "content": "128,000₫", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"} - ] - } - ] - }, - { - "type": "frame", - "id": "POSPaymentBtn", - "name": "paymentBtn", - "width": "fill_container", - "height": 64, - "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, - "gap": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "POSPaymentIcon", "width": 24, "height": 24, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "POSPaymentText", "fill": "$text-primary", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"} - ] - } - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "bg-surface": {"type": "color", "value": "#111113"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "green-success": {"type": "color", "value": "#22C55E"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-disabled": {"type": "color", "value": "#6B6B70"}, - "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/cafe/mobile.pen b/pencil-design/src/pages/tPOS/pos/cafe/mobile.pen deleted file mode 100644 index c4f5f6ee..00000000 --- a/pencil-design/src/pages/tPOS/pos/cafe/mobile.pen +++ /dev/null @@ -1,125 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "POSCafeMobile", - "name": "POS Cafe Mobile", - "reusable": true, - "width": 390, - "height": 844, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "CafeMobHeader", - "width": "fill_container", - "height": 56, - "fill": "$bg-elevated", - "padding": [0, 16], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "CafeMobLogo", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "CafeMobLogoIcon", "width": 32, "height": 32, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "CafeMobLogoText", "fill": "$text-primary", "content": "G", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}]}, - {"type": "text", "id": "CafeMobStoreName", "fill": "$text-primary", "content": "GoodGo Café", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "CafeMobCartBtn", "width": 44, "height": 44, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CafeMobCartIcon", "width": 22, "height": 22, "iconFontName": "shopping-cart", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "frame", "id": "CafeMobCartBadge", "width": 18, "height": 18, "fill": "$orange-primary", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "position": "absolute", "top": -4, "right": -4, "children": [{"type": "text", "id": "CafeMobCartBadgeText", "fill": "$text-primary", "content": "3", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}]} - ]}, - {"type": "frame", "id": "CafeMobCustomerBtn", "width": 44, "height": 44, "fill": "#14B8A620", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#14B8A6"}, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "CafeMobCustomerIcon", "width": 20, "height": 20, "iconFontName": "user-search", "iconFontFamily": "lucide", "fill": "#14B8A6"}]} - ] - }, - { - "type": "frame", - "id": "CafeMobSearch", - "width": "fill_container", - "padding": [12, 16], - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "children": [ - {"type": "frame", "id": "CafeMobSearchBox", "width": "fill_container", "height": 44, "fill": "$bg-surface", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CafeMobSearchIcon", "width": 20, "height": 20, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "CafeMobSearchText", "fill": "$text-tertiary", "content": "Tìm món...", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"} - ]} - ] - }, - { - "type": "frame", - "id": "CafeMobCategories", - "width": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "padding": [10, 16], - "gap": 8, - "children": [ - {"type": "frame", "id": "CafeMobCatAll", "fill": "$orange-primary", "cornerRadius": 100, "padding": [8, 14], "children": [{"type": "text", "id": "CafeMobCatAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "CafeMobCatCoffee", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 14], "children": [{"type": "text", "id": "CafeMobCatCoffeeText", "fill": "$text-secondary", "content": "Cà phê", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "CafeMobCatTea", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 14], "children": [{"type": "text", "id": "CafeMobCatTeaText", "fill": "$text-secondary", "content": "Trà", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "CafeMobCatSnack", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 14], "children": [{"type": "text", "id": "CafeMobCatSnackText", "fill": "$text-secondary", "content": "Bánh", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]} - ] - }, - { - "type": "frame", - "id": "CafeMobProducts", - "width": "fill_container", - "height": "fill_container", - "padding": 12, - "layout": "vertical", - "gap": 12, - "clip": true, - "children": [ - {"type": "frame", "id": "CafeMobProdRow1", "width": "fill_container", "gap": 12, "children": [ - {"type": "frame", "id": "CafeMobProd1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "CafeMobProd1Img", "width": "fill_container", "height": 100, "fill": "#8B4513"}, {"type": "frame", "id": "CafeMobProd1Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "CafeMobProd1Name", "fill": "$text-primary", "content": "Cà Phê Sữa Đá", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "CafeMobProd1Price", "fill": "$orange-primary", "content": "29,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "CafeMobProd2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "CafeMobProd2Img", "width": "fill_container", "height": 100, "fill": "#654321"}, {"type": "frame", "id": "CafeMobProd2Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "CafeMobProd2Name", "fill": "$text-primary", "content": "Bạc Xỉu", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "CafeMobProd2Price", "fill": "$orange-primary", "content": "32,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]} - ]}, - {"type": "frame", "id": "CafeMobProdRow2", "width": "fill_container", "gap": 12, "children": [ - {"type": "frame", "id": "CafeMobProd3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "CafeMobProd3Img", "width": "fill_container", "height": 100, "fill": "#FFA500"}, {"type": "frame", "id": "CafeMobProd3Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "CafeMobProd3Name", "fill": "$text-primary", "content": "Trà Đào", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "CafeMobProd3Price", "fill": "$orange-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "CafeMobProd4", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "CafeMobProd4Img", "width": "fill_container", "height": 100, "fill": "#90EE90"}, {"type": "frame", "id": "CafeMobProd4Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "CafeMobProd4Name", "fill": "$text-primary", "content": "Matcha Latte", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "CafeMobProd4Price", "fill": "$orange-primary", "content": "45,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]} - ]}, - {"type": "frame", "id": "CafeMobProdRow3", "width": "fill_container", "gap": 12, "children": [ - {"type": "frame", "id": "CafeMobProd5", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "CafeMobProd5Img", "width": "fill_container", "height": 100, "fill": "#D2691E"}, {"type": "frame", "id": "CafeMobProd5Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "CafeMobProd5Name", "fill": "$text-primary", "content": "Bánh Mì", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "CafeMobProd5Price", "fill": "$orange-primary", "content": "25,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "CafeMobProd6", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "CafeMobProd6Img", "width": "fill_container", "height": 100, "fill": "#FFD700"}, {"type": "frame", "id": "CafeMobProd6Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "CafeMobProd6Name", "fill": "$text-primary", "content": "Croissant", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "CafeMobProd6Price", "fill": "$orange-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]} - ]} - ] - }, - { - "type": "frame", - "id": "CafeMobBottomBar", - "width": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, - "padding": [12, 16], - "gap": 12, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "CafeMobCartSummary", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "CafeMobCartItems", "fill": "$text-secondary", "content": "3 món", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}, - {"type": "text", "id": "CafeMobCartTotal", "fill": "$text-primary", "content": "90,000₫", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, - {"type": "frame", "id": "CafeMobLoyalty", "gap": 4, "alignItems": "center", "children": [{"type": "icon_font", "id": "CafeMobLoyaltyIcon", "width": 12, "height": 12, "iconFontName": "coins", "iconFontFamily": "lucide", "fill": "#14B8A6"}, {"type": "text", "id": "CafeMobLoyaltyText", "fill": "#14B8A6", "content": "-10,000₫", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}]} - ]}, - {"type": "frame", "id": "CafeMobPayBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CafeMobPayIcon", "width": 20, "height": 20, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "CafeMobPayText", "fill": "$text-primary", "content": "Thanh toá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"}, - "bg-surface": {"type": "color", "value": "#111113"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/cafe/tablet.pen b/pencil-design/src/pages/tPOS/pos/cafe/tablet.pen deleted file mode 100644 index 0fe57264..00000000 --- a/pencil-design/src/pages/tPOS/pos/cafe/tablet.pen +++ /dev/null @@ -1,128 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "POSCafeTablet", - "name": "POS Cafe Tablet", - "reusable": true, - "width": 1024, - "height": 768, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "CafeTabHeader", - "width": "fill_container", - "height": 56, - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "padding": [0, 16], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "CafeTabLogo", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "CafeTabLogoIcon", "width": 36, "height": 36, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "CafeTabLogoText", "fill": "$text-primary", "content": "G", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}]}, - {"type": "text", "id": "CafeTabStoreName", "fill": "$text-primary", "content": "GoodGo Café", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "CafeTabSearch", "width": 280, "height": 40, "fill": "$bg-surface", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 12], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CafeTabSearchIcon", "width": 18, "height": 18, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "CafeTabSearchText", "fill": "$text-tertiary", "content": "Tìm món...", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "CafeTabRight", "gap": 12, "alignItems": "center", "children": [ - {"type": "text", "id": "CafeTabTime", "fill": "$text-primary", "content": "23:48", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "frame", "id": "CafeTabAvatar", "width": 36, "height": 36, "fill": "#22C55E30", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "CafeTabAvatarText", "fill": "#22C55E", "content": "M", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]} - ]} - ] - }, - { - "type": "frame", - "id": "CafeTabCategories", - "width": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "padding": [10, 16], - "gap": 8, - "children": [ - {"type": "frame", "id": "CafeTabCatAll", "fill": "$orange-primary", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "CafeTabCatAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, - {"type": "frame", "id": "CafeTabCatCoffee", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "CafeTabCatCoffeeText", "fill": "$text-secondary", "content": "Cà phê", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "CafeTabCatTea", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "CafeTabCatTeaText", "fill": "$text-secondary", "content": "Trà", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "CafeTabCatSnack", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "CafeTabCatSnackText", "fill": "$text-secondary", "content": "Bánh", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]} - ] - }, - { - "type": "frame", - "id": "CafeTabMain", - "width": "fill_container", - "height": "fill_container", - "children": [ - { - "type": "frame", - "id": "CafeTabProducts", - "width": "fill_container", - "height": "fill_container", - "padding": 16, - "layout": "vertical", - "gap": 12, - "clip": true, - "children": [ - {"type": "frame", "id": "CafeTabProdRow1", "width": "fill_container", "gap": 12, "children": [ - {"type": "frame", "id": "CafeTabProd1", "width": 150, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "CafeTabProd1Img", "width": "fill_container", "height": 90, "fill": "#8B4513"}, {"type": "frame", "id": "CafeTabProd1Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "CafeTabProd1Name", "fill": "$text-primary", "content": "Cà Phê Sữa Đá", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "text", "id": "CafeTabProd1Price", "fill": "$orange-primary", "content": "29,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "CafeTabProd2", "width": 150, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "CafeTabProd2Img", "width": "fill_container", "height": 90, "fill": "#654321"}, {"type": "frame", "id": "CafeTabProd2Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "CafeTabProd2Name", "fill": "$text-primary", "content": "Bạc Xỉu", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "text", "id": "CafeTabProd2Price", "fill": "$orange-primary", "content": "32,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "CafeTabProd3", "width": 150, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "CafeTabProd3Img", "width": "fill_container", "height": 90, "fill": "#FFA500"}, {"type": "frame", "id": "CafeTabProd3Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "CafeTabProd3Name", "fill": "$text-primary", "content": "Trà Đào", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "text", "id": "CafeTabProd3Price", "fill": "$orange-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "CafeTabProd4", "width": 150, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "CafeTabProd4Img", "width": "fill_container", "height": 90, "fill": "#90EE90"}, {"type": "frame", "id": "CafeTabProd4Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "CafeTabProd4Name", "fill": "$text-primary", "content": "Matcha Latte", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "text", "id": "CafeTabProd4Price", "fill": "$orange-primary", "content": "45,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]} - ]}, - {"type": "frame", "id": "CafeTabProdRow2", "width": "fill_container", "gap": 12, "children": [ - {"type": "frame", "id": "CafeTabProd5", "width": 150, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "CafeTabProd5Img", "width": "fill_container", "height": 90, "fill": "#D2691E"}, {"type": "frame", "id": "CafeTabProd5Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "CafeTabProd5Name", "fill": "$text-primary", "content": "Bánh Mì Ốp La", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "text", "id": "CafeTabProd5Price", "fill": "$orange-primary", "content": "25,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "CafeTabProd6", "width": 150, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "CafeTabProd6Img", "width": "fill_container", "height": 90, "fill": "#FFD700"}, {"type": "frame", "id": "CafeTabProd6Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "CafeTabProd6Name", "fill": "$text-primary", "content": "Croissant", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "text", "id": "CafeTabProd6Price", "fill": "$orange-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]} - ]} - ] - }, - { - "type": "frame", - "id": "CafeTabCart", - "width": 320, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, - "layout": "vertical", - "children": [ - {"type": "frame", "id": "CafeTabCartHeader", "width": "fill_container", "padding": [12, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "CafeTabCartTitle", "fill": "$text-primary", "content": "Đơn hàng", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, - {"type": "frame", "id": "CafeTabCartRight", "gap": 8, "alignItems": "center", "children": [{"type": "text", "id": "CafeTabCartCount", "fill": "$text-secondary", "content": "3 món", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}, {"type": "frame", "id": "CafeTabCustomerBtn", "width": 32, "height": 32, "fill": "#14B8A620", "cornerRadius": 8, "stroke": {"thickness": 1, "fill": "#14B8A6"}, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "CafeTabCustomerIcon", "width": 16, "height": 16, "iconFontName": "user-search", "iconFontFamily": "lucide", "fill": "#14B8A6"}]}]} - ]}, - {"type": "frame", "id": "CafeTabCustomerSection", "width": "fill_container", "fill": "#14B8A610", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [8, 16], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "CafeTabCustInfo", "gap": 8, "alignItems": "center", "children": [{"type": "frame", "id": "CafeTabCustAvatar", "width": 28, "height": 28, "fill": "#14B8A630", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "CafeTabCustIcon", "width": 14, "height": 14, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "#14B8A6"}]}, {"type": "frame", "id": "CafeTabCustDetails", "layout": "vertical", "gap": 1, "children": [{"type": "text", "id": "CafeTabCustName", "fill": "$text-primary", "content": "Nguyễn Văn A", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, {"type": "text", "id": "CafeTabCustPoints", "fill": "$text-tertiary", "content": "Gold • 2,520 điểm", "fontFamily": "Roboto", "fontSize": 10}]}]}, {"type": "frame", "id": "CafeTabCustRemove", "width": 20, "height": 20, "fill": "$bg-interactive", "cornerRadius": 4, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "CafeTabCustRemoveIcon", "width": 10, "height": 10, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-tertiary"}]}]}, - {"type": "frame", "id": "CafeTabCartItems", "width": "fill_container", "height": "fill_container", "layout": "vertical", "children": [ - {"type": "frame", "id": "CafeTabCartItem1", "width": "fill_container", "padding": [10, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "CafeTabCartItem1Left", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "CafeTabCartItem1Qty", "width": 28, "height": 28, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "CafeTabCartItem1QtyText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, {"type": "text", "id": "CafeTabCartItem1Name", "fill": "$text-primary", "content": "Cà Phê Sữa Đá", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, {"type": "text", "id": "CafeTabCartItem1Price", "fill": "$text-primary", "content": "58,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, - {"type": "frame", "id": "CafeTabCartItem2", "width": "fill_container", "padding": [10, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "CafeTabCartItem2Left", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "CafeTabCartItem2Qty", "width": 28, "height": 28, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "CafeTabCartItem2QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, {"type": "text", "id": "CafeTabCartItem2Name", "fill": "$text-primary", "content": "Bạc Xỉu", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, {"type": "text", "id": "CafeTabCartItem2Price", "fill": "$text-primary", "content": "32,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]} - ]}, - {"type": "frame", "id": "CafeTabCartSummary", "width": "fill_container", "fill": "$bg-surface", "layout": "vertical", "padding": 16, "gap": 8, "children": [ - {"type": "frame", "id": "CafeTabCartLoyalty", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "frame", "id": "CafeTabLoyaltyRow", "gap": 4, "alignItems": "center", "children": [{"type": "icon_font", "id": "CafeTabLoyaltyIcon", "width": 12, "height": 12, "iconFontName": "coins", "iconFontFamily": "lucide", "fill": "#14B8A6"}, {"type": "text", "id": "CafeTabLoyaltyLabel", "fill": "#14B8A6", "content": "Dùng 100 điểm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, {"type": "text", "id": "CafeTabLoyaltyValue", "fill": "#14B8A6", "content": "-10,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "CafeTabCartTotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "CafeTabCartTotalLabel", "fill": "$text-primary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "text", "id": "CafeTabCartTotalValue", "fill": "$orange-primary", "content": "80,000₫", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}]} - ]}, - {"type": "frame", "id": "CafeTabPayBtn", "width": "fill_container", "height": 52, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CafeTabPayIcon", "width": 20, "height": 20, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "CafeTabPayText", "fill": "$text-primary", "content": "Thanh toá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"}, - "bg-surface": {"type": "color", "value": "#111113"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/cafe/workflow/cafe-journey.pen b/pencil-design/src/pages/tPOS/pos/cafe/workflow/cafe-journey.pen deleted file mode 100644 index 65990e15..00000000 --- a/pencil-design/src/pages/tPOS/pos/cafe/workflow/cafe-journey.pen +++ /dev/null @@ -1,340 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "CafeJourney1", - "name": "Café Journey/1-Welcome", - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CJ1Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 24, - "padding": 32, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "CJ1Step", "fill": "#3B82F620", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "CJ1StepT", "fill": "#3B82F6", "content": "Bước 1/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "frame", "id": "CJ1Icon", "width": 72, "height": 72, "fill": "#3B82F61A", "cornerRadius": 36, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CJ1IconI", "width": 32, "height": 32, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "#3B82F6"} - ]}, - {"type": "frame", "id": "CJ1Title", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "CJ1TitleT", "fill": "#FFFFFF", "content": "Xin chào!", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "600"}, - {"type": "text", "id": "CJ1Desc", "fill": "#8B8B90", "content": "Bạn muốn dùng tại quán hay mang đi?", "fontFamily": "Roboto", "fontSize": 14, "textAlign": "center"} - ]}, - {"type": "frame", "id": "CJ1Options", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "CJ1Opt1", "width": "fill_container", "height": 56, "fill": "#3B82F620", "stroke": {"thickness": 2, "fill": "#3B82F6"}, "cornerRadius": 12, "gap": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CJ1Opt1I", "width": 22, "height": 22, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "#3B82F6"}, - {"type": "text", "id": "CJ1Opt1T", "fill": "#3B82F6", "content": "Dùng tại quán", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "CJ1Opt2", "width": "fill_container", "height": 56, "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 12, "gap": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CJ1Opt2I", "width": 22, "height": 22, "iconFontName": "package", "iconFontFamily": "lucide", "fill": "#8B8B90"}, - {"type": "text", "id": "CJ1Opt2T", "fill": "#8B8B90", "content": "Mang đi", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"} - ]} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "CafeJourney2", - "name": "Café Journey/2-Order", - "x": 540, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CJ2Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 20, - "padding": 28, - "children": [ - {"type": "frame", "id": "CJ2Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "CJ2Step", "fill": "#FF5C0020", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "CJ2StepT", "fill": "#FF5C00", "content": "Bước 2/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "text", "id": "CJ2Table", "fill": "#8B8B90", "content": "🪑 Tại quán", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "CJ2Title", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "CJ2TitleT", "fill": "#FFFFFF", "content": "Xác nhận đơn hàng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}, - {"type": "text", "id": "CJ2Count", "fill": "#8B8B90", "content": "3 món", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "CJ2Items", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "CJ2Item1", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "CJ2Item1L", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "CJ2Item1Qty", "fill": "#FF5C00", "content": "2x", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "CJ2Item1N", "fill": "#FFFFFF", "content": "Cappuccino M", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "text", "id": "CJ2Item1P", "fill": "#FFFFFF", "content": "110,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "CJ2Item2", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "CJ2Item2L", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "CJ2Item2Qty", "fill": "#FF5C00", "content": "1x", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "CJ2Item2N", "fill": "#FFFFFF", "content": "Bánh Croissant", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "text", "id": "CJ2Item2P", "fill": "#FFFFFF", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "CJ2Divider", "width": "fill_container", "height": 1, "fill": "#2A2A2E"}, - {"type": "frame", "id": "CJ2Total", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "CJ2TotalL", "fill": "#8B8B90", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 14}, - {"type": "text", "id": "CJ2TotalV", "fill": "#FF5C00", "content": "145,000₫", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} - ]} - ]}, - {"type": "frame", "id": "CJ2Customer", "width": "fill_container", "fill": "#14B8A610", "cornerRadius": 10, "padding": 12, "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "CJ2CustAvt", "width": 32, "height": 32, "fill": "#14B8A630", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "CJ2CustInit", "fill": "#14B8A6", "content": "N", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "CJ2CustInfo", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "CJ2CustN", "fill": "#14B8A6", "content": "Nguyễn Văn A • Gold", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "CJ2CustP", "fill": "#8B8B90", "content": "+14 điểm tích lũy", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "CJ2Actions", "width": "fill_container", "gap": 10, "children": [ - {"type": "frame", "id": "CJ2Back", "width": 48, "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "CJ2BackI", "width": 18, "height": 18, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "#ADADB0"}]}, - {"type": "frame", "id": "CJ2Confirm", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "CJ2ConfirmT", "fill": "#FFFFFF", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "icon_font", "id": "CJ2ConfirmI", "width": 16, "height": 16, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "#FFFFFF"} - ]} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "CafeJourney3", - "name": "Café Journey/3-Payment", - "x": 1080, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CJ3Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 20, - "padding": 28, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "CJ3Step", "fill": "#22C55E20", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "CJ3StepT", "fill": "#22C55E", "content": "Bước 3/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "frame", "id": "CJ3Icon", "width": 64, "height": 64, "fill": "#22C55E1A", "cornerRadius": 32, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CJ3IconI", "width": 28, "height": 28, "iconFontName": "wallet", "iconFontFamily": "lucide", "fill": "#22C55E"} - ]}, - {"type": "frame", "id": "CJ3Title", "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "CJ3TitleT", "fill": "#FFFFFF", "content": "Chọn thanh toán", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}, - {"type": "text", "id": "CJ3Amount", "fill": "#22C55E", "content": "145,000₫", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "CJ3Methods", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ - {"type": "frame", "id": "CJ3M1", "width": "fill_container", "fill": "#22C55E10", "stroke": {"thickness": 2, "fill": "#22C55E"}, "cornerRadius": 12, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "CJ3M1L", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "CJ3M1Icon", "width": 40, "height": 40, "fill": "#22C55E30", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "CJ3M1I", "width": 20, "height": 20, "iconFontName": "qr-code", "iconFontFamily": "lucide", "fill": "#22C55E"}]}, - {"type": "frame", "id": "CJ3M1Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "CJ3M1N", "fill": "#FFFFFF", "content": "Quét QR", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "CJ3M1D", "fill": "#8B8B90", "content": "VNPay, MoMo, ZaloPay", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "icon_font", "id": "CJ3M1Check", "width": 20, "height": 20, "iconFontName": "check-circle-2", "iconFontFamily": "lucide", "fill": "#22C55E"} - ]}, - {"type": "frame", "id": "CJ3M2", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 12, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "CJ3M2L", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "CJ3M2Icon", "width": 40, "height": 40, "fill": "#2A2A2E", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "CJ3M2I", "width": 20, "height": 20, "iconFontName": "banknote", "iconFontFamily": "lucide", "fill": "#8B8B90"}]}, - {"type": "text", "id": "CJ3M2N", "fill": "#FFFFFF", "content": "Tiền mặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "CJ3M3", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 12, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "CJ3M3L", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "CJ3M3Icon", "width": 40, "height": 40, "fill": "#2A2A2E", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "CJ3M3I", "width": 20, "height": 20, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "#8B8B90"}]}, - {"type": "text", "id": "CJ3M3N", "fill": "#FFFFFF", "content": "Thẻ ngân hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]} - ]} - ]}, - {"type": "frame", "id": "CJ3Confirm", "width": "fill_container", "height": 50, "fill": "#22C55E", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CJ3ConfirmI", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "CJ3ConfirmT", "fill": "#FFFFFF", "content": "Xác nhận thanh toán", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "CafeJourney4", - "name": "Café Journey/4-Processing", - "x": 1620, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CJ4Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 24, - "padding": 36, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "CJ4Step", "fill": "#F59E0B20", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "CJ4StepT", "fill": "#F59E0B", "content": "Bước 4/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "frame", "id": "CJ4Queue", "width": 120, "height": 120, "fill": "#F59E0B1A", "cornerRadius": 60, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "gap": 4, "children": [ - {"type": "text", "id": "CJ4QueueLabel", "fill": "#F59E0B", "content": "SỐ THỨ TỰ", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}, - {"type": "text", "id": "CJ4QueueNum", "fill": "#F59E0B", "content": "42", "fontFamily": "Roboto", "fontSize": 48, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "CJ4Title", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "CJ4TitleT", "fill": "#FFFFFF", "content": "Đang pha chế", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}, - {"type": "text", "id": "CJ4Desc", "fill": "#8B8B90", "content": "Vui lòng chờ gọi số", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "CJ4Progress", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "CJ4Bar", "width": "fill_container", "height": 6, "fill": "#1A1A1D", "cornerRadius": 3, "children": [ - {"type": "frame", "id": "CJ4BarFill", "width": "60%", "height": 6, "fill": "#F59E0B", "cornerRadius": 3} - ]}, - {"type": "frame", "id": "CJ4Time", "width": "fill_container", "justifyContent": "center", "children": [ - {"type": "text", "id": "CJ4TimeT", "fill": "#8B8B90", "content": "⏱️ Ước tính: 3-5 phút", "fontFamily": "Roboto", "fontSize": 13} - ]} - ]}, - {"type": "frame", "id": "CJ4Items", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 8, "children": [ - {"type": "frame", "id": "CJ4Item1", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "CJ4Item1N", "fill": "#FFFFFF", "content": "2x Cappuccino M", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "frame", "id": "CJ4Item1Status", "fill": "#F59E0B20", "cornerRadius": 4, "padding": [4, 8], "children": [{"type": "text", "id": "CJ4Item1StatusT", "fill": "#F59E0B", "content": "Đang pha", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]} - ]}, - {"type": "frame", "id": "CJ4Item2", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "CJ4Item2N", "fill": "#FFFFFF", "content": "1x Bánh Croissant", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "frame", "id": "CJ4Item2Status", "fill": "#22C55E20", "cornerRadius": 4, "padding": [4, 8], "children": [{"type": "text", "id": "CJ4Item2StatusT", "fill": "#22C55E", "content": "Sẵn sàng", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]} - ]} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "CafeJourney5", - "name": "Café Journey/5-Ready", - "x": 2160, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CJ5Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 2, "fill": "#22C55E"}, - "layout": "vertical", - "gap": 24, - "padding": 36, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "CJ5Step", "fill": "#22C55E20", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "CJ5StepT", "fill": "#22C55E", "content": "Bước 5/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "frame", "id": "CJ5Icon", "width": 100, "height": 100, "fill": "#22C55E1A", "cornerRadius": 50, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CJ5IconI", "width": 48, "height": 48, "iconFontName": "bell-ring", "iconFontFamily": "lucide", "fill": "#22C55E"} - ]}, - {"type": "frame", "id": "CJ5Title", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "CJ5TitleT", "fill": "#22C55E", "content": "SỐ 42 - SẴN SÀNG!", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "text", "id": "CJ5Desc", "fill": "#FFFFFF", "content": "Vui lòng đến quầy nhận đồ", "fontFamily": "Roboto", "fontSize": 15} - ]}, - {"type": "frame", "id": "CJ5Items", "width": "fill_container", "fill": "#22C55E10", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 8, "children": [ - {"type": "frame", "id": "CJ5Item1", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "CJ5Item1N", "fill": "#FFFFFF", "content": "2x Cappuccino M", "fontFamily": "Roboto", "fontSize": 14}, - {"type": "icon_font", "id": "CJ5Item1Check", "width": 18, "height": 18, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#22C55E"} - ]}, - {"type": "frame", "id": "CJ5Item2", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "CJ5Item2N", "fill": "#FFFFFF", "content": "1x Bánh Croissant", "fontFamily": "Roboto", "fontSize": 14}, - {"type": "icon_font", "id": "CJ5Item2Check", "width": 18, "height": 18, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#22C55E"} - ]} - ]}, - {"type": "frame", "id": "CJ5Received", "width": "fill_container", "height": 50, "fill": "#22C55E", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CJ5ReceivedI", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "CJ5ReceivedT", "fill": "#FFFFFF", "content": "Đã nhận đồ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "CafeJourney6", - "name": "Café Journey/6-Complete", - "x": 2700, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CJ6Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 24, - "padding": 36, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "CJ6Step", "fill": "#14B8A620", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "CJ6StepT", "fill": "#14B8A6", "content": "Hoàn tất", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "frame", "id": "CJ6Icon", "width": 88, "height": 88, "fill": "#14B8A61A", "cornerRadius": 44, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CJ6IconI", "width": 40, "height": 40, "iconFontName": "heart", "iconFontFamily": "lucide", "fill": "#14B8A6"} - ]}, - {"type": "frame", "id": "CJ6Title", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "CJ6TitleT", "fill": "#FFFFFF", "content": "Cảm ơn bạn!", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "600"}, - {"type": "text", "id": "CJ6Desc", "fill": "#8B8B90", "content": "Hẹn gặp lại lần sau nhé ☕", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "CJ6Points", "width": "fill_container", "fill": "#14B8A610", "cornerRadius": 14, "padding": 18, "layout": "vertical", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "CJ6PointsIcon", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CJ6PointsI", "width": 20, "height": 20, "iconFontName": "coins", "iconFontFamily": "lucide", "fill": "#14B8A6"}, - {"type": "text", "id": "CJ6PointsLabel", "fill": "#14B8A6", "content": "Điểm tích lũy", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "text", "id": "CJ6PointsValue", "fill": "#14B8A6", "content": "+14 điểm", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}, - {"type": "text", "id": "CJ6PointsTotal", "fill": "#8B8B90", "content": "Tổng: 2,534 điểm", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "CJ6Rating", "width": "fill_container", "layout": "vertical", "gap": 10, "alignItems": "center", "children": [ - {"type": "text", "id": "CJ6RatingLabel", "fill": "#8B8B90", "content": "Đánh giá trải nghiệm", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "CJ6Stars", "gap": 8, "children": [ - {"type": "icon_font", "id": "CJ6Star1", "width": 28, "height": 28, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "CJ6Star2", "width": 28, "height": 28, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "CJ6Star3", "width": 28, "height": 28, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "CJ6Star4", "width": 28, "height": 28, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "CJ6Star5", "width": 28, "height": 28, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#2A2A2E"} - ]} - ]}, - {"type": "frame", "id": "CJ6Done", "width": "fill_container", "height": 50, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "CJ6DoneT", "fill": "#FFFFFF", "content": "Đóng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]} - ] - } - ] - } - ] -} diff --git a/pencil-design/src/pages/tPOS/pos/cafe/workflow/daily-report.pen b/pencil-design/src/pages/tPOS/pos/cafe/workflow/daily-report.pen deleted file mode 100644 index c4c00b28..00000000 --- a/pencil-design/src/pages/tPOS/pos/cafe/workflow/daily-report.pen +++ /dev/null @@ -1,78 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "DailyReport", - "name": "Daily Report", - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "DRModal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 16, - "padding": 24, - "children": [ - {"type": "frame", "id": "DRHeader", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "DRTitle", "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "DRTitleI", "width": 22, "height": 22, "iconFontName": "bar-chart-3", "iconFontFamily": "lucide", "fill": "#3B82F6"}, - {"type": "text", "id": "DRTitleT", "fill": "#FFFFFF", "content": "Báo cáo ngày", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"} - ]}, - {"type": "text", "id": "DRDate", "fill": "#8B8B90", "content": "06/02/2026", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "DRStats", "width": "fill_container", "gap": 10, "children": [ - {"type": "frame", "id": "DRS1", "width": "fill_container", "fill": "#22C55E10", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "DRS1V", "fill": "#22C55E", "content": "8.5M", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"}, - {"type": "text", "id": "DRS1L", "fill": "#8B8B90", "content": "Doanh thu", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "frame", "id": "DRS2", "width": "fill_container", "fill": "#3B82F610", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "DRS2V", "fill": "#3B82F6", "content": "124", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"}, - {"type": "text", "id": "DRS2L", "fill": "#8B8B90", "content": "Đơn hàng", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "DRPayments", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 10, "children": [ - {"type": "text", "id": "DRPayL", "fill": "#8B8B90", "content": "Theo phương thức", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "frame", "id": "DRP1", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "DRP1L", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "DRP1I", "width": 14, "height": 14, "iconFontName": "banknote", "iconFontFamily": "lucide", "fill": "#22C55E"}, {"type": "text", "id": "DRP1T", "fill": "#ADADB0", "content": "Tiền mặt", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "text", "id": "DRP1V", "fill": "#FFFFFF", "content": "3,250,000₫", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "DRP2", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "DRP2L", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "DRP2I", "width": 14, "height": 14, "iconFontName": "qr-code", "iconFontFamily": "lucide", "fill": "#3B82F6"}, {"type": "text", "id": "DRP2T", "fill": "#ADADB0", "content": "QR/Chuyển khoản", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "text", "id": "DRP2V", "fill": "#FFFFFF", "content": "4,850,000₫", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "DRP3", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "DRP3L", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "DRP3I", "width": 14, "height": 14, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "#8B5CF6"}, {"type": "text", "id": "DRP3T", "fill": "#ADADB0", "content": "Thẻ", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "text", "id": "DRP3V", "fill": "#FFFFFF", "content": "400,000₫", "fontFamily": "Roboto", "fontSize": 13} - ]} - ]}, - {"type": "frame", "id": "DRTopItems", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 10, "children": [ - {"type": "text", "id": "DRTopL", "fill": "#8B8B90", "content": "Top bán chạy", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "frame", "id": "DRT1", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "DRT1L", "fill": "#ADADB0", "content": "1. Cà phê sữa đá", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "DRT1V", "fill": "#FF5C00", "content": "45 ly", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "DRT2", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "DRT2L", "fill": "#ADADB0", "content": "2. Trà đào cam sả", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "DRT2V", "fill": "#FFFFFF", "content": "32 ly", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "frame", "id": "DRT3", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "DRT3L", "fill": "#ADADB0", "content": "3. Bạc xỉu", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "DRT3V", "fill": "#FFFFFF", "content": "28 ly", "fontFamily": "Roboto", "fontSize": 13}]} - ]}, - {"type": "frame", "id": "DRActions", "width": "fill_container", "gap": 10, "children": [ - {"type": "frame", "id": "DRExport", "width": "fill_container", "height": 44, "fill": "#2A2A2E", "cornerRadius": 10, "gap": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "DRExportI", "width": 16, "height": 16, "iconFontName": "download", "iconFontFamily": "lucide", "fill": "#ADADB0"}, - {"type": "text", "id": "DRExportT", "fill": "#ADADB0", "content": "Xuất Excel", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "DRPrint", "width": "fill_container", "height": 44, "fill": "#3B82F6", "cornerRadius": 10, "gap": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "DRPrintI", "width": 16, "height": 16, "iconFontName": "printer", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "DRPrintT", "fill": "#FFFFFF", "content": "In báo cáo", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ] - } - ] - } - ] -} diff --git a/pencil-design/src/pages/tPOS/pos/cafe/workflow/loyalty-stamp.pen b/pencil-design/src/pages/tPOS/pos/cafe/workflow/loyalty-stamp.pen deleted file mode 100644 index 8bb4961c..00000000 --- a/pencil-design/src/pages/tPOS/pos/cafe/workflow/loyalty-stamp.pen +++ /dev/null @@ -1,126 +0,0 @@ -{ - "version": "2.7", - "children": [ - { - "type": "frame", - "id": "LoyaltyStampDialog", - "name": "Dialog/LoyaltyStamp", - "reusable": true, - "clip": true, - "width": 380, - "height": 500, - "fill": "$bg-elevated", - "cornerRadius": 24, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "LoyaltyStampHeader", - "width": "fill_container", - "padding": [16, 20], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "LoyaltyStampHeaderLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "LoyaltyStampIconBg", "width": 40, "height": 40, "fill": "#EC489920", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LoyaltyStampIcon", "width": 20, "height": 20, "iconFontName": "stamp", "iconFontFamily": "lucide", "fill": "#EC4899"} - ]}, - {"type": "text", "id": "LoyaltyStampTitle", "fill": "$text-primary", "content": "Thẻ tích điểm", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "LoyaltyStampCloseBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LoyaltyStampCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "LoyaltyStampContent", - "width": "fill_container", - "height": "fill_container", - "padding": 20, - "layout": "vertical", - "gap": 20, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "LoyaltyStampCustomer", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "LoyaltyStampAvatar", "width": 44, "height": 44, "fill": "#D4A37430", "cornerRadius": 22, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "LoyaltyStampInitial", "fill": "#D4A374", "content": "HN", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "LoyaltyStampCustomerInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "LoyaltyStampCustomerName", "fill": "$text-primary", "content": "Hoàng Nam", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, - {"type": "text", "id": "LoyaltyStampCustomerPhone", "fill": "$text-tertiary", "content": "0987 654 321", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"} - ]} - ]}, - {"type": "frame", "id": "LoyaltyStampCard", "width": "fill_container", "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#D4A374", "position": 0}, {"color": "#B8956A", "position": 1}]}, "cornerRadius": 18, "padding": 20, "layout": "vertical", "gap": 16, "children": [ - {"type": "frame", "id": "LoyaltyStampCardHeader", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "LoyaltyStampCardTitle", "fill": "$text-primary", "content": "☕ Coffee Loyalty", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "LoyaltyStampCardCount", "fill": "$text-primary", "content": "7/10", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "LoyaltyStampGrid", "width": "fill_container", "gap": 10, "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "Stamp1", "width": 32, "height": 32, "fill": "#00000030", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Stamp1Icon", "width": 16, "height": 16, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"} - ]}, - {"type": "frame", "id": "Stamp2", "width": 32, "height": 32, "fill": "#00000030", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Stamp2Icon", "width": 16, "height": 16, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"} - ]}, - {"type": "frame", "id": "Stamp3", "width": 32, "height": 32, "fill": "#00000030", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Stamp3Icon", "width": 16, "height": 16, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"} - ]}, - {"type": "frame", "id": "Stamp4", "width": 32, "height": 32, "fill": "#00000030", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Stamp4Icon", "width": 16, "height": 16, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"} - ]}, - {"type": "frame", "id": "Stamp5", "width": 32, "height": 32, "fill": "#00000030", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Stamp5Icon", "width": 16, "height": 16, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"} - ]}, - {"type": "frame", "id": "Stamp6", "width": 32, "height": 32, "fill": "#00000030", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Stamp6Icon", "width": 16, "height": 16, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"} - ]}, - {"type": "frame", "id": "Stamp7", "width": 32, "height": 32, "fill": "#00000030", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Stamp7Icon", "width": 16, "height": 16, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"} - ]}, - {"type": "frame", "id": "Stamp8", "width": 32, "height": 32, "fill": "#FFFFFF30", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#FFFFFF60"}}, - {"type": "frame", "id": "Stamp9", "width": 32, "height": 32, "fill": "#FFFFFF30", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#FFFFFF60"}}, - {"type": "frame", "id": "Stamp10", "width": 32, "height": 32, "fill": "#FFFFFF30", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#FFFFFF60"}, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Stamp10Gift", "width": 16, "height": 16, "iconFontName": "gift", "iconFontFamily": "lucide", "fill": "#FFFFFF80"} - ]} - ]}, - {"type": "text", "id": "LoyaltyStampReward", "fill": "#FFFFFFCC", "content": "Còn 3 stamp nữa - Nhận 1 ly FREE!", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500", "textAlign": "center"} - ]}, - {"type": "frame", "id": "LoyaltyStampAddInfo", "width": "fill_container", "fill": "#22C55E15", "cornerRadius": 12, "padding": [12, 16], "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LoyaltyStampAddIcon", "width": 18, "height": 18, "iconFontName": "plus-circle", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "frame", "id": "LoyaltyStampAddText", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "LoyaltyStampAddTitle", "fill": "#22C55E", "content": "+1 stamp từ đơn hàng này", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "LoyaltyStampAddDesc", "fill": "$text-tertiary", "content": "Mua 1 Latte - 55,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "LoyaltyStampFooter", - "width": "fill_container", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, - "padding": [16, 20], - "children": [ - {"type": "frame", "id": "LoyaltyStampConfirmBtn", "width": "fill_container", "height": 52, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8533", "position": 1}]}, "cornerRadius": 12, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LoyaltyStampConfirmIcon", "width": 20, "height": 20, "iconFontName": "stamp", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "LoyaltyStampConfirmText", "fill": "$text-primary", "content": "Tích đ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/cafe/workflow/menu-management.pen b/pencil-design/src/pages/tPOS/pos/cafe/workflow/menu-management.pen deleted file mode 100644 index 56aedec5..00000000 --- a/pencil-design/src/pages/tPOS/pos/cafe/workflow/menu-management.pen +++ /dev/null @@ -1,155 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "MenuManagement", - "name": "Menu Management", - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "MMModal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 16, - "padding": 24, - "children": [ - {"type": "frame", "id": "MMHeader", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "MMTitle", "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MMTitleI", "width": 22, "height": 22, "iconFontName": "book-open", "iconFontFamily": "lucide", "fill": "#8B5CF6"}, - {"type": "text", "id": "MMTitleT", "fill": "#FFFFFF", "content": "Quản lý menu", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "MMSearch", "width": 32, "height": 32, "fill": "#2A2A2E", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "MMSearchI", "width": 16, "height": 16, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "#8B8B90"}]} - ]}, - {"type": "frame", "id": "MMCategories", "width": "fill_container", "gap": 8, "children": [ - {"type": "frame", "id": "MMCat1", "fill": "#8B5CF6", "cornerRadius": 16, "padding": [6, 12], "children": [{"type": "text", "id": "MMCat1T", "fill": "#FFF", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "frame", "id": "MMCat2", "fill": "#2A2A2E", "cornerRadius": 16, "padding": [6, 12], "children": [{"type": "text", "id": "MMCat2T", "fill": "#8B8B90", "content": "Cà phê", "fontFamily": "Roboto", "fontSize": 11}]}, - {"type": "frame", "id": "MMCat3", "fill": "#2A2A2E", "cornerRadius": 16, "padding": [6, 12], "children": [{"type": "text", "id": "MMCat3T", "fill": "#8B8B90", "content": "Trà", "fontFamily": "Roboto", "fontSize": 11}]}, - {"type": "frame", "id": "MMCat4", "fill": "#2A2A2E", "cornerRadius": 16, "padding": [6, 12], "children": [{"type": "text", "id": "MMCat4T", "fill": "#8B8B90", "content": "Bánh", "fontFamily": "Roboto", "fontSize": 11}]} - ]}, - {"type": "frame", "id": "MMItems", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "frame", "id": "MMI1", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "MMI1L", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "MMI1Img", "width": 44, "height": 44, "fill": "#2A2A2E", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "MMI1ImgI", "width": 20, "height": 20, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "#6B6B70"}]}, - {"type": "frame", "id": "MMI1Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "MMI1N", "fill": "#FFFFFF", "content": "Cà phê sữa đá", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "MMI1P", "fill": "#22C55E", "content": "29,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "MMI1Toggle", "width": 44, "height": 24, "fill": "#22C55E", "cornerRadius": 12, "padding": [2, 2], "justifyContent": "flex_end", "alignItems": "center", "children": [{"type": "frame", "id": "MMI1Ball", "width": 20, "height": 20, "fill": "#FFFFFF", "cornerRadius": 10}]} - ]}, - {"type": "frame", "id": "MMI2", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "MMI2L", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "MMI2Img", "width": 44, "height": 44, "fill": "#2A2A2E", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "MMI2ImgI", "width": 20, "height": 20, "iconFontName": "cup-soda", "iconFontFamily": "lucide", "fill": "#6B6B70"}]}, - {"type": "frame", "id": "MMI2Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "MMI2N", "fill": "#FFFFFF", "content": "Trà đào cam sả", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "MMI2P", "fill": "#22C55E", "content": "45,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "MMI2Toggle", "width": 44, "height": 24, "fill": "#22C55E", "cornerRadius": 12, "padding": [2, 2], "justifyContent": "flex_end", "alignItems": "center", "children": [{"type": "frame", "id": "MMI2Ball", "width": 20, "height": 20, "fill": "#FFFFFF", "cornerRadius": 10}]} - ]}, - {"type": "frame", "id": "MMI3", "width": "fill_container", "fill": "#EF444410", "cornerRadius": 12, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "MMI3L", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "MMI3Img", "width": 44, "height": 44, "fill": "#EF444420", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "MMI3ImgI", "width": 20, "height": 20, "iconFontName": "cookie", "iconFontFamily": "lucide", "fill": "#EF4444"}]}, - {"type": "frame", "id": "MMI3Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "frame", "id": "MMI3NH", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "MMI3N", "fill": "#FFFFFF", "content": "Bánh mì pate", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "frame", "id": "MMI3Badge", "fill": "#EF4444", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "MMI3BadgeT", "fill": "#FFF", "content": "HẾT", "fontFamily": "Roboto", "fontSize": 8, "fontWeight": "700"}]} - ]}, - {"type": "text", "id": "MMI3P", "fill": "#6B6B70", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "MMI3Toggle", "width": 44, "height": 24, "fill": "#3A3A3E", "cornerRadius": 12, "padding": [2, 2], "justifyContent": "flex_start", "alignItems": "center", "children": [{"type": "frame", "id": "MMI3Ball", "width": 20, "height": 20, "fill": "#8B8B90", "cornerRadius": 10}]} - ]}, - {"type": "frame", "id": "MMI4", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "MMI4L", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "MMI4Img", "width": 44, "height": 44, "fill": "#2A2A2E", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "MMI4ImgI", "width": 20, "height": 20, "iconFontName": "milk", "iconFontFamily": "lucide", "fill": "#6B6B70"}]}, - {"type": "frame", "id": "MMI4Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "MMI4N", "fill": "#FFFFFF", "content": "Bạc xỉu", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "MMI4P", "fill": "#22C55E", "content": "32,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "MMI4Toggle", "width": 44, "height": 24, "fill": "#22C55E", "cornerRadius": 12, "padding": [2, 2], "justifyContent": "flex_end", "alignItems": "center", "children": [{"type": "frame", "id": "MMI4Ball", "width": 20, "height": 20, "fill": "#FFFFFF", "cornerRadius": 10}]} - ]} - ]}, - {"type": "frame", "id": "MMBatch", "width": "fill_container", "height": 44, "fill": "#8B5CF6", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MMBatchI", "width": 16, "height": 16, "iconFontName": "settings-2", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "MMBatchT", "fill": "#FFFFFF", "content": "Cập nhật giá hàng loạt", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "EditPrice", - "name": "Edit Price Dialog", - "x": 540, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "EPModal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 2, "fill": "#8B5CF6"}, - "layout": "vertical", - "gap": 20, - "padding": 28, - "children": [ - {"type": "frame", "id": "EPHeader", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "EPTitle", "fill": "#FFFFFF", "content": "Chỉnh sửa món", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}, - {"type": "frame", "id": "EPClose", "width": 32, "height": 32, "fill": "#2A2A2E", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "EPCloseI", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#8B8B90"}]} - ]}, - {"type": "frame", "id": "EPItem", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 14, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "EPItemImg", "width": 56, "height": 56, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "EPItemImgI", "width": 24, "height": 24, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "#6B6B70"}]}, - {"type": "frame", "id": "EPItemInfo", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "EPItemN", "fill": "#FFFFFF", "content": "Cà phê sữa đá", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "text", "id": "EPItemC", "fill": "#8B8B90", "content": "Cà phê", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "EPPrice", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ - {"type": "text", "id": "EPPriceL", "fill": "#8B8B90", "content": "Giá bán", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "EPPriceInput", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "stroke": {"thickness": 2, "fill": "#8B5CF6"}, "padding": [14, 16], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "EPPriceV", "fill": "#FFFFFF", "content": "29,000", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}, - {"type": "text", "id": "EPPriceU", "fill": "#8B8B90", "content": "₫", "fontFamily": "Roboto", "fontSize": 16} - ]} - ]}, - {"type": "frame", "id": "EPQuick", "width": "fill_container", "gap": 8, "children": [ - {"type": "frame", "id": "EPQ1", "width": "fill_container", "height": 36, "fill": "#22C55E20", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "EPQ1T", "fill": "#22C55E", "content": "+5,000", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "EPQ2", "width": "fill_container", "height": 36, "fill": "#22C55E20", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "EPQ2T", "fill": "#22C55E", "content": "+10,000", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "EPQ3", "width": "fill_container", "height": 36, "fill": "#EF444420", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "EPQ3T", "fill": "#EF4444", "content": "-5,000", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]} - ]}, - {"type": "frame", "id": "EPStatus", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ - {"type": "text", "id": "EPStatusL", "fill": "#8B8B90", "content": "Trạng thái", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "EPStatusOpts", "width": "fill_container", "gap": 10, "children": [ - {"type": "frame", "id": "EPSO1", "width": "fill_container", "fill": "#22C55E20", "stroke": {"thickness": 2, "fill": "#22C55E"}, "cornerRadius": 10, "padding": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "EPSO1T", "fill": "#22C55E", "content": "Còn hàng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, - {"type": "frame", "id": "EPSO2", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 10, "padding": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "EPSO2T", "fill": "#8B8B90", "content": "Hết hàng", "fontFamily": "Roboto", "fontSize": 13}]} - ]} - ]}, - {"type": "frame", "id": "EPActions", "width": "fill_container", "gap": 10, "children": [ - {"type": "frame", "id": "EPCancel", "width": "fill_container", "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "EPCancelT", "fill": "#ADADB0", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "EPSave", "width": "fill_container", "height": 48, "fill": "#8B5CF6", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "EPSaveI", "width": 16, "height": 16, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "EPSaveT", "fill": "#FFFFFF", "content": "Lưu thay đổi", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ]} - ] - } - ] - } - ] -} diff --git a/pencil-design/src/pages/tPOS/pos/cafe/workflow/milk-foam-options.pen b/pencil-design/src/pages/tPOS/pos/cafe/workflow/milk-foam-options.pen deleted file mode 100644 index 463a044e..00000000 --- a/pencil-design/src/pages/tPOS/pos/cafe/workflow/milk-foam-options.pen +++ /dev/null @@ -1,132 +0,0 @@ -{ - "version": "2.7", - "children": [ - { - "type": "frame", - "id": "MilkFoamOptionsDialog", - "name": "Dialog/MilkFoamOptions", - "reusable": true, - "clip": true, - "width": 400, - "height": 540, - "fill": "$bg-elevated", - "cornerRadius": 24, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "MilkFoamHeader", - "width": "fill_container", - "padding": [16, 20], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "MilkFoamHeaderLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "MilkFoamIconBg", "width": 40, "height": 40, "fill": "#D4A37420", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MilkFoamIcon", "width": 20, "height": 20, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "#D4A374"} - ]}, - {"type": "text", "id": "MilkFoamTitle", "fill": "$text-primary", "content": "Tùy chỉnh đồ uống", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "MilkFoamCloseBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MilkFoamCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "MilkFoamContent", - "width": "fill_container", - "height": "fill_container", - "padding": 20, - "layout": "vertical", - "gap": 16, - "children": [ - {"type": "frame", "id": "MilkFoamProductInfo", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "MilkFoamProductImg", "width": 48, "height": 48, "fill": "#D4A37420", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MilkFoamProductIcon", "width": 24, "height": 24, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "#D4A374"} - ]}, - {"type": "frame", "id": "MilkFoamProductText", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "MilkFoamProductName", "fill": "$text-primary", "content": "Latte - Size L", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, - {"type": "text", "id": "MilkFoamProductPrice", "fill": "$orange-primary", "content": "55,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "MilkTypeSection", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ - {"type": "text", "id": "MilkTypeLabel", "fill": "$text-secondary", "content": "Loại sữa", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "MilkTypeOptions", "width": "fill_container", "gap": 8, "children": [ - {"type": "frame", "id": "MilkType1", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "MilkType1Text", "fill": "$text-primary", "content": "Sữa tươi", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "MilkType2", "width": "fill_container", "height": 44, "fill": "$bg-page", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "MilkType2Text", "fill": "$text-secondary", "content": "Sữa yến mạch", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "MilkType3", "width": "fill_container", "height": 44, "fill": "$bg-page", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "MilkType3Text", "fill": "$text-secondary", "content": "Sữa hạnh nhân", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ]} - ]}, - {"type": "frame", "id": "FoamSection", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ - {"type": "text", "id": "FoamLabel", "fill": "$text-secondary", "content": "Foam", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "FoamOptions", "width": "fill_container", "gap": 8, "children": [ - {"type": "frame", "id": "Foam1", "width": "fill_container", "height": 44, "fill": "$bg-page", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Foam1Text", "fill": "$text-secondary", "content": "Không foam", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "Foam2", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Foam2Text", "fill": "$text-primary", "content": "Foam thường", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "Foam3", "width": "fill_container", "height": 44, "fill": "$bg-page", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Foam3Text", "fill": "$text-secondary", "content": "Extra foam", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ]} - ]}, - {"type": "frame", "id": "ExtraSection", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ - {"type": "text", "id": "ExtraLabel", "fill": "$text-secondary", "content": "Thêm topping (+10,000₫)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "ExtraOptions", "width": "fill_container", "gap": 8, "children": [ - {"type": "frame", "id": "Extra1", "fill": "$bg-page", "cornerRadius": 10, "padding": [10, 16], "stroke": {"thickness": 2, "fill": "#22C55E"}, "gap": 6, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Extra1Check", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "Extra1Text", "fill": "$text-primary", "content": "Shot espresso", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "Extra2", "fill": "$bg-page", "cornerRadius": 10, "padding": [10, 16], "children": [ - {"type": "text", "id": "Extra2Text", "fill": "$text-secondary", "content": "Caramel", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "Extra3", "fill": "$bg-page", "cornerRadius": 10, "padding": [10, 16], "children": [ - {"type": "text", "id": "Extra3Text", "fill": "$text-secondary", "content": "Vanilla", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "MilkFoamFooter", - "width": "fill_container", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, - "padding": [16, 20], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "MilkFoamTotal", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "MilkFoamTotalLabel", "fill": "$text-tertiary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}, - {"type": "text", "id": "MilkFoamTotalValue", "fill": "$orange-primary", "content": "65,000₫", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "MilkFoamAddBtn", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8533", "position": 1}]}, "cornerRadius": 12, "padding": [0, 24], "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MilkFoamAddIcon", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "MilkFoamAddText", "fill": "$text-primary", "content": "Thêm vào đơn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/cafe/workflow/order-customize.pen b/pencil-design/src/pages/tPOS/pos/cafe/workflow/order-customize.pen deleted file mode 100644 index 52e928b2..00000000 --- a/pencil-design/src/pages/tPOS/pos/cafe/workflow/order-customize.pen +++ /dev/null @@ -1,149 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "OrderCustomizeDialog", - "name": "Dialog/Order Customize", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "#0A0A0B80", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CustomizeModal", - "width": 420, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "CustomizeProduct", - "width": "fill_container", - "height": 120, - "fill": "#FF5C0020", - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "CustomizeProductImg", "width": 100, "height": 100, "fill": "#FF5C0030", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CustomizeProductIcon", "width": 48, "height": 48, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "#FF5C00"} - ]} - ] - }, - { - "type": "frame", - "id": "CustomizeContent", - "width": "fill_container", - "padding": 24, - "layout": "vertical", - "gap": 20, - "children": [ - {"type": "frame", "id": "CustomizeHeader", "width": "fill_container", "justifyContent": "space_between", "alignItems": "flex-start", "children": [ - {"type": "frame", "id": "CustomizeHeaderLeft", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "CustomizeName", "fill": "#FFFFFF", "content": "Cappuccino", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}, - {"type": "text", "id": "CustomizeDesc", "fill": "#8B8B90", "content": "Espresso + Sữa tươi + Foam", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "CustomizeClose", "width": 32, "height": 32, "fill": "#2A2A2E", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CustomizeCloseIcon", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#8B8B90"} - ]} - ]}, - { - "type": "frame", - "id": "CustomizeSize", - "width": "fill_container", - "layout": "vertical", - "gap": 10, - "children": [ - {"type": "text", "id": "CustomizeSizeLabel", "fill": "#8B8B90", "content": "Kích cỡ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "frame", "id": "CustomizeSizeOptions", "width": "fill_container", "gap": 8, "children": [ - {"type": "frame", "id": "CustomizeSizeS", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 10, "padding": [12, 0], "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "CustomizeSizeSLabel", "fill": "#8B8B90", "content": "S", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "text", "id": "CustomizeSizeSPrice", "fill": "#6B6B70", "content": "+0₫", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "frame", "id": "CustomizeSizeM", "width": "fill_container", "fill": "#FF5C0020", "stroke": {"thickness": 2, "fill": "#FF5C00"}, "cornerRadius": 10, "padding": [12, 0], "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "CustomizeSizeMLabel", "fill": "#FF5C00", "content": "M", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "text", "id": "CustomizeSizeMPrice", "fill": "#FF5C00", "content": "+10K", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "CustomizeSizeL", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 10, "padding": [12, 0], "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "CustomizeSizeLLabel", "fill": "#8B8B90", "content": "L", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "text", "id": "CustomizeSizeLPrice", "fill": "#6B6B70", "content": "+20K", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "CustomizeSugar", - "width": "fill_container", - "layout": "vertical", - "gap": 10, - "children": [ - {"type": "text", "id": "CustomizeSugarLabel", "fill": "#8B8B90", "content": "Độ ngọt", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "frame", "id": "CustomizeSugarOptions", "width": "fill_container", "gap": 6, "children": [ - {"type": "frame", "id": "CustomizeSugar0", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "CustomizeSugar0T", "fill": "#8B8B90", "content": "0%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "CustomizeSugar30", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "CustomizeSugar30T", "fill": "#8B8B90", "content": "30%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "CustomizeSugar50", "fill": "#FF5C0020", "stroke": {"thickness": 2, "fill": "#FF5C00"}, "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "CustomizeSugar50T", "fill": "#FF5C00", "content": "50%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "CustomizeSugar70", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "CustomizeSugar70T", "fill": "#8B8B90", "content": "70%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "CustomizeSugar100", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "CustomizeSugar100T", "fill": "#8B8B90", "content": "100%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]} - ]} - ] - }, - { - "type": "frame", - "id": "CustomizeTopping", - "width": "fill_container", - "layout": "vertical", - "gap": 10, - "children": [ - {"type": "text", "id": "CustomizeToppingLabel", "fill": "#8B8B90", "content": "Topping", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "frame", "id": "CustomizeToppingOptions", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "frame", "id": "CustomizeTopping1", "width": "fill_container", "fill": "#22C55E10", "stroke": {"thickness": 1, "fill": "#22C55E"}, "cornerRadius": 10, "padding": [10, 14], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "CustomizeTopping1Left", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "CustomizeTopping1Check", "width": 20, "height": 20, "fill": "#22C55E", "cornerRadius": 4, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "CustomizeTopping1CheckI", "width": 12, "height": 12, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFF"}]}, - {"type": "text", "id": "CustomizeTopping1Name", "fill": "#FFFFFF", "content": "Trân châu đen", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "text", "id": "CustomizeTopping1Price", "fill": "#22C55E", "content": "+10,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "CustomizeTopping2", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 10, "padding": [10, 14], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "CustomizeTopping2Left", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "CustomizeTopping2Check", "width": 20, "height": 20, "fill": "transparent", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 4}, - {"type": "text", "id": "CustomizeTopping2Name", "fill": "#8B8B90", "content": "Thạch dừa", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "text", "id": "CustomizeTopping2Price", "fill": "#6B6B70", "content": "+8,000₫", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]} - ] - }, - {"type": "frame", "id": "CustomizeDivider", "width": "fill_container", "height": 1, "fill": "#1F1F23"}, - { - "type": "frame", - "id": "CustomizeFooter", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "CustomizeQty", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "CustomizeQtyMinus", "width": 36, "height": 36, "fill": "#2A2A2E", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "CustomizeQtyMinusI", "width": 18, "height": 18, "iconFontName": "minus", "iconFontFamily": "lucide", "fill": "#ADADB0"}]}, - {"type": "text", "id": "CustomizeQtyNum", "fill": "#FFFFFF", "content": "2", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}, - {"type": "frame", "id": "CustomizeQtyPlus", "width": 36, "height": 36, "fill": "#FF5C00", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "CustomizeQtyPlusI", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"}]} - ]}, - {"type": "frame", "id": "CustomizeAddBtn", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 10, "padding": [0, 24], "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CustomizeAddIcon", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "CustomizeAddText", "fill": "#FFFFFF", "content": "Thêm 150,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - } - ] - } - ] - } - ] -} diff --git a/pencil-design/src/pages/tPOS/pos/cafe/workflow/queue-display.pen b/pencil-design/src/pages/tPOS/pos/cafe/workflow/queue-display.pen deleted file mode 100644 index c0d1735d..00000000 --- a/pencil-design/src/pages/tPOS/pos/cafe/workflow/queue-display.pen +++ /dev/null @@ -1,102 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "CafeQueueDisplay", - "name": "Cafe/Queue Display", - "reusable": true, - "width": 1920, - "height": 1080, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "QueueHeader", - "width": "fill_container", - "height": 120, - "fill": "$bg-elevated", - "padding": [0, 60], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "QueueLogo", "gap": 20, "alignItems": "center", "children": [ - {"type": "frame", "id": "QueueLogoIcon", "width": 60, "height": 60, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "QueueLogoText", "fill": "$text-primary", "content": "G", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}]}, - {"type": "text", "id": "QueueStoreName", "fill": "$text-primary", "content": "GOODGO CAFÉ", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "QueueTime", "gap": 16, "alignItems": "center", "children": [ - {"type": "text", "id": "QueueTimeValue", "fill": "$text-primary", "content": "00:05", "fontFamily": "Roboto", "fontSize": 48, "fontWeight": "700"}, - {"type": "text", "id": "QueueDate", "fill": "$text-secondary", "content": "06/02/2026", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "normal"} - ]} - ] - }, - { - "type": "frame", - "id": "QueueMain", - "width": "fill_container", - "height": "fill_container", - "padding": 60, - "gap": 60, - "children": [ - { - "type": "frame", - "id": "QueueNowServing", - "width": "fill_container", - "height": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 32, - "layout": "vertical", - "alignItems": "center", - "justifyContent": "center", - "gap": 24, - "children": [ - {"type": "text", "id": "QueueNowLabel", "fill": "$text-secondary", "content": "ĐANG PHỤC VỤ", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "600"}, - {"type": "frame", "id": "QueueNowNumbers", "gap": 40, "alignItems": "center", "children": [ - {"type": "frame", "id": "QueueNow1", "width": 180, "height": 180, "fill": "#22C55E", "cornerRadius": 24, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "QueueNow1Text", "fill": "$text-primary", "content": "042", "fontFamily": "Roboto", "fontSize": 72, "fontWeight": "700"}]}, - {"type": "frame", "id": "QueueNow2", "width": 180, "height": 180, "fill": "#22C55E", "cornerRadius": 24, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "QueueNow2Text", "fill": "$text-primary", "content": "043", "fontFamily": "Roboto", "fontSize": 72, "fontWeight": "700"}]}, - {"type": "frame", "id": "QueueNow3", "width": 180, "height": 180, "fill": "#22C55E", "cornerRadius": 24, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "QueueNow3Text", "fill": "$text-primary", "content": "044", "fontFamily": "Roboto", "fontSize": 72, "fontWeight": "700"}]} - ]}, - {"type": "text", "id": "QueueNowHint", "fill": "$text-tertiary", "content": "Vui lòng đến quầy nhận đồ", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "normal"} - ] - }, - { - "type": "frame", - "id": "QueuePreparing", - "width": 480, - "height": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 32, - "layout": "vertical", - "clip": true, - "children": [ - {"type": "frame", "id": "QueuePrepHeader", "width": "fill_container", "padding": [24, 32], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [ - {"type": "text", "id": "QueuePrepTitle", "fill": "#F59E0B", "content": "ĐANG PHA CHẾ", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "QueuePrepList", "width": "fill_container", "height": "fill_container", "padding": 32, "layout": "vertical", "gap": 20, "children": [ - {"type": "frame", "id": "QueuePrep1", "width": "fill_container", "fill": "#F59E0B20", "cornerRadius": 16, "padding": [16, 24], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "QueuePrep1Num", "fill": "#F59E0B", "content": "#045", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, {"type": "text", "id": "QueuePrep1Items", "fill": "$text-secondary", "content": "2 món", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "normal"}]}, - {"type": "frame", "id": "QueuePrep2", "width": "fill_container", "fill": "#F59E0B20", "cornerRadius": 16, "padding": [16, 24], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "QueuePrep2Num", "fill": "#F59E0B", "content": "#046", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, {"type": "text", "id": "QueuePrep2Items", "fill": "$text-secondary", "content": "1 món", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "normal"}]}, - {"type": "frame", "id": "QueuePrep3", "width": "fill_container", "fill": "#F59E0B20", "cornerRadius": 16, "padding": [16, 24], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "QueuePrep3Num", "fill": "#F59E0B", "content": "#047", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, {"type": "text", "id": "QueuePrep3Items", "fill": "$text-secondary", "content": "3 món", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "normal"}]}, - {"type": "frame", "id": "QueuePrep4", "width": "fill_container", "fill": "#F59E0B20", "cornerRadius": 16, "padding": [16, 24], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "QueuePrep4Num", "fill": "#F59E0B", "content": "#048", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, {"type": "text", "id": "QueuePrep4Items", "fill": "$text-secondary", "content": "2 món", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "normal"}]}, - {"type": "frame", "id": "QueuePrep5", "width": "fill_container", "fill": "#F59E0B20", "cornerRadius": 16, "padding": [16, 24], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "QueuePrep5Num", "fill": "#F59E0B", "content": "#049", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, {"type": "text", "id": "QueuePrep5Items", "fill": "$text-secondary", "content": "1 món", "fontFamily": "Roboto", "fontSize": 18, "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/karaoke/desktop.pen b/pencil-design/src/pages/tPOS/pos/karaoke/desktop.pen deleted file mode 100644 index ed0b4e1c..00000000 --- a/pencil-design/src/pages/tPOS/pos/karaoke/desktop.pen +++ /dev/null @@ -1,136 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "POSKaraokeScreen", - "name": "POS Karaoke Screen", - "reusable": true, - "width": 1920, - "height": 1080, - "fill": "$bg-page", - "layout": "horizontal", - "clip": true, - "children": [ - { - "type": "frame", - "id": "KtvSidebar", - "name": "sidebar", - "width": 300, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, - "layout": "vertical", - "children": [ - {"type": "frame", "id": "KtvSideHeader", "width": "fill_container", "padding": 20, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "KtvLogo", "width": 44, "height": 44, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "KtvLogoText", "fill": "$text-primary", "content": "G", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}]}, {"type": "frame", "id": "KtvStoreInfo", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "KtvStoreName", "fill": "$text-primary", "content": "GoodGo Karaoke", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "text", "id": "KtvBranch", "fill": "$text-secondary", "content": "Chi nhánh Hai Bà Trưng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}, - { - "type": "frame", - "id": "KtvRoomArea", - "name": "roomArea", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "padding": 16, - "gap": 12, - "children": [ - {"type": "frame", "id": "KtvRoomFilter", "width": "fill_container", "gap": 8, "children": [{"type": "frame", "id": "KtvFilterAll", "fill": "$orange-primary", "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "KtvFilterAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, {"type": "frame", "id": "KtvFilterVIP", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "KtvFilterVIPText", "fill": "$text-secondary", "content": "VIP", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, {"type": "frame", "id": "KtvFilterNormal", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "KtvFilterNormalText", "fill": "$text-secondary", "content": "Thường", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}]}, - { - "type": "frame", - "id": "KtvRoomGrid", - "name": "roomGrid", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "gap": 10, - "children": [ - {"type": "frame", "id": "KtvRoom1", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KtvRoom1Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "KtvRoom1Icon", "width": 44, "height": 44, "fill": "#8B5CF630", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvRoom1IconFont", "width": 22, "height": 22, "iconFontName": "mic", "iconFontFamily": "lucide", "fill": "#8B5CF6"}]}, {"type": "frame", "id": "KtvRoom1Info", "layout": "vertical", "gap": 4, "children": [{"type": "text", "id": "KtvRoom1Name", "fill": "$text-primary", "content": "VIP 01", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "text", "id": "KtvRoom1Time", "fill": "$orange-primary", "content": "02:45 • 6 khách", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}]}, {"type": "text", "id": "KtvRoom1Price", "fill": "$text-primary", "content": "450K", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}]}, - {"type": "frame", "id": "KtvRoom2", "width": "fill_container", "fill": "#EF444415", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#EF444450"}, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KtvRoom2Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "KtvRoom2Icon", "width": 44, "height": 44, "fill": "#EF444430", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvRoom2IconFont", "width": 22, "height": 22, "iconFontName": "mic", "iconFontFamily": "lucide", "fill": "#EF4444"}]}, {"type": "frame", "id": "KtvRoom2Info", "layout": "vertical", "gap": 4, "children": [{"type": "text", "id": "KtvRoom2Name", "fill": "$text-primary", "content": "VIP 02", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "text", "id": "KtvRoom2Time", "fill": "#EF4444", "content": "01:30 • 8 khách", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}]}, {"type": "text", "id": "KtvRoom2Price", "fill": "$text-primary", "content": "380K", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}]}, - {"type": "frame", "id": "KtvRoom3", "width": "fill_container", "fill": "#22C55E15", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#22C55E50"}, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KtvRoom3Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "KtvRoom3Icon", "width": 44, "height": 44, "fill": "#22C55E30", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvRoom3IconFont", "width": 22, "height": 22, "iconFontName": "mic", "iconFontFamily": "lucide", "fill": "#22C55E"}]}, {"type": "frame", "id": "KtvRoom3Info", "layout": "vertical", "gap": 4, "children": [{"type": "text", "id": "KtvRoom3Name", "fill": "$text-primary", "content": "VIP 03", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "text", "id": "KtvRoom3Status", "fill": "#22C55E", "content": "Trống", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}]}, {"type": "text", "id": "KtvRoom3Rate", "fill": "$text-secondary", "content": "150K/h", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "KtvRoom4", "width": "fill_container", "fill": "#F59E0B15", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#F59E0B50"}, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KtvRoom4Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "KtvRoom4Icon", "width": 44, "height": 44, "fill": "#F59E0B30", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvRoom4IconFont", "width": 22, "height": 22, "iconFontName": "mic", "iconFontFamily": "lucide", "fill": "#F59E0B"}]}, {"type": "frame", "id": "KtvRoom4Info", "layout": "vertical", "gap": 4, "children": [{"type": "text", "id": "KtvRoom4Name", "fill": "$text-primary", "content": "Phòng 04", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "text", "id": "KtvRoom4Status", "fill": "#F59E0B", "content": "Đặt trước 20:00", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}]}, {"type": "text", "id": "KtvRoom4Rate", "fill": "$text-secondary", "content": "80K/h", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "KtvRoom5", "width": "fill_container", "fill": "#EF444415", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#EF444450"}, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KtvRoom5Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "KtvRoom5Icon", "width": 44, "height": 44, "fill": "#EF444430", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvRoom5IconFont", "width": 22, "height": 22, "iconFontName": "mic", "iconFontFamily": "lucide", "fill": "#EF4444"}]}, {"type": "frame", "id": "KtvRoom5Info", "layout": "vertical", "gap": 4, "children": [{"type": "text", "id": "KtvRoom5Name", "fill": "$text-primary", "content": "Phòng 05", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "text", "id": "KtvRoom5Time", "fill": "#EF4444", "content": "00:45 • 4 khách", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}]}, {"type": "text", "id": "KtvRoom5Price", "fill": "$text-primary", "content": "120K", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}]} - ] - }, - {"type": "frame", "id": "KtvRoomLegend", "width": "fill_container", "gap": 12, "wrap": true, "children": [{"type": "frame", "id": "KtvLegAvail", "gap": 6, "alignItems": "center", "children": [{"type": "frame", "id": "KtvLegAvailDot", "width": 10, "height": 10, "fill": "#22C55E", "cornerRadius": 100}, {"type": "text", "id": "KtvLegAvailText", "fill": "$text-tertiary", "content": "Trống", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}]}, {"type": "frame", "id": "KtvLegOcc", "gap": 6, "alignItems": "center", "children": [{"type": "frame", "id": "KtvLegOccDot", "width": 10, "height": 10, "fill": "#EF4444", "cornerRadius": 100}, {"type": "text", "id": "KtvLegOccText", "fill": "$text-tertiary", "content": "Đang hát", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}]}, {"type": "frame", "id": "KtvLegRes", "gap": 6, "alignItems": "center", "children": [{"type": "frame", "id": "KtvLegResDot", "width": 10, "height": 10, "fill": "#F59E0B", "cornerRadius": 100}, {"type": "text", "id": "KtvLegResText", "fill": "$text-tertiary", "content": "Đặt trước", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}]}]} - ] - } - ] - }, - { - "type": "frame", - "id": "KtvMainContent", - "name": "mainContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "children": [ - {"type": "frame", "id": "KtvHeader", "width": "fill_container", "height": 64, "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [0, 24], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KtvHeaderRoomInfo", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "KtvRoomBadge", "fill": "#8B5CF6", "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "KtvRoomBadgeText", "fill": "$text-primary", "content": "VIP 01", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"}]}, {"type": "frame", "id": "KtvRoomInfoDetails", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "KtvRoomGuest", "fill": "$text-primary", "content": "6 khách • Từ 19:15", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "KtvRoomTimer", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvTimerIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$orange-primary"}, {"type": "text", "id": "KtvTimerText", "fill": "$orange-primary", "content": "02:45:30", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}]}]}, {"type": "frame", "id": "KtvSearchBox", "width": 360, "height": 44, "fill": "$bg-surface", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 16], "gap": 12, "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvSearchIcon", "width": 20, "height": 20, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "KtvSearchPlaceholder", "fill": "$text-tertiary", "content": "Tìm đồ uống, snack...", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}]}, {"type": "frame", "id": "KtvHeaderRight", "gap": 16, "alignItems": "center", "children": [{"type": "frame", "id": "KtvDateTime", "layout": "vertical", "gap": 2, "alignItems": "flex_end", "children": [{"type": "text", "id": "KtvTime", "fill": "$text-primary", "content": "22:00", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, {"type": "text", "id": "KtvDate", "fill": "$text-secondary", "content": "05/02/2026", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, {"type": "frame", "id": "KtvUserAvatar", "width": 40, "height": 40, "fill": "#8B5CF630", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "KtvUserInit", "fill": "#8B5CF6", "content": "L", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]}]}]}, - {"type": "frame", "id": "KtvCategoryBar", "width": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [12, 24], "gap": 12, "children": [{"type": "frame", "id": "KtvCatAll", "fill": "$orange-primary", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "KtvCatAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, {"type": "frame", "id": "KtvCatBeer", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvCatBeerIcon", "width": 14, "height": 14, "iconFontName": "beer", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "KtvCatBeerText", "fill": "$text-secondary", "content": "Bia", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, {"type": "frame", "id": "KtvCatSoftDrink", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "KtvCatSoftDrinkText", "fill": "$text-secondary", "content": "Nước ngọt", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, {"type": "frame", "id": "KtvCatSnack", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "KtvCatSnackText", "fill": "$text-secondary", "content": "Snack", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, {"type": "frame", "id": "KtvCatFruit", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "KtvCatFruitText", "fill": "$text-secondary", "content": "Trái cây", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, {"type": "frame", "id": "KtvCatCombo", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "KtvCatComboText", "fill": "$text-secondary", "content": "Combo", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}]}, - { - "type": "frame", - "id": "KtvProductArea", - "name": "productArea", - "width": "fill_container", - "height": "fill_container", - "padding": 24, - "gap": 20, - "wrap": true, - "alignContent": "flex_start", - "children": [ - {"type": "frame", "id": "KtvProd1", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "KtvProd1Img", "width": "fill_container", "height": 120, "fill": "#F59E0B18"}, {"type": "frame", "id": "KtvProd1Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 14, "children": [{"type": "text", "id": "KtvProd1Name", "fill": "$text-primary", "content": "Bia Tiger (Thùng)", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "KtvProd1Price", "fill": "$orange-primary", "content": "380,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "KtvProd2", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "KtvProd2Img", "width": "fill_container", "height": 120, "fill": "#3B82F618"}, {"type": "frame", "id": "KtvProd2Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 14, "children": [{"type": "text", "id": "KtvProd2Name", "fill": "$text-primary", "content": "Heineken (Lon)", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "KtvProd2Price", "fill": "$orange-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "KtvProd3", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "KtvProd3Img", "width": "fill_container", "height": 120, "fill": "#EC489918"}, {"type": "frame", "id": "KtvProd3Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 14, "children": [{"type": "text", "id": "KtvProd3Name", "fill": "$text-primary", "content": "Dĩa Trái Cây", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "KtvProd3Price", "fill": "$orange-primary", "content": "120,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "KtvProd4", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "KtvProd4Img", "width": "fill_container", "height": 120, "fill": "#22C55E18"}, {"type": "frame", "id": "KtvProd4Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 14, "children": [{"type": "text", "id": "KtvProd4Name", "fill": "$text-primary", "content": "Combo VIP", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "KtvProd4Price", "fill": "$orange-primary", "content": "650,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "KtvProd5", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "KtvProd5Img", "width": "fill_container", "height": 120, "fill": "#06B6D418"}, {"type": "frame", "id": "KtvProd5Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 14, "children": [{"type": "text", "id": "KtvProd5Name", "fill": "$text-primary", "content": "Nước Suối", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "KtvProd5Price", "fill": "$orange-primary", "content": "15,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "KtvProd6", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "KtvProd6Img", "width": "fill_container", "height": 120, "fill": "#8B5CF618"}, {"type": "frame", "id": "KtvProd6Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 14, "children": [{"type": "text", "id": "KtvProd6Name", "fill": "$text-primary", "content": "Khăn lạnh", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "KtvProd6Price", "fill": "$orange-primary", "content": "20,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}]} - ] - }, - {"type": "frame", "id": "KtvBottomBar", "width": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "padding": [12, 24], "gap": 12, "children": [{"type": "frame", "id": "KtvQuickExtend", "height": 52, "fill": "#8B5CF6", "cornerRadius": 12, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvQuickExtendIcon", "width": 20, "height": 20, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "KtvQuickExtendText", "fill": "$text-primary", "content": "Gia hạn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, {"type": "frame", "id": "KtvQuickMove", "height": 52, "fill": "$bg-interactive", "cornerRadius": 12, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvQuickMoveIcon", "width": 20, "height": 20, "iconFontName": "arrow-right-left", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "KtvQuickMoveText", "fill": "$text-secondary", "content": "Đổi phòng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "KtvQuickService", "height": 52, "fill": "$bg-interactive", "cornerRadius": 12, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvQuickServiceIcon", "width": 20, "height": 20, "iconFontName": "bell-ring", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "KtvQuickServiceText", "fill": "$text-secondary", "content": "Gọi phục vụ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "KtvQuickCustomer", "width": 52, "height": 52, "fill": "#14B8A620", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#14B8A6"}, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvQuickCustomerIcon", "width": 22, "height": 22, "iconFontName": "user-search", "iconFontFamily": "lucide", "fill": "#14B8A6"}]}]} - ] - }, - { - "type": "frame", - "id": "KtvOrderPanel", - "name": "orderPanel", - "width": 380, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, - "layout": "vertical", - "children": [ - {"type": "frame", "id": "KtvOrderHeader", "width": "fill_container", "padding": [16, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KtvOrderInfo", "layout": "vertical", "gap": 4, "children": [{"type": "text", "id": "KtvOrderTitle", "fill": "$text-primary", "content": "VIP 01 - Bill", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, {"type": "text", "id": "KtvOrderSub", "fill": "$text-secondary", "content": "Giờ phòng: 02:45 × 150K", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}]}, {"type": "frame", "id": "KtvOrderMore", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvOrderMoreIcon", "width": 20, "height": 20, "iconFontName": "more-vertical", "iconFontFamily": "lucide", "fill": "$text-secondary"}]}]}, - {"type": "frame", "id": "KtvCustomerSection", "width": "fill_container", "fill": "#14B8A610", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [10, 20], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KtvCustInfo", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "KtvCustAvatar", "width": 32, "height": 32, "fill": "#14B8A630", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvCustAvatarIcon", "width": 16, "height": 16, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "#14B8A6"}]}, {"type": "frame", "id": "KtvCustDetails", "layout": "vertical", "gap": 2, "children": [{"type": "frame", "id": "KtvCustNameRow", "gap": 6, "alignItems": "center", "children": [{"type": "text", "id": "KtvCustName", "fill": "$text-primary", "content": "Lê Văn C", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, {"type": "frame", "id": "KtvCustVIP", "fill": "#E5E4E2", "cornerRadius": 4, "padding": [2, 5], "children": [{"type": "text", "id": "KtvCustVIPText", "fill": "#000", "content": "Platinum", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "700"}]}]}, {"type": "text", "id": "KtvCustPoints", "fill": "$text-tertiary", "content": "5,800 điểm", "fontFamily": "Roboto", "fontSize": 11}]}]}, {"type": "frame", "id": "KtvCustRemove", "width": 24, "height": 24, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvCustRemoveIcon", "width": 12, "height": 12, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-tertiary"}]}]}, - { - "type": "frame", - "id": "KtvOrderItems", - "name": "orderItems", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "gap": 0, - "children": [ - {"type": "frame", "id": "KtvOrdRoomFee", "width": "fill_container", "fill": "#8B5CF610", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KtvOrdRoomFeeLeft", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "KtvOrdRoomFeeIcon", "width": 32, "height": 32, "fill": "#8B5CF630", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvOrdRoomFeeIconFont", "width": 16, "height": 16, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#8B5CF6"}]}, {"type": "frame", "id": "KtvOrdRoomFeeInfo", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "KtvOrdRoomFeeName", "fill": "#8B5CF6", "content": "Giờ phòng VIP", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "text", "id": "KtvOrdRoomFeeDetail", "fill": "$text-tertiary", "content": "02:45 × 150,000₫/h", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}, {"type": "text", "id": "KtvOrdRoomFeePrice", "fill": "#8B5CF6", "content": "412,500₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}, - {"type": "frame", "id": "KtvOrdItem1", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KtvOrdItem1Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "KtvOrdItem1Qty", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "KtvOrdItem1QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, {"type": "text", "id": "KtvOrdItem1Name", "fill": "$text-primary", "content": "Bia Tiger (Thùng)", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "text", "id": "KtvOrdItem1Price", "fill": "$text-primary", "content": "380,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, - {"type": "frame", "id": "KtvOrdItem2", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KtvOrdItem2Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "KtvOrdItem2Qty", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "KtvOrdItem2QtyText", "fill": "$text-primary", "content": "6", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, {"type": "text", "id": "KtvOrdItem2Name", "fill": "$text-primary", "content": "Heineken (Lon)", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "text", "id": "KtvOrdItem2Price", "fill": "$text-primary", "content": "210,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, - {"type": "frame", "id": "KtvOrdItem3", "width": "fill_container", "padding": [14, 20], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KtvOrdItem3Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "KtvOrdItem3Qty", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "KtvOrdItem3QtyText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, {"type": "text", "id": "KtvOrdItem3Name", "fill": "$text-primary", "content": "Dĩa Trái Cây", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "text", "id": "KtvOrdItem3Price", "fill": "$text-primary", "content": "240,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]} - ] - }, - {"type": "frame", "id": "KtvOrderSummary", "width": "fill_container", "fill": "$bg-surface", "layout": "vertical", "padding": 20, "gap": 12, "children": [{"type": "frame", "id": "KtvSummRoom", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "KtvRoomLabel", "fill": "$text-secondary", "content": "Tiền phòng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, {"type": "text", "id": "KtvRoomValue", "fill": "$text-primary", "content": "412,500₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "KtvSummFood", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "KtvFoodLabel", "fill": "$text-secondary", "content": "Đồ uống/Snack", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, {"type": "text", "id": "KtvFoodValue", "fill": "$text-primary", "content": "830,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "KtvSummLoyalty", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "frame", "id": "KtvLoyaltyLabelRow", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvLoyaltyIcon", "width": 14, "height": 14, "iconFontName": "coins", "iconFontFamily": "lucide", "fill": "#14B8A6"}, {"type": "text", "id": "KtvLoyaltyLabel", "fill": "#14B8A6", "content": "Dùng 500 điểm", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "text", "id": "KtvLoyaltyValue", "fill": "#14B8A6", "content": "-50,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "KtvSummDivider", "width": "fill_container", "height": 1, "fill": "$border-subtle"}, {"type": "frame", "id": "KtvSummTotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "KtvTotalLabel", "fill": "$text-primary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}, {"type": "text", "id": "KtvTotalValue", "fill": "$orange-primary", "content": "1,192,500₫", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}]}]}, - {"type": "frame", "id": "KtvPaymentBtn", "width": "fill_container", "height": 64, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "KtvPaymentIcon", "width": 24, "height": 24, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "KtvPaymentText", "fill": "$text-primary", "content": "Tất toán", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}]} - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "bg-surface": {"type": "color", "value": "#111113"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "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/karaoke/mobile.pen b/pencil-design/src/pages/tPOS/pos/karaoke/mobile.pen deleted file mode 100644 index a374b6c3..00000000 --- a/pencil-design/src/pages/tPOS/pos/karaoke/mobile.pen +++ /dev/null @@ -1,134 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "POSKaraokeMobile", - "name": "POS Karaoke Mobile", - "reusable": true, - "width": 390, - "height": 844, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "KarMobHeader", - "width": "fill_container", - "height": 56, - "fill": "$bg-elevated", - "padding": [0, 16], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "KarMobLeft", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "KarMobRoomBadge", "fill": "#8B5CF6", "cornerRadius": 8, "padding": [6, 10], "children": [{"type": "text", "id": "KarMobRoomText", "fill": "$text-primary", "content": "VIP 01", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, - {"type": "frame", "id": "KarMobTimer", "fill": "$bg-interactive", "cornerRadius": 6, "padding": [4, 8], "gap": 4, "alignItems": "center", "children": [{"type": "icon_font", "id": "KarMobTimerIcon", "width": 12, "height": 12, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#22C55E"}, {"type": "text", "id": "KarMobTimerText", "fill": "#22C55E", "content": "01:45", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]} - ]}, - {"type": "frame", "id": "KarMobRight", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "KarMobExtendBtn", "width": 40, "height": 40, "fill": "#F59E0B", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "KarMobExtendIcon", "width": 20, "height": 20, "iconFontName": "plus-circle", "iconFontFamily": "lucide", "fill": "$text-primary"}]}, - {"type": "frame", "id": "KarMobCartBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "KarMobCartIcon", "width": 20, "height": 20, "iconFontName": "shopping-cart", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "frame", "id": "KarMobCartBadge", "width": 18, "height": 18, "fill": "$orange-primary", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "position": "absolute", "top": -4, "right": -4, "children": [{"type": "text", "id": "KarMobCartBadgeText", "fill": "$text-primary", "content": "5", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}]} - ]}, - {"type": "frame", "id": "KarMobCustomerBtn", "width": 40, "height": 40, "fill": "#14B8A620", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "#14B8A6"}, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "KarMobCustomerIcon", "width": 18, "height": 18, "iconFontName": "user-search", "iconFontFamily": "lucide", "fill": "#14B8A6"}]} - ]} - ] - }, - { - "type": "frame", - "id": "KarMobSearch", - "width": "fill_container", - "padding": [12, 16], - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "children": [ - {"type": "frame", "id": "KarMobSearchBox", "width": "fill_container", "height": 44, "fill": "$bg-surface", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "KarMobSearchIcon", "width": 20, "height": 20, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "KarMobSearchText", "fill": "$text-tertiary", "content": "Tìm đồ uống, snack...", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"} - ]} - ] - }, - { - "type": "frame", - "id": "KarMobCategories", - "width": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "padding": [10, 16], - "gap": 8, - "children": [ - {"type": "frame", "id": "KarMobCatAll", "fill": "$orange-primary", "cornerRadius": 100, "padding": [8, 14], "children": [{"type": "text", "id": "KarMobCatAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "KarMobCatBeer", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 14], "children": [{"type": "text", "id": "KarMobCatBeerText", "fill": "$text-secondary", "content": "Bia", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "KarMobCatSoft", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 14], "children": [{"type": "text", "id": "KarMobCatSoftText", "fill": "$text-secondary", "content": "Nước", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "KarMobCatSnack", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 14], "children": [{"type": "text", "id": "KarMobCatSnackText", "fill": "$text-secondary", "content": "Snack", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]} - ] - }, - { - "type": "frame", - "id": "KarMobProducts", - "width": "fill_container", - "height": "fill_container", - "padding": 12, - "layout": "vertical", - "gap": 12, - "clip": true, - "children": [ - {"type": "frame", "id": "KarMobProdRow1", "width": "fill_container", "gap": 12, "children": [ - {"type": "frame", "id": "KarMobProd1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "KarMobProd1Img", "width": "fill_container", "height": 100, "fill": "#F59E0B30"}, {"type": "frame", "id": "KarMobProd1Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "KarMobProd1Name", "fill": "$text-primary", "content": "Heineken", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "KarMobProd1Price", "fill": "$orange-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "KarMobProd2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "KarMobProd2Img", "width": "fill_container", "height": 100, "fill": "#EF444430"}, {"type": "frame", "id": "KarMobProd2Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "KarMobProd2Name", "fill": "$text-primary", "content": "Coca Cola", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "KarMobProd2Price", "fill": "$orange-primary", "content": "20,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]} - ]}, - {"type": "frame", "id": "KarMobProdRow2", "width": "fill_container", "gap": 12, "children": [ - {"type": "frame", "id": "KarMobProd3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "KarMobProd3Img", "width": "fill_container", "height": 100, "fill": "#22C55E30"}, {"type": "frame", "id": "KarMobProd3Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "KarMobProd3Name", "fill": "$text-primary", "content": "Trái cây tổng hợp", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "KarMobProd3Price", "fill": "$orange-primary", "content": "120,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "KarMobProd4", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "KarMobProd4Img", "width": "fill_container", "height": 100, "fill": "#8B5CF630"}, {"type": "frame", "id": "KarMobProd4Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "KarMobProd4Name", "fill": "$text-primary", "content": "Combo VIP", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "KarMobProd4Price", "fill": "$orange-primary", "content": "599,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]} - ]}, - {"type": "frame", "id": "KarMobProdRow3", "width": "fill_container", "gap": 12, "children": [ - {"type": "frame", "id": "KarMobProd5", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "KarMobProd5Img", "width": "fill_container", "height": 100, "fill": "#F59E0B30"}, {"type": "frame", "id": "KarMobProd5Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "KarMobProd5Name", "fill": "$text-primary", "content": "Tiger", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "KarMobProd5Price", "fill": "$orange-primary", "content": "30,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "KarMobProd6", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "KarMobProd6Img", "width": "fill_container", "height": 100, "fill": "#3B82F630"}, {"type": "frame", "id": "KarMobProd6Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "KarMobProd6Name", "fill": "$text-primary", "content": "Snack tổng hợp", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "KarMobProd6Price", "fill": "$orange-primary", "content": "85,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]} - ]} - ] - }, - { - "type": "frame", - "id": "KarMobBottomBar", - "width": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, - "padding": [12, 16], - "layout": "vertical", - "gap": 8, - "children": [ - {"type": "frame", "id": "KarMobBillSplit", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "KarMobRoomFee", "gap": 4, "alignItems": "center", "children": [{"type": "icon_font", "id": "KarMobRoomIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#8B5CF6"}, {"type": "text", "id": "KarMobRoomLabel", "fill": "$text-secondary", "content": "Phòng 1.8h:", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}, {"type": "text", "id": "KarMobRoomValue", "fill": "#8B5CF6", "content": "270K", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "KarMobFoodFee", "gap": 4, "alignItems": "center", "children": [{"type": "text", "id": "KarMobFoodLabel", "fill": "$text-secondary", "content": "Đồ uống:", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}, {"type": "text", "id": "KarMobFoodValue", "fill": "$text-primary", "content": "290K", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]} - ]}, - {"type": "frame", "id": "KarMobPayRow", "width": "fill_container", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "KarMobTotal", "layout": "vertical", "gap": 0, "children": [ - {"type": "text", "id": "KarMobTotalLabel", "fill": "$text-secondary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, - {"type": "text", "id": "KarMobTotalValue", "fill": "$text-primary", "content": "560,000₫", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, - {"type": "frame", "id": "KarMobLoyalty", "gap": 4, "alignItems": "center", "children": [{"type": "icon_font", "id": "KarMobLoyaltyIcon", "width": 10, "height": 10, "iconFontName": "coins", "iconFontFamily": "lucide", "fill": "#14B8A6"}, {"type": "text", "id": "KarMobLoyaltyText", "fill": "#14B8A6", "content": "-50,000₫", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "500"}]} - ]}, - {"type": "frame", "id": "KarMobPayBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "KarMobPayIcon", "width": 20, "height": 20, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "KarMobPayText", "fill": "$text-primary", "content": "Thanh toá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"}, - "bg-surface": {"type": "color", "value": "#111113"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/karaoke/tablet.pen b/pencil-design/src/pages/tPOS/pos/karaoke/tablet.pen deleted file mode 100644 index 3dd72bcd..00000000 --- a/pencil-design/src/pages/tPOS/pos/karaoke/tablet.pen +++ /dev/null @@ -1,129 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "POSKaraokeTablet", - "name": "POS Karaoke Tablet", - "reusable": true, - "width": 1024, - "height": 768, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "KarTabHeader", - "width": "fill_container", - "height": 56, - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "padding": [0, 16], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "KarTabLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "KarTabLogoIcon", "width": 36, "height": 36, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "KarTabLogoText", "fill": "$text-primary", "content": "G", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}]}, - {"type": "frame", "id": "KarTabRoomBadge", "fill": "#8B5CF6", "cornerRadius": 8, "padding": [6, 12], "children": [{"type": "text", "id": "KarTabRoomText", "fill": "$text-primary", "content": "Phòng VIP 01", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}, - {"type": "frame", "id": "KarTabTimer", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [6, 12], "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "KarTabTimerIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#22C55E"}, {"type": "text", "id": "KarTabTimerText", "fill": "#22C55E", "content": "01:45:30", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]} - ]}, - {"type": "frame", "id": "KarTabSearch", "width": 220, "height": 40, "fill": "$bg-surface", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 12], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "KarTabSearchIcon", "width": 18, "height": 18, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "KarTabSearchText", "fill": "$text-tertiary", "content": "Tìm món...", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "KarTabRight", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "KarTabExtendBtn", "height": 36, "fill": "#F59E0B", "cornerRadius": 8, "padding": [0, 12], "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "KarTabExtendIcon", "width": 16, "height": 16, "iconFontName": "plus-circle", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "KarTabExtendText", "fill": "$text-primary", "content": "Gia hạn", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, - {"type": "text", "id": "KarTabTime", "fill": "$text-primary", "content": "23:48", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - }, - { - "type": "frame", - "id": "KarTabCategories", - "width": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "padding": [10, 16], - "gap": 8, - "children": [ - {"type": "frame", "id": "KarTabCatAll", "fill": "$orange-primary", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "KarTabCatAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, - {"type": "frame", "id": "KarTabCatBeer", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "KarTabCatBeerText", "fill": "$text-secondary", "content": "Bia", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "KarTabCatSoft", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "KarTabCatSoftText", "fill": "$text-secondary", "content": "Nước ngọt", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "KarTabCatSnack", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "KarTabCatSnackText", "fill": "$text-secondary", "content": "Snack", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "KarTabCatCombo", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "KarTabCatComboText", "fill": "$text-secondary", "content": "Combo", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]} - ] - }, - { - "type": "frame", - "id": "KarTabMain", - "width": "fill_container", - "height": "fill_container", - "children": [ - { - "type": "frame", - "id": "KarTabProducts", - "width": "fill_container", - "height": "fill_container", - "padding": 16, - "layout": "vertical", - "gap": 12, - "clip": true, - "children": [ - {"type": "frame", "id": "KarTabProdRow1", "width": "fill_container", "gap": 12, "children": [ - {"type": "frame", "id": "KarTabProd1", "width": 140, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "KarTabProd1Img", "width": "fill_container", "height": 85, "fill": "#F59E0B30"}, {"type": "frame", "id": "KarTabProd1Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "KarTabProd1Name", "fill": "$text-primary", "content": "Heineken", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "text", "id": "KarTabProd1Price", "fill": "$orange-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "KarTabProd2", "width": 140, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "KarTabProd2Img", "width": "fill_container", "height": 85, "fill": "#EF444430"}, {"type": "frame", "id": "KarTabProd2Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "KarTabProd2Name", "fill": "$text-primary", "content": "Coca Cola", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "text", "id": "KarTabProd2Price", "fill": "$orange-primary", "content": "20,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "KarTabProd3", "width": 140, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "KarTabProd3Img", "width": "fill_container", "height": 85, "fill": "#22C55E30"}, {"type": "frame", "id": "KarTabProd3Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "KarTabProd3Name", "fill": "$text-primary", "content": "Trái cây", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "text", "id": "KarTabProd3Price", "fill": "$orange-primary", "content": "120,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "KarTabProd4", "width": 140, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "KarTabProd4Img", "width": "fill_container", "height": 85, "fill": "#8B5CF630"}, {"type": "frame", "id": "KarTabProd4Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "KarTabProd4Name", "fill": "$text-primary", "content": "Combo VIP", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "text", "id": "KarTabProd4Price", "fill": "$orange-primary", "content": "599,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]} - ]} - ] - }, - { - "type": "frame", - "id": "KarTabCart", - "width": 300, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, - "layout": "vertical", - "children": [ - {"type": "frame", "id": "KarTabCartHeader", "width": "fill_container", "padding": [12, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "KarTabCartTitle", "fill": "$text-primary", "content": "Phòng VIP 01", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "frame", "id": "KarTabCartRight", "gap": 6, "alignItems": "center", "children": [{"type": "text", "id": "KarTabCartItems", "fill": "$text-secondary", "content": "5 món", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}, {"type": "frame", "id": "KarTabCustomerBtn", "width": 28, "height": 28, "fill": "#14B8A620", "cornerRadius": 6, "stroke": {"thickness": 1, "fill": "#14B8A6"}, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "KarTabCustomerIcon", "width": 14, "height": 14, "iconFontName": "user-search", "iconFontFamily": "lucide", "fill": "#14B8A6"}]}]} - ]}, - {"type": "frame", "id": "KarTabCustomerSection", "width": "fill_container", "fill": "#14B8A610", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [8, 16], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KarTabCustInfo", "gap": 6, "alignItems": "center", "children": [{"type": "frame", "id": "KarTabCustAvatar", "width": 24, "height": 24, "fill": "#14B8A630", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "KarTabCustIcon", "width": 12, "height": 12, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "#14B8A6"}]}, {"type": "frame", "id": "KarTabCustDetails", "layout": "vertical", "gap": 1, "children": [{"type": "text", "id": "KarTabCustName", "fill": "$text-primary", "content": "Lê Văn C", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}, {"type": "text", "id": "KarTabCustPoints", "fill": "$text-tertiary", "content": "Platinum • 5,600 điểm", "fontFamily": "Roboto", "fontSize": 9}]}]}, {"type": "frame", "id": "KarTabCustRemove", "width": 18, "height": 18, "fill": "$bg-interactive", "cornerRadius": 4, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "KarTabCustRemoveIcon", "width": 9, "height": 9, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-tertiary"}]}]}, - {"type": "frame", "id": "KarTabCartItems2", "width": "fill_container", "height": "fill_container", "layout": "vertical", "children": [ - {"type": "frame", "id": "KarTabRoomFee", "width": "fill_container", "padding": [10, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "fill": "#8B5CF610", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KarTabRoomFeeLeft", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "KarTabRoomFeeIcon", "width": 16, "height": 16, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#8B5CF6"}, {"type": "text", "id": "KarTabRoomFeeName", "fill": "$text-primary", "content": "Giờ phòng VIP", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, {"type": "text", "id": "KarTabRoomFeePrice", "fill": "#8B5CF6", "content": "270,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "KarTabCartItem1", "width": "fill_container", "padding": [10, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KarTabCartItem1Left", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "KarTabCartItem1Qty", "width": 26, "height": 26, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "KarTabCartItem1QtyText", "fill": "$text-primary", "content": "6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, {"type": "text", "id": "KarTabCartItem1Name", "fill": "$text-primary", "content": "Heineken", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, {"type": "text", "id": "KarTabCartItem1Price", "fill": "$text-primary", "content": "210,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "KarTabCartItem2", "width": "fill_container", "padding": [10, 16], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "KarTabCartItem2Left", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "KarTabCartItem2Qty", "width": 26, "height": 26, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "KarTabCartItem2QtyText", "fill": "$text-primary", "content": "4", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, {"type": "text", "id": "KarTabCartItem2Name", "fill": "$text-primary", "content": "Coca Cola", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, {"type": "text", "id": "KarTabCartItem2Price", "fill": "$text-primary", "content": "80,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]} - ]}, - {"type": "frame", "id": "KarTabCartSummary", "width": "fill_container", "fill": "$bg-surface", "layout": "vertical", "padding": 14, "gap": 6, "children": [ - {"type": "frame", "id": "KarTabCartRoom", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "KarTabCartRoomLabel", "fill": "$text-secondary", "content": "Tiền phòng (1.8h)", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}, {"type": "text", "id": "KarTabCartRoomValue", "fill": "#8B5CF6", "content": "270,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "KarTabCartFood", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "KarTabCartFoodLabel", "fill": "$text-secondary", "content": "Đồ ăn/uống", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}, {"type": "text", "id": "KarTabCartFoodValue", "fill": "$text-primary", "content": "290,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "KarTabCartLoyalty", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "frame", "id": "KarTabLoyaltyRow", "gap": 4, "alignItems": "center", "children": [{"type": "icon_font", "id": "KarTabLoyaltyIcon", "width": 12, "height": 12, "iconFontName": "coins", "iconFontFamily": "lucide", "fill": "#14B8A6"}, {"type": "text", "id": "KarTabLoyaltyLabel", "fill": "#14B8A6", "content": "Dùng 500 điểm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, {"type": "text", "id": "KarTabLoyaltyValue", "fill": "#14B8A6", "content": "-50,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "KarTabCartTotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "KarTabCartTotalLabel", "fill": "$text-primary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "text", "id": "KarTabCartTotalValue", "fill": "$orange-primary", "content": "560,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}]} - ]}, - {"type": "frame", "id": "KarTabPayBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "KarTabPayIcon", "width": 18, "height": 18, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "KarTabPayText", "fill": "$text-primary", "content": "Thanh toá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"}, - "bg-surface": {"type": "color", "value": "#111113"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/karaoke/workflow/happy-hour.pen b/pencil-design/src/pages/tPOS/pos/karaoke/workflow/happy-hour.pen deleted file mode 100644 index 32bd7e63..00000000 --- a/pencil-design/src/pages/tPOS/pos/karaoke/workflow/happy-hour.pen +++ /dev/null @@ -1,111 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "HappyHourDialog", - "name": "Happy Hour Dialog", - "width": 480, - "height": 400, - "fill": "$bg-elevated", - "cornerRadius": 20, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "layout": "vertical", - "clip": true, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "HHCloseRow", - "width": "fill_container", - "padding": [16, 20], - "justifyContent": "flex_end", - "children": [ - {"type": "frame", "id": "HHCloseBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "HHCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "HHContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "alignItems": "center", - "padding": [0, 40, 32, 40], - "gap": 20, - "children": [ - {"type": "text", "id": "HHTitleEmoji", "fill": "#22C55E", "content": "🎉 HAPPY HOUR 🎉", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"}, - { - "type": "frame", - "id": "HHTimeBox", - "fill": "#22C55E15", - "cornerRadius": 12, - "stroke": {"thickness": 1, "fill": "#22C55E50"}, - "padding": [16, 32], - "layout": "vertical", - "alignItems": "center", - "gap": 6, - "children": [ - {"type": "text", "id": "HHTimeRange", "fill": "#22C55E", "content": "14:00 - 17:00", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "text", "id": "HHDayRange", "fill": "$text-secondary", "content": "Thứ 2 - Thứ 5", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ] - }, - { - "type": "frame", - "id": "HHDiscountBox", - "fill": "#22C55E", - "cornerRadius": 12, - "padding": [14, 28], - "layout": "vertical", - "alignItems": "center", - "gap": 4, - "children": [ - {"type": "text", "id": "HHDiscountValue", "fill": "$text-primary", "content": "GIẢM 30%", "fontFamily": "Roboto", "fontSize": 26, "fontWeight": "800"}, - {"type": "text", "id": "HHDiscountLabel", "fill": "#FFFFFF90", "content": "GIÁ PHÒNG", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ] - }, - { - "type": "frame", - "id": "HHPriceCompare", - "layout": "vertical", - "alignItems": "center", - "gap": 8, - "children": [ - {"type": "frame", "id": "HHPriceVIP", "gap": 12, "alignItems": "center", "children": [ - {"type": "text", "id": "HHPriceVIPLabel", "fill": "$text-secondary", "content": "VIP Room:", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "HHPriceVIPOld", "fill": "$text-tertiary", "content": "150K", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500", "textDecoration": "line-through"}, - {"type": "icon_font", "id": "HHPriceVIPArrow", "width": 14, "height": 14, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "HHPriceVIPNew", "fill": "#22C55E", "content": "105K/giờ", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "HHPriceStd", "gap": 12, "alignItems": "center", "children": [ - {"type": "text", "id": "HHPriceStdLabel", "fill": "$text-secondary", "content": "Standard:", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "HHPriceStdOld", "fill": "$text-tertiary", "content": "80K", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500", "textDecoration": "line-through"}, - {"type": "icon_font", "id": "HHPriceStdArrow", "width": 14, "height": 14, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "HHPriceStdNew", "fill": "#22C55E", "content": "56K/giờ", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"} - ]} - ] - }, - {"type": "frame", "id": "HHApplyBtn", "width": "fill_container", "height": 52, "fill": "#22C55E", "cornerRadius": 12, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "HHApplyIcon", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "HHApplyText", "fill": "$text-primary", "content": "Áp dụng Happy Hour", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ]} - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "bg-surface": {"type": "color", "value": "#111113"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "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/karaoke/workflow/karaoke-journey.pen b/pencil-design/src/pages/tPOS/pos/karaoke/workflow/karaoke-journey.pen deleted file mode 100644 index 884c6f53..00000000 --- a/pencil-design/src/pages/tPOS/pos/karaoke/workflow/karaoke-journey.pen +++ /dev/null @@ -1,346 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "KaraokeJourney1", - "name": "Karaoke Journey/1-Room", - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "KJ1Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 20, - "padding": 28, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "KJ1Step", "fill": "#8B5CF620", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "KJ1StepT", "fill": "#8B5CF6", "content": "Bước 1/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "frame", "id": "KJ1Icon", "width": 64, "height": 64, "fill": "#8B5CF61A", "cornerRadius": 32, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "KJ1IconI", "width": 28, "height": 28, "iconFontName": "mic-2", "iconFontFamily": "lucide", "fill": "#8B5CF6"} - ]}, - {"type": "frame", "id": "KJ1Title", "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "KJ1TitleT", "fill": "#FFFFFF", "content": "Chọn phòng", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}, - {"type": "text", "id": "KJ1Desc", "fill": "#8B8B90", "content": "Quý khách có mấy người?", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "KJ1Rooms", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ - {"type": "frame", "id": "KJ1Room1", "width": "fill_container", "fill": "#8B5CF610", "stroke": {"thickness": 2, "fill": "#8B5CF6"}, "cornerRadius": 14, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "KJ1Room1L", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "KJ1Room1Icon", "width": 44, "height": 44, "fill": "#8B5CF630", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "KJ1Room1Num", "fill": "#8B5CF6", "content": "VIP", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}]}, - {"type": "frame", "id": "KJ1Room1Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "KJ1Room1N", "fill": "#FFFFFF", "content": "Phòng VIP 01", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "KJ1Room1D", "fill": "#8B8B90", "content": "6-10 người • 100m²", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "KJ1Room1R", "layout": "vertical", "alignItems": "flex-end", "gap": 2, "children": [ - {"type": "text", "id": "KJ1Room1P", "fill": "#8B5CF6", "content": "250,000₫/h", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "icon_font", "id": "KJ1Room1Check", "width": 18, "height": 18, "iconFontName": "check-circle-2", "iconFontFamily": "lucide", "fill": "#8B5CF6"} - ]} - ]}, - {"type": "frame", "id": "KJ1Room2", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 14, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "KJ1Room2L", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "KJ1Room2Icon", "width": 44, "height": 44, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "KJ1Room2Num", "fill": "#8B8B90", "content": "M", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, - {"type": "frame", "id": "KJ1Room2Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "KJ1Room2N", "fill": "#FFFFFF", "content": "Phòng Medium", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "KJ1Room2D", "fill": "#8B8B90", "content": "4-6 người • 50m²", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "text", "id": "KJ1Room2P", "fill": "#8B8B90", "content": "150,000₫/h", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "KJ1Room3", "width": "fill_container", "fill": "#1A1A1D40", "cornerRadius": 14, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "KJ1Room3L", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "KJ1Room3Icon", "width": 44, "height": 44, "fill": "#2A2A2E40", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "KJ1Room3Num", "fill": "#6B6B70", "content": "S", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, - {"type": "frame", "id": "KJ1Room3Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "KJ1Room3N", "fill": "#6B6B70", "content": "Phòng Small", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "KJ1Room3D", "fill": "#4A4A4E", "content": "Đang sử dụng", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "KJ1Room3S", "fill": "#EF444420", "cornerRadius": 4, "padding": [4, 8], "children": [{"type": "text", "id": "KJ1Room3ST", "fill": "#EF4444", "content": "Hết phòng", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]} - ]} - ]}, - {"type": "frame", "id": "KJ1Confirm", "width": "fill_container", "height": 50, "fill": "#8B5CF6", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "KJ1ConfirmT", "fill": "#FFFFFF", "content": "Đặt phòng VIP 01", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "KaraokeJourney2", - "name": "Karaoke Journey/2-CheckIn", - "x": 540, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "KJ2Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 24, - "padding": 32, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "KJ2Step", "fill": "#3B82F620", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "KJ2StepT", "fill": "#3B82F6", "content": "Bước 2/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "frame", "id": "KJ2Icon", "width": 72, "height": 72, "fill": "#3B82F61A", "cornerRadius": 36, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "KJ2IconI", "width": 32, "height": 32, "iconFontName": "door-open", "iconFontFamily": "lucide", "fill": "#3B82F6"} - ]}, - {"type": "frame", "id": "KJ2Title", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "KJ2TitleT", "fill": "#FFFFFF", "content": "Check-in thành công!", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}, - {"type": "text", "id": "KJ2Desc", "fill": "#8B8B90", "content": "Phòng VIP 01 sẵn sàng", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "KJ2Info", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 14, "padding": 16, "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "KJ2InfoRow1", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "KJ2InfoL1", "fill": "#8B8B90", "content": "Loại phòng", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "KJ2InfoV1", "fill": "#FFFFFF", "content": "VIP 01", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "KJ2InfoRow2", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "KJ2InfoL2", "fill": "#8B8B90", "content": "Giá phòng", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "KJ2InfoV2", "fill": "#FFFFFF", "content": "250,000₫/giờ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "KJ2InfoRow3", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "KJ2InfoL3", "fill": "#8B8B90", "content": "Thời gian đặt", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "KJ2InfoV3", "fill": "#3B82F6", "content": "2 giờ (500,000₫)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]} - ]}, - {"type": "frame", "id": "KJ2Timer", "width": "fill_container", "fill": "#22C55E10", "cornerRadius": 12, "padding": 16, "justifyContent": "center", "alignItems": "center", "gap": 10, "children": [ - {"type": "icon_font", "id": "KJ2TimerI", "width": 20, "height": 20, "iconFontName": "timer", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "KJ2TimerT", "fill": "#22C55E", "content": "Bắt đầu tính giờ: 20:00", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "KJ2Start", "width": "fill_container", "height": 50, "fill": "#22C55E", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "KJ2StartI", "width": 18, "height": 18, "iconFontName": "play", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "KJ2StartT", "fill": "#FFFFFF", "content": "Bắt đầu hát", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "KaraokeJourney3", - "name": "Karaoke Journey/3-InSession", - "x": 1080, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "KJ3Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 20, - "padding": 24, - "children": [ - {"type": "frame", "id": "KJ3Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "KJ3Step", "fill": "#FF5C0020", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "KJ3StepT", "fill": "#FF5C00", "content": "Bước 3/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "text", "id": "KJ3Room", "fill": "#8B8B90", "content": "🎤 VIP 01", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "KJ3Timer", "width": "fill_container", "fill": "#FF5C0010", "cornerRadius": 16, "padding": 20, "layout": "vertical", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "KJ3TimerLabel", "fill": "#FF5C00", "content": "THỜI GIAN CÒN LẠI", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}, - {"type": "text", "id": "KJ3TimerValue", "fill": "#FF5C00", "content": "01:23:45", "fontFamily": "Roboto", "fontSize": 40, "fontWeight": "700"}, - {"type": "text", "id": "KJ3TimerEnd", "fill": "#8B8B90", "content": "Kết thúc lúc 22:00", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "KJ3Orders", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ - {"type": "frame", "id": "KJ3OrdersTitle", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "KJ3OrdersTitleT", "fill": "#FFFFFF", "content": "Đồ uống & Snacks", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "text", "id": "KJ3OrdersAdd", "fill": "#FF5C00", "content": "+ Thêm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "KJ3Order1", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "KJ3Order1L", "gap": 8, "children": [{"type": "text", "id": "KJ3Order1Q", "fill": "#FF5C00", "content": "6x", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, {"type": "text", "id": "KJ3Order1N", "fill": "#FFFFFF", "content": "Bia Tiger", "fontFamily": "Roboto", "fontSize": 12}]}, - {"type": "text", "id": "KJ3Order1P", "fill": "#FFFFFF", "content": "180,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "KJ3Order2", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "KJ3Order2L", "gap": 8, "children": [{"type": "text", "id": "KJ3Order2Q", "fill": "#FF5C00", "content": "2x", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, {"type": "text", "id": "KJ3Order2N", "fill": "#FFFFFF", "content": "Dĩa trái cây", "fontFamily": "Roboto", "fontSize": 12}]}, - {"type": "text", "id": "KJ3Order2P", "fill": "#FFFFFF", "content": "200,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "KJ3Divider", "width": "fill_container", "height": 1, "fill": "#1F1F23"}, - {"type": "frame", "id": "KJ3Total", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "KJ3TotalL", "fill": "#8B8B90", "content": "Tạm tính", "fontFamily": "Roboto", "fontSize": 14}, {"type": "text", "id": "KJ3TotalV", "fill": "#FF5C00", "content": "880,000₫", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}]}, - {"type": "frame", "id": "KJ3Actions", "width": "fill_container", "gap": 10, "children": [ - {"type": "frame", "id": "KJ3Extend", "width": "fill_container", "height": 44, "fill": "#8B5CF6", "cornerRadius": 10, "gap": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "KJ3ExtendI", "width": 16, "height": 16, "iconFontName": "timer", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "KJ3ExtendT", "fill": "#FFFFFF", "content": "Gia hạn", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "KJ3End", "width": "fill_container", "height": 44, "fill": "#2A2A2E", "cornerRadius": 10, "gap": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "KJ3EndI", "width": 16, "height": 16, "iconFontName": "log-out", "iconFontFamily": "lucide", "fill": "#ADADB0"}, - {"type": "text", "id": "KJ3EndT", "fill": "#ADADB0", "content": "Kết thúc", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "KaraokeJourney4", - "name": "Karaoke Journey/4-Extend", - "x": 1620, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "KJ4Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 2, "fill": "#F59E0B"}, - "layout": "vertical", - "gap": 24, - "padding": 32, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "KJ4Step", "fill": "#F59E0B20", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "KJ4StepT", "fill": "#F59E0B", "content": "Bước 4/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "frame", "id": "KJ4Icon", "width": 80, "height": 80, "fill": "#F59E0B1A", "cornerRadius": 40, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "KJ4IconI", "width": 36, "height": 36, "iconFontName": "alarm-clock", "iconFontFamily": "lucide", "fill": "#F59E0B"} - ]}, - {"type": "frame", "id": "KJ4Title", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "KJ4TitleT", "fill": "#F59E0B", "content": "Sắp hết giờ!", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}, - {"type": "text", "id": "KJ4Desc", "fill": "#8B8B90", "content": "Còn 15 phút • Bạn muốn gia hạn?", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "KJ4Options", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ - {"type": "frame", "id": "KJ4Opt1", "width": "fill_container", "fill": "#F59E0B10", "stroke": {"thickness": 2, "fill": "#F59E0B"}, "cornerRadius": 12, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "KJ4Opt1L", "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "KJ4Opt1I", "width": 20, "height": 20, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "text", "id": "KJ4Opt1T", "fill": "#FFFFFF", "content": "Thêm 1 giờ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "KJ4Opt1P", "fill": "#F59E0B", "content": "+250,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "KJ4Opt2", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 12, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "KJ4Opt2L", "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "KJ4Opt2I", "width": 20, "height": 20, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#8B8B90"}, - {"type": "text", "id": "KJ4Opt2T", "fill": "#FFFFFF", "content": "Thêm 30 phút", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "KJ4Opt2P", "fill": "#8B8B90", "content": "+130,000₫", "fontFamily": "Roboto", "fontSize": 13} - ]} - ]}, - {"type": "frame", "id": "KJ4Actions", "width": "fill_container", "gap": 10, "children": [ - {"type": "frame", "id": "KJ4Skip", "width": "fill_container", "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "KJ4SkipT", "fill": "#ADADB0", "content": "Không, cảm ơn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "KJ4Confirm", "width": "fill_container", "height": 48, "fill": "#F59E0B", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "KJ4ConfirmI", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#000"}, - {"type": "text", "id": "KJ4ConfirmT", "fill": "#000000", "content": "Gia hạn 1 giờ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "KaraokeJourney5", - "name": "Karaoke Journey/5-Checkout", - "x": 2160, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "KJ5Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 16, - "padding": 24, - "children": [ - {"type": "frame", "id": "KJ5Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "KJ5Step", "fill": "#22C55E20", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "KJ5StepT", "fill": "#22C55E", "content": "Bước 5/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "text", "id": "KJ5Time", "fill": "#8B8B90", "content": "3 giờ • VIP 01", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "KJ5Title", "width": "fill_container", "children": [{"type": "text", "id": "KJ5TitleT", "fill": "#FFFFFF", "content": "Tổng kết hóa đơn", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}]}, - {"type": "frame", "id": "KJ5Bill", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 10, "children": [ - {"type": "frame", "id": "KJ5BillRoom", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "KJ5BillRoomL", "fill": "#8B8B90", "content": "Phòng VIP 01 (3h)", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "KJ5BillRoomV", "fill": "#FFFFFF", "content": "750,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "KJ5BillBeer", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "KJ5BillBeerL", "fill": "#8B8B90", "content": "6x Bia Tiger", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "KJ5BillBeerV", "fill": "#FFFFFF", "content": "180,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "KJ5BillFruit", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "KJ5BillFruitL", "fill": "#8B8B90", "content": "2x Dĩa trái cây", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "KJ5BillFruitV", "fill": "#FFFFFF", "content": "200,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]} - ]}, - {"type": "frame", "id": "KJ5Summary", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "frame", "id": "KJ5Sub", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "KJ5SubL", "fill": "#8B8B90", "content": "Tạm tính", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "KJ5SubV", "fill": "#FFFFFF", "content": "1,130,000₫", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "frame", "id": "KJ5Discount", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "KJ5DiscountL", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "KJ5DiscountI", "width": 12, "height": 12, "iconFontName": "percent", "iconFontFamily": "lucide", "fill": "#EC4899"}, {"type": "text", "id": "KJ5DiscountT", "fill": "#EC4899", "content": "Happy Hour -15%", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "text", "id": "KJ5DiscountV", "fill": "#EC4899", "content": "-169,500₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "KJ5DividerB", "width": "fill_container", "height": 1, "fill": "#2A2A2E"}, - {"type": "frame", "id": "KJ5Total", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "KJ5TotalL", "fill": "#FFFFFF", "content": "Tổng thanh toán", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "text", "id": "KJ5TotalV", "fill": "#22C55E", "content": "960,500₫", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}]} - ]}, - {"type": "frame", "id": "KJ5Pay", "width": "fill_container", "height": 50, "fill": "#22C55E", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "KJ5PayI", "width": 18, "height": 18, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "KJ5PayT", "fill": "#FFFFFF", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "KaraokeJourney6", - "name": "Karaoke Journey/6-Complete", - "x": 2700, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "KJ6Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 24, - "padding": 36, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "KJ6Step", "fill": "#14B8A620", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "KJ6StepT", "fill": "#14B8A6", "content": "Hoàn tất", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "frame", "id": "KJ6Icon", "width": 88, "height": 88, "fill": "#14B8A61A", "cornerRadius": 44, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "KJ6IconI", "width": 40, "height": 40, "iconFontName": "party-popper", "iconFontFamily": "lucide", "fill": "#14B8A6"} - ]}, - {"type": "frame", "id": "KJ6Title", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "KJ6TitleT", "fill": "#FFFFFF", "content": "Cảm ơn quý khách!", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}, - {"type": "text", "id": "KJ6Desc", "fill": "#8B8B90", "content": "Hẹn gặp lại 🎤", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "KJ6Points", "width": "fill_container", "fill": "#14B8A610", "cornerRadius": 14, "padding": 18, "layout": "vertical", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "KJ6PointsRow", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "KJ6PointsI", "width": 18, "height": 18, "iconFontName": "coins", "iconFontFamily": "lucide", "fill": "#14B8A6"}, - {"type": "text", "id": "KJ6PointsLabel", "fill": "#14B8A6", "content": "Điểm tích lũy", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "text", "id": "KJ6PointsValue", "fill": "#14B8A6", "content": "+96 điểm", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, - {"type": "text", "id": "KJ6PointsTotal", "fill": "#8B8B90", "content": "Tổng: 5,420 điểm", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "frame", "id": "KJ6Rating", "width": "fill_container", "layout": "vertical", "gap": 10, "alignItems": "center", "children": [ - {"type": "text", "id": "KJ6RatingLabel", "fill": "#8B8B90", "content": "Đánh giá trải nghiệm", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "KJ6Stars", "gap": 8, "children": [ - {"type": "icon_font", "id": "KJ6Star1", "width": 28, "height": 28, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "KJ6Star2", "width": 28, "height": 28, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "KJ6Star3", "width": 28, "height": 28, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "KJ6Star4", "width": 28, "height": 28, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "KJ6Star5", "width": 28, "height": 28, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#2A2A2E"} - ]} - ]}, - {"type": "frame", "id": "KJ6Done", "width": "fill_container", "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "KJ6DoneT", "fill": "#FFFFFF", "content": "Hoàn tất", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]} - ] - } - ] - } - ] -} diff --git a/pencil-design/src/pages/tPOS/pos/karaoke/workflow/member-card.pen b/pencil-design/src/pages/tPOS/pos/karaoke/workflow/member-card.pen deleted file mode 100644 index 7a445d68..00000000 --- a/pencil-design/src/pages/tPOS/pos/karaoke/workflow/member-card.pen +++ /dev/null @@ -1,123 +0,0 @@ -{ - "version": "2.7", - "children": [ - { - "type": "frame", - "id": "MemberCardDialog", - "name": "Dialog/MemberCard", - "reusable": true, - "clip": true, - "width": 400, - "height": 540, - "fill": "$bg-elevated", - "cornerRadius": 24, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "MemberCardHeader", - "width": "fill_container", - "padding": [16, 20], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "MemberCardHeaderLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "MemberCardIconBg", "width": 40, "height": 40, "fill": "#8B5CF620", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MemberCardIcon", "width": 20, "height": 20, "iconFontName": "id-card", "iconFontFamily": "lucide", "fill": "#8B5CF6"} - ]}, - {"type": "text", "id": "MemberCardTitle", "fill": "$text-primary", "content": "Thẻ thành viên", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "MemberCardCloseBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MemberCardCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "MemberCardContent", - "width": "fill_container", - "height": "fill_container", - "padding": 20, - "layout": "vertical", - "gap": 16, - "children": [ - {"type": "frame", "id": "MemberKaraokeCard", "width": "fill_container", "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#8B5CF6", "position": 0}, {"color": "#6D28D9", "position": 1}]}, "cornerRadius": 18, "padding": 20, "layout": "vertical", "gap": 16, "children": [ - {"type": "frame", "id": "MemberCardTop", "width": "fill_container", "justifyContent": "space_between", "alignItems": "flex_start", "children": [ - {"type": "frame", "id": "MemberCardTopLeft", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "MemberCardBrand", "fill": "#FFFFFFCC", "content": "🎤 KARAOKE VIP", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "MemberCardTier", "fill": "$text-primary", "content": "Gold Member", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "MemberCardBadge", "fill": "#FFD70060", "cornerRadius": 8, "padding": [6, 12], "children": [ - {"type": "text", "id": "MemberCardBadgeText", "fill": "#FFD700", "content": "⭐ VIP", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"} - ]} - ]}, - {"type": "frame", "id": "MemberCardCustomer", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "MemberCardName", "fill": "$text-primary", "content": "TRẦN MINH KHÔI", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "MemberCardId", "fill": "#FFFFFFAA", "content": "ID: MBR-2024-08765", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "MemberCardStats", "width": "fill_container", "gap": 16, "children": [ - {"type": "frame", "id": "MemberCardStat1", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "MemberCardStat1Label", "fill": "#FFFFFF80", "content": "Điểm", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, - {"type": "text", "id": "MemberCardStat1Value", "fill": "$text-primary", "content": "4,850", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "MemberCardStat2", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "MemberCardStat2Label", "fill": "#FFFFFF80", "content": "Giờ hát", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, - {"type": "text", "id": "MemberCardStat2Value", "fill": "$text-primary", "content": "156h", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "MemberCardStat3", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "MemberCardStat3Label", "fill": "#FFFFFF80", "content": "Hạn thẻ", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, - {"type": "text", "id": "MemberCardStat3Value", "fill": "$text-primary", "content": "12/2025", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]} - ]} - ]}, - {"type": "frame", "id": "MemberBenefits", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ - {"type": "text", "id": "MemberBenefitsLabel", "fill": "$text-secondary", "content": "Quyền lợi thành viên", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "MemberBenefit1", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 12, "padding": [10, 14], "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MemberBenefit1Icon", "width": 18, "height": 18, "iconFontName": "percent", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "MemberBenefit1Text", "fill": "$text-primary", "content": "Giảm 20% giá phòng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "MemberBenefit2", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 12, "padding": [10, 14], "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MemberBenefit2Icon", "width": 18, "height": 18, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#3B82F6"}, - {"type": "text", "id": "MemberBenefit2Text", "fill": "$text-primary", "content": "Tặng 30 phút mỗi 2 giờ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "MemberBenefit3", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 12, "padding": [10, 14], "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MemberBenefit3Icon", "width": 18, "height": 18, "iconFontName": "gift", "iconFontFamily": "lucide", "fill": "#EC4899"}, - {"type": "text", "id": "MemberBenefit3Text", "fill": "$text-primary", "content": "Sinh nhật: 2h miễn phí", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "MemberCardFooter", - "width": "fill_container", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, - "gap": 12, - "padding": [16, 20], - "children": [ - {"type": "frame", "id": "MemberCardTopUpBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MemberCardTopUpIcon", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "MemberCardTopUpText", "fill": "$text-secondary", "content": "Nạp điểm", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "MemberCardApplyBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8533", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MemberCardApplyIcon", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "MemberCardApplyText", "fill": "$text-primary", "content": "Áp dụng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/karaoke/workflow/order-fnb.pen b/pencil-design/src/pages/tPOS/pos/karaoke/workflow/order-fnb.pen deleted file mode 100644 index 1e3398ba..00000000 --- a/pencil-design/src/pages/tPOS/pos/karaoke/workflow/order-fnb.pen +++ /dev/null @@ -1,244 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "OrderFnbScreen", - "name": "Order F&B Screen", - "width": 800, - "height": 600, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "children": [ - { - "type": "frame", - "id": "FnbHeader", - "width": "fill_container", - "height": 60, - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "padding": [0, 20], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "FnbRoomBadge", "fill": "#8B5CF6", "cornerRadius": 8, "padding": [8, 14], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "FnbRoomIcon", "width": 16, "height": 16, "iconFontName": "mic", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "FnbRoomText", "fill": "$text-primary", "content": "VIP 01", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "FnbSearchBox", "width": 280, "height": 40, "fill": "$bg-surface", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "FnbSearchIcon", "width": 18, "height": 18, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "FnbSearchPlaceholder", "fill": "$text-tertiary", "content": "Tìm đồ uống, snack...", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "FnbCloseBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "FnbCloseIcon", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "FnbCategoryBar", - "width": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "padding": [10, 20], - "gap": 10, - "children": [ - {"type": "frame", "id": "FnbCatCombo", "fill": "$orange-primary", "cornerRadius": 100, "padding": [8, 16], "gap": 6, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "FnbCatComboIcon", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "FnbCatComboText", "fill": "$text-primary", "content": "Combo", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "FnbCatBeer", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "gap": 6, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "FnbCatBeerIcon", "width": 14, "height": 14, "iconFontName": "beer", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "FnbCatBeerText", "fill": "$text-secondary", "content": "Bia", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "FnbCatSoda", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [ - {"type": "text", "id": "FnbCatSodaText", "fill": "$text-secondary", "content": "Nước ngọt", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "FnbCatSnack", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [ - {"type": "text", "id": "FnbCatSnackText", "fill": "$text-secondary", "content": "Snack", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "FnbCatFruit", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [ - {"type": "text", "id": "FnbCatFruitText", "fill": "$text-secondary", "content": "Trái cây", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]} - ] - }, - { - "type": "frame", - "id": "FnbBody", - "width": "fill_container", - "height": "fill_container", - "children": [ - { - "type": "frame", - "id": "FnbProductGrid", - "width": "fill_container", - "height": "fill_container", - "padding": 16, - "gap": 14, - "wrap": true, - "alignContent": "flex_start", - "children": [ - {"type": "frame", "id": "FnbProd1", "width": 140, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [ - {"type": "frame", "id": "FnbProd1Img", "width": "fill_container", "height": 90, "fill": "#F59E0B18"}, - {"type": "frame", "id": "FnbProd1Content", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [ - {"type": "text", "id": "FnbProd1Name", "fill": "$text-primary", "content": "Tiger (Thùng)", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "text", "id": "FnbProd1Price", "fill": "$orange-primary", "content": "380,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "FnbProd2", "width": 140, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "clip": true, "children": [ - {"type": "frame", "id": "FnbProd2Img", "width": "fill_container", "height": 90, "fill": "#3B82F618"}, - {"type": "frame", "id": "FnbProd2Content", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [ - {"type": "text", "id": "FnbProd2Name", "fill": "$text-primary", "content": "Heineken (Lon)", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "text", "id": "FnbProd2Price", "fill": "$orange-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "FnbProd3", "width": 140, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [ - {"type": "frame", "id": "FnbProd3Img", "width": "fill_container", "height": 90, "fill": "#EC489918"}, - {"type": "frame", "id": "FnbProd3Content", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [ - {"type": "text", "id": "FnbProd3Name", "fill": "$text-primary", "content": "Dĩa Trái Cây", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "text", "id": "FnbProd3Price", "fill": "$orange-primary", "content": "120,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "FnbProd4", "width": 140, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [ - {"type": "frame", "id": "FnbProd4Img", "width": "fill_container", "height": 90, "fill": "#22C55E18"}, - {"type": "frame", "id": "FnbProd4Content", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [ - {"type": "text", "id": "FnbProd4Name", "fill": "$text-primary", "content": "Combo VIP", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "text", "id": "FnbProd4Price", "fill": "$orange-primary", "content": "650,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "FnbProd5", "width": 140, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [ - {"type": "frame", "id": "FnbProd5Img", "width": "fill_container", "height": 90, "fill": "#06B6D418"}, - {"type": "frame", "id": "FnbProd5Content", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [ - {"type": "text", "id": "FnbProd5Name", "fill": "$text-primary", "content": "Nước Suối", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "text", "id": "FnbProd5Price", "fill": "$orange-primary", "content": "15,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "FnbProd6", "width": 140, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [ - {"type": "frame", "id": "FnbProd6Img", "width": "fill_container", "height": 90, "fill": "#8B5CF618"}, - {"type": "frame", "id": "FnbProd6Content", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [ - {"type": "text", "id": "FnbProd6Name", "fill": "$text-primary", "content": "Khăn lạnh", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "text", "id": "FnbProd6Price", "fill": "$orange-primary", "content": "20,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "FnbProd7", "width": 140, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [ - {"type": "frame", "id": "FnbProd7Img", "width": "fill_container", "height": 90, "fill": "#EF444418"}, - {"type": "frame", "id": "FnbProd7Content", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [ - {"type": "text", "id": "FnbProd7Name", "fill": "$text-primary", "content": "Đậu phộng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "text", "id": "FnbProd7Price", "fill": "$orange-primary", "content": "40,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "FnbProd8", "width": 140, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [ - {"type": "frame", "id": "FnbProd8Img", "width": "fill_container", "height": 90, "fill": "#A855F718"}, - {"type": "frame", "id": "FnbProd8Content", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [ - {"type": "text", "id": "FnbProd8Name", "fill": "$text-primary", "content": "Bắp rang", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "text", "id": "FnbProd8Price", "fill": "$orange-primary", "content": "50,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "FnbOrderPanel", - "width": 260, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, - "layout": "vertical", - "children": [ - {"type": "frame", "id": "FnbOrderHeader", "width": "fill_container", "padding": [14, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "FnbOrderTitle", "fill": "$text-primary", "content": "Order mới", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "frame", "id": "FnbOrderCount", "fill": "$orange-primary", "cornerRadius": 100, "padding": [4, 10], "children": [ - {"type": "text", "id": "FnbOrderCountText", "fill": "$text-primary", "content": "3 món", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - { - "type": "frame", - "id": "FnbOrderItems", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "gap": 0, - "children": [ - {"type": "frame", "id": "FnbOrdItem1", "width": "fill_container", "padding": [10, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "FnbOrdItem1Left", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "FnbOrdItem1Qty", "width": 26, "height": 26, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "FnbOrdItem1QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "text", "id": "FnbOrdItem1Name", "fill": "$text-primary", "content": "Tiger (Thùng)", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "text", "id": "FnbOrdItem1Price", "fill": "$text-secondary", "content": "380K", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "FnbOrdItem2", "width": "fill_container", "padding": [10, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "FnbOrdItem2Left", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "FnbOrdItem2Qty", "width": 26, "height": 26, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "FnbOrdItem2QtyText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "text", "id": "FnbOrdItem2Name", "fill": "$text-primary", "content": "Dĩa Trái Cây", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "text", "id": "FnbOrdItem2Price", "fill": "$text-secondary", "content": "240K", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "FnbOrdItem3", "width": "fill_container", "padding": [10, 16], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "FnbOrdItem3Left", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "FnbOrdItem3Qty", "width": 26, "height": 26, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "FnbOrdItem3QtyText", "fill": "$text-primary", "content": "6", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "text", "id": "FnbOrdItem3Name", "fill": "$text-primary", "content": "Heineken", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "text", "id": "FnbOrdItem3Price", "fill": "$text-secondary", "content": "210K", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]} - ] - }, - {"type": "frame", "id": "FnbOrderTotal", "width": "fill_container", "fill": "$bg-surface", "padding": [12, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "FnbTotalLabel", "fill": "$text-secondary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "text", "id": "FnbTotalValue", "fill": "$orange-primary", "content": "830,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "FnbSubmitBtn", "width": "fill_container", "height": 52, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "FnbSubmitText", "fill": "$text-primary", "content": "Gửi Order", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, - {"type": "icon_font", "id": "FnbSubmitIcon", "width": 18, "height": 18, "iconFontName": "send", "iconFontFamily": "lucide", "fill": "$text-primary"} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "FnbQuickCombos", - "width": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, - "padding": [12, 20], - "gap": 12, - "children": [ - {"type": "frame", "id": "FnbQuickCombo1", "fill": "#8B5CF620", "stroke": {"thickness": 1, "fill": "#8B5CF6"}, "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "FnbQuickCombo1Icon", "width": 16, "height": 16, "iconFontName": "mic", "iconFontFamily": "lucide", "fill": "#8B5CF6"}, - {"type": "text", "id": "FnbQuickCombo1Text", "fill": "#8B5CF6", "content": "Combo VIP 650K", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "FnbQuickCombo2", "fill": "#22C55E20", "stroke": {"thickness": 1, "fill": "#22C55E"}, "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "FnbQuickCombo2Icon", "width": 16, "height": 16, "iconFontName": "party-popper", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "FnbQuickCombo2Text", "fill": "#22C55E", "content": "Combo Party 1.2M", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "FnbQuickCombo3", "fill": "#F59E0B20", "stroke": {"thickness": 1, "fill": "#F59E0B"}, "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "FnbQuickCombo3Icon", "width": 16, "height": 16, "iconFontName": "beer", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "text", "id": "FnbQuickCombo3Text", "fill": "#F59E0B", "content": "Beer Set 500K", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]} - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "bg-surface": {"type": "color", "value": "#111113"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "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/karaoke/workflow/peak-warning.pen b/pencil-design/src/pages/tPOS/pos/karaoke/workflow/peak-warning.pen deleted file mode 100644 index 00dd23fa..00000000 --- a/pencil-design/src/pages/tPOS/pos/karaoke/workflow/peak-warning.pen +++ /dev/null @@ -1,114 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "PeakWarningDialog", - "name": "Peak Warning Dialog", - "width": 480, - "height": 420, - "fill": "$bg-elevated", - "cornerRadius": 20, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "layout": "vertical", - "clip": true, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PWCloseRow", - "width": "fill_container", - "padding": [16, 20], - "justifyContent": "flex_end", - "children": [ - {"type": "frame", "id": "PWCloseBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PWCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "PWContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "alignItems": "center", - "padding": [0, 40, 32, 40], - "gap": 20, - "children": [ - {"type": "text", "id": "PWTitleEmoji", "fill": "#F59E0B", "content": "⚠️ KHUNG GIỜ CAO ĐIỂM", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - { - "type": "frame", - "id": "PWTimeBox", - "fill": "#F59E0B15", - "cornerRadius": 12, - "stroke": {"thickness": 1, "fill": "#F59E0B50"}, - "padding": [16, 32], - "layout": "vertical", - "alignItems": "center", - "gap": 6, - "children": [ - {"type": "text", "id": "PWTimeRange", "fill": "#F59E0B", "content": "18:00 - 22:00", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "text", "id": "PWDayRange", "fill": "$text-secondary", "content": "Thứ 6 - Chủ Nhật", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ] - }, - { - "type": "frame", - "id": "PWMultiplierBox", - "fill": "#F59E0B", - "cornerRadius": 12, - "padding": [14, 28], - "layout": "vertical", - "alignItems": "center", - "gap": 4, - "children": [ - {"type": "text", "id": "PWMultiplierValue", "fill": "$text-primary", "content": "GIÁ × 1.5", "fontFamily": "Roboto", "fontSize": 26, "fontWeight": "800"}, - {"type": "text", "id": "PWMultiplierLabel", "fill": "#00000060", "content": "PEAK HOURS", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ] - }, - { - "type": "frame", - "id": "PWPriceCompare", - "layout": "vertical", - "alignItems": "center", - "gap": 8, - "children": [ - {"type": "frame", "id": "PWPriceVIP", "gap": 12, "alignItems": "center", "children": [ - {"type": "text", "id": "PWPriceVIPLabel", "fill": "$text-secondary", "content": "VIP Room:", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "PWPriceVIPOld", "fill": "$text-tertiary", "content": "150K", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "icon_font", "id": "PWPriceVIPArrow", "width": 14, "height": 14, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "text", "id": "PWPriceVIPNew", "fill": "#F59E0B", "content": "225K/giờ", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "PWPriceStd", "gap": 12, "alignItems": "center", "children": [ - {"type": "text", "id": "PWPriceStdLabel", "fill": "$text-secondary", "content": "Standard:", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "PWPriceStdOld", "fill": "$text-tertiary", "content": "80K", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "icon_font", "id": "PWPriceStdArrow", "width": 14, "height": 14, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "text", "id": "PWPriceStdNew", "fill": "#F59E0B", "content": "120K/giờ", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"} - ]} - ] - }, - {"type": "frame", "id": "PWTipRow", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PWTipIcon", "width": 16, "height": 16, "iconFontName": "lightbulb", "iconFontFamily": "lucide", "fill": "#14B8A6"}, - {"type": "text", "id": "PWTipText", "fill": "#14B8A6", "content": "Đặt trước để tránh chờ đợi!", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "PWConfirmBtn", "width": "fill_container", "height": 52, "fill": "#F59E0B", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "PWConfirmText", "fill": "#000000", "content": "Đã hiểu, tiếp tục", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ]} - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "bg-surface": {"type": "color", "value": "#111113"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "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/karaoke/workflow/room-extend.pen b/pencil-design/src/pages/tPOS/pos/karaoke/workflow/room-extend.pen deleted file mode 100644 index e21212f1..00000000 --- a/pencil-design/src/pages/tPOS/pos/karaoke/workflow/room-extend.pen +++ /dev/null @@ -1,116 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "RoomExtendDialog", - "name": "Dialog/Room Extend", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "#0A0A0B80", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ExtendModal", - "width": 420, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 24, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "ExtendHeader", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "ExtendIcon", "width": 64, "height": 64, "fill": "#F59E0B1A", "cornerRadius": 32, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ExtendIconI", "width": 28, "height": 28, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#F59E0B"} - ]}, - {"type": "text", "id": "ExtendTitle", "fill": "#FFFFFF", "content": "Gia hạn thời gian", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}, - {"type": "text", "id": "ExtendRoom", "fill": "#8B8B90", "content": "Phòng VIP 01", "fontFamily": "Roboto", "fontSize": 14} - ] - }, - { - "type": "frame", - "id": "ExtendCurrent", - "width": "fill_container", - "fill": "#F59E0B10", - "cornerRadius": 14, - "padding": 16, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "ExtendCurrentLeft", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "ExtendCurrentLabel", "fill": "#8B8B90", "content": "Thời gian còn lại", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "ExtendCurrentTime", "fill": "#F59E0B", "content": "00:12:45", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "ExtendCurrentRight", "layout": "vertical", "gap": 4, "alignItems": "flex-end", "children": [ - {"type": "text", "id": "ExtendCurrentUsed", "fill": "#8B8B90", "content": "Đã dùng", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "ExtendCurrentUsedTime", "fill": "#FFFFFF", "content": "1h 47'", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"} - ]} - ] - }, - { - "type": "frame", - "id": "ExtendOptions", - "width": "fill_container", - "layout": "vertical", - "gap": 10, - "children": [ - {"type": "text", "id": "ExtendOptionsLabel", "fill": "#8B8B90", "content": "Chọn thời gian gia hạn", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "frame", "id": "ExtendOptionsRow", "width": "fill_container", "gap": 10, "children": [ - {"type": "frame", "id": "ExtendOpt30", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 12, "padding": [14, 0], "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "ExtendOpt30Time", "fill": "#8B8B90", "content": "+30 phút", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "ExtendOpt30Price", "fill": "#6B6B70", "content": "75,000₫", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "ExtendOpt60", "width": "fill_container", "fill": "#F59E0B20", "stroke": {"thickness": 2, "fill": "#F59E0B"}, "cornerRadius": 12, "padding": [14, 0], "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "ExtendOpt60Time", "fill": "#F59E0B", "content": "+1 giờ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "ExtendOpt60Price", "fill": "#F59E0B", "content": "150,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "ExtendOpt120", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 12, "padding": [14, 0], "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "ExtendOpt120Time", "fill": "#8B8B90", "content": "+2 giờ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "ExtendOpt120Price", "fill": "#6B6B70", "content": "280,000₫", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]} - ] - }, - {"type": "frame", "id": "ExtendDivider", "width": "fill_container", "height": 1, "fill": "#1F1F23"}, - { - "type": "frame", - "id": "ExtendSummary", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - {"type": "frame", "id": "ExtendSumRow1", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "ExtendSumLabel1", "fill": "#8B8B90", "content": "Thời gian mới", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "ExtendSumValue1", "fill": "#FFFFFF", "content": "01:12:45", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "ExtendSumRow2", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "ExtendSumLabel2", "fill": "#8B8B90", "content": "Phí gia hạn", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "ExtendSumValue2", "fill": "#F59E0B", "content": "+150,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "ExtendSumRow3", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "ExtendSumLabel3", "fill": "#FFFFFF", "content": "Tổng bill hiện tại", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "ExtendSumValue3", "fill": "#FF5C00", "content": "560,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]} - ] - }, - {"type": "frame", "id": "ExtendActions", "width": "fill_container", "gap": 12, "children": [ - {"type": "frame", "id": "ExtendCancel", "width": "fill_container", "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "ExtendCancelT", "fill": "#ADADB0", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "ExtendConfirm", "width": "fill_container", "height": 48, "fill": "#F59E0B", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "ExtendConfirmIcon", "width": 18, "height": 18, "iconFontName": "timer", "iconFontFamily": "lucide", "fill": "#000"}, {"type": "text", "id": "ExtendConfirmT", "fill": "#000", "content": "Xác nhận gia hạn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]} - ]} - ] - } - ] - } - ] -} diff --git a/pencil-design/src/pages/tPOS/pos/karaoke/workflow/room-map.pen b/pencil-design/src/pages/tPOS/pos/karaoke/workflow/room-map.pen deleted file mode 100644 index b99b75c5..00000000 --- a/pencil-design/src/pages/tPOS/pos/karaoke/workflow/room-map.pen +++ /dev/null @@ -1,130 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "KaraokeRoomMap", - "name": "Karaoke/Room Map", - "reusable": true, - "width": 1024, - "height": 768, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "RoomMapHeader", - "width": "fill_container", - "height": 64, - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "padding": [0, 24], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "RoomMapLeft", "gap": 16, "alignItems": "center", "children": [ - {"type": "frame", "id": "RoomMapLogo", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RoomMapLogoText", "fill": "$text-primary", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}]}, - {"type": "text", "id": "RoomMapTitle", "fill": "$text-primary", "content": "Sơ đồ phòng", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "RoomMapLegend", "gap": 20, "alignItems": "center", "children": [ - {"type": "frame", "id": "LegendEmpty", "gap": 8, "alignItems": "center", "children": [{"type": "frame", "id": "LegendEmptyDot", "width": 16, "height": 16, "fill": "#22C55E", "cornerRadius": 4}, {"type": "text", "id": "LegendEmptyText", "fill": "$text-secondary", "content": "Trống", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, - {"type": "frame", "id": "LegendActive", "gap": 8, "alignItems": "center", "children": [{"type": "frame", "id": "LegendActiveDot", "width": 16, "height": 16, "fill": "#8B5CF6", "cornerRadius": 4}, {"type": "text", "id": "LegendActiveText", "fill": "$text-secondary", "content": "Đang hát", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, - {"type": "frame", "id": "LegendWarning", "gap": 8, "alignItems": "center", "children": [{"type": "frame", "id": "LegendWarningDot", "width": 16, "height": 16, "fill": "#F59E0B", "cornerRadius": 4}, {"type": "text", "id": "LegendWarningText", "fill": "$text-secondary", "content": "Sắp hết giờ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]} - ]}, - {"type": "frame", "id": "RoomMapTime", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "RoomMapTimeValue", "fill": "$text-primary", "content": "00:15", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} - ]} - ] - }, - { - "type": "frame", - "id": "RoomMapFloors", - "width": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "padding": [12, 24], - "gap": 8, - "children": [ - {"type": "frame", "id": "Floor1Tab", "fill": "$orange-primary", "cornerRadius": 8, "padding": [10, 20], "children": [{"type": "text", "id": "Floor1Text", "fill": "$text-primary", "content": "Tầng 1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, - {"type": "frame", "id": "Floor2Tab", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [10, 20], "children": [{"type": "text", "id": "Floor2Text", "fill": "$text-secondary", "content": "Tầng 2", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "FloorVIPTab", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [10, 20], "children": [{"type": "text", "id": "FloorVIPText", "fill": "$text-secondary", "content": "VIP", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]} - ] - }, - { - "type": "frame", - "id": "RoomMapGrid", - "width": "fill_container", - "height": "fill_container", - "padding": 32, - "layout": "vertical", - "gap": 24, - "clip": true, - "children": [ - {"type": "frame", "id": "RoomRow1", "width": "fill_container", "gap": 24, "children": [ - {"type": "frame", "id": "Room01", "width": 180, "height": 150, "fill": "#8B5CF615", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#8B5CF6"}, "layout": "vertical", "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Room01Label", "fill": "#8B5CF6", "content": "P.01", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, - {"type": "frame", "id": "Room01Timer", "fill": "#8B5CF630", "cornerRadius": 8, "padding": [6, 12], "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "Room01TimerIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#8B5CF6"}, {"type": "text", "id": "Room01TimerText", "fill": "#8B5CF6", "content": "1:45 còn", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "text", "id": "Room01Price", "fill": "$text-tertiary", "content": "120K/h • Small", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "Room02", "width": 180, "height": 150, "fill": "#22C55E15", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "#22C55E"}, "layout": "vertical", "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Room02Label", "fill": "#22C55E", "content": "P.02", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, - {"type": "text", "id": "Room02Status", "fill": "#22C55E", "content": "Trống", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "Room02Price", "fill": "$text-tertiary", "content": "120K/h • Small", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "Room03", "width": 180, "height": 150, "fill": "#F59E0B15", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#F59E0B"}, "layout": "vertical", "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Room03Label", "fill": "#F59E0B", "content": "P.03", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, - {"type": "frame", "id": "Room03Timer", "fill": "#F59E0B30", "cornerRadius": 8, "padding": [6, 12], "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "Room03TimerIcon", "width": 14, "height": 14, "iconFontName": "alarm-clock", "iconFontFamily": "lucide", "fill": "#F59E0B"}, {"type": "text", "id": "Room03TimerText", "fill": "#F59E0B", "content": "10p còn!", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "text", "id": "Room03Price", "fill": "$text-tertiary", "content": "180K/h • Medium", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "Room04", "width": 180, "height": 150, "fill": "#8B5CF615", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Room04Label", "fill": "$orange-primary", "content": "P.04", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, - {"type": "frame", "id": "Room04Selected", "fill": "$orange-primary", "cornerRadius": 8, "padding": [6, 12], "children": [{"type": "text", "id": "Room04SelectedText", "fill": "$text-primary", "content": "ĐANG CHỌN", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "text", "id": "Room04Price", "fill": "$text-tertiary", "content": "180K/h • Medium", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]} - ]}, - {"type": "frame", "id": "RoomRow2", "width": "fill_container", "gap": 24, "children": [ - {"type": "frame", "id": "Room05", "width": 180, "height": 150, "fill": "#8B5CF615", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#8B5CF6"}, "layout": "vertical", "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Room05Label", "fill": "#8B5CF6", "content": "P.05", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, - {"type": "frame", "id": "Room05Timer", "fill": "#8B5CF630", "cornerRadius": 8, "padding": [6, 12], "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "Room05TimerIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#8B5CF6"}, {"type": "text", "id": "Room05TimerText", "fill": "#8B5CF6", "content": "2:30 còn", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "text", "id": "Room05Price", "fill": "$text-tertiary", "content": "250K/h • Large", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "Room06", "width": 180, "height": 150, "fill": "#22C55E15", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "#22C55E"}, "layout": "vertical", "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Room06Label", "fill": "#22C55E", "content": "P.06", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, - {"type": "text", "id": "Room06Status", "fill": "#22C55E", "content": "Trống", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "Room06Price", "fill": "$text-tertiary", "content": "250K/h • Large", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "Room07", "width": 180, "height": 150, "fill": "#22C55E15", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "#22C55E"}, "layout": "vertical", "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Room07Label", "fill": "#22C55E", "content": "VIP 01", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, - {"type": "text", "id": "Room07Status", "fill": "#22C55E", "content": "Trống", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "Room07Price", "fill": "$text-tertiary", "content": "450K/h • VIP", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "Room08", "width": 180, "height": 150, "fill": "#8B5CF615", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#8B5CF6"}, "layout": "vertical", "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Room08Label", "fill": "#8B5CF6", "content": "VIP 02", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, - {"type": "frame", "id": "Room08Timer", "fill": "#8B5CF630", "cornerRadius": 8, "padding": [6, 12], "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "Room08TimerIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#8B5CF6"}, {"type": "text", "id": "Room08TimerText", "fill": "#8B5CF6", "content": "3:15 còn", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "text", "id": "Room08Price", "fill": "$text-tertiary", "content": "450K/h • VIP", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]} - ]}, - {"type": "frame", "id": "RoomMapStats", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "padding": [16, 24], "gap": 40, "justifyContent": "center", "children": [ - {"type": "frame", "id": "StatTotal", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [{"type": "text", "id": "StatTotalValue", "fill": "$text-primary", "content": "8", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, {"type": "text", "id": "StatTotalLabel", "fill": "$text-tertiary", "content": "Tổng phòng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, - {"type": "frame", "id": "StatEmpty", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [{"type": "text", "id": "StatEmptyValue", "fill": "#22C55E", "content": "3", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, {"type": "text", "id": "StatEmptyLabel", "fill": "$text-tertiary", "content": "Trống", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, - {"type": "frame", "id": "StatActive", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [{"type": "text", "id": "StatActiveValue", "fill": "#8B5CF6", "content": "4", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, {"type": "text", "id": "StatActiveLabel", "fill": "$text-tertiary", "content": "Đang hát", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, - {"type": "frame", "id": "StatWarning", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [{"type": "text", "id": "StatWarningValue", "fill": "#F59E0B", "content": "1", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, {"type": "text", "id": "StatWarningLabel", "fill": "$text-tertiary", "content": "Sắp hết giờ", "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/karaoke/workflow/room-reset.pen b/pencil-design/src/pages/tPOS/pos/karaoke/workflow/room-reset.pen deleted file mode 100644 index af3a8961..00000000 --- a/pencil-design/src/pages/tPOS/pos/karaoke/workflow/room-reset.pen +++ /dev/null @@ -1,122 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "RoomResetDialog", - "name": "Room Reset Dialog", - "width": 420, - "height": 380, - "fill": "$bg-elevated", - "cornerRadius": 20, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "RRHeader", - "width": "fill_container", - "padding": [20, 24], - "justifyContent": "space_between", - "alignItems": "center", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "children": [ - {"type": "frame", "id": "RRTitle", "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RRTitleIcon", "width": 22, "height": 22, "iconFontName": "refresh-cw", "iconFontFamily": "lucide", "fill": "#8B5CF6"}, - {"type": "text", "id": "RRTitleText", "fill": "$text-primary", "content": "Reset Phòng VIP 01?", "fontFamily": "Roboto", "fontSize": 17, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "RRCloseBtn", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RRCloseIcon", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "RRBody", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "padding": 24, - "gap": 20, - "children": [ - { - "type": "frame", - "id": "RRSessionSummary", - "width": "fill_container", - "fill": "#8B5CF610", - "cornerRadius": 12, - "stroke": {"thickness": 1, "fill": "#8B5CF640"}, - "padding": 16, - "layout": "vertical", - "gap": 10, - "children": [ - {"type": "text", "id": "RRSummaryTitle", "fill": "$text-secondary", "content": "Session vừa rồi:", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "frame", "id": "RRSummaryItems", "layout": "vertical", "gap": 8, "children": [ - {"type": "frame", "id": "RRSummaryItem1", "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RRSummaryItem1Icon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#8B5CF6"}, - {"type": "text", "id": "RRSummaryItem1Text", "fill": "$text-primary", "content": "Thời gian: 02:45", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "RRSummaryItem2", "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RRSummaryItem2Icon", "width": 14, "height": 14, "iconFontName": "utensils", "iconFontFamily": "lucide", "fill": "#8B5CF6"}, - {"type": "text", "id": "RRSummaryItem2Text", "fill": "$text-primary", "content": "F&B: 830,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "RRSummaryItem3", "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RRSummaryItem3Icon", "width": 14, "height": 14, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "RRSummaryItem3Text", "fill": "#22C55E", "content": "Thanh toán: Hoàn tất", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "RRNoteSection", - "width": "fill_container", - "layout": "vertical", - "gap": 10, - "children": [ - {"type": "frame", "id": "RRNoteLabel", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "RRNoteCheckbox", "width": 18, "height": 18, "fill": "$bg-interactive", "cornerRadius": 4, "stroke": {"thickness": 1, "fill": "$border-default"}}, - {"type": "text", "id": "RRNoteLabelText", "fill": "$text-secondary", "content": "Ghi chú dọn dẹp (tùy chọn)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "RRNoteInput", "width": "fill_container", "height": 64, "fill": "$bg-surface", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": 12, "children": [ - {"type": "text", "id": "RRNotePlaceholder", "fill": "$text-tertiary", "content": "Cần bổ sung micro, vệ sinh...", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "RRActions", - "width": "fill_container", - "padding": [16, 24], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, - "gap": 12, - "justifyContent": "flex_end", - "children": [ - {"type": "frame", "id": "RRCancelBtn", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 24], "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "RRCancelText", "fill": "$text-secondary", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "RRConfirmBtn", "height": 44, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 10, "padding": [0, 24], "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RRConfirmIcon", "width": 16, "height": 16, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "RRConfirmText", "fill": "$text-primary", "content": "Reset & Mở 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"}, - "bg-surface": {"type": "color", "value": "#111113"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/karaoke/workflow/room-select.pen b/pencil-design/src/pages/tPOS/pos/karaoke/workflow/room-select.pen deleted file mode 100644 index c26930c7..00000000 --- a/pencil-design/src/pages/tPOS/pos/karaoke/workflow/room-select.pen +++ /dev/null @@ -1,122 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "RoomSelectDialog", - "name": "Dialog/Room Select", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "#0A0A0B80", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "RoomModal", - "width": 520, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 20, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "RoomHeader", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "RoomHeaderLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "RoomIcon", "width": 44, "height": 44, "fill": "#8B5CF61A", "cornerRadius": 22, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RoomIconI", "width": 22, "height": 22, "iconFontName": "door-open", "iconFontFamily": "lucide", "fill": "#8B5CF6"} - ]}, - {"type": "frame", "id": "RoomTitleBlock", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "RoomTitle", "fill": "#FFFFFF", "content": "Chọn phòng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}, - {"type": "text", "id": "RoomDesc", "fill": "#8B8B90", "content": "5 phòng trống", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "RoomClose", "width": 32, "height": 32, "fill": "#2A2A2E", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RoomCloseIcon", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#8B8B90"} - ]} - ] - }, - { - "type": "frame", - "id": "RoomTypes", - "width": "fill_container", - "gap": 8, - "children": [ - {"type": "frame", "id": "RoomTypeAll", "fill": "#8B5CF6", "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "RoomTypeAllT", "fill": "#FFF", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, - {"type": "frame", "id": "RoomTypeStd", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "RoomTypeStdT", "fill": "#8B8B90", "content": "Standard", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "RoomTypeVIP", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "RoomTypeVIPT", "fill": "#8B8B90", "content": "VIP", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "RoomTypePre", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "RoomTypePreT", "fill": "#8B8B90", "content": "Premium", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]} - ] - }, - { - "type": "frame", - "id": "RoomList", - "width": "fill_container", - "layout": "vertical", - "gap": 10, - "children": [ - {"type": "frame", "id": "Room1", "width": "fill_container", "fill": "#8B5CF610", "stroke": {"thickness": 2, "fill": "#8B5CF6"}, "cornerRadius": 14, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "Room1Left", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "Room1Img", "width": 48, "height": 48, "fill": "#8B5CF630", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "Room1Icon", "width": 24, "height": 24, "iconFontName": "mic-2", "iconFontFamily": "lucide", "fill": "#8B5CF6"}]}, - {"type": "frame", "id": "Room1Info", "layout": "vertical", "gap": 4, "children": [ - {"type": "frame", "id": "Room1NameRow", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "Room1Name", "fill": "#FFFFFF", "content": "Phòng VIP 01", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "frame", "id": "Room1Badge", "fill": "#22C55E", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "Room1BadgeT", "fill": "#FFF", "content": "Trống", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "600"}]} - ]}, - {"type": "text", "id": "Room1Cap", "fill": "#8B8B90", "content": "8-12 người • Màn hình lớn", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "Room1Right", "layout": "vertical", "gap": 2, "alignItems": "flex-end", "children": [ - {"type": "text", "id": "Room1Price", "fill": "#8B5CF6", "content": "150,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "Room1Unit", "fill": "#6B6B70", "content": "/giờ", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "Room2", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 14, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "Room2Left", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "Room2Img", "width": 48, "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "Room2Icon", "width": 24, "height": 24, "iconFontName": "mic-2", "iconFontFamily": "lucide", "fill": "#6B6B70"}]}, - {"type": "frame", "id": "Room2Info", "layout": "vertical", "gap": 4, "children": [ - {"type": "frame", "id": "Room2NameRow", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "Room2Name", "fill": "#FFFFFF", "content": "Phòng Standard 02", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "frame", "id": "Room2Badge", "fill": "#22C55E", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "Room2BadgeT", "fill": "#FFF", "content": "Trống", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "600"}]} - ]}, - {"type": "text", "id": "Room2Cap", "fill": "#8B8B90", "content": "4-6 người", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "Room2Right", "layout": "vertical", "gap": 2, "alignItems": "flex-end", "children": [ - {"type": "text", "id": "Room2Price", "fill": "#FFFFFF", "content": "80,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "text", "id": "Room2Unit", "fill": "#6B6B70", "content": "/giờ", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "Room3", "width": "fill_container", "fill": "#FF5C0010", "stroke": {"thickness": 1, "fill": "#FF5C0050"}, "cornerRadius": 14, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "Room3Left", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "Room3Img", "width": 48, "height": 48, "fill": "#FF5C0030", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "Room3Icon", "width": 24, "height": 24, "iconFontName": "mic-2", "iconFontFamily": "lucide", "fill": "#FF5C00"}]}, - {"type": "frame", "id": "Room3Info", "layout": "vertical", "gap": 4, "children": [ - {"type": "frame", "id": "Room3NameRow", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "Room3Name", "fill": "#8B8B90", "content": "Phòng VIP 02", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "frame", "id": "Room3Badge", "fill": "#FF5C00", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "Room3BadgeT", "fill": "#FFF", "content": "Đang dùng", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "600"}]} - ]}, - {"type": "text", "id": "Room3Cap", "fill": "#6B6B70", "content": "8-12 người • Còn 45 phút", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "text", "id": "Room3Price", "fill": "#6B6B70", "content": "150,000₫/giờ", "fontFamily": "Roboto", "fontSize": 13} - ]} - ] - }, - {"type": "frame", "id": "RoomActions", "width": "fill_container", "gap": 12, "children": [ - {"type": "frame", "id": "RoomCancel", "width": "fill_container", "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RoomCancelT", "fill": "#ADADB0", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "RoomConfirm", "width": "fill_container", "height": 48, "fill": "#8B5CF6", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "RoomConfirmIcon", "width": 18, "height": 18, "iconFontName": "door-open", "iconFontFamily": "lucide", "fill": "#FFF"}, {"type": "text", "id": "RoomConfirmT", "fill": "#FFF", "content": "Mở phòng VIP 01", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]} - ]} - ] - } - ] - } - ] -} diff --git a/pencil-design/src/pages/tPOS/pos/karaoke/workflow/room-session.pen b/pencil-design/src/pages/tPOS/pos/karaoke/workflow/room-session.pen deleted file mode 100644 index 128f2685..00000000 --- a/pencil-design/src/pages/tPOS/pos/karaoke/workflow/room-session.pen +++ /dev/null @@ -1,131 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "KaraokeRoomSession", - "name": "Karaoke/Room Session", - "reusable": true, - "width": 480, - "height": 720, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "SessionHeader", - "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": "SessionLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "SessionBackBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SessionBackIcon", "width": 20, "height": 20, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]}, - {"type": "frame", "id": "SessionRoomInfo", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "SessionRoomName", "fill": "$text-primary", "content": "Phòng 03", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, - {"type": "text", "id": "SessionRoomType", "fill": "$text-tertiary", "content": "Medium • 180K/h", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ]} - ]}, - {"type": "frame", "id": "SessionStatus", "fill": "#8B5CF620", "cornerRadius": 8, "padding": [8, 14], "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "SessionStatusDot", "width": 10, "height": 10, "fill": "#8B5CF6", "cornerRadius": 100}, - {"type": "text", "id": "SessionStatusText", "fill": "#8B5CF6", "content": "Đang hát", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ] - }, - { - "type": "frame", - "id": "SessionTimer", - "width": "fill_container", - "fill": "#8B5CF615", - "padding": 24, - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "TimerDisplay", "gap": 8, "alignItems": "baseline", "children": [ - {"type": "text", "id": "TimerValue", "fill": "#8B5CF6", "content": "01:45:32", "fontFamily": "Roboto", "fontSize": 48, "fontWeight": "700"}, - {"type": "text", "id": "TimerTotal", "fill": "$text-tertiary", "content": "/ 2:00:00", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "TimerBar", "width": "fill_container", "height": 8, "fill": "$bg-interactive", "cornerRadius": 100, "children": [ - {"type": "frame", "id": "TimerBarFill", "width": "87%", "height": "fill_container", "fill": "#8B5CF6", "cornerRadius": 100} - ]}, - {"type": "frame", "id": "TimerInfo", "gap": 24, "children": [ - {"type": "frame", "id": "TimerStart", "layout": "vertical", "gap": 2, "alignItems": "center", "children": [{"type": "text", "id": "TimerStartLabel", "fill": "$text-tertiary", "content": "Bắt đầu", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, {"type": "text", "id": "TimerStartValue", "fill": "$text-primary", "content": "22:30", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, - {"type": "frame", "id": "TimerEnd", "layout": "vertical", "gap": 2, "alignItems": "center", "children": [{"type": "text", "id": "TimerEndLabel", "fill": "$text-tertiary", "content": "Kết thúc", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, {"type": "text", "id": "TimerEndValue", "fill": "$text-primary", "content": "00:30", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, - {"type": "frame", "id": "TimerGuests", "layout": "vertical", "gap": 2, "alignItems": "center", "children": [{"type": "text", "id": "TimerGuestsLabel", "fill": "$text-tertiary", "content": "Số khách", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, {"type": "text", "id": "TimerGuestsValue", "fill": "$text-primary", "content": "6 người", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]} - ]} - ] - }, - { - "type": "frame", - "id": "SessionBill", - "width": "fill_container", - "height": "fill_container", - "fill": "$bg-elevated", - "layout": "vertical", - "children": [ - {"type": "frame", "id": "BillHeader", "width": "fill_container", "padding": [14, 24], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "BillTitle", "fill": "$text-primary", "content": "Chi tiết hóa đơn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "frame", "id": "BillAddBtn", "fill": "$orange-primary", "cornerRadius": 8, "padding": [8, 14], "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "BillAddIcon", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "BillAddText", "fill": "$text-primary", "content": "Thêm đồ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]} - ]}, - {"type": "frame", "id": "BillItems", "width": "fill_container", "height": "fill_container", "padding": [12, 24], "layout": "vertical", "gap": 0, "children": [ - {"type": "frame", "id": "BillItem1", "width": "fill_container", "padding": [12, 0], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "BillItem1Left", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "BillItem1Name", "fill": "$text-primary", "content": "⏱️ Tiền phòng (2h)", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "BillItem1Note", "fill": "$text-tertiary", "content": "Medium • 180K/h", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}]}, - {"type": "text", "id": "BillItem1Price", "fill": "$text-primary", "content": "360,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "BillItem2", "width": "fill_container", "padding": [12, 0], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "BillItem2Left", "gap": 14, "alignItems": "center", "children": [{"type": "frame", "id": "BillItem2Qty", "gap": 8, "children": [{"type": "frame", "id": "BillItem2Minus", "width": 28, "height": 28, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "BillItem2MinusIcon", "width": 14, "height": 14, "iconFontName": "minus", "iconFontFamily": "lucide", "fill": "$text-secondary"}]}, {"type": "text", "id": "BillItem2QtyText", "fill": "$text-primary", "content": "6", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "frame", "id": "BillItem2Plus", "width": 28, "height": 28, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "BillItem2PlusIcon", "width": 14, "height": 14, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-secondary"}]}]}, {"type": "text", "id": "BillItem2Name", "fill": "$text-primary", "content": "Tiger lon", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "text", "id": "BillItem2Price", "fill": "$text-primary", "content": "210,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "BillItem3", "width": "fill_container", "padding": [12, 0], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "BillItem3Left", "gap": 14, "alignItems": "center", "children": [{"type": "frame", "id": "BillItem3Qty", "gap": 8, "children": [{"type": "frame", "id": "BillItem3Minus", "width": 28, "height": 28, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "BillItem3MinusIcon", "width": 14, "height": 14, "iconFontName": "minus", "iconFontFamily": "lucide", "fill": "$text-secondary"}]}, {"type": "text", "id": "BillItem3QtyText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "frame", "id": "BillItem3Plus", "width": 28, "height": 28, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "BillItem3PlusIcon", "width": 14, "height": 14, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-secondary"}]}]}, {"type": "text", "id": "BillItem3Name", "fill": "$text-primary", "content": "Trái cây dĩa", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "text", "id": "BillItem3Price", "fill": "$text-primary", "content": "100,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "BillSummary", "width": "fill_container", "fill": "$bg-surface", "padding": [14, 24], "layout": "vertical", "gap": 8, "children": [ - {"type": "frame", "id": "BillRoomTotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "BillRoomLabel", "fill": "$text-secondary", "content": "Tiền phòng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}, {"type": "text", "id": "BillRoomValue", "fill": "$text-primary", "content": "360,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "BillFBTotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "BillFBLabel", "fill": "$text-secondary", "content": "Đồ uống/ăn", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}, {"type": "text", "id": "BillFBValue", "fill": "$text-primary", "content": "310,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "BillTotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "BillTotalLabel", "fill": "$text-primary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, {"type": "text", "id": "BillTotalValue", "fill": "$orange-primary", "content": "670,000₫", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}]} - ]} - ] - }, - { - "type": "frame", - "id": "SessionFooter", - "width": "fill_container", - "fill": "$bg-elevated", - "padding": [16, 24], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, - "gap": 12, - "children": [ - {"type": "frame", "id": "SessionExtendBtn", "width": "fill_container", "height": 48, "fill": "#8B5CF6", "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SessionExtendIcon", "width": 18, "height": 18, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "SessionExtendText", "fill": "$text-primary", "content": "Gia hạn", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "SessionCloseBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SessionCloseIcon", "width": 18, "height": 18, "iconFontName": "log-out", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "SessionCloseText", "fill": "$text-primary", "content": "Kết thúc & Thanh toá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"}, - "bg-surface": {"type": "color", "value": "#111113"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/karaoke/workflow/service-display.pen b/pencil-design/src/pages/tPOS/pos/karaoke/workflow/service-display.pen deleted file mode 100644 index ea16c677..00000000 --- a/pencil-design/src/pages/tPOS/pos/karaoke/workflow/service-display.pen +++ /dev/null @@ -1,308 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "ServiceDisplayScreen", - "name": "Service Display Screen", - "width": 1440, - "height": 900, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "SvcHeader", - "width": "fill_container", - "height": 64, - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "padding": [0, 24], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "SvcHeaderLeft", "gap": 14, "alignItems": "center", "children": [ - {"type": "frame", "id": "SvcLogo", "width": 44, "height": 44, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SvcLogoText", "fill": "$text-primary", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SvcTitleArea", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "SvcTitle", "fill": "$text-primary", "content": "Service Display", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}, - {"type": "text", "id": "SvcSubtitle", "fill": "$text-secondary", "content": "Màn hình phục vụ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ]} - ]}, - {"type": "frame", "id": "SvcHeaderCenter", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "SvcNotifBadge", "fill": "#EF4444", "cornerRadius": 100, "padding": [6, 12], "gap": 6, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SvcNotifIcon", "width": 16, "height": 16, "iconFontName": "bell-ring", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "SvcNotifText", "fill": "$text-primary", "content": "5 new", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SvcHeaderRight", "gap": 16, "alignItems": "center", "children": [ - {"type": "frame", "id": "SvcDateTime", "layout": "vertical", "gap": 2, "alignItems": "flex_end", "children": [ - {"type": "text", "id": "SvcTime", "fill": "$text-primary", "content": "22:15", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}, - {"type": "text", "id": "SvcDate", "fill": "$text-secondary", "content": "05/02/2026", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "SvcUserAvatar", "width": 40, "height": 40, "fill": "#14B8A630", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SvcUserInit", "fill": "#14B8A6", "content": "NV", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "SvcTabs", - "width": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "padding": [12, 24], - "gap": 12, - "children": [ - {"type": "frame", "id": "SvcTabPending", "fill": "#F59E0B", "cornerRadius": 100, "padding": [10, 20], "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "SvcTabPendingDot", "width": 8, "height": 8, "fill": "$text-primary", "cornerRadius": 100}, - {"type": "text", "id": "SvcTabPendingText", "fill": "$text-primary", "content": "Đang chờ (5)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "SvcTabProcessing", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "SvcTabProcessingDot", "width": 8, "height": 8, "fill": "#3B82F6", "cornerRadius": 100}, - {"type": "text", "id": "SvcTabProcessingText", "fill": "$text-secondary", "content": "Đang làm (3)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SvcTabReady", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "SvcTabReadyDot", "width": 8, "height": 8, "fill": "#22C55E", "cornerRadius": 100}, - {"type": "text", "id": "SvcTabReadyText", "fill": "$text-secondary", "content": "Sẵn sàng (2)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SvcTabDone", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SvcTabDoneIcon", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "SvcTabDoneText", "fill": "$text-tertiary", "content": "Đã phục vụ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ] - }, - { - "type": "frame", - "id": "SvcBody", - "width": "fill_container", - "height": "fill_container", - "padding": 24, - "gap": 20, - "wrap": true, - "alignContent": "flex_start", - "children": [ - { - "type": "frame", - "id": "SvcCard1", - "width": 320, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": {"thickness": 2, "fill": "#F59E0B"}, - "layout": "vertical", - "clip": true, - "children": [ - {"type": "frame", "id": "SvcCard1Header", "width": "fill_container", "fill": "#F59E0B20", "padding": [14, 18], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SvcCard1Room", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "SvcCard1RoomIcon", "width": 36, "height": 36, "fill": "#8B5CF630", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SvcCard1IconFont", "width": 18, "height": 18, "iconFontName": "mic", "iconFontFamily": "lucide", "fill": "#8B5CF6"} - ]}, - {"type": "text", "id": "SvcCard1RoomName", "fill": "$text-primary", "content": "VIP 01", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SvcCard1Timer", "gap": 6, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SvcCard1TimerIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "text", "id": "SvcCard1TimerText", "fill": "#F59E0B", "content": "3 phút", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SvcCard1Items", "width": "fill_container", "layout": "vertical", "padding": [14, 18], "gap": 8, "children": [ - {"type": "frame", "id": "SvcCard1Item1", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "SvcCard1Item1Qty", "width": 24, "height": 24, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SvcCard1Item1QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]}, - {"type": "text", "id": "SvcCard1Item1Name", "fill": "$text-primary", "content": "Bia Tiger (Thùng)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SvcCard1Item2", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "SvcCard1Item2Qty", "width": 24, "height": 24, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SvcCard1Item2QtyText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]}, - {"type": "text", "id": "SvcCard1Item2Name", "fill": "$text-primary", "content": "Dĩa Trái Cây", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "SvcCard1Actions", "width": "fill_container", "padding": [14, 18], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 10, "children": [ - {"type": "frame", "id": "SvcCard1Accept", "height": 40, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 16], "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SvcCard1AcceptText", "fill": "$text-primary", "content": "Nhận", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "SvcCard1Detail", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 16], "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SvcCard1DetailText", "fill": "$text-secondary", "content": "Chi tiết", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "SvcCard2", - "width": 320, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": {"thickness": 2, "fill": "#F59E0B"}, - "layout": "vertical", - "clip": true, - "children": [ - {"type": "frame", "id": "SvcCard2Header", "width": "fill_container", "fill": "#F59E0B20", "padding": [14, 18], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SvcCard2Room", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "SvcCard2RoomIcon", "width": 36, "height": 36, "fill": "#EF444430", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SvcCard2IconFont", "width": 18, "height": 18, "iconFontName": "mic", "iconFontFamily": "lucide", "fill": "#EF4444"} - ]}, - {"type": "text", "id": "SvcCard2RoomName", "fill": "$text-primary", "content": "Phòng 05", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SvcCard2Timer", "gap": 6, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SvcCard2TimerIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "text", "id": "SvcCard2TimerText", "fill": "#F59E0B", "content": "5 phút", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SvcCard2Items", "width": "fill_container", "layout": "vertical", "padding": [14, 18], "gap": 8, "children": [ - {"type": "frame", "id": "SvcCard2Item1", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "SvcCard2Item1Qty", "width": 24, "height": 24, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SvcCard2Item1QtyText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]}, - {"type": "text", "id": "SvcCard2Item1Name", "fill": "$text-primary", "content": "Heineken (Lon)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SvcCard2Item2", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "SvcCard2Item2Qty", "width": 24, "height": 24, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SvcCard2Item2QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]}, - {"type": "text", "id": "SvcCard2Item2Name", "fill": "$text-primary", "content": "Snack Mix", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "SvcCard2Actions", "width": "fill_container", "padding": [14, 18], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 10, "children": [ - {"type": "frame", "id": "SvcCard2Accept", "height": 40, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 16], "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SvcCard2AcceptText", "fill": "$text-primary", "content": "Nhận", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "SvcCard2Detail", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 16], "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SvcCard2DetailText", "fill": "$text-secondary", "content": "Chi tiết", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "SvcCard3", - "width": 320, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": {"thickness": 2, "fill": "#3B82F6"}, - "layout": "vertical", - "clip": true, - "children": [ - {"type": "frame", "id": "SvcCard3Header", "width": "fill_container", "fill": "#3B82F620", "padding": [14, 18], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SvcCard3Room", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "SvcCard3RoomIcon", "width": 36, "height": 36, "fill": "#8B5CF630", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SvcCard3IconFont", "width": 18, "height": 18, "iconFontName": "mic", "iconFontFamily": "lucide", "fill": "#8B5CF6"} - ]}, - {"type": "text", "id": "SvcCard3RoomName", "fill": "$text-primary", "content": "VIP 02", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SvcCard3Status", "fill": "#3B82F6", "cornerRadius": 100, "padding": [4, 10], "children": [ - {"type": "text", "id": "SvcCard3StatusText", "fill": "$text-primary", "content": "Đang làm", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SvcCard3Items", "width": "fill_container", "layout": "vertical", "padding": [14, 18], "gap": 8, "children": [ - {"type": "frame", "id": "SvcCard3Item1", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "SvcCard3Item1Qty", "width": 24, "height": 24, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SvcCard3Item1QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]}, - {"type": "text", "id": "SvcCard3Item1Name", "fill": "$text-primary", "content": "Combo Party", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "SvcCard3Actions", "width": "fill_container", "padding": [14, 18], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 10, "children": [ - {"type": "frame", "id": "SvcCard3Complete", "width": "fill_container", "height": 40, "fill": "#22C55E", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SvcCard3CompleteIcon", "width": 16, "height": 16, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "SvcCard3CompleteText", "fill": "$text-primary", "content": "Hoàn thành", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "SvcCard4", - "width": 320, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": {"thickness": 2, "fill": "#22C55E"}, - "layout": "vertical", - "clip": true, - "children": [ - {"type": "frame", "id": "SvcCard4Header", "width": "fill_container", "fill": "#22C55E20", "padding": [14, 18], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SvcCard4Room", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "SvcCard4RoomIcon", "width": 36, "height": 36, "fill": "#F59E0B30", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SvcCard4IconFont", "width": 18, "height": 18, "iconFontName": "mic", "iconFontFamily": "lucide", "fill": "#F59E0B"} - ]}, - {"type": "text", "id": "SvcCard4RoomName", "fill": "$text-primary", "content": "Phòng 04", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SvcCard4Status", "fill": "#22C55E", "cornerRadius": 100, "padding": [4, 10], "children": [ - {"type": "text", "id": "SvcCard4StatusText", "fill": "$text-primary", "content": "Sẵn sàng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SvcCard4Items", "width": "fill_container", "layout": "vertical", "padding": [14, 18], "gap": 8, "children": [ - {"type": "frame", "id": "SvcCard4Item1", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "SvcCard4Item1Qty", "width": 24, "height": 24, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SvcCard4Item1QtyText", "fill": "$text-primary", "content": "6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]}, - {"type": "text", "id": "SvcCard4Item1Name", "fill": "$text-primary", "content": "Nước suối", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "SvcCard4Actions", "width": "fill_container", "padding": [14, 18], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 10, "children": [ - {"type": "frame", "id": "SvcCard4Serve", "width": "fill_container", "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SvcCard4ServeText", "fill": "$text-primary", "content": "Phục vụ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "icon_font", "id": "SvcCard4ServeIcon", "width": 16, "height": 16, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$text-primary"} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "SvcCard5", - "width": 320, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": {"thickness": 2, "fill": "#22C55E"}, - "layout": "vertical", - "clip": true, - "children": [ - {"type": "frame", "id": "SvcCard5Header", "width": "fill_container", "fill": "#22C55E20", "padding": [14, 18], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SvcCard5Room", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "SvcCard5RoomIcon", "width": 36, "height": 36, "fill": "#8B5CF630", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SvcCard5IconFont", "width": 18, "height": 18, "iconFontName": "mic", "iconFontFamily": "lucide", "fill": "#8B5CF6"} - ]}, - {"type": "text", "id": "SvcCard5RoomName", "fill": "$text-primary", "content": "VIP 03", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SvcCard5Status", "fill": "#22C55E", "cornerRadius": 100, "padding": [4, 10], "children": [ - {"type": "text", "id": "SvcCard5StatusText", "fill": "$text-primary", "content": "Sẵn sàng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SvcCard5Items", "width": "fill_container", "layout": "vertical", "padding": [14, 18], "gap": 8, "children": [ - {"type": "frame", "id": "SvcCard5Item1", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "SvcCard5Item1Qty", "width": 24, "height": 24, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SvcCard5Item1QtyText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]}, - {"type": "text", "id": "SvcCard5Item1Name", "fill": "$text-primary", "content": "Khăn lạnh", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "SvcCard5Actions", "width": "fill_container", "padding": [14, 18], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 10, "children": [ - {"type": "frame", "id": "SvcCard5Serve", "width": "fill_container", "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SvcCard5ServeText", "fill": "$text-primary", "content": "Phục vụ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "icon_font", "id": "SvcCard5ServeIcon", "width": 16, "height": 16, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$text-primary"} - ]} - ]} - ] - } - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "bg-surface": {"type": "color", "value": "#111113"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/restaurant/desktop.pen b/pencil-design/src/pages/tPOS/pos/restaurant/desktop.pen deleted file mode 100644 index 3918db3b..00000000 --- a/pencil-design/src/pages/tPOS/pos/restaurant/desktop.pen +++ /dev/null @@ -1,228 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "POSRestaurantScreen", - "name": "POS Restaurant Screen", - "reusable": true, - "width": 1920, - "height": 1080, - "fill": "$bg-page", - "layout": "horizontal", - "clip": true, - "children": [ - { - "type": "frame", - "id": "RestSidebar", - "name": "sidebar", - "width": 280, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "RestSideHeader", - "name": "sideHeader", - "width": "fill_container", - "padding": 20, - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "gap": 12, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "RestLogo", "width": 44, "height": 44, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestLogoText", "fill": "$text-primary", "content": "G", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}]}, - {"type": "frame", "id": "RestStoreInfo", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "RestStoreName", "fill": "$text-primary", "content": "Nhà Hàng GoodGo", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "text", "id": "RestBranch", "fill": "$text-secondary", "content": "Chi nhánh Lê Văn Sỹ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]} - ] - }, - { - "type": "frame", - "id": "RestTableMapArea", - "name": "tableMapArea", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "padding": 16, - "gap": 12, - "clip": true, - "children": [ - { - "type": "frame", - "id": "RestFloorTabs", - "name": "floorTabs", - "width": "fill_container", - "gap": 8, - "children": [ - {"type": "frame", "id": "RestFloor1Tab", "fill": "$orange-primary", "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "RestFloor1Text", "fill": "$text-primary", "content": "Tầng 1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, - {"type": "frame", "id": "RestFloor2Tab", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "RestFloor2Text", "fill": "$text-secondary", "content": "Tầng 2", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "RestVIPTab", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "RestVIPText", "fill": "$text-secondary", "content": "VIP", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]} - ] - }, - { - "type": "frame", - "id": "RestTableGrid", - "name": "tableGrid", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "gap": 8, - "clip": true, - "children": [ - {"type": "frame", "id": "RestTableRow1", "width": "fill_container", "gap": 8, "justifyContent": "flex_start", "children": [ - {"type": "frame", "id": "RestTable1", "width": 72, "height": 72, "fill": "$bg-interactive", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "gap": 2, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestTable1Num", "fill": "$text-primary", "content": "01", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "RestTable1Info", "fill": "$orange-primary", "content": "2 khách", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "500"}]}, - {"type": "frame", "id": "RestTable2", "width": 72, "height": 72, "fill": "#EF444420", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#EF4444"}, "layout": "vertical", "gap": 2, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestTable2Num", "fill": "#EF4444", "content": "02", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "RestTable2Info", "fill": "#EF4444", "content": "4 khách", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "500"}]}, - {"type": "frame", "id": "RestTable3", "width": 72, "height": 72, "fill": "#22C55E20", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#22C55E"}, "layout": "vertical", "gap": 2, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestTable3Num", "fill": "#22C55E", "content": "03", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "RestTable3Info", "fill": "#22C55E", "content": "Trống", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "500"}]} - ]}, - {"type": "frame", "id": "RestTableRow2", "width": "fill_container", "gap": 8, "justifyContent": "flex_start", "children": [ - {"type": "frame", "id": "RestTable4", "width": 72, "height": 72, "fill": "#22C55E20", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#22C55E"}, "layout": "vertical", "gap": 2, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestTable4Num", "fill": "#22C55E", "content": "04", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "RestTable4Info", "fill": "#22C55E", "content": "Trống", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "500"}]}, - {"type": "frame", "id": "RestTable5", "width": 72, "height": 72, "fill": "#EF444420", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#EF4444"}, "layout": "vertical", "gap": 2, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestTable5Num", "fill": "#EF4444", "content": "05", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "RestTable5Info", "fill": "#EF4444", "content": "6 khách", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "500"}]}, - {"type": "frame", "id": "RestTable6", "width": 72, "height": 72, "fill": "#F59E0B20", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#F59E0B"}, "layout": "vertical", "gap": 2, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestTable6Num", "fill": "#F59E0B", "content": "06", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "RestTable6Info", "fill": "#F59E0B", "content": "Đặt trước", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "500"}]} - ]} - ] - }, - { - "type": "frame", - "id": "RestTableLegend", - "name": "tableLegend", - "width": "fill_container", - "gap": 12, - "wrap": true, - "children": [ - {"type": "frame", "id": "RestLegAvail", "gap": 6, "alignItems": "center", "children": [{"type": "frame", "id": "RestLegAvailDot", "width": 10, "height": 10, "fill": "#22C55E", "cornerRadius": 100}, {"type": "text", "id": "RestLegAvailText", "fill": "$text-tertiary", "content": "Trống", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}]}, - {"type": "frame", "id": "RestLegOcc", "gap": 6, "alignItems": "center", "children": [{"type": "frame", "id": "RestLegOccDot", "width": 10, "height": 10, "fill": "#EF4444", "cornerRadius": 100}, {"type": "text", "id": "RestLegOccText", "fill": "$text-tertiary", "content": "Có khách", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}]}, - {"type": "frame", "id": "RestLegRes", "gap": 6, "alignItems": "center", "children": [{"type": "frame", "id": "RestLegResDot", "width": 10, "height": 10, "fill": "#F59E0B", "cornerRadius": 100}, {"type": "text", "id": "RestLegResText", "fill": "$text-tertiary", "content": "Đặt trước", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}]} - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "RestMainContent", - "name": "mainContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "RestHeader", - "name": "header", - "width": "fill_container", - "height": 64, - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "padding": [0, 24], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "RestHeaderTableInfo", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "RestTableBadge", "fill": "$orange-primary", "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "RestTableBadgeText", "fill": "$text-primary", "content": "Bàn 01", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"}]}, {"type": "frame", "id": "RestGuestInfo", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "RestGuestCount", "fill": "$text-primary", "content": "2 khách • 45 phút", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "RestWaiter", "fill": "$text-secondary", "content": "Phục vụ: Minh", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}, - {"type": "frame", "id": "RestSearchBox", "width": 360, "height": 44, "fill": "$bg-surface", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 16], "gap": 12, "alignItems": "center", "children": [{"type": "icon_font", "id": "RestSearchIcon", "width": 20, "height": 20, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "RestSearchPlaceholder", "fill": "$text-tertiary", "content": "Tìm món ăn, đồ uống...", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}]}, - {"type": "frame", "id": "RestHeaderRight", "gap": 16, "alignItems": "center", "children": [{"type": "frame", "id": "RestDateTime", "layout": "vertical", "gap": 2, "alignItems": "flex_end", "children": [{"type": "text", "id": "RestTime", "fill": "$text-primary", "content": "23:26", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, {"type": "text", "id": "RestDate", "fill": "$text-secondary", "content": "05/02/2026", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, {"type": "frame", "id": "RestUserAvatar", "width": 40, "height": 40, "fill": "#22C55E30", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestUserInit", "fill": "#22C55E", "content": "M", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]}]} - ] - }, - { - "type": "frame", - "id": "RestCategoryBar", - "name": "categoryBar", - "width": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "padding": [12, 24], - "gap": 12, - "children": [ - {"type": "frame", "id": "RestCatAll", "fill": "$orange-primary", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "RestCatAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, - {"type": "frame", "id": "RestCatAppetizer", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "RestCatAppetizerText", "fill": "$text-secondary", "content": "Khai vị", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "RestCatMain", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "RestCatMainText", "fill": "$text-secondary", "content": "Món chính", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "RestCatSeafood", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "RestCatSeafoodText", "fill": "$text-secondary", "content": "Hải sản", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "RestCatDrinks", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "RestCatDrinksText", "fill": "$text-secondary", "content": "Đồ uống", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "RestCatWine", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "RestCatWineIcon", "width": 14, "height": 14, "iconFontName": "wine", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "RestCatWineText", "fill": "$text-secondary", "content": "Rượu/Bia", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]} - ] - }, - { - "type": "frame", - "id": "RestProductArea", - "name": "productArea", - "width": "fill_container", - "height": "fill_container", - "padding": 24, - "gap": 20, - "wrap": true, - "alignContent": "flex_start", - "children": [ - {"type": "frame", "id": "RestProd1", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestProd1Img", "width": "fill_container", "height": 120, "fill": "#EF444418"}, {"type": "frame", "id": "RestProd1Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 14, "children": [{"type": "text", "id": "RestProd1Name", "fill": "$text-primary", "content": "Bò Lúc Lắc", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "RestProd1Price", "fill": "$orange-primary", "content": "185,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "RestProd2", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestProd2Img", "width": "fill_container", "height": 120, "fill": "#F59E0B18"}, {"type": "frame", "id": "RestProd2Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 14, "children": [{"type": "text", "id": "RestProd2Name", "fill": "$text-primary", "content": "Gà Nướng Mật Ong", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "RestProd2Price", "fill": "$orange-primary", "content": "165,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "RestProd3", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestProd3Img", "width": "fill_container", "height": 120, "fill": "#3B82F618"}, {"type": "frame", "id": "RestProd3Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 14, "children": [{"type": "text", "id": "RestProd3Name", "fill": "$text-primary", "content": "Cá Hồi Sốt Cam", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "RestProd3Price", "fill": "$orange-primary", "content": "220,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "RestProd4", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestProd4Img", "width": "fill_container", "height": 120, "fill": "#22C55E18"}, {"type": "frame", "id": "RestProd4Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 14, "children": [{"type": "text", "id": "RestProd4Name", "fill": "$text-primary", "content": "Salad Caesar", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "RestProd4Price", "fill": "$orange-primary", "content": "85,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "RestProd5", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestProd5Img", "width": "fill_container", "height": 120, "fill": "#8B5CF618"}, {"type": "frame", "id": "RestProd5Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 14, "children": [{"type": "text", "id": "RestProd5Name", "fill": "$text-primary", "content": "Rượu Vang Đỏ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "RestProd5Price", "fill": "$orange-primary", "content": "450,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "RestProd6", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestProd6Img", "width": "fill_container", "height": 120, "fill": "#F59E0B18"}, {"type": "frame", "id": "RestProd6Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 14, "children": [{"type": "text", "id": "RestProd6Name", "fill": "$text-primary", "content": "Bia Tiger", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "RestProd6Price", "fill": "$orange-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}]} - ] - }, - { - "type": "frame", - "id": "RestBottomBar", - "name": "bottomBar", - "width": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, - "padding": [12, 24], - "gap": 12, - "children": [ - {"type": "frame", "id": "RestQuickSplit", "height": 52, "fill": "$bg-interactive", "cornerRadius": 12, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "RestQuickSplitIcon", "width": 20, "height": 20, "iconFontName": "split", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "RestQuickSplitText", "fill": "$text-secondary", "content": "Tách bàn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "RestQuickMerge", "height": 52, "fill": "$bg-interactive", "cornerRadius": 12, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "RestQuickMergeIcon", "width": 20, "height": 20, "iconFontName": "merge", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "RestQuickMergeText", "fill": "$text-secondary", "content": "Gộp bàn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "RestQuickMove", "height": 52, "fill": "$bg-interactive", "cornerRadius": 12, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "RestQuickMoveIcon", "width": 20, "height": 20, "iconFontName": "move", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "RestQuickMoveText", "fill": "$text-secondary", "content": "Chuyển bàn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "RestQuickCustomer", "width": 52, "height": 52, "fill": "#14B8A620", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#14B8A6"}, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "RestQuickCustomerIcon", "width": 22, "height": 22, "iconFontName": "user-search", "iconFontFamily": "lucide", "fill": "#14B8A6"}]}, - {"type": "frame", "id": "RestQuickKitchen", "height": 52, "fill": "#22C55E", "cornerRadius": 12, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "RestQuickKitchenIcon", "width": 20, "height": 20, "iconFontName": "chef-hat", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "RestQuickKitchenText", "fill": "$text-primary", "content": "Gửi bếp", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]} - ] - } - ] - }, - { - "type": "frame", - "id": "RestOrderPanel", - "name": "orderPanel", - "width": 380, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, - "layout": "vertical", - "children": [ - {"type": "frame", "id": "RestOrderHeader", "width": "fill_container", "padding": [16, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "RestOrderInfo", "layout": "vertical", "gap": 4, "children": [{"type": "text", "id": "RestOrderNum", "fill": "$text-primary", "content": "Bàn 01 - Đơn #0089", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, {"type": "text", "id": "RestOrderItemsCount", "fill": "$text-secondary", "content": "4 món • 2 đang chờ bếp", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}]}, {"type": "frame", "id": "RestOrderMore", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "RestOrderMoreIcon", "width": 20, "height": 20, "iconFontName": "more-vertical", "iconFontFamily": "lucide", "fill": "$text-secondary"}]}]}, - {"type": "frame", "id": "RestCustomerSection", "width": "fill_container", "fill": "#14B8A610", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [10, 20], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "RestCustInfo", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "RestCustAvatar", "width": 32, "height": 32, "fill": "#14B8A630", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "RestCustAvatarIcon", "width": 16, "height": 16, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "#14B8A6"}]}, {"type": "frame", "id": "RestCustDetails", "layout": "vertical", "gap": 2, "children": [{"type": "frame", "id": "RestCustNameRow", "gap": 6, "alignItems": "center", "children": [{"type": "text", "id": "RestCustName", "fill": "$text-primary", "content": "Trần Văn B", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, {"type": "frame", "id": "RestCustVIP", "fill": "#C0C0C0", "cornerRadius": 4, "padding": [2, 5], "children": [{"type": "text", "id": "RestCustVIPText", "fill": "#000", "content": "Silver", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "700"}]}]}, {"type": "text", "id": "RestCustPhone", "fill": "$text-tertiary", "content": "1,250 điểm", "fontFamily": "Roboto", "fontSize": 11}]}]}, {"type": "frame", "id": "RestCustRemove", "width": 24, "height": 24, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "RestCustRemoveIcon", "width": 12, "height": 12, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-tertiary"}]}]}, - { - "type": "frame", - "id": "RestOrderItems", - "name": "orderItems", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "gap": 0, - "children": [ - {"type": "frame", "id": "RestOrdItem1", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "RestOrdItem1Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "RestOrdItem1Qty", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestOrdItem1QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, {"type": "frame", "id": "RestOrdItem1Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "RestOrdItem1Name", "fill": "$text-primary", "content": "Bò Lúc Lắc", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "RestOrdItem1Status", "fill": "#22C55E20", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "RestOrdItem1StatusText", "fill": "#22C55E", "content": "Đã phục vụ", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}]}]}, {"type": "text", "id": "RestOrdItem1Price", "fill": "$text-primary", "content": "185,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, - {"type": "frame", "id": "RestOrdItem2", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "RestOrdItem2Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "RestOrdItem2Qty", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestOrdItem2QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, {"type": "frame", "id": "RestOrdItem2Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "RestOrdItem2Name", "fill": "$text-primary", "content": "Gà Nướng Mật Ong", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "RestOrdItem2Status", "fill": "#F59E0B20", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "RestOrdItem2StatusText", "fill": "#F59E0B", "content": "Đang chờ bếp", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}]}]}, {"type": "text", "id": "RestOrdItem2Price", "fill": "$text-primary", "content": "165,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, - {"type": "frame", "id": "RestOrdItem3", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "RestOrdItem3Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "RestOrdItem3Qty", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestOrdItem3QtyText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, {"type": "frame", "id": "RestOrdItem3Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "RestOrdItem3Name", "fill": "$text-primary", "content": "Bia Tiger", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "RestOrdItem3Status", "fill": "#22C55E20", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "RestOrdItem3StatusText", "fill": "#22C55E", "content": "Đã phục vụ", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}]}]}, {"type": "text", "id": "RestOrdItem3Price", "fill": "$text-primary", "content": "70,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, - {"type": "frame", "id": "RestOrdItem4", "width": "fill_container", "padding": [14, 20], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "RestOrdItem4Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "RestOrdItem4Qty", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestOrdItem4QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, {"type": "frame", "id": "RestOrdItem4Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "RestOrdItem4Name", "fill": "$text-primary", "content": "Salad Caesar", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "RestOrdItem4Status", "fill": "#3B82F620", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "RestOrdItem4StatusText", "fill": "#3B82F6", "content": "Đang làm", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}]}]}, {"type": "text", "id": "RestOrdItem4Price", "fill": "$text-primary", "content": "85,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]} - ] - }, - {"type": "frame", "id": "RestOrderSummary", "width": "fill_container", "fill": "$bg-surface", "layout": "vertical", "padding": 20, "gap": 12, "children": [{"type": "frame", "id": "RestSummSubtotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RestSubtotalLabel", "fill": "$text-secondary", "content": "Tạm tính", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, {"type": "text", "id": "RestSubtotalValue", "fill": "$text-primary", "content": "505,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "RestSummService", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RestServiceLabel", "fill": "$text-secondary", "content": "Phí dịch vụ 5%", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, {"type": "text", "id": "RestServiceValue", "fill": "$text-primary", "content": "25,250₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "RestSummLoyalty", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "frame", "id": "RestLoyaltyLabelRow", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "RestLoyaltyIcon", "width": 14, "height": 14, "iconFontName": "coins", "iconFontFamily": "lucide", "fill": "#14B8A6"}, {"type": "text", "id": "RestLoyaltyLabel", "fill": "#14B8A6", "content": "Dùng 50 điểm", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "text", "id": "RestLoyaltyValue", "fill": "#14B8A6", "content": "-5,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "RestSummDivider", "width": "fill_container", "height": 1, "fill": "$border-subtle"}, {"type": "frame", "id": "RestSummTotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RestTotalLabel", "fill": "$text-primary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}, {"type": "text", "id": "RestTotalValue", "fill": "$orange-primary", "content": "525,250₫", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}]}]}, - {"type": "frame", "id": "RestPaymentBtn", "width": "fill_container", "height": 64, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "RestPaymentIcon", "width": 24, "height": 24, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "RestPaymentText", "fill": "$text-primary", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}]} - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "bg-surface": {"type": "color", "value": "#111113"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "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/restaurant/mobile.pen b/pencil-design/src/pages/tPOS/pos/restaurant/mobile.pen deleted file mode 100644 index a0f60cde..00000000 --- a/pencil-design/src/pages/tPOS/pos/restaurant/mobile.pen +++ /dev/null @@ -1,130 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "POSRestaurantMobile", - "name": "POS Restaurant Mobile", - "reusable": true, - "width": 390, - "height": 844, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "RestMobHeader", - "width": "fill_container", - "height": 56, - "fill": "$bg-elevated", - "padding": [0, 16], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "RestMobLeft", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "RestMobTableBadge", "fill": "$orange-primary", "cornerRadius": 8, "padding": [6, 10], "children": [{"type": "text", "id": "RestMobTableText", "fill": "$text-primary", "content": "Bàn 01", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, - {"type": "text", "id": "RestMobGuestInfo", "fill": "$text-secondary", "content": "2 khách", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "RestMobRight", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "RestMobKitchenBtn", "width": 40, "height": 40, "fill": "#22C55E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "RestMobKitchenIcon", "width": 20, "height": 20, "iconFontName": "chef-hat", "iconFontFamily": "lucide", "fill": "$text-primary"}]}, - {"type": "frame", "id": "RestMobCartBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RestMobCartIcon", "width": 20, "height": 20, "iconFontName": "shopping-cart", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "frame", "id": "RestMobCartBadge", "width": 18, "height": 18, "fill": "#F59E0B", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "position": "absolute", "top": -4, "right": -4, "children": [{"type": "text", "id": "RestMobCartBadgeText", "fill": "$text-primary", "content": "4", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}]} - ]}, - {"type": "frame", "id": "RestMobCustomerBtn", "width": 40, "height": 40, "fill": "#14B8A620", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "#14B8A6"}, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "RestMobCustomerIcon", "width": 18, "height": 18, "iconFontName": "user-search", "iconFontFamily": "lucide", "fill": "#14B8A6"}]} - ]} - ] - }, - { - "type": "frame", - "id": "RestMobSearch", - "width": "fill_container", - "padding": [12, 16], - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "children": [ - {"type": "frame", "id": "RestMobSearchBox", "width": "fill_container", "height": 44, "fill": "$bg-surface", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RestMobSearchIcon", "width": 20, "height": 20, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "RestMobSearchText", "fill": "$text-tertiary", "content": "Tìm món ăn, đồ uống...", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"} - ]} - ] - }, - { - "type": "frame", - "id": "RestMobCategories", - "width": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "padding": [10, 16], - "gap": 8, - "children": [ - {"type": "frame", "id": "RestMobCatAll", "fill": "$orange-primary", "cornerRadius": 100, "padding": [8, 14], "children": [{"type": "text", "id": "RestMobCatAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "RestMobCatMain", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 14], "children": [{"type": "text", "id": "RestMobCatMainText", "fill": "$text-secondary", "content": "Món chính", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "RestMobCatDrinks", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 14], "children": [{"type": "text", "id": "RestMobCatDrinksText", "fill": "$text-secondary", "content": "Đồ uống", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]} - ] - }, - { - "type": "frame", - "id": "RestMobProducts", - "width": "fill_container", - "height": "fill_container", - "padding": 12, - "layout": "vertical", - "gap": 12, - "clip": true, - "children": [ - {"type": "frame", "id": "RestMobProdRow1", "width": "fill_container", "gap": 12, "children": [ - {"type": "frame", "id": "RestMobProd1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestMobProd1Img", "width": "fill_container", "height": 100, "fill": "#EF444418"}, {"type": "frame", "id": "RestMobProd1Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "RestMobProd1Name", "fill": "$text-primary", "content": "Bò Lúc Lắc", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "RestMobProd1Price", "fill": "$orange-primary", "content": "185,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "RestMobProd2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestMobProd2Img", "width": "fill_container", "height": 100, "fill": "#F59E0B18"}, {"type": "frame", "id": "RestMobProd2Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "RestMobProd2Name", "fill": "$text-primary", "content": "Gà Nướng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "RestMobProd2Price", "fill": "$orange-primary", "content": "165,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]} - ]}, - {"type": "frame", "id": "RestMobProdRow2", "width": "fill_container", "gap": 12, "children": [ - {"type": "frame", "id": "RestMobProd3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestMobProd3Img", "width": "fill_container", "height": 100, "fill": "#3B82F618"}, {"type": "frame", "id": "RestMobProd3Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "RestMobProd3Name", "fill": "$text-primary", "content": "Cá Hồi Sốt Cam", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "RestMobProd3Price", "fill": "$orange-primary", "content": "220,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "RestMobProd4", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestMobProd4Img", "width": "fill_container", "height": 100, "fill": "#22C55E18"}, {"type": "frame", "id": "RestMobProd4Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "RestMobProd4Name", "fill": "$text-primary", "content": "Salad Caesar", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "RestMobProd4Price", "fill": "$orange-primary", "content": "85,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]} - ]}, - {"type": "frame", "id": "RestMobProdRow3", "width": "fill_container", "gap": 12, "children": [ - {"type": "frame", "id": "RestMobProd5", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestMobProd5Img", "width": "fill_container", "height": 100, "fill": "#8B5CF618"}, {"type": "frame", "id": "RestMobProd5Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "RestMobProd5Name", "fill": "$text-primary", "content": "Rượu Vang Đỏ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "RestMobProd5Price", "fill": "$orange-primary", "content": "450,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "RestMobProd6", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestMobProd6Img", "width": "fill_container", "height": 100, "fill": "#F59E0B18"}, {"type": "frame", "id": "RestMobProd6Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "RestMobProd6Name", "fill": "$text-primary", "content": "Bia Tiger", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "RestMobProd6Price", "fill": "$orange-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}]} - ]} - ] - }, - { - "type": "frame", - "id": "RestMobBottomBar", - "width": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, - "padding": [12, 16], - "gap": 12, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "RestMobCartSummary", "layout": "vertical", "gap": 2, "children": [ - {"type": "frame", "id": "RestMobCartStatus", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "RestMobCartItems", "fill": "$text-secondary", "content": "4 món", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}, - {"type": "frame", "id": "RestMobCartPending", "fill": "#F59E0B20", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "RestMobCartPendingText", "fill": "#F59E0B", "content": "2 chờ", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]} - ]}, - {"type": "text", "id": "RestMobCartTotal", "fill": "$text-primary", "content": "530,250₫", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, - {"type": "frame", "id": "RestMobLoyalty", "gap": 4, "alignItems": "center", "children": [{"type": "icon_font", "id": "RestMobLoyaltyIcon", "width": 12, "height": 12, "iconFontName": "coins", "iconFontFamily": "lucide", "fill": "#14B8A6"}, {"type": "text", "id": "RestMobLoyaltyText", "fill": "#14B8A6", "content": "-30,000₫", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}]} - ]}, - {"type": "frame", "id": "RestMobPayBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RestMobPayIcon", "width": 20, "height": 20, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "RestMobPayText", "fill": "$text-primary", "content": "Thanh toá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"}, - "bg-surface": {"type": "color", "value": "#111113"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/restaurant/tablet.pen b/pencil-design/src/pages/tPOS/pos/restaurant/tablet.pen deleted file mode 100644 index 6cedd464..00000000 --- a/pencil-design/src/pages/tPOS/pos/restaurant/tablet.pen +++ /dev/null @@ -1,132 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "POSRestaurantTablet", - "name": "POS Restaurant Tablet", - "reusable": true, - "width": 1024, - "height": 768, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "RestTabHeader", - "width": "fill_container", - "height": 56, - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "padding": [0, 16], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "RestTabLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "RestTabLogoIcon", "width": 36, "height": 36, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestTabLogoText", "fill": "$text-primary", "content": "G", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}]}, - {"type": "frame", "id": "RestTabTableBadge", "fill": "$orange-primary", "cornerRadius": 8, "padding": [6, 12], "children": [{"type": "text", "id": "RestTabTableText", "fill": "$text-primary", "content": "Bàn 01", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}, - {"type": "text", "id": "RestTabGuestInfo", "fill": "$text-secondary", "content": "2 khách • 45 phút", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "RestTabSearch", "width": 240, "height": 40, "fill": "$bg-surface", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 12], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RestTabSearchIcon", "width": 18, "height": 18, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "RestTabSearchText", "fill": "$text-tertiary", "content": "Tìm món...", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "RestTabRight", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "RestTabKitchenBtn", "height": 36, "fill": "#22C55E", "cornerRadius": 8, "padding": [0, 12], "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "RestTabKitchenIcon", "width": 16, "height": 16, "iconFontName": "chef-hat", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "RestTabKitchenText", "fill": "$text-primary", "content": "Gửi bếp", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, - {"type": "text", "id": "RestTabTime", "fill": "$text-primary", "content": "23:48", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - }, - { - "type": "frame", - "id": "RestTabCategories", - "width": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "padding": [10, 16], - "gap": 8, - "children": [ - {"type": "frame", "id": "RestTabCatAll", "fill": "$orange-primary", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "RestTabCatAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, - {"type": "frame", "id": "RestTabCatAppetizer", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "RestTabCatAppetizerText", "fill": "$text-secondary", "content": "Khai vị", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "RestTabCatMain", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "RestTabCatMainText", "fill": "$text-secondary", "content": "Món chính", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "RestTabCatSeafood", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "RestTabCatSeafoodText", "fill": "$text-secondary", "content": "Hải sản", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "RestTabCatDrinks", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "RestTabCatDrinksText", "fill": "$text-secondary", "content": "Đồ uống", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]} - ] - }, - { - "type": "frame", - "id": "RestTabMain", - "width": "fill_container", - "height": "fill_container", - "children": [ - { - "type": "frame", - "id": "RestTabProducts", - "width": "fill_container", - "height": "fill_container", - "padding": 16, - "layout": "vertical", - "gap": 12, - "clip": true, - "children": [ - {"type": "frame", "id": "RestTabProdRow1", "width": "fill_container", "gap": 12, "children": [ - {"type": "frame", "id": "RestTabProd1", "width": 140, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestTabProd1Img", "width": "fill_container", "height": 85, "fill": "#EF444418"}, {"type": "frame", "id": "RestTabProd1Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "RestTabProd1Name", "fill": "$text-primary", "content": "Bò Lúc Lắc", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "text", "id": "RestTabProd1Price", "fill": "$orange-primary", "content": "185,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "RestTabProd2", "width": 140, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestTabProd2Img", "width": "fill_container", "height": 85, "fill": "#F59E0B18"}, {"type": "frame", "id": "RestTabProd2Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "RestTabProd2Name", "fill": "$text-primary", "content": "Gà Nướng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "text", "id": "RestTabProd2Price", "fill": "$orange-primary", "content": "165,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "RestTabProd3", "width": 140, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestTabProd3Img", "width": "fill_container", "height": 85, "fill": "#3B82F618"}, {"type": "frame", "id": "RestTabProd3Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "RestTabProd3Name", "fill": "$text-primary", "content": "Cá Hồi", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "text", "id": "RestTabProd3Price", "fill": "$orange-primary", "content": "220,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "RestTabProd4", "width": 140, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestTabProd4Img", "width": "fill_container", "height": 85, "fill": "#22C55E18"}, {"type": "frame", "id": "RestTabProd4Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "RestTabProd4Name", "fill": "$text-primary", "content": "Salad", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "text", "id": "RestTabProd4Price", "fill": "$orange-primary", "content": "85,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]} - ]}, - {"type": "frame", "id": "RestTabProdRow2", "width": "fill_container", "gap": 12, "children": [ - {"type": "frame", "id": "RestTabProd5", "width": 140, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestTabProd5Img", "width": "fill_container", "height": 85, "fill": "#8B5CF618"}, {"type": "frame", "id": "RestTabProd5Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "RestTabProd5Name", "fill": "$text-primary", "content": "Rượu Vang", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "text", "id": "RestTabProd5Price", "fill": "$orange-primary", "content": "450,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "RestTabProd6", "width": 140, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "RestTabProd6Img", "width": "fill_container", "height": 85, "fill": "#F59E0B18"}, {"type": "frame", "id": "RestTabProd6Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "RestTabProd6Name", "fill": "$text-primary", "content": "Bia Tiger", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "text", "id": "RestTabProd6Price", "fill": "$orange-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]} - ]} - ] - }, - { - "type": "frame", - "id": "RestTabCart", - "width": 300, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, - "layout": "vertical", - "children": [ - {"type": "frame", "id": "RestTabCartHeader", "width": "fill_container", "padding": [12, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "RestTabCartTitle", "fill": "$text-primary", "content": "Đơn hàng #0089", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "frame", "id": "RestTabCartRight", "gap": 6, "alignItems": "center", "children": [{"type": "text", "id": "RestTabCartStatus", "fill": "#F59E0B", "content": "2 chờ bếp", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, {"type": "frame", "id": "RestTabCustomerBtn", "width": 28, "height": 28, "fill": "#14B8A620", "cornerRadius": 6, "stroke": {"thickness": 1, "fill": "#14B8A6"}, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "RestTabCustomerIcon", "width": 14, "height": 14, "iconFontName": "user-search", "iconFontFamily": "lucide", "fill": "#14B8A6"}]}]} - ]}, - {"type": "frame", "id": "RestTabCustomerSection", "width": "fill_container", "fill": "#14B8A610", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [8, 16], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "RestTabCustInfo", "gap": 6, "alignItems": "center", "children": [{"type": "frame", "id": "RestTabCustAvatar", "width": 24, "height": 24, "fill": "#14B8A630", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "RestTabCustIcon", "width": 12, "height": 12, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "#14B8A6"}]}, {"type": "frame", "id": "RestTabCustDetails", "layout": "vertical", "gap": 1, "children": [{"type": "text", "id": "RestTabCustName", "fill": "$text-primary", "content": "Trần Văn B", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}, {"type": "text", "id": "RestTabCustPoints", "fill": "$text-tertiary", "content": "Silver • 1,200 điểm", "fontFamily": "Roboto", "fontSize": 9}]}]}, {"type": "frame", "id": "RestTabCustRemove", "width": 18, "height": 18, "fill": "$bg-interactive", "cornerRadius": 4, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "RestTabCustRemoveIcon", "width": 9, "height": 9, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-tertiary"}]}]}, - {"type": "frame", "id": "RestTabCartItems", "width": "fill_container", "height": "fill_container", "layout": "vertical", "children": [ - {"type": "frame", "id": "RestTabCartItem1", "width": "fill_container", "padding": [10, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "RestTabCartItem1Left", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "RestTabCartItem1Qty", "width": 26, "height": 26, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestTabCartItem1QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, {"type": "frame", "id": "RestTabCartItem1Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "RestTabCartItem1Name", "fill": "$text-primary", "content": "Bò Lúc Lắc", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "frame", "id": "RestTabCartItem1Status", "fill": "#22C55E20", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "RestTabCartItem1StatusText", "fill": "#22C55E", "content": "Đã phục vụ", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "600"}]}]}]}, {"type": "text", "id": "RestTabCartItem1Price", "fill": "$text-primary", "content": "185,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "RestTabCartItem2", "width": "fill_container", "padding": [10, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "RestTabCartItem2Left", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "RestTabCartItem2Qty", "width": 26, "height": 26, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RestTabCartItem2QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, {"type": "frame", "id": "RestTabCartItem2Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "RestTabCartItem2Name", "fill": "$text-primary", "content": "Gà Nướng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "frame", "id": "RestTabCartItem2Status", "fill": "#F59E0B20", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "RestTabCartItem2StatusText", "fill": "#F59E0B", "content": "Chờ bếp", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "600"}]}]}]}, {"type": "text", "id": "RestTabCartItem2Price", "fill": "$text-primary", "content": "165,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]} - ]}, - {"type": "frame", "id": "RestTabCartSummary", "width": "fill_container", "fill": "$bg-surface", "layout": "vertical", "padding": 14, "gap": 6, "children": [ - {"type": "frame", "id": "RestTabCartSubtotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RestTabCartSubtotalLabel", "fill": "$text-secondary", "content": "Tạm tính", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}, {"type": "text", "id": "RestTabCartSubtotalValue", "fill": "$text-primary", "content": "505,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "RestTabCartService", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RestTabCartServiceLabel", "fill": "$text-secondary", "content": "Phí dịch vụ 5%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}, {"type": "text", "id": "RestTabCartServiceValue", "fill": "$text-primary", "content": "25,250₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "RestTabCartLoyalty", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "frame", "id": "RestTabLoyaltyRow", "gap": 4, "alignItems": "center", "children": [{"type": "icon_font", "id": "RestTabLoyaltyIcon", "width": 12, "height": 12, "iconFontName": "coins", "iconFontFamily": "lucide", "fill": "#14B8A6"}, {"type": "text", "id": "RestTabLoyaltyLabel", "fill": "#14B8A6", "content": "Dùng 300 điểm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, {"type": "text", "id": "RestTabLoyaltyValue", "fill": "#14B8A6", "content": "-30,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "RestTabCartTotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RestTabCartTotalLabel", "fill": "$text-primary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "text", "id": "RestTabCartTotalValue", "fill": "$orange-primary", "content": "530,250₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}]} - ]}, - {"type": "frame", "id": "RestTabPayBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RestTabPayIcon", "width": 18, "height": 18, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "RestTabPayText", "fill": "$text-primary", "content": "Thanh toá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"}, - "bg-surface": {"type": "color", "value": "#111113"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/restaurant/workflow/allergen-warning.pen b/pencil-design/src/pages/tPOS/pos/restaurant/workflow/allergen-warning.pen deleted file mode 100644 index e81c9a8f..00000000 --- a/pencil-design/src/pages/tPOS/pos/restaurant/workflow/allergen-warning.pen +++ /dev/null @@ -1,112 +0,0 @@ -{ - "version": "2.7", - "children": [ - { - "type": "frame", - "id": "AllergenWarningDialog", - "name": "Dialog/AllergenWarning", - "reusable": true, - "clip": true, - "width": 400, - "height": 560, - "fill": "$bg-elevated", - "cornerRadius": 24, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "AllergenHeader", - "width": "fill_container", - "padding": [16, 20], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "AllergenHeaderLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "AllergenIconBg", "width": 40, "height": 40, "fill": "#EF444420", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "AllergenIcon", "width": 20, "height": 20, "iconFontName": "triangle-alert", "iconFontFamily": "lucide", "fill": "#EF4444"} - ]}, - {"type": "text", "id": "AllergenTitle", "fill": "$text-primary", "content": "Cảnh báo dị ứng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "AllergenCloseBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "AllergenCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "AllergenContent", - "width": "fill_container", - "height": "fill_container", - "padding": 20, - "layout": "vertical", - "gap": 16, - "children": [ - {"type": "frame", "id": "AllergenWarningBanner", "width": "fill_container", "fill": "#EF444420", "cornerRadius": 14, "padding": 16, "layout": "vertical", "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "AllergenWarningIcon", "width": 36, "height": 36, "iconFontName": "octagon-alert", "iconFontFamily": "lucide", "fill": "#EF4444"}, - {"type": "text", "id": "AllergenWarningText", "fill": "#EF4444", "content": "Khách hàng có dị ứng!", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700", "textAlign": "center"}, - {"type": "text", "id": "AllergenWarningDesc", "fill": "$text-secondary", "content": "Vui lòng kiểm tra kỹ trước khi phục vụ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal", "textAlign": "center"} - ]}, - {"type": "frame", "id": "AllergenCustomerInfo", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "AllergenCustomerAvatar", "width": 44, "height": 44, "fill": "#8B5CF630", "cornerRadius": 22, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "AllergenCustomerInitial", "fill": "#8B5CF6", "content": "TL", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "AllergenCustomerText", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "AllergenCustomerName", "fill": "$text-primary", "content": "Trần Lan", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, - {"type": "text", "id": "AllergenCustomerTable", "fill": "$text-tertiary", "content": "Bàn 12 • Đơn #1847", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"} - ]} - ]}, - {"type": "frame", "id": "AllergenList", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ - {"type": "text", "id": "AllergenListLabel", "fill": "$text-secondary", "content": "Thành phần dị ứng:", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "AllergenTags", "width": "fill_container", "gap": 8, "children": [ - {"type": "frame", "id": "AllergenTag1", "fill": "#EF444420", "cornerRadius": 10, "padding": [8, 14], "gap": 6, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "AllergenTag1Icon", "width": 14, "height": 14, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#EF4444"}, - {"type": "text", "id": "AllergenTag1Text", "fill": "#EF4444", "content": "Đậu phộng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "AllergenTag2", "fill": "#EF444420", "cornerRadius": 10, "padding": [8, 14], "gap": 6, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "AllergenTag2Icon", "width": 14, "height": 14, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#EF4444"}, - {"type": "text", "id": "AllergenTag2Text", "fill": "#EF4444", "content": "Hải sản", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "AllergenAffectedItems", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 12, "padding": 12, "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "AllergenAffectedLabel", "fill": "$text-secondary", "content": "Món có thể bị ảnh hưởng:", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "frame", "id": "AllergenAffected1", "width": "fill_container", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "AllergenAffected1Dot", "width": 6, "height": 6, "fill": "#EF4444", "cornerRadius": 3}, - {"type": "text", "id": "AllergenAffected1Text", "fill": "$text-primary", "content": "Pad Thái (có đậu phộng)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "AllergenAffected2", "width": "fill_container", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "AllergenAffected2Dot", "width": 6, "height": 6, "fill": "#EF4444", "cornerRadius": 3}, - {"type": "text", "id": "AllergenAffected2Text", "fill": "$text-primary", "content": "Gỏi cuốn tôm (có hải sản)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"} - ]} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "AllergenFooter", - "width": "fill_container", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, - "padding": [16, 20], - "children": [ - {"type": "frame", "id": "AllergenAckBtn", "width": "fill_container", "height": 52, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#EF4444", "position": 0}, {"color": "#DC2626", "position": 1}]}, "cornerRadius": 12, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "AllergenAckIcon", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "AllergenAckText", "fill": "$text-primary", "content": "Đã hiểu, tiếp tục", "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/restaurant/workflow/course-timing.pen b/pencil-design/src/pages/tPOS/pos/restaurant/workflow/course-timing.pen deleted file mode 100644 index f82b4adc..00000000 --- a/pencil-design/src/pages/tPOS/pos/restaurant/workflow/course-timing.pen +++ /dev/null @@ -1,127 +0,0 @@ -{ - "version": "2.7", - "children": [ - { - "type": "frame", - "id": "CourseTimingDialog", - "name": "Dialog/CourseTiming", - "reusable": true, - "clip": true, - "width": 420, - "height": 500, - "fill": "$bg-elevated", - "cornerRadius": 24, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "CourseTimingHeader", - "width": "fill_container", - "padding": [16, 20], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "CourseTimingHeaderLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "CourseTimingIconBg", "width": 40, "height": 40, "fill": "#F59E0B20", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CourseTimingIcon", "width": 20, "height": 20, "iconFontName": "timer", "iconFontFamily": "lucide", "fill": "#F59E0B"} - ]}, - {"type": "text", "id": "CourseTimingTitle", "fill": "$text-primary", "content": "Thời gian lên món", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "CourseTimingCloseBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CourseTimingCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "CourseTimingContent", - "width": "fill_container", - "height": "fill_container", - "padding": 20, - "layout": "vertical", - "gap": 16, - "children": [ - {"type": "frame", "id": "CourseTimingTableInfo", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": [12, 16], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "CourseTimingTableLeft", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "CourseTimingTableIcon", "width": 36, "height": 36, "fill": "#3B82F620", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "CourseTimingTableNum", "fill": "#3B82F6", "content": "08", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} - ]}, - {"type": "text", "id": "CourseTimingTableText", "fill": "$text-primary", "content": "Bàn 08 • 6 khách", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "CourseTimingTableOrder", "fill": "$text-tertiary", "content": "Đơn #1852", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "CourseTimingList", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ - {"type": "text", "id": "CourseTimingListLabel", "fill": "$text-secondary", "content": "Thứ tự lên món", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "Course1", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "Course1Num", "width": 32, "height": 32, "fill": "#22C55E", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Course1NumText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "Course1Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "Course1Name", "fill": "$text-primary", "content": "Khai vị", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "Course1Items", "fill": "$text-tertiary", "content": "Gỏi cuốn, Súp hải sản", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "Course1Status", "fill": "#22C55E20", "cornerRadius": 8, "padding": [6, 10], "children": [ - {"type": "text", "id": "Course1StatusText", "fill": "#22C55E", "content": "Đã lên", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "Course2", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "stroke": {"thickness": 2, "fill": "#F59E0B"}, "children": [ - {"type": "frame", "id": "Course2Num", "width": 32, "height": 32, "fill": "#F59E0B", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Course2NumText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "Course2Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "Course2Name", "fill": "$text-primary", "content": "Món chính", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "Course2Items", "fill": "$text-tertiary", "content": "Bò lúc lắc, Cá nướng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "Course2Status", "fill": "#F59E0B20", "cornerRadius": 8, "padding": [6, 10], "children": [ - {"type": "text", "id": "Course2StatusText", "fill": "#F59E0B", "content": "Đang làm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "Course3", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "Course3Num", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Course3NumText", "fill": "$text-tertiary", "content": "3", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "Course3Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "Course3Name", "fill": "$text-primary", "content": "Tráng miệng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "Course3Items", "fill": "$text-tertiary", "content": "Chè, Trái cây", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "Course3Status", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [6, 10], "children": [ - {"type": "text", "id": "Course3StatusText", "fill": "$text-tertiary", "content": "Chờ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "CourseTimingFooter", - "width": "fill_container", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, - "gap": 12, - "padding": [16, 20], - "children": [ - {"type": "frame", "id": "CourseTimingFireBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#F59E0B", "position": 0}, {"color": "#D97706", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CourseTimingFireIcon", "width": 18, "height": 18, "iconFontName": "flame", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "CourseTimingFireText", "fill": "$text-primary", "content": "Fire món tiếp theo", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "CourseTimingDoneBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#22C55E", "position": 0}, {"color": "#16A34A", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CourseTimingDoneIcon", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "CourseTimingDoneText", "fill": "$text-primary", "content": "Đánh dấu đã lên", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/restaurant/workflow/eod-report.pen b/pencil-design/src/pages/tPOS/pos/restaurant/workflow/eod-report.pen deleted file mode 100644 index 85035951..00000000 --- a/pencil-design/src/pages/tPOS/pos/restaurant/workflow/eod-report.pen +++ /dev/null @@ -1,93 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "EODReportScreen", - "name": "Restaurant/End of Day Report", - "reusable": true, - "width": 1280, - "height": 900, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - {"type": "frame", "id": "EODHeader", "width": "fill_container", "height": 64, "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [0, 24], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "EODHeaderLeft", "gap": 16, "alignItems": "center", "children": [ - {"type": "frame", "id": "EODBackBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "EODBackIcon", "width": 20, "height": 20, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"}]}, - {"type": "text", "id": "EODTitle", "fill": "$text-primary", "content": "Báo cáo cuối ngày", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "EODInfo", "gap": 20, "alignItems": "center", "children": [ - {"type": "frame", "id": "EODDate", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [8, 14], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "EODDateIcon", "width": 16, "height": 16, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "EODDateText", "fill": "$text-primary", "content": "05/02/2026", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "EODShift", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [8, 14], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "EODShiftIcon", "width": 16, "height": 16, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "EODShiftText", "fill": "$text-primary", "content": "Ca: Tối (14h-22h)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "EODCashier", "gap": 8, "alignItems": "center", "children": [{"type": "frame", "id": "EODCashierAvatar", "width": 32, "height": 32, "fill": "#22C55E30", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "EODCashierInit", "fill": "#22C55E", "content": "M", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, {"type": "text", "id": "EODCashierName", "fill": "$text-primary", "content": "Minh", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]} - ]} - ]}, - {"type": "frame", "id": "EODBody", "width": "fill_container", "height": "fill_container", "padding": 24, "gap": 24, "children": [ - {"type": "frame", "id": "EODLeft", "width": "fill_container", "height": "fill_container", "layout": "vertical", "gap": 24, "children": [ - {"type": "frame", "id": "EODSummary", "width": "fill_container", "gap": 16, "children": [ - {"type": "frame", "id": "EODCard1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": 20, "layout": "vertical", "gap": 8, "children": [{"type": "frame", "id": "EODC1Top", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "EODC1Icon", "width": 40, "height": 40, "fill": "#22C55E20", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "EODC1IconFont", "width": 20, "height": 20, "iconFontName": "wallet", "iconFontFamily": "lucide", "fill": "#22C55E"}]}, {"type": "text", "id": "EODC1Label", "fill": "$text-secondary", "content": "Doanh thu", "fontFamily": "Roboto", "fontSize": 13}]}, {"type": "text", "id": "EODC1Value", "fill": "$text-primary", "content": "15,750,000₫", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, {"type": "frame", "id": "EODC1Change", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "EODC1Arrow", "width": 14, "height": 14, "iconFontName": "trending-up", "iconFontFamily": "lucide", "fill": "#22C55E"}, {"type": "text", "id": "EODC1Percent", "fill": "#22C55E", "content": "+12% vs TB", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}]}, - {"type": "frame", "id": "EODCard2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": 20, "layout": "vertical", "gap": 8, "children": [{"type": "frame", "id": "EODC2Top", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "EODC2Icon", "width": 40, "height": 40, "fill": "#3B82F620", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "EODC2IconFont", "width": 20, "height": 20, "iconFontName": "receipt", "iconFontFamily": "lucide", "fill": "#3B82F6"}]}, {"type": "text", "id": "EODC2Label", "fill": "$text-secondary", "content": "Số đơn hàng", "fontFamily": "Roboto", "fontSize": 13}]}, {"type": "text", "id": "EODC2Value", "fill": "$text-primary", "content": "48 đơn", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, {"type": "text", "id": "EODC2Sub", "fill": "$text-tertiary", "content": "TB: 328,000₫/đơn", "fontFamily": "Roboto", "fontSize": 12}]}, - {"type": "frame", "id": "EODCard3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": 20, "layout": "vertical", "gap": 8, "children": [{"type": "frame", "id": "EODC3Top", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "EODC3Icon", "width": 40, "height": 40, "fill": "#8B5CF620", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "EODC3IconFont", "width": 20, "height": 20, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "#8B5CF6"}]}, {"type": "text", "id": "EODC3Label", "fill": "$text-secondary", "content": "Số khách", "fontFamily": "Roboto", "fontSize": 13}]}, {"type": "text", "id": "EODC3Value", "fill": "$text-primary", "content": "156 khách", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, {"type": "text", "id": "EODC3Sub", "fill": "$text-tertiary", "content": "TB: 3.2 khách/bàn", "fontFamily": "Roboto", "fontSize": 12}]}, - {"type": "frame", "id": "EODCard4", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "#EF444440"}, "padding": 20, "layout": "vertical", "gap": 8, "children": [{"type": "frame", "id": "EODC4Top", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "EODC4Icon", "width": 40, "height": 40, "fill": "#EF444420", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "EODC4IconFont", "width": 20, "height": 20, "iconFontName": "rotate-ccw", "iconFontFamily": "lucide", "fill": "#EF4444"}]}, {"type": "text", "id": "EODC4Label", "fill": "$text-secondary", "content": "Void/Refund", "fontFamily": "Roboto", "fontSize": 13}]}, {"type": "text", "id": "EODC4Value", "fill": "#EF4444", "content": "-185,000₫", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, {"type": "text", "id": "EODC4Sub", "fill": "$text-tertiary", "content": "3 items", "fontFamily": "Roboto", "fontSize": 12}]} - ]}, - {"type": "frame", "id": "EODPayment", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": 20, "layout": "vertical", "gap": 16, "children": [ - {"type": "text", "id": "EODPayTitle", "fill": "$text-primary", "content": "Theo phương thức thanh toán", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, - {"type": "frame", "id": "EODPayCash", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "frame", "id": "EODPayCashRow", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "EODPayCashLabel", "fill": "$text-secondary", "content": "Tiền mặt", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "EODPayCashValue", "fill": "$text-primary", "content": "8,500,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, - {"type": "frame", "id": "EODPayCashBar", "width": "fill_container", "height": 8, "fill": "$bg-interactive", "cornerRadius": 4, "children": [{"type": "frame", "id": "EODPayCashFill", "width": 320, "height": 8, "fill": "#22C55E", "cornerRadius": 4}]} - ]}, - {"type": "frame", "id": "EODPayQR", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "frame", "id": "EODPayQRRow", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "EODPayQRLabel", "fill": "$text-secondary", "content": "QR/Chuyển khoản", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "EODPayQRValue", "fill": "$text-primary", "content": "4,250,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, - {"type": "frame", "id": "EODPayQRBar", "width": "fill_container", "height": 8, "fill": "$bg-interactive", "cornerRadius": 4, "children": [{"type": "frame", "id": "EODPayQRFill", "width": 160, "height": 8, "fill": "#3B82F6", "cornerRadius": 4}]} - ]}, - {"type": "frame", "id": "EODPayCard", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "frame", "id": "EODPayCardRow", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "EODPayCardLabel", "fill": "$text-secondary", "content": "Thẻ", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "EODPayCardValue", "fill": "$text-primary", "content": "3,000,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, - {"type": "frame", "id": "EODPayCardBar", "width": "fill_container", "height": 8, "fill": "$bg-interactive", "cornerRadius": 4, "children": [{"type": "frame", "id": "EODPayCardFill", "width": 112, "height": 8, "fill": "#8B5CF6", "cornerRadius": 4}]} - ]} - ]}, - {"type": "frame", "id": "EODTopItems", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": 20, "layout": "vertical", "gap": 12, "children": [ - {"type": "text", "id": "EODTopTitle", "fill": "$text-primary", "content": "Top bán chạy", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, - {"type": "frame", "id": "EODTop1", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "EODTop1Left", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "EODTop1Rank", "width": 24, "height": 24, "fill": "$orange-primary", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "EODTop1RankText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}]}, {"type": "text", "id": "EODTop1Name", "fill": "$text-primary", "content": "Bò Lúc Lắc (32)", "fontFamily": "Roboto", "fontSize": 13}]}, {"type": "text", "id": "EODTop1Value", "fill": "$text-secondary", "content": "5,920,000₫", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "frame", "id": "EODTop2", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "EODTop2Left", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "EODTop2Rank", "width": 24, "height": 24, "fill": "$bg-interactive", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "EODTop2RankText", "fill": "$text-secondary", "content": "2", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, {"type": "text", "id": "EODTop2Name", "fill": "$text-primary", "content": "Bia Tiger (85)", "fontFamily": "Roboto", "fontSize": 13}]}, {"type": "text", "id": "EODTop2Value", "fill": "$text-secondary", "content": "2,975,000₫", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "frame", "id": "EODTop3", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "EODTop3Left", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "EODTop3Rank", "width": 24, "height": 24, "fill": "$bg-interactive", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "EODTop3RankText", "fill": "$text-secondary", "content": "3", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, {"type": "text", "id": "EODTop3Name", "fill": "$text-primary", "content": "Gà Nướng MO (28)", "fontFamily": "Roboto", "fontSize": 13}]}, {"type": "text", "id": "EODTop3Value", "fill": "$text-secondary", "content": "4,620,000₫", "fontFamily": "Roboto", "fontSize": 13}]} - ]} - ]}, - {"type": "frame", "id": "EODRight", "width": 400, "height": "fill_container", "layout": "vertical", "gap": 16, "children": [ - {"type": "frame", "id": "EODCash", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "children": [ - {"type": "frame", "id": "EODCashHeader", "width": "fill_container", "fill": "$bg-surface", "cornerRadius": [16, 16, 0, 0], "padding": [14, 20], "children": [{"type": "text", "id": "EODCashTitle", "fill": "$text-primary", "content": "Đối chiếu tiền mặt", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}, - {"type": "frame", "id": "EODCashContent", "width": "fill_container", "layout": "vertical", "padding": 20, "gap": 12, "children": [ - {"type": "frame", "id": "EODCashRow1", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "EODCashL1", "fill": "$text-secondary", "content": "Tiền đầu ca:", "fontFamily": "Roboto", "fontSize": 14}, {"type": "text", "id": "EODCashV1", "fill": "$text-primary", "content": "2,000,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "EODCashRow2", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "EODCashL2", "fill": "#22C55E", "content": "+ Tiền mặt nhận:", "fontFamily": "Roboto", "fontSize": 14}, {"type": "text", "id": "EODCashV2", "fill": "#22C55E", "content": "8,500,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "EODCashRow3", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "EODCashL3", "fill": "#EF4444", "content": "- Chi tiêu:", "fontFamily": "Roboto", "fontSize": 14}, {"type": "text", "id": "EODCashV3", "fill": "#EF4444", "content": "500,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "EODCashDiv", "width": "fill_container", "height": 1, "fill": "$border-subtle"}, - {"type": "frame", "id": "EODCashRow4", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "EODCashL4", "fill": "$text-primary", "content": "= Tiền cuối ca:", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "text", "id": "EODCashV4", "fill": "$orange-primary", "content": "10,000,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"}]}, - {"type": "frame", "id": "EODCashDiv2", "width": "fill_container", "height": 1, "fill": "$border-subtle"}, - {"type": "frame", "id": "EODCashRow5", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "EODCashL5", "fill": "$text-secondary", "content": "Tiền thực đếm:", "fontFamily": "Roboto", "fontSize": 14}, {"type": "text", "id": "EODCashV5", "fill": "$text-primary", "content": "9,950,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "EODCashRow6", "width": "fill_container", "fill": "#F59E0B15", "cornerRadius": 10, "padding": [10, 14], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "EODCashL6Row", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "EODCashWarning", "width": 16, "height": 16, "iconFontName": "alert-triangle", "iconFontFamily": "lucide", "fill": "#F59E0B"}, {"type": "text", "id": "EODCashL6", "fill": "#F59E0B", "content": "Chênh lệch:", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "text", "id": "EODCashV6", "fill": "#F59E0B", "content": "-50,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]} - ]} - ]}, - {"type": "frame", "id": "EODActions", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "EODInputCash", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-default"}, "children": [{"type": "icon_font", "id": "EODInputIcon", "width": 18, "height": 18, "iconFontName": "calculator", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "EODInputText", "fill": "$text-secondary", "content": "Nhập tiền thực đếm", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "EODNote", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-default"}, "children": [{"type": "icon_font", "id": "EODNoteIcon", "width": 18, "height": 18, "iconFontName": "message-square", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "EODNoteText", "fill": "$text-secondary", "content": "Ghi chú ca", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "EODPrint", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-default"}, "children": [{"type": "icon_font", "id": "EODPrintIcon", "width": 18, "height": 18, "iconFontName": "printer", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "EODPrintText", "fill": "$text-secondary", "content": "In báo cáo", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]} - ]}, - {"type": "frame", "id": "EODCloseBtn", "width": "fill_container", "height": 56, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "EODCloseIcon", "width": 20, "height": 20, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "EODCloseText", "fill": "$text-primary", "content": "Xác nhận đóng ca", "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"}, - "bg-surface": {"type": "color", "value": "#111113"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/restaurant/workflow/kitchen-display.pen b/pencil-design/src/pages/tPOS/pos/restaurant/workflow/kitchen-display.pen deleted file mode 100644 index 8d69b020..00000000 --- a/pencil-design/src/pages/tPOS/pos/restaurant/workflow/kitchen-display.pen +++ /dev/null @@ -1,105 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "KitchenDisplay", - "name": "Restaurant/Kitchen Display", - "reusable": true, - "width": 1920, - "height": 1080, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "KitchenHeader", - "width": "fill_container", - "height": 80, - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "padding": [0, 40], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "KitchenLeft", "gap": 20, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "KitchenIcon", "width": 36, "height": 36, "iconFontName": "chef-hat", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "text", "id": "KitchenTitle", "fill": "$text-primary", "content": "MÀN HÌNH BẾP", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "KitchenStats", "gap": 32, "alignItems": "center", "children": [ - {"type": "frame", "id": "StatPending", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "StatPendingDot", "width": 16, "height": 16, "fill": "#F59E0B", "cornerRadius": 100}, {"type": "text", "id": "StatPendingText", "fill": "$text-primary", "content": "Chờ: 8", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}]}, - {"type": "frame", "id": "StatCooking", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "StatCookingDot", "width": 16, "height": 16, "fill": "#3B82F6", "cornerRadius": 100}, {"type": "text", "id": "StatCookingText", "fill": "$text-primary", "content": "Đang làm: 4", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}]} - ]}, - {"type": "text", "id": "KitchenTime", "fill": "$text-primary", "content": "00:10", "fontFamily": "Roboto", "fontSize": 36, "fontWeight": "700"} - ] - }, - { - "type": "frame", - "id": "KitchenGrid", - "width": "fill_container", - "height": "fill_container", - "padding": 32, - "gap": 24, - "children": [ - {"type": "frame", "id": "KitchenCol1", "width": "fill_container", "height": "fill_container", "layout": "vertical", "gap": 24, "children": [ - {"type": "frame", "id": "Order1", "width": "fill_container", "fill": "#F59E0B15", "cornerRadius": 20, "stroke": {"thickness": 3, "fill": "#F59E0B"}, "layout": "vertical", "clip": true, "children": [ - {"type": "frame", "id": "Order1Header", "width": "fill_container", "fill": "#F59E0B", "padding": [16, 20], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "Order1Table", "fill": "$text-primary", "content": "BÀN 01", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"}, {"type": "text", "id": "Order1Time", "fill": "$text-primary", "content": "5 phút", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}]}, - {"type": "frame", "id": "Order1Items", "width": "fill_container", "padding": 20, "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "Order1Item1", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "Order1Item1Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "Order1Item1Qty", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Order1Item1QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}]}, {"type": "text", "id": "Order1Item1Name", "fill": "$text-primary", "content": "Bò Lúc Lắc", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}]}, {"type": "frame", "id": "Order1Item1Status", "fill": "#F59E0B30", "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "Order1Item1StatusText", "fill": "#F59E0B", "content": "CHỜ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}]}, - {"type": "frame", "id": "Order1Item2", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "Order1Item2Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "Order1Item2Qty", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Order1Item2QtyText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}]}, {"type": "text", "id": "Order1Item2Name", "fill": "$text-primary", "content": "Cơm Trắng", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}]}, {"type": "frame", "id": "Order1Item2Status", "fill": "#F59E0B30", "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "Order1Item2StatusText", "fill": "#F59E0B", "content": "CHỜ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}]} - ]}, - {"type": "frame", "id": "Order1Actions", "width": "fill_container", "padding": [12, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "children": [ - {"type": "frame", "id": "Order1StartBtn", "width": "fill_container", "height": 48, "fill": "#3B82F6", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Order1StartText", "fill": "$text-primary", "content": "Bắt đầu làm", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]} - ]} - ]}, - {"type": "frame", "id": "Order2", "width": "fill_container", "fill": "#F59E0B15", "cornerRadius": 20, "stroke": {"thickness": 2, "fill": "#F59E0B"}, "layout": "vertical", "clip": true, "children": [ - {"type": "frame", "id": "Order2Header", "width": "fill_container", "fill": "#F59E0B", "padding": [16, 20], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "Order2Table", "fill": "$text-primary", "content": "BÀN 06", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"}, {"type": "text", "id": "Order2Time", "fill": "$text-primary", "content": "3 phút", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}]}, - {"type": "frame", "id": "Order2Items", "width": "fill_container", "padding": 20, "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "Order2Item1", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "Order2Item1Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "Order2Item1Qty", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Order2Item1QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}]}, {"type": "text", "id": "Order2Item1Name", "fill": "$text-primary", "content": "Cá Hồi Sốt Cam", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}]}, {"type": "frame", "id": "Order2Item1Status", "fill": "#F59E0B30", "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "Order2Item1StatusText", "fill": "#F59E0B", "content": "CHỜ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}]} - ]}, - {"type": "frame", "id": "Order2Actions", "width": "fill_container", "padding": [12, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "children": [ - {"type": "frame", "id": "Order2StartBtn", "width": "fill_container", "height": 48, "fill": "#3B82F6", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Order2StartText", "fill": "$text-primary", "content": "Bắt đầu làm", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]} - ]} - ]} - ]}, - {"type": "frame", "id": "KitchenCol2", "width": "fill_container", "height": "fill_container", "layout": "vertical", "gap": 24, "children": [ - {"type": "frame", "id": "Order3", "width": "fill_container", "fill": "#3B82F615", "cornerRadius": 20, "stroke": {"thickness": 3, "fill": "#3B82F6"}, "layout": "vertical", "clip": true, "children": [ - {"type": "frame", "id": "Order3Header", "width": "fill_container", "fill": "#3B82F6", "padding": [16, 20], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "Order3Table", "fill": "$text-primary", "content": "BÀN 07", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"}, {"type": "text", "id": "Order3Time", "fill": "$text-primary", "content": "8 phút", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}]}, - {"type": "frame", "id": "Order3Items", "width": "fill_container", "padding": 20, "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "Order3Item1", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "Order3Item1Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "Order3Item1Qty", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Order3Item1QtyText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}]}, {"type": "text", "id": "Order3Item1Name", "fill": "$text-primary", "content": "Gà Nướng Mật Ong", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}]}, {"type": "frame", "id": "Order3Item1Status", "fill": "#3B82F630", "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "Order3Item1StatusText", "fill": "#3B82F6", "content": "ĐANG LÀM", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}]}, - {"type": "frame", "id": "Order3Item2", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "Order3Item2Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "Order3Item2Qty", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Order3Item2QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}]}, {"type": "text", "id": "Order3Item2Name", "fill": "$text-primary", "content": "Salad Caesar", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}]}, {"type": "frame", "id": "Order3Item2Status", "fill": "#22C55E30", "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "Order3Item2StatusText", "fill": "#22C55E", "content": "XONG", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}]} - ]}, - {"type": "frame", "id": "Order3Actions", "width": "fill_container", "padding": [12, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "children": [ - {"type": "frame", "id": "Order3DoneBtn", "width": "fill_container", "height": 48, "fill": "#22C55E", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Order3DoneText", "fill": "$text-primary", "content": "Hoàn thành tất cả", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]} - ]} - ]} - ]}, - {"type": "frame", "id": "KitchenCol3", "width": "fill_container", "height": "fill_container", "layout": "vertical", "gap": 24, "children": [ - {"type": "frame", "id": "Order4", "width": "fill_container", "fill": "#22C55E15", "cornerRadius": 20, "stroke": {"thickness": 2, "fill": "#22C55E"}, "layout": "vertical", "clip": true, "children": [ - {"type": "frame", "id": "Order4Header", "width": "fill_container", "fill": "#22C55E", "padding": [16, 20], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "Order4Table", "fill": "$text-primary", "content": "BÀN 10", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"}, {"type": "text", "id": "Order4Status", "fill": "$text-primary", "content": "SẴN SÀNG", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}]}, - {"type": "frame", "id": "Order4Items", "width": "fill_container", "padding": 20, "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "Order4Item1", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "Order4Item1Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "Order4Item1Qty", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Order4Item1QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}]}, {"type": "text", "id": "Order4Item1Name", "fill": "$text-primary", "content": "Tôm Hùm Nướng", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}]}, {"type": "frame", "id": "Order4Item1Status", "fill": "#22C55E30", "cornerRadius": 8, "padding": [8, 14], "children": [{"type": "text", "id": "Order4Item1StatusText", "fill": "#22C55E", "content": "XONG", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}]} - ]}, - {"type": "frame", "id": "Order4Actions", "width": "fill_container", "padding": [12, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "gap": 12, "children": [ - {"type": "frame", "id": "Order4ServeBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Order4ServeText", "fill": "$text-primary", "content": "Đã phục vụ", "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/restaurant/workflow/menu-management.pen b/pencil-design/src/pages/tPOS/pos/restaurant/workflow/menu-management.pen deleted file mode 100644 index 21758925..00000000 --- a/pencil-design/src/pages/tPOS/pos/restaurant/workflow/menu-management.pen +++ /dev/null @@ -1,98 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "MenuManagementScreen", - "name": "Restaurant/Menu Management", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - {"type": "frame", "id": "MMHeader", "width": "fill_container", "height": 64, "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [0, 24], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "MMHeaderLeft", "gap": 16, "alignItems": "center", "children": [ - {"type": "frame", "id": "MMBackBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "MMBackIcon", "width": 20, "height": 20, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"}]}, - {"type": "text", "id": "MMTitle", "fill": "$text-primary", "content": "Quản lý Thực đơn", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "MMSearch", "width": 320, "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 16], "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MMSearchIcon", "width": 18, "height": 18, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "MMSearchText", "fill": "$text-tertiary", "content": "Tìm món ăn...", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "MMAddBtn", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 20], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MMAddIcon", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "MMAddText", "fill": "$text-primary", "content": "Thêm món", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "MMBody", "width": "fill_container", "height": "fill_container", "children": [ - {"type": "frame", "id": "MMSidebar", "width": 260, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", "padding": 16, "gap": 8, "children": [ - {"type": "text", "id": "MMCatTitle", "fill": "$text-secondary", "content": "Danh mục", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600", "padding": [0, 8]}, - {"type": "frame", "id": "MMCat1", "width": "fill_container", "fill": "$orange-primary", "cornerRadius": 10, "padding": [12, 14], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "MMCat1Left", "gap": 10, "alignItems": "center", "children": [{"type": "icon_font", "id": "MMCat1Icon", "width": 18, "height": 18, "iconFontName": "utensils", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "MMCat1Text", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, {"type": "frame", "id": "MMCat1Badge", "fill": "#FFFFFF30", "cornerRadius": 6, "padding": [4, 8], "children": [{"type": "text", "id": "MMCat1Count", "fill": "$text-primary", "content": "93", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}]}]}, - {"type": "frame", "id": "MMCat2", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [12, 14], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "MMCat2Left", "gap": 10, "alignItems": "center", "children": [{"type": "icon_font", "id": "MMCat2Icon", "width": 18, "height": 18, "iconFontName": "salad", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "MMCat2Text", "fill": "$text-secondary", "content": "Khai vị", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "text", "id": "MMCat2Count", "fill": "$text-tertiary", "content": "12", "fontFamily": "Roboto", "fontSize": 12}]}, - {"type": "frame", "id": "MMCat3", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [12, 14], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "MMCat3Left", "gap": 10, "alignItems": "center", "children": [{"type": "icon_font", "id": "MMCat3Icon", "width": 18, "height": 18, "iconFontName": "beef", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "MMCat3Text", "fill": "$text-secondary", "content": "Món chính", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "text", "id": "MMCat3Count", "fill": "$text-tertiary", "content": "25", "fontFamily": "Roboto", "fontSize": 12}]}, - {"type": "frame", "id": "MMCat4", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [12, 14], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "MMCat4Left", "gap": 10, "alignItems": "center", "children": [{"type": "icon_font", "id": "MMCat4Icon", "width": 18, "height": 18, "iconFontName": "fish", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "MMCat4Text", "fill": "$text-secondary", "content": "Hải sản", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "text", "id": "MMCat4Count", "fill": "$text-tertiary", "content": "18", "fontFamily": "Roboto", "fontSize": 12}]}, - {"type": "frame", "id": "MMCat5", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [12, 14], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "MMCat5Left", "gap": 10, "alignItems": "center", "children": [{"type": "icon_font", "id": "MMCat5Icon", "width": 18, "height": 18, "iconFontName": "wine", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "MMCat5Text", "fill": "$text-secondary", "content": "Đồ uống", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "text", "id": "MMCat5Count", "fill": "$text-tertiary", "content": "30", "fontFamily": "Roboto", "fontSize": 12}]}, - {"type": "frame", "id": "MMCat6", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [12, 14], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "MMCat6Left", "gap": 10, "alignItems": "center", "children": [{"type": "icon_font", "id": "MMCat6Icon", "width": 18, "height": 18, "iconFontName": "cake", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "MMCat6Text", "fill": "$text-secondary", "content": "Tráng miệng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "text", "id": "MMCat6Count", "fill": "$text-tertiary", "content": "8", "fontFamily": "Roboto", "fontSize": 12}]}, - {"type": "frame", "id": "MMDivider", "width": "fill_container", "height": 1, "fill": "$border-subtle"}, - {"type": "frame", "id": "MMAddCat", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-default", "style": "dashed"}, "children": [{"type": "icon_font", "id": "MMAddCatIcon", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "MMAddCatText", "fill": "$text-tertiary", "content": "Thêm nhóm", "fontFamily": "Roboto", "fontSize": 13}]} - ]}, - {"type": "frame", "id": "MMMainContent", "width": "fill_container", "height": "fill_container", "layout": "vertical", "children": [ - {"type": "frame", "id": "MMToolbar", "width": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [10, 24], "gap": 12, "children": [ - {"type": "frame", "id": "MM86Bulk", "height": 36, "fill": "#EF444420", "cornerRadius": 8, "padding": [0, 14], "gap": 6, "alignItems": "center", "stroke": {"thickness": 1, "fill": "#EF444450"}, "children": [{"type": "icon_font", "id": "MM86Icon", "width": 14, "height": 14, "iconFontName": "ban", "iconFontFamily": "lucide", "fill": "#EF4444"}, {"type": "text", "id": "MM86Text", "fill": "#EF4444", "content": "86 hàng loạt", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "MMUpdatePrice", "height": 36, "fill": "$bg-interactive", "cornerRadius": 8, "padding": [0, 14], "gap": 6, "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-default"}, "children": [{"type": "icon_font", "id": "MMPriceIcon", "width": 14, "height": 14, "iconFontName": "dollar-sign", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "MMPriceText", "fill": "$text-secondary", "content": "Cập nhật giá", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "MMImport", "height": 36, "fill": "$bg-interactive", "cornerRadius": 8, "padding": [0, 14], "gap": 6, "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-default"}, "children": [{"type": "icon_font", "id": "MMImportIcon", "width": 14, "height": 14, "iconFontName": "upload", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "MMImportText", "fill": "$text-secondary", "content": "Import/Export", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]} - ]}, - {"type": "frame", "id": "MMTable", "width": "fill_container", "height": "fill_container", "layout": "vertical", "children": [ - {"type": "frame", "id": "MMTableHeader", "width": "fill_container", "fill": "$bg-surface", "padding": [12, 24], "children": [ - {"type": "frame", "id": "MMTHCheck", "width": 40, "children": [{"type": "frame", "id": "MMTHCheckBox", "width": 18, "height": 18, "fill": "$bg-interactive", "cornerRadius": 4, "stroke": {"thickness": 1, "fill": "$border-default"}}]}, - {"type": "frame", "id": "MMTHImg", "width": 60, "children": [{"type": "text", "id": "MMTHImgText", "fill": "$text-tertiary", "content": "Hình", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "MMTHName", "width": "fill_container", "children": [{"type": "text", "id": "MMTHNameText", "fill": "$text-tertiary", "content": "Tên món", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "MMTHPrice", "width": 120, "children": [{"type": "text", "id": "MMTHPriceText", "fill": "$text-tertiary", "content": "Giá", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "MMTHStatus", "width": 100, "children": [{"type": "text", "id": "MMTHStatusText", "fill": "$text-tertiary", "content": "Trạng thái", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "MMTH86", "width": 80, "justifyContent": "center", "children": [{"type": "text", "id": "MMTH86Text", "fill": "$text-tertiary", "content": "86", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]} - ]}, - {"type": "frame", "id": "MMRow1", "width": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [12, 24], "alignItems": "center", "children": [ - {"type": "frame", "id": "MMR1Check", "width": 40, "children": [{"type": "frame", "id": "MMR1CheckBox", "width": 18, "height": 18, "fill": "$bg-interactive", "cornerRadius": 4, "stroke": {"thickness": 1, "fill": "$border-default"}}]}, - {"type": "frame", "id": "MMR1Img", "width": 48, "height": 48, "fill": "#EF444418", "cornerRadius": 8}, - {"type": "frame", "id": "MMR1Name", "width": "fill_container", "padding": [0, 12], "children": [{"type": "text", "id": "MMR1NameText", "fill": "$text-primary", "content": "Bò Lúc Lắc", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "MMR1Price", "width": 120, "children": [{"type": "text", "id": "MMR1PriceText", "fill": "$orange-primary", "content": "185,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, - {"type": "frame", "id": "MMR1Status", "width": 100, "children": [{"type": "frame", "id": "MMR1StatusBadge", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "MMR1StatusText", "fill": "#22C55E", "content": "Active", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "MMR186", "width": 80, "justifyContent": "center", "children": [{"type": "frame", "id": "MMR186Toggle", "width": 44, "height": 24, "fill": "$bg-interactive", "cornerRadius": 100, "padding": 2, "children": [{"type": "frame", "id": "MMR186Knob", "width": 20, "height": 20, "fill": "$text-tertiary", "cornerRadius": 100}]}]} - ]}, - {"type": "frame", "id": "MMRow2", "width": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [12, 24], "alignItems": "center", "children": [ - {"type": "frame", "id": "MMR2Check", "width": 40, "children": [{"type": "frame", "id": "MMR2CheckBox", "width": 18, "height": 18, "fill": "$bg-interactive", "cornerRadius": 4, "stroke": {"thickness": 1, "fill": "$border-default"}}]}, - {"type": "frame", "id": "MMR2Img", "width": 48, "height": 48, "fill": "#F59E0B18", "cornerRadius": 8}, - {"type": "frame", "id": "MMR2Name", "width": "fill_container", "padding": [0, 12], "children": [{"type": "text", "id": "MMR2NameText", "fill": "$text-primary", "content": "Gà Nướng Mật Ong", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "MMR2Price", "width": 120, "children": [{"type": "text", "id": "MMR2PriceText", "fill": "$orange-primary", "content": "165,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, - {"type": "frame", "id": "MMR2Status", "width": 100, "children": [{"type": "frame", "id": "MMR2StatusBadge", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "MMR2StatusText", "fill": "#22C55E", "content": "Active", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "MMR286", "width": 80, "justifyContent": "center", "children": [{"type": "frame", "id": "MMR286Toggle", "width": 44, "height": 24, "fill": "$bg-interactive", "cornerRadius": 100, "padding": 2, "children": [{"type": "frame", "id": "MMR286Knob", "width": 20, "height": 20, "fill": "$text-tertiary", "cornerRadius": 100}]}]} - ]}, - {"type": "frame", "id": "MMRow3", "width": "fill_container", "fill": "#EF444410", "stroke": {"thickness": 1, "fill": "#EF444430", "sides": ["bottom"]}, "padding": [12, 24], "alignItems": "center", "children": [ - {"type": "frame", "id": "MMR3Check", "width": 40, "children": [{"type": "frame", "id": "MMR3CheckBox", "width": 18, "height": 18, "fill": "#EF4444", "cornerRadius": 4, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "MMR3CheckIcon", "width": 12, "height": 12, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"}]}]}, - {"type": "frame", "id": "MMR3Img", "width": 48, "height": 48, "fill": "#8B5CF618", "cornerRadius": 8}, - {"type": "frame", "id": "MMR3Name", "width": "fill_container", "padding": [0, 12], "children": [{"type": "text", "id": "MMR3NameText", "fill": "$text-tertiary", "content": "Bò Hầm Rượu", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500", "textDecoration": "line-through"}]}, - {"type": "frame", "id": "MMR3Price", "width": 120, "children": [{"type": "text", "id": "MMR3PriceText", "fill": "$text-tertiary", "content": "195,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, - {"type": "frame", "id": "MMR3Status", "width": 100, "children": [{"type": "frame", "id": "MMR3StatusBadge", "fill": "#EF444420", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "MMR3StatusText", "fill": "#EF4444", "content": "86'd", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "MMR386", "width": 80, "justifyContent": "center", "children": [{"type": "frame", "id": "MMR386Toggle", "width": 44, "height": 24, "fill": "#EF4444", "cornerRadius": 100, "padding": 2, "justifyContent": "flex_end", "children": [{"type": "frame", "id": "MMR386Knob", "width": 20, "height": 20, "fill": "$text-primary", "cornerRadius": 100}]}]} - ]} - ]} - ]} - ]} - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "bg-surface": {"type": "color", "value": "#111113"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/restaurant/workflow/order-history.pen b/pencil-design/src/pages/tPOS/pos/restaurant/workflow/order-history.pen deleted file mode 100644 index be8b4f3b..00000000 --- a/pencil-design/src/pages/tPOS/pos/restaurant/workflow/order-history.pen +++ /dev/null @@ -1,112 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "OrderHistoryScreen", - "name": "Restaurant/Order History", - "reusable": true, - "width": 1280, - "height": 800, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - {"type": "frame", "id": "OHHeader", "width": "fill_container", "height": 64, "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [0, 24], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "OHHeaderLeft", "gap": 16, "alignItems": "center", "children": [ - {"type": "frame", "id": "OHBackBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "OHBackIcon", "width": 20, "height": 20, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"}]}, - {"type": "text", "id": "OHTitle", "fill": "$text-primary", "content": "Lịch sử đơn hàng", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "OHFilters", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "OHSearch", "width": 280, "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 16], "gap": 10, "alignItems": "center", "children": [{"type": "icon_font", "id": "OHSearchIcon", "width": 18, "height": 18, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "OHSearchText", "fill": "$text-tertiary", "content": "Tìm theo #đơn, khách...", "fontFamily": "Roboto", "fontSize": 14}]}, - {"type": "frame", "id": "OHDateRange", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [{"type": "icon_font", "id": "OHDateIcon", "width": 18, "height": 18, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "OHDateText", "fill": "$text-primary", "content": "05/02 - 05/02", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "icon_font", "id": "OHDateChev", "width": 14, "height": 14, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"}]}, - {"type": "frame", "id": "OHStatusFilter", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "gap": 8, "alignItems": "center", "children": [{"type": "text", "id": "OHStatusText", "fill": "$text-primary", "content": "Tất cả trạng thái", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "icon_font", "id": "OHStatusChev", "width": 14, "height": 14, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"}]}, - {"type": "frame", "id": "OHExport", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 14], "gap": 8, "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-default"}, "children": [{"type": "icon_font", "id": "OHExportIcon", "width": 18, "height": 18, "iconFontName": "download", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "OHExportText", "fill": "$text-secondary", "content": "Export", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]} - ]} - ]}, - {"type": "frame", "id": "OHStats", "width": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [12, 24], "gap": 24, "children": [ - {"type": "frame", "id": "OHStat1", "gap": 8, "alignItems": "center", "children": [{"type": "text", "id": "OHStat1Label", "fill": "$text-secondary", "content": "Tổng đơn:", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "OHStat1Value", "fill": "$text-primary", "content": "156", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}, - {"type": "frame", "id": "OHStat2", "gap": 8, "alignItems": "center", "children": [{"type": "text", "id": "OHStat2Label", "fill": "$text-secondary", "content": "Hoàn tất:", "fontFamily": "Roboto", "fontSize": 13}, {"type": "frame", "id": "OHStat2Badge", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 8], "children": [{"type": "text", "id": "OHStat2Value", "fill": "#22C55E", "content": "148", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "OHStat3", "gap": 8, "alignItems": "center", "children": [{"type": "text", "id": "OHStat3Label", "fill": "$text-secondary", "content": "Hủy:", "fontFamily": "Roboto", "fontSize": 13}, {"type": "frame", "id": "OHStat3Badge", "fill": "#EF444420", "cornerRadius": 6, "padding": [4, 8], "children": [{"type": "text", "id": "OHStat3Value", "fill": "#EF4444", "content": "5", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "OHStat4", "gap": 8, "alignItems": "center", "children": [{"type": "text", "id": "OHStat4Label", "fill": "$text-secondary", "content": "Refund:", "fontFamily": "Roboto", "fontSize": 13}, {"type": "frame", "id": "OHStat4Badge", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [4, 8], "children": [{"type": "text", "id": "OHStat4Value", "fill": "#F59E0B", "content": "3", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]} - ]}, - {"type": "frame", "id": "OHTable", "width": "fill_container", "height": "fill_container", "layout": "vertical", "children": [ - {"type": "frame", "id": "OHTableHeader", "width": "fill_container", "fill": "$bg-surface", "padding": [14, 24], "children": [ - {"type": "frame", "id": "OHTHOrder", "width": 120, "children": [{"type": "text", "id": "OHTHOrderText", "fill": "$text-tertiary", "content": "Mã đơn", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "OHTHTable", "width": 80, "children": [{"type": "text", "id": "OHTHTableText", "fill": "$text-tertiary", "content": "Bàn", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "OHTHCustomer", "width": "fill_container", "children": [{"type": "text", "id": "OHTHCustomerText", "fill": "$text-tertiary", "content": "Khách hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "OHTHItems", "width": 80, "children": [{"type": "text", "id": "OHTHItemsText", "fill": "$text-tertiary", "content": "Items", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "OHTHTotal", "width": 140, "children": [{"type": "text", "id": "OHTHTotalText", "fill": "$text-tertiary", "content": "Tổng tiền", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "OHTHPayment", "width": 100, "children": [{"type": "text", "id": "OHTHPaymentText", "fill": "$text-tertiary", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "OHTHTime", "width": 100, "children": [{"type": "text", "id": "OHTHTimeText", "fill": "$text-tertiary", "content": "Thời gian", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "OHTHStatus", "width": 100, "children": [{"type": "text", "id": "OHTHStatusText", "fill": "$text-tertiary", "content": "Trạng thái", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]} - ]}, - {"type": "frame", "id": "OHRow1", "width": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [14, 24], "alignItems": "center", "children": [ - {"type": "frame", "id": "OHR1Order", "width": 120, "children": [{"type": "text", "id": "OHR1OrderText", "fill": "$orange-primary", "content": "#0092", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, - {"type": "frame", "id": "OHR1Table", "width": 80, "children": [{"type": "frame", "id": "OHR1TableBadge", "fill": "$bg-interactive", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "OHR1TableText", "fill": "$text-primary", "content": "Bàn 05", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}]}, - {"type": "frame", "id": "OHR1Customer", "width": "fill_container", "children": [{"type": "text", "id": "OHR1CustomerText", "fill": "$text-primary", "content": "Nguyễn Minh Quang", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "OHR1Items", "width": 80, "children": [{"type": "text", "id": "OHR1ItemsText", "fill": "$text-secondary", "content": "6 món", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "frame", "id": "OHR1Total", "width": 140, "children": [{"type": "text", "id": "OHR1TotalText", "fill": "$text-primary", "content": "785,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, - {"type": "frame", "id": "OHR1Payment", "width": 100, "children": [{"type": "frame", "id": "OHR1PayBadge", "fill": "#3B82F620", "cornerRadius": 6, "padding": [4, 8], "gap": 4, "alignItems": "center", "children": [{"type": "icon_font", "id": "OHR1PayIcon", "width": 12, "height": 12, "iconFontName": "qr-code", "iconFontFamily": "lucide", "fill": "#3B82F6"}, {"type": "text", "id": "OHR1PayText", "fill": "#3B82F6", "content": "QR", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "OHR1Time", "width": 100, "children": [{"type": "text", "id": "OHR1TimeText", "fill": "$text-secondary", "content": "20:15", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "frame", "id": "OHR1Status", "width": 100, "children": [{"type": "frame", "id": "OHR1StatusBadge", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "OHR1StatusText", "fill": "#22C55E", "content": "Hoàn tất", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]} - ]}, - {"type": "frame", "id": "OHRow2", "width": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [14, 24], "alignItems": "center", "children": [ - {"type": "frame", "id": "OHR2Order", "width": 120, "children": [{"type": "text", "id": "OHR2OrderText", "fill": "$orange-primary", "content": "#0091", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, - {"type": "frame", "id": "OHR2Table", "width": 80, "children": [{"type": "frame", "id": "OHR2TableBadge", "fill": "$bg-interactive", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "OHR2TableText", "fill": "$text-primary", "content": "Bàn 08", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}]}, - {"type": "frame", "id": "OHR2Customer", "width": "fill_container", "children": [{"type": "text", "id": "OHR2CustomerText", "fill": "$text-primary", "content": "Trần Văn Hùng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "OHR2Items", "width": 80, "children": [{"type": "text", "id": "OHR2ItemsText", "fill": "$text-secondary", "content": "4 món", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "frame", "id": "OHR2Total", "width": 140, "children": [{"type": "text", "id": "OHR2TotalText", "fill": "$text-primary", "content": "520,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, - {"type": "frame", "id": "OHR2Payment", "width": 100, "children": [{"type": "frame", "id": "OHR2PayBadge", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 8], "gap": 4, "alignItems": "center", "children": [{"type": "icon_font", "id": "OHR2PayIcon", "width": 12, "height": 12, "iconFontName": "banknote", "iconFontFamily": "lucide", "fill": "#22C55E"}, {"type": "text", "id": "OHR2PayText", "fill": "#22C55E", "content": "Cash", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "OHR2Time", "width": 100, "children": [{"type": "text", "id": "OHR2TimeText", "fill": "$text-secondary", "content": "20:02", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "frame", "id": "OHR2Status", "width": 100, "children": [{"type": "frame", "id": "OHR2StatusBadge", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "OHR2StatusText", "fill": "#22C55E", "content": "Hoàn tất", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]} - ]}, - {"type": "frame", "id": "OHRow3", "width": "fill_container", "fill": "#EF444410", "stroke": {"thickness": 1, "fill": "#EF444430", "sides": ["bottom"]}, "padding": [14, 24], "alignItems": "center", "children": [ - {"type": "frame", "id": "OHR3Order", "width": 120, "children": [{"type": "text", "id": "OHR3OrderText", "fill": "$text-tertiary", "content": "#0090", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, - {"type": "frame", "id": "OHR3Table", "width": 80, "children": [{"type": "frame", "id": "OHR3TableBadge", "fill": "$bg-interactive", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "OHR3TableText", "fill": "$text-secondary", "content": "Bàn 02", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}]}, - {"type": "frame", "id": "OHR3Customer", "width": "fill_container", "children": [{"type": "text", "id": "OHR3CustomerText", "fill": "$text-secondary", "content": "Lê Thị Hoa", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "OHR3Items", "width": 80, "children": [{"type": "text", "id": "OHR3ItemsText", "fill": "$text-tertiary", "content": "2 món", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "frame", "id": "OHR3Total", "width": 140, "children": [{"type": "text", "id": "OHR3TotalText", "fill": "$text-tertiary", "content": "185,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600", "textDecoration": "line-through"}]}, - {"type": "frame", "id": "OHR3Payment", "width": 100, "children": [{"type": "text", "id": "OHR3PayText", "fill": "$text-tertiary", "content": "-", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "frame", "id": "OHR3Time", "width": 100, "children": [{"type": "text", "id": "OHR3TimeText", "fill": "$text-tertiary", "content": "19:48", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "frame", "id": "OHR3Status", "width": 100, "children": [{"type": "frame", "id": "OHR3StatusBadge", "fill": "#EF444420", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "OHR3StatusText", "fill": "#EF4444", "content": "Đã hủy", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]} - ]}, - {"type": "frame", "id": "OHRow4", "width": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [14, 24], "alignItems": "center", "children": [ - {"type": "frame", "id": "OHR4Order", "width": 120, "children": [{"type": "text", "id": "OHR4OrderText", "fill": "$orange-primary", "content": "#0089", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, - {"type": "frame", "id": "OHR4Table", "width": 80, "children": [{"type": "frame", "id": "OHR4TableBadge", "fill": "$bg-interactive", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "OHR4TableText", "fill": "$text-primary", "content": "Bàn 03", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}]}, - {"type": "frame", "id": "OHR4Customer", "width": "fill_container", "children": [{"type": "text", "id": "OHR4CustomerText", "fill": "$text-primary", "content": "Nguyễn Văn A", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "OHR4Items", "width": 80, "children": [{"type": "text", "id": "OHR4ItemsText", "fill": "$text-secondary", "content": "8 món", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "frame", "id": "OHR4Total", "width": 140, "children": [{"type": "text", "id": "OHR4TotalText", "fill": "$text-primary", "content": "1,253,500₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, - {"type": "frame", "id": "OHR4Payment", "width": 100, "children": [{"type": "frame", "id": "OHR4PayBadge", "fill": "#8B5CF620", "cornerRadius": 6, "padding": [4, 8], "gap": 4, "alignItems": "center", "children": [{"type": "icon_font", "id": "OHR4PayIcon", "width": 12, "height": 12, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "#8B5CF6"}, {"type": "text", "id": "OHR4PayText", "fill": "#8B5CF6", "content": "Card", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "OHR4Time", "width": 100, "children": [{"type": "text", "id": "OHR4TimeText", "fill": "$text-secondary", "content": "19:30", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "frame", "id": "OHR4Status", "width": 100, "children": [{"type": "frame", "id": "OHR4StatusBadge", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "OHR4StatusText", "fill": "#22C55E", "content": "Hoàn tất", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]} - ]} - ]}, - {"type": "frame", "id": "OHFooter", "width": "fill_container", "height": 56, "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "padding": [0, 24], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "OHFooterInfo", "fill": "$text-secondary", "content": "Hiển thị 1-10 của 156 đơn", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "frame", "id": "OHPagination", "gap": 8, "children": [ - {"type": "frame", "id": "OHPrev", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "OHPrevIcon", "width": 16, "height": 16, "iconFontName": "chevron-left", "iconFontFamily": "lucide", "fill": "$text-tertiary"}]}, - {"type": "frame", "id": "OHPage1", "width": 36, "height": 36, "fill": "$orange-primary", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "OHPage1Text", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, - {"type": "frame", "id": "OHPage2", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "OHPage2Text", "fill": "$text-secondary", "content": "2", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "frame", "id": "OHPage3", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "OHPage3Text", "fill": "$text-secondary", "content": "3", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "frame", "id": "OHDots", "width": 36, "height": 36, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "OHDotsText", "fill": "$text-tertiary", "content": "...", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "frame", "id": "OHPage16", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "OHPage16Text", "fill": "$text-secondary", "content": "16", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "frame", "id": "OHNext", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "OHNextIcon", "width": 16, "height": 16, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-secondary"}]} - ]} - ]} - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "bg-surface": {"type": "color", "value": "#111113"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/restaurant/workflow/order-note.pen b/pencil-design/src/pages/tPOS/pos/restaurant/workflow/order-note.pen deleted file mode 100644 index f80360c3..00000000 --- a/pencil-design/src/pages/tPOS/pos/restaurant/workflow/order-note.pen +++ /dev/null @@ -1,94 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "OrderNoteDialog", - "name": "Dialog/Order Note", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "#0A0A0B80", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "NoteModal", - "width": 440, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 20, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "NoteHeader", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "NoteHeaderLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "NoteIcon", "width": 44, "height": 44, "fill": "#EC48991A", "cornerRadius": 22, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "NoteIconI", "width": 22, "height": 22, "iconFontName": "message-square", "iconFontFamily": "lucide", "fill": "#EC4899"} - ]}, - {"type": "frame", "id": "NoteTitleBlock", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "NoteTitle", "fill": "#FFFFFF", "content": "Ghi chú cho bếp", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}, - {"type": "text", "id": "NoteItem", "fill": "#8B8B90", "content": "Phở bò tái chín", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "NoteClose", "width": 32, "height": 32, "fill": "#2A2A2E", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "NoteCloseIcon", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#8B8B90"} - ]} - ] - }, - { - "type": "frame", - "id": "NoteQuickTags", - "width": "fill_container", - "layout": "vertical", - "gap": 10, - "children": [ - {"type": "text", "id": "NoteQuickLabel", "fill": "#8B8B90", "content": "Ghi chú nhanh", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "frame", "id": "NoteQuickRow1", "width": "fill_container", "gap": 8, "children": [ - {"type": "frame", "id": "NoteTag1", "fill": "#EC48991A", "stroke": {"thickness": 1, "fill": "#EC4899"}, "cornerRadius": 8, "padding": [8, 12], "children": [{"type": "text", "id": "NoteTag1T", "fill": "#EC4899", "content": "Không hành", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "NoteTag2", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [8, 12], "children": [{"type": "text", "id": "NoteTag2T", "fill": "#8B8B90", "content": "Ít cay", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "NoteTag3", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [8, 12], "children": [{"type": "text", "id": "NoteTag3T", "fill": "#8B8B90", "content": "Cay nhiều", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]} - ]}, - {"type": "frame", "id": "NoteQuickRow2", "width": "fill_container", "gap": 8, "children": [ - {"type": "frame", "id": "NoteTag4", "fill": "#EC48991A", "stroke": {"thickness": 1, "fill": "#EC4899"}, "cornerRadius": 8, "padding": [8, 12], "children": [{"type": "text", "id": "NoteTag4T", "fill": "#EC4899", "content": "Không ngò", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "NoteTag5", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [8, 12], "children": [{"type": "text", "id": "NoteTag5T", "fill": "#8B8B90", "content": "Chín kỹ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "NoteTag6", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [8, 12], "children": [{"type": "text", "id": "NoteTag6T", "fill": "#8B8B90", "content": "Tái", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]} - ]}, - {"type": "frame", "id": "NoteQuickRow3", "width": "fill_container", "gap": 8, "children": [ - {"type": "frame", "id": "NoteTag7", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [8, 12], "children": [{"type": "text", "id": "NoteTag7T", "fill": "#8B8B90", "content": "Không đá", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "NoteTag8", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [8, 12], "children": [{"type": "text", "id": "NoteTag8T", "fill": "#8B8B90", "content": "Thêm rau", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "NoteTag9", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [8, 12], "children": [{"type": "text", "id": "NoteTag9T", "fill": "#8B8B90", "content": "Dị ứng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]} - ]} - ] - }, - { - "type": "frame", - "id": "NoteTextArea", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - {"type": "text", "id": "NoteTextLabel", "fill": "#8B8B90", "content": "Ghi chú thêm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "frame", "id": "NoteInput", "width": "fill_container", "height": 100, "fill": "#1A1A1D", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "padding": 14, "layout": "vertical", "children": [ - {"type": "text", "id": "NoteInputText", "fill": "#FFFFFF", "content": "Không hành, không ngò. Thêm giá sống.", "fontFamily": "Roboto", "fontSize": 14, "lineHeight": 1.5} - ]} - ] - }, - {"type": "frame", "id": "NoteActions", "width": "fill_container", "gap": 12, "children": [ - {"type": "frame", "id": "NoteCancel", "width": "fill_container", "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NoteCancelT", "fill": "#ADADB0", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "NoteConfirm", "width": "fill_container", "height": 48, "fill": "#EC4899", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "NoteConfirmIcon", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFF"}, {"type": "text", "id": "NoteConfirmT", "fill": "#FFF", "content": "Lưu ghi chú", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]} - ]} - ] - } - ] - } - ] -} diff --git a/pencil-design/src/pages/tPOS/pos/restaurant/workflow/reservation.pen b/pencil-design/src/pages/tPOS/pos/restaurant/workflow/reservation.pen deleted file mode 100644 index c9a55a5b..00000000 --- a/pencil-design/src/pages/tPOS/pos/restaurant/workflow/reservation.pen +++ /dev/null @@ -1,105 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "ReservationScreen", - "name": "Restaurant/Reservation Management", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - {"type": "frame", "id": "ResHeader", "width": "fill_container", "height": 64, "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [0, 24], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "ResHeaderLeft", "gap": 16, "alignItems": "center", "children": [ - {"type": "frame", "id": "ResBackBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "ResBackIcon", "width": 20, "height": 20, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"}]}, - {"type": "text", "id": "ResTitle", "fill": "$text-primary", "content": "Quản lý Đặt bàn", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "ResDatePicker", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 16], "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ResCalIcon", "width": 18, "height": 18, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "ResDateText", "fill": "$text-primary", "content": "05/02/2026", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "icon_font", "id": "ResDateArrow", "width": 16, "height": 16, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]}, - {"type": "frame", "id": "ResAddBtn", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 20], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ResAddIcon", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "ResAddText", "fill": "$text-primary", "content": "Đặt bàn mới", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "ResBody", "width": "fill_container", "height": "fill_container", "children": [ - {"type": "frame", "id": "ResSidebar", "width": 280, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, "layout": "vertical", "padding": 20, "gap": 20, "children": [ - {"type": "frame", "id": "ResQuickFilters", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ - {"type": "text", "id": "ResFilterTitle", "fill": "$text-secondary", "content": "Lọc nhanh", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "frame", "id": "ResFilterToday", "width": "fill_container", "fill": "$orange-primary", "cornerRadius": 10, "padding": [12, 16], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "ResFTLeft", "gap": 10, "alignItems": "center", "children": [{"type": "icon_font", "id": "ResFTIcon", "width": 18, "height": 18, "iconFontName": "calendar-check", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "ResFTText", "fill": "$text-primary", "content": "Hôm nay", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, - {"type": "frame", "id": "ResFTBadge", "fill": "#FFFFFF30", "cornerRadius": 6, "padding": [4, 8], "children": [{"type": "text", "id": "ResFTCount", "fill": "$text-primary", "content": "5", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}]} - ]}, - {"type": "frame", "id": "ResFilterTomorrow", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [12, 16], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "ResF2Left", "gap": 10, "alignItems": "center", "children": [{"type": "icon_font", "id": "ResF2Icon", "width": 18, "height": 18, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "ResF2Text", "fill": "$text-secondary", "content": "Ngày mai", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "ResF2Badge", "fill": "$bg-surface", "cornerRadius": 6, "padding": [4, 8], "children": [{"type": "text", "id": "ResF2Count", "fill": "$text-secondary", "content": "3", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]} - ]}, - {"type": "frame", "id": "ResFilterWeek", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [12, 16], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "ResF3Left", "gap": 10, "alignItems": "center", "children": [{"type": "icon_font", "id": "ResF3Icon", "width": 18, "height": 18, "iconFontName": "calendar-range", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "ResF3Text", "fill": "$text-secondary", "content": "Tuần này", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "ResF3Badge", "fill": "$bg-surface", "cornerRadius": 6, "padding": [4, 8], "children": [{"type": "text", "id": "ResF3Count", "fill": "$text-secondary", "content": "12", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]} - ]} - ]}, - {"type": "frame", "id": "ResDivider1", "width": "fill_container", "height": 1, "fill": "$border-subtle"}, - {"type": "frame", "id": "ResStatusFilters", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ - {"type": "text", "id": "ResStatusTitle", "fill": "$text-secondary", "content": "Trạng thái", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "frame", "id": "ResStatusConfirmed", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "ResCheck1", "width": 20, "height": 20, "fill": "#22C55E", "cornerRadius": 4, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "ResCheck1Icon", "width": 12, "height": 12, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"}]}, {"type": "text", "id": "ResStatusC1Text", "fill": "$text-primary", "content": "Đã xác nhận", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}]}, - {"type": "frame", "id": "ResStatusPending", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "ResCheck2", "width": 20, "height": 20, "fill": "#F59E0B", "cornerRadius": 4, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "ResCheck2Icon", "width": 12, "height": 12, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"}]}, {"type": "text", "id": "ResStatusC2Text", "fill": "$text-primary", "content": "Chờ xác nhận", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}]}, - {"type": "frame", "id": "ResStatusCancelled", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "ResCheck3", "width": 20, "height": 20, "fill": "$bg-interactive", "cornerRadius": 4, "stroke": {"thickness": 1, "fill": "$border-default"}}, {"type": "text", "id": "ResStatusC3Text", "fill": "$text-tertiary", "content": "Đã hủy", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}]} - ]} - ]}, - {"type": "frame", "id": "ResMainContent", "width": "fill_container", "height": "fill_container", "layout": "vertical", "children": [ - {"type": "frame", "id": "ResTimeline", "width": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [16, 24], "gap": 0, "children": [ - {"type": "frame", "id": "ResTimeSlot1", "width": 100, "layout": "vertical", "gap": 8, "alignItems": "center", "children": [{"type": "text", "id": "ResTime1", "fill": "$text-tertiary", "content": "11:00", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "frame", "id": "ResSlot1", "width": 80, "height": 40, "fill": "$bg-interactive", "cornerRadius": 8}]}, - {"type": "frame", "id": "ResTimeSlot2", "width": 100, "layout": "vertical", "gap": 8, "alignItems": "center", "children": [{"type": "text", "id": "ResTime2", "fill": "$text-tertiary", "content": "12:00", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "frame", "id": "ResSlot2", "width": 80, "height": 40, "fill": "#22C55E30", "cornerRadius": 8, "stroke": {"thickness": 1, "fill": "#22C55E"}, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "ResSlot2Text", "fill": "#22C55E", "content": "B03", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "ResTimeSlot3", "width": 100, "layout": "vertical", "gap": 8, "alignItems": "center", "children": [{"type": "text", "id": "ResTime3", "fill": "$text-tertiary", "content": "12:30", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "frame", "id": "ResSlot3", "width": 80, "height": 40, "fill": "#F59E0B30", "cornerRadius": 8, "stroke": {"thickness": 1, "fill": "#F59E0B"}, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "ResSlot3Text", "fill": "#F59E0B", "content": "VIP", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "ResTimeSlot4", "width": 100, "layout": "vertical", "gap": 8, "alignItems": "center", "children": [{"type": "text", "id": "ResTime4", "fill": "$text-tertiary", "content": "18:00", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "frame", "id": "ResSlot4", "width": 80, "height": 40, "fill": "#22C55E30", "cornerRadius": 8, "stroke": {"thickness": 1, "fill": "#22C55E"}, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "ResSlot4Text", "fill": "#22C55E", "content": "B05", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "ResTimeSlot5", "width": 100, "layout": "vertical", "gap": 8, "alignItems": "center", "children": [{"type": "text", "id": "ResTime5", "fill": "$text-tertiary", "content": "19:00", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "frame", "id": "ResSlot5", "width": 80, "height": 40, "fill": "#22C55E30", "cornerRadius": 8, "stroke": {"thickness": 1, "fill": "#22C55E"}, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "ResSlot5Text", "fill": "#22C55E", "content": "B01", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]} - ]}, - {"type": "frame", "id": "ResListArea", "width": "fill_container", "height": "fill_container", "layout": "vertical", "padding": 24, "gap": 16, "children": [ - {"type": "text", "id": "ResListTitle", "fill": "$text-secondary", "content": "Danh sách đặt bàn hôm nay (5)", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "frame", "id": "ResCard1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": 20, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "ResCard1Left", "gap": 16, "alignItems": "center", "children": [ - {"type": "frame", "id": "ResCard1Time", "width": 60, "layout": "vertical", "gap": 2, "alignItems": "center", "children": [{"type": "text", "id": "ResCard1Hour", "fill": "$orange-primary", "content": "12:00", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "ResCard1Date", "fill": "$text-tertiary", "content": "Hôm nay", "fontFamily": "Roboto", "fontSize": 11}]}, - {"type": "frame", "id": "ResCard1Divider", "width": 1, "height": 40, "fill": "$border-subtle"}, - {"type": "frame", "id": "ResCard1Info", "layout": "vertical", "gap": 4, "children": [ - {"type": "frame", "id": "ResCard1Row1", "gap": 8, "alignItems": "center", "children": [{"type": "text", "id": "ResCard1Name", "fill": "$text-primary", "content": "Nguyễn Văn A", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "frame", "id": "ResCard1Status", "fill": "#22C55E20", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "ResCard1StatusText", "fill": "#22C55E", "content": "Đã xác nhận", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "ResCard1Row2", "gap": 16, "children": [{"type": "frame", "id": "ResCard1Table", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "ResCard1TIcon", "width": 14, "height": 14, "iconFontName": "armchair", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "ResCard1TText", "fill": "$text-secondary", "content": "Bàn 03", "fontFamily": "Roboto", "fontSize": 12}]}, {"type": "frame", "id": "ResCard1Guests", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "ResCard1GIcon", "width": 14, "height": 14, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "ResCard1GText", "fill": "$text-secondary", "content": "4 khách", "fontFamily": "Roboto", "fontSize": 12}]}, {"type": "frame", "id": "ResCard1Phone", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "ResCard1PIcon", "width": 14, "height": 14, "iconFontName": "phone", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "ResCard1PText", "fill": "$text-secondary", "content": "0901 234 567", "fontFamily": "Roboto", "fontSize": 12}]}]} - ]} - ]}, - {"type": "frame", "id": "ResCard1Actions", "gap": 8, "children": [{"type": "frame", "id": "ResCard1Checkin", "height": 36, "fill": "#22C55E", "cornerRadius": 8, "padding": [0, 14], "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "ResCard1CIIcon", "width": 14, "height": 14, "iconFontName": "log-in", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "ResCard1CIText", "fill": "$text-primary", "content": "Check-in", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, {"type": "frame", "id": "ResCard1Cancel", "height": 36, "fill": "$bg-interactive", "cornerRadius": 8, "padding": [0, 14], "stroke": {"thickness": 1, "fill": "$border-default"}, "children": [{"type": "text", "id": "ResCard1CancelText", "fill": "$text-secondary", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}]} - ]}, - {"type": "frame", "id": "ResCard2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "#F59E0B50"}, "padding": 20, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "ResCard2Left", "gap": 16, "alignItems": "center", "children": [ - {"type": "frame", "id": "ResCard2Time", "width": 60, "layout": "vertical", "gap": 2, "alignItems": "center", "children": [{"type": "text", "id": "ResCard2Hour", "fill": "$orange-primary", "content": "12:30", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "ResCard2Date", "fill": "$text-tertiary", "content": "Hôm nay", "fontFamily": "Roboto", "fontSize": 11}]}, - {"type": "frame", "id": "ResCard2Divider", "width": 1, "height": 40, "fill": "$border-subtle"}, - {"type": "frame", "id": "ResCard2Info", "layout": "vertical", "gap": 4, "children": [ - {"type": "frame", "id": "ResCard2Row1", "gap": 8, "alignItems": "center", "children": [{"type": "text", "id": "ResCard2Name", "fill": "$text-primary", "content": "Công ty ABC", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "frame", "id": "ResCard2Status", "fill": "#F59E0B20", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "ResCard2StatusText", "fill": "#F59E0B", "content": "Chờ xác nhận", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "ResCard2Row2", "gap": 16, "children": [{"type": "frame", "id": "ResCard2Table", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "ResCard2TIcon", "width": 14, "height": 14, "iconFontName": "crown", "iconFontFamily": "lucide", "fill": "#F59E0B"}, {"type": "text", "id": "ResCard2TText", "fill": "$text-secondary", "content": "VIP 01", "fontFamily": "Roboto", "fontSize": 12}]}, {"type": "frame", "id": "ResCard2Guests", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "ResCard2GIcon", "width": 14, "height": 14, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "ResCard2GText", "fill": "$text-secondary", "content": "10 khách", "fontFamily": "Roboto", "fontSize": 12}]}]} - ]} - ]}, - {"type": "frame", "id": "ResCard2Actions", "gap": 8, "children": [{"type": "frame", "id": "ResCard2Confirm", "height": 36, "fill": "$orange-primary", "cornerRadius": 8, "padding": [0, 14], "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "ResCard2ConfIcon", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "ResCard2ConfText", "fill": "$text-primary", "content": "Xác nhận", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, {"type": "frame", "id": "ResCard2Cancel", "height": 36, "fill": "$bg-interactive", "cornerRadius": 8, "padding": [0, 14], "stroke": {"thickness": 1, "fill": "$border-default"}, "children": [{"type": "text", "id": "ResCard2CancelText", "fill": "$text-secondary", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}]} - ]} - ]} - ]} - ]} - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "bg-surface": {"type": "color", "value": "#111113"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "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/restaurant/workflow/restaurant-journey.pen b/pencil-design/src/pages/tPOS/pos/restaurant/workflow/restaurant-journey.pen deleted file mode 100644 index 5156b645..00000000 --- a/pencil-design/src/pages/tPOS/pos/restaurant/workflow/restaurant-journey.pen +++ /dev/null @@ -1,364 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "RestJourney1", - "name": "Restaurant Journey/1-Table", - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "RJ1Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 20, - "padding": 28, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "RJ1Step", "fill": "#3B82F620", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "RJ1StepT", "fill": "#3B82F6", "content": "Bước 1/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "frame", "id": "RJ1Icon", "width": 64, "height": 64, "fill": "#3B82F61A", "cornerRadius": 32, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RJ1IconI", "width": 28, "height": 28, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "#3B82F6"} - ]}, - {"type": "frame", "id": "RJ1Title", "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "RJ1TitleT", "fill": "#FFFFFF", "content": "Chào mừng!", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}, - {"type": "text", "id": "RJ1Desc", "fill": "#8B8B90", "content": "Quý khách có mấy người?", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "RJ1People", "gap": 12, "children": [ - {"type": "frame", "id": "RJ1P2", "width": 56, "height": 56, "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RJ1P2T", "fill": "#8B8B90", "content": "2", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}]}, - {"type": "frame", "id": "RJ1P4", "width": 56, "height": 56, "fill": "#3B82F620", "stroke": {"thickness": 2, "fill": "#3B82F6"}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RJ1P4T", "fill": "#3B82F6", "content": "4", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}]}, - {"type": "frame", "id": "RJ1P6", "width": 56, "height": 56, "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RJ1P6T", "fill": "#8B8B90", "content": "6", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}]}, - {"type": "frame", "id": "RJ1P8", "width": 56, "height": 56, "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RJ1P8T", "fill": "#8B8B90", "content": "8+", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}]} - ]}, - {"type": "frame", "id": "RJ1Table", "width": "fill_container", "fill": "#22C55E10", "cornerRadius": 12, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "RJ1TableL", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "RJ1TableIcon", "width": 40, "height": 40, "fill": "#22C55E30", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RJ1TableNum", "fill": "#22C55E", "content": "05", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}]}, - {"type": "frame", "id": "RJ1TableInfo", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "RJ1TableN", "fill": "#FFFFFF", "content": "Bàn 05 - Tầng 1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "RJ1TableCap", "fill": "#8B8B90", "content": "4 ghế • Cạnh cửa sổ", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "icon_font", "id": "RJ1TableCheck", "width": 20, "height": 20, "iconFontName": "check-circle-2", "iconFontFamily": "lucide", "fill": "#22C55E"} - ]}, - {"type": "frame", "id": "RJ1Confirm", "width": "fill_container", "height": 50, "fill": "#3B82F6", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "RJ1ConfirmT", "fill": "#FFFFFF", "content": "Xác nhận bàn 05", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "RestJourney2", - "name": "Restaurant Journey/2-Menu", - "x": 540, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "RJ2Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 18, - "padding": 24, - "children": [ - {"type": "frame", "id": "RJ2Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "RJ2Step", "fill": "#FF5C0020", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "RJ2StepT", "fill": "#FF5C00", "content": "Bước 2/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "text", "id": "RJ2Table", "fill": "#8B8B90", "content": "🪑 Bàn 05", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "RJ2Title", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "RJ2TitleT", "fill": "#FFFFFF", "content": "Order đang chọn", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}, - {"type": "text", "id": "RJ2Count", "fill": "#8B8B90", "content": "5 món • 4 người", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "RJ2Items", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 12, "layout": "vertical", "gap": 10, "children": [ - {"type": "frame", "id": "RJ2Item1", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "RJ2Item1L", "gap": 8, "children": [ - {"type": "text", "id": "RJ2Item1Q", "fill": "#FF5C00", "content": "2x", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "RJ2Item1N", "fill": "#FFFFFF", "content": "Phở bò tái chín", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "text", "id": "RJ2Item1P", "fill": "#FFFFFF", "content": "130,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "RJ2Item2", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "RJ2Item2L", "gap": 8, "children": [ - {"type": "text", "id": "RJ2Item2Q", "fill": "#FF5C00", "content": "1x", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "RJ2Item2N", "fill": "#FFFFFF", "content": "Bún chả Hà Nội", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "text", "id": "RJ2Item2P", "fill": "#FFFFFF", "content": "75,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "RJ2Item3", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "RJ2Item3L", "gap": 8, "children": [ - {"type": "text", "id": "RJ2Item3Q", "fill": "#FF5C00", "content": "2x", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "RJ2Item3N", "fill": "#FFFFFF", "content": "Gỏi cuốn tôm thịt", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "text", "id": "RJ2Item3P", "fill": "#FFFFFF", "content": "50,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "RJ2Note", "width": "fill_container", "fill": "#EC489910", "cornerRadius": 8, "padding": 10, "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RJ2NoteI", "width": 14, "height": 14, "iconFontName": "message-square", "iconFontFamily": "lucide", "fill": "#EC4899"}, - {"type": "text", "id": "RJ2NoteT", "fill": "#EC4899", "content": "Không hành, ít cay", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "RJ2Divider", "width": "fill_container", "height": 1, "fill": "#1F1F23"}, - {"type": "frame", "id": "RJ2Total", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "RJ2TotalL", "fill": "#8B8B90", "content": "Tạm tính", "fontFamily": "Roboto", "fontSize": 14}, - {"type": "text", "id": "RJ2TotalV", "fill": "#FF5C00", "content": "255,000₫", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "RJ2Actions", "width": "fill_container", "gap": 10, "children": [ - {"type": "frame", "id": "RJ2Add", "width": 48, "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "RJ2AddI", "width": 20, "height": 20, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#ADADB0"}]}, - {"type": "frame", "id": "RJ2Send", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RJ2SendI", "width": 16, "height": 16, "iconFontName": "send", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "RJ2SendT", "fill": "#FFFFFF", "content": "Gửi bếp", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "RestJourney3", - "name": "Restaurant Journey/3-Kitchen", - "x": 1080, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "RJ3Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 24, - "padding": 32, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "RJ3Step", "fill": "#EC489920", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "RJ3StepT", "fill": "#EC4899", "content": "Bước 3/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "frame", "id": "RJ3Icon", "width": 80, "height": 80, "fill": "#EC48991A", "cornerRadius": 40, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RJ3IconI", "width": 36, "height": 36, "iconFontName": "chef-hat", "iconFontFamily": "lucide", "fill": "#EC4899"} - ]}, - {"type": "frame", "id": "RJ3Title", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "RJ3TitleT", "fill": "#FFFFFF", "content": "Bếp đang nấu", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}, - {"type": "text", "id": "RJ3Desc", "fill": "#8B8B90", "content": "Order đã gửi thành công", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "RJ3Progress", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "RJ3Item1", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "RJ3Item1N", "fill": "#FFFFFF", "content": "2x Phở bò tái chín", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "frame", "id": "RJ3Item1S", "fill": "#F59E0B20", "cornerRadius": 4, "padding": [4, 8], "children": [{"type": "text", "id": "RJ3Item1ST", "fill": "#F59E0B", "content": "Đang nấu", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]} - ]}, - {"type": "frame", "id": "RJ3Item2", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "RJ3Item2N", "fill": "#FFFFFF", "content": "1x Bún chả Hà Nội", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "frame", "id": "RJ3Item2S", "fill": "#3B82F620", "cornerRadius": 4, "padding": [4, 8], "children": [{"type": "text", "id": "RJ3Item2ST", "fill": "#3B82F6", "content": "Chờ", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]} - ]}, - {"type": "frame", "id": "RJ3Item3", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "RJ3Item3N", "fill": "#FFFFFF", "content": "2x Gỏi cuốn tôm thịt", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "frame", "id": "RJ3Item3S", "fill": "#22C55E20", "cornerRadius": 4, "padding": [4, 8], "children": [{"type": "text", "id": "RJ3Item3ST", "fill": "#22C55E", "content": "Xong", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]} - ]} - ]}, - {"type": "frame", "id": "RJ3Time", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RJ3TimeI", "width": 16, "height": 16, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#8B8B90"}, - {"type": "text", "id": "RJ3TimeT", "fill": "#8B8B90", "content": "Ước tính: 10-15 phút", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "RJ3AddMore", "width": "fill_container", "height": 44, "fill": "#2A2A2E", "cornerRadius": 10, "gap": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RJ3AddI", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#ADADB0"}, - {"type": "text", "id": "RJ3AddT", "fill": "#ADADB0", "content": "Gọi thêm món", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "RestJourney4", - "name": "Restaurant Journey/4-Serving", - "x": 1620, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "RJ4Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 24, - "padding": 32, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "RJ4Step", "fill": "#F59E0B20", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "RJ4StepT", "fill": "#F59E0B", "content": "Bước 4/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "frame", "id": "RJ4Icon", "width": 80, "height": 80, "fill": "#F59E0B1A", "cornerRadius": 40, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RJ4IconI", "width": 36, "height": 36, "iconFontName": "utensils", "iconFontFamily": "lucide", "fill": "#F59E0B"} - ]}, - {"type": "frame", "id": "RJ4Title", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "RJ4TitleT", "fill": "#FFFFFF", "content": "Đang phục vụ", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}, - {"type": "text", "id": "RJ4Desc", "fill": "#8B8B90", "content": "3/5 món đã lên bàn", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "RJ4Items", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ - {"type": "frame", "id": "RJ4Item1", "width": "fill_container", "fill": "#22C55E10", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "RJ4Item1L", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RJ4Item1Check", "width": 16, "height": 16, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "RJ4Item1N", "fill": "#FFFFFF", "content": "2x Gỏi cuốn tôm thịt", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "text", "id": "RJ4Item1S", "fill": "#22C55E", "content": "Đã phục vụ", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "RJ4Item2", "width": "fill_container", "fill": "#22C55E10", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "RJ4Item2L", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RJ4Item2Check", "width": 16, "height": 16, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "RJ4Item2N", "fill": "#FFFFFF", "content": "2x Phở bò tái chín", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "text", "id": "RJ4Item2S", "fill": "#22C55E", "content": "Đã phục vụ", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "RJ4Item3", "width": "fill_container", "fill": "#F59E0B10", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "RJ4Item3L", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RJ4Item3Wait", "width": 16, "height": 16, "iconFontName": "loader", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "text", "id": "RJ4Item3N", "fill": "#FFFFFF", "content": "1x Bún chả Hà Nội", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "text", "id": "RJ4Item3S", "fill": "#F59E0B", "content": "Sắp lên", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "RJ4Actions", "width": "fill_container", "gap": 10, "children": [ - {"type": "frame", "id": "RJ4Add", "width": "fill_container", "height": 44, "fill": "#2A2A2E", "cornerRadius": 10, "gap": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RJ4AddI", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#ADADB0"}, - {"type": "text", "id": "RJ4AddT", "fill": "#ADADB0", "content": "Gọi thêm", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "RJ4Bill", "width": "fill_container", "height": 44, "fill": "#22C55E", "cornerRadius": 10, "gap": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RJ4BillI", "width": 16, "height": 16, "iconFontName": "receipt", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "RJ4BillT", "fill": "#FFFFFF", "content": "Xem bill", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "RestJourney5", - "name": "Restaurant Journey/5-Bill", - "x": 2160, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "RJ5Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 18, - "padding": 24, - "children": [ - {"type": "frame", "id": "RJ5Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "RJ5Step", "fill": "#22C55E20", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "RJ5StepT", "fill": "#22C55E", "content": "Bước 5/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "text", "id": "RJ5Table", "fill": "#8B8B90", "content": "Bàn 05 • 45 phút", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "RJ5Title", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "RJ5TitleT", "fill": "#FFFFFF", "content": "Tính tiền", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "RJ5Items", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 12, "layout": "vertical", "gap": 8, "children": [ - {"type": "frame", "id": "RJ5Item1", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RJ5Item1N", "fill": "#FFFFFF", "content": "2x Phở bò tái chín", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "RJ5Item1P", "fill": "#FFFFFF", "content": "130,000₫", "fontFamily": "Roboto", "fontSize": 12}]}, - {"type": "frame", "id": "RJ5Item2", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RJ5Item2N", "fill": "#FFFFFF", "content": "1x Bún chả Hà Nội", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "RJ5Item2P", "fill": "#FFFFFF", "content": "75,000₫", "fontFamily": "Roboto", "fontSize": 12}]}, - {"type": "frame", "id": "RJ5Item3", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RJ5Item3N", "fill": "#FFFFFF", "content": "2x Gỏi cuốn tôm thịt", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "RJ5Item3P", "fill": "#FFFFFF", "content": "50,000₫", "fontFamily": "Roboto", "fontSize": 12}]} - ]}, - {"type": "frame", "id": "RJ5Summary", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "frame", "id": "RJ5Sub", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RJ5SubL", "fill": "#8B8B90", "content": "Tạm tính", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "RJ5SubV", "fill": "#FFFFFF", "content": "255,000₫", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "frame", "id": "RJ5Discount", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "RJ5DiscountL", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "RJ5DiscountI", "width": 12, "height": 12, "iconFontName": "tag", "iconFontFamily": "lucide", "fill": "#EC4899"}, {"type": "text", "id": "RJ5DiscountT", "fill": "#EC4899", "content": "Giảm 10%", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "text", "id": "RJ5DiscountV", "fill": "#EC4899", "content": "-25,500₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "RJ5Loyalty", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "RJ5LoyaltyL", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "RJ5LoyaltyI", "width": 12, "height": 12, "iconFontName": "coins", "iconFontFamily": "lucide", "fill": "#14B8A6"}, {"type": "text", "id": "RJ5LoyaltyT", "fill": "#14B8A6", "content": "Dùng 50 điểm", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "text", "id": "RJ5LoyaltyV", "fill": "#14B8A6", "content": "-5,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "RJ5DividerB", "width": "fill_container", "height": 1, "fill": "#2A2A2E"}, - {"type": "frame", "id": "RJ5Total", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RJ5TotalL", "fill": "#FFFFFF", "content": "Tổng thanh toán", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "text", "id": "RJ5TotalV", "fill": "#22C55E", "content": "224,500₫", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}]} - ]}, - {"type": "frame", "id": "RJ5Pay", "width": "fill_container", "height": 50, "fill": "#22C55E", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RJ5PayI", "width": 18, "height": 18, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "RJ5PayT", "fill": "#FFFFFF", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "RestJourney6", - "name": "Restaurant Journey/6-Complete", - "x": 2700, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "RJ6Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 24, - "padding": 36, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "RJ6Step", "fill": "#14B8A620", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "RJ6StepT", "fill": "#14B8A6", "content": "Hoàn tất", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "frame", "id": "RJ6Icon", "width": 88, "height": 88, "fill": "#14B8A61A", "cornerRadius": 44, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RJ6IconI", "width": 40, "height": 40, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#14B8A6"} - ]}, - {"type": "frame", "id": "RJ6Title", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "RJ6TitleT", "fill": "#FFFFFF", "content": "Thanh toán thành công!", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}, - {"type": "text", "id": "RJ6Desc", "fill": "#8B8B90", "content": "Cảm ơn quý khách 🍜", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "RJ6Receipt", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 16, "layout": "vertical", "gap": 10, "children": [ - {"type": "frame", "id": "RJ6ReceiptRow1", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RJ6ReceiptL1", "fill": "#8B8B90", "content": "Số hóa đơn", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "RJ6ReceiptV1", "fill": "#FFFFFF", "content": "#HD-20260206-042", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "RJ6ReceiptRow2", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RJ6ReceiptL2", "fill": "#8B8B90", "content": "Tổng tiền", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "RJ6ReceiptV2", "fill": "#14B8A6", "content": "224,500₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, - {"type": "frame", "id": "RJ6ReceiptRow3", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RJ6ReceiptL3", "fill": "#8B8B90", "content": "Điểm tích lũy", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "RJ6ReceiptV3", "fill": "#14B8A6", "content": "+22 điểm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]} - ]}, - {"type": "frame", "id": "RJ6Rating", "width": "fill_container", "layout": "vertical", "gap": 10, "alignItems": "center", "children": [ - {"type": "text", "id": "RJ6RatingLabel", "fill": "#8B8B90", "content": "Đánh giá bữa ăn", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "RJ6Stars", "gap": 8, "children": [ - {"type": "icon_font", "id": "RJ6Star1", "width": 28, "height": 28, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "RJ6Star2", "width": 28, "height": 28, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "RJ6Star3", "width": 28, "height": 28, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "RJ6Star4", "width": 28, "height": 28, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "RJ6Star5", "width": 28, "height": 28, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"} - ]} - ]}, - {"type": "frame", "id": "RJ6Done", "width": "fill_container", "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "RJ6DoneT", "fill": "#FFFFFF", "content": "Hoàn tất", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]} - ] - } - ] - } - ] -} diff --git a/pencil-design/src/pages/tPOS/pos/restaurant/workflow/table-detail.pen b/pencil-design/src/pages/tPOS/pos/restaurant/workflow/table-detail.pen deleted file mode 100644 index 99d2309a..00000000 --- a/pencil-design/src/pages/tPOS/pos/restaurant/workflow/table-detail.pen +++ /dev/null @@ -1,87 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "TableDetailScreen", - "name": "Restaurant/Table Detail", - "reusable": true, - "width": 1280, - "height": 800, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - {"type": "frame", "id": "TDHeader", "width": "fill_container", "height": 64, "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [0, 24], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "TDHeaderLeft", "gap": 16, "alignItems": "center", "children": [ - {"type": "frame", "id": "TDBackBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "TDBackIcon", "width": 20, "height": 20, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"}]}, - {"type": "frame", "id": "TDTableBadge", "fill": "$orange-primary", "cornerRadius": 10, "padding": [8, 16], "children": [{"type": "text", "id": "TDTableText", "fill": "$text-primary", "content": "Bàn 03", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}]}, - {"type": "frame", "id": "TDTableInfo", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "TDOrderNum", "fill": "$text-primary", "content": "Đơn #0089", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "text", "id": "TDTimeInfo", "fill": "$text-secondary", "content": "4 khách • 1h 15p", "fontFamily": "Roboto", "fontSize": 12}]} - ]}, - {"type": "frame", "id": "TDCustomer", "fill": "#14B8A615", "cornerRadius": 12, "padding": [10, 16], "gap": 10, "alignItems": "center", "stroke": {"thickness": 1, "fill": "#14B8A640"}, "children": [ - {"type": "frame", "id": "TDCustAvatar", "width": 32, "height": 32, "fill": "#14B8A630", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "TDCustIcon", "width": 16, "height": 16, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "#14B8A6"}]}, - {"type": "frame", "id": "TDCustInfo", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "TDCustName", "fill": "$text-primary", "content": "Nguyễn Văn A", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, {"type": "text", "id": "TDCustPoints", "fill": "#14B8A6", "content": "Gold • 2,450 điểm", "fontFamily": "Roboto", "fontSize": 11}]} - ]} - ]}, - {"type": "frame", "id": "TDBody", "width": "fill_container", "height": "fill_container", "children": [ - {"type": "frame", "id": "TDOrderArea", "width": "fill_container", "height": "fill_container", "layout": "vertical", "padding": 24, "gap": 20, "children": [ - {"type": "frame", "id": "TDRound1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "children": [ - {"type": "frame", "id": "TDR1Header", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "TDR1Left", "gap": 10, "alignItems": "center", "children": [{"type": "text", "id": "TDR1Title", "fill": "$text-primary", "content": "Đợt 1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "text", "id": "TDR1Time", "fill": "$text-tertiary", "content": "19:15", "fontFamily": "Roboto", "fontSize": 12}]}, - {"type": "frame", "id": "TDR1Status", "fill": "#22C55E20", "cornerRadius": 6, "padding": [5, 10], "children": [{"type": "text", "id": "TDR1StatusText", "fill": "#22C55E", "content": "✓ Hoàn thành", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]} - ]}, - {"type": "frame", "id": "TDR1Items", "width": "fill_container", "layout": "vertical", "children": [ - {"type": "frame", "id": "TDR1Item1", "width": "fill_container", "padding": [12, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "TDR1I1Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "TDR1I1Qty", "width": 28, "height": 28, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "TDR1I1QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, {"type": "frame", "id": "TDR1I1Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "TDR1I1Name", "fill": "$text-primary", "content": "Bò Lúc Lắc", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "frame", "id": "TDR1I1Badge", "fill": "#22C55E20", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "TDR1I1BadgeText", "fill": "#22C55E", "content": "Đã phục vụ", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "600"}]}]}]}, {"type": "text", "id": "TDR1I1Price", "fill": "$text-primary", "content": "185,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "TDR1Item2", "width": "fill_container", "padding": [12, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "TDR1I2Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "TDR1I2Qty", "width": 28, "height": 28, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "TDR1I2QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, {"type": "frame", "id": "TDR1I2Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "TDR1I2Name", "fill": "$text-primary", "content": "Gà Nướng Mật Ong", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "frame", "id": "TDR1I2Badge", "fill": "#22C55E20", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "TDR1I2BadgeText", "fill": "#22C55E", "content": "Đã phục vụ", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "600"}]}]}]}, {"type": "text", "id": "TDR1I2Price", "fill": "$text-primary", "content": "165,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "TDR1Item3", "width": "fill_container", "padding": [12, 20], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "TDR1I3Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "TDR1I3Qty", "width": 28, "height": 28, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "TDR1I3QtyText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, {"type": "frame", "id": "TDR1I3Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "TDR1I3Name", "fill": "$text-primary", "content": "Bia Tiger", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "frame", "id": "TDR1I3Badge", "fill": "#22C55E20", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "TDR1I3BadgeText", "fill": "#22C55E", "content": "Đã phục vụ", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "600"}]}]}]}, {"type": "text", "id": "TDR1I3Price", "fill": "$text-primary", "content": "70,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]} - ]} - ]}, - {"type": "frame", "id": "TDRound2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "#F59E0B40"}, "layout": "vertical", "children": [ - {"type": "frame", "id": "TDR2Header", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "TDR2Left", "gap": 10, "alignItems": "center", "children": [{"type": "text", "id": "TDR2Title", "fill": "$text-primary", "content": "Đợt 2", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "text", "id": "TDR2Time", "fill": "$text-tertiary", "content": "19:45", "fontFamily": "Roboto", "fontSize": 12}]}, - {"type": "frame", "id": "TDR2Status", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [5, 10], "children": [{"type": "text", "id": "TDR2StatusText", "fill": "#F59E0B", "content": "⏳ Đang chờ", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]} - ]}, - {"type": "frame", "id": "TDR2Items", "width": "fill_container", "layout": "vertical", "children": [ - {"type": "frame", "id": "TDR2Item1", "width": "fill_container", "padding": [12, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "TDR2I1Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "TDR2I1Qty", "width": 28, "height": 28, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "TDR2I1QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, {"type": "frame", "id": "TDR2I1Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "TDR2I1Name", "fill": "$text-primary", "content": "Cá Hồi Sốt Cam", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "frame", "id": "TDR2I1Badge", "fill": "#3B82F620", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "TDR2I1BadgeText", "fill": "#3B82F6", "content": "Đang làm", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "600"}]}]}]}, {"type": "text", "id": "TDR2I1Price", "fill": "$text-primary", "content": "220,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "TDR2Item2", "width": "fill_container", "padding": [12, 20], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "TDR2I2Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "TDR2I2Qty", "width": 28, "height": 28, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "TDR2I2QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, {"type": "frame", "id": "TDR2I2Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "TDR2I2Name", "fill": "$text-primary", "content": "Rượu Vang Đỏ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "frame", "id": "TDR2I2Badge", "fill": "#F59E0B20", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "TDR2I2BadgeText", "fill": "#F59E0B", "content": "Chờ bếp", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "600"}]}]}]}, {"type": "text", "id": "TDR2I2Price", "fill": "$text-primary", "content": "450,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]} - ]} - ]}, - {"type": "frame", "id": "TDActions", "width": "fill_container", "gap": 12, "children": [ - {"type": "frame", "id": "TDAddItem", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 16], "gap": 8, "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-default"}, "children": [{"type": "icon_font", "id": "TDAddIcon", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "TDAddText", "fill": "$text-secondary", "content": "Thêm món", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "TDEditOrder", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 16], "gap": 8, "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-default"}, "children": [{"type": "icon_font", "id": "TDEditIcon", "width": 18, "height": 18, "iconFontName": "pencil", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "TDEditText", "fill": "$text-secondary", "content": "Sửa đơn", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "TDVoid", "height": 44, "fill": "#EF444415", "cornerRadius": 10, "padding": [0, 16], "gap": 8, "alignItems": "center", "stroke": {"thickness": 1, "fill": "#EF444450"}, "children": [{"type": "icon_font", "id": "TDVoidIcon", "width": 18, "height": 18, "iconFontName": "trash-2", "iconFontFamily": "lucide", "fill": "#EF4444"}, {"type": "text", "id": "TDVoidText", "fill": "#EF4444", "content": "Void item", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]} - ]} - ]}, - {"type": "frame", "id": "TDBillPanel", "width": 360, "height": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, "layout": "vertical", "children": [ - {"type": "frame", "id": "TDBillHeader", "width": "fill_container", "padding": [16, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "children": [{"type": "text", "id": "TDBillTitle", "fill": "$text-primary", "content": "Hóa đơn", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]}, - {"type": "frame", "id": "TDBillContent", "width": "fill_container", "height": "fill_container", "layout": "vertical", "padding": 20, "gap": 12, "children": [ - {"type": "frame", "id": "TDBillSubtotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "TDBillSubLabel", "fill": "$text-secondary", "content": "Tạm tính", "fontFamily": "Roboto", "fontSize": 14}, {"type": "text", "id": "TDBillSubValue", "fill": "$text-primary", "content": "1,090,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "TDBillService", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "TDBillSerLabel", "fill": "$text-secondary", "content": "Phí dịch vụ 5%", "fontFamily": "Roboto", "fontSize": 14}, {"type": "text", "id": "TDBillSerValue", "fill": "$text-primary", "content": "54,500₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "TDBillVAT", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "TDBillVATLabel", "fill": "$text-secondary", "content": "VAT 10%", "fontFamily": "Roboto", "fontSize": 14}, {"type": "text", "id": "TDBillVATValue", "fill": "$text-primary", "content": "109,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "TDBillDivider", "width": "fill_container", "height": 1, "fill": "$border-subtle"}, - {"type": "frame", "id": "TDBillTotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "TDBillTotalLabel", "fill": "$text-primary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}, {"type": "text", "id": "TDBillTotalValue", "fill": "$orange-primary", "content": "1,253,500₫", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}]} - ]}, - {"type": "frame", "id": "TDBillActions", "width": "fill_container", "layout": "vertical", "padding": 16, "gap": 12, "children": [ - {"type": "frame", "id": "TDDiscount", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-default"}, "children": [{"type": "icon_font", "id": "TDDiscIcon", "width": 18, "height": 18, "iconFontName": "percent", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "TDDiscText", "fill": "$text-secondary", "content": "Áp dụng giảm giá", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "TDSplit", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-default"}, "children": [{"type": "icon_font", "id": "TDSplitIcon", "width": 18, "height": 18, "iconFontName": "split", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "TDSplitText", "fill": "$text-secondary", "content": "Tách bill", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "TDPrint", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "stroke": {"thickness": 1, "fill": "$border-default"}, "children": [{"type": "icon_font", "id": "TDPrintIcon", "width": 18, "height": 18, "iconFontName": "printer", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "TDPrintText", "fill": "$text-secondary", "content": "In bill tạm tính", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]} - ]}, - {"type": "frame", "id": "TDPayBtn", "width": "fill_container", "height": 64, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "TDPayIcon", "width": 22, "height": 22, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "TDPayText", "fill": "$text-primary", "content": "Thanh toán 1,253,500₫", "fontFamily": "Roboto", "fontSize": 17, "fontWeight": "600"}]} - ]} - ]} - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "bg-surface": {"type": "color", "value": "#111113"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "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/restaurant/workflow/table-map.pen b/pencil-design/src/pages/tPOS/pos/restaurant/workflow/table-map.pen deleted file mode 100644 index 960a19fe..00000000 --- a/pencil-design/src/pages/tPOS/pos/restaurant/workflow/table-map.pen +++ /dev/null @@ -1,101 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "RestaurantTableMap", - "name": "Restaurant/Table Map", - "reusable": true, - "width": 1024, - "height": 768, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "TableMapHeader", - "width": "fill_container", - "height": 64, - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "padding": [0, 24], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "TableMapLeft", "gap": 16, "alignItems": "center", "children": [ - {"type": "frame", "id": "TableMapLogo", "width": 40, "height": 40, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "TableMapLogoText", "fill": "$text-primary", "content": "G", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}]}, - {"type": "text", "id": "TableMapTitle", "fill": "$text-primary", "content": "Sơ đồ bàn", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "TableMapLegend", "gap": 20, "alignItems": "center", "children": [ - {"type": "frame", "id": "LegendEmpty", "gap": 8, "alignItems": "center", "children": [{"type": "frame", "id": "LegendEmptyDot", "width": 16, "height": 16, "fill": "#22C55E", "cornerRadius": 4}, {"type": "text", "id": "LegendEmptyText", "fill": "$text-secondary", "content": "Trống", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, - {"type": "frame", "id": "LegendOccupied", "gap": 8, "alignItems": "center", "children": [{"type": "frame", "id": "LegendOccupiedDot", "width": 16, "height": 16, "fill": "#EF4444", "cornerRadius": 4}, {"type": "text", "id": "LegendOccupiedText", "fill": "$text-secondary", "content": "Có khách", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, - {"type": "frame", "id": "LegendReserved", "gap": 8, "alignItems": "center", "children": [{"type": "frame", "id": "LegendReservedDot", "width": 16, "height": 16, "fill": "#F59E0B", "cornerRadius": 4}, {"type": "text", "id": "LegendReservedText", "fill": "$text-secondary", "content": "Đặt trước", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]} - ]}, - {"type": "frame", "id": "TableMapRight", "gap": 12, "children": [ - {"type": "frame", "id": "TableMapAddBtn", "height": 40, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "TableMapAddIcon", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "TableMapAddText", "fill": "$text-primary", "content": "Mở bàn mới", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]} - ]} - ] - }, - { - "type": "frame", - "id": "TableMapFloors", - "width": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "padding": [12, 24], - "gap": 8, - "children": [ - {"type": "frame", "id": "Floor1Tab", "fill": "$orange-primary", "cornerRadius": 8, "padding": [10, 20], "children": [{"type": "text", "id": "Floor1Text", "fill": "$text-primary", "content": "Tầng 1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, - {"type": "frame", "id": "Floor2Tab", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [10, 20], "children": [{"type": "text", "id": "Floor2Text", "fill": "$text-secondary", "content": "Tầng 2", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "FloorVIPTab", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [10, 20], "children": [{"type": "text", "id": "FloorVIPText", "fill": "$text-secondary", "content": "VIP", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "FloorOutdoorTab", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [10, 20], "children": [{"type": "text", "id": "FloorOutdoorText", "fill": "$text-secondary", "content": "Ngoài trời", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]} - ] - }, - { - "type": "frame", - "id": "TableMapGrid", - "width": "fill_container", - "height": "fill_container", - "padding": 32, - "layout": "vertical", - "gap": 24, - "clip": true, - "children": [ - {"type": "frame", "id": "TableRow1", "width": "fill_container", "gap": 24, "children": [ - {"type": "frame", "id": "Table01", "width": 140, "height": 120, "fill": "#EF444415", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#EF4444"}, "layout": "vertical", "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Table01Label", "fill": "#EF4444", "content": "01", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}, {"type": "frame", "id": "Table01Info", "fill": "#EF444430", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "Table01InfoText", "fill": "#EF4444", "content": "4 khách • 45p", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "Table02", "width": 140, "height": 120, "fill": "#22C55E15", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "#22C55E"}, "layout": "vertical", "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Table02Label", "fill": "#22C55E", "content": "02", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}, {"type": "text", "id": "Table02Status", "fill": "#22C55E", "content": "Trống", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "Table03", "width": 140, "height": 120, "fill": "#EF444415", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Table03Label", "fill": "$orange-primary", "content": "03", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}, {"type": "frame", "id": "Table03Info", "fill": "$orange-primary", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "Table03InfoText", "fill": "$text-primary", "content": "ĐANG CHỌN", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "Table04", "width": 140, "height": 120, "fill": "#F59E0B15", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "#F59E0B"}, "layout": "vertical", "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Table04Label", "fill": "#F59E0B", "content": "04", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}, {"type": "frame", "id": "Table04Info", "fill": "#F59E0B30", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "Table04InfoText", "fill": "#F59E0B", "content": "Đặt 19:00", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "Table05", "width": 140, "height": 120, "fill": "#22C55E15", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "#22C55E"}, "layout": "vertical", "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Table05Label", "fill": "#22C55E", "content": "05", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}, {"type": "text", "id": "Table05Status", "fill": "#22C55E", "content": "Trống", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]} - ]}, - {"type": "frame", "id": "TableRow2", "width": "fill_container", "gap": 24, "children": [ - {"type": "frame", "id": "Table06", "width": 140, "height": 120, "fill": "#EF444415", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#EF4444"}, "layout": "vertical", "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Table06Label", "fill": "#EF4444", "content": "06", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}, {"type": "frame", "id": "Table06Info", "fill": "#EF444430", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "Table06InfoText", "fill": "#EF4444", "content": "2 khách • 30p", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "Table07", "width": 140, "height": 120, "fill": "#EF444415", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#EF4444"}, "layout": "vertical", "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Table07Label", "fill": "#EF4444", "content": "07", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}, {"type": "frame", "id": "Table07Info", "fill": "#EF444430", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "Table07InfoText", "fill": "#EF4444", "content": "6 khách • 1h20", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "Table08", "width": 140, "height": 120, "fill": "#22C55E15", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "#22C55E"}, "layout": "vertical", "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Table08Label", "fill": "#22C55E", "content": "08", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}, {"type": "text", "id": "Table08Status", "fill": "#22C55E", "content": "Trống", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "Table09", "width": 140, "height": 120, "fill": "#22C55E15", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "#22C55E"}, "layout": "vertical", "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Table09Label", "fill": "#22C55E", "content": "09", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}, {"type": "text", "id": "Table09Status", "fill": "#22C55E", "content": "Trống", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "Table10", "width": 140, "height": 120, "fill": "#EF444415", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#EF4444"}, "layout": "vertical", "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Table10Label", "fill": "#EF4444", "content": "10", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}, {"type": "frame", "id": "Table10Info", "fill": "#EF444430", "cornerRadius": 6, "padding": [4, 10], "children": [{"type": "text", "id": "Table10InfoText", "fill": "#EF4444", "content": "3 khách • 20p", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}]} - ]}, - {"type": "frame", "id": "TableMapStats", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "padding": [16, 24], "gap": 40, "justifyContent": "center", "children": [ - {"type": "frame", "id": "StatTotal", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [{"type": "text", "id": "StatTotalValue", "fill": "$text-primary", "content": "10", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, {"type": "text", "id": "StatTotalLabel", "fill": "$text-tertiary", "content": "Tổng bàn", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, - {"type": "frame", "id": "StatEmpty", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [{"type": "text", "id": "StatEmptyValue", "fill": "#22C55E", "content": "4", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, {"type": "text", "id": "StatEmptyLabel", "fill": "$text-tertiary", "content": "Trống", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, - {"type": "frame", "id": "StatOccupied", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [{"type": "text", "id": "StatOccupiedValue", "fill": "#EF4444", "content": "5", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, {"type": "text", "id": "StatOccupiedLabel", "fill": "$text-tertiary", "content": "Có khách", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, - {"type": "frame", "id": "StatReserved", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [{"type": "text", "id": "StatReservedValue", "fill": "#F59E0B", "content": "1", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, {"type": "text", "id": "StatReservedLabel", "fill": "$text-tertiary", "content": "Đặt trướ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"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/restaurant/workflow/table-merge-split.pen b/pencil-design/src/pages/tPOS/pos/restaurant/workflow/table-merge-split.pen deleted file mode 100644 index 75c08820..00000000 --- a/pencil-design/src/pages/tPOS/pos/restaurant/workflow/table-merge-split.pen +++ /dev/null @@ -1,136 +0,0 @@ -{ - "version": "2.7", - "children": [ - { - "type": "frame", - "id": "TableMergeSplitDialog", - "name": "Dialog/TableMergeSplit", - "reusable": true, - "clip": true, - "width": 440, - "height": 520, - "fill": "$bg-elevated", - "cornerRadius": 24, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "TableMSHeader", - "width": "fill_container", - "padding": [16, 20], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "TableMSHeaderLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "TableMSIconBg", "width": 40, "height": 40, "fill": "#3B82F620", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "TableMSIcon", "width": 20, "height": 20, "iconFontName": "merge", "iconFontFamily": "lucide", "fill": "#3B82F6"} - ]}, - {"type": "text", "id": "TableMSTitle", "fill": "$text-primary", "content": "Gộp / Tách bàn", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "TableMSCloseBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "TableMSCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "TableMSContent", - "width": "fill_container", - "height": "fill_container", - "padding": 20, - "layout": "vertical", - "gap": 16, - "children": [ - {"type": "frame", "id": "TableMSTabs", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 12, "padding": 4, "gap": 4, "children": [ - {"type": "frame", "id": "TableMSTabMerge", "width": "fill_container", "height": 40, "fill": "$orange-primary", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "TableMSTabMergeText", "fill": "$text-primary", "content": "Gộp bàn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "TableMSTabSplit", "width": "fill_container", "height": 40, "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "TableMSTabSplitText", "fill": "$text-tertiary", "content": "Tách bàn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "TableMSSelectedTable", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "TableMSSelectedIcon", "width": 48, "height": 48, "fill": "#22C55E20", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "TableMSSelectedNumber", "fill": "#22C55E", "content": "05", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "TableMSSelectedInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "TableMSSelectedName", "fill": "$text-primary", "content": "Bàn 05 - Đang gộp", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, - {"type": "text", "id": "TableMSSelectedSub", "fill": "$text-tertiary", "content": "4 khách • 285,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"} - ]} - ]}, - {"type": "frame", "id": "TableMSTargetSection", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ - {"type": "text", "id": "TableMSTargetLabel", "fill": "$text-secondary", "content": "Chọn bàn để gộp", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "TableMSGrid", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "frame", "id": "TableMSRow1", "width": "fill_container", "gap": 8, "children": [ - {"type": "frame", "id": "TableMS06", "width": "fill_container", "height": 64, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "#22C55E"}, "layout": "vertical", "gap": 2, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "TableMS06Num", "fill": "#22C55E", "content": "06", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "TableMS06Sub", "fill": "$text-tertiary", "content": "2 khách", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "TableMS07", "width": "fill_container", "height": 64, "fill": "$bg-page", "cornerRadius": 12, "layout": "vertical", "gap": 2, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "TableMS07Num", "fill": "$text-primary", "content": "07", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "TableMS07Sub", "fill": "$text-tertiary", "content": "Trống", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "TableMS08", "width": "fill_container", "height": 64, "fill": "$bg-page", "cornerRadius": 12, "layout": "vertical", "gap": 2, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "TableMS08Num", "fill": "$text-primary", "content": "08", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "TableMS08Sub", "fill": "$text-tertiary", "content": "3 khách", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "TableMS09", "width": "fill_container", "height": 64, "fill": "$bg-page", "cornerRadius": 12, "layout": "vertical", "gap": 2, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "TableMS09Num", "fill": "$text-tertiary", "content": "09", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "TableMS09Sub", "fill": "$text-tertiary", "content": "Đặt trước", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]} - ]}, - {"type": "frame", "id": "TableMSRow2", "width": "fill_container", "gap": 8, "children": [ - {"type": "frame", "id": "TableMS10", "width": "fill_container", "height": 64, "fill": "$bg-page", "cornerRadius": 12, "layout": "vertical", "gap": 2, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "TableMS10Num", "fill": "$text-primary", "content": "10", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "TableMS10Sub", "fill": "$text-tertiary", "content": "Trống", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "TableMS11", "width": "fill_container", "height": 64, "fill": "$bg-page", "cornerRadius": 12, "layout": "vertical", "gap": 2, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "TableMS11Num", "fill": "$text-primary", "content": "11", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "TableMS11Sub", "fill": "$text-tertiary", "content": "4 khách", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "TableMS12", "width": "fill_container", "height": 64, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "#22C55E"}, "layout": "vertical", "gap": 2, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "TableMS12Num", "fill": "#22C55E", "content": "12", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "TableMS12Sub", "fill": "$text-tertiary", "content": "2 khách", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "TableMS13", "width": "fill_container", "height": 64, "fill": "$bg-page", "cornerRadius": 12, "layout": "vertical", "gap": 2, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "TableMS13Num", "fill": "$text-primary", "content": "13", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "TableMS13Sub", "fill": "$text-tertiary", "content": "Trống", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]} - ]} - ]} - ]}, - {"type": "frame", "id": "TableMSSummary", "width": "fill_container", "fill": "#22C55E15", "cornerRadius": 12, "padding": [10, 14], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "TableMSSummaryIcon", "width": 16, "height": 16, "iconFontName": "info", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "TableMSSummaryText", "fill": "#22C55E", "content": "Đã chọn 2 bàn để gộp: 06, 12", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ] - }, - { - "type": "frame", - "id": "TableMSFooter", - "width": "fill_container", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, - "padding": [16, 20], - "children": [ - {"type": "frame", "id": "TableMSMergeBtn", "width": "fill_container", "height": 52, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8533", "position": 1}]}, "cornerRadius": 12, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "TableMSMergeIcon", "width": 20, "height": 20, "iconFontName": "merge", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "TableMSMergeText", "fill": "$text-primary", "content": "Gộp bà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"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/restaurant/workflow/table-select.pen b/pencil-design/src/pages/tPOS/pos/restaurant/workflow/table-select.pen deleted file mode 100644 index 97b87e74..00000000 --- a/pencil-design/src/pages/tPOS/pos/restaurant/workflow/table-select.pen +++ /dev/null @@ -1,103 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "TableSelectDialog", - "name": "Dialog/Table Select", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "#0A0A0B80", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "TableModal", - "width": 560, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 20, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "TableHeader", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "TableHeaderLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "TableIcon", "width": 44, "height": 44, "fill": "#3B82F61A", "cornerRadius": 22, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "TableIconI", "width": 22, "height": 22, "iconFontName": "layout-grid", "iconFontFamily": "lucide", "fill": "#3B82F6"} - ]}, - {"type": "frame", "id": "TableTitleBlock", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "TableTitle", "fill": "#FFFFFF", "content": "Chọn bàn", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}, - {"type": "text", "id": "TableDesc", "fill": "#8B8B90", "content": "Tầng 1 • 8/12 bàn trống", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "TableClose", "width": 32, "height": 32, "fill": "#2A2A2E", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "TableCloseIcon", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#8B8B90"} - ]} - ] - }, - { - "type": "frame", - "id": "TableFloors", - "width": "fill_container", - "gap": 8, - "children": [ - {"type": "frame", "id": "TableFloor1", "fill": "#3B82F6", "cornerRadius": 8, "padding": [8, 16], "children": [{"type": "text", "id": "TableFloor1T", "fill": "#FFF", "content": "Tầng 1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, - {"type": "frame", "id": "TableFloor2", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [8, 16], "children": [{"type": "text", "id": "TableFloor2T", "fill": "#8B8B90", "content": "Tầng 2", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "TableFloorVIP", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [8, 16], "children": [{"type": "text", "id": "TableFloorVIPT", "fill": "#8B8B90", "content": "Phòng VIP", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]} - ] - }, - { - "type": "frame", - "id": "TableGrid", - "width": "fill_container", - "fill": "#0A0A0B", - "cornerRadius": 16, - "padding": 20, - "gap": 12, - "layout": "vertical", - "children": [ - {"type": "frame", "id": "TableRow1", "width": "fill_container", "gap": 12, "justifyContent": "center", "children": [ - {"type": "frame", "id": "Table1", "width": 72, "height": 72, "fill": "#22C55E20", "stroke": {"thickness": 2, "fill": "#22C55E"}, "cornerRadius": 12, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "gap": 2, "children": [{"type": "text", "id": "Table1Num", "fill": "#22C55E", "content": "01", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "Table1Cap", "fill": "#22C55E", "content": "4 ghế", "fontFamily": "Roboto", "fontSize": 10}]}, - {"type": "frame", "id": "Table2", "width": 72, "height": 72, "fill": "#FF5C0020", "stroke": {"thickness": 2, "fill": "#FF5C00"}, "cornerRadius": 12, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "gap": 2, "children": [{"type": "text", "id": "Table2Num", "fill": "#FF5C00", "content": "02", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "Table2Time", "fill": "#FF5C00", "content": "45'", "fontFamily": "Roboto", "fontSize": 10}]}, - {"type": "frame", "id": "Table3", "width": 72, "height": 72, "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 12, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "gap": 2, "children": [{"type": "text", "id": "Table3Num", "fill": "#8B8B90", "content": "03", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "Table3Cap", "fill": "#6B6B70", "content": "2 ghế", "fontFamily": "Roboto", "fontSize": 10}]}, - {"type": "frame", "id": "Table4", "width": 72, "height": 72, "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 12, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "gap": 2, "children": [{"type": "text", "id": "Table4Num", "fill": "#8B8B90", "content": "04", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "Table4Cap", "fill": "#6B6B70", "content": "4 ghế", "fontFamily": "Roboto", "fontSize": 10}]} - ]}, - {"type": "frame", "id": "TableRow2", "width": "fill_container", "gap": 12, "justifyContent": "center", "children": [ - {"type": "frame", "id": "Table5", "width": 72, "height": 72, "fill": "#3B82F620", "stroke": {"thickness": 2, "fill": "#3B82F6"}, "cornerRadius": 12, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "gap": 2, "children": [{"type": "text", "id": "Table5Num", "fill": "#3B82F6", "content": "05", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "icon_font", "id": "Table5Check", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#3B82F6"}]}, - {"type": "frame", "id": "Table6", "width": 72, "height": 72, "fill": "#FF5C0020", "stroke": {"thickness": 2, "fill": "#FF5C00"}, "cornerRadius": 12, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "gap": 2, "children": [{"type": "text", "id": "Table6Num", "fill": "#FF5C00", "content": "06", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "Table6Time", "fill": "#FF5C00", "content": "20'", "fontFamily": "Roboto", "fontSize": 10}]}, - {"type": "frame", "id": "Table7", "width": 72, "height": 72, "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 12, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "gap": 2, "children": [{"type": "text", "id": "Table7Num", "fill": "#8B8B90", "content": "07", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "Table7Cap", "fill": "#6B6B70", "content": "6 ghế", "fontFamily": "Roboto", "fontSize": 10}]}, - {"type": "frame", "id": "Table8", "width": 72, "height": 72, "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 12, "layout": "vertical", "justifyContent": "center", "alignItems": "center", "gap": 2, "children": [{"type": "text", "id": "Table8Num", "fill": "#8B8B90", "content": "08", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "Table8Cap", "fill": "#6B6B70", "content": "8 ghế", "fontFamily": "Roboto", "fontSize": 10}]} - ]} - ] - }, - { - "type": "frame", - "id": "TableLegend", - "width": "fill_container", - "gap": 16, - "justifyContent": "center", - "children": [ - {"type": "frame", "id": "TableLegend1", "gap": 6, "alignItems": "center", "children": [{"type": "frame", "id": "TableLegend1Dot", "width": 12, "height": 12, "fill": "#22C55E", "cornerRadius": 3}, {"type": "text", "id": "TableLegend1T", "fill": "#8B8B90", "content": "Trống", "fontFamily": "Roboto", "fontSize": 11}]}, - {"type": "frame", "id": "TableLegend2", "gap": 6, "alignItems": "center", "children": [{"type": "frame", "id": "TableLegend2Dot", "width": 12, "height": 12, "fill": "#FF5C00", "cornerRadius": 3}, {"type": "text", "id": "TableLegend2T", "fill": "#8B8B90", "content": "Đang dùng", "fontFamily": "Roboto", "fontSize": 11}]}, - {"type": "frame", "id": "TableLegend3", "gap": 6, "alignItems": "center", "children": [{"type": "frame", "id": "TableLegend3Dot", "width": 12, "height": 12, "fill": "#3B82F6", "cornerRadius": 3}, {"type": "text", "id": "TableLegend3T", "fill": "#8B8B90", "content": "Đã chọn", "fontFamily": "Roboto", "fontSize": 11}]} - ] - }, - {"type": "frame", "id": "TableActions", "width": "fill_container", "gap": 12, "children": [ - {"type": "frame", "id": "TableCancel", "width": "fill_container", "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "TableCancelT", "fill": "#ADADB0", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "TableConfirm", "width": "fill_container", "height": 48, "fill": "#3B82F6", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "TableConfirmIcon", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFF"}, {"type": "text", "id": "TableConfirmT", "fill": "#FFF", "content": "Xác nhận Bàn 05", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]} - ]} - ] - } - ] - } - ] -} diff --git a/pencil-design/src/pages/tPOS/pos/restaurant/workflow/waiter-pad.pen b/pencil-design/src/pages/tPOS/pos/restaurant/workflow/waiter-pad.pen deleted file mode 100644 index 642ded8c..00000000 --- a/pencil-design/src/pages/tPOS/pos/restaurant/workflow/waiter-pad.pen +++ /dev/null @@ -1,80 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "WaiterPadScreen", - "name": "Restaurant/Waiter Pad", - "reusable": true, - "width": 768, - "height": 1024, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - {"type": "frame", "id": "WPHeader", "width": "fill_container", "height": 60, "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [0, 16], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "WPHeaderLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "WPBackBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WPBackIcon", "width": 18, "height": 18, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"}]}, - {"type": "frame", "id": "WPTableBadge", "fill": "$orange-primary", "cornerRadius": 8, "padding": [6, 12], "children": [{"type": "text", "id": "WPTableText", "fill": "$text-primary", "content": "Bàn 05", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"}]}, - {"type": "text", "id": "WPOrderNum", "fill": "$text-tertiary", "content": "Đơn #0092", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "WPHeaderRight", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "WPWaiter", "gap": 8, "alignItems": "center", "children": [{"type": "frame", "id": "WPWaiterAvatar", "width": 28, "height": 28, "fill": "#22C55E30", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WPWaiterInit", "fill": "#22C55E", "content": "M", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, {"type": "text", "id": "WPWaiterName", "fill": "$text-secondary", "content": "Minh", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "text", "id": "WPTime", "fill": "$text-primary", "content": "19:45", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "WPCategoryBar", "width": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [10, 16], "gap": 8, "children": [ - {"type": "frame", "id": "WPCat1", "fill": "$orange-primary", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "WPCat1Text", "fill": "$text-primary", "content": "Khai vị", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "WPCat2", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "WPCat2Text", "fill": "$text-secondary", "content": "Món chính", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "WPCat3", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "WPCat3Text", "fill": "$text-secondary", "content": "Hải sản", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "WPCat4", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "WPCat4Text", "fill": "$text-secondary", "content": "Đồ uống", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "WPCat5", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "WPCat5Text", "fill": "$text-secondary", "content": "Tráng miệng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]} - ]}, - {"type": "frame", "id": "WPMenuGrid", "width": "fill_container", "height": "fill_container", "padding": 16, "gap": 12, "wrap": true, "alignContent": "flex_start", "children": [ - {"type": "frame", "id": "WPItem1", "width": 230, "fill": "$bg-elevated", "cornerRadius": 14, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "WPItem1Img", "width": "fill_container", "height": 100, "fill": "#EF444418"}, {"type": "frame", "id": "WPItem1Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 12, "children": [{"type": "text", "id": "WPItem1Name", "fill": "$text-primary", "content": "Bò Lúc Lắc", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "WPItem1Bottom", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "WPItem1Price", "fill": "$orange-primary", "content": "185,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "frame", "id": "WPItem1Add", "width": 32, "height": 32, "fill": "$orange-primary", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WPItem1AddIcon", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"}]}]}]}]}, - {"type": "frame", "id": "WPItem2", "width": 230, "fill": "$bg-elevated", "cornerRadius": 14, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "WPItem2Img", "width": "fill_container", "height": 100, "fill": "#F59E0B18"}, {"type": "frame", "id": "WPItem2Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 12, "children": [{"type": "text", "id": "WPItem2Name", "fill": "$text-primary", "content": "Gà Nướng Mật Ong", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "WPItem2Bottom", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "WPItem2Price", "fill": "$orange-primary", "content": "165,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "frame", "id": "WPItem2Qty", "gap": 6, "alignItems": "center", "children": [{"type": "frame", "id": "WPItem2Minus", "width": 28, "height": 28, "fill": "$bg-surface", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WPItem2MinusIcon", "width": 14, "height": 14, "iconFontName": "minus", "iconFontFamily": "lucide", "fill": "$text-secondary"}]}, {"type": "text", "id": "WPItem2QtyNum", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "frame", "id": "WPItem2Plus", "width": 28, "height": 28, "fill": "$orange-primary", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WPItem2PlusIcon", "width": 14, "height": 14, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"}]}]}]}]}]}, - {"type": "frame", "id": "WPItem3", "width": 230, "fill": "$bg-elevated", "cornerRadius": 14, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "WPItem3Img", "width": "fill_container", "height": 100, "fill": "#3B82F618"}, {"type": "frame", "id": "WPItem3Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 12, "children": [{"type": "text", "id": "WPItem3Name", "fill": "$text-primary", "content": "Cá Hồi Sốt Cam", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "WPItem3Bottom", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "WPItem3Price", "fill": "$orange-primary", "content": "220,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "frame", "id": "WPItem3Add", "width": 32, "height": 32, "fill": "$orange-primary", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WPItem3AddIcon", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"}]}]}]}]}, - {"type": "frame", "id": "WPItem4", "width": 230, "fill": "$bg-elevated", "cornerRadius": 14, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "WPItem4Img", "width": "fill_container", "height": 100, "fill": "#22C55E18"}, {"type": "frame", "id": "WPItem4Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 12, "children": [{"type": "text", "id": "WPItem4Name", "fill": "$text-primary", "content": "Salad Caesar", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "WPItem4Bottom", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "WPItem4Price", "fill": "$orange-primary", "content": "85,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "frame", "id": "WPItem4Add", "width": 32, "height": 32, "fill": "$orange-primary", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WPItem4AddIcon", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"}]}]}]}]}, - {"type": "frame", "id": "WPItem5", "width": 230, "fill": "$bg-elevated", "cornerRadius": 14, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "WPItem5Img", "width": "fill_container", "height": 100, "fill": "#F59E0B18"}, {"type": "frame", "id": "WPItem5Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 12, "children": [{"type": "text", "id": "WPItem5Name", "fill": "$text-primary", "content": "Bia Tiger", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "WPItem5Bottom", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "WPItem5Price", "fill": "$orange-primary", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "frame", "id": "WPItem5Add", "width": 32, "height": 32, "fill": "$orange-primary", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WPItem5AddIcon", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"}]}]}]}]}, - {"type": "frame", "id": "WPItem6", "width": 230, "fill": "$bg-elevated", "cornerRadius": 14, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "WPItem6Img", "width": "fill_container", "height": 100, "fill": "#8B5CF618"}, {"type": "frame", "id": "WPItem6Content", "width": "fill_container", "layout": "vertical", "gap": 6, "padding": 12, "children": [{"type": "text", "id": "WPItem6Name", "fill": "$text-primary", "content": "Rượu Vang Đỏ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "WPItem6Bottom", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "WPItem6Price", "fill": "$orange-primary", "content": "450,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "frame", "id": "WPItem6Add", "width": 32, "height": 32, "fill": "$orange-primary", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WPItem6AddIcon", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"}]}]}]}]} - ]}, - {"type": "frame", "id": "WPOrderSheet", "width": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "layout": "vertical", "children": [ - {"type": "frame", "id": "WPOrderHeader", "width": "fill_container", "padding": [12, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "WPOrderSummary", "gap": 8, "alignItems": "center", "children": [{"type": "text", "id": "WPOrderCount", "fill": "$text-primary", "content": "3 món", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "text", "id": "WPOrderTotal", "fill": "$orange-primary", "content": "• 385,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}, - {"type": "frame", "id": "WPOrderExpand", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "WPOrderExpandIcon", "width": 16, "height": 16, "iconFontName": "chevron-up", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "WPOrderExpandText", "fill": "$text-secondary", "content": "Xem", "fontFamily": "Roboto", "fontSize": 13}]} - ]}, - {"type": "frame", "id": "WPOrderItems", "width": "fill_container", "layout": "vertical", "padding": [8, 16], "gap": 8, "children": [ - {"type": "frame", "id": "WPOrdItem1", "width": "fill_container", "fill": "$bg-surface", "cornerRadius": 10, "padding": [10, 12], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "WPOrdItem1Left", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "WPOrdItem1Qty", "width": 28, "height": 28, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WPOrdItem1QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, {"type": "frame", "id": "WPOrdItem1Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "WPOrdItem1Name", "fill": "$text-primary", "content": "Bò Lúc Lắc", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "text", "id": "WPOrdItem1Note", "fill": "$text-tertiary", "content": "Không hành", "fontFamily": "Roboto", "fontSize": 11}]}]}, - {"type": "frame", "id": "WPOrdItem1Right", "gap": 8, "alignItems": "center", "children": [{"type": "text", "id": "WPOrdItem1Price", "fill": "$text-primary", "content": "185k", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "icon_font", "id": "WPOrdItem1Edit", "width": 16, "height": 16, "iconFontName": "pencil", "iconFontFamily": "lucide", "fill": "$text-tertiary"}]} - ]}, - {"type": "frame", "id": "WPOrdItem2", "width": "fill_container", "fill": "$bg-surface", "cornerRadius": 10, "padding": [10, 12], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "WPOrdItem2Left", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "WPOrdItem2Qty", "width": 28, "height": 28, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WPOrdItem2QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, {"type": "text", "id": "WPOrdItem2Name", "fill": "$text-primary", "content": "Gà Nướng Mật Ong", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "text", "id": "WPOrdItem2Price", "fill": "$text-primary", "content": "165k", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "WPOrdItem3", "width": "fill_container", "fill": "$bg-surface", "cornerRadius": 10, "padding": [10, 12], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "WPOrdItem3Left", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "WPOrdItem3Qty", "width": 28, "height": 28, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WPOrdItem3QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, {"type": "text", "id": "WPOrdItem3Name", "fill": "$text-primary", "content": "Bia Tiger", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "text", "id": "WPOrdItem3Price", "fill": "$text-primary", "content": "35k", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "WPOrderActions", "width": "fill_container", "padding": 16, "gap": 12, "children": [ - {"type": "frame", "id": "WPSendKitchen", "width": "fill_container", "height": 52, "fill": "#22C55E", "cornerRadius": 12, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WPSendIcon", "width": 20, "height": 20, "iconFontName": "chef-hat", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "WPSendText", "fill": "$text-primary", "content": "Gửi bếp", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}, - {"type": "frame", "id": "WPPayment", "width": "fill_container", "height": 52, "fill": "$orange-primary", "cornerRadius": 12, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WPPayIcon", "width": 20, "height": 20, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "WPPayText", "fill": "$text-primary", "content": "Thanh toá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"}, - "bg-surface": {"type": "color", "value": "#111113"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} 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 deleted file mode 100644 index 1e7d2a06..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/barcode-scan.pen +++ /dev/null @@ -1,96 +0,0 @@ -{ - "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/change-calculator.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/change-calculator.pen deleted file mode 100644 index 6cf41cb4..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/change-calculator.pen +++ /dev/null @@ -1,112 +0,0 @@ -{ - "version": "2.7", - "children": [ - { - "type": "frame", - "id": "ChangeCalculatorDialog", - "name": "Dialog/ChangeCalculator", - "reusable": true, - "clip": true, - "width": 380, - "height": 400, - "fill": "$bg-elevated", - "cornerRadius": 24, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "ChangeCalcHeader", - "width": "fill_container", - "padding": [16, 20], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "ChangeCalcHeaderLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "ChangeCalcIconBg", "width": 40, "height": 40, "fill": "#22C55E20", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ChangeCalcIcon", "width": 20, "height": 20, "iconFontName": "calculator", "iconFontFamily": "lucide", "fill": "#22C55E"} - ]}, - {"type": "text", "id": "ChangeCalcTitle", "fill": "$text-primary", "content": "Tính tiền thối", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "ChangeCalcCloseBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ChangeCalcCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "ChangeCalcContent", - "width": "fill_container", - "height": "fill_container", - "padding": 20, - "layout": "vertical", - "gap": 16, - "children": [ - {"type": "frame", "id": "ChangeCalcAmounts", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 16, "padding": 16, "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "ChangeCalcTotal", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "ChangeCalcTotalLabel", "fill": "$text-secondary", "content": "Tổng tiền:", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, - {"type": "text", "id": "ChangeCalcTotalValue", "fill": "$text-primary", "content": "387,500₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "ChangeCalcReceived", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "ChangeCalcReceivedLabel", "fill": "$text-secondary", "content": "Tiền nhận:", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, - {"type": "text", "id": "ChangeCalcReceivedValue", "fill": "#3B82F6", "content": "500,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "ChangeCalcDivider", "width": "fill_container", "height": 1, "fill": "$border-subtle"}, - {"type": "frame", "id": "ChangeCalcChange", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "ChangeCalcChangeLabel", "fill": "$text-primary", "content": "Tiền thối:", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "text", "id": "ChangeCalcChangeValue", "fill": "#22C55E", "content": "112,500₫", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"} - ]} - ]}, - {"type": "frame", "id": "ChangeCalcBreakdown", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "ChangeCalcBreakdownLabel", "fill": "$text-secondary", "content": "Gợi ý thối tiền:", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "ChangeCalcBreakdownRow1", "width": "fill_container", "gap": 8, "children": [ - {"type": "frame", "id": "ChangeBreak1", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 10, "padding": [10, 12], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "ChangeBreak1Denom", "fill": "$text-primary", "content": "100,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "text", "id": "ChangeBreak1Count", "fill": "$orange-primary", "content": "×1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "ChangeBreak2", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 10, "padding": [10, 12], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "ChangeBreak2Denom", "fill": "$text-primary", "content": "10,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "text", "id": "ChangeBreak2Count", "fill": "$orange-primary", "content": "×1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "ChangeCalcBreakdownRow2", "width": "fill_container", "gap": 8, "children": [ - {"type": "frame", "id": "ChangeBreak3", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 10, "padding": [10, 12], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "ChangeBreak3Denom", "fill": "$text-primary", "content": "2,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "text", "id": "ChangeBreak3Count", "fill": "$orange-primary", "content": "×1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "ChangeBreak4", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 10, "padding": [10, 12], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "ChangeBreak4Denom", "fill": "$text-primary", "content": "500₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "text", "id": "ChangeBreak4Count", "fill": "$orange-primary", "content": "×1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "ChangeCalcFooter", - "width": "fill_container", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, - "padding": [16, 20], - "children": [ - {"type": "frame", "id": "ChangeCalcDoneBtn", "width": "fill_container", "height": 52, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#22C55E", "position": 0}, {"color": "#16A34A", "position": 1}]}, "cornerRadius": 12, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ChangeCalcDoneIcon", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "ChangeCalcDoneText", "fill": "$text-primary", "content": "Hoàn tấ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"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/confirmation.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/confirmation.pen deleted file mode 100644 index e2cdc0fe..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/confirmation.pen +++ /dev/null @@ -1,224 +0,0 @@ -{ - "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/coupon-redeem.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/coupon-redeem.pen deleted file mode 100644 index be9e8471..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/coupon-redeem.pen +++ /dev/null @@ -1,92 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "CouponRedeemDialog", - "name": "Dialog/CouponRedeem", - "reusable": true, - "width": 400, - "height": 480, - "fill": "$bg-elevated", - "cornerRadius": 20, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "CouponContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "gap": 20, - "padding": [28, 24], - "children": [ - {"type": "frame", "id": "CouponIconWrap", "width": "fill_container", "justifyContent": "center", "children": [ - {"type": "frame", "id": "CouponIconBg", "width": 72, "height": 72, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#EC489920", "position": 0}, {"color": "#F472B615", "position": 1}]}, "cornerRadius": 36, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "frame", "id": "CouponIconInner", "width": 52, "height": 52, "fill": "#EC489920", "cornerRadius": 26, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CouponIcon", "width": 28, "height": 28, "iconFontName": "ticket", "iconFontFamily": "lucide", "fill": "#EC4899"} - ]} - ]} - ]}, - {"type": "frame", "id": "CouponTitle", "width": "fill_container", "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "CouponTitleText", "fill": "$text-primary", "content": "Đổi Mã Coupon", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700", "textAlign": "center"}, - {"type": "text", "id": "CouponSubtitle", "fill": "$text-tertiary", "content": "Nhập mã để áp dụng ưu đãi", "fontFamily": "Roboto", "fontSize": 14, "textAlign": "center"} - ]}, - {"type": "frame", "id": "CouponInput", "width": "fill_container", "height": 56, "fill": "$bg-page", "cornerRadius": 14, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "padding": [0, 16], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CouponInputIcon", "width": 22, "height": 22, "iconFontName": "ticket", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "text", "id": "CouponInputVal", "fill": "$text-primary", "content": "SUMMER2026", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700", "letterSpacing": 2, "width": "fill_container"} - ]}, - {"type": "frame", "id": "CouponResult", "width": "fill_container", "fill": "#22C55E15", "cornerRadius": 14, "padding": 16, "gap": 12, "layout": "vertical", "children": [ - {"type": "frame", "id": "ResultHeader", "width": "fill_container", "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ResultIcon", "width": 20, "height": 20, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "ResultTitle", "fill": "#22C55E", "content": "Mã hợp lệ!", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "ResultDetails", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 10, "padding": 12, "gap": 8, "layout": "vertical", "children": [ - {"type": "frame", "id": "ResultRow1", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "ResultLabel1", "fill": "$text-secondary", "content": "Ưu đãi", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "ResultValue1", "fill": "#EC4899", "content": "Giảm 50,000đ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "ResultRow2", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "ResultLabel2", "fill": "$text-secondary", "content": "Đơn tối thiểu", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "ResultValue2", "fill": "$text-primary", "content": "100,000đ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "ResultRow3", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "ResultLabel3", "fill": "$text-secondary", "content": "Hết hạn", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "ResultValue3", "fill": "$text-primary", "content": "31/03/2026", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "CouponFooter", - "width": "fill_container", - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "gap": 12, - "padding": [16, 24], - "children": [ - {"type": "frame", "id": "CancelCouponBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "CancelCouponText", "fill": "$text-secondary", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "ApplyCouponBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ApplyCouponIcon", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "ApplyCouponText", "fill": "#FFFFFF", "content": "Áp dụng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/customer-add.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/customer-add.pen deleted file mode 100644 index 9f83e95b..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/customer-add.pen +++ /dev/null @@ -1,468 +0,0 @@ -{ - "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 deleted file mode 100644 index 4b43eb01..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/customer-edit.pen +++ /dev/null @@ -1,553 +0,0 @@ -{ - "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/customer-history.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/customer-history.pen deleted file mode 100644 index 21e7142a..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/customer-history.pen +++ /dev/null @@ -1,136 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "CustomerHistoryDialog", - "name": "Dialog/CustomerHistory", - "reusable": true, - "width": 460, - "height": 600, - "fill": "$bg-elevated", - "cornerRadius": 20, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "CustHeader", - "width": "fill_container", - "padding": [16, 20], - "gap": 12, - "alignItems": "center", - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "children": [ - {"type": "frame", "id": "CustAvatar", "width": 48, "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#8B5CF6", "position": 0}, {"color": "#A78BFA", "position": 1}]}, "cornerRadius": 24, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "CustInitials", "fill": "#FFFFFF", "content": "TL", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "CustInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "CustName", "fill": "$text-primary", "content": "Trần Thị Lan", "fontFamily": "Roboto", "fontSize": 17, "fontWeight": "700"}, - {"type": "frame", "id": "CustMeta", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "CustVip", "fill": "#EAB30820", "cornerRadius": 6, "padding": [3, 8], "children": [ - {"type": "text", "id": "CustVipText", "fill": "#EAB308", "content": "VIP Gold", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]}, - {"type": "text", "id": "CustPhone", "fill": "$text-tertiary", "content": "0912 345 678", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "CustClose", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CustCloseIcon", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "CustStats", - "width": "fill_container", - "padding": [12, 20], - "gap": 10, - "children": [ - {"type": "frame", "id": "Stat1", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 12, "padding": 12, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "Stat1Value", "fill": "$orange-primary", "content": "47", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "text", "id": "Stat1Label", "fill": "$text-tertiary", "content": "Đơn hàng", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "frame", "id": "Stat2", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 12, "padding": 12, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "Stat2Value", "fill": "#22C55E", "content": "2.8M", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "text", "id": "Stat2Label", "fill": "$text-tertiary", "content": "Tổng chi", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "frame", "id": "Stat3", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 12, "padding": 12, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "Stat3Value", "fill": "#3B82F6", "content": "1,250", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "text", "id": "Stat3Label", "fill": "$text-tertiary", "content": "Điểm tích lũy", "fontFamily": "Roboto", "fontSize": 11} - ]} - ] - }, - { - "type": "frame", - "id": "CustOrders", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "padding": [0, 20], - "gap": 8, - "children": [ - {"type": "text", "id": "OrdersTitle", "fill": "$text-secondary", "content": "Lịch sử gần đây", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "padding": [0, 0, 6, 0]}, - {"type": "frame", "id": "Order1", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 12, "padding": 14, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "Order1Icon", "width": 40, "height": 40, "fill": "#22C55E15", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Order1IconI", "width": 20, "height": 20, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#22C55E"} - ]}, - {"type": "frame", "id": "Order1Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "Order1Id", "fill": "$text-primary", "content": "#00458 - Cà phê sữa đá (2)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "text", "id": "Order1Date", "fill": "$text-tertiary", "content": "Hôm nay, 14:30", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "text", "id": "Order1Total", "fill": "$text-primary", "content": "70,000đ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "Order2", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 12, "padding": 14, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "Order2Icon", "width": 40, "height": 40, "fill": "#22C55E15", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Order2IconI", "width": 20, "height": 20, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#22C55E"} - ]}, - {"type": "frame", "id": "Order2Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "Order2Id", "fill": "$text-primary", "content": "#00412 - Combo sáng (1)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "text", "id": "Order2Date", "fill": "$text-tertiary", "content": "Hôm qua, 08:15", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "text", "id": "Order2Total", "fill": "$text-primary", "content": "55,000đ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "Order3", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 12, "padding": 14, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "Order3Icon", "width": 40, "height": 40, "fill": "#22C55E15", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Order3IconI", "width": 20, "height": 20, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#22C55E"} - ]}, - {"type": "frame", "id": "Order3Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "Order3Id", "fill": "$text-primary", "content": "#00389 - Trà sữa (3)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "text", "id": "Order3Date", "fill": "$text-tertiary", "content": "03/02, 16:45", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "text", "id": "Order3Total", "fill": "$text-primary", "content": "135,000đ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - }, - { - "type": "frame", - "id": "CustFooter", - "width": "fill_container", - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "gap": 12, - "padding": [16, 20], - "children": [ - {"type": "frame", "id": "EditCustBtn", "width": "fill_container", "height": 46, "fill": "$bg-interactive", "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "EditCustIcon", "width": 18, "height": 18, "iconFontName": "user-pen", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "EditCustText", "fill": "$text-secondary", "content": "Sửa thông tin", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "ApplyBtn", "width": "fill_container", "height": 46, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ApplyIcon", "width": 18, "height": 18, "iconFontName": "user-check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "ApplyText", "fill": "#FFFFFF", "content": "Áp dụng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/customer-note.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/customer-note.pen deleted file mode 100644 index caa49f16..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/customer-note.pen +++ /dev/null @@ -1,104 +0,0 @@ -{ - "version": "2.7", - "children": [ - { - "type": "frame", - "id": "CustomerNoteDialog", - "name": "Dialog/CustomerNote", - "reusable": true, - "clip": true, - "width": 400, - "height": 440, - "fill": "$bg-elevated", - "cornerRadius": 24, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "CustomerNoteHeader", - "width": "fill_container", - "padding": [16, 20], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "CustomerNoteHeaderLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "CustomerNoteIconBg", "width": 40, "height": 40, "fill": "#F59E0B20", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CustomerNoteIcon", "width": 20, "height": 20, "iconFontName": "notepad-text", "iconFontFamily": "lucide", "fill": "#F59E0B"} - ]}, - {"type": "text", "id": "CustomerNoteTitle", "fill": "$text-primary", "content": "Ghi chú khách hàng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "CustomerNoteCloseBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CustomerNoteCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "CustomerNoteContent", - "width": "fill_container", - "height": "fill_container", - "padding": 20, - "layout": "vertical", - "gap": 16, - "children": [ - {"type": "frame", "id": "CustomerNoteInfo", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "CustomerNoteAvatar", "width": 44, "height": 44, "fill": "#8B5CF630", "cornerRadius": 22, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "CustomerNoteAvatarText", "fill": "#8B5CF6", "content": "NV", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "CustomerNoteInfoText", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "CustomerNoteName", "fill": "$text-primary", "content": "Nguyễn Văn A", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, - {"type": "text", "id": "CustomerNotePhone", "fill": "$text-tertiary", "content": "0912 345 678 • VIP Gold", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"} - ]} - ]}, - {"type": "frame", "id": "CustomerNoteInputSection", "width": "fill_container", "layout": "vertical", "gap": 8, "height": "fill_container", "children": [ - {"type": "text", "id": "CustomerNoteInputLabel", "fill": "$text-secondary", "content": "Ghi chú", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "CustomerNoteTextarea", "width": "fill_container", "height": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "children": [ - {"type": "text", "id": "CustomerNoteText", "fill": "$text-primary", "content": "Khách thích uống ít đá, không đường. Thường gọi Americano size L. Dị ứng với đậu phộng.", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal", "lineHeight": 1.5} - ]} - ]}, - {"type": "frame", "id": "CustomerNoteQuickTags", "width": "fill_container", "gap": 8, "children": [ - {"type": "frame", "id": "QuickTag1", "fill": "$bg-page", "cornerRadius": 8, "padding": [6, 12], "children": [ - {"type": "text", "id": "QuickTag1Text", "fill": "$text-secondary", "content": "🧊 Ít đá", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "QuickTag2", "fill": "$bg-page", "cornerRadius": 8, "padding": [6, 12], "children": [ - {"type": "text", "id": "QuickTag2Text", "fill": "$text-secondary", "content": "🍬 Ít đường", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "QuickTag3", "fill": "$bg-page", "cornerRadius": 8, "padding": [6, 12], "children": [ - {"type": "text", "id": "QuickTag3Text", "fill": "$text-secondary", "content": "⚠️ Dị ứng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "CustomerNoteFooter", - "width": "fill_container", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, - "gap": 12, - "padding": [16, 20], - "children": [ - {"type": "frame", "id": "CustomerNoteCancelBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "CustomerNoteCancelText", "fill": "$text-secondary", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "CustomerNoteSaveBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8533", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CustomerNoteSaveIcon", "width": 18, "height": 18, "iconFontName": "save", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "CustomerNoteSaveText", "fill": "$text-primary", "content": "Lưu ghi chú", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/customer-search.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/customer-search.pen deleted file mode 100644 index 311d3280..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/customer-search.pen +++ /dev/null @@ -1,105 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "CustomerSearchDialog", - "name": "Dialog/Customer Search", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "#0A0A0B80", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CustomerModal", - "width": 480, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 20, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "CustomerHeader", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "CustomerHeaderLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "CustomerIcon", "width": 44, "height": 44, "fill": "#14B8A61A", "cornerRadius": 22, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CustomerIconI", "width": 22, "height": 22, "iconFontName": "user-search", "iconFontFamily": "lucide", "fill": "#14B8A6"} - ]}, - {"type": "frame", "id": "CustomerTitleBlock", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "CustomerTitle", "fill": "#FFFFFF", "content": "Tìm khách hàng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}, - {"type": "text", "id": "CustomerDesc", "fill": "#8B8B90", "content": "SĐT hoặc tên thành viên", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "CustomerClose", "width": 32, "height": 32, "fill": "#2A2A2E", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CustomerCloseIcon", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#8B8B90"} - ]} - ] - }, - {"type": "frame", "id": "CustomerSearch", "width": "fill_container", "height": 48, "fill": "#1A1A1D", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "#14B8A6"}, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CustomerSearchIcon", "width": 18, "height": 18, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "#14B8A6"}, - {"type": "text", "id": "CustomerSearchText", "fill": "#FFFFFF", "content": "0901", "fontFamily": "Roboto", "fontSize": 14}, - {"type": "frame", "id": "CustomerSearchClear", "width": 20, "height": 20, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "CustomerSearchClearI", "width": 12, "height": 12, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#6B6B70"}]} - ]}, - { - "type": "frame", - "id": "CustomerResults", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - {"type": "text", "id": "CustomerResultsTitle", "fill": "#6B6B70", "content": "Kết quả (3)", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}, - {"type": "frame", "id": "CustomerResult1", "width": "fill_container", "fill": "#14B8A610", "stroke": {"thickness": 1, "fill": "#14B8A6"}, "cornerRadius": 12, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "CustomerResult1Left", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "CustomerResult1Avatar", "width": 40, "height": 40, "fill": "#14B8A630", "cornerRadius": 20, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "CustomerResult1Initial", "fill": "#14B8A6", "content": "N", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]}, - {"type": "frame", "id": "CustomerResult1Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "frame", "id": "CustomerResult1Row", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "CustomerResult1Name", "fill": "#FFFFFF", "content": "Nguyễn Văn A", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "frame", "id": "CustomerResult1VIP", "fill": "#F59E0B", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "CustomerResult1VIPText", "fill": "#000", "content": "Gold", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "700"}]} - ]}, - {"type": "text", "id": "CustomerResult1Phone", "fill": "#8B8B90", "content": "0901***234 • 2,520 điểm", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "icon_font", "id": "CustomerResult1Check", "width": 20, "height": 20, "iconFontName": "check-circle-2", "iconFontFamily": "lucide", "fill": "#14B8A6"} - ]}, - {"type": "frame", "id": "CustomerResult2", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "CustomerResult2Left", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "CustomerResult2Avatar", "width": 40, "height": 40, "fill": "#2A2A2E", "cornerRadius": 20, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "CustomerResult2Initial", "fill": "#8B8B90", "content": "T", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]}, - {"type": "frame", "id": "CustomerResult2Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "CustomerResult2Name", "fill": "#FFFFFF", "content": "Trần Thị B", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "CustomerResult2Phone", "fill": "#8B8B90", "content": "0901***567 • 850 điểm", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "CustomerResult2Btn", "fill": "#2A2A2E", "cornerRadius": 6, "padding": [6, 10], "children": [{"type": "text", "id": "CustomerResult2BtnT", "fill": "#ADADB0", "content": "Chọn", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]} - ]}, - {"type": "frame", "id": "CustomerResult3", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "CustomerResult3Left", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "CustomerResult3Avatar", "width": 40, "height": 40, "fill": "#2A2A2E", "cornerRadius": 20, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "CustomerResult3Initial", "fill": "#8B8B90", "content": "L", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]}, - {"type": "frame", "id": "CustomerResult3Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "CustomerResult3Name", "fill": "#FFFFFF", "content": "Lê Văn C", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "CustomerResult3Phone", "fill": "#8B8B90", "content": "0901***891 • 150 điểm", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "CustomerResult3Btn", "fill": "#2A2A2E", "cornerRadius": 6, "padding": [6, 10], "children": [{"type": "text", "id": "CustomerResult3BtnT", "fill": "#ADADB0", "content": "Chọn", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]} - ]} - ] - }, - {"type": "frame", "id": "CustomerDivider", "width": "fill_container", "height": 1, "fill": "#1F1F23"}, - {"type": "frame", "id": "CustomerNewBtn", "width": "fill_container", "height": 44, "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E", "style": "dashed"}, "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CustomerNewIcon", "width": 16, "height": 16, "iconFontName": "user-plus", "iconFontFamily": "lucide", "fill": "#8B8B90"}, - {"type": "text", "id": "CustomerNewText", "fill": "#8B8B90", "content": "Tạo khách hàng mới", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ] - } - ] - } - ] -} diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/data-export.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/data-export.pen deleted file mode 100644 index 8dc7fc40..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/data-export.pen +++ /dev/null @@ -1,126 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "DataExportDialog", - "name": "Dialog/DataExport", - "reusable": true, - "width": 420, - "height": 540, - "fill": "$bg-elevated", - "cornerRadius": 20, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "ExportHeader", - "width": "fill_container", - "padding": [16, 20], - "gap": 12, - "alignItems": "center", - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "children": [ - {"type": "frame", "id": "ExportIconBg", "width": 44, "height": 44, "fill": "#3B82F615", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ExportIcon", "width": 22, "height": 22, "iconFontName": "file-down", "iconFontFamily": "lucide", "fill": "#3B82F6"} - ]}, - {"type": "frame", "id": "ExportTitleBox", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "ExportTitle", "fill": "$text-primary", "content": "Xuất Dữ Liệu", "fontFamily": "Roboto", "fontSize": 17, "fontWeight": "700"}, - {"type": "text", "id": "ExportSubtitle", "fill": "$text-tertiary", "content": "Tải về dữ liệu báo cáo", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "ExportClose", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ExportCloseIcon", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "ExportContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "padding": [16, 20], - "gap": 14, - "children": [ - {"type": "frame", "id": "DataTypeField", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "DataTypeLabel", "fill": "$text-secondary", "content": "Loại dữ liệu", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "DataTypeSelect", "width": "fill_container", "height": 48, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "DataTypeIcon", "width": 20, "height": 20, "iconFontName": "receipt", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "text", "id": "DataTypeValue", "fill": "$text-primary", "content": "Báo cáo doanh thu", "fontFamily": "Roboto", "fontSize": 14, "width": "fill_container"}, - {"type": "icon_font", "id": "DataTypeChevron", "width": 18, "height": 18, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]} - ]}, - {"type": "frame", "id": "DateRange", "width": "fill_container", "gap": 10, "children": [ - {"type": "frame", "id": "DateFrom", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "text", "id": "DateFromLabel", "fill": "$text-secondary", "content": "Từ ngày", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "DateFromInput", "width": "fill_container", "height": 44, "fill": "$bg-page", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 12], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "DateFromIcon", "width": 16, "height": 16, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "DateFromVal", "fill": "$text-primary", "content": "01/02/2026", "fontFamily": "Roboto", "fontSize": 13} - ]} - ]}, - {"type": "frame", "id": "DateTo", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "text", "id": "DateToLabel", "fill": "$text-secondary", "content": "Đến ngày", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "DateToInput", "width": "fill_container", "height": 44, "fill": "$bg-page", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 12], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "DateToIcon", "width": 16, "height": 16, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "DateToVal", "fill": "$text-primary", "content": "06/02/2026", "fontFamily": "Roboto", "fontSize": 13} - ]} - ]} - ]}, - {"type": "frame", "id": "FormatField", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "FormatLabel", "fill": "$text-secondary", "content": "Định dạng xuất", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "FormatOptions", "width": "fill_container", "gap": 8, "children": [ - {"type": "frame", "id": "FormatExcel", "width": "fill_container", "height": 56, "fill": "$orange-primary", "cornerRadius": 12, "layout": "vertical", "gap": 4, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "FormatExcelIcon", "width": 22, "height": 22, "iconFontName": "file-spreadsheet", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "FormatExcelText", "fill": "#FFFFFF", "content": "Excel", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "FormatPDF", "width": "fill_container", "height": 56, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "gap": 4, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "FormatPDFIcon", "width": 22, "height": 22, "iconFontName": "file-text", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "FormatPDFText", "fill": "$text-secondary", "content": "PDF", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "FormatCSV", "width": "fill_container", "height": 56, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "gap": 4, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "FormatCSVIcon", "width": 22, "height": 22, "iconFontName": "file", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "FormatCSVText", "fill": "$text-secondary", "content": "CSV", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]} - ]}, - {"type": "frame", "id": "EstimateInfo", "width": "fill_container", "fill": "#3B82F615", "cornerRadius": 10, "padding": 12, "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "EstimateIcon", "width": 18, "height": 18, "iconFontName": "info", "iconFontFamily": "lucide", "fill": "#3B82F6"}, - {"type": "frame", "id": "EstimateText", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "EstimateTitle", "fill": "#3B82F6", "content": "Ước tính: 245 records", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "text", "id": "EstimateSize", "fill": "$text-tertiary", "content": "Kích thước file: ~1.2 MB", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "ExportFooter", - "width": "fill_container", - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "gap": 12, - "padding": [16, 20], - "children": [ - {"type": "frame", "id": "CancelExportBtn", "width": "fill_container", "height": 46, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "CancelExportText", "fill": "$text-secondary", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "DownloadBtn", "width": "fill_container", "height": 46, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "DownloadIcon", "width": 18, "height": 18, "iconFontName": "download", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "DownloadText", "fill": "#FFFFFF", "content": "Tải xuống", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/deposit-withdrawal.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/deposit-withdrawal.pen deleted file mode 100644 index e28a111f..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/deposit-withdrawal.pen +++ /dev/null @@ -1,575 +0,0 @@ -{ - "version": "2.7", - "children": [ - { - "type": "frame", - "id": "DepositWithdrawalDialog", - "x": 0, - "y": 0, - "name": "Dialog/DepositWithdrawal", - "reusable": true, - "width": 420, - "height": 539, - "fill": "$bg-elevated", - "cornerRadius": 20, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "DepositHeader", - "width": "fill_container", - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "gap": 12, - "padding": [ - 16, - 20 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "DepositIconBg", - "width": 44, - "height": 44, - "fill": "#3B82F615", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "DepositIcon", - "width": 22, - "height": 22, - "iconFontName": "wallet", - "iconFontFamily": "lucide", - "fill": "#3B82F6" - } - ] - }, - { - "type": "frame", - "id": "DepositTitleBox", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "DepositTitle", - "fill": "$text-primary", - "content": "Nộp/Rút Tiền", - "fontFamily": "Roboto", - "fontSize": 17, - "fontWeight": "700" - }, - { - "type": "text", - "id": "DepositSubtitle", - "fill": "$text-tertiary", - "content": "Di chuyển tiền vào/ra két", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "DepositClose", - "width": 32, - "height": 32, - "fill": "$bg-interactive", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "DepositCloseIcon", - "width": 16, - "height": 16, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "DepositContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "gap": 14, - "padding": [ - 16, - 20 - ], - "children": [ - { - "type": "frame", - "id": "TypeToggle", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 12, - "gap": 4, - "padding": 4, - "children": [ - { - "type": "frame", - "id": "DepositTab", - "width": "fill_container", - "height": 40, - "fill": "#22C55E", - "cornerRadius": 10, - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "DepositTabIcon", - "width": 18, - "height": 18, - "iconFontName": "arrow-down-to-line", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "DepositTabText", - "fill": "#FFFFFF", - "content": "Nộp vào", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "WithdrawTab", - "width": "fill_container", - "height": 40, - "cornerRadius": 10, - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "WithdrawTabIcon", - "width": 18, - "height": 18, - "iconFontName": "arrow-up-from-line", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "WithdrawTabText", - "fill": "$text-secondary", - "content": "Rút ra", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "AmountField", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "AmountLabel", - "fill": "$text-secondary", - "content": "Số tiền", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "AmountInput", - "width": "fill_container", - "height": 56, - "fill": "$bg-page", - "cornerRadius": 12, - "stroke": { - "thickness": 2, - "fill": "#22C55E" - }, - "gap": 8, - "padding": [ - 0, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "AmountPlusIcon", - "width": 20, - "height": 20, - "iconFontName": "plus", - "iconFontFamily": "lucide", - "fill": "#22C55E" - }, - { - "type": "text", - "id": "AmountVal", - "fill": "$text-primary", - "content": "1,000,000", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "700" - }, - { - "type": "text", - "id": "AmountUnit", - "fill": "$text-tertiary", - "content": "đ", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "QuickAmounts", - "width": "fill_container", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "Quick1", - "width": "fill_container", - "height": 36, - "fill": "$bg-page", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "Quick1Text", - "fill": "$text-secondary", - "content": "500K", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "Quick2", - "width": "fill_container", - "height": 36, - "fill": "#22C55E20", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "Quick2Text", - "fill": "#22C55E", - "content": "1M", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "Quick3", - "width": "fill_container", - "height": 36, - "fill": "$bg-page", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "Quick3Text", - "fill": "$text-secondary", - "content": "2M", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "Quick4", - "width": "fill_container", - "height": 36, - "fill": "$bg-page", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "Quick4Text", - "fill": "$text-secondary", - "content": "5M", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "ReasonField", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "ReasonLabel", - "fill": "$text-secondary", - "content": "Lý do", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "ReasonSelect", - "width": "fill_container", - "height": 48, - "fill": "$bg-page", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 10, - "padding": [ - 0, - 14 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ReasonValue", - "fill": "$text-primary", - "content": "Nộp tiền từ két sắt", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "icon_font", - "id": "ReasonChevron", - "width": 18, - "height": 18, - "iconFontName": "chevron-down", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "NoteField", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "text", - "id": "NoteLabel", - "fill": "$text-secondary", - "content": "Ghi chú (tùy chọn)", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "NoteInput", - "width": "fill_container", - "height": 48, - "fill": "$bg-page", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "padding": [ - 0, - 14 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NoteVal", - "fill": "$text-tertiary", - "content": "Nhập ghi chú...", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "DepositFooter", - "width": "fill_container", - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "gap": 12, - "padding": [ - 16, - 20 - ], - "children": [ - { - "type": "frame", - "id": "CancelDepositBtn", - "width": "fill_container", - "height": 46, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "CancelDepositText", - "fill": "$text-secondary", - "content": "Hủy", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "ConfirmDepositBtn", - "width": "fill_container", - "height": 46, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#22C55E", - "position": 0 - }, - { - "color": "#16A34A", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ConfirmDepositIcon", - "width": 18, - "height": 18, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "ConfirmDepositText", - "fill": "#FFFFFF", - "content": "Xác nhận nộp", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-elevated": { - "type": "color", - "value": "#1A1A1D" - }, - "bg-interactive": { - "type": "color", - "value": "#2A2A2E" - }, - "bg-page": { - "type": "color", - "value": "#0A0A0B" - }, - "border-default": { - "type": "color", - "value": "#2A2A2E" - }, - "border-subtle": { - "type": "color", - "value": "#1F1F23" - }, - "orange-primary": { - "type": "color", - "value": "#FF5C00" - }, - "text-primary": { - "type": "color", - "value": "#FFFFFF" - }, - "text-secondary": { - "type": "color", - "value": "#ADADB0" - }, - "text-tertiary": { - "type": "color", - "value": "#8B8B90" - } - } -} \ No newline at end of file diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/discount-apply.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/discount-apply.pen deleted file mode 100644 index 15803bb6..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/discount-apply.pen +++ /dev/null @@ -1,113 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "DiscountApplyDialog", - "name": "Dialog/Discount Apply", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "#0A0A0B80", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "DiscountModal", - "width": 440, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "DiscountHeader", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "DiscountIcon", "width": 64, "height": 64, "fill": "#F59E0B1A", "cornerRadius": 32, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "DiscountIconI", "width": 28, "height": 28, "iconFontName": "percent", "iconFontFamily": "lucide", "fill": "#F59E0B"} - ]}, - {"type": "text", "id": "DiscountTitle", "fill": "#FFFFFF", "content": "Áp dụng giảm giá", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}, - {"type": "text", "id": "DiscountDesc", "fill": "#8B8B90", "content": "Nhập mã voucher hoặc chọn khuyến mãi", "fontFamily": "Roboto", "fontSize": 14} - ] - }, - { - "type": "frame", - "id": "DiscountInput", - "width": "fill_container", - "layout": "vertical", - "gap": 16, - "children": [ - {"type": "frame", "id": "DiscountInputRow", "width": "fill_container", "gap": 8, "children": [ - {"type": "frame", "id": "DiscountInputField", "width": "fill_container", "height": 48, "fill": "#1A1A1D", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "padding": [0, 16], "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "DiscountInputIcon", "width": 18, "height": 18, "iconFontName": "ticket", "iconFontFamily": "lucide", "fill": "#6B6B70"}, - {"type": "text", "id": "DiscountInputText", "fill": "#FFFFFF", "content": "GOODGO50", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "DiscountApplyBtn", "height": 48, "fill": "#F59E0B", "cornerRadius": 10, "padding": [0, 16], "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "DiscountApplyText", "fill": "#000", "content": "Áp dụng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "DiscountSuccess", "width": "fill_container", "fill": "#22C55E1A", "cornerRadius": 10, "padding": 12, "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "DiscountSuccessIcon", "width": 18, "height": 18, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "DiscountSuccessText", "fill": "#22C55E", "content": "Giảm 50,000₫ cho đơn từ 200K", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ] - }, - {"type": "frame", "id": "DiscountDivider", "width": "fill_container", "height": 1, "fill": "#1F1F23"}, - { - "type": "frame", - "id": "DiscountPromos", - "width": "fill_container", - "layout": "vertical", - "gap": 10, - "children": [ - {"type": "text", "id": "DiscountPromosTitle", "fill": "#8B8B90", "content": "Khuyến mãi đang có", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "frame", "id": "DiscountPromo1", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "DiscountPromo1Left", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "DiscountPromo1Icon", "width": 36, "height": 36, "fill": "#EC48991A", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "DiscountPromo1Pct", "fill": "#EC4899", "content": "20%", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}]}, - {"type": "frame", "id": "DiscountPromo1Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "DiscountPromo1Name", "fill": "#FFFFFF", "content": "Giảm 20% Happy Hour", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "text", "id": "DiscountPromo1Cond", "fill": "#6B6B70", "content": "14h-17h • Áp dụng tất cả", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "DiscountPromo1Btn", "fill": "#2A2A2E", "cornerRadius": 6, "padding": [6, 10], "children": [{"type": "text", "id": "DiscountPromo1BtnT", "fill": "#ADADB0", "content": "Chọn", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]} - ]}, - {"type": "frame", "id": "DiscountPromo2", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "DiscountPromo2Left", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "DiscountPromo2Icon", "width": 36, "height": 36, "fill": "#3B82F61A", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "DiscountPromo2Pct", "fill": "#3B82F6", "content": "30K", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}]}, - {"type": "frame", "id": "DiscountPromo2Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "DiscountPromo2Name", "fill": "#FFFFFF", "content": "Giảm 30K cho thành viên", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "text", "id": "DiscountPromo2Cond", "fill": "#6B6B70", "content": "VIP Gold trở lên • Đơn từ 100K", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "DiscountPromo2Btn", "fill": "#2A2A2E", "cornerRadius": 6, "padding": [6, 10], "children": [{"type": "text", "id": "DiscountPromo2BtnT", "fill": "#ADADB0", "content": "Chọn", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]} - ]} - ] - }, - { - "type": "frame", - "id": "DiscountActions", - "width": "fill_container", - "gap": 12, - "children": [ - {"type": "frame", "id": "DiscountCancel", "width": "fill_container", "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "DiscountCancelText", "fill": "#ADADB0", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "DiscountConfirm", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "DiscountConfirmText", "fill": "#FFFFFF", "content": "Xác nhận -50,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - } - ] - } - ] -} diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/expense-entry.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/expense-entry.pen deleted file mode 100644 index 4ad0167c..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/expense-entry.pen +++ /dev/null @@ -1,550 +0,0 @@ -{ - "version": "2.7", - "children": [ - { - "type": "frame", - "id": "ExpenseEntryDialog", - "x": 0, - "y": 0, - "name": "Dialog/ExpenseEntry", - "reusable": true, - "width": 420, - "height": 635, - "fill": "$bg-elevated", - "cornerRadius": 20, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "ExpenseHeader", - "width": "fill_container", - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "gap": 12, - "padding": [ - 16, - 20 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ExpenseIconBg", - "width": 44, - "height": 44, - "fill": "#EF444415", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ExpenseIcon", - "width": 22, - "height": 22, - "iconFontName": "receipt", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - }, - { - "type": "frame", - "id": "ExpenseTitleBox", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "ExpenseTitle", - "fill": "$text-primary", - "content": "Nhập Chi Phí", - "fontFamily": "Roboto", - "fontSize": 17, - "fontWeight": "700" - }, - { - "type": "text", - "id": "ExpenseSubtitle", - "fill": "$text-tertiary", - "content": "Ghi nhận chi phí phát sinh", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "ExpenseClose", - "width": 32, - "height": 32, - "fill": "$bg-interactive", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ExpenseCloseIcon", - "width": 16, - "height": 16, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "ExpenseContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "gap": 14, - "padding": [ - 16, - 20 - ], - "children": [ - { - "type": "frame", - "id": "CategoryField", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "CategoryLabel", - "fill": "$text-secondary", - "content": "Danh mục chi phí", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "CategorySelect", - "width": "fill_container", - "height": 48, - "fill": "$bg-page", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 10, - "padding": [ - 0, - 14 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CatIcon", - "width": 32, - "height": 32, - "fill": "#F9731620", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CatIconI", - "width": 16, - "height": 16, - "iconFontName": "utensils", - "iconFontFamily": "lucide", - "fill": "#F97316" - } - ] - }, - { - "type": "text", - "id": "CatValue", - "fill": "$text-primary", - "content": "Nguyên liệu", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "icon_font", - "id": "CatChevron", - "width": 18, - "height": 18, - "iconFontName": "chevron-down", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "AmountField", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "AmountLabel", - "fill": "$text-secondary", - "content": "Số tiền", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "AmountInput", - "width": "fill_container", - "height": 52, - "fill": "$bg-page", - "cornerRadius": 12, - "stroke": { - "thickness": 2, - "fill": "$orange-primary" - }, - "gap": 8, - "padding": [ - 0, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "AmountVal", - "fill": "$text-primary", - "content": "150,000", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "700" - }, - { - "type": "text", - "id": "AmountUnit", - "fill": "$text-tertiary", - "content": "đ", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "DescField", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "DescLabel", - "fill": "$text-secondary", - "content": "Mô tả chi tiết", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "DescInput", - "width": "fill_container", - "height": 72, - "fill": "$bg-page", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "padding": [ - 12, - 14 - ], - "children": [ - { - "type": "text", - "id": "DescVal", - "fill": "$text-primary", - "content": "Mua thêm sữa tươi, đường cát...", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "ReceiptField", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "ReceiptLabel", - "fill": "$text-secondary", - "content": "Chứng từ đính kèm", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "ReceiptUpload", - "width": "fill_container", - "height": 80, - "fill": "$bg-page", - "cornerRadius": 12, - "stroke": { - "thickness": 2, - "fill": "$border-default" - }, - "layout": "vertical", - "gap": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "UploadIcon", - "width": 24, - "height": 24, - "iconFontName": "camera", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "UploadText", - "fill": "$text-tertiary", - "content": "Chụp hoặc tải lên hóa đơn", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PaymentMethod", - "width": "fill_container", - "gap": 10, - "children": [ - { - "type": "frame", - "id": "PayCash", - "width": "fill_container", - "height": 44, - "fill": "$orange-primary", - "cornerRadius": 10, - "gap": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PayCashIcon", - "width": 16, - "height": 16, - "iconFontName": "banknote", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "PayCashText", - "fill": "#FFFFFF", - "content": "Tiền mặt", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "PayCard", - "width": "fill_container", - "height": 44, - "fill": "$bg-page", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PayCardIcon", - "width": 16, - "height": 16, - "iconFontName": "credit-card", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PayCardText", - "fill": "$text-secondary", - "content": "Thẻ/CK", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ExpenseFooter", - "width": "fill_container", - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "gap": 12, - "padding": [ - 16, - 20 - ], - "children": [ - { - "type": "frame", - "id": "CancelExpenseBtn", - "width": "fill_container", - "height": 46, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "CancelExpenseText", - "fill": "$text-secondary", - "content": "Hủy", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SaveExpenseBtn", - "width": "fill_container", - "height": 46, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SaveExpenseIcon", - "width": 18, - "height": 18, - "iconFontName": "save", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "SaveExpenseText", - "fill": "#FFFFFF", - "content": "Lưu chi phí", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-elevated": { - "type": "color", - "value": "#1A1A1D" - }, - "bg-interactive": { - "type": "color", - "value": "#2A2A2E" - }, - "bg-page": { - "type": "color", - "value": "#0A0A0B" - }, - "border-default": { - "type": "color", - "value": "#2A2A2E" - }, - "border-subtle": { - "type": "color", - "value": "#1F1F23" - }, - "orange-primary": { - "type": "color", - "value": "#FF5C00" - }, - "text-primary": { - "type": "color", - "value": "#FFFFFF" - }, - "text-secondary": { - "type": "color", - "value": "#ADADB0" - }, - "text-tertiary": { - "type": "color", - "value": "#8B8B90" - } - } -} \ No newline at end of file diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/expiry-warning.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/expiry-warning.pen deleted file mode 100644 index 73ccc4a1..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/expiry-warning.pen +++ /dev/null @@ -1,130 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "ExpiryWarningDialog", - "name": "Dialog/ExpiryWarning", - "reusable": true, - "width": 420, - "height": 500, - "fill": "$bg-elevated", - "cornerRadius": 20, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "ExpiryHeader", - "width": "fill_container", - "padding": [16, 20], - "gap": 12, - "alignItems": "center", - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "children": [ - {"type": "frame", "id": "ExpiryIconBg", "width": 44, "height": 44, "fill": "#EF444415", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ExpiryIcon", "width": 22, "height": 22, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#EF4444"} - ]}, - {"type": "frame", "id": "ExpiryTitleBox", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "ExpiryTitle", "fill": "$text-primary", "content": "Sắp Hết Hạn Sử Dụng", "fontFamily": "Roboto", "fontSize": 17, "fontWeight": "700"}, - {"type": "text", "id": "ExpiryCount", "fill": "#EF4444", "content": "3 sản phẩm cần xử lý", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "ExpiryClose", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ExpiryCloseIcon", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "ExpiryContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "padding": [14, 20], - "gap": 10, - "children": [ - {"type": "frame", "id": "Exp1", "width": "fill_container", "fill": "#EF444415", "cornerRadius": 12, "padding": 14, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "Exp1Icon", "width": 40, "height": 40, "fill": "#EF444420", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Exp1IconI", "width": 20, "height": 20, "iconFontName": "alert-circle", "iconFontFamily": "lucide", "fill": "#EF4444"} - ]}, - {"type": "frame", "id": "Exp1Info", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "Exp1Name", "fill": "$text-primary", "content": "Sữa tươi Vinamilk", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "frame", "id": "Exp1Meta", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "Exp1Date", "fill": "#EF4444", "content": "Hết hạn: Hôm nay", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "Exp1Qty", "fill": "$text-tertiary", "content": "• 5 hộp", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "Exp1Action", "width": 32, "height": 32, "fill": "#EF4444", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Exp1ActionIcon", "width": 16, "height": 16, "iconFontName": "trash-2", "iconFontFamily": "lucide", "fill": "#FFFFFF"} - ]} - ]}, - {"type": "frame", "id": "Exp2", "width": "fill_container", "fill": "#EAB30815", "cornerRadius": 12, "padding": 14, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "Exp2Icon", "width": 40, "height": 40, "fill": "#EAB30820", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Exp2IconI", "width": 20, "height": 20, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#EAB308"} - ]}, - {"type": "frame", "id": "Exp2Info", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "Exp2Name", "fill": "$text-primary", "content": "Bánh croissant", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "frame", "id": "Exp2Meta", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "Exp2Date", "fill": "#EAB308", "content": "Hết hạn: Ngày mai", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "text", "id": "Exp2Qty", "fill": "$text-tertiary", "content": "• 12 cái", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "Exp2Action", "width": 32, "height": 32, "fill": "#EAB308", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Exp2ActionIcon", "width": 16, "height": 16, "iconFontName": "badge-percent", "iconFontFamily": "lucide", "fill": "#FFFFFF"} - ]} - ]}, - {"type": "frame", "id": "Exp3", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 12, "padding": 14, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "Exp3Icon", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Exp3IconI", "width": 20, "height": 20, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]}, - {"type": "frame", "id": "Exp3Info", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "Exp3Name", "fill": "$text-primary", "content": "Kem tươi Whipping", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "frame", "id": "Exp3Meta", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "Exp3Date", "fill": "$text-secondary", "content": "Hết hạn: 3 ngày nữa", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "Exp3Qty", "fill": "$text-tertiary", "content": "• 2 hộp", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "Exp3Action", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Exp3ActionIcon", "width": 16, "height": 16, "iconFontName": "eye", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "ExpiryFooter", - "width": "fill_container", - "fill": "$bg-page", - "padding": [14, 20], - "gap": 10, - "layout": "vertical", - "children": [ - {"type": "frame", "id": "QuickActions", "width": "fill_container", "gap": 10, "children": [ - {"type": "frame", "id": "DiscountBtn", "width": "fill_container", "height": 44, "fill": "#EAB30820", "cornerRadius": 10, "gap": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "DiscountIcon", "width": 16, "height": 16, "iconFontName": "badge-percent", "iconFontFamily": "lucide", "fill": "#EAB308"}, - {"type": "text", "id": "DiscountText", "fill": "#EAB308", "content": "Giảm giá", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "WriteOffBtn", "width": "fill_container", "height": 44, "fill": "#EF444420", "cornerRadius": 10, "gap": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "WriteOffIcon", "width": 16, "height": 16, "iconFontName": "trash-2", "iconFontFamily": "lucide", "fill": "#EF4444"}, - {"type": "text", "id": "WriteOffText", "fill": "#EF4444", "content": "Hủy bỏ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "DoneBtn", "width": "fill_container", "height": 46, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "DoneText", "fill": "#FFFFFF", "content": "Đã xử lý xong", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/feedback-form.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/feedback-form.pen deleted file mode 100644 index fc5cce56..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/feedback-form.pen +++ /dev/null @@ -1,129 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "FeedbackFormDialog", - "name": "Dialog/FeedbackForm", - "reusable": true, - "width": 400, - "height": 520, - "fill": "$bg-elevated", - "cornerRadius": 20, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "FeedbackHeader", - "width": "fill_container", - "padding": [16, 20], - "gap": 12, - "alignItems": "center", - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "children": [ - {"type": "frame", "id": "FeedbackIconBg", "width": 44, "height": 44, "fill": "#22C55E15", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "FeedbackIcon", "width": 22, "height": 22, "iconFontName": "message-circle-heart", "iconFontFamily": "lucide", "fill": "#22C55E"} - ]}, - {"type": "frame", "id": "FeedbackTitleBox", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "FeedbackTitle", "fill": "$text-primary", "content": "Đánh Giá Trải Nghiệm", "fontFamily": "Roboto", "fontSize": 17, "fontWeight": "700"}, - {"type": "text", "id": "FeedbackSubtitle", "fill": "$text-tertiary", "content": "Góp ý giúp chúng tôi tốt hơn", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "FeedbackClose", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "FeedbackCloseIcon", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "FeedbackContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "padding": [20, 24], - "gap": 20, - "children": [ - {"type": "frame", "id": "RatingSection", "width": "fill_container", "layout": "vertical", "gap": 12, "alignItems": "center", "children": [ - {"type": "text", "id": "RatingLabel", "fill": "$text-secondary", "content": "Bạn hài lòng như thế nào?", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "frame", "id": "RatingStars", "gap": 8, "children": [ - {"type": "frame", "id": "Star1", "width": 44, "height": 44, "fill": "#EAB30830", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Star1Icon", "width": 26, "height": 26, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#EAB308"} - ]}, - {"type": "frame", "id": "Star2", "width": 44, "height": 44, "fill": "#EAB30830", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Star2Icon", "width": 26, "height": 26, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#EAB308"} - ]}, - {"type": "frame", "id": "Star3", "width": 44, "height": 44, "fill": "#EAB30830", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Star3Icon", "width": 26, "height": 26, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#EAB308"} - ]}, - {"type": "frame", "id": "Star4", "width": 44, "height": 44, "fill": "#EAB30830", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Star4Icon", "width": 26, "height": 26, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#EAB308"} - ]}, - {"type": "frame", "id": "Star5", "width": 44, "height": 44, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Star5Icon", "width": 26, "height": 26, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]} - ]}, - {"type": "text", "id": "RatingText", "fill": "#EAB308", "content": "Rất hài lòng", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "TagsSection", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ - {"type": "text", "id": "TagsLabel", "fill": "$text-secondary", "content": "Bạn thích điều gì nhất?", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "TagsRow1", "width": "fill_container", "gap": 8, "children": [ - {"type": "frame", "id": "Tag1", "fill": "#22C55E", "cornerRadius": 20, "padding": [8, 14], "gap": 6, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Tag1Icon", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "Tag1Text", "fill": "#FFFFFF", "content": "Đồ uống ngon", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "Tag2", "fill": "#22C55E", "cornerRadius": 20, "padding": [8, 14], "gap": 6, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Tag2Icon", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "Tag2Text", "fill": "#FFFFFF", "content": "Phục vụ tốt", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "TagsRow2", "width": "fill_container", "gap": 8, "children": [ - {"type": "frame", "id": "Tag3", "fill": "$bg-page", "cornerRadius": 20, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [8, 14], "children": [ - {"type": "text", "id": "Tag3Text", "fill": "$text-secondary", "content": "Không gian đẹp", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "Tag4", "fill": "$bg-page", "cornerRadius": 20, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [8, 14], "children": [ - {"type": "text", "id": "Tag4Text", "fill": "$text-secondary", "content": "Giá hợp lý", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "Tag5", "fill": "$bg-page", "cornerRadius": 20, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [8, 14], "children": [ - {"type": "text", "id": "Tag5Text", "fill": "$text-secondary", "content": "Nhanh", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]} - ]}, - {"type": "frame", "id": "CommentSection", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "CommentLabel", "fill": "$text-secondary", "content": "Góp ý thêm (tùy chọn)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "CommentInput", "width": "fill_container", "height": 80, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": 14, "children": [ - {"type": "text", "id": "CommentPlaceholder", "fill": "$text-tertiary", "content": "Chia sẻ thêm trải nghiệm của bạn...", "fontFamily": "Roboto", "fontSize": 14} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "FeedbackFooter", - "width": "fill_container", - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "gap": 12, - "padding": [16, 24], - "children": [ - {"type": "frame", "id": "SkipBtn", "width": "fill_container", "height": 46, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SkipText", "fill": "$text-secondary", "content": "Bỏ qua", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SubmitFeedbackBtn", "width": "fill_container", "height": 46, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SubmitFeedbackIcon", "width": 18, "height": 18, "iconFontName": "send", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "SubmitFeedbackText", "fill": "#FFFFFF", "content": "Gửi đánh giá", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/help-support.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/help-support.pen deleted file mode 100644 index cbfe1aac..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/help-support.pen +++ /dev/null @@ -1,108 +0,0 @@ -{ - "version": "2.7", - "children": [ - { - "type": "frame", - "id": "HelpSupportDialog", - "name": "Dialog/HelpSupport", - "reusable": true, - "clip": true, - "width": 420, - "height": 520, - "fill": "$bg-elevated", - "cornerRadius": 24, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "HelpSupportHeader", - "width": "fill_container", - "padding": [16, 20], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "HelpSupportHeaderLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "HelpSupportIconBg", "width": 40, "height": 40, "fill": "#3B82F620", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "HelpSupportIcon", "width": 20, "height": 20, "iconFontName": "circle-help", "iconFontFamily": "lucide", "fill": "#3B82F6"} - ]}, - {"type": "text", "id": "HelpSupportTitle", "fill": "$text-primary", "content": "Hỗ trợ", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "HelpSupportCloseBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "HelpSupportCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "HelpSupportContent", - "width": "fill_container", - "height": "fill_container", - "padding": 20, - "layout": "vertical", - "gap": 16, - "children": [ - {"type": "frame", "id": "HelpSearchBar", "width": "fill_container", "height": 48, "fill": "$bg-page", "cornerRadius": 12, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "HelpSearchIcon", "width": 20, "height": 20, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "HelpSearchPlaceholder", "fill": "$text-tertiary", "content": "Tìm kiếm hướng dẫn...", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "HelpCategories", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ - {"type": "text", "id": "HelpCategoriesLabel", "fill": "$text-secondary", "content": "Danh mục hướng dẫn", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "HelpCategory1", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "HelpCategory1Icon", "width": 40, "height": 40, "fill": "#22C55E20", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "HelpCategory1IconInner", "width": 20, "height": 20, "iconFontName": "shopping-cart", "iconFontFamily": "lucide", "fill": "#22C55E"} - ]}, - {"type": "frame", "id": "HelpCategory1Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "HelpCategory1Name", "fill": "$text-primary", "content": "Bán hàng & Thanh toán", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "HelpCategory1Desc", "fill": "$text-tertiary", "content": "12 bài hướng dẫn", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ]}, - {"type": "icon_font", "id": "HelpCategory1Arrow", "width": 18, "height": 18, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]}, - {"type": "frame", "id": "HelpCategory2", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "HelpCategory2Icon", "width": 40, "height": 40, "fill": "#F59E0B20", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "HelpCategory2IconInner", "width": 20, "height": 20, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "#F59E0B"} - ]}, - {"type": "frame", "id": "HelpCategory2Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "HelpCategory2Name", "fill": "$text-primary", "content": "Quản lý khách hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "HelpCategory2Desc", "fill": "$text-tertiary", "content": "8 bài hướng dẫn", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ]}, - {"type": "icon_font", "id": "HelpCategory2Arrow", "width": 18, "height": 18, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]}, - {"type": "frame", "id": "HelpCategory3", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "HelpCategory3Icon", "width": 40, "height": 40, "fill": "#8B5CF620", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "HelpCategory3IconInner", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "#8B5CF6"} - ]}, - {"type": "frame", "id": "HelpCategory3Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "HelpCategory3Name", "fill": "$text-primary", "content": "Cài đặt & Thiết bị", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "HelpCategory3Desc", "fill": "$text-tertiary", "content": "6 bài hướng dẫn", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ]}, - {"type": "icon_font", "id": "HelpCategory3Arrow", "width": 18, "height": 18, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]} - ]}, - {"type": "frame", "id": "HelpContact", "width": "fill_container", "fill": "#FF5C0015", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "HelpContactIcon", "width": 40, "height": 40, "fill": "$orange-primary", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "HelpContactIconInner", "width": 20, "height": 20, "iconFontName": "headphones", "iconFontFamily": "lucide", "fill": "$text-primary"} - ]}, - {"type": "frame", "id": "HelpContactInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "HelpContactName", "fill": "$text-primary", "content": "Liên hệ hỗ trợ 24/7", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "HelpContactDesc", "fill": "$orange-primary", "content": "1900 1234 • support@goodgo.vn", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "icon_font", "id": "HelpContactArrow", "width": 18, "height": 18, "iconFontName": "external-link", "iconFontFamily": "lucide", "fill": "$orange-primary"} - ]} - ] - } - ] - } - ], - "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/hold-recall.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/hold-recall.pen deleted file mode 100644 index 839e6f60..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/hold-recall.pen +++ /dev/null @@ -1,131 +0,0 @@ -{ - "version": "2.7", - "children": [ - { - "type": "frame", - "id": "HoldRecallDialog", - "name": "Dialog/HoldRecall", - "reusable": true, - "clip": true, - "width": 440, - "height": 560, - "fill": "$bg-elevated", - "cornerRadius": 24, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "HoldRecallHeader", - "width": "fill_container", - "padding": [16, 20], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "HoldRecallHeaderLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "HoldRecallIconBg", "width": 40, "height": 40, "fill": "#FF5C0020", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "HoldRecallIcon", "width": 20, "height": 20, "iconFontName": "pause-circle", "iconFontFamily": "lucide", "fill": "$orange-primary"} - ]}, - {"type": "text", "id": "HoldRecallTitle", "fill": "$text-primary", "content": "Đơn hàng tạm lưu", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "HoldRecallCloseBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "HoldRecallCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "HoldRecallContent", - "width": "fill_container", - "height": "fill_container", - "padding": 16, - "layout": "vertical", - "gap": 12, - "children": [ - {"type": "frame", "id": "HoldRecallStats", "width": "fill_container", "padding": [12, 16], "fill": "$bg-page", "cornerRadius": 12, "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "HoldRecallStatLeft", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "HoldRecallStatLabel1", "fill": "$text-tertiary", "content": "Đơn đang giữ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}, - {"type": "text", "id": "HoldRecallStatValue1", "fill": "$text-primary", "content": "3", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "HoldRecallStatRight", "layout": "vertical", "gap": 2, "alignItems": "end", "children": [ - {"type": "text", "id": "HoldRecallStatLabel2", "fill": "$text-tertiary", "content": "Tổng giá trị", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}, - {"type": "text", "id": "HoldRecallStatValue2", "fill": "$orange-primary", "content": "485,000₫", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"} - ]} - ]}, - {"type": "frame", "id": "HoldRecallList", "width": "fill_container", "height": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "frame", "id": "HoldOrder1", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 14, "alignItems": "center", "stroke": {"thickness": 2, "fill": "$orange-primary"}, "children": [ - {"type": "frame", "id": "HoldOrder1Left", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ - {"type": "frame", "id": "HoldOrder1Top", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "HoldOrder1Name", "fill": "$text-primary", "content": "Bàn 05 - Nguyễn Văn A", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, - {"type": "frame", "id": "HoldOrder1Badge", "fill": "#22C55E20", "cornerRadius": 6, "padding": [3, 8], "children": [ - {"type": "text", "id": "HoldOrder1BadgeText", "fill": "#22C55E", "content": "Mới", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "HoldOrder1Meta", "gap": 12, "children": [ - {"type": "text", "id": "HoldOrder1Time", "fill": "$text-tertiary", "content": "5 phút trước", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}, - {"type": "text", "id": "HoldOrder1Items", "fill": "$text-secondary", "content": "4 món", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ]} - ]}, - {"type": "text", "id": "HoldOrder1Price", "fill": "$orange-primary", "content": "185,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "HoldOrder2", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 14, "alignItems": "center", "children": [ - {"type": "frame", "id": "HoldOrder2Left", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "HoldOrder2Name", "fill": "$text-primary", "content": "Khách lẻ #42", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, - {"type": "frame", "id": "HoldOrder2Meta", "gap": 12, "children": [ - {"type": "text", "id": "HoldOrder2Time", "fill": "$text-tertiary", "content": "25 phút trước", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}, - {"type": "text", "id": "HoldOrder2Items", "fill": "$text-secondary", "content": "2 món", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ]} - ]}, - {"type": "text", "id": "HoldOrder2Price", "fill": "$orange-primary", "content": "120,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "HoldOrder3", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 14, "alignItems": "center", "children": [ - {"type": "frame", "id": "HoldOrder3Left", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ - {"type": "frame", "id": "HoldOrder3Top", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "HoldOrder3Name", "fill": "$text-primary", "content": "Bàn 12 - Trần B", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, - {"type": "frame", "id": "HoldOrder3Badge", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [3, 8], "children": [ - {"type": "text", "id": "HoldOrder3BadgeText", "fill": "#F59E0B", "content": "30p", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "HoldOrder3Meta", "gap": 12, "children": [ - {"type": "text", "id": "HoldOrder3Time", "fill": "$text-tertiary", "content": "30 phút trước", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}, - {"type": "text", "id": "HoldOrder3Items", "fill": "$text-secondary", "content": "6 món", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ]} - ]}, - {"type": "text", "id": "HoldOrder3Price", "fill": "$orange-primary", "content": "180,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "HoldRecallFooter", - "width": "fill_container", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, - "gap": 12, - "padding": [16, 20], - "children": [ - {"type": "frame", "id": "HoldCurrentBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "HoldCurrentIcon", "width": 18, "height": 18, "iconFontName": "pause", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "HoldCurrentText", "fill": "$text-secondary", "content": "Lưu đơn hiện tại", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "RecallSelectedBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8533", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RecallSelectedIcon", "width": 18, "height": 18, "iconFontName": "play", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "RecallSelectedText", "fill": "$text-primary", "content": "Gọi lại đơn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/keyboard-shortcuts.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/keyboard-shortcuts.pen deleted file mode 100644 index d9c69f89..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/keyboard-shortcuts.pen +++ /dev/null @@ -1,150 +0,0 @@ -{ - "version": "2.7", - "children": [ - { - "type": "frame", - "id": "KeyboardShortcutsDialog", - "name": "Dialog/KeyboardShortcuts", - "reusable": true, - "clip": true, - "width": 480, - "height": 560, - "fill": "$bg-elevated", - "cornerRadius": 24, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "ShortcutsHeader", - "width": "fill_container", - "padding": [16, 20], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "ShortcutsHeaderLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "ShortcutsIconBg", "width": 40, "height": 40, "fill": "#F59E0B20", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ShortcutsIcon", "width": 20, "height": 20, "iconFontName": "keyboard", "iconFontFamily": "lucide", "fill": "#F59E0B"} - ]}, - {"type": "text", "id": "ShortcutsTitle", "fill": "$text-primary", "content": "Phím tắt", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "ShortcutsCloseBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ShortcutsCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "ShortcutsContent", - "width": "fill_container", - "height": "fill_container", - "padding": 20, - "layout": "vertical", - "gap": 20, - "children": [ - {"type": "frame", "id": "ShortcutsSection1", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ - {"type": "text", "id": "ShortcutsSection1Label", "fill": "$text-secondary", "content": "Bán hàng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "Shortcut1", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "Shortcut1Desc", "fill": "$text-primary", "content": "Thanh toán nhanh", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, - {"type": "frame", "id": "Shortcut1Keys", "gap": 6, "children": [ - {"type": "frame", "id": "Shortcut1Key1", "fill": "$bg-page", "cornerRadius": 6, "padding": [6, 10], "children": [ - {"type": "text", "id": "Shortcut1Key1Text", "fill": "$text-primary", "content": "⌘", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "Shortcut1Key2", "fill": "$bg-page", "cornerRadius": 6, "padding": [6, 10], "children": [ - {"type": "text", "id": "Shortcut1Key2Text", "fill": "$text-primary", "content": "Enter", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]} - ]} - ]}, - {"type": "frame", "id": "Shortcut2", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "Shortcut2Desc", "fill": "$text-primary", "content": "Tìm sản phẩm", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, - {"type": "frame", "id": "Shortcut2Keys", "gap": 6, "children": [ - {"type": "frame", "id": "Shortcut2Key1", "fill": "$bg-page", "cornerRadius": 6, "padding": [6, 10], "children": [ - {"type": "text", "id": "Shortcut2Key1Text", "fill": "$text-primary", "content": "⌘", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "Shortcut2Key2", "fill": "$bg-page", "cornerRadius": 6, "padding": [6, 10], "children": [ - {"type": "text", "id": "Shortcut2Key2Text", "fill": "$text-primary", "content": "K", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]} - ]} - ]}, - {"type": "frame", "id": "Shortcut3", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "Shortcut3Desc", "fill": "$text-primary", "content": "Lưu đơn tạm", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, - {"type": "frame", "id": "Shortcut3Keys", "gap": 6, "children": [ - {"type": "frame", "id": "Shortcut3Key1", "fill": "$bg-page", "cornerRadius": 6, "padding": [6, 10], "children": [ - {"type": "text", "id": "Shortcut3Key1Text", "fill": "$text-primary", "content": "⌘", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "Shortcut3Key2", "fill": "$bg-page", "cornerRadius": 6, "padding": [6, 10], "children": [ - {"type": "text", "id": "Shortcut3Key2Text", "fill": "$text-primary", "content": "H", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]} - ]} - ]} - ]}, - {"type": "frame", "id": "ShortcutsDivider", "width": "fill_container", "height": 1, "fill": "$border-subtle"}, - {"type": "frame", "id": "ShortcutsSection2", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ - {"type": "text", "id": "ShortcutsSection2Label", "fill": "$text-secondary", "content": "Điều hướng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "Shortcut4", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "Shortcut4Desc", "fill": "$text-primary", "content": "Mở menu", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, - {"type": "frame", "id": "Shortcut4Keys", "gap": 6, "children": [ - {"type": "frame", "id": "Shortcut4Key1", "fill": "$bg-page", "cornerRadius": 6, "padding": [6, 10], "children": [ - {"type": "text", "id": "Shortcut4Key1Text", "fill": "$text-primary", "content": "⌘", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "Shortcut4Key2", "fill": "$bg-page", "cornerRadius": 6, "padding": [6, 10], "children": [ - {"type": "text", "id": "Shortcut4Key2Text", "fill": "$text-primary", "content": "M", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]} - ]} - ]}, - {"type": "frame", "id": "Shortcut5", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "Shortcut5Desc", "fill": "$text-primary", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, - {"type": "frame", "id": "Shortcut5Keys", "gap": 6, "children": [ - {"type": "frame", "id": "Shortcut5Key1", "fill": "$bg-page", "cornerRadius": 6, "padding": [6, 10], "children": [ - {"type": "text", "id": "Shortcut5Key1Text", "fill": "$text-primary", "content": "⌘", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "Shortcut5Key2", "fill": "$bg-page", "cornerRadius": 6, "padding": [6, 10], "children": [ - {"type": "text", "id": "Shortcut5Key2Text", "fill": "$text-primary", "content": ",", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]} - ]} - ]}, - {"type": "frame", "id": "Shortcut6", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "Shortcut6Desc", "fill": "$text-primary", "content": "Hiện phím tắt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, - {"type": "frame", "id": "Shortcut6Keys", "gap": 6, "children": [ - {"type": "frame", "id": "Shortcut6Key1", "fill": "$bg-page", "cornerRadius": 6, "padding": [6, 10], "children": [ - {"type": "text", "id": "Shortcut6Key1Text", "fill": "$text-primary", "content": "⌘", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "Shortcut6Key2", "fill": "$bg-page", "cornerRadius": 6, "padding": [6, 10], "children": [ - {"type": "text", "id": "Shortcut6Key2Text", "fill": "$text-primary", "content": "/", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]} - ]} - ]} - ]}, - {"type": "frame", "id": "ShortcutsDivider2", "width": "fill_container", "height": 1, "fill": "$border-subtle"}, - {"type": "frame", "id": "ShortcutsSection3", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ - {"type": "text", "id": "ShortcutsSection3Label", "fill": "$text-secondary", "content": "Số lượng nhanh", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "Shortcut7", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "Shortcut7Desc", "fill": "$text-primary", "content": "Tăng số lượng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, - {"type": "frame", "id": "Shortcut7Key", "fill": "$bg-page", "cornerRadius": 6, "padding": [6, 10], "children": [ - {"type": "text", "id": "Shortcut7KeyText", "fill": "$text-primary", "content": "+", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "Shortcut8", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "Shortcut8Desc", "fill": "$text-primary", "content": "Giảm số lượng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, - {"type": "frame", "id": "Shortcut8Key", "fill": "$bg-page", "cornerRadius": 6, "padding": [6, 10], "children": [ - {"type": "text", "id": "Shortcut8KeyText", "fill": "$text-primary", "content": "-", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]} - ]} - ]} - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/low-stock-alert.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/low-stock-alert.pen deleted file mode 100644 index f9c7a4a5..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/low-stock-alert.pen +++ /dev/null @@ -1,130 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "LowStockAlertDialog", - "name": "Dialog/LowStockAlert", - "reusable": true, - "width": 420, - "height": 520, - "fill": "$bg-elevated", - "cornerRadius": 20, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "AlertHeader", - "width": "fill_container", - "padding": [16, 20], - "gap": 12, - "alignItems": "center", - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "children": [ - {"type": "frame", "id": "AlertIconBg", "width": 44, "height": 44, "fill": "#EAB30815", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "AlertIcon", "width": 22, "height": 22, "iconFontName": "alert-triangle", "iconFontFamily": "lucide", "fill": "#EAB308"} - ]}, - {"type": "frame", "id": "AlertTitleBox", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "AlertTitle", "fill": "$text-primary", "content": "Cảnh Báo Tồn Kho Thấp", "fontFamily": "Roboto", "fontSize": 17, "fontWeight": "700"}, - {"type": "text", "id": "AlertCount", "fill": "#EAB308", "content": "5 sản phẩm cần nhập thêm", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "AlertClose", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "AlertCloseIcon", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "AlertContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "padding": [14, 20], - "gap": 10, - "children": [ - {"type": "frame", "id": "Item1", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 12, "padding": 14, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "Item1Status", "width": 8, "height": 44, "fill": "#EF4444", "cornerRadius": 4}, - {"type": "frame", "id": "Item1Info", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "Item1Name", "fill": "$text-primary", "content": "Cà phê rang xay", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "frame", "id": "Item1Meta", "gap": 12, "children": [ - {"type": "text", "id": "Item1Stock", "fill": "#EF4444", "content": "Còn: 2 kg", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "text", "id": "Item1Min", "fill": "$text-tertiary", "content": "Tối thiểu: 10 kg", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "Item1OrderBtn", "fill": "$orange-primary", "cornerRadius": 8, "padding": [8, 12], "children": [ - {"type": "text", "id": "Item1OrderText", "fill": "#FFFFFF", "content": "Đặt hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "Item2", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 12, "padding": 14, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "Item2Status", "width": 8, "height": 44, "fill": "#EF4444", "cornerRadius": 4}, - {"type": "frame", "id": "Item2Info", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "Item2Name", "fill": "$text-primary", "content": "Sữa tươi", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "frame", "id": "Item2Meta", "gap": 12, "children": [ - {"type": "text", "id": "Item2Stock", "fill": "#EF4444", "content": "Còn: 3 lít", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "text", "id": "Item2Min", "fill": "$text-tertiary", "content": "Tối thiểu: 20 lít", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "Item2OrderBtn", "fill": "$orange-primary", "cornerRadius": 8, "padding": [8, 12], "children": [ - {"type": "text", "id": "Item2OrderText", "fill": "#FFFFFF", "content": "Đặt hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "Item3", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 12, "padding": 14, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "Item3Status", "width": 8, "height": 44, "fill": "#EAB308", "cornerRadius": 4}, - {"type": "frame", "id": "Item3Info", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "Item3Name", "fill": "$text-primary", "content": "Đường cát trắng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "frame", "id": "Item3Meta", "gap": 12, "children": [ - {"type": "text", "id": "Item3Stock", "fill": "#EAB308", "content": "Còn: 5 kg", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "text", "id": "Item3Min", "fill": "$text-tertiary", "content": "Tối thiểu: 10 kg", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "Item3OrderBtn", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [8, 12], "children": [ - {"type": "text", "id": "Item3OrderText", "fill": "$text-secondary", "content": "Đặt hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "Item4", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 12, "padding": 14, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "Item4Status", "width": 8, "height": 44, "fill": "#EAB308", "cornerRadius": 4}, - {"type": "frame", "id": "Item4Info", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "Item4Name", "fill": "$text-primary", "content": "Ly giấy 12oz", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "frame", "id": "Item4Meta", "gap": 12, "children": [ - {"type": "text", "id": "Item4Stock", "fill": "#EAB308", "content": "Còn: 50 cái", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "text", "id": "Item4Min", "fill": "$text-tertiary", "content": "Tối thiểu: 100 cái", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "Item4OrderBtn", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [8, 12], "children": [ - {"type": "text", "id": "Item4OrderText", "fill": "$text-secondary", "content": "Đặt hàng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "AlertFooter", - "width": "fill_container", - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "gap": 12, - "padding": [16, 20], - "children": [ - {"type": "frame", "id": "RemindLaterBtn", "width": "fill_container", "height": 46, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "RemindLaterText", "fill": "$text-secondary", "content": "Nhắc sau", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "OrderAllBtn", "width": "fill_container", "height": 46, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "OrderAllIcon", "width": 18, "height": 18, "iconFontName": "shopping-cart", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "OrderAllText", "fill": "#FFFFFF", "content": "Đặt tất cả", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/loyalty-reward.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/loyalty-reward.pen deleted file mode 100644 index 442fb120..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/loyalty-reward.pen +++ /dev/null @@ -1,123 +0,0 @@ -{ - "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/loyalty-scan.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/loyalty-scan.pen deleted file mode 100644 index 15178652..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/loyalty-scan.pen +++ /dev/null @@ -1,124 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "LoyaltyScan", - "name": "Loyalty Scan", - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "LSModal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 20, - "padding": 28, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "LSIcon", "width": 64, "height": 64, "fill": "#F59E0B1A", "cornerRadius": 32, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LSIconI", "width": 28, "height": 28, "iconFontName": "scan", "iconFontFamily": "lucide", "fill": "#F59E0B"} - ]}, - {"type": "frame", "id": "LSTitle", "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "LSTitleT", "fill": "#FFFFFF", "content": "Quét thẻ thành viên", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}, - {"type": "text", "id": "LSDesc", "fill": "#8B8B90", "content": "Đưa thẻ/QR vào camera hoặc nhập số điện thoại", "fontFamily": "Roboto", "fontSize": 13, "textAlign": "center"} - ]}, - {"type": "frame", "id": "LSCamera", "width": "fill_container", "height": 180, "fill": "#1A1A1D", "cornerRadius": 14, "stroke": {"thickness": 2, "fill": "#F59E0B", "dashArray": [8, 4]}, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "frame", "id": "LSCameraInner", "layout": "vertical", "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LSCameraI", "width": 40, "height": 40, "iconFontName": "qr-code", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "text", "id": "LSCameraT", "fill": "#8B8B90", "content": "Đang chờ quét...", "fontFamily": "Roboto", "fontSize": 13} - ]} - ]}, - {"type": "frame", "id": "LSDivider", "width": "fill_container", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "LSDivL", "width": "fill_container", "height": 1, "fill": "#2A2A2E"}, - {"type": "text", "id": "LSDivT", "fill": "#6B6B70", "content": "hoặc", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "LSDivR", "width": "fill_container", "height": 1, "fill": "#2A2A2E"} - ]}, - {"type": "frame", "id": "LSPhone", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "LSPhoneL", "fill": "#8B8B90", "content": "Số điện thoại", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "LSPhoneInput", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "padding": [12, 14], "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LSPhoneI", "width": 18, "height": 18, "iconFontName": "phone", "iconFontFamily": "lucide", "fill": "#6B6B70"}, - {"type": "text", "id": "LSPhoneV", "fill": "#6B6B70", "content": "Nhập số điện thoại...", "fontFamily": "Roboto", "fontSize": 14} - ]} - ]}, - {"type": "frame", "id": "LSActions", "width": "fill_container", "gap": 10, "children": [ - {"type": "frame", "id": "LSSkip", "width": "fill_container", "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "LSSkipT", "fill": "#ADADB0", "content": "Bỏ qua", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "LSSearch", "width": "fill_container", "height": 48, "fill": "#F59E0B", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LSSearchI", "width": 16, "height": 16, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "#000"}, - {"type": "text", "id": "LSSearchT", "fill": "#000000", "content": "Tìm kiếm", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "LoyaltyFound", - "name": "Loyalty Found", - "x": 540, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "LFModal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 2, "fill": "#22C55E"}, - "layout": "vertical", - "gap": 20, - "padding": 28, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "LFAvatar", "width": 72, "height": 72, "fill": "#F59E0B30", "cornerRadius": 36, "stroke": {"thickness": 3, "fill": "#F59E0B"}, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "LFInitial", "fill": "#F59E0B", "content": "NM", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "LFInfo", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "LFName", "fill": "#FFFFFF", "content": "Nguyễn Minh", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}, - {"type": "frame", "id": "LFTier", "fill": "#F59E0B", "cornerRadius": 12, "padding": [4, 12], "children": [{"type": "text", "id": "LFTierT", "fill": "#000", "content": "GOLD MEMBER", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}]}, - {"type": "text", "id": "LFPhone", "fill": "#8B8B90", "content": "0912 345 678", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "LFPoints", "width": "fill_container", "fill": "#F59E0B10", "cornerRadius": 14, "padding": 18, "justifyContent": "space_around", "children": [ - {"type": "frame", "id": "LFP1", "alignItems": "center", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "LFP1V", "fill": "#F59E0B", "content": "2,340", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "text", "id": "LFP1L", "fill": "#8B8B90", "content": "Điểm hiện có", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "frame", "id": "LFPDiv", "width": 1, "height": 40, "fill": "#F59E0B30"}, - {"type": "frame", "id": "LFP2", "alignItems": "center", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "LFP2V", "fill": "#22C55E", "content": "-5%", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "text", "id": "LFP2L", "fill": "#8B8B90", "content": "Ưu đãi Gold", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "LFRewards", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "LFRewardsL", "fill": "#8B8B90", "content": "Ưu đãi khả dụng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "frame", "id": "LFR1", "width": "fill_container", "fill": "#22C55E10", "cornerRadius": 8, "padding": 10, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "LFR1L", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "LFR1I", "width": 14, "height": 14, "iconFontName": "gift", "iconFontFamily": "lucide", "fill": "#22C55E"}, {"type": "text", "id": "LFR1T", "fill": "#22C55E", "content": "Free 1 bánh mì", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "text", "id": "LFR1V", "fill": "#8B8B90", "content": "500 điểm", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "frame", "id": "LFR2", "width": "fill_container", "fill": "#3B82F610", "cornerRadius": 8, "padding": 10, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "LFR2L", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "LFR2I", "width": 14, "height": 14, "iconFontName": "percent", "iconFontFamily": "lucide", "fill": "#3B82F6"}, {"type": "text", "id": "LFR2T", "fill": "#3B82F6", "content": "Giảm 15% đơn tiếp", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "text", "id": "LFR2V", "fill": "#8B8B90", "content": "1000 điểm", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "LFApply", "width": "fill_container", "height": 50, "fill": "#22C55E", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LFApplyI", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "LFApplyT", "fill": "#FFFFFF", "content": "Áp dụng cho đơn hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - } - ] -} 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 deleted file mode 100644 index e89507de..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/manager-override.pen +++ /dev/null @@ -1,410 +0,0 @@ -{ - "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 deleted file mode 100644 index 65ec67e6..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/modifier-select.pen +++ /dev/null @@ -1,144 +0,0 @@ -{ - "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/multi-discount.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/multi-discount.pen deleted file mode 100644 index 285a2c5d..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/multi-discount.pen +++ /dev/null @@ -1,571 +0,0 @@ -{ - "version": "2.7", - "children": [ - { - "type": "frame", - "id": "MultiDiscountDialog", - "x": 0, - "y": 0, - "name": "Dialog/MultiDiscount", - "reusable": true, - "clip": true, - "width": 420, - "height": 634, - "fill": "$bg-elevated", - "cornerRadius": 24, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "MultiDiscountHeader", - "width": "fill_container", - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "padding": [ - 16, - 20 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "MultiDiscountHeaderLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "MultiDiscountIconBg", - "width": 40, - "height": 40, - "fill": "#EC489920", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MultiDiscountIcon", - "width": 20, - "height": 20, - "iconFontName": "percent", - "iconFontFamily": "lucide", - "fill": "#EC4899" - } - ] - }, - { - "type": "text", - "id": "MultiDiscountTitle", - "fill": "$text-primary", - "content": "Áp dụng giảm giá", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "MultiDiscountCloseBtn", - "width": 36, - "height": 36, - "fill": "$bg-interactive", - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MultiDiscountCloseIcon", - "width": 18, - "height": 18, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "MultiDiscountContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "gap": 16, - "padding": 20, - "children": [ - { - "type": "frame", - "id": "DiscountOrderTotal", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 14, - "padding": [ - 14, - 16 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "DiscountOrderLabel", - "fill": "$text-secondary", - "content": "Tổng đơn hàng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "DiscountOrderValue", - "fill": "$text-primary", - "content": "485,000₫", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "DiscountList", - "width": "fill_container", - "layout": "vertical", - "gap": 10, - "children": [ - { - "type": "text", - "id": "DiscountListLabel", - "fill": "$text-secondary", - "content": "Giảm giá áp dụng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "DiscountItem1", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 14, - "stroke": { - "thickness": 2, - "fill": "#22C55E" - }, - "gap": 12, - "padding": 14, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "DiscountItem1Check", - "width": 24, - "height": 24, - "fill": "#22C55E", - "cornerRadius": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "DiscountItem1CheckIcon", - "width": 14, - "height": 14, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$text-primary" - } - ] - }, - { - "type": "frame", - "id": "DiscountItem1Info", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "DiscountItem1Name", - "fill": "$text-primary", - "content": "Giảm 10% Thành viên VIP", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "text", - "id": "DiscountItem1Desc", - "fill": "$text-tertiary", - "content": "Tự động áp dụng cho KH VIP", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "DiscountItem1Value", - "fill": "#22C55E", - "content": "-48,500₫", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "DiscountItem2", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 14, - "stroke": { - "thickness": 2, - "fill": "#22C55E" - }, - "gap": 12, - "padding": 14, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "DiscountItem2Check", - "width": 24, - "height": 24, - "fill": "#22C55E", - "cornerRadius": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "DiscountItem2CheckIcon", - "width": 14, - "height": 14, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$text-primary" - } - ] - }, - { - "type": "frame", - "id": "DiscountItem2Info", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "DiscountItem2Name", - "fill": "$text-primary", - "content": "Mã: SALE50K", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "text", - "id": "DiscountItem2Desc", - "fill": "$text-tertiary", - "content": "Giảm 50K cho đơn từ 400K", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "DiscountItem2Value", - "fill": "#22C55E", - "content": "-50,000₫", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "DiscountItem3", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 14, - "gap": 12, - "padding": 14, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "DiscountItem3Check", - "width": 24, - "height": 24, - "fill": "$bg-interactive", - "cornerRadius": 6, - "stroke": { - "thickness": 2, - "fill": "$border-default" - } - }, - { - "type": "frame", - "id": "DiscountItem3Info", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "DiscountItem3Name", - "fill": "$text-primary", - "content": "Sinh nhật -20%", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "text", - "id": "DiscountItem3Desc", - "fill": "$text-tertiary", - "content": "Không thỏa điều kiện", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "DiscountItem3Value", - "fill": "$text-tertiary", - "content": "N/A", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "DiscountCodeInput", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "text", - "id": "DiscountCodeLabel", - "fill": "$text-secondary", - "content": "Nhập mã giảm giá", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "DiscountCodeRow", - "width": "fill_container", - "gap": 10, - "children": [ - { - "type": "frame", - "id": "DiscountCodeField", - "width": "fill_container", - "height": 48, - "fill": "$bg-page", - "cornerRadius": 12, - "padding": [ - 0, - 14 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "DiscountCodePlaceholder", - "fill": "$text-tertiary", - "content": "VD: SUMMER2024", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "DiscountCodeApplyBtn", - "width": 80, - "height": 48, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "DiscountCodeApplyText", - "fill": "$text-primary", - "content": "Áp dụng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "DiscountSummary", - "width": "fill_container", - "fill": "#FF5C0015", - "cornerRadius": 14, - "padding": [ - 14, - 16 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "DiscountSummaryLabel", - "fill": "$text-primary", - "content": "Tổng giảm:", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - }, - { - "type": "text", - "id": "DiscountSummaryValue", - "fill": "$orange-primary", - "content": "-98,500₫", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "700" - } - ] - } - ] - }, - { - "type": "frame", - "id": "MultiDiscountFooter", - "width": "fill_container", - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "padding": [ - 16, - 20 - ], - "children": [ - { - "type": "frame", - "id": "MultiDiscountApplyBtn", - "width": "fill_container", - "height": 52, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8533", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "gap": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MultiDiscountApplyIcon", - "width": 20, - "height": 20, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "MultiDiscountApplyText", - "fill": "$text-primary", - "content": "Xác nhận giảm giá", - "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/network-error.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/network-error.pen deleted file mode 100644 index e079e7ba..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/network-error.pen +++ /dev/null @@ -1,253 +0,0 @@ -{ - "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/open-price.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/open-price.pen deleted file mode 100644 index a7e3ffef..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/open-price.pen +++ /dev/null @@ -1,107 +0,0 @@ -{ - "version": "2.7", - "children": [ - { - "type": "frame", - "id": "OpenPriceDialog", - "name": "Dialog/OpenPrice", - "reusable": true, - "clip": true, - "width": 360, - "height": 420, - "fill": "$bg-elevated", - "cornerRadius": 24, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "OpenPriceHeader", - "width": "fill_container", - "padding": [16, 20], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "OpenPriceHeaderLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "OpenPriceIconBg", "width": 40, "height": 40, "fill": "#F59E0B20", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "OpenPriceIcon", "width": 20, "height": 20, "iconFontName": "tag", "iconFontFamily": "lucide", "fill": "#F59E0B"} - ]}, - {"type": "text", "id": "OpenPriceTitle", "fill": "$text-primary", "content": "Nhập giá", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "OpenPriceCloseBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "OpenPriceCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "OpenPriceContent", - "width": "fill_container", - "height": "fill_container", - "padding": 20, - "layout": "vertical", - "gap": 16, - "children": [ - {"type": "frame", "id": "OpenPriceProductInfo", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "OpenPriceProductImg", "width": 48, "height": 48, "fill": "#8B5CF620", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "OpenPriceProductIcon", "width": 24, "height": 24, "iconFontName": "package", "iconFontFamily": "lucide", "fill": "#8B5CF6"} - ]}, - {"type": "frame", "id": "OpenPriceProductText", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "OpenPriceProductName", "fill": "$text-primary", "content": "Sản phẩm tùy chỉnh", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, - {"type": "text", "id": "OpenPriceProductSKU", "fill": "$text-tertiary", "content": "Giá linh hoạt", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ]} - ]}, - {"type": "frame", "id": "OpenPriceInputSection", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "OpenPriceInputLabel", "fill": "$text-secondary", "content": "Nhập giá bán", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "OpenPriceInput", "width": "fill_container", "height": 60, "fill": "$bg-page", "cornerRadius": 14, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "padding": [0, 16], "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "OpenPriceInputValue", "fill": "$orange-primary", "content": "75,000₫", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"} - ]} - ]}, - {"type": "frame", "id": "OpenPriceQuickBtns", "width": "fill_container", "gap": 8, "children": [ - {"type": "frame", "id": "OpenPriceQuick1", "width": "fill_container", "height": 40, "fill": "$bg-page", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "OpenPriceQuick1Text", "fill": "$text-secondary", "content": "50K", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "OpenPriceQuick2", "width": "fill_container", "height": 40, "fill": "$bg-page", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "OpenPriceQuick2Text", "fill": "$text-secondary", "content": "100K", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "OpenPriceQuick3", "width": "fill_container", "height": 40, "fill": "$bg-page", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "OpenPriceQuick3Text", "fill": "$text-secondary", "content": "200K", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "OpenPriceQuick4", "width": "fill_container", "height": 40, "fill": "$bg-page", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "OpenPriceQuick4Text", "fill": "$text-secondary", "content": "500K", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "OpenPriceFooter", - "width": "fill_container", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, - "gap": 12, - "padding": [16, 20], - "children": [ - {"type": "frame", "id": "OpenPriceCancelBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "OpenPriceCancelText", "fill": "$text-secondary", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "OpenPriceConfirmBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8533", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "OpenPriceConfirmIcon", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "OpenPriceConfirmText", "fill": "$text-primary", "content": "Xác nhận", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/order-cancel.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/order-cancel.pen deleted file mode 100644 index aa3cb88f..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/order-cancel.pen +++ /dev/null @@ -1,97 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "OrderCancelDialog", - "name": "Dialog/OrderCancel", - "reusable": true, - "width": 400, - "height": 520, - "fill": "$bg-elevated", - "cornerRadius": 24, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "CancelContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "gap": 20, - "padding": [28, 24], - "children": [ - { - "type": "frame", "id": "CancelIconBg", "width": 72, "height": 72, "fill": "#EF444415", "cornerRadius": 36, "justifyContent": "center", "alignItems": "center", "alignSelf": "center", "children": [ - {"type": "frame", "id": "CancelIconInner", "width": 52, "height": 52, "fill": "#EF444420", "cornerRadius": 26, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CancelIcon", "width": 28, "height": 28, "iconFontName": "x-circle", "iconFontFamily": "lucide", "fill": "#EF4444"} - ]} - ] - }, - { - "type": "frame", "id": "CancelTextContent", "width": "fill_container", "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "CancelTitle", "fill": "$text-primary", "content": "Hủy Đơn Hàng", "textAlign": "center", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}, - {"type": "text", "id": "CancelOrderId", "fill": "$text-tertiary", "content": "Đơn hàng #00458", "textAlign": "center", "fontFamily": "Roboto", "fontSize": 14} - ] - }, - {"type": "frame", "id": "ReasonField", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "ReasonLabel", "fill": "$text-secondary", "content": "Chọn lý do hủy", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "Reason1", "width": "fill_container", "height": 44, "fill": "$bg-page", "cornerRadius": 10, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "Radio1", "width": 18, "height": 18, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "frame", "id": "Radio1Inner", "width": 10, "height": 10, "fill": "$orange-primary", "cornerRadius": 6} - ]}, - {"type": "text", "id": "Reason1Text", "fill": "$text-primary", "content": "Khách yêu cầu hủy", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "Reason2", "width": "fill_container", "height": 44, "fill": "$bg-page", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "Radio2", "width": 18, "height": 18, "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 10}, - {"type": "text", "id": "Reason2Text", "fill": "$text-secondary", "content": "Hết hàng/Nguyên liệu", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "Reason3", "width": "fill_container", "height": 44, "fill": "$bg-page", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "Radio3", "width": 18, "height": 18, "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 10}, - {"type": "text", "id": "Reason3Text", "fill": "$text-secondary", "content": "Nhập sai đơn", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "Reason4", "width": "fill_container", "height": 44, "fill": "$bg-page", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "Radio4", "width": 18, "height": 18, "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 10}, - {"type": "text", "id": "Reason4Text", "fill": "$text-secondary", "content": "Lý do khác", "fontFamily": "Roboto", "fontSize": 14} - ]} - ]}, - {"type": "frame", "id": "NoteField", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "text", "id": "NoteLabel", "fill": "$text-secondary", "content": "Ghi chú thêm (tùy chọn)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "NoteInput", "width": "fill_container", "height": 64, "fill": "$bg-page", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [10, 14], "children": [ - {"type": "text", "id": "NoteVal", "fill": "$text-tertiary", "content": "Khách đổi ý không muốn mua...", "fontFamily": "Roboto", "fontSize": 14} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "CancelFooter", - "width": "fill_container", - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "gap": 12, - "padding": [16, 24], - "children": [ - {"type": "frame", "id": "BackBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "BackText", "fill": "$text-secondary", "content": "Quay lại", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "ConfirmCancelBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#EF4444", "position": 0}, {"color": "#DC2626", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ConfirmCancelIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "ConfirmCancelText", "fill": "#FFFFFF", "content": "Hủy đơn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/order-edit.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/order-edit.pen deleted file mode 100644 index 334b86af..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/order-edit.pen +++ /dev/null @@ -1,143 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "OrderEditDialog", - "name": "Dialog/OrderEdit", - "reusable": true, - "width": 480, - "height": 620, - "fill": "$bg-elevated", - "cornerRadius": 20, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "EditHeader", - "width": "fill_container", - "padding": [16, 20], - "gap": 12, - "alignItems": "center", - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "children": [ - {"type": "frame", "id": "EditIconBg", "width": 40, "height": 40, "fill": "#EAB30815", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "EditIcon", "width": 20, "height": 20, "iconFontName": "pencil", "iconFontFamily": "lucide", "fill": "#EAB308"} - ]}, - {"type": "frame", "id": "EditTitleBox", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "EditTitle", "fill": "$text-primary", "content": "Chỉnh Sửa Đơn Hàng", "fontFamily": "Roboto", "fontSize": 17, "fontWeight": "700"}, - {"type": "text", "id": "EditSubtitle", "fill": "$text-tertiary", "content": "Đơn hàng #00458 - Bàn 05", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "EditClose", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "EditCloseIcon", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "EditContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "gap": 12, - "padding": [16, 20], - "children": [ - {"type": "frame", "id": "OrderItem1", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 12, "padding": 14, "gap": 12, "children": [ - {"type": "frame", "id": "Item1Img", "width": 48, "height": 48, "fill": "#3B82F620", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Item1Icon", "width": 24, "height": 24, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "#3B82F6"} - ]}, - {"type": "frame", "id": "Item1Info", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "Item1Name", "fill": "$text-primary", "content": "Cà phê sữa đá", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "Item1Price", "fill": "$text-tertiary", "content": "35,000đ × 2", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "Item1Controls", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "Item1Minus", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Item1MinusIcon", "width": 16, "height": 16, "iconFontName": "minus", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]}, - {"type": "text", "id": "Item1Qty", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600", "width": 24, "textAlign": "center"}, - {"type": "frame", "id": "Item1Plus", "width": 32, "height": 32, "fill": "$orange-primary", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Item1PlusIcon", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"} - ]} - ]}, - {"type": "frame", "id": "Item1Delete", "width": 32, "height": 32, "fill": "#EF444420", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Item1DeleteIcon", "width": 16, "height": 16, "iconFontName": "trash-2", "iconFontFamily": "lucide", "fill": "#EF4444"} - ]} - ]}, - {"type": "frame", "id": "OrderItem2", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 12, "padding": 14, "gap": 12, "children": [ - {"type": "frame", "id": "Item2Img", "width": 48, "height": 48, "fill": "#F9731620", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Item2Icon", "width": 24, "height": 24, "iconFontName": "croissant", "iconFontFamily": "lucide", "fill": "#F97316"} - ]}, - {"type": "frame", "id": "Item2Info", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "Item2Name", "fill": "$text-primary", "content": "Bánh mì thịt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "Item2Price", "fill": "$text-tertiary", "content": "25,000đ × 1", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "Item2Controls", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "Item2Minus", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Item2MinusIcon", "width": 16, "height": 16, "iconFontName": "minus", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]}, - {"type": "text", "id": "Item2Qty", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600", "width": 24, "textAlign": "center"}, - {"type": "frame", "id": "Item2Plus", "width": 32, "height": 32, "fill": "$orange-primary", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Item2PlusIcon", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"} - ]} - ]}, - {"type": "frame", "id": "Item2Delete", "width": 32, "height": 32, "fill": "#EF444420", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Item2DeleteIcon", "width": 16, "height": 16, "iconFontName": "trash-2", "iconFontFamily": "lucide", "fill": "#EF4444"} - ]} - ]}, - {"type": "frame", "id": "AddItemBtn", "width": "fill_container", "height": 48, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "AddItemIcon", "width": 18, "height": 18, "iconFontName": "plus-circle", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "text", "id": "AddItemText", "fill": "$orange-primary", "content": "Thêm món mới", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "EditNote", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "text", "id": "EditNoteLabel", "fill": "$text-secondary", "content": "Ghi chú đơn hàng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "EditNoteInput", "width": "fill_container", "height": 64, "fill": "$bg-page", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [10, 14], "children": [ - {"type": "text", "id": "EditNoteVal", "fill": "$text-tertiary", "content": "Ít đường, không đá", "fontFamily": "Roboto", "fontSize": 14} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "EditSummary", - "width": "fill_container", - "fill": "$bg-page", - "padding": [12, 20], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "text", "id": "SummaryLabel", "fill": "$text-secondary", "content": "Tổng cộng (3 món)", "fontFamily": "Roboto", "fontSize": 14}, - {"type": "text", "id": "SummaryTotal", "fill": "$orange-primary", "content": "95,000đ", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} - ] - }, - { - "type": "frame", - "id": "EditFooter", - "width": "fill_container", - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "gap": 12, - "padding": [16, 20], - "children": [ - {"type": "frame", "id": "DiscardBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "DiscardText", "fill": "$text-secondary", "content": "Hủy thay đổi", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SaveBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SaveIcon", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "SaveText", "fill": "#FFFFFF", "content": "Lưu thay đổi", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/order-reprint.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/order-reprint.pen deleted file mode 100644 index d210b19e..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/order-reprint.pen +++ /dev/null @@ -1,451 +0,0 @@ -{ - "version": "2.7", - "children": [ - { - "type": "frame", - "id": "OrderReprintDialog", - "x": 0, - "y": 0, - "name": "Dialog/OrderReprint", - "reusable": true, - "width": 380, - "height": 456, - "fill": "$bg-elevated", - "cornerRadius": 20, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "ReprintContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "gap": 20, - "padding": [ - 28, - 24 - ], - "children": [ - { - "type": "frame", - "id": "ReprintIconWrap", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "ReprintIconBg", - "width": 72, - "height": 72, - "fill": "#3B82F615", - "cornerRadius": 36, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ReprintIconInner", - "width": 52, - "height": 52, - "fill": "#3B82F620", - "cornerRadius": 26, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ReprintIcon", - "width": 28, - "height": 28, - "iconFontName": "printer", - "iconFontFamily": "lucide", - "fill": "#3B82F6" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ReprintTitle", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ReprintTitleText", - "fill": "$text-primary", - "content": "In Lại Hóa Đơn", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "700" - }, - { - "type": "text", - "id": "ReprintOrderId", - "fill": "$text-tertiary", - "content": "Đơn hàng #00458", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "PrintOptions", - "width": "fill_container", - "layout": "vertical", - "gap": 10, - "children": [ - { - "type": "frame", - "id": "Option1", - "width": "fill_container", - "height": 52, - "fill": "$bg-page", - "cornerRadius": 12, - "stroke": { - "thickness": 2, - "fill": "$orange-primary" - }, - "gap": 12, - "padding": [ - 0, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Option1Radio", - "width": 20, - "height": 20, - "cornerRadius": 10, - "stroke": { - "thickness": 2, - "fill": "$orange-primary" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Option1Dot", - "width": 10, - "height": 10, - "fill": "$orange-primary", - "cornerRadius": 5 - } - ] - }, - { - "type": "frame", - "id": "Option1Info", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "Option1Name", - "fill": "$text-primary", - "content": "Hóa đơn cho khách", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "text", - "id": "Option1Desc", - "fill": "$text-tertiary", - "content": "In hóa đơn đầy đủ", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "icon_font", - "id": "Option1Icon", - "width": 20, - "height": 20, - "iconFontName": "receipt", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - } - ] - }, - { - "type": "frame", - "id": "Option2", - "width": "fill_container", - "height": 52, - "fill": "$bg-page", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 12, - "padding": [ - 0, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Option2Radio", - "width": 20, - "height": 20, - "cornerRadius": 10, - "stroke": { - "thickness": 2, - "fill": "$border-default" - } - }, - { - "type": "frame", - "id": "Option2Info", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "Option2Name", - "fill": "$text-primary", - "content": "Phiếu bếp", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "text", - "id": "Option2Desc", - "fill": "$text-tertiary", - "content": "Chỉ in món ăn/đồ uống", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "icon_font", - "id": "Option2Icon", - "width": 20, - "height": 20, - "iconFontName": "chef-hat", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - }, - { - "type": "frame", - "id": "Option3", - "width": "fill_container", - "height": 52, - "fill": "$bg-page", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 12, - "padding": [ - 0, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Option3Radio", - "width": 20, - "height": 20, - "cornerRadius": 10, - "stroke": { - "thickness": 2, - "fill": "$border-default" - } - }, - { - "type": "frame", - "id": "Option3Info", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "Option3Name", - "fill": "$text-primary", - "content": "Bản sao lưu trữ", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "text", - "id": "Option3Desc", - "fill": "$text-tertiary", - "content": "In bản sao cho cửa hàng", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "icon_font", - "id": "Option3Icon", - "width": 20, - "height": 20, - "iconFontName": "archive", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ReprintFooter", - "width": "fill_container", - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "gap": 12, - "padding": [ - 16, - 24 - ], - "children": [ - { - "type": "frame", - "id": "CancelReprintBtn", - "width": "fill_container", - "height": 48, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "CancelReprintText", - "fill": "$text-secondary", - "content": "Hủy", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PrintBtn", - "width": "fill_container", - "height": 48, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PrintBtnIcon", - "width": 18, - "height": 18, - "iconFontName": "printer", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "PrintBtnText", - "fill": "#FFFFFF", - "content": "In ngay", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-elevated": { - "type": "color", - "value": "#1A1A1D" - }, - "bg-interactive": { - "type": "color", - "value": "#2A2A2E" - }, - "bg-page": { - "type": "color", - "value": "#0A0A0B" - }, - "border-default": { - "type": "color", - "value": "#2A2A2E" - }, - "border-subtle": { - "type": "color", - "value": "#1F1F23" - }, - "orange-primary": { - "type": "color", - "value": "#FF5C00" - }, - "text-primary": { - "type": "color", - "value": "#FFFFFF" - }, - "text-secondary": { - "type": "color", - "value": "#ADADB0" - }, - "text-tertiary": { - "type": "color", - "value": "#8B8B90" - } - } -} \ No newline at end of file diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/permission-denied.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/permission-denied.pen deleted file mode 100644 index 46d4d8ed..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/permission-denied.pen +++ /dev/null @@ -1,78 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "PermissionDeniedDialog", - "name": "Dialog/PermissionDenied", - "reusable": true, - "width": 380, - "height": 380, - "fill": "$bg-elevated", - "cornerRadius": 24, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "PermContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "gap": 20, - "padding": [32, 28], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", "id": "PermIconBg", "width": 80, "height": 80, "fill": "#EF444415", "cornerRadius": 40, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "frame", "id": "PermIconInner", "width": 56, "height": 56, "fill": "#EF444420", "cornerRadius": 28, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PermIcon", "width": 32, "height": 32, "iconFontName": "shield-x", "iconFontFamily": "lucide", "fill": "#EF4444"} - ]} - ] - }, - { - "type": "frame", "id": "PermTextContent", "width": "fill_container", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "PermTitle", "fill": "$text-primary", "content": "Không có quyền truy cập", "textAlign": "center", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, - {"type": "text", "id": "PermDesc", "fill": "$text-tertiary", "content": "Bạn không có quyền thực hiện\nthao tác này. Vui lòng liên hệ\nQuản lý để được cấp quyền.", "textAlign": "center", "fontFamily": "Roboto", "fontSize": 14, "lineHeight": 1.5} - ] - }, - { - "type": "frame", "id": "PermFeature", "fill": "$bg-page", "cornerRadius": 10, "padding": [10, 16], "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "FeatureIcon", "width": 18, "height": 18, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "FeatureName", "fill": "$text-secondary", "content": "Cài đặt hệ thống", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ] - } - ] - }, - { - "type": "frame", - "id": "PermFooter", - "width": "fill_container", - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "gap": 12, - "padding": [16, 24], - "children": [ - {"type": "frame", "id": "PermCloseBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "PermCloseText", "fill": "$text-secondary", "content": "Đóng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "PermRequestBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PermRequestIcon", "width": 18, "height": 18, "iconFontName": "user-plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "PermRequestText", "fill": "#FFFFFF", "content": "Yêu cầu quyền", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/petty-cash.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/petty-cash.pen deleted file mode 100644 index d0aab049..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/petty-cash.pen +++ /dev/null @@ -1,131 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "PettyCashDialog", - "name": "Dialog/PettyCash", - "reusable": true, - "width": 400, - "height": 520, - "fill": "$bg-elevated", - "cornerRadius": 20, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "PettyHeader", - "width": "fill_container", - "padding": [16, 20], - "gap": 12, - "alignItems": "center", - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "children": [ - {"type": "frame", "id": "PettyIconBg", "width": 44, "height": 44, "fill": "#22C55E15", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PettyIcon", "width": 22, "height": 22, "iconFontName": "coins", "iconFontFamily": "lucide", "fill": "#22C55E"} - ]}, - {"type": "frame", "id": "PettyTitleBox", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "PettyTitle", "fill": "$text-primary", "content": "Quỹ Tiền Lẻ", "fontFamily": "Roboto", "fontSize": 17, "fontWeight": "700"}, - {"type": "text", "id": "PettySubtitle", "fill": "$text-tertiary", "content": "Quản lý tiền lẻ đầu ca", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "PettyClose", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PettyCloseIcon", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "CurrentBalance", - "width": "fill_container", - "fill": "#22C55E15", - "padding": [16, 20], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "text", "id": "BalanceLabel", "fill": "$text-secondary", "content": "Số dư hiện tại", "fontFamily": "Roboto", "fontSize": 14}, - {"type": "text", "id": "BalanceValue", "fill": "#22C55E", "content": "500,000đ", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"} - ] - }, - { - "type": "frame", - "id": "PettyContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "padding": [16, 20], - "gap": 14, - "children": [ - {"type": "frame", "id": "ActionType", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "ActionLabel", "fill": "$text-secondary", "content": "Loại giao dịch", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "ActionTabs", "width": "fill_container", "gap": 10, "children": [ - {"type": "frame", "id": "AddTab", "width": "fill_container", "height": 44, "fill": "$orange-primary", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "AddTabIcon", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "AddTabText", "fill": "#FFFFFF", "content": "Thêm vào", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "WithdrawTab", "width": "fill_container", "height": 44, "fill": "$bg-page", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "$border-default"}, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "WithdrawTabIcon", "width": 18, "height": 18, "iconFontName": "minus", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "WithdrawTabText", "fill": "$text-secondary", "content": "Rút ra", "fontFamily": "Roboto", "fontSize": 14} - ]} - ]} - ]}, - {"type": "frame", "id": "AmountField", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "AmountLabel", "fill": "$text-secondary", "content": "Số tiền", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "AmountInput", "width": "fill_container", "height": 52, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "AmountVal", "fill": "$text-primary", "content": "200,000", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700", "width": "fill_container"}, - {"type": "text", "id": "AmountUnit", "fill": "$text-tertiary", "content": "đ", "fontFamily": "Roboto", "fontSize": 16} - ]} - ]}, - {"type": "frame", "id": "QuickAmounts", "width": "fill_container", "gap": 8, "children": [ - {"type": "frame", "id": "Quick1", "width": "fill_container", "height": 36, "fill": "$bg-page", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Quick1Text", "fill": "$text-secondary", "content": "50K", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "Quick2", "width": "fill_container", "height": 36, "fill": "$bg-page", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Quick2Text", "fill": "$text-secondary", "content": "100K", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "Quick3", "width": "fill_container", "height": 36, "fill": "$orange-primary", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Quick3Text", "fill": "#FFFFFF", "content": "200K", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "Quick4", "width": "fill_container", "height": 36, "fill": "$bg-page", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Quick4Text", "fill": "$text-secondary", "content": "500K", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "NoteField", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "text", "id": "NoteLabel", "fill": "$text-secondary", "content": "Ghi chú", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "NoteInput", "width": "fill_container", "height": 52, "fill": "$bg-page", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [12, 14], "children": [ - {"type": "text", "id": "NoteVal", "fill": "$text-tertiary", "content": "Bổ sung tiền lẻ đầu ca sáng...", "fontFamily": "Roboto", "fontSize": 14} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "PettyFooter", - "width": "fill_container", - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "gap": 12, - "padding": [16, 20], - "children": [ - {"type": "frame", "id": "CancelPettyBtn", "width": "fill_container", "height": 46, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "CancelPettyText", "fill": "$text-secondary", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "ConfirmPettyBtn", "width": "fill_container", "height": 46, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ConfirmPettyIcon", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "ConfirmPettyText", "fill": "#FFFFFF", "content": "Xác nhận", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/price-check.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/price-check.pen deleted file mode 100644 index fc5fc7b2..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/price-check.pen +++ /dev/null @@ -1,457 +0,0 @@ -{ - "version": "2.7", - "children": [ - { - "type": "frame", - "id": "PriceCheckDialog", - "x": 0, - "y": 0, - "name": "Dialog/PriceCheck", - "reusable": true, - "clip": true, - "width": 400, - "height": 523, - "fill": "$bg-elevated", - "cornerRadius": 24, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "PriceCheckHeader", - "width": "fill_container", - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "padding": [ - 16, - 20 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PriceCheckHeaderLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PriceCheckIconBg", - "width": 40, - "height": 40, - "fill": "#3B82F620", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PriceCheckIcon", - "width": 20, - "height": 20, - "iconFontName": "search", - "iconFontFamily": "lucide", - "fill": "#3B82F6" - } - ] - }, - { - "type": "text", - "id": "PriceCheckTitle", - "fill": "$text-primary", - "content": "Kiểm tra giá", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "PriceCheckCloseBtn", - "width": 36, - "height": 36, - "fill": "$bg-interactive", - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PriceCheckCloseIcon", - "width": 18, - "height": 18, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PriceCheckContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "gap": 20, - "padding": 20, - "children": [ - { - "type": "frame", - "id": "PriceCheckInputRow", - "width": "fill_container", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "PriceCheckInput", - "width": "fill_container", - "height": 52, - "fill": "$bg-page", - "cornerRadius": 12, - "stroke": { - "thickness": 2, - "fill": "$orange-primary" - }, - "gap": 12, - "padding": [ - 0, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PriceCheckInputIcon", - "width": 20, - "height": 20, - "iconFontName": "barcode", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "PriceCheckInputValue", - "fill": "$text-primary", - "content": "8936075400128", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PriceCheckScanBtn", - "width": 52, - "height": 52, - "fill": "$orange-primary", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PriceCheckScanIcon", - "width": 24, - "height": 24, - "iconFontName": "scan-line", - "iconFontFamily": "lucide", - "fill": "$text-primary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PriceCheckResult", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "layout": "vertical", - "gap": 16, - "padding": 20, - "children": [ - { - "type": "frame", - "id": "PriceCheckProduct", - "width": "fill_container", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PriceCheckProductImg", - "width": 72, - "height": 72, - "fill": "#8B5CF620", - "cornerRadius": 14, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PriceCheckProductIcon", - "width": 36, - "height": 36, - "iconFontName": "package", - "iconFontFamily": "lucide", - "fill": "#8B5CF6" - } - ] - }, - { - "type": "frame", - "id": "PriceCheckProductInfo", - "width": "fill_container", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "PriceCheckProductName", - "fill": "$text-primary", - "content": "Cà phê sữa đá", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "700" - }, - { - "type": "text", - "id": "PriceCheckProductSKU", - "fill": "$text-tertiary", - "content": "SKU: CF001 • Size M", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PriceCheckDivider", - "width": "fill_container", - "height": 1, - "fill": "$border-subtle" - }, - { - "type": "frame", - "id": "PriceCheckPriceRow", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "PriceCheckPriceLabel", - "fill": "$text-secondary", - "content": "Giá bán lẻ", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "PriceCheckPriceValue", - "fill": "$orange-primary", - "content": "35,000₫", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "PriceCheckPromoRow", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PriceCheckPromoLabel", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PriceCheckPromoIcon", - "width": 14, - "height": 14, - "iconFontName": "tag", - "iconFontFamily": "lucide", - "fill": "#22C55E" - }, - { - "type": "text", - "id": "PriceCheckPromoText", - "fill": "#22C55E", - "content": "Khuyến mãi 10%", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "PriceCheckPromoValue", - "fill": "#22C55E", - "content": "-3,500₫", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "PriceCheckStock", - "width": "fill_container", - "fill": "#22C55E15", - "cornerRadius": 10, - "gap": 8, - "padding": [ - 10, - 14 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PriceCheckStockIcon", - "width": 16, - "height": 16, - "iconFontName": "circle-check", - "iconFontFamily": "lucide", - "fill": "#22C55E" - }, - { - "type": "text", - "id": "PriceCheckStockText", - "fill": "#22C55E", - "content": "Còn hàng: 45 sản phẩm", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PriceCheckFooter", - "width": "fill_container", - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "padding": [ - 16, - 20 - ], - "children": [ - { - "type": "frame", - "id": "PriceCheckAddBtn", - "width": "fill_container", - "height": 52, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8533", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "gap": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PriceCheckAddIcon", - "width": 20, - "height": 20, - "iconFontName": "plus", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "PriceCheckAddText", - "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" - } - } -} \ 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 deleted file mode 100644 index 26198284..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/printer-error.pen +++ /dev/null @@ -1,281 +0,0 @@ -{ - "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 deleted file mode 100644 index 3a8f25bd..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/product-search.pen +++ /dev/null @@ -1,121 +0,0 @@ -{ - "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 deleted file mode 100644 index ee46cc91..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/quantity-adjust.pen +++ /dev/null @@ -1,366 +0,0 @@ -{ - "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/role-switch.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/role-switch.pen deleted file mode 100644 index 88202aeb..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/role-switch.pen +++ /dev/null @@ -1,492 +0,0 @@ -{ - "version": "2.7", - "children": [ - { - "type": "frame", - "id": "RoleSwitchDialog", - "x": 0, - "y": 0, - "name": "Dialog/RoleSwitch", - "reusable": true, - "width": 380, - "height": 530, - "fill": "$bg-elevated", - "cornerRadius": 20, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "SwitchContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "gap": 20, - "padding": [ - 28, - 24 - ], - "children": [ - { - "type": "frame", - "id": "SwitchIconWrap", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "SwitchIconBg", - "width": 72, - "height": 72, - "fill": "#F9731620", - "cornerRadius": 36, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SwitchIconInner", - "width": 52, - "height": 52, - "fill": "#F9731620", - "cornerRadius": 26, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SwitchIcon", - "width": 28, - "height": 28, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "#F97316" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SwitchTitle", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SwitchTitleText", - "fill": "$text-primary", - "content": "Chuyển Vai Trò", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "700" - }, - { - "type": "text", - "id": "SwitchSubtitle", - "fill": "$text-tertiary", - "content": "Đang đăng nhập: Thu Ngân", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "RoleList", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "RoleCashier", - "width": "fill_container", - "height": 56, - "fill": "$orange-primary", - "cornerRadius": 14, - "gap": 12, - "padding": [ - 0, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CashierAvatar", - "width": 36, - "height": 36, - "fill": "#FFFFFF20", - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CashierIcon", - "width": 18, - "height": 18, - "iconFontName": "user", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - } - ] - }, - { - "type": "frame", - "id": "CashierInfo", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "CashierName", - "fill": "#FFFFFF", - "content": "Thu Ngân", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "text", - "id": "CashierDesc", - "fill": "#FFFFFF90", - "content": "Đang sử dụng", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - } - ] - }, - { - "type": "icon_font", - "id": "CashierCheck", - "width": 20, - "height": 20, - "iconFontName": "check-circle", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - } - ] - }, - { - "type": "frame", - "id": "RoleManager", - "width": "fill_container", - "height": 56, - "fill": "$bg-page", - "cornerRadius": 14, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 12, - "padding": [ - 0, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ManagerAvatar", - "width": 36, - "height": 36, - "fill": "#8B5CF620", - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ManagerIcon", - "width": 18, - "height": 18, - "iconFontName": "shield", - "iconFontFamily": "lucide", - "fill": "#8B5CF6" - } - ] - }, - { - "type": "frame", - "id": "ManagerInfo", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "ManagerName", - "fill": "$text-primary", - "content": "Quản Lý", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "text", - "id": "ManagerDesc", - "fill": "$text-tertiary", - "content": "Toàn quyền truy cập", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - } - ] - }, - { - "type": "icon_font", - "id": "ManagerLock", - "width": 16, - "height": 16, - "iconFontName": "lock", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - }, - { - "type": "frame", - "id": "RoleKitchen", - "width": "fill_container", - "height": 56, - "fill": "$bg-page", - "cornerRadius": 14, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 12, - "padding": [ - 0, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "KitchenAvatar", - "width": 36, - "height": 36, - "fill": "#22C55E20", - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "KitchenIcon", - "width": 18, - "height": 18, - "iconFontName": "chef-hat", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - }, - { - "type": "frame", - "id": "KitchenInfo", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "KitchenName", - "fill": "$text-primary", - "content": "Bếp / Pha Chế", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "text", - "id": "KitchenDesc", - "fill": "$text-tertiary", - "content": "Xem đơn hàng", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - } - ] - }, - { - "type": "icon_font", - "id": "KitchenLock", - "width": 16, - "height": 16, - "iconFontName": "lock", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - }, - { - "type": "frame", - "id": "RoleWaiter", - "width": "fill_container", - "height": 56, - "fill": "$bg-page", - "cornerRadius": 14, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 12, - "padding": [ - 0, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "WaiterAvatar", - "width": 36, - "height": 36, - "fill": "#3B82F620", - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "WaiterIcon", - "width": 18, - "height": 18, - "iconFontName": "utensils-crossed", - "iconFontFamily": "lucide", - "fill": "#3B82F6" - } - ] - }, - { - "type": "frame", - "id": "WaiterInfo", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "WaiterName", - "fill": "$text-primary", - "content": "Phục Vụ", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "text", - "id": "WaiterDesc", - "fill": "$text-tertiary", - "content": "Gọi món & phục vụ", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - } - ] - }, - { - "type": "icon_font", - "id": "WaiterLock", - "width": 16, - "height": 16, - "iconFontName": "lock", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SwitchFooter", - "width": "fill_container", - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "padding": [ - 16, - 24 - ], - "children": [ - { - "type": "frame", - "id": "CancelSwitchBtn", - "width": "fill_container", - "height": 48, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "CancelSwitchText", - "fill": "$text-secondary", - "content": "Đóng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-elevated": { - "type": "color", - "value": "#1A1A1D" - }, - "bg-interactive": { - "type": "color", - "value": "#2A2A2E" - }, - "bg-page": { - "type": "color", - "value": "#0A0A0B" - }, - "border-default": { - "type": "color", - "value": "#2A2A2E" - }, - "border-subtle": { - "type": "color", - "value": "#1F1F23" - }, - "orange-primary": { - "type": "color", - "value": "#FF5C00" - }, - "text-primary": { - "type": "color", - "value": "#FFFFFF" - }, - "text-secondary": { - "type": "color", - "value": "#ADADB0" - }, - "text-tertiary": { - "type": "color", - "value": "#8B8B90" - } - } -} \ No newline at end of file diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/session-timeout.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/session-timeout.pen deleted file mode 100644 index 132a6be4..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/session-timeout.pen +++ /dev/null @@ -1,243 +0,0 @@ -{ - "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/dialogs/split-bill.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/split-bill.pen deleted file mode 100644 index f711927c..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/split-bill.pen +++ /dev/null @@ -1,132 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "SplitBillDialog", - "name": "Dialog/Split Bill", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "#0A0A0B80", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SplitModal", - "width": 500, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 24, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "SplitHeader", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "SplitHeaderLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "SplitIcon", "width": 44, "height": 44, "fill": "#8B5CF61A", "cornerRadius": 22, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SplitIconI", "width": 22, "height": 22, "iconFontName": "split", "iconFontFamily": "lucide", "fill": "#8B5CF6"} - ]}, - {"type": "frame", "id": "SplitTitleBlock", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "SplitTitle", "fill": "#FFFFFF", "content": "Chia bill", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}, - {"type": "text", "id": "SplitTotal", "fill": "#8B8B90", "content": "Tổng: 650,000₫", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "SplitClose", "width": 32, "height": 32, "fill": "#2A2A2E", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SplitCloseIcon", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#8B8B90"} - ]} - ] - }, - { - "type": "frame", - "id": "SplitOptions", - "width": "fill_container", - "gap": 10, - "children": [ - {"type": "frame", "id": "SplitOptEqual", "width": "fill_container", "fill": "#8B5CF620", "stroke": {"thickness": 2, "fill": "#8B5CF6"}, "cornerRadius": 10, "padding": [12, 16], "gap": 8, "alignItems": "center", "justifyContent": "center", "children": [ - {"type": "icon_font", "id": "SplitOptEqualIcon", "width": 18, "height": 18, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "#8B5CF6"}, - {"type": "text", "id": "SplitOptEqualText", "fill": "#8B5CF6", "content": "Chia đều", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "SplitOptCustom", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 10, "padding": [12, 16], "gap": 8, "alignItems": "center", "justifyContent": "center", "children": [ - {"type": "icon_font", "id": "SplitOptCustomIcon", "width": 18, "height": 18, "iconFontName": "sliders", "iconFontFamily": "lucide", "fill": "#8B8B90"}, - {"type": "text", "id": "SplitOptCustomText", "fill": "#8B8B90", "content": "Tùy chỉnh", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ] - }, - { - "type": "frame", - "id": "SplitPeople", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - {"type": "frame", "id": "SplitPeopleHeader", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "SplitPeopleLabel", "fill": "#8B8B90", "content": "Số người", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "frame", "id": "SplitPeopleStepper", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "SplitPeopleMinus", "width": 36, "height": 36, "fill": "#2A2A2E", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "SplitPeopleMinusI", "width": 18, "height": 18, "iconFontName": "minus", "iconFontFamily": "lucide", "fill": "#ADADB0"}]}, - {"type": "text", "id": "SplitPeopleCount", "fill": "#FFFFFF", "content": "4", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}, - {"type": "frame", "id": "SplitPeoplePlus", "width": 36, "height": 36, "fill": "#8B5CF6", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "SplitPeoplePlusI", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"}]} - ]} - ]}, - {"type": "frame", "id": "SplitPerPerson", "width": "fill_container", "fill": "#8B5CF610", "cornerRadius": 12, "padding": 16, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "SplitPerPersonLabel", "fill": "#8B8B90", "content": "Mỗi người trả", "fontFamily": "Roboto", "fontSize": 14}, - {"type": "text", "id": "SplitPerPersonValue", "fill": "#8B5CF6", "content": "162,500₫", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"} - ]} - ] - }, - { - "type": "frame", - "id": "SplitBreakdown", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - {"type": "frame", "id": "SplitPerson1", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SplitPerson1Left", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "SplitPerson1Num", "width": 28, "height": 28, "fill": "#22C55E", "cornerRadius": 14, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SplitPerson1NumT", "fill": "#FFF", "content": "1", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "text", "id": "SplitPerson1Label", "fill": "#FFFFFF", "content": "Người 1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SplitPerson1Right", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "SplitPerson1Amount", "fill": "#FFFFFF", "content": "162,500₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "SplitPerson1Status", "fill": "#22C55E20", "cornerRadius": 4, "padding": [4, 8], "children": [{"type": "text", "id": "SplitPerson1StatusT", "fill": "#22C55E", "content": "Đã trả", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]} - ]} - ]}, - {"type": "frame", "id": "SplitPerson2", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SplitPerson2Left", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "SplitPerson2Num", "width": 28, "height": 28, "fill": "#8B5CF6", "cornerRadius": 14, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SplitPerson2NumT", "fill": "#FFF", "content": "2", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "text", "id": "SplitPerson2Label", "fill": "#FFFFFF", "content": "Người 2", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SplitPerson2Right", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "SplitPerson2Amount", "fill": "#FFFFFF", "content": "162,500₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "SplitPerson2Pay", "fill": "#FF5C00", "cornerRadius": 6, "padding": [6, 12], "children": [{"type": "text", "id": "SplitPerson2PayT", "fill": "#FFF", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]} - ]} - ]}, - {"type": "frame", "id": "SplitPerson3", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SplitPerson3Left", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "SplitPerson3Num", "width": 28, "height": 28, "fill": "#2A2A2E", "cornerRadius": 14, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SplitPerson3NumT", "fill": "#8B8B90", "content": "3", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "text", "id": "SplitPerson3Label", "fill": "#8B8B90", "content": "Người 3", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "text", "id": "SplitPerson3Amount", "fill": "#8B8B90", "content": "162,500₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SplitPerson4", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SplitPerson4Left", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "SplitPerson4Num", "width": 28, "height": 28, "fill": "#2A2A2E", "cornerRadius": 14, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SplitPerson4NumT", "fill": "#8B8B90", "content": "4", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "text", "id": "SplitPerson4Label", "fill": "#8B8B90", "content": "Người 4", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "text", "id": "SplitPerson4Amount", "fill": "#8B8B90", "content": "162,500₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ] - } - ] - } - ] - } - ] -} diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/stock-in.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/stock-in.pen deleted file mode 100644 index 06684980..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/stock-in.pen +++ /dev/null @@ -1,656 +0,0 @@ -{ - "version": "2.7", - "children": [ - { - "type": "frame", - "id": "StockInDialog", - "x": 0, - "y": 0, - "name": "Dialog/StockIn", - "reusable": true, - "width": 440, - "height": 618, - "fill": "$bg-elevated", - "cornerRadius": 20, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "StockInHeader", - "width": "fill_container", - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "gap": 12, - "padding": [ - 16, - 20 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "StockInIconBg", - "width": 40, - "height": 40, - "fill": "#22C55E15", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "StockInIcon", - "width": 20, - "height": 20, - "iconFontName": "package-plus", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - }, - { - "type": "frame", - "id": "StockInTitleBox", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "StockInTitle", - "fill": "$text-primary", - "content": "Nhập Kho", - "fontFamily": "Roboto", - "fontSize": 17, - "fontWeight": "700" - }, - { - "type": "text", - "id": "StockInSubtitle", - "fill": "$text-tertiary", - "content": "Thêm hàng hóa vào kho", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "StockInClose", - "width": 32, - "height": 32, - "fill": "$bg-interactive", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "StockInCloseIcon", - "width": 16, - "height": 16, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "StockInContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "gap": 16, - "padding": 20, - "children": [ - { - "type": "frame", - "id": "ProductField", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "text", - "id": "ProductLabel", - "fill": "$text-secondary", - "content": "Sản phẩm", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "ProductSelect", - "width": "fill_container", - "height": 48, - "fill": "$bg-page", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 10, - "padding": [ - 0, - 14 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SelectedProduct", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ProdIcon", - "width": 32, - "height": 32, - "fill": "#3B82F620", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ProdIconI", - "width": 16, - "height": 16, - "iconFontName": "coffee", - "iconFontFamily": "lucide", - "fill": "#3B82F6" - } - ] - }, - { - "type": "text", - "id": "ProdName", - "fill": "$text-primary", - "content": "Cà phê sữa đá", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "icon_font", - "id": "DropdownIcon", - "width": 18, - "height": 18, - "iconFontName": "chevron-down", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "QuantityRow", - "width": "fill_container", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "QuantityField", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "text", - "id": "QuantityLabel", - "fill": "$text-secondary", - "content": "Số lượng nhập", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "QuantityInput", - "width": "fill_container", - "height": 48, - "fill": "$bg-page", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "padding": [ - 0, - 14 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "QuantityVal", - "fill": "$text-primary", - "content": "100", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "UnitField", - "width": 120, - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "text", - "id": "UnitLabel", - "fill": "$text-secondary", - "content": "Đơn vị", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "UnitSelect", - "width": "fill_container", - "height": 48, - "fill": "$bg-page", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 6, - "padding": [ - 0, - 14 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "UnitVal", - "fill": "$text-primary", - "content": "Ly", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "icon_font", - "id": "UnitDropdown", - "width": 16, - "height": 16, - "iconFontName": "chevron-down", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SupplierField", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "text", - "id": "SupplierLabel", - "fill": "$text-secondary", - "content": "Nhà cung cấp", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "SupplierInput", - "width": "fill_container", - "height": 48, - "fill": "$bg-page", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 10, - "padding": [ - 0, - 14 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SupplierIcon", - "width": 18, - "height": 18, - "iconFontName": "truck", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "SupplierVal", - "fill": "$text-primary", - "content": "Công ty ABC", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "CostRow", - "width": "fill_container", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "CostField", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "text", - "id": "CostLabel", - "fill": "$text-secondary", - "content": "Đơn giá nhập", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "CostInput", - "width": "fill_container", - "height": 48, - "fill": "$bg-page", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 6, - "padding": [ - 0, - 14 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "CostVal", - "fill": "$text-primary", - "content": "15,000", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - }, - { - "type": "text", - "id": "CostUnit", - "fill": "$text-tertiary", - "content": "đ", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "TotalField", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "text", - "id": "TotalLabel", - "fill": "$text-secondary", - "content": "Thành tiền", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "TotalBox", - "width": "fill_container", - "height": 48, - "fill": "#22C55E15", - "cornerRadius": 12, - "gap": 6, - "padding": [ - 0, - 14 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "TotalVal", - "fill": "#22C55E", - "content": "1,500,000", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "text", - "id": "TotalUnit", - "fill": "#22C55E", - "content": "đ", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "NoteField", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "text", - "id": "NoteLabel", - "fill": "$text-secondary", - "content": "Ghi chú", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "NoteInput", - "width": "fill_container", - "height": 72, - "fill": "$bg-page", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "padding": [ - 12, - 14 - ], - "children": [ - { - "type": "text", - "id": "NoteVal", - "fill": "$text-tertiary", - "content": "Hàng mới nhập từ đợt promotion...", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "StockInFooter", - "width": "fill_container", - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "gap": 12, - "padding": [ - 16, - 20 - ], - "children": [ - { - "type": "frame", - "id": "StockInCancelBtn", - "width": "fill_container", - "height": 48, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "StockInCancelText", - "fill": "$text-secondary", - "content": "Hủy", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "StockInConfirmBtn", - "width": "fill_container", - "height": 48, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#22C55E", - "position": 0 - }, - { - "color": "#16A34A", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "StockInConfirmIcon", - "width": 18, - "height": 18, - "iconFontName": "package-plus", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "StockInConfirmText", - "fill": "#FFFFFF", - "content": "Xác nhận nhập", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-elevated": { - "type": "color", - "value": "#1A1A1D" - }, - "bg-interactive": { - "type": "color", - "value": "#2A2A2E" - }, - "bg-page": { - "type": "color", - "value": "#0A0A0B" - }, - "border-default": { - "type": "color", - "value": "#2A2A2E" - }, - "border-subtle": { - "type": "color", - "value": "#1F1F23" - }, - "orange-primary": { - "type": "color", - "value": "#FF5C00" - }, - "text-primary": { - "type": "color", - "value": "#FFFFFF" - }, - "text-secondary": { - "type": "color", - "value": "#ADADB0" - }, - "text-tertiary": { - "type": "color", - "value": "#8B8B90" - } - } -} \ No newline at end of file diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/stock-out.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/stock-out.pen deleted file mode 100644 index c7543c15..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/stock-out.pen +++ /dev/null @@ -1,560 +0,0 @@ -{ - "version": "2.7", - "children": [ - { - "type": "frame", - "id": "StockOutDialog", - "x": 0, - "y": 0, - "name": "Dialog/StockOut", - "reusable": true, - "width": 440, - "height": 537, - "fill": "$bg-elevated", - "cornerRadius": 20, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "StockOutHeader", - "width": "fill_container", - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "gap": 12, - "padding": [ - 16, - 20 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "StockOutIconBg", - "width": 40, - "height": 40, - "fill": "#EF444415", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "StockOutIcon", - "width": 20, - "height": 20, - "iconFontName": "package-minus", - "iconFontFamily": "lucide", - "fill": "#EF4444" - } - ] - }, - { - "type": "frame", - "id": "StockOutTitleBox", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "StockOutTitle", - "fill": "$text-primary", - "content": "Xuất Kho", - "fontFamily": "Roboto", - "fontSize": 17, - "fontWeight": "700" - }, - { - "type": "text", - "id": "StockOutSubtitle", - "fill": "$text-tertiary", - "content": "Xuất hàng hóa khỏi kho", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "StockOutClose", - "width": 32, - "height": 32, - "fill": "$bg-interactive", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "StockOutCloseIcon", - "width": 16, - "height": 16, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "StockOutContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "gap": 16, - "padding": 20, - "children": [ - { - "type": "frame", - "id": "ProductField", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "text", - "id": "ProductLabel", - "fill": "$text-secondary", - "content": "Sản phẩm", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "ProductSelect", - "width": "fill_container", - "height": 48, - "fill": "$bg-page", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 10, - "padding": [ - 0, - 14 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SelectedProduct", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ProdIcon", - "width": 32, - "height": 32, - "fill": "#F9731620", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ProdIconI", - "width": 16, - "height": 16, - "iconFontName": "croissant", - "iconFontFamily": "lucide", - "fill": "#F97316" - } - ] - }, - { - "type": "frame", - "id": "ProdDetails", - "layout": "vertical", - "gap": 1, - "children": [ - { - "type": "text", - "id": "ProdName", - "fill": "$text-primary", - "content": "Bánh mì thịt", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "ProdStock", - "fill": "$text-tertiary", - "content": "Tồn kho: 25 cái", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "icon_font", - "id": "DropdownIcon", - "width": 18, - "height": 18, - "iconFontName": "chevron-down", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "QuantityRow", - "width": "fill_container", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "QuantityField", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "text", - "id": "QuantityLabel", - "fill": "$text-secondary", - "content": "Số lượng xuất", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "QuantityInput", - "width": "fill_container", - "height": 48, - "fill": "$bg-page", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "#EF444440" - }, - "padding": [ - 0, - 14 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "QuantityVal", - "fill": "#EF4444", - "content": "5", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "RemainingField", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "text", - "id": "RemainingLabel", - "fill": "$text-secondary", - "content": "Còn lại sau xuất", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "RemainingBox", - "width": "fill_container", - "height": 48, - "fill": "$bg-page", - "cornerRadius": 12, - "padding": [ - 0, - 14 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "RemainingVal", - "fill": "$text-primary", - "content": "20 cái", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ReasonField", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "text", - "id": "ReasonLabel", - "fill": "$text-secondary", - "content": "Lý do xuất", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "ReasonSelect", - "width": "fill_container", - "height": 48, - "fill": "$bg-page", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 10, - "padding": [ - 0, - 14 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ReasonContent", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ReasonIcon", - "width": 18, - "height": 18, - "iconFontName": "alert-circle", - "iconFontFamily": "lucide", - "fill": "#EAB308" - }, - { - "type": "text", - "id": "ReasonVal", - "fill": "$text-primary", - "content": "Hàng hư hỏng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "icon_font", - "id": "ReasonDropdown", - "width": 18, - "height": 18, - "iconFontName": "chevron-down", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "NoteField", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "text", - "id": "NoteLabel", - "fill": "$text-secondary", - "content": "Ghi chú chi tiết", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "NoteInput", - "width": "fill_container", - "height": 72, - "fill": "$bg-page", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "padding": [ - 12, - 14 - ], - "children": [ - { - "type": "text", - "id": "NoteVal", - "fill": "$text-tertiary", - "content": "Bánh mì hết hạn sử dụng ngày 05/02...", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "StockOutFooter", - "width": "fill_container", - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "gap": 12, - "padding": [ - 16, - 20 - ], - "children": [ - { - "type": "frame", - "id": "StockOutCancelBtn", - "width": "fill_container", - "height": 48, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "StockOutCancelText", - "fill": "$text-secondary", - "content": "Hủy", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "StockOutConfirmBtn", - "width": "fill_container", - "height": 48, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#EF4444", - "position": 0 - }, - { - "color": "#DC2626", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "StockOutConfirmIcon", - "width": 18, - "height": 18, - "iconFontName": "package-minus", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "StockOutConfirmText", - "fill": "#FFFFFF", - "content": "Xác nhận xuất", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-elevated": { - "type": "color", - "value": "#1A1A1D" - }, - "bg-interactive": { - "type": "color", - "value": "#2A2A2E" - }, - "bg-page": { - "type": "color", - "value": "#0A0A0B" - }, - "border-default": { - "type": "color", - "value": "#2A2A2E" - }, - "border-subtle": { - "type": "color", - "value": "#1F1F23" - }, - "orange-primary": { - "type": "color", - "value": "#FF5C00" - }, - "text-primary": { - "type": "color", - "value": "#FFFFFF" - }, - "text-secondary": { - "type": "color", - "value": "#ADADB0" - }, - "text-tertiary": { - "type": "color", - "value": "#8B8B90" - } - } -} \ No newline at end of file diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/stock-transfer.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/stock-transfer.pen deleted file mode 100644 index b81c0246..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/stock-transfer.pen +++ /dev/null @@ -1,135 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "StockTransferDialog", - "name": "Dialog/StockTransfer", - "reusable": true, - "width": 440, - "height": 560, - "fill": "$bg-elevated", - "cornerRadius": 20, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "TransferHeader", - "width": "fill_container", - "padding": [16, 20], - "gap": 12, - "alignItems": "center", - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "children": [ - {"type": "frame", "id": "TransferIconBg", "width": 40, "height": 40, "fill": "#3B82F615", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "TransferIcon", "width": 20, "height": 20, "iconFontName": "arrow-left-right", "iconFontFamily": "lucide", "fill": "#3B82F6"} - ]}, - {"type": "frame", "id": "TransferTitleBox", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "TransferTitle", "fill": "$text-primary", "content": "Chuyển Kho", "fontFamily": "Roboto", "fontSize": 17, "fontWeight": "700"}, - {"type": "text", "id": "TransferSubtitle", "fill": "$text-tertiary", "content": "Di chuyển hàng giữa các kho", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "TransferClose", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "TransferCloseIcon", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "TransferContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "gap": 16, - "padding": [20, 20], - "children": [ - {"type": "frame", "id": "ProductField", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "text", "id": "ProductLabel", "fill": "$text-secondary", "content": "Sản phẩm chuyển", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "ProductSelect", "width": "fill_container", "height": 48, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 14], "gap": 10, "alignItems": "center", "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "SelectedProduct", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "ProdIcon", "width": 32, "height": 32, "fill": "#10B98120", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ProdIconI", "width": 16, "height": 16, "iconFontName": "milk", "iconFontFamily": "lucide", "fill": "#10B981"} - ]}, - {"type": "text", "id": "ProdName", "fill": "$text-primary", "content": "Sữa tươi không đường", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "icon_font", "id": "DropdownIcon", "width": 18, "height": 18, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]} - ]}, - {"type": "frame", "id": "LocationRow", "width": "fill_container", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "FromField", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "text", "id": "FromLabel", "fill": "$text-secondary", "content": "Từ kho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "FromSelect", "width": "fill_container", "height": 48, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 14], "gap": 8, "alignItems": "center", "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "FromContent", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "FromIcon", "width": 16, "height": 16, "iconFontName": "warehouse", "iconFontFamily": "lucide", "fill": "#EF4444"}, - {"type": "text", "id": "FromVal", "fill": "$text-primary", "content": "Kho chính", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "icon_font", "id": "FromDropdown", "width": 14, "height": 14, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]} - ]}, - {"type": "frame", "id": "ArrowBox", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ArrowIcon", "width": 16, "height": 16, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "#3B82F6"} - ]}, - {"type": "frame", "id": "ToField", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "text", "id": "ToLabel", "fill": "$text-secondary", "content": "Đến kho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "ToSelect", "width": "fill_container", "height": 48, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 14], "gap": 8, "alignItems": "center", "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "ToContent", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ToIcon", "width": 16, "height": 16, "iconFontName": "warehouse", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "ToVal", "fill": "$text-primary", "content": "Chi nhánh 2", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "icon_font", "id": "ToDropdown", "width": 14, "height": 14, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]} - ]} - ]}, - {"type": "frame", "id": "QuantityRow", "width": "fill_container", "gap": 12, "children": [ - {"type": "frame", "id": "AvailableField", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "text", "id": "AvailableLabel", "fill": "$text-secondary", "content": "Tồn kho nguồn", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "AvailableBox", "width": "fill_container", "height": 48, "fill": "$bg-page", "cornerRadius": 12, "padding": [0, 14], "alignItems": "center", "justifyContent": "center", "children": [ - {"type": "text", "id": "AvailableVal", "fill": "$text-primary", "content": "100 hộp", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "TransferQtyField", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "text", "id": "TransferQtyLabel", "fill": "$text-secondary", "content": "Số lượng chuyển", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "TransferQtyInput", "width": "fill_container", "height": 48, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "#3B82F6"}, "padding": [0, 14], "alignItems": "center", "justifyContent": "center", "children": [ - {"type": "text", "id": "TransferQtyVal", "fill": "#3B82F6", "content": "30", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} - ]} - ]} - ]}, - {"type": "frame", "id": "NoteField", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "text", "id": "NoteLabel", "fill": "$text-secondary", "content": "Lý do chuyển kho", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "NoteInput", "width": "fill_container", "height": 72, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [12, 14], "children": [ - {"type": "text", "id": "NoteVal", "fill": "$text-tertiary", "content": "Bổ sung hàng cho chi nhánh 2 do thiếu hàng...", "fontFamily": "Roboto", "fontSize": 14} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "TransferFooter", - "width": "fill_container", - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "gap": 12, - "padding": [16, 20], - "children": [ - {"type": "frame", "id": "TransferCancelBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "TransferCancelText", "fill": "$text-secondary", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "TransferConfirmBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#3B82F6", "position": 0}, {"color": "#2563EB", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "TransferConfirmIcon", "width": 18, "height": 18, "iconFontName": "arrow-left-right", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "TransferConfirmText", "fill": "#FFFFFF", "content": "Xác nhận chuyển", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/sync-conflict.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/sync-conflict.pen deleted file mode 100644 index ac5596e0..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/sync-conflict.pen +++ /dev/null @@ -1,485 +0,0 @@ -{ - "version": "2.7", - "children": [ - { - "type": "frame", - "id": "SyncConflictDialog", - "x": 0, - "y": 0, - "name": "Dialog/SyncConflict", - "reusable": true, - "width": 400, - "height": 514, - "fill": "$bg-elevated", - "cornerRadius": 20, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "ConflictContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "gap": 20, - "padding": [ - 28, - 24 - ], - "children": [ - { - "type": "frame", - "id": "ConflictIconWrap", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "ConflictIconBg", - "width": 72, - "height": 72, - "fill": "#EAB30820", - "cornerRadius": 36, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ConflictIconInner", - "width": 52, - "height": 52, - "fill": "#EAB30820", - "cornerRadius": 26, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ConflictIcon", - "width": 28, - "height": 28, - "iconFontName": "git-merge", - "iconFontFamily": "lucide", - "fill": "#EAB308" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ConflictTitle", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ConflictTitleText", - "fill": "$text-primary", - "content": "Xung Đột Dữ Liệu", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "700" - }, - { - "type": "text", - "id": "ConflictSubtitle", - "fill": "$text-tertiary", - "content": "Có thay đổi từ nhiều nguồn", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "ConflictOptions", - "width": "fill_container", - "layout": "vertical", - "gap": 10, - "children": [ - { - "type": "frame", - "id": "KeepLocal", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 14, - "stroke": { - "thickness": 2, - "fill": "$orange-primary" - }, - "gap": 12, - "padding": 14, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "KeepLocalIcon", - "width": 40, - "height": 40, - "fill": "#FF5C0020", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "KeepLocalIconI", - "width": 20, - "height": 20, - "iconFontName": "smartphone", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - } - ] - }, - { - "type": "frame", - "id": "KeepLocalInfo", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "KeepLocalTitle", - "fill": "$text-primary", - "content": "Giữ phiên bản thiết bị", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "text", - "id": "KeepLocalDesc", - "fill": "$text-tertiary", - "content": "Cập nhật lúc 20:45 hôm nay", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "KeepLocalRadio", - "width": 22, - "height": 22, - "cornerRadius": 11, - "stroke": { - "thickness": 2, - "fill": "$orange-primary" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "KeepLocalDot", - "width": 12, - "height": 12, - "fill": "$orange-primary", - "cornerRadius": 6 - } - ] - } - ] - }, - { - "type": "frame", - "id": "KeepServer", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 14, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 12, - "padding": 14, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "KeepServerIcon", - "width": 40, - "height": 40, - "fill": "#3B82F620", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "KeepServerIconI", - "width": 20, - "height": 20, - "iconFontName": "cloud", - "iconFontFamily": "lucide", - "fill": "#3B82F6" - } - ] - }, - { - "type": "frame", - "id": "KeepServerInfo", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "KeepServerTitle", - "fill": "$text-primary", - "content": "Giữ phiên bản server", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "text", - "id": "KeepServerDesc", - "fill": "$text-tertiary", - "content": "Cập nhật lúc 19:30 hôm nay", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "KeepServerRadio", - "width": 22, - "height": 22, - "cornerRadius": 11, - "stroke": { - "thickness": 2, - "fill": "$border-default" - } - } - ] - }, - { - "type": "frame", - "id": "MergeBoth", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 14, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 12, - "padding": 14, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "MergeIcon", - "width": 40, - "height": 40, - "fill": "#22C55E20", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MergeIconI", - "width": 20, - "height": 20, - "iconFontName": "git-merge", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - }, - { - "type": "frame", - "id": "MergeInfo", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "MergeTitle", - "fill": "$text-primary", - "content": "Gộp cả hai", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "text", - "id": "MergeDesc", - "fill": "$text-tertiary", - "content": "Tự động hợp nhất (khuyên dùng)", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "MergeRadio", - "width": 22, - "height": 22, - "cornerRadius": 11, - "stroke": { - "thickness": 2, - "fill": "$border-default" - } - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ConflictFooter", - "width": "fill_container", - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "gap": 12, - "padding": [ - 16, - 24 - ], - "children": [ - { - "type": "frame", - "id": "ViewDiffBtn", - "width": "fill_container", - "height": 48, - "fill": "$bg-interactive", - "cornerRadius": 12, - "gap": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ViewDiffIcon", - "width": 18, - "height": 18, - "iconFontName": "eye", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "ViewDiffText", - "fill": "$text-secondary", - "content": "Xem khác biệt", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "ResolveBtn", - "width": "fill_container", - "height": 48, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ResolveIcon", - "width": 18, - "height": 18, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "ResolveText", - "fill": "#FFFFFF", - "content": "Áp dụng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-elevated": { - "type": "color", - "value": "#1A1A1D" - }, - "bg-interactive": { - "type": "color", - "value": "#2A2A2E" - }, - "bg-page": { - "type": "color", - "value": "#0A0A0B" - }, - "border-default": { - "type": "color", - "value": "#2A2A2E" - }, - "border-subtle": { - "type": "color", - "value": "#1F1F23" - }, - "orange-primary": { - "type": "color", - "value": "#FF5C00" - }, - "text-primary": { - "type": "color", - "value": "#FFFFFF" - }, - "text-secondary": { - "type": "color", - "value": "#ADADB0" - }, - "text-tertiary": { - "type": "color", - "value": "#8B8B90" - } - } -} \ No newline at end of file diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/sync-status.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/sync-status.pen deleted file mode 100644 index fb21a2e9..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/sync-status.pen +++ /dev/null @@ -1,596 +0,0 @@ -{ - "version": "2.7", - "children": [ - { - "type": "frame", - "id": "SyncStatusDialog", - "x": 0, - "y": 0, - "name": "Dialog/SyncStatus", - "reusable": true, - "clip": true, - "width": 400, - "height": 549, - "fill": "$bg-elevated", - "cornerRadius": 24, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "SyncStatusHeader", - "width": "fill_container", - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "padding": [ - 16, - 20 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SyncStatusHeaderLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SyncStatusIconBg", - "width": 40, - "height": 40, - "fill": "#22C55E20", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SyncStatusIcon", - "width": 20, - "height": 20, - "iconFontName": "refresh-cw", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - }, - { - "type": "text", - "id": "SyncStatusTitle", - "fill": "$text-primary", - "content": "Trạng thái đồng bộ", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "SyncStatusCloseBtn", - "width": 36, - "height": 36, - "fill": "$bg-interactive", - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SyncStatusCloseIcon", - "width": 18, - "height": 18, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SyncStatusContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "gap": 16, - "padding": 20, - "children": [ - { - "type": "frame", - "id": "SyncOverview", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "layout": "vertical", - "gap": 12, - "padding": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SyncOverviewIcon", - "width": 56, - "height": 56, - "fill": "#22C55E20", - "cornerRadius": 28, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SyncOverviewIconInner", - "width": 28, - "height": 28, - "iconFontName": "cloud", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - }, - { - "type": "frame", - "id": "SyncOverviewText", - "layout": "vertical", - "gap": 4, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SyncOverviewStatus", - "fill": "#22C55E", - "content": "Đã đồng bộ", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - }, - { - "type": "text", - "id": "SyncOverviewTime", - "fill": "$text-tertiary", - "content": "Cập nhật lúc 14:32 hôm nay", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "SyncDetailList", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "SyncItem1", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 12, - "padding": [ - 12, - 14 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SyncItem1Left", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SyncItem1Icon", - "width": 18, - "height": 18, - "iconFontName": "package", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SyncItem1Name", - "fill": "$text-primary", - "content": "Sản phẩm", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SyncItem1Right", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SyncItem1Count", - "fill": "$text-tertiary", - "content": "245 mục", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "SyncItem1Badge", - "fill": "#22C55E20", - "cornerRadius": 6, - "padding": [ - 4, - 8 - ], - "children": [ - { - "type": "text", - "id": "SyncItem1BadgeText", - "fill": "#22C55E", - "content": "OK", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SyncItem2", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 12, - "padding": [ - 12, - 14 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SyncItem2Left", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SyncItem2Icon", - "width": 18, - "height": 18, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SyncItem2Name", - "fill": "$text-primary", - "content": "Khách hàng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SyncItem2Right", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SyncItem2Count", - "fill": "$text-tertiary", - "content": "1,203 mục", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "SyncItem2Badge", - "fill": "#22C55E20", - "cornerRadius": 6, - "padding": [ - 4, - 8 - ], - "children": [ - { - "type": "text", - "id": "SyncItem2BadgeText", - "fill": "#22C55E", - "content": "OK", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SyncItem3", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 12, - "padding": [ - 12, - 14 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SyncItem3Left", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SyncItem3Icon", - "width": 18, - "height": 18, - "iconFontName": "receipt", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SyncItem3Name", - "fill": "$text-primary", - "content": "Đơn hàng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SyncItem3Right", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SyncItem3Count", - "fill": "$text-tertiary", - "content": "42 pending", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "SyncItem3Badge", - "fill": "#F59E0B20", - "cornerRadius": 6, - "padding": [ - 4, - 8 - ], - "children": [ - { - "type": "text", - "id": "SyncItem3BadgeText", - "fill": "#F59E0B", - "content": "Đang đồng bộ", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SyncItem4", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 12, - "padding": [ - 12, - 14 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SyncItem4Left", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SyncItem4Icon", - "width": 18, - "height": 18, - "iconFontName": "percent", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "SyncItem4Name", - "fill": "$text-primary", - "content": "Khuyến mãi", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SyncItem4Right", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SyncItem4Count", - "fill": "$text-tertiary", - "content": "12 mục", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "SyncItem4Badge", - "fill": "#22C55E20", - "cornerRadius": 6, - "padding": [ - 4, - 8 - ], - "children": [ - { - "type": "text", - "id": "SyncItem4BadgeText", - "fill": "#22C55E", - "content": "OK", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SyncStatusFooter", - "width": "fill_container", - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "padding": [ - 16, - 20 - ], - "children": [ - { - "type": "frame", - "id": "SyncNowBtn", - "width": "fill_container", - "height": 52, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8533", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "gap": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "SyncNowIcon", - "width": 20, - "height": 20, - "iconFontName": "refresh-cw", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "SyncNowText", - "fill": "$text-primary", - "content": "Đồng bộ ngay", - "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/two-factor.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/two-factor.pen deleted file mode 100644 index 52ca0212..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/two-factor.pen +++ /dev/null @@ -1,109 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "TwoFactorDialog", - "name": "Dialog/TwoFactor", - "reusable": true, - "width": 400, - "height": 520, - "fill": "$bg-elevated", - "cornerRadius": 24, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "TFAContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "gap": 24, - "padding": [32, 28], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", "id": "TFAIconBg", "width": 80, "height": 80, "fill": "#3B82F615", "cornerRadius": 40, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "frame", "id": "TFAIconInner", "width": 56, "height": 56, "fill": "#3B82F620", "cornerRadius": 28, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "TFAIcon", "width": 32, "height": 32, "iconFontName": "shield-check", "iconFontFamily": "lucide", "fill": "#3B82F6"} - ]} - ] - }, - { - "type": "frame", "id": "TFATextContent", "width": "fill_container", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "TFATitle", "fill": "$text-primary", "content": "Xác thực 2 bước", "textAlign": "center", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}, - {"type": "text", "id": "TFADesc", "fill": "$text-tertiary", "content": "Nhập mã OTP 6 chữ số đã gửi đến\nsố điện thoại ****8899", "textAlign": "center", "fontFamily": "Roboto", "fontSize": 14} - ] - }, - { - "type": "frame", - "id": "OTPInputs", - "gap": 12, - "children": [ - {"type": "frame", "id": "OTP1", "width": 48, "height": 56, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "OTP1Val", "fill": "$text-primary", "content": "4", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "OTP2", "width": 48, "height": 56, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "OTP2Val", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "OTP3", "width": 48, "height": 56, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "OTP3Val", "fill": "$text-primary", "content": "7", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "OTP4", "width": 48, "height": 56, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "OTP4Val", "fill": "$text-tertiary", "content": "_", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "OTP5", "width": 48, "height": 56, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "OTP5Val", "fill": "$text-tertiary", "content": "_", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "OTP6", "width": 48, "height": 56, "fill": "$bg-page", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "OTP6Val", "fill": "$text-tertiary", "content": "_", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "600"} - ]} - ] - }, - { - "type": "frame", "id": "TFATimer", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "TimerIcon", "width": 16, "height": 16, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "TimerText", "fill": "$text-tertiary", "content": "Mã hết hạn sau 02:45", "fontFamily": "Roboto", "fontSize": 13} - ] - }, - { - "type": "frame", "id": "TFAResend", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "ResendText", "fill": "$text-tertiary", "content": "Chưa nhận được mã?", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "ResendLink", "fill": "$orange-primary", "content": "Gửi lại", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ] - } - ] - }, - { - "type": "frame", - "id": "TFAFooter", - "width": "fill_container", - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "gap": 12, - "padding": [16, 24], - "children": [ - {"type": "frame", "id": "TFACancelBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "TFACancelText", "fill": "$text-secondary", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "TFAVerifyBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "TFAVerifyIcon", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "TFAVerifyText", "fill": "#FFFFFF", "content": "Xác nhận", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/vip-benefits.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/vip-benefits.pen deleted file mode 100644 index 78663c87..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/vip-benefits.pen +++ /dev/null @@ -1,126 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "VIPBenefitsDialog", - "name": "Dialog/VIPBenefits", - "reusable": true, - "width": 400, - "height": 520, - "fill": "$bg-elevated", - "cornerRadius": 20, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "VIPHeader", - "width": "fill_container", - "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#EAB30820", "position": 0}, {"color": "#F5940810", "position": 1}]}, - "padding": [20, 24], - "gap": 12, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "VIPIconBg", "width": 56, "height": 56, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#EAB308", "position": 0}, {"color": "#F59408", "position": 1}]}, "cornerRadius": 28, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "VIPIcon", "width": 28, "height": 28, "iconFontName": "crown", "iconFontFamily": "lucide", "fill": "#FFFFFF"} - ]}, - {"type": "frame", "id": "VIPTitleBox", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "VIPTitle", "fill": "#EAB308", "content": "Thành Viên VIP Gold", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, - {"type": "text", "id": "VIPSubtitle", "fill": "$text-tertiary", "content": "Quyền lợi dành riêng cho bạn", "fontFamily": "Roboto", "fontSize": 13} - ]} - ] - }, - { - "type": "frame", - "id": "VIPContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "padding": [16, 20], - "gap": 12, - "children": [ - {"type": "frame", "id": "Benefit1", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "Benefit1Icon", "width": 44, "height": 44, "fill": "#22C55E20", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Benefit1IconI", "width": 22, "height": 22, "iconFontName": "percent", "iconFontFamily": "lucide", "fill": "#22C55E"} - ]}, - {"type": "frame", "id": "Benefit1Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "Benefit1Title", "fill": "$text-primary", "content": "Giảm 15% mọi đơn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "Benefit1Desc", "fill": "$text-tertiary", "content": "Tự động áp dụng khi thanh toán", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "Benefit1Badge", "fill": "#22C55E", "cornerRadius": 6, "padding": [4, 8], "children": [ - {"type": "text", "id": "Benefit1BadgeText", "fill": "#FFFFFF", "content": "Đang dùng", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "Benefit2", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "Benefit2Icon", "width": 44, "height": 44, "fill": "#3B82F620", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Benefit2IconI", "width": 22, "height": 22, "iconFontName": "gift", "iconFontFamily": "lucide", "fill": "#3B82F6"} - ]}, - {"type": "frame", "id": "Benefit2Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "Benefit2Title", "fill": "$text-primary", "content": "Quà sinh nhật", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "Benefit2Desc", "fill": "$text-tertiary", "content": "Voucher 500K vào tháng sinh nhật", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "Benefit2Status", "layout": "vertical", "alignItems": "flex_end", "gap": 2, "children": [ - {"type": "text", "id": "Benefit2Days", "fill": "#3B82F6", "content": "28 ngày", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "Benefit2Label", "fill": "$text-tertiary", "content": "nữa", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "Benefit3", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "Benefit3Icon", "width": 44, "height": 44, "fill": "#EC489920", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Benefit3IconI", "width": 22, "height": 22, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#EC4899"} - ]}, - {"type": "frame", "id": "Benefit3Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "Benefit3Title", "fill": "$text-primary", "content": "Điểm thưởng x2", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "Benefit3Desc", "fill": "$text-tertiary", "content": "Tích điểm gấp đôi mỗi giao dịch", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "Benefit3Points", "layout": "vertical", "alignItems": "flex_end", "gap": 2, "children": [ - {"type": "text", "id": "Benefit3PointsVal", "fill": "#EC4899", "content": "2,450", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "Benefit3PointsLabel", "fill": "$text-tertiary", "content": "điểm", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "Benefit4", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "Benefit4Icon", "width": 44, "height": 44, "fill": "#8B5CF620", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Benefit4IconI", "width": 22, "height": 22, "iconFontName": "ticket", "iconFontFamily": "lucide", "fill": "#8B5CF6"} - ]}, - {"type": "frame", "id": "Benefit4Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "Benefit4Title", "fill": "$text-primary", "content": "Ưu đãi độc quyền", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "Benefit4Desc", "fill": "$text-tertiary", "content": "Chương trình dành riêng VIP", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "Benefit4New", "fill": "#8B5CF6", "cornerRadius": 6, "padding": [4, 8], "children": [ - {"type": "text", "id": "Benefit4NewText", "fill": "#FFFFFF", "content": "3 mới", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "VIPFooter", - "width": "fill_container", - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "gap": 12, - "padding": [16, 20], - "children": [ - {"type": "frame", "id": "ViewHistoryBtn", "width": "fill_container", "height": 46, "fill": "$bg-interactive", "cornerRadius": 12, "gap": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ViewHistoryIcon", "width": 16, "height": 16, "iconFontName": "history", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "ViewHistoryText", "fill": "$text-secondary", "content": "Lịch sử", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "ApplyVIPBtn", "width": "fill_container", "height": 46, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#EAB308", "position": 0}, {"color": "#F59408", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ApplyVIPIcon", "width": 18, "height": 18, "iconFontName": "crown", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "ApplyVIPText", "fill": "#FFFFFF", "content": "Áp dụng -15%", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/void-refund.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/void-refund.pen deleted file mode 100644 index f9f3bf7d..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/void-refund.pen +++ /dev/null @@ -1,179 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "VoidDialog", - "name": "Void Order Dialog", - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "VOModal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 2, "fill": "#EF4444"}, - "layout": "vertical", - "gap": 20, - "padding": 28, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "VOIcon", "width": 64, "height": 64, "fill": "#EF44441A", "cornerRadius": 32, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "VOIconI", "width": 28, "height": 28, "iconFontName": "x-circle", "iconFontFamily": "lucide", "fill": "#EF4444"} - ]}, - {"type": "frame", "id": "VOTitle", "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "VOTitleT", "fill": "#EF4444", "content": "Hủy đơn hàng", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}, - {"type": "text", "id": "VODesc", "fill": "#8B8B90", "content": "#ORD-045 • 138,000₫", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "VOReason", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ - {"type": "text", "id": "VOReasonL", "fill": "#8B8B90", "content": "Lý do hủy *", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "VOReasonInput", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "padding": [12, 14], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "VOReasonV", "fill": "#FFFFFF", "content": "Khách yêu cầu hủy", "fontFamily": "Roboto", "fontSize": 14}, - {"type": "icon_font", "id": "VOReasonI", "width": 16, "height": 16, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "#6B6B70"} - ]}, - {"type": "frame", "id": "VOReasons", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "layout": "vertical", "children": [ - {"type": "frame", "id": "VOR1", "width": "fill_container", "padding": [10, 14], "stroke": {"thickness": 0, "fill": "#2A2A2E"}, "children": [{"type": "text", "id": "VOR1T", "fill": "#8B8B90", "content": "Khách yêu cầu hủy", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "frame", "id": "VOR2", "width": "fill_container", "padding": [10, 14], "fill": "#EF444420", "children": [{"type": "text", "id": "VOR2T", "fill": "#EF4444", "content": "Sai đơn / nhầm món", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "VOR3", "width": "fill_container", "padding": [10, 14], "children": [{"type": "text", "id": "VOR3T", "fill": "#8B8B90", "content": "Hết nguyên liệu", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "frame", "id": "VOR4", "width": "fill_container", "padding": [10, 14], "children": [{"type": "text", "id": "VOR4T", "fill": "#8B8B90", "content": "Khác", "fontFamily": "Roboto", "fontSize": 13}]} - ]} - ]}, - {"type": "frame", "id": "VOWarning", "width": "fill_container", "fill": "#EF444410", "cornerRadius": 10, "padding": 12, "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "VOWarningI", "width": 18, "height": 18, "iconFontName": "alert-triangle", "iconFontFamily": "lucide", "fill": "#EF4444"}, - {"type": "text", "id": "VOWarningT", "fill": "#EF4444", "content": "Thao tác này cần Manager duyệt", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "VOActions", "width": "fill_container", "gap": 10, "children": [ - {"type": "frame", "id": "VOCancel", "width": "fill_container", "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "VOCancelT", "fill": "#ADADB0", "content": "Hủy bỏ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "VOSubmit", "width": "fill_container", "height": 48, "fill": "#EF4444", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "VOSubmitI", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "VOSubmitT", "fill": "#FFFFFF", "content": "Xác nhận hủy", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "RefundDialog", - "name": "Refund Dialog", - "x": 540, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "RFModal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 2, "fill": "#F59E0B"}, - "layout": "vertical", - "gap": 20, - "padding": 28, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "RFIcon", "width": 64, "height": 64, "fill": "#F59E0B1A", "cornerRadius": 32, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RFIconI", "width": 28, "height": 28, "iconFontName": "undo-2", "iconFontFamily": "lucide", "fill": "#F59E0B"} - ]}, - {"type": "frame", "id": "RFTitle", "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "RFTitleT", "fill": "#F59E0B", "content": "Hoàn tiền", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}, - {"type": "text", "id": "RFDesc", "fill": "#8B8B90", "content": "#ORD-042 • Đã thanh toán", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "RFOrder", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 10, "children": [ - {"type": "frame", "id": "RFOH", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RFOHL", "fill": "#8B8B90", "content": "Đã thanh toán", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "RFOHV", "fill": "#FFFFFF", "content": "195,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, - {"type": "frame", "id": "RFODiv", "width": "fill_container", "height": 1, "fill": "#2A2A2E"}, - {"type": "frame", "id": "RFOItems", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "frame", "id": "RFI1", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RFI1L", "fill": "#8B8B90", "content": "2x Cà phê sữa đá", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "RFI1V", "fill": "#FFFFFF", "content": "58,000₫", "fontFamily": "Roboto", "fontSize": 12}]}, - {"type": "frame", "id": "RFI2", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RFI2L", "fill": "#8B8B90", "content": "1x Trà đào", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "RFI2V", "fill": "#FFFFFF", "content": "45,000₫", "fontFamily": "Roboto", "fontSize": 12}]} - ]} - ]}, - {"type": "frame", "id": "RFType", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ - {"type": "text", "id": "RFTypeL", "fill": "#8B8B90", "content": "Loại hoàn tiền", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "RFTypes", "width": "fill_container", "gap": 10, "children": [ - {"type": "frame", "id": "RFT1", "width": "fill_container", "fill": "#F59E0B20", "stroke": {"thickness": 2, "fill": "#F59E0B"}, "cornerRadius": 10, "padding": 12, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "RFT1T", "fill": "#F59E0B", "content": "Hoàn toàn bộ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "RFT1V", "fill": "#F59E0B", "content": "195,000₫", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "frame", "id": "RFT2", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 10, "padding": 12, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "RFT2T", "fill": "#8B8B90", "content": "Hoàn một phần", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "RFT2V", "fill": "#6B6B70", "content": "Chọn món", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]} - ]}, - {"type": "frame", "id": "RFReason", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "text", "id": "RFReasonL", "fill": "#8B8B90", "content": "Lý do hoàn tiền *", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "RFReasonInput", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "padding": [12, 14], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "RFReasonV", "fill": "#FFFFFF", "content": "Món không đúng yêu cầu", "fontFamily": "Roboto", "fontSize": 14}, - {"type": "icon_font", "id": "RFReasonI", "width": 16, "height": 16, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "#6B6B70"} - ]} - ]}, - {"type": "frame", "id": "RFMethod", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "RFMethodL", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "RFMethodI", "width": 16, "height": 16, "iconFontName": "banknote", "iconFontFamily": "lucide", "fill": "#8B8B90"}, {"type": "text", "id": "RFMethodT", "fill": "#FFFFFF", "content": "Hoàn tiền mặt", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "icon_font", "id": "RFMethodCheck", "width": 16, "height": 16, "iconFontName": "check-circle-2", "iconFontFamily": "lucide", "fill": "#22C55E"} - ]}, - {"type": "frame", "id": "RFActions", "width": "fill_container", "gap": 10, "children": [ - {"type": "frame", "id": "RFCancel", "width": "fill_container", "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RFCancelT", "fill": "#ADADB0", "content": "Hủy bỏ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "RFSubmit", "width": "fill_container", "height": 48, "fill": "#F59E0B", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RFSubmitI", "width": 16, "height": 16, "iconFontName": "undo-2", "iconFontFamily": "lucide", "fill": "#000"}, - {"type": "text", "id": "RFSubmitT", "fill": "#000000", "content": "Xác nhận hoàn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "RefundSuccess", - "name": "Refund Success", - "x": 1080, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "RSModal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 2, "fill": "#22C55E"}, - "layout": "vertical", - "gap": 24, - "padding": 32, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "RSIcon", "width": 72, "height": 72, "fill": "#22C55E1A", "cornerRadius": 36, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RSIconI", "width": 32, "height": 32, "iconFontName": "check-circle-2", "iconFontFamily": "lucide", "fill": "#22C55E"} - ]}, - {"type": "frame", "id": "RSTitle", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "RSTitleT", "fill": "#22C55E", "content": "Hoàn tiền thành công", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}, - {"type": "text", "id": "RSDesc", "fill": "#8B8B90", "content": "#ORD-042", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "RSAmount", "width": "fill_container", "fill": "#22C55E10", "cornerRadius": 14, "padding": 20, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "RSAmountL", "fill": "#8B8B90", "content": "Số tiền hoàn", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "RSAmountV", "fill": "#22C55E", "content": "195,000₫", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "RSDetails", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 8, "children": [ - {"type": "frame", "id": "RSD1", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RSD1L", "fill": "#8B8B90", "content": "Phương thức", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "RSD1V", "fill": "#FFFFFF", "content": "Tiền mặt", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "frame", "id": "RSD2", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RSD2L", "fill": "#8B8B90", "content": "Người duyệt", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "RSD2V", "fill": "#FFFFFF", "content": "Quản lý Minh", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "frame", "id": "RSD3", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "RSD3L", "fill": "#8B8B90", "content": "Thời gian", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "RSD3V", "fill": "#FFFFFF", "content": "19:05 06/02/2026", "fontFamily": "Roboto", "fontSize": 13}]} - ]}, - {"type": "frame", "id": "RSDone", "width": "fill_container", "height": 50, "fill": "#22C55E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "RSDoneT", "fill": "#FFFFFF", "content": "Hoàn tất", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]} - ] - } - ] - } - ] -} diff --git a/pencil-design/src/pages/tPOS/pos/shared/dialogs/weight-entry.pen b/pencil-design/src/pages/tPOS/pos/shared/dialogs/weight-entry.pen deleted file mode 100644 index e03e2cfe..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/dialogs/weight-entry.pen +++ /dev/null @@ -1,477 +0,0 @@ -{ - "version": "2.7", - "children": [ - { - "type": "frame", - "id": "WeightEntryDialog", - "x": 0, - "y": 0, - "name": "Dialog/WeightEntry", - "reusable": true, - "clip": true, - "width": 380, - "height": 555, - "fill": "$bg-elevated", - "cornerRadius": 24, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "WeightEntryHeader", - "width": "fill_container", - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "padding": [ - 16, - 20 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "WeightEntryHeaderLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "WeightEntryIconBg", - "width": 40, - "height": 40, - "fill": "#3B82F620", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "WeightEntryIcon", - "width": 20, - "height": 20, - "iconFontName": "scale", - "iconFontFamily": "lucide", - "fill": "#3B82F6" - } - ] - }, - { - "type": "text", - "id": "WeightEntryTitle", - "fill": "$text-primary", - "content": "Nhập cân nặng", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "WeightEntryCloseBtn", - "width": 36, - "height": 36, - "fill": "$bg-interactive", - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "WeightEntryCloseIcon", - "width": 18, - "height": 18, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "WeightEntryContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "gap": 16, - "padding": 20, - "children": [ - { - "type": "frame", - "id": "WeightEntryProductInfo", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 14, - "gap": 12, - "padding": 14, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "WeightEntryProductImg", - "width": 48, - "height": 48, - "fill": "#22C55E20", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "WeightEntryProductIcon", - "width": 24, - "height": 24, - "iconFontName": "apple", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - }, - { - "type": "frame", - "id": "WeightEntryProductText", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "WeightEntryProductName", - "fill": "$text-primary", - "content": "Táo Fuji nhập khẩu", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - }, - { - "type": "text", - "id": "WeightEntryProductPrice", - "fill": "$orange-primary", - "content": "85,000₫/kg", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "WeightEntryInputSection", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "WeightEntryDisplay", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 2, - "fill": "$orange-primary" - }, - "gap": 8, - "padding": [ - 24, - 16 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "WeightEntryValue", - "fill": "$text-primary", - "content": "1.25", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "700" - }, - { - "type": "text", - "id": "WeightEntryUnit", - "fill": "$text-tertiary", - "content": "kg", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "WeightEntryTotal", - "width": "fill_container", - "fill": "#FF5C0015", - "cornerRadius": 12, - "padding": [ - 12, - 16 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "WeightEntryTotalLabel", - "fill": "$text-secondary", - "content": "Thành tiền:", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "WeightEntryTotalValue", - "fill": "$orange-primary", - "content": "106,250₫", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "700" - } - ] - } - ] - }, - { - "type": "frame", - "id": "WeightEntryQuickBtns", - "width": "fill_container", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "WeightQuick1", - "width": "fill_container", - "height": 44, - "fill": "$bg-page", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "WeightQuick1Text", - "fill": "$text-secondary", - "content": "0.5 kg", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "WeightQuick2", - "width": "fill_container", - "height": 44, - "fill": "$bg-page", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "WeightQuick2Text", - "fill": "$text-secondary", - "content": "1 kg", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "WeightQuick3", - "width": "fill_container", - "height": 44, - "fill": "$bg-page", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "WeightQuick3Text", - "fill": "$text-secondary", - "content": "2 kg", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "WeightQuick4", - "width": "fill_container", - "height": 44, - "fill": "$bg-page", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "WeightQuick4Text", - "fill": "$text-secondary", - "content": "5 kg", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "WeightEntryScaleBtn", - "width": "fill_container", - "fill": "$bg-interactive", - "cornerRadius": 12, - "gap": 10, - "padding": [ - 12, - 16 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "WeightEntryScaleIcon", - "width": 18, - "height": 18, - "iconFontName": "scale", - "iconFontFamily": "lucide", - "fill": "#3B82F6" - }, - { - "type": "text", - "id": "WeightEntryScaleText", - "fill": "#3B82F6", - "content": "Đọc từ cân điện tử", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "WeightEntryFooter", - "width": "fill_container", - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "padding": [ - 16, - 20 - ], - "children": [ - { - "type": "frame", - "id": "WeightEntryAddBtn", - "width": "fill_container", - "height": 52, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8533", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "gap": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "WeightEntryAddIcon", - "width": 20, - "height": 20, - "iconFontName": "plus", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "WeightEntryAddText", - "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" - } - } -} \ 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 deleted file mode 100644 index 387f562c..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/payment/bank-transfer.pen +++ /dev/null @@ -1,128 +0,0 @@ -{ - "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 deleted file mode 100644 index 7b6d48ca..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/payment/card.pen +++ /dev/null @@ -1,117 +0,0 @@ -{ - "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/cash.pen b/pencil-design/src/pages/tPOS/pos/shared/payment/cash.pen deleted file mode 100644 index f54bbb9d..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/payment/cash.pen +++ /dev/null @@ -1,102 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "PaymentCashScreen", - "name": "Payment/Cash", - "reusable": true, - "width": 480, - "height": 640, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "CashHeader", - "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": "CashHeaderLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "CashBackBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CashBackIcon", "width": 20, "height": 20, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]}, - {"type": "text", "id": "CashTitle", "fill": "$text-primary", "content": "Tiền mặt", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "CashTotalBadge", "fill": "#22C55E20", "cornerRadius": 10, "padding": [8, 14], "children": [ - {"type": "text", "id": "CashTotalText", "fill": "#22C55E", "content": "530,250₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]} - ] - }, - { - "type": "frame", - "id": "CashContent", - "width": "fill_container", - "height": "fill_container", - "padding": 24, - "layout": "vertical", - "gap": 24, - "children": [ - {"type": "frame", "id": "CashInputSection", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ - {"type": "text", "id": "CashInputLabel", "fill": "$text-secondary", "content": "Số tiền khách đưa", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "frame", "id": "CashInputBox", "width": "fill_container", "height": 72, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "padding": [0, 20], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "CashInputValue", "fill": "$text-primary", "content": "600,000", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}, - {"type": "text", "id": "CashInputCurrency", "fill": "$text-tertiary", "content": "₫", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "CashQuickAmounts", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ - {"type": "text", "id": "CashQuickLabel", "fill": "$text-secondary", "content": "Số tiền nhanh", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "frame", "id": "CashQuickRow1", "width": "fill_container", "gap": 10, "children": [ - {"type": "frame", "id": "CashQuick1", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "CashQuick1Text", "fill": "$text-primary", "content": "550K", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}, - {"type": "frame", "id": "CashQuick2", "width": "fill_container", "height": 48, "fill": "$orange-primary", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "CashQuick2Text", "fill": "$text-primary", "content": "600K", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}, - {"type": "frame", "id": "CashQuick3", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "CashQuick3Text", "fill": "$text-primary", "content": "700K", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]} - ]}, - {"type": "frame", "id": "CashQuickRow2", "width": "fill_container", "gap": 10, "children": [ - {"type": "frame", "id": "CashQuick4", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "CashQuick4Text", "fill": "$text-primary", "content": "1M", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]}, - {"type": "frame", "id": "CashQuick5", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "CashQuick5Text", "fill": "$text-primary", "content": "Đúng tiền", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}]} - ]} - ]}, - {"type": "frame", "id": "CashChangeSection", "width": "fill_container", "fill": "#22C55E15", "cornerRadius": 16, "padding": 20, "layout": "vertical", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "CashChangeLabel", "fill": "$text-secondary", "content": "Tiền thối lại", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "CashChangeValue", "fill": "#22C55E", "content": "69,750₫", "fontFamily": "Roboto", "fontSize": 36, "fontWeight": "700"}, - {"type": "frame", "id": "CashChangeBreakdown", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "CashChangeCalc", "fill": "$text-tertiary", "content": "600,000 - 530,250 =", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}, - {"type": "text", "id": "CashChangeResult", "fill": "#22C55E", "content": "69,750₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "CashFooter", - "width": "fill_container", - "fill": "$bg-elevated", - "padding": [16, 24], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, - "children": [ - {"type": "frame", "id": "CashConfirmBtn", "width": "fill_container", "height": 56, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#22C55E", "position": 0}, {"color": "#16A34A", "position": 1}]}, "cornerRadius": 14, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CashConfirmIcon", "width": 22, "height": 22, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "CashConfirmText", "fill": "$text-primary", "content": "Xác nhận thanh toán", "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/payment/gift-card.pen b/pencil-design/src/pages/tPOS/pos/shared/payment/gift-card.pen deleted file mode 100644 index 52b9bc4b..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/payment/gift-card.pen +++ /dev/null @@ -1,117 +0,0 @@ -{ - "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/method-select.pen b/pencil-design/src/pages/tPOS/pos/shared/payment/method-select.pen deleted file mode 100644 index 4329a6fa..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/payment/method-select.pen +++ /dev/null @@ -1,161 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "PaymentMethodScreen", - "name": "Payment/Method Select", - "reusable": true, - "width": 480, - "height": 640, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "PayHeader", - "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": "PayHeaderLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "PayCloseBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PayCloseIcon", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]}, - {"type": "text", "id": "PayTitle", "fill": "$text-primary", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "PayOrderInfo", "layout": "vertical", "alignItems": "flex_end", "gap": 2, "children": [ - {"type": "text", "id": "PayOrderLabel", "fill": "$text-tertiary", "content": "Đơn hàng #0089", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}, - {"type": "text", "id": "PayOrderTotal", "fill": "$orange-primary", "content": "530,250₫", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"} - ]} - ] - }, - { - "type": "frame", - "id": "PayMethods", - "width": "fill_container", - "height": "fill_container", - "padding": 24, - "layout": "vertical", - "gap": 16, - "children": [ - {"type": "text", "id": "PayMethodsTitle", "fill": "$text-secondary", "content": "Chọn phương thức thanh toán", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - { - "type": "frame", - "id": "PayMethodCash", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": {"thickness": 2, "fill": "$orange-primary"}, - "padding": 20, - "gap": 16, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "PayCashIcon", "width": 52, "height": 52, "fill": "#22C55E20", "cornerRadius": 14, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PayCashIconInner", "width": 26, "height": 26, "iconFontName": "banknote", "iconFontFamily": "lucide", "fill": "#22C55E"} - ]}, - {"type": "frame", "id": "PayCashInfo", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "PayCashTitle", "fill": "$text-primary", "content": "Tiền mặt", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "text", "id": "PayCashDesc", "fill": "$text-secondary", "content": "Nhận tiền và thối lại", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"} - ]}, - {"type": "icon_font", "id": "PayCashCheck", "width": 24, "height": 24, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "$orange-primary"} - ] - }, - { - "type": "frame", - "id": "PayMethodQR", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "padding": 20, - "gap": 16, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "PayQRIcon", "width": 52, "height": 52, "fill": "#3B82F620", "cornerRadius": 14, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PayQRIconInner", "width": 26, "height": 26, "iconFontName": "qr-code", "iconFontFamily": "lucide", "fill": "#3B82F6"} - ]}, - {"type": "frame", "id": "PayQRInfo", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "PayQRTitle", "fill": "$text-primary", "content": "Quét mã QR", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "text", "id": "PayQRDesc", "fill": "$text-secondary", "content": "VietQR, MoMo, ZaloPay", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"} - ]}, - {"type": "icon_font", "id": "PayQRArrow", "width": 20, "height": 20, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ] - }, - { - "type": "frame", - "id": "PayMethodBank", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "padding": 20, - "gap": 16, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "PayBankIcon", "width": 52, "height": 52, "fill": "#8B5CF620", "cornerRadius": 14, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PayBankIconInner", "width": 26, "height": 26, "iconFontName": "landmark", "iconFontFamily": "lucide", "fill": "#8B5CF6"} - ]}, - {"type": "frame", "id": "PayBankInfo", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "PayBankTitle", "fill": "$text-primary", "content": "Chuyển khoản", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "text", "id": "PayBankDesc", "fill": "$text-secondary", "content": "Hiển thị thông tin tài khoản", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"} - ]}, - {"type": "icon_font", "id": "PayBankArrow", "width": 20, "height": 20, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ] - }, - { - "type": "frame", - "id": "PayMethodCard", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "padding": 20, - "gap": 16, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "PayCardIcon", "width": 52, "height": 52, "fill": "#F59E0B20", "cornerRadius": 14, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PayCardIconInner", "width": 26, "height": 26, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "#F59E0B"} - ]}, - {"type": "frame", "id": "PayCardInfo", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "PayCardTitle", "fill": "$text-primary", "content": "Thẻ ATM/Visa", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "text", "id": "PayCardDesc", "fill": "$text-secondary", "content": "Quẹt thẻ qua máy POS", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"} - ]}, - {"type": "icon_font", "id": "PayCardArrow", "width": 20, "height": 20, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ] - } - ] - }, - { - "type": "frame", - "id": "PayFooter", - "width": "fill_container", - "fill": "$bg-elevated", - "padding": [16, 24], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, - "children": [ - {"type": "frame", "id": "PayConfirmBtn", "width": "fill_container", "height": 56, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 14, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PayConfirmIcon", "width": 22, "height": 22, "iconFontName": "banknote", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "PayConfirmText", "fill": "$text-primary", "content": "Nhận tiền mặt 530,250₫", "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/payment/partial-payment.pen b/pencil-design/src/pages/tPOS/pos/shared/payment/partial-payment.pen deleted file mode 100644 index 1e370310..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/payment/partial-payment.pen +++ /dev/null @@ -1,134 +0,0 @@ -{ - "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 deleted file mode 100644 index 098d3431..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/payment/payment-pending.pen +++ /dev/null @@ -1,82 +0,0 @@ -{ - "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/qr.pen b/pencil-design/src/pages/tPOS/pos/shared/payment/qr.pen deleted file mode 100644 index c9bae849..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/payment/qr.pen +++ /dev/null @@ -1,101 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "PaymentQRScreen", - "name": "Payment/QR", - "reusable": true, - "width": 480, - "height": 640, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "QRHeader", - "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": "QRHeaderLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "QRBackBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "QRBackIcon", "width": 20, "height": 20, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]}, - {"type": "text", "id": "QRTitle", "fill": "$text-primary", "content": "Quét mã QR", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "QRTotalBadge", "fill": "#3B82F620", "cornerRadius": 10, "padding": [8, 14], "children": [ - {"type": "text", "id": "QRTotalText", "fill": "#3B82F6", "content": "530,250₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]} - ] - }, - { - "type": "frame", - "id": "QRContent", - "width": "fill_container", - "height": "fill_container", - "padding": 24, - "layout": "vertical", - "gap": 24, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "QRTabs", "gap": 8, "children": [ - {"type": "frame", "id": "QRTabVietQR", "fill": "$orange-primary", "cornerRadius": 100, "padding": [10, 18], "children": [{"type": "text", "id": "QRTabVietQRText", "fill": "$text-primary", "content": "VietQR", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, - {"type": "frame", "id": "QRTabMomo", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 18], "children": [{"type": "text", "id": "QRTabMomoText", "fill": "$text-secondary", "content": "MoMo", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "QRTabZalo", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 18], "children": [{"type": "text", "id": "QRTabZaloText", "fill": "$text-secondary", "content": "ZaloPay", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]} - ]}, - {"type": "frame", "id": "QRCodeBox", "width": 280, "height": 280, "fill": "#FFFFFF", "cornerRadius": 20, "padding": 20, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "frame", "id": "QRCodeInner", "width": 220, "height": 220, "fill": "$bg-page", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "QRPlaceholder", "fill": "$text-tertiary", "content": "QR CODE", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"} - ]} - ]}, - {"type": "frame", "id": "QRBankInfo", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "QRBankName", "fill": "$text-primary", "content": "Vietcombank", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "text", "id": "QRAccountNo", "fill": "$text-secondary", "content": "0123 4567 8910", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "QRAccountName", "fill": "$text-tertiary", "content": "CONG TY TNHH GOODGO", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "QRStatus", "width": "fill_container", "fill": "#F59E0B15", "cornerRadius": 12, "padding": [14, 20], "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "QRSpinner", "width": 24, "height": 24, "cornerRadius": 100, "stroke": {"thickness": 3, "fill": "#F59E0B"}, "children": []}, - {"type": "frame", "id": "QRStatusInfo", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "QRStatusTitle", "fill": "#F59E0B", "content": "Đang chờ thanh toán...", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "QRStatusDesc", "fill": "$text-secondary", "content": "Quét mã QR bằng app ngân hàng hoặc ví điện tử", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "QRFooter", - "width": "fill_container", - "fill": "$bg-elevated", - "padding": [16, 24], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, - "gap": 12, - "children": [ - {"type": "frame", "id": "QRCancelBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "QRCancelText", "fill": "$text-secondary", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "QRManualBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "QRManualText", "fill": "$text-primary", "content": "Xác nhận thủ cô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/payment/receipt.pen b/pencil-design/src/pages/tPOS/pos/shared/payment/receipt.pen deleted file mode 100644 index f28528c4..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/payment/receipt.pen +++ /dev/null @@ -1,196 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "ReceiptScreen", - "name": "Payment/Receipt", - "reusable": true, - "width": 320, - "height": 540, - "fill": "#FFFFFF", - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "ReceiptHeader", - "width": "fill_container", - "padding": [24, 20], - "layout": "vertical", - "gap": 8, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "ReceiptLogo", "width": 48, "height": 48, "fill": "#FF5C00", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "ReceiptLogoText", "fill": "#FFFFFF", "content": "G", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"} - ]}, - {"type": "text", "id": "ReceiptStoreName", "fill": "#111111", "content": "GOODGO RESTAURANT", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "ReceiptAddress", "fill": "#666666", "content": "123 Nguyễn Huệ, Q.1, TP.HCM", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, - {"type": "text", "id": "ReceiptPhone", "fill": "#666666", "content": "Tel: 028 1234 5678", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ] - }, - { - "type": "frame", - "id": "ReceiptDivider1", - "width": "fill_container", - "height": 1, - "fill": "#E5E5E5", - "children": [] - }, - { - "type": "frame", - "id": "ReceiptInfo", - "width": "fill_container", - "padding": [12, 20], - "layout": "vertical", - "gap": 6, - "children": [ - {"type": "frame", "id": "ReceiptInfoRow1", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "ReceiptOrderLabel", "fill": "#666666", "content": "Hóa đơn:", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, - {"type": "text", "id": "ReceiptOrderValue", "fill": "#111111", "content": "#0089", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "ReceiptInfoRow2", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "ReceiptDateLabel", "fill": "#666666", "content": "Ngày:", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, - {"type": "text", "id": "ReceiptDateValue", "fill": "#111111", "content": "06/02/2026 00:05", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "ReceiptInfoRow3", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "ReceiptTableLabel", "fill": "#666666", "content": "Bàn:", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, - {"type": "text", "id": "ReceiptTableValue", "fill": "#111111", "content": "01", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "ReceiptInfoRow4", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "ReceiptCashierLabel", "fill": "#666666", "content": "Thu ngân:", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, - {"type": "text", "id": "ReceiptCashierValue", "fill": "#111111", "content": "Minh Tuấn", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]} - ] - }, - { - "type": "frame", - "id": "ReceiptDivider2", - "width": "fill_container", - "height": 1, - "fill": "#E5E5E5", - "children": [] - }, - { - "type": "frame", - "id": "ReceiptItems", - "width": "fill_container", - "padding": [12, 20], - "layout": "vertical", - "gap": 8, - "children": [ - {"type": "frame", "id": "ReceiptItem1", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "ReceiptItem1Left", "gap": 8, "children": [ - {"type": "text", "id": "ReceiptItem1Qty", "fill": "#111111", "content": "1x", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, - {"type": "text", "id": "ReceiptItem1Name", "fill": "#111111", "content": "Bò Lúc Lắc", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]}, - {"type": "text", "id": "ReceiptItem1Price", "fill": "#111111", "content": "185,000", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "ReceiptItem2", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "ReceiptItem2Left", "gap": 8, "children": [ - {"type": "text", "id": "ReceiptItem2Qty", "fill": "#111111", "content": "1x", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, - {"type": "text", "id": "ReceiptItem2Name", "fill": "#111111", "content": "Gà Nướng Mật Ong", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]}, - {"type": "text", "id": "ReceiptItem2Price", "fill": "#111111", "content": "165,000", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "ReceiptItem3", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "ReceiptItem3Left", "gap": 8, "children": [ - {"type": "text", "id": "ReceiptItem3Qty", "fill": "#111111", "content": "2x", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, - {"type": "text", "id": "ReceiptItem3Name", "fill": "#111111", "content": "Cơm Trắng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]}, - {"type": "text", "id": "ReceiptItem3Price", "fill": "#111111", "content": "20,000", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "ReceiptItem4", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "ReceiptItem4Left", "gap": 8, "children": [ - {"type": "text", "id": "ReceiptItem4Qty", "fill": "#111111", "content": "2x", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, - {"type": "text", "id": "ReceiptItem4Name", "fill": "#111111", "content": "Tiger", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]}, - {"type": "text", "id": "ReceiptItem4Price", "fill": "#111111", "content": "70,000", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "ReceiptItem5", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "ReceiptItem5Left", "gap": 8, "children": [ - {"type": "text", "id": "ReceiptItem5Qty", "fill": "#111111", "content": "1x", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, - {"type": "text", "id": "ReceiptItem5Name", "fill": "#111111", "content": "Nước Suối", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]}, - {"type": "text", "id": "ReceiptItem5Price", "fill": "#111111", "content": "15,000", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]} - ] - }, - { - "type": "frame", - "id": "ReceiptDivider3", - "width": "fill_container", - "height": 1, - "fill": "#E5E5E5", - "children": [] - }, - { - "type": "frame", - "id": "ReceiptTotals", - "width": "fill_container", - "padding": [12, 20], - "layout": "vertical", - "gap": 6, - "children": [ - {"type": "frame", "id": "ReceiptSubtotal", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "ReceiptSubtotalLabel", "fill": "#666666", "content": "Tạm tính:", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, - {"type": "text", "id": "ReceiptSubtotalValue", "fill": "#111111", "content": "455,000", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "ReceiptVAT", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "ReceiptVATLabel", "fill": "#666666", "content": "VAT 10%:", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, - {"type": "text", "id": "ReceiptVATValue", "fill": "#111111", "content": "45,500", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "ReceiptService", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "ReceiptServiceLabel", "fill": "#666666", "content": "Phí DV 5%:", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, - {"type": "text", "id": "ReceiptServiceValue", "fill": "#111111", "content": "29,750", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "ReceiptTotal", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "ReceiptTotalLabel", "fill": "#111111", "content": "TỔNG CỘNG:", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}, - {"type": "text", "id": "ReceiptTotalValue", "fill": "#111111", "content": "530,250₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} - ]} - ] - }, - { - "type": "frame", - "id": "ReceiptDivider4", - "width": "fill_container", - "height": 1, - "fill": "#E5E5E5", - "children": [] - }, - { - "type": "frame", - "id": "ReceiptPayment", - "width": "fill_container", - "padding": [12, 20], - "layout": "vertical", - "gap": 6, - "children": [ - {"type": "frame", "id": "ReceiptPaid", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "ReceiptPaidLabel", "fill": "#666666", "content": "Tiền mặt:", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, - {"type": "text", "id": "ReceiptPaidValue", "fill": "#111111", "content": "600,000", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "ReceiptChange", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "ReceiptChangeLabel", "fill": "#666666", "content": "Tiền thối:", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, - {"type": "text", "id": "ReceiptChangeValue", "fill": "#111111", "content": "69,750", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"} - ]} - ] - }, - { - "type": "frame", - "id": "ReceiptFooter", - "width": "fill_container", - "padding": [16, 20], - "layout": "vertical", - "gap": 8, - "alignItems": "center", - "children": [ - {"type": "text", "id": "ReceiptThanks", "fill": "#111111", "content": "Cảm ơn quý khách!", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "ReceiptWeb", "fill": "#666666", "content": "www.goodgo.vn", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"} - ] - } - ] - } - ], - "variables": {} -} diff --git a/pencil-design/src/pages/tPOS/pos/shared/payment/success.pen b/pencil-design/src/pages/tPOS/pos/shared/payment/success.pen deleted file mode 100644 index e942e600..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/payment/success.pen +++ /dev/null @@ -1,95 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "PaymentSuccessScreen", - "name": "Payment/Success", - "reusable": true, - "width": 480, - "height": 640, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "SuccessContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "gap": 32, - "padding": 40, - "children": [ - {"type": "frame", "id": "SuccessIconOuter", "width": 120, "height": 120, "fill": "#22C55E20", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "frame", "id": "SuccessIconInner", "width": 80, "height": 80, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SuccessCheck", "width": 40, "height": 40, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"} - ]} - ]}, - {"type": "frame", "id": "SuccessInfo", "layout": "vertical", "gap": 12, "alignItems": "center", "children": [ - {"type": "text", "id": "SuccessTitle", "fill": "#22C55E", "content": "Thanh toán thành công!", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"}, - {"type": "text", "id": "SuccessAmount", "fill": "$text-primary", "content": "530,250₫", "fontFamily": "Roboto", "fontSize": 36, "fontWeight": "700"}, - {"type": "frame", "id": "SuccessMethod", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [8, 14], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SuccessMethodIcon", "width": 16, "height": 16, "iconFontName": "banknote", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "SuccessMethodText", "fill": "$text-secondary", "content": "Tiền mặt • Thối 69,750₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "SuccessOrderInfo", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "padding": 20, "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "SuccessOrderRow1", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "SuccessOrderLabel", "fill": "$text-tertiary", "content": "Mã đơn hàng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}, - {"type": "text", "id": "SuccessOrderId", "fill": "$text-primary", "content": "#0089", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "SuccessOrderRow2", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "SuccessTimeLabel", "fill": "$text-tertiary", "content": "Thời gian", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}, - {"type": "text", "id": "SuccessTimeValue", "fill": "$text-primary", "content": "06/02/2026 00:05", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SuccessOrderRow3", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "SuccessCashierLabel", "fill": "$text-tertiary", "content": "Nhân viên", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}, - {"type": "text", "id": "SuccessCashierValue", "fill": "$text-primary", "content": "Minh Tuấn", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "SuccessFooter", - "width": "fill_container", - "fill": "$bg-elevated", - "padding": [20, 24], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, - "layout": "vertical", - "gap": 12, - "children": [ - {"type": "frame", "id": "SuccessActions", "width": "fill_container", "gap": 12, "children": [ - {"type": "frame", "id": "SuccessPrintBtn", "width": "fill_container", "height": 52, "fill": "$bg-interactive", "cornerRadius": 14, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SuccessPrintIcon", "width": 20, "height": 20, "iconFontName": "printer", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "SuccessPrintText", "fill": "$text-primary", "content": "In hóa đơn", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "SuccessSendBtn", "width": "fill_container", "height": 52, "fill": "$bg-interactive", "cornerRadius": 14, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SuccessSendIcon", "width": 20, "height": 20, "iconFontName": "send", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "SuccessSendText", "fill": "$text-primary", "content": "Gửi email", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SuccessNewOrderBtn", "width": "fill_container", "height": 56, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 14, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SuccessNewIcon", "width": 22, "height": 22, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "SuccessNewText", "fill": "$text-primary", "content": "Đơn hàng mới", "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/payment/tip-entry.pen b/pencil-design/src/pages/tPOS/pos/shared/payment/tip-entry.pen deleted file mode 100644 index 6420aa0e..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/payment/tip-entry.pen +++ /dev/null @@ -1,120 +0,0 @@ -{ - "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/cash-reconciliation.pen b/pencil-design/src/pages/tPOS/pos/shared/reports/cash-reconciliation.pen deleted file mode 100644 index ecc751fb..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/reports/cash-reconciliation.pen +++ /dev/null @@ -1,158 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "CashReconciliationScreen", - "name": "Report/CashReconciliation", - "reusable": true, - "width": 480, - "height": 720, - "fill": "$bg-page", - "cornerRadius": 20, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "ReconcileHeader", - "width": "fill_container", - "fill": "$bg-elevated", - "padding": [16, 20], - "gap": 12, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "ReconcileIconBg", "width": 44, "height": 44, "fill": "#22C55E15", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ReconcileIcon", "width": 22, "height": 22, "iconFontName": "banknote", "iconFontFamily": "lucide", "fill": "#22C55E"} - ]}, - {"type": "frame", "id": "ReconcileTitleBox", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "ReconcileTitle", "fill": "$text-primary", "content": "Đối Chiếu Tiền Mặt", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, - {"type": "text", "id": "ReconcileShift", "fill": "$text-tertiary", "content": "Ca sáng - Nguyễn Văn An", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "ReconcileClose", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ReconcileCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "SystemAmount", - "width": "fill_container", - "fill": "$bg-elevated", - "padding": [16, 20], - "gap": 12, - "alignItems": "center", - "justifyContent": "space_between", - "children": [ - {"type": "frame", "id": "SystemLabel", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "SystemLabelText", "fill": "$text-secondary", "content": "Tiền mặt theo hệ thống", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "SystemNote", "fill": "$text-tertiary", "content": "Đầu ca + Thu tiền mặt - Chi", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "text", "id": "SystemAmount", "fill": "$text-primary", "content": "2,450,000đ", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"} - ] - }, - { - "type": "frame", - "id": "ReconcileContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "padding": [16, 20], - "gap": 16, - "children": [ - {"type": "frame", "id": "DenominationSection", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ - {"type": "text", "id": "DenomTitle", "fill": "$text-secondary", "content": "Kiểm đếm mệnh giá", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "frame", "id": "Denom500k", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 10, "padding": [12, 14], "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "Denom500kLabel", "width": 80, "children": [ - {"type": "text", "id": "Denom500kText", "fill": "#EC4899", "content": "500,000đ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "Denom500kInput", "width": 60, "height": 36, "fill": "$bg-page", "cornerRadius": 8, "stroke": {"thickness": 1, "fill": "$border-default"}, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Denom500kVal", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ]}, - {"type": "text", "id": "Denom500kX", "fill": "$text-tertiary", "content": "×", "fontFamily": "Roboto", "fontSize": 14}, - {"type": "text", "id": "Denom500kTotal", "fill": "$text-primary", "content": "1,000,000đ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500", "width": "fill_container", "textAlign": "right"} - ]}, - {"type": "frame", "id": "Denom200k", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 10, "padding": [12, 14], "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "Denom200kLabel", "width": 80, "children": [ - {"type": "text", "id": "Denom200kText", "fill": "#F97316", "content": "200,000đ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "Denom200kInput", "width": 60, "height": 36, "fill": "$bg-page", "cornerRadius": 8, "stroke": {"thickness": 1, "fill": "$border-default"}, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Denom200kVal", "fill": "$text-primary", "content": "5", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ]}, - {"type": "text", "id": "Denom200kX", "fill": "$text-tertiary", "content": "×", "fontFamily": "Roboto", "fontSize": 14}, - {"type": "text", "id": "Denom200kTotal", "fill": "$text-primary", "content": "1,000,000đ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500", "width": "fill_container", "textAlign": "right"} - ]}, - {"type": "frame", "id": "Denom100k", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 10, "padding": [12, 14], "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "Denom100kLabel", "width": 80, "children": [ - {"type": "text", "id": "Denom100kText", "fill": "#22C55E", "content": "100,000đ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "Denom100kInput", "width": 60, "height": 36, "fill": "$bg-page", "cornerRadius": 8, "stroke": {"thickness": 1, "fill": "$border-default"}, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Denom100kVal", "fill": "$text-primary", "content": "4", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ]}, - {"type": "text", "id": "Denom100kX", "fill": "$text-tertiary", "content": "×", "fontFamily": "Roboto", "fontSize": 14}, - {"type": "text", "id": "Denom100kTotal", "fill": "$text-primary", "content": "400,000đ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500", "width": "fill_container", "textAlign": "right"} - ]}, - {"type": "frame", "id": "DenomSmall", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 10, "padding": [12, 14], "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "DenomSmallLabel", "width": 80, "children": [ - {"type": "text", "id": "DenomSmallText", "fill": "#3B82F6", "content": "Tiền lẻ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "DenomSmallInput", "width": "fill_container", "height": 36, "fill": "$bg-page", "cornerRadius": 8, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 12], "alignItems": "center", "children": [ - {"type": "text", "id": "DenomSmallVal", "fill": "$text-primary", "content": "35,000", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ]} - ]} - ]}, - {"type": "frame", "id": "ActualTotal", "width": "fill_container", "fill": "#22C55E15", "cornerRadius": 12, "padding": 16, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "ActualLabel", "fill": "$text-secondary", "content": "Tiền thực tế đếm được", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "ActualAmount", "fill": "#22C55E", "content": "2,435,000đ", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "DifferenceSection", "width": "fill_container", "fill": "#EF444415", "cornerRadius": 12, "padding": 16, "layout": "vertical", "gap": 8, "children": [ - {"type": "frame", "id": "DiffHeader", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "DiffLabel", "fill": "$text-secondary", "content": "Chênh lệch", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "DiffAmount", "fill": "#EF4444", "content": "-15,000đ", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "DiffNote", "gap": 6, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "DiffNoteIcon", "width": 14, "height": 14, "iconFontName": "alert-circle", "iconFontFamily": "lucide", "fill": "#EF4444"}, - {"type": "text", "id": "DiffNoteText", "fill": "#EF4444", "content": "Thiếu so với hệ thống", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "NoteField", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "text", "id": "NoteLabel", "fill": "$text-secondary", "content": "Ghi chú giải trình", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "NoteInput", "width": "fill_container", "height": 64, "fill": "$bg-elevated", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [10, 14], "children": [ - {"type": "text", "id": "NoteVal", "fill": "$text-tertiary", "content": "Trả lại tiền thừa cho khách khi hệ thống gặp lỗi...", "fontFamily": "Roboto", "fontSize": 14} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "ReconcileFooter", - "width": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "gap": 12, - "padding": [16, 20], - "children": [ - {"type": "frame", "id": "SaveDraftBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SaveDraftIcon", "width": 18, "height": 18, "iconFontName": "save", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "SaveDraftText", "fill": "$text-secondary", "content": "Lưu nháp", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SubmitBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SubmitIcon", "width": 18, "height": 18, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "SubmitText", "fill": "#FFFFFF", "content": "Xác nhận kết ca", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/shared/reports/inventory-alert.pen b/pencil-design/src/pages/tPOS/pos/shared/reports/inventory-alert.pen deleted file mode 100644 index 15e99b42..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/reports/inventory-alert.pen +++ /dev/null @@ -1,150 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "InventoryAlert", - "name": "Screen/Inventory Alert", - "reusable": true, - "width": 480, - "height": 600, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "InventoryHeader", - "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": "InventoryHeaderLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "InventoryBackBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "InventoryBackIcon", "width": 20, "height": 20, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]}, - {"type": "text", "id": "InventoryTitle", "fill": "$text-primary", "content": "Cảnh báo tồn kho", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "InventorySettingsBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "InventorySettingsIcon", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "AlertSummary", - "width": "fill_container", - "padding": [16, 24], - "fill": "$bg-elevated", - "gap": 12, - "children": [ - {"type": "frame", "id": "AlertOutOfStock", "width": "fill_container", "fill": "#EF444420", "cornerRadius": 12, "padding": [14, 16], "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "AlertOutOfStockIcon", "width": 20, "height": 20, "iconFontName": "alert-triangle", "iconFontFamily": "lucide", "fill": "#EF4444"}, - {"type": "text", "id": "AlertOutOfStockText", "fill": "#EF4444", "content": "3 sản phẩm hết hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "AlertLowStock", "width": "fill_container", "fill": "#F59E0B20", "cornerRadius": 12, "padding": [14, 16], "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "AlertLowStockIcon", "width": 20, "height": 20, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "text", "id": "AlertLowStockText", "fill": "#F59E0B", "content": "5 sản phẩm sắp hết", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - }, - { - "type": "frame", - "id": "InventoryContent", - "width": "fill_container", - "height": "fill_container", - "padding": 24, - "layout": "vertical", - "gap": 20, - "clip": true, - "children": [ - {"type": "frame", "id": "OutOfStockSection", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "OutOfStockHeader", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "OutOfStockDot", "width": 10, "height": 10, "fill": "#EF4444", "cornerRadius": 100}, - {"type": "text", "id": "OutOfStockTitle", "fill": "$text-primary", "content": "Hết hàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "OutOfStockItem1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 16, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "OutOfStockItem1Left", "gap": 14, "alignItems": "center", "children": [ - {"type": "frame", "id": "OutOfStockItem1Icon", "width": 44, "height": 44, "fill": "#EF444420", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "OutOfStockItem1IconI", "width": 22, "height": 22, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "#EF4444"} - ]}, - {"type": "frame", "id": "OutOfStockItem1Info", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "OutOfStockItem1Name", "fill": "$text-primary", "content": "Cà phê Arabica", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, - {"type": "text", "id": "OutOfStockItem1Stock", "fill": "#EF4444", "content": "Stock: 0", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "OutOfStockItem1Btn", "fill": "$orange-primary", "cornerRadius": 8, "padding": [8, 14], "children": [ - {"type": "text", "id": "OutOfStockItem1BtnText", "fill": "#FFFFFF", "content": "Đặt hàng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "OutOfStockItem2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 16, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "OutOfStockItem2Left", "gap": 14, "alignItems": "center", "children": [ - {"type": "frame", "id": "OutOfStockItem2Icon", "width": 44, "height": 44, "fill": "#EF444420", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "OutOfStockItem2IconI", "width": 22, "height": 22, "iconFontName": "milk", "iconFontFamily": "lucide", "fill": "#EF4444"} - ]}, - {"type": "frame", "id": "OutOfStockItem2Info", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "OutOfStockItem2Name", "fill": "$text-primary", "content": "Sữa tươi", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, - {"type": "text", "id": "OutOfStockItem2Stock", "fill": "#EF4444", "content": "Stock: 0", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "OutOfStockItem2Btn", "fill": "$orange-primary", "cornerRadius": 8, "padding": [8, 14], "children": [ - {"type": "text", "id": "OutOfStockItem2BtnText", "fill": "#FFFFFF", "content": "Đặt hàng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ]}, - {"type": "frame", "id": "LowStockSection", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "LowStockHeader", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "LowStockDot", "width": 10, "height": 10, "fill": "#F59E0B", "cornerRadius": 100}, - {"type": "text", "id": "LowStockTitle", "fill": "$text-primary", "content": "Sắp hết (< 20%)", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "LowStockItem1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 16, "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "LowStockItem1Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "LowStockItem1Name", "fill": "$text-primary", "content": "Bơ", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"}, - {"type": "text", "id": "LowStockItem1Qty", "fill": "#F59E0B", "content": "5/50", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "LowStockItem1Bar", "width": "fill_container", "height": 6, "fill": "$bg-interactive", "cornerRadius": 3, "children": [ - {"type": "frame", "id": "LowStockItem1BarFill", "width": "10%", "height": 6, "fill": "#F59E0B", "cornerRadius": 3} - ]} - ]}, - {"type": "frame", "id": "LowStockItem2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 16, "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "LowStockItem2Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "LowStockItem2Name", "fill": "$text-primary", "content": "Syrup Caramel", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"}, - {"type": "text", "id": "LowStockItem2Qty", "fill": "#F59E0B", "content": "2/20", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "LowStockItem2Bar", "width": "fill_container", "height": 6, "fill": "$bg-interactive", "cornerRadius": 3, "children": [ - {"type": "frame", "id": "LowStockItem2BarFill", "width": "10%", "height": 6, "fill": "#F59E0B", "cornerRadius": 3} - ]} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "InventoryFooter", - "width": "fill_container", - "fill": "$bg-elevated", - "padding": [16, 24], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, - "children": [ - {"type": "frame", "id": "OrderAllBtn", "width": "fill_container", "height": 52, "fill": "$orange-primary", "cornerRadius": 14, "justifyContent": "center", "alignItems": "center", "gap": 10, "children": [ - {"type": "icon_font", "id": "OrderAllIcon", "width": 20, "height": 20, "iconFontName": "shopping-cart", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "OrderAllText", "fill": "#FFFFFF", "content": "Đặt hàng tất cả", "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-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"} - } -} 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 deleted file mode 100644 index fbb4d8be..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/reports/payment-report.pen +++ /dev/null @@ -1,127 +0,0 @@ -{ - "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/sales-dashboard.pen b/pencil-design/src/pages/tPOS/pos/shared/reports/sales-dashboard.pen deleted file mode 100644 index 06c696bb..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/reports/sales-dashboard.pen +++ /dev/null @@ -1,317 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "SalesDashboard", - "name": "Screen/Sales Dashboard", - "reusable": true, - "width": 1280, - "height": 720, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "DashboardHeader", - "width": "fill_container", - "padding": [20, 32], - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "DashboardHeaderLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "DashboardBackBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "DashboardBackIcon", "width": 20, "height": 20, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]}, - {"type": "text", "id": "DashboardTitle", "fill": "$text-primary", "content": "Báo cáo doanh thu", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "DashboardHeaderRight", "gap": 12, "children": [ - {"type": "frame", "id": "DateFilter", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "DateFilterIcon", "width": 18, "height": 18, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "DateFilterText", "fill": "$text-primary", "content": "Hôm nay", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "icon_font", "id": "DateFilterArrow", "width": 16, "height": 16, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]}, - {"type": "frame", "id": "ExportBtn", "fill": "$orange-primary", "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ExportIcon", "width": 18, "height": 18, "iconFontName": "download", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "ExportText", "fill": "#FFFFFF", "content": "Export", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "DashboardContent", - "width": "fill_container", - "height": "fill_container", - "padding": 32, - "layout": "vertical", - "gap": 24, - "children": [ - { - "type": "frame", - "id": "KPICards", - "width": "fill_container", - "gap": 20, - "children": [ - {"type": "frame", "id": "KPIRevenue", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "padding": 20, "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "KPIRevenueHeader", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "KPIRevenueIcon", "width": 44, "height": 44, "fill": "#22C55E20", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "KPIRevenueIconI", "width": 22, "height": 22, "iconFontName": "trending-up", "iconFontFamily": "lucide", "fill": "#22C55E"} - ]}, - {"type": "frame", "id": "KPIRevenueChange", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 8], "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "KPIRevenueChangeIcon", "width": 12, "height": 12, "iconFontName": "arrow-up", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "KPIRevenueChangeText", "fill": "#22C55E", "content": "12%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]} - ]}, - {"type": "text", "id": "KPIRevenueValue", "fill": "$text-primary", "content": "45.2M", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}, - {"type": "text", "id": "KPIRevenueLabel", "fill": "$text-tertiary", "content": "Doanh thu", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "KPIOrders", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "padding": 20, "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "KPIOrdersHeader", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "KPIOrdersIcon", "width": 44, "height": 44, "fill": "#3B82F620", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "KPIOrdersIconI", "width": 22, "height": 22, "iconFontName": "receipt", "iconFontFamily": "lucide", "fill": "#3B82F6"} - ]}, - {"type": "frame", "id": "KPIOrdersChange", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 8], "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "KPIOrdersChangeIcon", "width": 12, "height": 12, "iconFontName": "arrow-up", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "KPIOrdersChangeText", "fill": "#22C55E", "content": "8%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]} - ]}, - {"type": "text", "id": "KPIOrdersValue", "fill": "$text-primary", "content": "342", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}, - {"type": "text", "id": "KPIOrdersLabel", "fill": "$text-tertiary", "content": "Đơn hàng", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "KPIAvg", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "padding": 20, "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "KPIAvgHeader", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "KPIAvgIcon", "width": 44, "height": 44, "fill": "#8B5CF620", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "KPIAvgIconI", "width": 22, "height": 22, "iconFontName": "calculator", "iconFontFamily": "lucide", "fill": "#8B5CF6"} - ]}, - {"type": "frame", "id": "KPIAvgChange", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 8], "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "KPIAvgChangeIcon", "width": 12, "height": 12, "iconFontName": "arrow-up", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "KPIAvgChangeText", "fill": "#22C55E", "content": "5%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]} - ]}, - {"type": "text", "id": "KPIAvgValue", "fill": "$text-primary", "content": "132K", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}, - {"type": "text", "id": "KPIAvgLabel", "fill": "$text-tertiary", "content": "Trung bình/đơn", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "KPICustomers", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "padding": 20, "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "KPICustomersHeader", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "KPICustomersIcon", "width": 44, "height": 44, "fill": "#EC489920", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "KPICustomersIconI", "width": 22, "height": 22, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "#EC4899"} - ]}, - {"type": "frame", "id": "KPICustomersChange", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 8], "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "KPICustomersChangeIcon", "width": 12, "height": 12, "iconFontName": "arrow-up", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "KPICustomersChangeText", "fill": "#22C55E", "content": "15%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]} - ]}, - {"type": "text", "id": "KPICustomersValue", "fill": "$text-primary", "content": "289", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}, - {"type": "text", "id": "KPICustomersLabel", "fill": "$text-tertiary", "content": "Khách hàng", "fontFamily": "Roboto", "fontSize": 14} - ]} - ] - }, - { - "type": "frame", - "id": "ChartsRow", - "width": "fill_container", - "height": "fill_container", - "gap": 24, - "children": [ - { - "type": "frame", - "id": "RevenueChart", - "width": "fill_container", - "height": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 16, - "layout": "vertical", - "children": [ - {"type": "frame", "id": "RevenueChartHeader", "width": "fill_container", "padding": [16, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RevenueChartIcon", "width": 20, "height": 20, "iconFontName": "line-chart", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "text", "id": "RevenueChartTitle", "fill": "$text-primary", "content": "Doanh thu theo giờ", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "RevenueChartBody", "width": "fill_container", "height": "fill_container", "padding": 20, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "frame", "id": "ChartPlaceholder", "width": "fill_container", "height": 200, "stroke": {"thickness": 1, "fill": "$border-default", "dashArray": [4, 4]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "frame", "id": "ChartPlaceholderContent", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ChartPlaceholderIcon", "width": 32, "height": 32, "iconFontName": "bar-chart-2", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "ChartPlaceholderText", "fill": "$text-tertiary", "content": "Revenue Chart", "fontFamily": "Roboto", "fontSize": 14} - ]} - ]} - ]}, - {"type": "frame", "id": "TimeLabels", "width": "fill_container", "padding": [0, 20, 16, 20], "justifyContent": "space_between", "children": [ - {"type": "text", "id": "TimeLabel1", "fill": "$text-tertiary", "content": "8am", "fontFamily": "Roboto", "fontSize": 11}, - {"type": "text", "id": "TimeLabel2", "fill": "$text-tertiary", "content": "10", "fontFamily": "Roboto", "fontSize": 11}, - {"type": "text", "id": "TimeLabel3", "fill": "$text-tertiary", "content": "12", "fontFamily": "Roboto", "fontSize": 11}, - {"type": "text", "id": "TimeLabel4", "fill": "$text-tertiary", "content": "14", "fontFamily": "Roboto", "fontSize": 11}, - {"type": "text", "id": "TimeLabel5", "fill": "$text-tertiary", "content": "16", "fontFamily": "Roboto", "fontSize": 11}, - {"type": "text", "id": "TimeLabel6", "fill": "$text-tertiary", "content": "18", "fontFamily": "Roboto", "fontSize": 11} - ]} - ] - }, - { - "type": "frame", - "id": "RightPanel", - "width": 320, - "height": "fill_container", - "layout": "vertical", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "TopProducts", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 16, - "layout": "vertical", - "children": [ - {"type": "frame", "id": "TopProductsHeader", "width": "fill_container", "padding": [16, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "TopProductsIcon", "width": 20, "height": 20, "iconFontName": "trophy", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "text", "id": "TopProductsTitle", "fill": "$text-primary", "content": "Top 5 sản phẩm", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "TopProductsBody", "width": "fill_container", "padding": 16, "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "Product1", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "Product1Left", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "Product1Rank", "width": 24, "height": 24, "fill": "#F59E0B", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Product1RankT", "fill": "#FFF", "content": "1", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"} - ]}, - {"type": "text", "id": "Product1Name", "fill": "$text-primary", "content": "Cà phê sữa", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "text", "id": "Product1Count", "fill": "$text-secondary", "content": "320", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "Product2", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "Product2Left", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "Product2Rank", "width": 24, "height": 24, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Product2RankT", "fill": "$text-secondary", "content": "2", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "text", "id": "Product2Name", "fill": "$text-primary", "content": "Trà đào", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "text", "id": "Product2Count", "fill": "$text-secondary", "content": "215", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "Product3", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "Product3Left", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "Product3Rank", "width": 24, "height": 24, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Product3RankT", "fill": "$text-secondary", "content": "3", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "text", "id": "Product3Name", "fill": "$text-primary", "content": "Matcha latte", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "text", "id": "Product3Count", "fill": "$text-secondary", "content": "180", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "Product4", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "Product4Left", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "Product4Rank", "width": 24, "height": 24, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Product4RankT", "fill": "$text-secondary", "content": "4", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "text", "id": "Product4Name", "fill": "$text-primary", "content": "Bánh mì", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "text", "id": "Product4Count", "fill": "$text-secondary", "content": "156", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "Product5", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "Product5Left", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "Product5Rank", "width": 24, "height": 24, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Product5RankT", "fill": "$text-secondary", "content": "5", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "text", "id": "Product5Name", "fill": "$text-primary", "content": "Croissant", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "text", "id": "Product5Count", "fill": "$text-secondary", "content": "98", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "PaymentBreakdown", - "width": "fill_container", - "height": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 16, - "layout": "vertical", - "children": [ - {"type": "frame", "id": "PaymentHeader", "width": "fill_container", "padding": [16, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PaymentIcon", "width": 20, "height": 20, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "#3B82F6"}, - {"type": "text", "id": "PaymentTitle", "fill": "$text-primary", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "PaymentBody", "width": "fill_container", "height": "fill_container", "padding": 16, "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "PayCash", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "frame", "id": "PayCashRow", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "PayCashLabel", "fill": "$text-secondary", "content": "Cash", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "PayCashPercent", "fill": "$text-primary", "content": "45%", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "PayCashBar", "width": "fill_container", "height": 8, "fill": "$bg-interactive", "cornerRadius": 4, "children": [ - {"type": "frame", "id": "PayCashFill", "width": "45%", "height": 8, "fill": "#22C55E", "cornerRadius": 4} - ]} - ]}, - {"type": "frame", "id": "PayQR", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "frame", "id": "PayQRRow", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "PayQRLabel", "fill": "$text-secondary", "content": "QR", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "PayQRPercent", "fill": "$text-primary", "content": "35%", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "PayQRBar", "width": "fill_container", "height": 8, "fill": "$bg-interactive", "cornerRadius": 4, "children": [ - {"type": "frame", "id": "PayQRFill", "width": "35%", "height": 8, "fill": "#3B82F6", "cornerRadius": 4} - ]} - ]}, - {"type": "frame", "id": "PayCard", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "frame", "id": "PayCardRow", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "PayCardLabel", "fill": "$text-secondary", "content": "Card", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "PayCardPercent", "fill": "$text-primary", "content": "20%", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "PayCardBar", "width": "fill_container", "height": 8, "fill": "$bg-interactive", "cornerRadius": 4, "children": [ - {"type": "frame", "id": "PayCardFill", "width": "20%", "height": 8, "fill": "#8B5CF6", "cornerRadius": 4} - ]} - ]} - ]} - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "DashboardFooter", - "width": "fill_container", - "fill": "$bg-elevated", - "padding": [16, 32], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "PeriodTabs", "gap": 8, "children": [ - {"type": "frame", "id": "TabDaily", "fill": "$orange-primary", "cornerRadius": 8, "padding": [8, 16], "children": [ - {"type": "text", "id": "TabDailyText", "fill": "#FFFFFF", "content": "Daily", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "TabWeekly", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [8, 16], "children": [ - {"type": "text", "id": "TabWeeklyText", "fill": "$text-secondary", "content": "Weekly", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "TabMonthly", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [8, 16], "children": [ - {"type": "text", "id": "TabMonthlyText", "fill": "$text-secondary", "content": "Monthly", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "FooterActions", "gap": 12, "children": [ - {"type": "frame", "id": "PrintBtn", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [8, 16], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PrintIcon", "width": 16, "height": 16, "iconFontName": "printer", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "PrintText", "fill": "$text-secondary", "content": "Print", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "EmailBtn", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [8, 16], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "EmailIcon", "width": 16, "height": 16, "iconFontName": "mail", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "EmailText", "fill": "$text-secondary", "content": "Email", "fontFamily": "Roboto", "fontSize": 13, "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/reports/shift-report.pen b/pencil-design/src/pages/tPOS/pos/shared/reports/shift-report.pen deleted file mode 100644 index f10c998e..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/reports/shift-report.pen +++ /dev/null @@ -1,690 +0,0 @@ -{ - "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/staff-performance.pen b/pencil-design/src/pages/tPOS/pos/shared/reports/staff-performance.pen deleted file mode 100644 index cde89311..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/reports/staff-performance.pen +++ /dev/null @@ -1,147 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "StaffPerformanceReport", - "name": "Report/StaffPerformance", - "reusable": true, - "width": 520, - "height": 700, - "fill": "$bg-page", - "cornerRadius": 20, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "PerfHeader", - "width": "fill_container", - "fill": "$bg-elevated", - "padding": [16, 20], - "gap": 12, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "PerfIconBg", "width": 44, "height": 44, "fill": "#8B5CF615", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PerfIcon", "width": 22, "height": 22, "iconFontName": "trending-up", "iconFontFamily": "lucide", "fill": "#8B5CF6"} - ]}, - {"type": "frame", "id": "PerfTitleBox", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "PerfTitle", "fill": "$text-primary", "content": "Hiệu Suất Nhân Viên", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, - {"type": "text", "id": "PerfPeriod", "fill": "$text-tertiary", "content": "Tháng 02/2026", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "PerfFilter", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [8, 12], "gap": 6, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PerfFilterIcon", "width": 16, "height": 16, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "PerfFilterText", "fill": "$text-secondary", "content": "Tháng", "fontFamily": "Roboto", "fontSize": 13} - ]} - ] - }, - { - "type": "frame", - "id": "TopPerformers", - "width": "fill_container", - "padding": [16, 20], - "gap": 10, - "layout": "vertical", - "children": [ - {"type": "text", "id": "TopTitle", "fill": "$text-secondary", "content": "Top nhân viên xuất sắc", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "TopList", "width": "fill_container", "gap": 10, "children": [ - {"type": "frame", "id": "Top1", "width": "fill_container", "fill": {"type": "gradient", "gradientType": "linear", "rotation": 180, "colors": [{"color": "#EAB30820", "position": 0}, {"color": "#EAB30805", "position": 1}]}, "cornerRadius": 14, "padding": 14, "layout": "vertical", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "Top1Crown", "width": 24, "height": 24, "fill": "#EAB308", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Top1Rank", "fill": "#FFFFFF", "content": "1", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "Top1Avatar", "width": 44, "height": 44, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#3B82F6", "position": 0}, {"color": "#8B5CF6", "position": 1}]}, "cornerRadius": 22, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Top1Init", "fill": "#FFFFFF", "content": "NA", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} - ]}, - {"type": "text", "id": "Top1Name", "fill": "$text-primary", "content": "Nguyễn An", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "textAlign": "center"}, - {"type": "text", "id": "Top1Sales", "fill": "#EAB308", "content": "5.2M", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "Top2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 14, "layout": "vertical", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "Top2Badge", "width": 24, "height": 24, "fill": "#A1A1AA", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Top2Rank", "fill": "#FFFFFF", "content": "2", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "Top2Avatar", "width": 44, "height": 44, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#F97316", "position": 0}, {"color": "#EAB308", "position": 1}]}, "cornerRadius": 22, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Top2Init", "fill": "#FFFFFF", "content": "TH", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} - ]}, - {"type": "text", "id": "Top2Name", "fill": "$text-primary", "content": "Thị Hương", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "textAlign": "center"}, - {"type": "text", "id": "Top2Sales", "fill": "#A1A1AA", "content": "4.8M", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "Top3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 14, "layout": "vertical", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "Top3Badge", "width": 24, "height": 24, "fill": "#CD7F32", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Top3Rank", "fill": "#FFFFFF", "content": "3", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "Top3Avatar", "width": 44, "height": 44, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#10B981", "position": 0}, {"color": "#22C55E", "position": 1}]}, "cornerRadius": 22, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Top3Init", "fill": "#FFFFFF", "content": "MT", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} - ]}, - {"type": "text", "id": "Top3Name", "fill": "$text-primary", "content": "Minh Tuấn", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "textAlign": "center"}, - {"type": "text", "id": "Top3Sales", "fill": "#CD7F32", "content": "4.1M", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "StaffMetrics", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "padding": [0, 20], - "gap": 8, - "children": [ - {"type": "text", "id": "MetricsTitle", "fill": "$text-secondary", "content": "Chi tiết hiệu suất", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600", "padding": [0, 0, 6, 0]}, - {"type": "frame", "id": "Staff1Row", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": 14, "gap": 12, "alignItems": "center", "children": [ - {"type": "text", "id": "Staff1Rank", "fill": "$text-tertiary", "content": "4", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600", "width": 20, "textAlign": "center"}, - {"type": "frame", "id": "Staff1Avatar", "width": 36, "height": 36, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#EC4899", "position": 0}, {"color": "#F472B6", "position": 1}]}, "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Staff1Init", "fill": "#FFFFFF", "content": "PL", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "Staff1Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "Staff1Name", "fill": "$text-primary", "content": "Phương Linh", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "Staff1Orders", "fill": "$text-tertiary", "content": "89 đơn hàng", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "text", "id": "Staff1Sales", "fill": "#22C55E", "content": "3.6M", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "Staff2Row", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": 14, "gap": 12, "alignItems": "center", "children": [ - {"type": "text", "id": "Staff2Rank", "fill": "$text-tertiary", "content": "5", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600", "width": 20, "textAlign": "center"}, - {"type": "frame", "id": "Staff2Avatar", "width": 36, "height": 36, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#06B6D4", "position": 0}, {"color": "#22D3EE", "position": 1}]}, "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Staff2Init", "fill": "#FFFFFF", "content": "HN", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "Staff2Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "Staff2Name", "fill": "$text-primary", "content": "Hoàng Nam", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "Staff2Orders", "fill": "$text-tertiary", "content": "76 đơn hàng", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "text", "id": "Staff2Sales", "fill": "#22C55E", "content": "2.9M", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"} - ]} - ] - }, - { - "type": "frame", - "id": "PerfFooter", - "width": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "gap": 12, - "padding": [16, 20], - "children": [ - {"type": "frame", "id": "ExportBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ExportIcon", "width": 18, "height": 18, "iconFontName": "download", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "ExportText", "fill": "$text-secondary", "content": "Xuất báo cáo", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "CommissionBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CommissionIcon", "width": 18, "height": 18, "iconFontName": "coins", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "CommissionText", "fill": "#FFFFFF", "content": "Tính hoa hồng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/shared/reports/tax-report.pen b/pencil-design/src/pages/tPOS/pos/shared/reports/tax-report.pen deleted file mode 100644 index c9c75741..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/reports/tax-report.pen +++ /dev/null @@ -1,504 +0,0 @@ -{ - "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 deleted file mode 100644 index d24ba3d6..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/reports/top-sellers.pen +++ /dev/null @@ -1,137 +0,0 @@ -{ - "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/accessibility.pen b/pencil-design/src/pages/tPOS/pos/shared/screens/accessibility.pen deleted file mode 100644 index a245eba5..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/screens/accessibility.pen +++ /dev/null @@ -1,585 +0,0 @@ -{ - "version": "2.7", - "children": [ - { - "type": "frame", - "id": "AccessibilityScreen", - "x": 0, - "y": 0, - "name": "Screen/Accessibility", - "reusable": true, - "clip": true, - "width": 420, - "height": 584, - "fill": "$bg-elevated", - "cornerRadius": 24, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "AccessibilityHeader", - "width": "fill_container", - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "padding": [ - 16, - 20 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "AccessibilityHeaderLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "AccessibilityIconBg", - "width": 40, - "height": 40, - "fill": "#22C55E20", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "AccessibilityIcon", - "width": 20, - "height": 20, - "iconFontName": "accessibility", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - }, - { - "type": "text", - "id": "AccessibilityTitle", - "fill": "$text-primary", - "content": "Trợ năng", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "AccessibilityCloseBtn", - "width": 36, - "height": 36, - "fill": "$bg-interactive", - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "AccessibilityCloseIcon", - "width": 18, - "height": 18, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "AccessibilityContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "gap": 16, - "padding": 20, - "children": [ - { - "type": "frame", - "id": "AccessibilitySection1", - "width": "fill_container", - "layout": "vertical", - "gap": 10, - "children": [ - { - "type": "text", - "id": "AccessibilitySection1Label", - "fill": "$text-secondary", - "content": "Hiển thị", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "AccessibilityItem1", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 14, - "padding": 14, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "AccessibilityItem1Left", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "AccessibilityItem1Icon", - "width": 20, - "height": 20, - "iconFontName": "a-large-small", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "AccessibilityItem1Text", - "fill": "$text-primary", - "content": "Cỡ chữ", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "AccessibilityItem1Control", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "FontSizeMinus", - "width": 32, - "height": 32, - "fill": "$bg-interactive", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "FontSizeMinusText", - "fill": "$text-secondary", - "content": "A", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "FontSizeValue", - "fill": "$orange-primary", - "content": "110%", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "FontSizePlus", - "width": 32, - "height": 32, - "fill": "$bg-interactive", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "FontSizePlusText", - "fill": "$text-primary", - "content": "A", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "AccessibilityItem2", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 14, - "padding": 14, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "AccessibilityItem2Left", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "AccessibilityItem2Icon", - "width": 20, - "height": 20, - "iconFontName": "contrast", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "AccessibilityItem2Text", - "fill": "$text-primary", - "content": "Độ tương phản cao", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "AccessibilityItem2Toggle", - "width": 48, - "height": 28, - "fill": "#22C55E", - "cornerRadius": 14, - "padding": 2, - "justifyContent": "end", - "children": [ - { - "type": "frame", - "id": "AccessibilityItem2ToggleKnob", - "width": 24, - "height": 24, - "fill": "$text-primary", - "cornerRadius": 12 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "AccessibilitySection2", - "width": "fill_container", - "layout": "vertical", - "gap": 10, - "children": [ - { - "type": "text", - "id": "AccessibilitySection2Label", - "fill": "$text-secondary", - "content": "Âm thanh & Rung", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "AccessibilityItem3", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 14, - "padding": 14, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "AccessibilityItem3Left", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "AccessibilityItem3Icon", - "width": 20, - "height": 20, - "iconFontName": "volume-2", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "AccessibilityItem3Text", - "fill": "$text-primary", - "content": "Âm thanh thao tác", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "AccessibilityItem3Toggle", - "width": 48, - "height": 28, - "fill": "#22C55E", - "cornerRadius": 14, - "padding": 2, - "justifyContent": "end", - "children": [ - { - "type": "frame", - "id": "AccessibilityItem3ToggleKnob", - "width": 24, - "height": 24, - "fill": "$text-primary", - "cornerRadius": 12 - } - ] - } - ] - }, - { - "type": "frame", - "id": "AccessibilityItem4", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 14, - "padding": 14, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "AccessibilityItem4Left", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "AccessibilityItem4Icon", - "width": 20, - "height": 20, - "iconFontName": "vibrate", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "AccessibilityItem4Text", - "fill": "$text-primary", - "content": "Rung khi chạm", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "AccessibilityItem4Toggle", - "width": 48, - "height": 28, - "fill": "$bg-interactive", - "cornerRadius": 14, - "padding": 2, - "children": [ - { - "type": "frame", - "id": "AccessibilityItem4ToggleKnob", - "width": 24, - "height": 24, - "fill": "$text-tertiary", - "cornerRadius": 12 - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "AccessibilitySection3", - "width": "fill_container", - "layout": "vertical", - "gap": 10, - "children": [ - { - "type": "text", - "id": "AccessibilitySection3Label", - "fill": "$text-secondary", - "content": "Thao tác", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "AccessibilityItem5", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 14, - "padding": 14, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "AccessibilityItem5Left", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "AccessibilityItem5Icon", - "width": 20, - "height": 20, - "iconFontName": "mouse-pointer-click", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "AccessibilityItem5Text", - "fill": "$text-primary", - "content": "Vùng chạm lớn hơn", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "AccessibilityItem5Toggle", - "width": 48, - "height": 28, - "fill": "#22C55E", - "cornerRadius": 14, - "padding": 2, - "justifyContent": "end", - "children": [ - { - "type": "frame", - "id": "AccessibilityItem5ToggleKnob", - "width": 24, - "height": 24, - "fill": "$text-primary", - "cornerRadius": 12 - } - ] - } - ] - }, - { - "type": "frame", - "id": "AccessibilityItem6", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 14, - "padding": 14, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "AccessibilityItem6Left", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "AccessibilityItem6Icon", - "width": 20, - "height": 20, - "iconFontName": "timer", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "AccessibilityItem6Text", - "fill": "$text-primary", - "content": "Thời gian xác nhận dài hơn", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "AccessibilityItem6Toggle", - "width": 48, - "height": 28, - "fill": "$bg-interactive", - "cornerRadius": 14, - "padding": 2, - "children": [ - { - "type": "frame", - "id": "AccessibilityItem6ToggleKnob", - "width": 24, - "height": 24, - "fill": "$text-tertiary", - "cornerRadius": 12 - } - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-elevated": { - "type": "color", - "value": "#1A1A1D" - }, - "bg-interactive": { - "type": "color", - "value": "#2A2A2E" - }, - "bg-page": { - "type": "color", - "value": "#0A0A0B" - }, - "border-default": { - "type": "color", - "value": "#2A2A2E" - }, - "border-subtle": { - "type": "color", - "value": "#1F1F23" - }, - "orange-primary": { - "type": "color", - "value": "#FF5C00" - }, - "text-primary": { - "type": "color", - "value": "#FFFFFF" - }, - "text-secondary": { - "type": "color", - "value": "#ADADB0" - }, - "text-tertiary": { - "type": "color", - "value": "#8B8B90" - } - } -} \ No newline at end of file diff --git a/pencil-design/src/pages/tPOS/pos/shared/screens/backup-restore.pen b/pencil-design/src/pages/tPOS/pos/shared/screens/backup-restore.pen deleted file mode 100644 index 775e8b47..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/screens/backup-restore.pen +++ /dev/null @@ -1,163 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "BackupRestoreScreen", - "name": "Screen/BackupRestore", - "reusable": true, - "width": 480, - "height": 680, - "fill": "$bg-page", - "cornerRadius": 20, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "BackupHeader", - "width": "fill_container", - "fill": "$bg-elevated", - "padding": [16, 20], - "gap": 12, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "BackupIconBg", "width": 44, "height": 44, "fill": "#22C55E15", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "BackupIcon", "width": 22, "height": 22, "iconFontName": "cloud", "iconFontFamily": "lucide", "fill": "#22C55E"} - ]}, - {"type": "frame", "id": "BackupTitleBox", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "BackupTitle", "fill": "$text-primary", "content": "Sao Lưu & Khôi Phục", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, - {"type": "text", "id": "BackupSubtitle", "fill": "$text-tertiary", "content": "Quản lý dữ liệu an toàn", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "BackupClose", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "BackupCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "BackupStatus", - "width": "fill_container", - "fill": "#22C55E15", - "padding": [16, 20], - "gap": 12, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "StatusIcon", "width": 48, "height": 48, "fill": "#22C55E", "cornerRadius": 24, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "StatusCheckIcon", "width": 24, "height": 24, "iconFontName": "cloud-check", "iconFontFamily": "lucide", "fill": "#FFFFFF"} - ]}, - {"type": "frame", "id": "StatusInfo", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "StatusTitle", "fill": "#22C55E", "content": "Đã đồng bộ", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, - {"type": "text", "id": "StatusTime", "fill": "$text-tertiary", "content": "Lần cuối: 06/02/2026 - 20:45", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "SyncBtn", "fill": "$bg-page", "cornerRadius": 10, "padding": [10, 14], "gap": 6, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SyncIcon", "width": 16, "height": 16, "iconFontName": "refresh-cw", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "SyncText", "fill": "$text-secondary", "content": "Đồng bộ", "fontFamily": "Roboto", "fontSize": 13} - ]} - ] - }, - { - "type": "frame", - "id": "BackupContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "padding": [16, 20], - "gap": 16, - "children": [ - {"type": "frame", "id": "BackupSection", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ - {"type": "text", "id": "BackupSectionTitle", "fill": "$text-secondary", "content": "Sao lưu dữ liệu", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "BackupCard", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "BackupIconCloud", "width": 40, "height": 40, "fill": "#3B82F620", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "BackupCloudIcon", "width": 20, "height": 20, "iconFontName": "cloud-upload", "iconFontFamily": "lucide", "fill": "#3B82F6"} - ]}, - {"type": "frame", "id": "BackupCardInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "BackupCardTitle", "fill": "$text-primary", "content": "Sao lưu lên Cloud", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "BackupCardDesc", "fill": "$text-tertiary", "content": "Tự động mỗi 6 giờ", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "BackupNowBtn", "fill": "$orange-primary", "cornerRadius": 8, "padding": [8, 12], "children": [ - {"type": "text", "id": "BackupNowText", "fill": "#FFFFFF", "content": "Backup", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "LocalBackupCard", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "LocalIconBox", "width": 40, "height": 40, "fill": "#8B5CF620", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LocalIcon", "width": 20, "height": 20, "iconFontName": "hard-drive", "iconFontFamily": "lucide", "fill": "#8B5CF6"} - ]}, - {"type": "frame", "id": "LocalCardInfo", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "LocalCardTitle", "fill": "$text-primary", "content": "Lưu trữ ngoại tuyến", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "LocalCardDesc", "fill": "$text-tertiary", "content": "Tải về thiết bị", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "LocalExportBtn", "fill": "$bg-interactive", "cornerRadius": 8, "padding": [8, 12], "children": [ - {"type": "text", "id": "LocalExportText", "fill": "$text-secondary", "content": "Tải về", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]} - ]} - ]}, - {"type": "frame", "id": "RestoreSection", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ - {"type": "text", "id": "RestoreSectionTitle", "fill": "$text-secondary", "content": "Phiên bản sao lưu", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "BackupList", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "frame", "id": "Backup1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": 12, "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "Backup1Icon", "width": 36, "height": 36, "fill": "#22C55E20", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Backup1IconI", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"} - ]}, - {"type": "frame", "id": "Backup1Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "Backup1Time", "fill": "$text-primary", "content": "06/02/2026 - 20:45", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "text", "id": "Backup1Size", "fill": "$text-tertiary", "content": "45.2 MB • Cloud", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "text", "id": "Backup1Label", "fill": "#22C55E", "content": "Mới nhất", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "Backup2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": 12, "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "Backup2Icon", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Backup2IconI", "width": 18, "height": 18, "iconFontName": "cloud", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]}, - {"type": "frame", "id": "Backup2Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "Backup2Time", "fill": "$text-primary", "content": "06/02/2026 - 14:30", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "text", "id": "Backup2Size", "fill": "$text-tertiary", "content": "44.8 MB • Cloud", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "frame", "id": "Backup2Action", "fill": "$bg-interactive", "cornerRadius": 6, "padding": [6, 10], "children": [ - {"type": "text", "id": "Backup2ActionText", "fill": "$text-secondary", "content": "Khôi phục", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "Backup3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": 12, "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "Backup3Icon", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Backup3IconI", "width": 18, "height": 18, "iconFontName": "cloud", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]}, - {"type": "frame", "id": "Backup3Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "Backup3Time", "fill": "$text-primary", "content": "05/02/2026 - 20:45", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "text", "id": "Backup3Size", "fill": "$text-tertiary", "content": "43.5 MB • Cloud", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "frame", "id": "Backup3Action", "fill": "$bg-interactive", "cornerRadius": 6, "padding": [6, 10], "children": [ - {"type": "text", "id": "Backup3ActionText", "fill": "$text-secondary", "content": "Khôi phục", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "BackupFooter", - "width": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "padding": [12, 20], - "gap": 8, - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "FooterWarnIcon", "width": 16, "height": 16, "iconFontName": "shield-check", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "FooterText", "fill": "$text-tertiary", "content": "Dữ liệu được mã hóa AES-256", "fontFamily": "Roboto", "fontSize": 12, "width": "fill_container"} - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/shared/screens/biometric-setup.pen b/pencil-design/src/pages/tPOS/pos/shared/screens/biometric-setup.pen deleted file mode 100644 index 97048be7..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/screens/biometric-setup.pen +++ /dev/null @@ -1,536 +0,0 @@ -{ - "version": "2.7", - "children": [ - { - "type": "frame", - "id": "BiometricSetupScreen", - "x": 0, - "y": 0, - "name": "Screen/BiometricSetup", - "reusable": true, - "width": 480, - "height": 700, - "fill": "$bg-page", - "cornerRadius": 20, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "BioHeader", - "width": "fill_container", - "fill": "$bg-elevated", - "gap": 12, - "padding": [ - 16, - 20 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "BioIconBg", - "width": 44, - "height": 44, - "fill": "#8B5CF615", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "BioIcon", - "width": 22, - "height": 22, - "iconFontName": "fingerprint", - "iconFontFamily": "lucide", - "fill": "#8B5CF6" - } - ] - }, - { - "type": "frame", - "id": "BioTitleBox", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "BioTitle", - "fill": "$text-primary", - "content": "Sinh Trắc Học", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "700" - }, - { - "type": "text", - "id": "BioSubtitle", - "fill": "$text-tertiary", - "content": "Đăng nhập nhanh & bảo mật", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "BioClose", - "width": 36, - "height": 36, - "fill": "$bg-interactive", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "BioCloseIcon", - "width": 18, - "height": 18, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "BioContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "gap": 20, - "padding": [ - 20, - 24 - ], - "children": [ - { - "type": "frame", - "id": "FingerprintSection", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 16, - "layout": "vertical", - "gap": 16, - "padding": 20, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "FingerprintVisual", - "width": 100, - "height": 100, - "fill": { - "type": "gradient", - "gradientType": "radial", - "enabled": true, - "rotation": 0, - "size": { - "width": 1, - "height": 1 - }, - "colors": [ - { - "color": "#8B5CF630", - "position": 0 - }, - { - "color": "#8B5CF610", - "position": 1 - } - ] - }, - "cornerRadius": 50, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "FingerprintInner", - "width": 70, - "height": 70, - "fill": "#8B5CF620", - "cornerRadius": 35, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "FingerprintIcon", - "width": 40, - "height": 40, - "iconFontName": "fingerprint", - "iconFontFamily": "lucide", - "fill": "#8B5CF6" - } - ] - } - ] - }, - { - "type": "frame", - "id": "FingerprintInfo", - "layout": "vertical", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "FingerprintTitle", - "fill": "$text-primary", - "content": "Vân tay", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - }, - { - "type": "text", - "id": "FingerprintStatus", - "fill": "#22C55E", - "content": "Đã thiết lập (2 vân tay)", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "FingerprintToggle", - "width": 56, - "height": 30, - "fill": "#22C55E", - "cornerRadius": 15, - "padding": 3, - "children": [ - { - "type": "frame", - "id": "FingerprintKnob", - "width": 24, - "height": 24, - "fill": "#FFFFFF", - "cornerRadius": 12 - } - ] - } - ] - }, - { - "type": "frame", - "id": "FaceIDSection", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 16, - "gap": 14, - "padding": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "FaceIDVisual", - "width": 52, - "height": 52, - "fill": "#3B82F620", - "cornerRadius": 26, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "FaceIDIcon", - "width": 28, - "height": 28, - "iconFontName": "scan-face", - "iconFontFamily": "lucide", - "fill": "#3B82F6" - } - ] - }, - { - "type": "frame", - "id": "FaceIDInfo", - "width": "fill_container", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "FaceIDTitle", - "fill": "$text-primary", - "content": "Face ID", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - }, - { - "type": "text", - "id": "FaceIDStatus", - "fill": "$text-tertiary", - "content": "Chưa thiết lập", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "FaceIDToggle", - "width": 56, - "height": 30, - "fill": "$bg-interactive", - "cornerRadius": 15, - "padding": 3, - "children": [ - { - "type": "frame", - "id": "FaceIDKnob", - "width": 24, - "height": 24, - "fill": "$text-tertiary", - "cornerRadius": 12 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SecurityNote", - "width": "fill_container", - "fill": "#3B82F615", - "cornerRadius": 12, - "gap": 12, - "padding": 14, - "children": [ - { - "type": "icon_font", - "id": "SecurityNoteIcon", - "width": 20, - "height": 20, - "iconFontName": "shield-check", - "iconFontFamily": "lucide", - "fill": "#3B82F6" - }, - { - "type": "frame", - "id": "SecurityNoteInfo", - "width": "fill_container", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "SecurityNoteTitle", - "fill": "#3B82F6", - "content": "Bảo mật nâng cao", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "SecurityNoteDesc", - "fill": "$text-tertiary", - "content": "Dữ liệu sinh trắc học được lưu trữ an toàn trên thiết bị và không bao giờ được gửi lên server.", - "lineHeight": 1.4, - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "OptionsSection", - "width": "fill_container", - "layout": "vertical", - "gap": 10, - "children": [ - { - "type": "frame", - "id": "QuickAuthOption", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 12, - "gap": 12, - "padding": 14, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "QuickAuthIcon", - "width": 20, - "height": 20, - "iconFontName": "zap", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "frame", - "id": "QuickAuthInfo", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "QuickAuthTitle", - "fill": "$text-primary", - "content": "Mở khóa nhanh", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "text", - "id": "QuickAuthDesc", - "fill": "$text-tertiary", - "content": "Bỏ qua màn hình khóa", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "QuickAuthToggle", - "width": 44, - "height": 24, - "fill": "#22C55E", - "cornerRadius": 12, - "padding": 2, - "children": [ - { - "type": "frame", - "id": "QuickAuthKnob", - "width": 20, - "height": 20, - "fill": "#FFFFFF", - "cornerRadius": 10 - } - ] - } - ] - }, - { - "type": "frame", - "id": "RequireAuthOption", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 12, - "gap": 12, - "padding": 14, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "RequireAuthIcon", - "width": 20, - "height": 20, - "iconFontName": "lock", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "frame", - "id": "RequireAuthInfo", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "RequireAuthTitle", - "fill": "$text-primary", - "content": "Xác thực thanh toán", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "text", - "id": "RequireAuthDesc", - "fill": "$text-tertiary", - "content": "Yêu cầu khi thanh toán", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "RequireAuthToggle", - "width": 44, - "height": 24, - "fill": "$bg-interactive", - "cornerRadius": 12, - "padding": 2, - "children": [ - { - "type": "frame", - "id": "RequireAuthKnob", - "width": 20, - "height": 20, - "fill": "$text-tertiary", - "cornerRadius": 10 - } - ] - } - ] - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-elevated": { - "type": "color", - "value": "#1A1A1D" - }, - "bg-interactive": { - "type": "color", - "value": "#2A2A2E" - }, - "bg-page": { - "type": "color", - "value": "#0A0A0B" - }, - "border-default": { - "type": "color", - "value": "#2A2A2E" - }, - "border-subtle": { - "type": "color", - "value": "#1F1F23" - }, - "orange-primary": { - "type": "color", - "value": "#FF5C00" - }, - "text-primary": { - "type": "color", - "value": "#FFFFFF" - }, - "text-secondary": { - "type": "color", - "value": "#ADADB0" - }, - "text-tertiary": { - "type": "color", - "value": "#8B8B90" - } - } -} \ No newline at end of file diff --git a/pencil-design/src/pages/tPOS/pos/shared/screens/cash-drawer.pen b/pencil-design/src/pages/tPOS/pos/shared/screens/cash-drawer.pen deleted file mode 100644 index 00170704..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/screens/cash-drawer.pen +++ /dev/null @@ -1,130 +0,0 @@ -{ - "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 deleted file mode 100644 index e0353d09..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/screens/clock-in-out.pen +++ /dev/null @@ -1,104 +0,0 @@ -{ - "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/commission-setup.pen b/pencil-design/src/pages/tPOS/pos/shared/screens/commission-setup.pen deleted file mode 100644 index 5883231e..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/screens/commission-setup.pen +++ /dev/null @@ -1,135 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "CommissionSetupScreen", - "name": "Screen/CommissionSetup", - "reusable": true, - "width": 480, - "height": 640, - "fill": "$bg-page", - "cornerRadius": 20, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "CommHeader", - "width": "fill_container", - "fill": "$bg-elevated", - "padding": [16, 20], - "gap": 12, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "CommIconBg", "width": 44, "height": 44, "fill": "#22C55E15", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CommIcon", "width": 22, "height": 22, "iconFontName": "percent", "iconFontFamily": "lucide", "fill": "#22C55E"} - ]}, - {"type": "frame", "id": "CommTitleBox", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "CommTitle", "fill": "$text-primary", "content": "Cấu Hình Hoa Hồng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, - {"type": "text", "id": "CommSubtitle", "fill": "$text-tertiary", "content": "Thiết lập tỷ lệ hoa hồng", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "CommClose", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CommCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "CommContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "padding": [16, 20], - "gap": 14, - "children": [ - {"type": "frame", "id": "RuleSection", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ - {"type": "text", "id": "RuleTitle", "fill": "$text-secondary", "content": "Quy tắc hoa hồng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "Rule1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": 14, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "Rule1Icon", "width": 40, "height": 40, "fill": "#3B82F620", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Rule1IconI", "width": 20, "height": 20, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "#3B82F6"} - ]}, - {"type": "frame", "id": "Rule1Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "Rule1Name", "fill": "$text-primary", "content": "Đồ uống", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "Rule1Desc", "fill": "$text-tertiary", "content": "Hoa hồng theo doanh số", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "Rule1Value", "fill": "#22C55E20", "cornerRadius": 8, "padding": [8, 12], "children": [ - {"type": "text", "id": "Rule1Percent", "fill": "#22C55E", "content": "3%", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"} - ]} - ]}, - {"type": "frame", "id": "Rule2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": 14, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "Rule2Icon", "width": 40, "height": 40, "fill": "#F9731620", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Rule2IconI", "width": 20, "height": 20, "iconFontName": "utensils", "iconFontFamily": "lucide", "fill": "#F97316"} - ]}, - {"type": "frame", "id": "Rule2Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "Rule2Name", "fill": "$text-primary", "content": "Đồ ăn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "Rule2Desc", "fill": "$text-tertiary", "content": "Hoa hồng theo doanh số", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "Rule2Value", "fill": "#22C55E20", "cornerRadius": 8, "padding": [8, 12], "children": [ - {"type": "text", "id": "Rule2Percent", "fill": "#22C55E", "content": "2%", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"} - ]} - ]}, - {"type": "frame", "id": "Rule3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": 14, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "Rule3Icon", "width": 40, "height": 40, "fill": "#EC489920", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Rule3IconI", "width": 20, "height": 20, "iconFontName": "target", "iconFontFamily": "lucide", "fill": "#EC4899"} - ]}, - {"type": "frame", "id": "Rule3Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "Rule3Name", "fill": "$text-primary", "content": "Bonus đạt target", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "Rule3Desc", "fill": "$text-tertiary", "content": "Thưởng khi đạt doanh số 5M/tháng", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "Rule3Value", "fill": "#EC489920", "cornerRadius": 8, "padding": [8, 12], "children": [ - {"type": "text", "id": "Rule3Amount", "fill": "#EC4899", "content": "500K", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"} - ]} - ]} - ]}, - {"type": "frame", "id": "AddRuleBtn", "width": "fill_container", "height": 48, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$border-default"}, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "AddRuleIcon", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "text", "id": "AddRuleText", "fill": "$orange-primary", "content": "Thêm quy tắc mới", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "PayoutSection", "width": "fill_container", "fill": "#22C55E15", "cornerRadius": 14, "padding": 16, "layout": "vertical", "gap": 12, "children": [ - {"type": "text", "id": "PayoutTitle", "fill": "$text-secondary", "content": "Tổng hoa hồng tháng này", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "frame", "id": "PayoutDetails", "width": "fill_container", "gap": 16, "children": [ - {"type": "frame", "id": "PayoutAmount", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "PayoutValue", "fill": "#22C55E", "content": "2,450,000đ", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"}, - {"type": "text", "id": "PayoutLabel", "fill": "$text-tertiary", "content": "Cho 8 nhân viên", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "PayoutBtn", "fill": "#22C55E", "cornerRadius": 10, "padding": [10, 16], "gap": 6, "alignItems": "center", "alignSelf": "center", "children": [ - {"type": "icon_font", "id": "PayoutBtnIcon", "width": 16, "height": 16, "iconFontName": "banknote", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "PayoutBtnText", "fill": "#FFFFFF", "content": "Chi trả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "CommFooter", - "width": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "gap": 12, - "padding": [16, 20], - "children": [ - {"type": "frame", "id": "ResetBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "ResetText", "fill": "$text-secondary", "content": "Đặt lại", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SaveCommBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SaveCommIcon", "width": 18, "height": 18, "iconFontName": "save", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "SaveCommText", "fill": "#FFFFFF", "content": "Lưu cấu hình", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/shared/screens/customer-group.pen b/pencil-design/src/pages/tPOS/pos/shared/screens/customer-group.pen deleted file mode 100644 index 0d425ce8..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/screens/customer-group.pen +++ /dev/null @@ -1,133 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "CustomerGroupScreen", - "name": "Screen/CustomerGroup", - "reusable": true, - "width": 520, - "height": 680, - "fill": "$bg-page", - "cornerRadius": 20, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "GroupHeader", - "width": "fill_container", - "fill": "$bg-elevated", - "padding": [16, 20], - "gap": 12, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "GroupIconBg", "width": 44, "height": 44, "fill": "#8B5CF615", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "GroupIcon", "width": 22, "height": 22, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "#8B5CF6"} - ]}, - {"type": "frame", "id": "GroupTitleBox", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "GroupTitle", "fill": "$text-primary", "content": "Nhóm Khách Hàng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, - {"type": "text", "id": "GroupSubtitle", "fill": "$text-tertiary", "content": "Quản lý phân loại khách hàng", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "AddGroupBtn", "width": 36, "height": 36, "fill": "$orange-primary", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "AddGroupIcon", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"} - ]} - ] - }, - { - "type": "frame", - "id": "GroupSearch", - "width": "fill_container", - "padding": [12, 20], - "children": [ - {"type": "frame", "id": "SearchBox", "width": "fill_container", "height": 44, "fill": "$bg-elevated", "cornerRadius": 12, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SearchIcon", "width": 18, "height": 18, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "SearchPlaceholder", "fill": "$text-tertiary", "content": "Tìm nhóm khách hàng...", "fontFamily": "Roboto", "fontSize": 14} - ]} - ] - }, - { - "type": "frame", - "id": "GroupList", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "padding": [0, 20], - "gap": 10, - "children": [ - {"type": "frame", "id": "Group1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 16, "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "Group1Header", "width": "fill_container", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "Group1Badge", "width": 44, "height": 44, "fill": "#EAB30815", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Group1Icon", "width": 22, "height": 22, "iconFontName": "crown", "iconFontFamily": "lucide", "fill": "#EAB308"} - ]}, - {"type": "frame", "id": "Group1Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "Group1Name", "fill": "#EAB308", "content": "VIP Gold", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "Group1Count", "fill": "$text-tertiary", "content": "48 khách hàng", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "Group1More", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Group1MoreIcon", "width": 16, "height": 16, "iconFontName": "more-vertical", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ]}, - {"type": "frame", "id": "Group1Benefits", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 10, "padding": 12, "gap": 8, "layout": "vertical", "children": [ - {"type": "frame", "id": "Benefit1", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Benefit1Icon", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "Benefit1Text", "fill": "$text-secondary", "content": "Giảm 15% tất cả sản phẩm", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "Benefit2", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Benefit2Icon", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "Benefit2Text", "fill": "$text-secondary", "content": "Tích 2x điểm thưởng", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]} - ]}, - {"type": "frame", "id": "Group2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 16, "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "Group2Header", "width": "fill_container", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "Group2Badge", "width": 44, "height": 44, "fill": "#A1A1AA15", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Group2Icon", "width": 22, "height": 22, "iconFontName": "award", "iconFontFamily": "lucide", "fill": "#A1A1AA"} - ]}, - {"type": "frame", "id": "Group2Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "Group2Name", "fill": "#A1A1AA", "content": "VIP Silver", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "Group2Count", "fill": "$text-tertiary", "content": "124 khách hàng", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "Group2More", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Group2MoreIcon", "width": 16, "height": 16, "iconFontName": "more-vertical", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ]}, - {"type": "frame", "id": "Group2Benefits", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 10, "padding": 12, "gap": 8, "layout": "vertical", "children": [ - {"type": "frame", "id": "G2Benefit1", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "G2Benefit1Icon", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "G2Benefit1Text", "fill": "$text-secondary", "content": "Giảm 10% tất cả sản phẩm", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "G2Benefit2", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "G2Benefit2Icon", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "G2Benefit2Text", "fill": "$text-secondary", "content": "Tích 1.5x điểm thưởng", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]} - ]}, - {"type": "frame", "id": "Group3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 16, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "Group3Badge", "width": 44, "height": 44, "fill": "#3B82F615", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Group3Icon", "width": 22, "height": 22, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "#3B82F6"} - ]}, - {"type": "frame", "id": "Group3Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "Group3Name", "fill": "#3B82F6", "content": "Khách thường", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "text", "id": "Group3Count", "fill": "$text-tertiary", "content": "892 khách hàng", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "Group3More", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Group3MoreIcon", "width": 16, "height": 16, "iconFontName": "more-vertical", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ]} - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/shared/screens/device-setup.pen b/pencil-design/src/pages/tPOS/pos/shared/screens/device-setup.pen deleted file mode 100644 index 284d3b55..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/screens/device-setup.pen +++ /dev/null @@ -1,773 +0,0 @@ -{ - "version": "2.7", - "children": [ - { - "type": "frame", - "id": "DeviceSetupScreen", - "x": 0, - "y": 0, - "name": "Screen/DeviceSetup", - "reusable": true, - "clip": true, - "width": 480, - "height": 831, - "fill": "$bg-elevated", - "cornerRadius": 24, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "DeviceSetupHeader", - "width": "fill_container", - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "padding": [ - 16, - 20 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "DeviceSetupHeaderLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "DeviceSetupIconBg", - "width": 40, - "height": 40, - "fill": "#8B5CF620", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "DeviceSetupIcon", - "width": 20, - "height": 20, - "iconFontName": "settings", - "iconFontFamily": "lucide", - "fill": "#8B5CF6" - } - ] - }, - { - "type": "text", - "id": "DeviceSetupTitle", - "fill": "$text-primary", - "content": "Cài đặt thiết bị", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "DeviceSetupCloseBtn", - "width": 36, - "height": 36, - "fill": "$bg-interactive", - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "DeviceSetupCloseIcon", - "width": 18, - "height": 18, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "DeviceSetupContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "gap": 16, - "padding": 20, - "children": [ - { - "type": "frame", - "id": "PrinterSection", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "layout": "vertical", - "gap": 14, - "padding": 16, - "children": [ - { - "type": "frame", - "id": "PrinterHeader", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PrinterHeaderLeft", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PrinterHeaderIcon", - "width": 20, - "height": 20, - "iconFontName": "printer", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "PrinterHeaderText", - "fill": "$text-primary", - "content": "Máy in", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "PrinterAddBtn", - "fill": "$bg-interactive", - "cornerRadius": 8, - "gap": 6, - "padding": [ - 6, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PrinterAddIcon", - "width": 14, - "height": 14, - "iconFontName": "plus", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PrinterAddText", - "fill": "$text-secondary", - "content": "Thêm", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PrinterItem1", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 12, - "gap": 12, - "padding": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PrinterItem1Icon", - "width": 44, - "height": 44, - "fill": "#22C55E20", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PrinterItem1IconInner", - "width": 22, - "height": 22, - "iconFontName": "printer", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - }, - { - "type": "frame", - "id": "PrinterItem1Info", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "PrinterItem1Name", - "fill": "$text-primary", - "content": "EPSON TM-T82III", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "text", - "id": "PrinterItem1Status", - "fill": "#22C55E", - "content": "Đã kết nối • Hóa đơn", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "icon_font", - "id": "PrinterItem1Arrow", - "width": 18, - "height": 18, - "iconFontName": "chevron-right", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - }, - { - "type": "frame", - "id": "PrinterItem2", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 12, - "gap": 12, - "padding": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PrinterItem2Icon", - "width": 44, - "height": 44, - "fill": "#22C55E20", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PrinterItem2IconInner", - "width": 22, - "height": 22, - "iconFontName": "printer", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - }, - { - "type": "frame", - "id": "PrinterItem2Info", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "PrinterItem2Name", - "fill": "$text-primary", - "content": "Star TSP143III", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "text", - "id": "PrinterItem2Status", - "fill": "#22C55E", - "content": "Đã kết nối • Bếp", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "icon_font", - "id": "PrinterItem2Arrow", - "width": 18, - "height": 18, - "iconFontName": "chevron-right", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "ScannerSection", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "layout": "vertical", - "gap": 14, - "padding": 16, - "children": [ - { - "type": "frame", - "id": "ScannerHeader", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ScannerHeaderLeft", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ScannerHeaderIcon", - "width": 20, - "height": 20, - "iconFontName": "scan-barcode", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "ScannerHeaderText", - "fill": "$text-primary", - "content": "Máy quét mã vạch", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "ScannerAddBtn", - "fill": "$bg-interactive", - "cornerRadius": 8, - "gap": 6, - "padding": [ - 6, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ScannerAddIcon", - "width": 14, - "height": 14, - "iconFontName": "plus", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "ScannerAddText", - "fill": "$text-secondary", - "content": "Thêm", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "ScannerItem1", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 12, - "gap": 12, - "padding": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ScannerItem1Icon", - "width": 44, - "height": 44, - "fill": "#3B82F620", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ScannerItem1IconInner", - "width": 22, - "height": 22, - "iconFontName": "scan-barcode", - "iconFontFamily": "lucide", - "fill": "#3B82F6" - } - ] - }, - { - "type": "frame", - "id": "ScannerItem1Info", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "ScannerItem1Name", - "fill": "$text-primary", - "content": "Honeywell Voyager 1250G", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "text", - "id": "ScannerItem1Status", - "fill": "#22C55E", - "content": "Đã kết nối • USB", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "icon_font", - "id": "ScannerItem1Arrow", - "width": 18, - "height": 18, - "iconFontName": "chevron-right", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "CashDrawerSection", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "layout": "vertical", - "gap": 14, - "padding": 16, - "children": [ - { - "type": "frame", - "id": "CashDrawerHeader", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CashDrawerHeaderLeft", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CashDrawerHeaderIcon", - "width": 20, - "height": 20, - "iconFontName": "wallet", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "CashDrawerHeaderText", - "fill": "$text-primary", - "content": "Ngăn kéo tiền", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "CashDrawerTestBtn", - "fill": "$bg-interactive", - "cornerRadius": 8, - "gap": 6, - "padding": [ - 6, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CashDrawerTestIcon", - "width": 14, - "height": 14, - "iconFontName": "play", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "CashDrawerTestText", - "fill": "$text-secondary", - "content": "Test", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "CashDrawerItem1", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 12, - "gap": 12, - "padding": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CashDrawerItem1Icon", - "width": 44, - "height": 44, - "fill": "#F59E0B20", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CashDrawerItem1IconInner", - "width": 22, - "height": 22, - "iconFontName": "wallet", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - } - ] - }, - { - "type": "frame", - "id": "CashDrawerItem1Info", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "CashDrawerItem1Name", - "fill": "$text-primary", - "content": "APG Vasario Series", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "text", - "id": "CashDrawerItem1Status", - "fill": "#22C55E", - "content": "Đã kết nối qua máy in", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "icon_font", - "id": "CashDrawerItem1Arrow", - "width": 18, - "height": 18, - "iconFontName": "chevron-right", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "CardReaderSection", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "layout": "vertical", - "gap": 14, - "padding": 16, - "children": [ - { - "type": "frame", - "id": "CardReaderHeader", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CardReaderHeaderLeft", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CardReaderHeaderIcon", - "width": 20, - "height": 20, - "iconFontName": "credit-card", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "CardReaderHeaderText", - "fill": "$text-primary", - "content": "Đầu đọc thẻ", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "CardReaderAddBtn", - "fill": "$bg-interactive", - "cornerRadius": 8, - "gap": 6, - "padding": [ - 6, - 12 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CardReaderAddIcon", - "width": 14, - "height": 14, - "iconFontName": "plus", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "CardReaderAddText", - "fill": "$text-secondary", - "content": "Thêm", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "CardReaderEmpty", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 12, - "layout": "vertical", - "gap": 8, - "padding": [ - 20, - 16 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CardReaderEmptyIcon", - "width": 32, - "height": 32, - "iconFontName": "credit-card", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "CardReaderEmptyText", - "fill": "$text-tertiary", - "content": "Chưa có thiết bị", - "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" - } - } -} \ No newline at end of file diff --git a/pencil-design/src/pages/tPOS/pos/shared/screens/login.pen b/pencil-design/src/pages/tPOS/pos/shared/screens/login.pen deleted file mode 100644 index 185e6aa7..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/screens/login.pen +++ /dev/null @@ -1,101 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "LoginScreen", - "name": "Screen/Login", - "reusable": true, - "width": 480, - "height": 640, - "fill": "$bg-page", - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "gap": 32, - "padding": 40, - "children": [ - { - "type": "frame", - "id": "LoginBrand", - "layout": "vertical", - "gap": 12, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "LoginLogo", "width": 72, "height": 72, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "LoginLogoText", "fill": "#FFFFFF", "content": "tPOS", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"} - ]}, - {"type": "text", "id": "LoginTitle", "fill": "$text-primary", "content": "Đăng nhập", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"}, - {"type": "text", "id": "LoginSubtitle", "fill": "$text-tertiary", "content": "Nhập mã PIN 6 số", "fontFamily": "Roboto", "fontSize": 14} - ] - }, - { - "type": "frame", - "id": "PinDots", - "gap": 16, - "children": [ - {"type": "frame", "id": "PinDot1", "width": 16, "height": 16, "fill": "$orange-primary", "cornerRadius": 100}, - {"type": "frame", "id": "PinDot2", "width": 16, "height": 16, "fill": "$orange-primary", "cornerRadius": 100}, - {"type": "frame", "id": "PinDot3", "width": 16, "height": 16, "fill": "$orange-primary", "cornerRadius": 100}, - {"type": "frame", "id": "PinDot4", "width": 16, "height": 16, "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 100}, - {"type": "frame", "id": "PinDot5", "width": 16, "height": 16, "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 100}, - {"type": "frame", "id": "PinDot6", "width": 16, "height": 16, "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 100} - ] - }, - { - "type": "frame", - "id": "Numpad", - "layout": "vertical", - "gap": 12, - "children": [ - {"type": "frame", "id": "NumpadRow1", "gap": 12, "children": [ - {"type": "frame", "id": "NumKey1", "width": 72, "height": 72, "fill": "$bg-elevated", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NumKey1T", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "500"}]}, - {"type": "frame", "id": "NumKey2", "width": 72, "height": 72, "fill": "$bg-elevated", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NumKey2T", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "500"}]}, - {"type": "frame", "id": "NumKey3", "width": 72, "height": 72, "fill": "$bg-elevated", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NumKey3T", "fill": "$text-primary", "content": "3", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "500"}]} - ]}, - {"type": "frame", "id": "NumpadRow2", "gap": 12, "children": [ - {"type": "frame", "id": "NumKey4", "width": 72, "height": 72, "fill": "$bg-elevated", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NumKey4T", "fill": "$text-primary", "content": "4", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "500"}]}, - {"type": "frame", "id": "NumKey5", "width": 72, "height": 72, "fill": "$bg-elevated", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NumKey5T", "fill": "$text-primary", "content": "5", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "500"}]}, - {"type": "frame", "id": "NumKey6", "width": 72, "height": 72, "fill": "$bg-elevated", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NumKey6T", "fill": "$text-primary", "content": "6", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "500"}]} - ]}, - {"type": "frame", "id": "NumpadRow3", "gap": 12, "children": [ - {"type": "frame", "id": "NumKey7", "width": 72, "height": 72, "fill": "$bg-elevated", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NumKey7T", "fill": "$text-primary", "content": "7", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "500"}]}, - {"type": "frame", "id": "NumKey8", "width": 72, "height": 72, "fill": "$bg-elevated", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NumKey8T", "fill": "$text-primary", "content": "8", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "500"}]}, - {"type": "frame", "id": "NumKey9", "width": 72, "height": 72, "fill": "$bg-elevated", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NumKey9T", "fill": "$text-primary", "content": "9", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "500"}]} - ]}, - {"type": "frame", "id": "NumpadRow4", "gap": 12, "children": [ - {"type": "frame", "id": "NumKeyBack", "width": 72, "height": 72, "fill": "$bg-interactive", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "NumKeyBackI", "width": 24, "height": 24, "iconFontName": "delete", "iconFontFamily": "lucide", "fill": "$text-secondary"}]}, - {"type": "frame", "id": "NumKey0", "width": 72, "height": 72, "fill": "$bg-elevated", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "NumKey0T", "fill": "$text-primary", "content": "0", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "500"}]}, - {"type": "frame", "id": "NumKeyEnter", "width": 72, "height": 72, "fill": "$orange-primary", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "NumKeyEnterI", "width": 24, "height": 24, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}]} - ]} - ] - }, - { - "type": "frame", - "id": "LoginActions", - "gap": 24, - "children": [ - {"type": "frame", "id": "SwitchUserBtn", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SwitchUserIcon", "width": 18, "height": 18, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "SwitchUserText", "fill": "$text-tertiary", "content": "Đổi người dùng", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "KeyboardBtn", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "KeyboardIcon", "width": 18, "height": 18, "iconFontName": "keyboard", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "KeyboardText", "fill": "$text-tertiary", "content": "Bàn phím", "fontFamily": "Roboto", "fontSize": 14} - ]} - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/shared/screens/offline-mode.pen b/pencil-design/src/pages/tPOS/pos/shared/screens/offline-mode.pen deleted file mode 100644 index 61f85283..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/screens/offline-mode.pen +++ /dev/null @@ -1,106 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "OfflineScreen", - "name": "Screen/Offline Mode", - "reusable": true, - "width": 480, - "height": 320, - "fill": "$bg-page", - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "OfflineIndicator", - "width": 80, - "height": 80, - "fill": "#EF444420", - "cornerRadius": 100, - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "OfflineIcon", "width": 40, "height": 40, "iconFontName": "wifi-off", "iconFontFamily": "lucide", "fill": "#EF4444"} - ] - }, - { - "type": "frame", - "id": "OfflineText", - "layout": "vertical", - "gap": 8, - "alignItems": "center", - "children": [ - {"type": "text", "id": "OfflineTitle", "fill": "$text-primary", "content": "Mất kết nối mạng", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}, - {"type": "text", "id": "OfflineSubtitle", "fill": "$text-tertiary", "content": "Đang hoạt động OFFLINE", "fontFamily": "Roboto", "fontSize": 14} - ] - }, - { - "type": "frame", - "id": "OfflineFeatures", - "fill": "$bg-elevated", - "cornerRadius": 14, - "padding": 16, - "layout": "vertical", - "gap": 10, - "children": [ - {"type": "frame", "id": "FeatureRow1", "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "FeatureIcon1", "width": 18, "height": 18, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "FeatureText1", "fill": "$text-primary", "content": "Tạo đơn hàng mới", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "FeatureRow2", "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "FeatureIcon2", "width": 18, "height": 18, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "FeatureText2", "fill": "$text-primary", "content": "Thanh toán tiền mặt", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "FeatureRow3", "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "FeatureIcon3", "width": 18, "height": 18, "iconFontName": "x-circle", "iconFontFamily": "lucide", "fill": "#EF4444"}, - {"type": "text", "id": "FeatureText3", "fill": "$text-tertiary", "content": "QR/Thẻ (cần online)", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "FeatureRow4", "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "FeatureIcon4", "width": 18, "height": 18, "iconFontName": "x-circle", "iconFontFamily": "lucide", "fill": "#EF4444"}, - {"type": "text", "id": "FeatureText4", "fill": "$text-tertiary", "content": "Sync dữ liệu", "fontFamily": "Roboto", "fontSize": 14} - ]} - ] - }, - { - "type": "frame", - "id": "PendingSync", - "fill": "#F59E0B20", - "cornerRadius": 10, - "padding": [10, 16], - "gap": 8, - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "PendingSyncIcon", "width": 18, "height": 18, "iconFontName": "package", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "text", "id": "PendingSyncText", "fill": "#F59E0B", "content": "12 đơn chờ đồng bộ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ] - }, - { - "type": "frame", - "id": "RetryBtn", - "fill": "$bg-interactive", - "cornerRadius": 12, - "padding": [14, 24], - "gap": 10, - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "RetryIcon", "width": 18, "height": 18, "iconFontName": "refresh-cw", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "RetryText", "fill": "$text-secondary", "content": "Thử kết nối lại", "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"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/shared/screens/password-reset.pen b/pencil-design/src/pages/tPOS/pos/shared/screens/password-reset.pen deleted file mode 100644 index 364f0fba..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/screens/password-reset.pen +++ /dev/null @@ -1,473 +0,0 @@ -{ - "version": "2.7", - "children": [ - { - "type": "frame", - "id": "PasswordResetScreen", - "x": 0, - "y": 0, - "name": "Screen/PasswordReset", - "reusable": true, - "width": 480, - "height": 747, - "fill": "$bg-page", - "layout": "vertical", - "gap": 32, - "padding": 40, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ResetBrand", - "layout": "vertical", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ResetIconBg", - "width": 72, - "height": 72, - "fill": "#EAB30815", - "cornerRadius": 36, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ResetIconInner", - "width": 52, - "height": 52, - "fill": "#EAB30820", - "cornerRadius": 26, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ResetIcon", - "width": 28, - "height": 28, - "iconFontName": "key-round", - "iconFontFamily": "lucide", - "fill": "#EAB308" - } - ] - } - ] - }, - { - "type": "text", - "id": "ResetTitle", - "fill": "$text-primary", - "content": "Đổi mật khẩu", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "700" - }, - { - "type": "text", - "id": "ResetSubtitle", - "fill": "$text-tertiary", - "content": "Nhập mật khẩu mới cho tài khoản", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "ResetForm", - "width": "fill_container", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "CurrentPassField", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "text", - "id": "CurrentPassLabel", - "fill": "$text-secondary", - "content": "Mật khẩu hiện tại", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "CurrentPassInput", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 12, - "padding": [ - 0, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CurrentPassIcon", - "width": 20, - "height": 20, - "iconFontName": "lock", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "CurrentPassPlaceholder", - "fill": "$text-tertiary", - "content": "••••••••", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "NewPassField", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "text", - "id": "NewPassLabel", - "fill": "$text-secondary", - "content": "Mật khẩu mới", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "NewPassInput", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 12, - "padding": [ - 0, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "NewPassIcon", - "width": 20, - "height": 20, - "iconFontName": "key", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "NewPassPlaceholder", - "fill": "$text-tertiary", - "content": "Nhập mật khẩu mới", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "ConfirmPassField", - "width": "fill_container", - "layout": "vertical", - "gap": 6, - "children": [ - { - "type": "text", - "id": "ConfirmPassLabel", - "fill": "$text-secondary", - "content": "Xác nhận mật khẩu", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "frame", - "id": "ConfirmPassInput", - "width": "fill_container", - "height": 48, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 12, - "padding": [ - 0, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ConfirmPassIcon", - "width": 20, - "height": 20, - "iconFontName": "check-circle", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "ConfirmPassPlaceholder", - "fill": "$text-tertiary", - "content": "Nhập lại mật khẩu mới", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PasswordRules", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 12, - "layout": "vertical", - "gap": 8, - "padding": 16, - "children": [ - { - "type": "text", - "id": "RulesTitle", - "fill": "$text-secondary", - "content": "Yêu cầu mật khẩu:", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "Rule1", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "Rule1Icon", - "width": 14, - "height": 14, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#22C55E" - }, - { - "type": "text", - "id": "Rule1Text", - "fill": "$text-tertiary", - "content": "Ít nhất 8 ký tự", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "Rule2", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "Rule2Icon", - "width": 14, - "height": 14, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "#22C55E" - }, - { - "type": "text", - "id": "Rule2Text", - "fill": "$text-tertiary", - "content": "Chứa chữ hoa và chữ thường", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "Rule3", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "Rule3Icon", - "width": 14, - "height": 14, - "iconFontName": "circle", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - }, - { - "type": "text", - "id": "Rule3Text", - "fill": "$text-tertiary", - "content": "Chứa số và ký tự đặc biệt", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "ResetActions", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "ResetSubmitBtn", - "width": "fill_container", - "height": 52, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 14, - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ResetSubmitIcon", - "width": 20, - "height": 20, - "iconFontName": "save", - "iconFontFamily": "lucide", - "fill": "#FFFFFF" - }, - { - "type": "text", - "id": "ResetSubmitText", - "fill": "#FFFFFF", - "content": "Đổi mật khẩu", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "ResetCancelBtn", - "width": "fill_container", - "height": 48, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ResetCancelText", - "fill": "$text-secondary", - "content": "Hủy bỏ", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-elevated": { - "type": "color", - "value": "#1A1A1D" - }, - "bg-interactive": { - "type": "color", - "value": "#2A2A2E" - }, - "bg-page": { - "type": "color", - "value": "#0A0A0B" - }, - "border-default": { - "type": "color", - "value": "#2A2A2E" - }, - "orange-primary": { - "type": "color", - "value": "#FF5C00" - }, - "text-primary": { - "type": "color", - "value": "#FFFFFF" - }, - "text-secondary": { - "type": "color", - "value": "#ADADB0" - }, - "text-tertiary": { - "type": "color", - "value": "#8B8B90" - } - } -} \ No newline at end of file diff --git a/pencil-design/src/pages/tPOS/pos/shared/screens/pending-orders.pen b/pencil-design/src/pages/tPOS/pos/shared/screens/pending-orders.pen deleted file mode 100644 index 1b2601a9..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/screens/pending-orders.pen +++ /dev/null @@ -1,144 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "PendingOrdersScreen", - "name": "Screen/PendingOrders", - "reusable": true, - "width": 520, - "height": 700, - "fill": "$bg-page", - "cornerRadius": 20, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "PendingHeader", - "width": "fill_container", - "fill": "$bg-elevated", - "padding": [16, 20], - "gap": 12, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "PendingIconBg", "width": 44, "height": 44, "fill": "#EAB30815", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PendingIcon", "width": 22, "height": 22, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#EAB308"} - ]}, - {"type": "frame", "id": "PendingTitleBox", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "PendingTitle", "fill": "$text-primary", "content": "Đơn Hàng Đang Chờ", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, - {"type": "text", "id": "PendingCount", "fill": "$text-tertiary", "content": "5 đơn hàng", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "PendingClose", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PendingCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "FilterTabs", - "width": "fill_container", - "padding": [12, 20], - "gap": 8, - "children": [ - {"type": "frame", "id": "TabAll", "fill": "$orange-primary", "cornerRadius": 20, "padding": [8, 16], "children": [ - {"type": "text", "id": "TabAllText", "fill": "#FFFFFF", "content": "Tất cả (5)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "TabPreparing", "fill": "$bg-elevated", "cornerRadius": 20, "padding": [8, 16], "children": [ - {"type": "text", "id": "TabPreparingText", "fill": "$text-secondary", "content": "Đang làm (3)", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "TabReady", "fill": "$bg-elevated", "cornerRadius": 20, "padding": [8, 16], "children": [ - {"type": "text", "id": "TabReadyText", "fill": "$text-secondary", "content": "Sẵn sàng (2)", "fontFamily": "Roboto", "fontSize": 13} - ]} - ] - }, - { - "type": "frame", - "id": "OrdersList", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "padding": [0, 20], - "gap": 10, - "children": [ - {"type": "frame", "id": "Order1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 16, "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "Order1Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "Order1Info", "gap": 10, "alignItems": "center", "children": [ - {"type": "text", "id": "Order1Id", "fill": "$text-primary", "content": "#00458", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "frame", "id": "Order1Table", "fill": "$bg-interactive", "cornerRadius": 6, "padding": [4, 8], "children": [ - {"type": "text", "id": "Order1TableText", "fill": "$text-tertiary", "content": "Bàn 05", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "Order1Status", "fill": "#EAB30820", "cornerRadius": 8, "padding": [6, 10], "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Order1StatusIcon", "width": 12, "height": 12, "iconFontName": "loader-2", "iconFontFamily": "lucide", "fill": "#EAB308"}, - {"type": "text", "id": "Order1StatusText", "fill": "#EAB308", "content": "Đang làm", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "Order1Items", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 8, "padding": 10, "gap": 6, "layout": "vertical", "children": [ - {"type": "text", "id": "Order1Item1", "fill": "$text-secondary", "content": "2× Cà phê sữa đá", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "Order1Item2", "fill": "$text-secondary", "content": "1× Bánh mì thịt", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "Order1Footer", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "Order1Time", "gap": 6, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Order1TimeIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "Order1TimeText", "fill": "$text-tertiary", "content": "5 phút trước", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "text", "id": "Order1Total", "fill": "$orange-primary", "content": "95,000đ", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"} - ]} - ]}, - {"type": "frame", "id": "Order2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 16, "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "Order2Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "Order2Info", "gap": 10, "alignItems": "center", "children": [ - {"type": "text", "id": "Order2Id", "fill": "$text-primary", "content": "#00457", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}, - {"type": "frame", "id": "Order2Table", "fill": "$bg-interactive", "cornerRadius": 6, "padding": [4, 8], "children": [ - {"type": "text", "id": "Order2TableText", "fill": "$text-tertiary", "content": "Mang đi", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "Order2Status", "fill": "#22C55E20", "cornerRadius": 8, "padding": [6, 10], "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Order2StatusIcon", "width": 12, "height": 12, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "Order2StatusText", "fill": "#22C55E", "content": "Sẵn sàng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "Order2Items", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 8, "padding": 10, "gap": 6, "layout": "vertical", "children": [ - {"type": "text", "id": "Order2Item1", "fill": "$text-secondary", "content": "1× Trà sữa trân châu", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "Order2Footer", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "Order2Time", "gap": 6, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Order2TimeIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "Order2TimeText", "fill": "$text-tertiary", "content": "12 phút trước", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "text", "id": "Order2Total", "fill": "$orange-primary", "content": "45,000đ", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "PendingFooter", - "width": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "padding": [14, 20], - "justifyContent": "center", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "RefreshBtn", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "RefreshIcon", "width": 18, "height": 18, "iconFontName": "refresh-cw", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "text", "id": "RefreshText", "fill": "$orange-primary", "content": "Làm mới danh sách", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]} - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/shared/screens/pin-entry.pen b/pencil-design/src/pages/tPOS/pos/shared/screens/pin-entry.pen deleted file mode 100644 index 4de93988..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/screens/pin-entry.pen +++ /dev/null @@ -1,124 +0,0 @@ -{ - "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"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/shared/screens/promo-active.pen b/pencil-design/src/pages/tPOS/pos/shared/screens/promo-active.pen deleted file mode 100644 index edcd250c..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/screens/promo-active.pen +++ /dev/null @@ -1,139 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "PromoActiveScreen", - "name": "Screen/PromoActive", - "reusable": true, - "width": 520, - "height": 680, - "fill": "$bg-page", - "cornerRadius": 20, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "PromoHeader", - "width": "fill_container", - "fill": "$bg-elevated", - "padding": [16, 20], - "gap": 12, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "PromoIconBg", "width": 44, "height": 44, "fill": "#EC489915", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PromoIcon", "width": 22, "height": 22, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "#EC4899"} - ]}, - {"type": "frame", "id": "PromoTitleBox", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "PromoTitle", "fill": "$text-primary", "content": "Khuyến Mãi Đang Chạy", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, - {"type": "text", "id": "PromoCount", "fill": "$text-tertiary", "content": "4 chương trình đang hoạt động", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "PromoClose", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PromoCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "PromoList", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "padding": [16, 20], - "gap": 12, - "children": [ - {"type": "frame", "id": "Promo1", "width": "fill_container", "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#EC489920", "position": 0}, {"color": "#F472B610", "position": 1}]}, "cornerRadius": 16, "padding": 16, "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "Promo1Header", "width": "fill_container", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "Promo1Badge", "fill": "#EC4899", "cornerRadius": 8, "padding": [6, 10], "children": [ - {"type": "text", "id": "Promo1Discount", "fill": "#FFFFFF", "content": "-30%", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "Promo1Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "Promo1Name", "fill": "$text-primary", "content": "Happy Hour Sáng", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"}, - {"type": "text", "id": "Promo1Time", "fill": "$text-tertiary", "content": "06:00 - 09:00 hàng ngày", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "Promo1Toggle", "width": 44, "height": 24, "fill": "#22C55E", "cornerRadius": 12, "padding": [2, 2], "justifyContent": "flex_end", "children": [ - {"type": "frame", "id": "Promo1ToggleKnob", "width": 20, "height": 20, "fill": "#FFFFFF", "cornerRadius": 10} - ]} - ]}, - {"type": "frame", "id": "Promo1Stats", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 10, "padding": 12, "gap": 16, "children": [ - {"type": "frame", "id": "Promo1Stat1", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "Promo1Stat1Val", "fill": "#EC4899", "content": "127", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, - {"type": "text", "id": "Promo1Stat1Label", "fill": "$text-tertiary", "content": "Đã dùng", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "frame", "id": "Promo1Stat2", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "Promo1Stat2Val", "fill": "#22C55E", "content": "1.2M", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, - {"type": "text", "id": "Promo1Stat2Label", "fill": "$text-tertiary", "content": "Doanh thu", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]} - ]}, - {"type": "frame", "id": "Promo2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "padding": 16, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "Promo2Badge", "fill": "#F97316", "cornerRadius": 8, "padding": [6, 10], "children": [ - {"type": "text", "id": "Promo2Discount", "fill": "#FFFFFF", "content": "2+1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "Promo2Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "Promo2Name", "fill": "$text-primary", "content": "Mua 2 Tặng 1", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"}, - {"type": "text", "id": "Promo2Desc", "fill": "$text-tertiary", "content": "Áp dụng cho cà phê", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "Promo2Toggle", "width": 44, "height": 24, "fill": "#22C55E", "cornerRadius": 12, "padding": [2, 2], "justifyContent": "flex_end", "children": [ - {"type": "frame", "id": "Promo2ToggleKnob", "width": 20, "height": 20, "fill": "#FFFFFF", "cornerRadius": 10} - ]} - ]}, - {"type": "frame", "id": "Promo3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "padding": 16, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "Promo3Badge", "fill": "#3B82F6", "cornerRadius": 8, "padding": [6, 10], "children": [ - {"type": "text", "id": "Promo3Discount", "fill": "#FFFFFF", "content": "-15%", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "Promo3Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "Promo3Name", "fill": "$text-primary", "content": "VIP Member", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"}, - {"type": "text", "id": "Promo3Desc", "fill": "$text-tertiary", "content": "Ưu đãi thành viên VIP", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "Promo3Toggle", "width": 44, "height": 24, "fill": "#22C55E", "cornerRadius": 12, "padding": [2, 2], "justifyContent": "flex_end", "children": [ - {"type": "frame", "id": "Promo3ToggleKnob", "width": 20, "height": 20, "fill": "#FFFFFF", "cornerRadius": 10} - ]} - ]}, - {"type": "frame", "id": "Promo4", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 16, "padding": 16, "gap": 12, "alignItems": "center", "stroke": {"thickness": 1, "fill": "#EF444430"}, "children": [ - {"type": "frame", "id": "Promo4Badge", "fill": "#EF4444", "cornerRadius": 8, "padding": [6, 10], "children": [ - {"type": "text", "id": "Promo4Discount", "fill": "#FFFFFF", "content": "-50%", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "Promo4Info", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "Promo4Name", "fill": "$text-primary", "content": "Flash Sale", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "700"}, - {"type": "frame", "id": "Promo4Timer", "gap": 6, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Promo4TimerIcon", "width": 12, "height": 12, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#EF4444"}, - {"type": "text", "id": "Promo4TimerText", "fill": "#EF4444", "content": "Còn 2h 15m", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "Promo4Toggle", "width": 44, "height": 24, "fill": "$bg-interactive", "cornerRadius": 12, "padding": [2, 2], "children": [ - {"type": "frame", "id": "Promo4ToggleKnob", "width": 20, "height": 20, "fill": "$text-tertiary", "cornerRadius": 10} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "PromoFooter", - "width": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "padding": [16, 20], - "justifyContent": "center", - "children": [ - {"type": "frame", "id": "AddPromoBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "AddPromoIcon", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "AddPromoText", "fill": "#FFFFFF", "content": "Thêm khuyến mãi mới", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/shared/screens/quick-sale.pen b/pencil-design/src/pages/tPOS/pos/shared/screens/quick-sale.pen deleted file mode 100644 index 7cd74159..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/screens/quick-sale.pen +++ /dev/null @@ -1,546 +0,0 @@ -{ - "version": "2.7", - "children": [ - { - "type": "frame", - "id": "QuickSaleScreen", - "x": 0, - "y": 0, - "name": "Screen/QuickSale", - "reusable": true, - "clip": true, - "width": 400, - "height": 569, - "fill": "$bg-elevated", - "cornerRadius": 24, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "QuickSaleHeader", - "width": "fill_container", - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "padding": [ - 16, - 20 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "QuickSaleHeaderLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "QuickSaleIconBg", - "width": 40, - "height": 40, - "fill": "#22C55E20", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "QuickSaleIcon", - "width": 20, - "height": 20, - "iconFontName": "zap", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - }, - { - "type": "text", - "id": "QuickSaleTitle", - "fill": "$text-primary", - "content": "Bán nhanh", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "QuickSaleCloseBtn", - "width": 36, - "height": 36, - "fill": "$bg-interactive", - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "QuickSaleCloseIcon", - "width": 18, - "height": 18, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "QuickSaleContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "gap": 20, - "padding": 20, - "children": [ - { - "type": "frame", - "id": "QuickSaleAmountSection", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "QuickSaleLabel", - "fill": "$text-secondary", - "content": "Nhập số tiền", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "QuickSaleAmountDisplay", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "padding": [ - 20, - 16 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "QuickSaleAmount", - "fill": "$orange-primary", - "content": "150,000₫", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "700" - } - ] - } - ] - }, - { - "type": "frame", - "id": "QuickSaleNumpad", - "width": "fill_container", - "layout": "vertical", - "gap": 10, - "children": [ - { - "type": "frame", - "id": "NumpadRow1", - "width": "fill_container", - "gap": 10, - "children": [ - { - "type": "frame", - "id": "Numpad1", - "width": "fill_container", - "height": 56, - "fill": "$bg-page", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "Numpad1Text", - "fill": "$text-primary", - "content": "1", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "Numpad2", - "width": "fill_container", - "height": 56, - "fill": "$bg-page", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "Numpad2Text", - "fill": "$text-primary", - "content": "2", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "Numpad3", - "width": "fill_container", - "height": 56, - "fill": "$bg-page", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "Numpad3Text", - "fill": "$text-primary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "NumpadRow2", - "width": "fill_container", - "gap": 10, - "children": [ - { - "type": "frame", - "id": "Numpad4", - "width": "fill_container", - "height": 56, - "fill": "$bg-page", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "Numpad4Text", - "fill": "$text-primary", - "content": "4", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "Numpad5", - "width": "fill_container", - "height": 56, - "fill": "$bg-page", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "Numpad5Text", - "fill": "$text-primary", - "content": "5", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "Numpad6", - "width": "fill_container", - "height": 56, - "fill": "$bg-page", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "Numpad6Text", - "fill": "$text-primary", - "content": "6", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "NumpadRow3", - "width": "fill_container", - "gap": 10, - "children": [ - { - "type": "frame", - "id": "Numpad7", - "width": "fill_container", - "height": 56, - "fill": "$bg-page", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "Numpad7Text", - "fill": "$text-primary", - "content": "7", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "Numpad8", - "width": "fill_container", - "height": 56, - "fill": "$bg-page", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "Numpad8Text", - "fill": "$text-primary", - "content": "8", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "Numpad9", - "width": "fill_container", - "height": 56, - "fill": "$bg-page", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "Numpad9Text", - "fill": "$text-primary", - "content": "9", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "NumpadRow4", - "width": "fill_container", - "gap": 10, - "children": [ - { - "type": "frame", - "id": "NumpadClear", - "width": "fill_container", - "height": 56, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NumpadClearText", - "fill": "$text-secondary", - "content": "C", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "Numpad0", - "width": "fill_container", - "height": 56, - "fill": "$bg-page", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "Numpad0Text", - "fill": "$text-primary", - "content": "0", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NumpadBack", - "width": "fill_container", - "height": 56, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "NumpadBackIcon", - "width": 22, - "height": 22, - "iconFontName": "delete", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "QuickSaleFooter", - "width": "fill_container", - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "padding": [ - 16, - 20 - ], - "children": [ - { - "type": "frame", - "id": "QuickSalePayBtn", - "width": "fill_container", - "height": 52, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8533", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "gap": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "QuickSalePayIcon", - "width": 20, - "height": 20, - "iconFontName": "credit-card", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "QuickSalePayText", - "fill": "$text-primary", - "content": "Thanh toá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/screens/settings.pen b/pencil-design/src/pages/tPOS/pos/shared/screens/settings.pen deleted file mode 100644 index 9b639e70..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/screens/settings.pen +++ /dev/null @@ -1,205 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "SettingsScreen", - "name": "Screen/Settings", - "reusable": true, - "width": 600, - "height": 700, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "SettingsHeader", - "width": "fill_container", - "padding": [20, 24], - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "gap": 12, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "SettingsBackBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SettingsBackIcon", "width": 20, "height": 20, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]}, - {"type": "text", "id": "SettingsTitle", "fill": "$text-primary", "content": "Cài đặt hệ thống", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} - ] - }, - { - "type": "frame", - "id": "SettingsContent", - "width": "fill_container", - "height": "fill_container", - "padding": 24, - "layout": "vertical", - "gap": 20, - "clip": true, - "children": [ - { - "type": "frame", - "id": "StoreSection", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 16, - "layout": "vertical", - "children": [ - {"type": "frame", "id": "StoreSectionHeader", "width": "fill_container", "padding": [16, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "StoreIcon", "width": 20, "height": 20, "iconFontName": "store", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "text", "id": "StoreTitle", "fill": "$text-primary", "content": "Cửa hàng", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "StoreSectionBody", "width": "fill_container", "padding": 20, "layout": "vertical", "gap": 16, "children": [ - {"type": "frame", "id": "StoreRow1", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "StoreRow1Label", "fill": "$text-secondary", "content": "Tên", "fontFamily": "Roboto", "fontSize": 14}, - {"type": "text", "id": "StoreRow1Value", "fill": "$text-primary", "content": "Coffee House", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "StoreRow2", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "StoreRow2Label", "fill": "$text-secondary", "content": "Địa chỉ", "fontFamily": "Roboto", "fontSize": 14}, - {"type": "text", "id": "StoreRow2Value", "fill": "$text-primary", "content": "123 Nguyễn Huệ, Q1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "StoreRow3", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "StoreRow3Label", "fill": "$text-secondary", "content": "Hotline", "fontFamily": "Roboto", "fontSize": 14}, - {"type": "text", "id": "StoreRow3Value", "fill": "$text-primary", "content": "1900 1234", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "PrinterSection", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 16, - "layout": "vertical", - "children": [ - {"type": "frame", "id": "PrinterSectionHeader", "width": "fill_container", "padding": [16, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PrinterIcon", "width": 20, "height": 20, "iconFontName": "printer", "iconFontFamily": "lucide", "fill": "#8B5CF6"}, - {"type": "text", "id": "PrinterTitle", "fill": "$text-primary", "content": "Máy in", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "PrinterSectionBody", "width": "fill_container", "padding": 20, "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "PrinterRow1", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "PrinterRow1Left", "gap": 10, "alignItems": "center", "children": [ - {"type": "text", "id": "PrinterRow1Label", "fill": "$text-secondary", "content": "Receipt", "fontFamily": "Roboto", "fontSize": 14}, - {"type": "frame", "id": "PrinterRow1Status", "fill": "#22C55E20", "cornerRadius": 4, "padding": [3, 8], "children": [ - {"type": "text", "id": "PrinterRow1StatusT", "fill": "#22C55E", "content": "Online", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]} - ]}, - {"type": "text", "id": "PrinterRow1Value", "fill": "$text-primary", "content": "Epson TM-T82", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "PrinterRow2", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "PrinterRow2Left", "gap": 10, "alignItems": "center", "children": [ - {"type": "text", "id": "PrinterRow2Label", "fill": "$text-secondary", "content": "Kitchen", "fontFamily": "Roboto", "fontSize": 14}, - {"type": "frame", "id": "PrinterRow2Status", "fill": "#22C55E20", "cornerRadius": 4, "padding": [3, 8], "children": [ - {"type": "text", "id": "PrinterRow2StatusT", "fill": "#22C55E", "content": "Online", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]} - ]}, - {"type": "text", "id": "PrinterRow2Value", "fill": "$text-primary", "content": "Star TSP100", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "PrinterActions", "width": "fill_container", "gap": 12, "children": [ - {"type": "frame", "id": "PrinterTestBtn", "width": "fill_container", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "gap": 8, "children": [ - {"type": "icon_font", "id": "PrinterTestIcon", "width": 16, "height": 16, "iconFontName": "file-text", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "PrinterTestText", "fill": "$text-secondary", "content": "Test Print", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "PrinterReconnectBtn", "width": "fill_container", "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "gap": 8, "children": [ - {"type": "icon_font", "id": "PrinterReconnectIcon", "width": 16, "height": 16, "iconFontName": "refresh-cw", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "PrinterReconnectText", "fill": "$text-secondary", "content": "Reconnect", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "FinanceSection", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 16, - "layout": "vertical", - "children": [ - {"type": "frame", "id": "FinanceSectionHeader", "width": "fill_container", "padding": [16, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "FinanceIcon", "width": 20, "height": 20, "iconFontName": "banknote", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "FinanceTitle", "fill": "$text-primary", "content": "Tài chính", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "FinanceSectionBody", "width": "fill_container", "padding": 20, "layout": "vertical", "gap": 16, "children": [ - {"type": "frame", "id": "FinanceRow1", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "FinanceRow1Label", "fill": "$text-secondary", "content": "VAT", "fontFamily": "Roboto", "fontSize": 14}, - {"type": "frame", "id": "FinanceRow1Toggle", "gap": 10, "alignItems": "center", "children": [ - {"type": "text", "id": "FinanceRow1Value", "fill": "$text-primary", "content": "10%", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "frame", "id": "FinanceRow1ToggleBtn", "width": 44, "height": 24, "fill": "#22C55E", "cornerRadius": 12, "padding": [2, 2], "justifyContent": "end", "children": [ - {"type": "frame", "id": "FinanceRow1ToggleKnob", "width": 20, "height": 20, "fill": "#FFFFFF", "cornerRadius": 100} - ]} - ]} - ]}, - {"type": "frame", "id": "FinanceRow2", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "FinanceRow2Label", "fill": "$text-secondary", "content": "Tip", "fontFamily": "Roboto", "fontSize": 14}, - {"type": "frame", "id": "FinanceRow2Toggle", "width": 44, "height": 24, "fill": "#22C55E", "cornerRadius": 12, "padding": [2, 2], "justifyContent": "end", "children": [ - {"type": "frame", "id": "FinanceRow2ToggleKnob", "width": 20, "height": 20, "fill": "#FFFFFF", "cornerRadius": 100} - ]} - ]}, - {"type": "frame", "id": "FinanceRow3", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "FinanceRow3Label", "fill": "$text-secondary", "content": "Làm tròn", "fontFamily": "Roboto", "fontSize": 14}, - {"type": "text", "id": "FinanceRow3Value", "fill": "$text-primary", "content": "Gần 1,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "StaffSection", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 16, - "layout": "vertical", - "children": [ - {"type": "frame", "id": "StaffSectionHeader", "width": "fill_container", "padding": [16, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "StaffIcon", "width": 20, "height": 20, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "#3B82F6"}, - {"type": "text", "id": "StaffTitle", "fill": "$text-primary", "content": "Nhân sự", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "StaffSectionBody", "width": "fill_container", "padding": 20, "layout": "vertical", "gap": 10, "children": [ - {"type": "frame", "id": "StaffMenuItem1", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 16], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "StaffMenuItem1Text", "fill": "$text-primary", "content": "Quản lý nhân viên", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "icon_font", "id": "StaffMenuItem1Arrow", "width": 18, "height": 18, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]}, - {"type": "frame", "id": "StaffMenuItem2", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 16], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "StaffMenuItem2Text", "fill": "$text-primary", "content": "Mẫu ca làm việc", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "icon_font", "id": "StaffMenuItem2Arrow", "width": 18, "height": 18, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]}, - {"type": "frame", "id": "StaffMenuItem3", "width": "fill_container", "height": 44, "fill": "$bg-interactive", "cornerRadius": 10, "padding": [0, 16], "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "StaffMenuItem3Text", "fill": "$text-primary", "content": "Phân quyền", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "icon_font", "id": "StaffMenuItem3Arrow", "width": 18, "height": 18, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "SettingsFooter", - "width": "fill_container", - "fill": "$bg-elevated", - "padding": [16, 24], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, - "children": [ - {"type": "frame", "id": "SaveBtn", "width": "fill_container", "height": 52, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 14, "justifyContent": "center", "alignItems": "center", "gap": 10, "children": [ - {"type": "icon_font", "id": "SaveIcon", "width": 20, "height": 20, "iconFontName": "save", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "SaveText", "fill": "#FFFFFF", "content": "Lưu thay đổi", "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-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/shift-management.pen b/pencil-design/src/pages/tPOS/pos/shared/screens/shift-management.pen deleted file mode 100644 index 9c76f3f4..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/screens/shift-management.pen +++ /dev/null @@ -1,198 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "ShiftManagement", - "name": "Screen/Shift Management", - "reusable": true, - "width": 600, - "height": 800, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "ShiftHeader", - "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": "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": "Quản lý ca làm việc", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "ShiftHelpBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ShiftHelpIcon", "width": 20, "height": 20, "iconFontName": "help-circle", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "ShiftContent", - "width": "fill_container", - "height": "fill_container", - "padding": 24, - "layout": "vertical", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "CashierInfo", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 16, - "padding": 20, - "gap": 16, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "CashierAvatar", "width": 56, "height": 56, "fill": "#22C55E20", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "CashierAvatarText", "fill": "#22C55E", "content": "NA", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "CashierDetails", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "text", "id": "CashierName", "fill": "$text-primary", "content": "Nguyễn Văn A", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "frame", "id": "CashierMeta", "gap": 16, "children": [ - {"type": "frame", "id": "CashierStart", "gap": 6, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CashierStartIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "CashierStartText", "fill": "$text-tertiary", "content": "08:00 AM", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "CashierDuration", "gap": 6, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CashierDurationIcon", "width": 14, "height": 14, "iconFontName": "timer", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "CashierDurationText", "fill": "$text-tertiary", "content": "4h 30m", "fontFamily": "Roboto", "fontSize": 13} - ]} - ]} - ]}, - {"type": "frame", "id": "ShiftStatus", "fill": "#22C55E20", "cornerRadius": 8, "padding": [6, 12], "children": [ - {"type": "text", "id": "ShiftStatusText", "fill": "#22C55E", "content": "Đang mở", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]} - ] - }, - { - "type": "frame", - "id": "CashCount", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 16, - "layout": "vertical", - "children": [ - {"type": "frame", "id": "CashCountHeader", "width": "fill_container", "padding": [16, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CashCountIcon", "width": 20, "height": 20, "iconFontName": "banknote", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "text", "id": "CashCountTitle", "fill": "$text-primary", "content": "Kiểm kê tiền", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "CashCountBody", "width": "fill_container", "padding": 20, "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "CashRow1", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "CashRow1Label", "fill": "$text-secondary", "content": "Tiền đầu ca", "fontFamily": "Roboto", "fontSize": 14}, - {"type": "text", "id": "CashRow1Value", "fill": "$text-primary", "content": "2,000,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "CashRow2", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "CashRow2Label", "fill": "$text-secondary", "content": "Thu trong ca", "fontFamily": "Roboto", "fontSize": 14}, - {"type": "text", "id": "CashRow2Value", "fill": "#22C55E", "content": "+5,450,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "CashRow3", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "CashRow3Label", "fill": "$text-secondary", "content": "Chi trong ca", "fontFamily": "Roboto", "fontSize": 14}, - {"type": "text", "id": "CashRow3Value", "fill": "#EF4444", "content": "-150,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "CashDivider", "width": "fill_container", "height": 1, "fill": "$border-subtle"}, - {"type": "frame", "id": "CashRow4", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "CashRow4Label", "fill": "$text-primary", "content": "Kỳ vọng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "CashRow4Value", "fill": "$text-primary", "content": "7,300,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "CashActual", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "CashActualLabel", "fill": "$text-secondary", "content": "Thực tế", "fontFamily": "Roboto", "fontSize": 14}, - {"type": "frame", "id": "CashActualInput", "width": 180, "height": 44, "fill": "$bg-surface", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 14], "justifyContent": "end", "alignItems": "center", "children": [ - {"type": "text", "id": "CashActualValue", "fill": "$text-primary", "content": "7,300,000", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "CashDiff", "width": "fill_container", "fill": "#22C55E15", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "children": [ - {"type": "text", "id": "CashDiffLabel", "fill": "$text-secondary", "content": "Chênh lệch", "fontFamily": "Roboto", "fontSize": 14}, - {"type": "text", "id": "CashDiffValue", "fill": "#22C55E", "content": "0₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "ShiftStats", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 16, - "layout": "vertical", - "children": [ - {"type": "frame", "id": "ShiftStatsHeader", "width": "fill_container", "padding": [16, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ShiftStatsIcon", "width": 20, "height": 20, "iconFontName": "bar-chart-3", "iconFontFamily": "lucide", "fill": "#8B5CF6"}, - {"type": "text", "id": "ShiftStatsTitle", "fill": "$text-primary", "content": "Thống kê ca", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "ShiftStatsBody", "width": "fill_container", "padding": 20, "gap": 20, "children": [ - {"type": "frame", "id": "StatOrders", "width": "fill_container", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "StatOrdersValue", "fill": "$text-primary", "content": "47", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, - {"type": "text", "id": "StatOrdersLabel", "fill": "$text-tertiary", "content": "Hóa đơn", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "StatVoid", "width": "fill_container", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "StatVoidValue", "fill": "#EF4444", "content": "2", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, - {"type": "text", "id": "StatVoidLabel", "fill": "$text-tertiary", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "StatRefund", "width": "fill_container", "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "StatRefundValue", "fill": "#F59E0B", "content": "1", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, - {"type": "text", "id": "StatRefundLabel", "fill": "$text-tertiary", "content": "Hoàn", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "PaymentBreakdown", "width": "fill_container", "padding": [0, 20, 20, 20], "gap": 12, "children": [ - {"type": "frame", "id": "PayCash", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "frame", "id": "PayCashRow", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "PayCashLabel", "fill": "$text-tertiary", "content": "Tiền mặt", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "PayCashPercent", "fill": "$text-secondary", "content": "60%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "PayCashBar", "width": "fill_container", "height": 6, "fill": "$bg-interactive", "cornerRadius": 3, "children": [ - {"type": "frame", "id": "PayCashFill", "width": "60%", "height": 6, "fill": "#22C55E", "cornerRadius": 3} - ]} - ]}, - {"type": "frame", "id": "PayQR", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "frame", "id": "PayQRRow", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "PayQRLabel", "fill": "$text-tertiary", "content": "QR / Chuyển khoản", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "PayQRPercent", "fill": "$text-secondary", "content": "40%", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "PayQRBar", "width": "fill_container", "height": 6, "fill": "$bg-interactive", "cornerRadius": 3, "children": [ - {"type": "frame", "id": "PayQRFill", "width": "40%", "height": 6, "fill": "#3B82F6", "cornerRadius": 3} - ]} - ]} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "ShiftFooter", - "width": "fill_container", - "fill": "$bg-elevated", - "padding": [16, 24], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, - "children": [ - {"type": "frame", "id": "CloseShiftBtn", "width": "fill_container", "height": 52, "fill": "#EF4444", "cornerRadius": 14, "justifyContent": "center", "alignItems": "center", "gap": 10, "children": [ - {"type": "icon_font", "id": "CloseShiftIcon", "width": 20, "height": 20, "iconFontName": "log-out", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "CloseShiftText", "fill": "#FFFFFF", "content": "Đóng ca làm việc", "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"}, - "bg-surface": {"type": "color", "value": "#111113"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/shared/screens/staff-list.pen b/pencil-design/src/pages/tPOS/pos/shared/screens/staff-list.pen deleted file mode 100644 index 75c9861c..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/screens/staff-list.pen +++ /dev/null @@ -1,154 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "StaffListScreen", - "name": "Screen/StaffList", - "reusable": true, - "width": 520, - "height": 700, - "fill": "$bg-page", - "cornerRadius": 20, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "StaffHeader", - "width": "fill_container", - "fill": "$bg-elevated", - "padding": [16, 20], - "gap": 12, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "StaffIconBg", "width": 44, "height": 44, "fill": "#8B5CF615", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "StaffIcon", "width": 22, "height": 22, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "#8B5CF6"} - ]}, - {"type": "frame", "id": "StaffTitleBox", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "StaffTitle", "fill": "$text-primary", "content": "Quản Lý Nhân Viên", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, - {"type": "text", "id": "StaffCount", "fill": "$text-tertiary", "content": "8 nhân viên đang làm việc", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "AddStaffBtn", "width": 36, "height": 36, "fill": "$orange-primary", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "AddStaffIcon", "width": 18, "height": 18, "iconFontName": "user-plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"} - ]} - ] - }, - { - "type": "frame", - "id": "StaffSearch", - "width": "fill_container", - "padding": [12, 20], - "children": [ - {"type": "frame", "id": "SearchBox", "width": "fill_container", "height": 44, "fill": "$bg-elevated", "cornerRadius": 12, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SearchIcon", "width": 18, "height": 18, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "SearchPlaceholder", "fill": "$text-tertiary", "content": "Tìm nhân viên...", "fontFamily": "Roboto", "fontSize": 14} - ]} - ] - }, - { - "type": "frame", - "id": "RoleTabs", - "width": "fill_container", - "padding": [0, 20], - "gap": 8, - "children": [ - {"type": "frame", "id": "TabAll", "fill": "$orange-primary", "cornerRadius": 20, "padding": [8, 14], "children": [ - {"type": "text", "id": "TabAllText", "fill": "#FFFFFF", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "TabCashier", "fill": "$bg-elevated", "cornerRadius": 20, "padding": [8, 14], "children": [ - {"type": "text", "id": "TabCashierText", "fill": "$text-secondary", "content": "Thu ngân", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "TabKitchen", "fill": "$bg-elevated", "cornerRadius": 20, "padding": [8, 14], "children": [ - {"type": "text", "id": "TabKitchenText", "fill": "$text-secondary", "content": "Bếp", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "TabWaiter", "fill": "$bg-elevated", "cornerRadius": 20, "padding": [8, 14], "children": [ - {"type": "text", "id": "TabWaiterText", "fill": "$text-secondary", "content": "Phục vụ", "fontFamily": "Roboto", "fontSize": 13} - ]} - ] - }, - { - "type": "frame", - "id": "StaffList", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "padding": [12, 20], - "gap": 10, - "children": [ - {"type": "frame", "id": "Staff1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "Staff1Avatar", "width": 48, "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#3B82F6", "position": 0}, {"color": "#8B5CF6", "position": 1}]}, "cornerRadius": 24, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Staff1Initials", "fill": "#FFFFFF", "content": "NV", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "Staff1Info", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "Staff1Name", "fill": "$text-primary", "content": "Nguyễn Văn An", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, - {"type": "frame", "id": "Staff1Meta", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "Staff1Role", "fill": "#3B82F620", "cornerRadius": 6, "padding": [3, 8], "children": [ - {"type": "text", "id": "Staff1RoleText", "fill": "#3B82F6", "content": "Thu ngân", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "Staff1Status", "gap": 4, "alignItems": "center", "children": [ - {"type": "frame", "id": "Staff1StatusDot", "width": 6, "height": 6, "fill": "#22C55E", "cornerRadius": 3}, - {"type": "text", "id": "Staff1StatusText", "fill": "#22C55E", "content": "Đang làm", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]} - ]}, - {"type": "frame", "id": "Staff1More", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Staff1MoreIcon", "width": 16, "height": 16, "iconFontName": "more-vertical", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ]}, - {"type": "frame", "id": "Staff2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "Staff2Avatar", "width": 48, "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#F97316", "position": 0}, {"color": "#EAB308", "position": 1}]}, "cornerRadius": 24, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Staff2Initials", "fill": "#FFFFFF", "content": "TH", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "Staff2Info", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "Staff2Name", "fill": "$text-primary", "content": "Trần Thị Hương", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, - {"type": "frame", "id": "Staff2Meta", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "Staff2Role", "fill": "#F9731620", "cornerRadius": 6, "padding": [3, 8], "children": [ - {"type": "text", "id": "Staff2RoleText", "fill": "#F97316", "content": "Bếp", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "Staff2Status", "gap": 4, "alignItems": "center", "children": [ - {"type": "frame", "id": "Staff2StatusDot", "width": 6, "height": 6, "fill": "#22C55E", "cornerRadius": 3}, - {"type": "text", "id": "Staff2StatusText", "fill": "#22C55E", "content": "Đang làm", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]} - ]}, - {"type": "frame", "id": "Staff2More", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Staff2MoreIcon", "width": 16, "height": 16, "iconFontName": "more-vertical", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ]}, - {"type": "frame", "id": "Staff3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 14, "padding": 14, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "Staff3Avatar", "width": 48, "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#10B981", "position": 0}, {"color": "#22C55E", "position": 1}]}, "cornerRadius": 24, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Staff3Initials", "fill": "#FFFFFF", "content": "LM", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "Staff3Info", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "Staff3Name", "fill": "$text-primary", "content": "Lê Minh Tuấn", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, - {"type": "frame", "id": "Staff3Meta", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "Staff3Role", "fill": "#10B98120", "cornerRadius": 6, "padding": [3, 8], "children": [ - {"type": "text", "id": "Staff3RoleText", "fill": "#10B981", "content": "Phục vụ", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "Staff3Status", "gap": 4, "alignItems": "center", "children": [ - {"type": "frame", "id": "Staff3StatusDot", "width": 6, "height": 6, "fill": "$text-tertiary", "cornerRadius": 3}, - {"type": "text", "id": "Staff3StatusText", "fill": "$text-tertiary", "content": "Nghỉ ca", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]} - ]}, - {"type": "frame", "id": "Staff3More", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Staff3MoreIcon", "width": 16, "height": 16, "iconFontName": "more-vertical", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ]} - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/shared/screens/staff-schedule.pen b/pencil-design/src/pages/tPOS/pos/shared/screens/staff-schedule.pen deleted file mode 100644 index 2d53f759..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/screens/staff-schedule.pen +++ /dev/null @@ -1,194 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "StaffScheduleScreen", - "name": "Screen/StaffSchedule", - "reusable": true, - "width": 560, - "height": 720, - "fill": "$bg-page", - "cornerRadius": 20, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "ScheduleHeader", - "width": "fill_container", - "fill": "$bg-elevated", - "padding": [16, 20], - "gap": 12, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "ScheduleIconBg", "width": 44, "height": 44, "fill": "#3B82F615", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ScheduleIcon", "width": 22, "height": 22, "iconFontName": "calendar-days", "iconFontFamily": "lucide", "fill": "#3B82F6"} - ]}, - {"type": "frame", "id": "ScheduleTitleBox", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "ScheduleTitle", "fill": "$text-primary", "content": "Lịch Làm Việc", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, - {"type": "text", "id": "ScheduleWeek", "fill": "$text-tertiary", "content": "Tuần 06/02 - 12/02/2026", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "ScheduleNav", "gap": 8, "children": [ - {"type": "frame", "id": "PrevWeek", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PrevWeekIcon", "width": 16, "height": 16, "iconFontName": "chevron-left", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]}, - {"type": "frame", "id": "NextWeek", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "NextWeekIcon", "width": 16, "height": 16, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "DayTabs", - "width": "fill_container", - "fill": "$bg-elevated", - "padding": [12, 16], - "gap": 4, - "justifyContent": "space_between", - "children": [ - {"type": "frame", "id": "Day1", "width": "fill_container", "layout": "vertical", "gap": 4, "alignItems": "center", "padding": [8, 0], "children": [ - {"type": "text", "id": "Day1Name", "fill": "$text-tertiary", "content": "T2", "fontFamily": "Roboto", "fontSize": 11}, - {"type": "frame", "id": "Day1Num", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Day1NumText", "fill": "$text-secondary", "content": "06", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "Day2", "width": "fill_container", "layout": "vertical", "gap": 4, "alignItems": "center", "padding": [8, 0], "children": [ - {"type": "text", "id": "Day2Name", "fill": "$text-primary", "content": "T3", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}, - {"type": "frame", "id": "Day2Num", "width": 32, "height": 32, "fill": "$orange-primary", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Day2NumText", "fill": "#FFFFFF", "content": "07", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "Day3", "width": "fill_container", "layout": "vertical", "gap": 4, "alignItems": "center", "padding": [8, 0], "children": [ - {"type": "text", "id": "Day3Name", "fill": "$text-tertiary", "content": "T4", "fontFamily": "Roboto", "fontSize": 11}, - {"type": "frame", "id": "Day3Num", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Day3NumText", "fill": "$text-secondary", "content": "08", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "Day4", "width": "fill_container", "layout": "vertical", "gap": 4, "alignItems": "center", "padding": [8, 0], "children": [ - {"type": "text", "id": "Day4Name", "fill": "$text-tertiary", "content": "T5", "fontFamily": "Roboto", "fontSize": 11}, - {"type": "frame", "id": "Day4Num", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Day4NumText", "fill": "$text-secondary", "content": "09", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "Day5", "width": "fill_container", "layout": "vertical", "gap": 4, "alignItems": "center", "padding": [8, 0], "children": [ - {"type": "text", "id": "Day5Name", "fill": "$text-tertiary", "content": "T6", "fontFamily": "Roboto", "fontSize": 11}, - {"type": "frame", "id": "Day5Num", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Day5NumText", "fill": "$text-secondary", "content": "10", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "Day6", "width": "fill_container", "layout": "vertical", "gap": 4, "alignItems": "center", "padding": [8, 0], "children": [ - {"type": "text", "id": "Day6Name", "fill": "$text-tertiary", "content": "T7", "fontFamily": "Roboto", "fontSize": 11}, - {"type": "frame", "id": "Day6Num", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Day6NumText", "fill": "$text-secondary", "content": "11", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "Day7", "width": "fill_container", "layout": "vertical", "gap": 4, "alignItems": "center", "padding": [8, 0], "children": [ - {"type": "text", "id": "Day7Name", "fill": "$text-tertiary", "content": "CN", "fontFamily": "Roboto", "fontSize": 11}, - {"type": "frame", "id": "Day7Num", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 16, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Day7NumText", "fill": "$text-secondary", "content": "12", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "ShiftList", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "padding": [16, 20], - "gap": 16, - "children": [ - {"type": "frame", "id": "MorningShift", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ - {"type": "frame", "id": "MorningHeader", "width": "fill_container", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "MorningIcon", "width": 24, "height": 24, "fill": "#EAB30820", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MorningIconI", "width": 14, "height": 14, "iconFontName": "sunrise", "iconFontFamily": "lucide", "fill": "#EAB308"} - ]}, - {"type": "text", "id": "MorningTitle", "fill": "$text-primary", "content": "Ca sáng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "MorningTime", "fill": "$text-tertiary", "content": "06:00 - 14:00", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "MorningStaff", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": 12, "gap": 10, "children": [ - {"type": "frame", "id": "MS1", "width": 36, "height": 36, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#3B82F6", "position": 0}, {"color": "#8B5CF6", "position": 1}]}, "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "MS1Text", "fill": "#FFFFFF", "content": "NA", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "MS2", "width": 36, "height": 36, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#F97316", "position": 0}, {"color": "#EAB308", "position": 1}]}, "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "MS2Text", "fill": "#FFFFFF", "content": "TH", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "MS3", "width": 36, "height": 36, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#10B981", "position": 0}, {"color": "#22C55E", "position": 1}]}, "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "MS3Text", "fill": "#FFFFFF", "content": "LT", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "AddMorning", "width": 36, "height": 36, "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "AddMorningIcon", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]} - ]} - ]}, - {"type": "frame", "id": "AfternoonShift", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ - {"type": "frame", "id": "AfternoonHeader", "width": "fill_container", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "AfternoonIcon", "width": 24, "height": 24, "fill": "#F9731620", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "AfternoonIconI", "width": 14, "height": 14, "iconFontName": "sun", "iconFontFamily": "lucide", "fill": "#F97316"} - ]}, - {"type": "text", "id": "AfternoonTitle", "fill": "$text-primary", "content": "Ca chiều", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "AfternoonTime", "fill": "$text-tertiary", "content": "14:00 - 22:00", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "AfternoonStaff", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": 12, "gap": 10, "children": [ - {"type": "frame", "id": "AS1", "width": 36, "height": 36, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#EC4899", "position": 0}, {"color": "#F472B6", "position": 1}]}, "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "AS1Text", "fill": "#FFFFFF", "content": "PL", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "AS2", "width": 36, "height": 36, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#06B6D4", "position": 0}, {"color": "#22D3EE", "position": 1}]}, "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "AS2Text", "fill": "#FFFFFF", "content": "HN", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "AddAfternoon", "width": 36, "height": 36, "stroke": {"thickness": 2, "fill": "$border-default"}, "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "AddAfternoonIcon", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]} - ]} - ]}, - {"type": "frame", "id": "NightShift", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ - {"type": "frame", "id": "NightHeader", "width": "fill_container", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "NightIcon", "width": 24, "height": 24, "fill": "#8B5CF620", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "NightIconI", "width": 14, "height": 14, "iconFontName": "moon", "iconFontFamily": "lucide", "fill": "#8B5CF6"} - ]}, - {"type": "text", "id": "NightTitle", "fill": "$text-primary", "content": "Ca tối", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "NightTime", "fill": "$text-tertiary", "content": "22:00 - 06:00", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "NightEmpty", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": 16, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "NightEmptyIcon", "width": 20, "height": 20, "iconFontName": "user-x", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "NightEmptyText", "fill": "$text-tertiary", "content": "Chưa có nhân viên", "fontFamily": "Roboto", "fontSize": 13} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "ScheduleFooter", - "width": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "gap": 12, - "padding": [16, 20], - "children": [ - {"type": "frame", "id": "EditScheduleBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "EditScheduleIcon", "width": 18, "height": 18, "iconFontName": "pencil", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "EditScheduleText", "fill": "$text-secondary", "content": "Chỉnh sửa", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "PublishBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PublishIcon", "width": 18, "height": 18, "iconFontName": "send", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "PublishText", "fill": "#FFFFFF", "content": "Đăng lịch", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/shared/screens/stock-count.pen b/pencil-design/src/pages/tPOS/pos/shared/screens/stock-count.pen deleted file mode 100644 index 466ea46d..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/screens/stock-count.pen +++ /dev/null @@ -1,176 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "StockCountScreen", - "name": "Screen/StockCount", - "reusable": true, - "width": 520, - "height": 720, - "fill": "$bg-page", - "cornerRadius": 20, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "StockCountHeader", - "width": "fill_container", - "fill": "$bg-elevated", - "padding": [16, 20], - "gap": 12, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "StockCountIconBg", "width": 44, "height": 44, "fill": "#8B5CF615", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "StockCountIcon", "width": 22, "height": 22, "iconFontName": "clipboard-check", "iconFontFamily": "lucide", "fill": "#8B5CF6"} - ]}, - {"type": "frame", "id": "StockCountTitle", "width": "fill_container", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "StockCountTitleText", "fill": "$text-primary", "content": "Kiểm Kê Tồn Kho", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, - {"type": "text", "id": "StockCountSubtitle", "fill": "$text-tertiary", "content": "Ca sáng - 06/02/2026", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "StockCountClose", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "StockCountCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "StockCountSearch", - "width": "fill_container", - "padding": [12, 20], - "children": [ - {"type": "frame", "id": "SearchBox", "width": "fill_container", "height": 44, "fill": "$bg-elevated", "cornerRadius": 12, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SearchIcon", "width": 18, "height": 18, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "SearchPlaceholder", "fill": "$text-tertiary", "content": "Tìm sản phẩm theo tên hoặc mã...", "fontFamily": "Roboto", "fontSize": 14} - ]} - ] - }, - { - "type": "frame", - "id": "StockCountStats", - "width": "fill_container", - "padding": [0, 20], - "gap": 12, - "children": [ - {"type": "frame", "id": "StatTotal", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "StatTotalNum", "fill": "$text-primary", "content": "48", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "text", "id": "StatTotalLabel", "fill": "$text-tertiary", "content": "Tổng SP", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "frame", "id": "StatCounted", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "StatCountedNum", "fill": "#22C55E", "content": "32", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "text", "id": "StatCountedLabel", "fill": "$text-tertiary", "content": "Đã kiểm", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "frame", "id": "StatDiff", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "StatDiffNum", "fill": "#EF4444", "content": "3", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "text", "id": "StatDiffLabel", "fill": "$text-tertiary", "content": "Chênh lệch", "fontFamily": "Roboto", "fontSize": 11} - ]} - ] - }, - { - "type": "frame", - "id": "ProductList", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "padding": [12, 20], - "gap": 8, - "children": [ - {"type": "frame", "id": "ProductItem1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": 14, "gap": 12, "children": [ - {"type": "frame", "id": "Prod1Img", "width": 48, "height": 48, "fill": "#3B82F620", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Prod1Icon", "width": 24, "height": 24, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "#3B82F6"} - ]}, - {"type": "frame", "id": "Prod1Info", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "Prod1Name", "fill": "$text-primary", "content": "Cà phê sữa đá", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "Prod1SKU", "fill": "$text-tertiary", "content": "SKU: CF-001", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "Prod1Count", "layout": "vertical", "gap": 4, "alignItems": "end", "children": [ - {"type": "frame", "id": "Prod1Expected", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "Prod1ExpLabel", "fill": "$text-tertiary", "content": "Hệ thống:", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "Prod1ExpVal", "fill": "$text-secondary", "content": "50", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "Prod1Actual", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "Prod1ActLabel", "fill": "$text-tertiary", "content": "Thực tế:", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "Prod1ActInput", "width": 56, "height": 28, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Prod1ActVal", "fill": "#22C55E", "content": "50", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ]} - ]} - ]}, - {"type": "frame", "id": "ProductItem2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": 14, "gap": 12, "children": [ - {"type": "frame", "id": "Prod2Img", "width": 48, "height": 48, "fill": "#F9731620", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Prod2Icon", "width": 24, "height": 24, "iconFontName": "croissant", "iconFontFamily": "lucide", "fill": "#F97316"} - ]}, - {"type": "frame", "id": "Prod2Info", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "Prod2Name", "fill": "$text-primary", "content": "Bánh mì thịt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "Prod2SKU", "fill": "$text-tertiary", "content": "SKU: BM-003", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "Prod2Count", "layout": "vertical", "gap": 4, "alignItems": "end", "children": [ - {"type": "frame", "id": "Prod2Expected", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "Prod2ExpLabel", "fill": "$text-tertiary", "content": "Hệ thống:", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "Prod2ExpVal", "fill": "$text-secondary", "content": "25", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "Prod2Actual", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "Prod2ActLabel", "fill": "$text-tertiary", "content": "Thực tế:", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "Prod2ActInput", "width": 56, "height": 28, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Prod2ActVal", "fill": "#EF4444", "content": "22", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ]} - ]} - ]}, - {"type": "frame", "id": "ProductItem3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": 14, "gap": 12, "children": [ - {"type": "frame", "id": "Prod3Img", "width": 48, "height": 48, "fill": "#10B98120", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Prod3Icon", "width": 24, "height": 24, "iconFontName": "milk", "iconFontFamily": "lucide", "fill": "#10B981"} - ]}, - {"type": "frame", "id": "Prod3Info", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "Prod3Name", "fill": "$text-primary", "content": "Sữa tươi không đường", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "Prod3SKU", "fill": "$text-tertiary", "content": "SKU: ML-012", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "Prod3Count", "layout": "vertical", "gap": 4, "alignItems": "end", "children": [ - {"type": "frame", "id": "Prod3Expected", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "Prod3ExpLabel", "fill": "$text-tertiary", "content": "Hệ thống:", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "Prod3ExpVal", "fill": "$text-secondary", "content": "100", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "Prod3Actual", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "Prod3ActLabel", "fill": "$text-tertiary", "content": "Thực tế:", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "Prod3ActInput", "width": 56, "height": 28, "fill": "$bg-interactive", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Prod3ActVal", "fill": "$text-tertiary", "content": "--", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ]} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "StockCountFooter", - "width": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle"}, - "gap": 12, - "padding": [16, 20], - "children": [ - {"type": "frame", "id": "SaveDraftBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SaveDraftIcon", "width": 18, "height": 18, "iconFontName": "save", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "SaveDraftText", "fill": "$text-secondary", "content": "Lưu nháp", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "CompleteBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CompleteIcon", "width": 18, "height": 18, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "CompleteText", "fill": "#FFFFFF", "content": "Hoàn tất kiểm kê", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/shared/screens/theme-customization.pen b/pencil-design/src/pages/tPOS/pos/shared/screens/theme-customization.pen deleted file mode 100644 index e6a7a15f..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/screens/theme-customization.pen +++ /dev/null @@ -1,128 +0,0 @@ -{ - "version": "2.7", - "children": [ - { - "type": "frame", - "id": "ThemeCustomizationScreen", - "name": "Screen/ThemeCustomization", - "reusable": true, - "clip": true, - "width": 420, - "height": 540, - "fill": "$bg-elevated", - "cornerRadius": 24, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "ThemeHeader", - "width": "fill_container", - "padding": [16, 20], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "ThemeHeaderLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "ThemeIconBg", "width": 40, "height": 40, "fill": "#EC489920", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ThemeIcon", "width": 20, "height": 20, "iconFontName": "palette", "iconFontFamily": "lucide", "fill": "#EC4899"} - ]}, - {"type": "text", "id": "ThemeTitle", "fill": "$text-primary", "content": "Giao diện", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "ThemeCloseBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ThemeCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "ThemeContent", - "width": "fill_container", - "height": "fill_container", - "padding": 20, - "layout": "vertical", - "gap": 20, - "children": [ - {"type": "frame", "id": "ThemeModeSection", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ - {"type": "text", "id": "ThemeModeLabel", "fill": "$text-secondary", "content": "Chế độ hiển thị", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "ThemeModeOptions", "width": "fill_container", "gap": 10, "children": [ - {"type": "frame", "id": "ThemeModeDark", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "layout": "vertical", "gap": 10, "alignItems": "center", "stroke": {"thickness": 2, "fill": "$orange-primary"}, "children": [ - {"type": "frame", "id": "ThemeModeDarkPreview", "width": "fill_container", "height": 56, "fill": "#0A0A0B", "cornerRadius": 10, "padding": 8, "layout": "vertical", "gap": 4, "children": [ - {"type": "frame", "id": "ThemeModeDarkHeader", "width": "fill_container", "height": 8, "fill": "#2A2A2E", "cornerRadius": 4}, - {"type": "frame", "id": "ThemeModeDarkBody", "width": 48, "height": 6, "fill": "#1A1A1D", "cornerRadius": 3} - ]}, - {"type": "frame", "id": "ThemeModeDarkLabelRow", "gap": 6, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ThemeModeDarkCheck", "width": 16, "height": 16, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "text", "id": "ThemeModeDarkText", "fill": "$text-primary", "content": "Tối", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "ThemeModeLight", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "layout": "vertical", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "ThemeModeLightPreview", "width": "fill_container", "height": 56, "fill": "#F5F5F5", "cornerRadius": 10, "padding": 8, "layout": "vertical", "gap": 4, "children": [ - {"type": "frame", "id": "ThemeModeLightHeader", "width": "fill_container", "height": 8, "fill": "#E0E0E0", "cornerRadius": 4}, - {"type": "frame", "id": "ThemeModeLightBody", "width": 48, "height": 6, "fill": "#FFFFFF", "cornerRadius": 3} - ]}, - {"type": "text", "id": "ThemeModeLightText", "fill": "$text-secondary", "content": "Sáng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "ThemeModeAuto", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "layout": "vertical", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "ThemeModeAutoPreview", "width": "fill_container", "height": 56, "cornerRadius": 10, "children": [ - {"type": "frame", "id": "ThemeModeAutoLeft", "width": "50%", "height": 56, "fill": "#0A0A0B", "cornerRadius": [10, 0, 0, 10]}, - {"type": "frame", "id": "ThemeModeAutoRight", "width": "50%", "height": 56, "fill": "#F5F5F5", "cornerRadius": [0, 10, 10, 0], "x": 50} - ]}, - {"type": "text", "id": "ThemeModeAutoText", "fill": "$text-secondary", "content": "Tự động", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ]} - ]}, - {"type": "frame", "id": "ThemeColorSection", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ - {"type": "text", "id": "ThemeColorLabel", "fill": "$text-secondary", "content": "Màu chủ đạo", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "ThemeColorOptions", "width": "fill_container", "gap": 12, "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "ThemeColor1", "width": 44, "height": 44, "fill": "#FF5C00", "cornerRadius": 22, "stroke": {"thickness": 3, "fill": "$text-primary"}, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ThemeColor1Check", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"} - ]}, - {"type": "frame", "id": "ThemeColor2", "width": 44, "height": 44, "fill": "#3B82F6", "cornerRadius": 22}, - {"type": "frame", "id": "ThemeColor3", "width": 44, "height": 44, "fill": "#22C55E", "cornerRadius": 22}, - {"type": "frame", "id": "ThemeColor4", "width": 44, "height": 44, "fill": "#8B5CF6", "cornerRadius": 22}, - {"type": "frame", "id": "ThemeColor5", "width": 44, "height": 44, "fill": "#EC4899", "cornerRadius": 22}, - {"type": "frame", "id": "ThemeColor6", "width": 44, "height": 44, "fill": "#F59E0B", "cornerRadius": 22} - ]} - ]}, - {"type": "frame", "id": "ThemeLayoutSection", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ - {"type": "text", "id": "ThemeLayoutLabel", "fill": "$text-secondary", "content": "Bố cục", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "ThemeLayoutItem", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "ThemeLayoutItemLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ThemeLayoutIcon", "width": 20, "height": 20, "iconFontName": "layout-grid", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "ThemeLayoutText", "fill": "$text-primary", "content": "Chế độ compact", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "ThemeLayoutToggle", "width": 48, "height": 28, "fill": "$bg-interactive", "cornerRadius": 14, "padding": [2, 2], "justifyContent": "start", "children": [ - {"type": "frame", "id": "ThemeLayoutToggleKnob", "width": 24, "height": 24, "fill": "$text-tertiary", "cornerRadius": 12} - ]} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "ThemeFooter", - "width": "fill_container", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, - "padding": [16, 20], - "children": [ - {"type": "frame", "id": "ThemeSaveBtn", "width": "fill_container", "height": 52, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8533", "position": 1}]}, "cornerRadius": 12, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ThemeSaveIcon", "width": 20, "height": 20, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "ThemeSaveText", "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"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/shared/screens/training-mode.pen b/pencil-design/src/pages/tPOS/pos/shared/screens/training-mode.pen deleted file mode 100644 index 0646a861..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/screens/training-mode.pen +++ /dev/null @@ -1,462 +0,0 @@ -{ - "version": "2.7", - "children": [ - { - "type": "frame", - "id": "TrainingModeScreen", - "x": 0, - "y": 0, - "name": "Screen/TrainingMode", - "reusable": true, - "clip": true, - "width": 440, - "height": 597, - "fill": "$bg-elevated", - "cornerRadius": 24, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "TrainingModeHeader", - "width": "fill_container", - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "padding": [ - 16, - 20 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "TrainingModeHeaderLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "TrainingModeIconBg", - "width": 40, - "height": 40, - "fill": "#8B5CF620", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "TrainingModeIcon", - "width": 20, - "height": 20, - "iconFontName": "graduation-cap", - "iconFontFamily": "lucide", - "fill": "#8B5CF6" - } - ] - }, - { - "type": "text", - "id": "TrainingModeTitle", - "fill": "$text-primary", - "content": "Chế độ huấn luyện", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "TrainingModeCloseBtn", - "width": 36, - "height": 36, - "fill": "$bg-interactive", - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "TrainingModeCloseIcon", - "width": 18, - "height": 18, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "TrainingModeContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "gap": 20, - "padding": 20, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "TrainingModeBanner", - "width": "fill_container", - "fill": "#8B5CF615", - "cornerRadius": 16, - "layout": "vertical", - "gap": 12, - "padding": 20, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "TrainingModeBannerIcon", - "width": 64, - "height": 64, - "fill": "#8B5CF630", - "cornerRadius": 32, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "TrainingModeBannerIconInner", - "width": 32, - "height": 32, - "iconFontName": "graduation-cap", - "iconFontFamily": "lucide", - "fill": "#8B5CF6" - } - ] - }, - { - "type": "text", - "id": "TrainingModeBannerTitle", - "fill": "#8B5CF6", - "content": "Training Mode Active", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - }, - { - "type": "text", - "id": "TrainingModeBannerDesc", - "fill": "$text-secondary", - "content": "Các giao dịch không ảnh hưởng đến dữ liệu thật", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "TrainingModeOptions", - "width": "fill_container", - "layout": "vertical", - "gap": 10, - "children": [ - { - "type": "frame", - "id": "TrainingModeOption1", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 14, - "gap": 12, - "padding": 14, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "TrainingModeOption1Icon", - "width": 40, - "height": 40, - "fill": "#22C55E20", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "TrainingModeOption1IconInner", - "width": 20, - "height": 20, - "iconFontName": "shopping-cart", - "iconFontFamily": "lucide", - "fill": "#22C55E" - } - ] - }, - { - "type": "frame", - "id": "TrainingModeOption1Info", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "TrainingModeOption1Name", - "fill": "$text-primary", - "content": "Luyện tập bán hàng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "text", - "id": "TrainingModeOption1Desc", - "fill": "$text-tertiary", - "content": "Thực hành tạo đơn, thanh toán", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "icon_font", - "id": "TrainingModeOption1Arrow", - "width": 18, - "height": 18, - "iconFontName": "chevron-right", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - }, - { - "type": "frame", - "id": "TrainingModeOption2", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 14, - "gap": 12, - "padding": 14, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "TrainingModeOption2Icon", - "width": 40, - "height": 40, - "fill": "#3B82F620", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "TrainingModeOption2IconInner", - "width": 20, - "height": 20, - "iconFontName": "undo-2", - "iconFontFamily": "lucide", - "fill": "#3B82F6" - } - ] - }, - { - "type": "frame", - "id": "TrainingModeOption2Info", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "TrainingModeOption2Name", - "fill": "$text-primary", - "content": "Luyện hoàn tiền/hủy đơn", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "text", - "id": "TrainingModeOption2Desc", - "fill": "$text-tertiary", - "content": "Xử lý các tình huống đặc biệt", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "icon_font", - "id": "TrainingModeOption2Arrow", - "width": 18, - "height": 18, - "iconFontName": "chevron-right", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - }, - { - "type": "frame", - "id": "TrainingModeOption3", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 14, - "gap": 12, - "padding": 14, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "TrainingModeOption3Icon", - "width": 40, - "height": 40, - "fill": "#F59E0B20", - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "TrainingModeOption3IconInner", - "width": 20, - "height": 20, - "iconFontName": "bar-chart-3", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - } - ] - }, - { - "type": "frame", - "id": "TrainingModeOption3Info", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "TrainingModeOption3Name", - "fill": "$text-primary", - "content": "Xem báo cáo mẫu", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "text", - "id": "TrainingModeOption3Desc", - "fill": "$text-tertiary", - "content": "Làm quen với dashboard", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "icon_font", - "id": "TrainingModeOption3Arrow", - "width": 18, - "height": 18, - "iconFontName": "chevron-right", - "iconFontFamily": "lucide", - "fill": "$text-tertiary" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "TrainingModeFooter", - "width": "fill_container", - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "padding": [ - 16, - 20 - ], - "children": [ - { - "type": "frame", - "id": "TrainingModeExitBtn", - "width": "fill_container", - "height": 48, - "fill": "#EF444420", - "cornerRadius": 12, - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "TrainingModeExitIcon", - "width": 18, - "height": 18, - "iconFontName": "log-out", - "iconFontFamily": "lucide", - "fill": "#EF4444" - }, - { - "type": "text", - "id": "TrainingModeExitText", - "fill": "#EF4444", - "content": "Thoát chế độ huấn luyệ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/staff/cashier-journey.pen b/pencil-design/src/pages/tPOS/pos/shared/staff/cashier-journey.pen deleted file mode 100644 index d68ae3fd..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/staff/cashier-journey.pen +++ /dev/null @@ -1,351 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "CashierJourney1", - "name": "Cashier Journey/1-Login", - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CSJ1Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 24, - "padding": 32, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "CSJ1Step", "fill": "#3B82F620", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "CSJ1StepT", "fill": "#3B82F6", "content": "Bước 1/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "frame", "id": "CSJ1Icon", "width": 72, "height": 72, "fill": "#3B82F61A", "cornerRadius": 36, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CSJ1IconI", "width": 32, "height": 32, "iconFontName": "user-circle", "iconFontFamily": "lucide", "fill": "#3B82F6"} - ]}, - {"type": "frame", "id": "CSJ1Title", "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "CSJ1TitleT", "fill": "#FFFFFF", "content": "Đăng nhập Thu ngân", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}, - {"type": "text", "id": "CSJ1Desc", "fill": "#8B8B90", "content": "Nhập mã PIN để bắt đầu ca", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "CSJ1Staff", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 14, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "CSJ1Avatar", "width": 48, "height": 48, "fill": "#3B82F630", "cornerRadius": 24, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "CSJ1Initial", "fill": "#3B82F6", "content": "LM", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]}, - {"type": "frame", "id": "CSJ1Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "CSJ1Name", "fill": "#FFFFFF", "content": "Lê Mai", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "500"}, - {"type": "text", "id": "CSJ1Role", "fill": "#8B8B90", "content": "Thu ngân • Ca sáng", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "CSJ1PIN", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ - {"type": "text", "id": "CSJ1PINLabel", "fill": "#8B8B90", "content": "Mã PIN", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "frame", "id": "CSJ1PINDots", "width": "fill_container", "justifyContent": "center", "gap": 16, "children": [ - {"type": "frame", "id": "CSJ1Dot1", "width": 16, "height": 16, "fill": "#3B82F6", "cornerRadius": 8}, - {"type": "frame", "id": "CSJ1Dot2", "width": 16, "height": 16, "fill": "#3B82F6", "cornerRadius": 8}, - {"type": "frame", "id": "CSJ1Dot3", "width": 16, "height": 16, "fill": "#3B82F6", "cornerRadius": 8}, - {"type": "frame", "id": "CSJ1Dot4", "width": 16, "height": 16, "fill": "#2A2A2E", "cornerRadius": 8} - ]} - ]}, - {"type": "frame", "id": "CSJ1Confirm", "width": "fill_container", "height": 50, "fill": "#3B82F6", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CSJ1ConfirmI", "width": 18, "height": 18, "iconFontName": "log-in", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "CSJ1ConfirmT", "fill": "#FFFFFF", "content": "Đăng nhập", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "CashierJourney2", - "name": "Cashier Journey/2-OpenShift", - "x": 540, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CSJ2Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 20, - "padding": 28, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "CSJ2Step", "fill": "#22C55E20", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "CSJ2StepT", "fill": "#22C55E", "content": "Bước 2/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "frame", "id": "CSJ2Icon", "width": 64, "height": 64, "fill": "#22C55E1A", "cornerRadius": 32, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CSJ2IconI", "width": 28, "height": 28, "iconFontName": "briefcase", "iconFontFamily": "lucide", "fill": "#22C55E"} - ]}, - {"type": "frame", "id": "CSJ2Title", "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "CSJ2TitleT", "fill": "#FFFFFF", "content": "Mở ca làm việc", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}, - {"type": "text", "id": "CSJ2Desc", "fill": "#8B8B90", "content": "Kiểm tra tiền đầu ca", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "CSJ2Cash", "width": "fill_container", "fill": "#22C55E10", "cornerRadius": 14, "padding": 18, "layout": "vertical", "gap": 12, "alignItems": "center", "children": [ - {"type": "text", "id": "CSJ2CashLabel", "fill": "#8B8B90", "content": "TIỀN ĐẦU CA", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}, - {"type": "text", "id": "CSJ2CashValue", "fill": "#22C55E", "content": "5,000,000₫", "fontFamily": "Roboto", "fontSize": 32, "fontWeight": "700"}, - {"type": "text", "id": "CSJ2CashNote", "fill": "#8B8B90", "content": "Đã kiểm đếm bởi Quản lý", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "CSJ2Info", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 10, "children": [ - {"type": "frame", "id": "CSJ2Row1", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "CSJ2L1", "fill": "#8B8B90", "content": "Ca làm việc", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "CSJ2V1", "fill": "#FFFFFF", "content": "Ca sáng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "CSJ2Row2", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "CSJ2L2", "fill": "#8B8B90", "content": "Thời gian", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "CSJ2V2", "fill": "#FFFFFF", "content": "07:00 - 15:00", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "CSJ2Row3", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "CSJ2L3", "fill": "#8B8B90", "content": "Quầy", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "CSJ2V3", "fill": "#22C55E", "content": "Quầy 01", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]} - ]}, - {"type": "frame", "id": "CSJ2Confirm", "width": "fill_container", "height": 50, "fill": "#22C55E", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CSJ2ConfirmI", "width": 18, "height": 18, "iconFontName": "play", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "CSJ2ConfirmT", "fill": "#FFFFFF", "content": "Xác nhận & Mở ca", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "CashierJourney3", - "name": "Cashier Journey/3-Active", - "x": 1080, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CSJ3Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 16, - "padding": 24, - "children": [ - {"type": "frame", "id": "CSJ3Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "CSJ3Step", "fill": "#FF5C0020", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "CSJ3StepT", "fill": "#FF5C00", "content": "Bước 3/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "frame", "id": "CSJ3Status", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 8], "gap": 4, "alignItems": "center", "children": [ - {"type": "frame", "id": "CSJ3StatusDot", "width": 6, "height": 6, "fill": "#22C55E", "cornerRadius": 3}, - {"type": "text", "id": "CSJ3StatusT", "fill": "#22C55E", "content": "Đang hoạt động", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "CSJ3Title", "width": "fill_container", "children": [{"type": "text", "id": "CSJ3TitleT", "fill": "#FFFFFF", "content": "Dashboard Ca làm", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}]}, - {"type": "frame", "id": "CSJ3Stats", "width": "fill_container", "gap": 10, "children": [ - {"type": "frame", "id": "CSJ3Stat1", "width": "fill_container", "fill": "#FF5C0010", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "CSJ3Stat1V", "fill": "#FF5C00", "content": "12", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, - {"type": "text", "id": "CSJ3Stat1L", "fill": "#8B8B90", "content": "Đơn hàng", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "frame", "id": "CSJ3Stat2", "width": "fill_container", "fill": "#22C55E10", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "CSJ3Stat2V", "fill": "#22C55E", "content": "2.4M", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, - {"type": "text", "id": "CSJ3Stat2L", "fill": "#8B8B90", "content": "Doanh thu", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "CSJ3Time", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "CSJ3TimeL", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CSJ3TimeI", "width": 16, "height": 16, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#8B8B90"}, - {"type": "text", "id": "CSJ3TimeT", "fill": "#8B8B90", "content": "Thời gian làm việc", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "text", "id": "CSJ3TimeV", "fill": "#FFFFFF", "content": "3h 24m", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "CSJ3Recent", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ - {"type": "text", "id": "CSJ3RecentT", "fill": "#8B8B90", "content": "Giao dịch gần đây", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "frame", "id": "CSJ3Tx1", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 8, "padding": 10, "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "CSJ3Tx1L", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "CSJ3Tx1Icon", "width": 28, "height": 28, "fill": "#22C55E20", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "CSJ3Tx1I", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}]}, - {"type": "frame", "id": "CSJ3Tx1Info", "layout": "vertical", "gap": 1, "children": [ - {"type": "text", "id": "CSJ3Tx1N", "fill": "#FFFFFF", "content": "#ORD-042", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "text", "id": "CSJ3Tx1T", "fill": "#6B6B70", "content": "2 phút trước", "fontFamily": "Roboto", "fontSize": 10} - ]} - ]}, - {"type": "text", "id": "CSJ3Tx1V", "fill": "#22C55E", "content": "+145,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "CSJ3Tx2", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 8, "padding": 10, "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "CSJ3Tx2L", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "CSJ3Tx2Icon", "width": 28, "height": 28, "fill": "#22C55E20", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "CSJ3Tx2I", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}]}, - {"type": "frame", "id": "CSJ3Tx2Info", "layout": "vertical", "gap": 1, "children": [ - {"type": "text", "id": "CSJ3Tx2N", "fill": "#FFFFFF", "content": "#ORD-041", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "text", "id": "CSJ3Tx2T", "fill": "#6B6B70", "content": "8 phút trước", "fontFamily": "Roboto", "fontSize": 10} - ]} - ]}, - {"type": "text", "id": "CSJ3Tx2V", "fill": "#22C55E", "content": "+89,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "CSJ3Close", "width": "fill_container", "height": 44, "fill": "#EF444420", "cornerRadius": 10, "gap": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CSJ3CloseI", "width": 16, "height": 16, "iconFontName": "log-out", "iconFontFamily": "lucide", "fill": "#EF4444"}, - {"type": "text", "id": "CSJ3CloseT", "fill": "#EF4444", "content": "Đóng ca", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "CashierJourney4", - "name": "Cashier Journey/4-Transaction", - "x": 1620, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CSJ4Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 2, "fill": "#22C55E"}, - "layout": "vertical", - "gap": 20, - "padding": 28, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "CSJ4Step", "fill": "#22C55E20", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "CSJ4StepT", "fill": "#22C55E", "content": "Bước 4/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "frame", "id": "CSJ4Icon", "width": 64, "height": 64, "fill": "#22C55E1A", "cornerRadius": 32, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CSJ4IconI", "width": 28, "height": 28, "iconFontName": "receipt", "iconFontFamily": "lucide", "fill": "#22C55E"} - ]}, - {"type": "frame", "id": "CSJ4Title", "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "CSJ4TitleT", "fill": "#FFFFFF", "content": "Thu tiền khách", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}, - {"type": "text", "id": "CSJ4Desc", "fill": "#8B8B90", "content": "Đơn hàng #ORD-043", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "CSJ4Amount", "width": "fill_container", "fill": "#22C55E10", "cornerRadius": 14, "padding": 18, "layout": "vertical", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "CSJ4AmountL", "fill": "#8B8B90", "content": "TỔNG THANH TOÁN", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}, - {"type": "text", "id": "CSJ4AmountV", "fill": "#22C55E", "content": "255,000₫", "fontFamily": "Roboto", "fontSize": 36, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "CSJ4Method", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "CSJ4MethodL", "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CSJ4MethodI", "width": 20, "height": 20, "iconFontName": "banknote", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "CSJ4MethodT", "fill": "#FFFFFF", "content": "Tiền mặt", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "icon_font", "id": "CSJ4MethodCheck", "width": 18, "height": 18, "iconFontName": "check-circle-2", "iconFontFamily": "lucide", "fill": "#22C55E"} - ]}, - {"type": "frame", "id": "CSJ4Change", "width": "fill_container", "fill": "#F59E0B10", "cornerRadius": 10, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "CSJ4ChangeL", "fill": "#F59E0B", "content": "Khách đưa: 300,000₫", "fontFamily": "Roboto", "fontSize": 14}, - {"type": "text", "id": "CSJ4ChangeV", "fill": "#F59E0B", "content": "Thối: 45,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "CSJ4Confirm", "width": "fill_container", "height": 50, "fill": "#22C55E", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CSJ4ConfirmI", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "CSJ4ConfirmT", "fill": "#FFFFFF", "content": "Hoàn tất thanh toán", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "CashierJourney5", - "name": "Cashier Journey/5-CloseShift", - "x": 2160, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CSJ5Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 18, - "padding": 24, - "children": [ - {"type": "frame", "id": "CSJ5Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "CSJ5Step", "fill": "#F59E0B20", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "CSJ5StepT", "fill": "#F59E0B", "content": "Bước 5/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "text", "id": "CSJ5Time", "fill": "#8B8B90", "content": "15:02 • 8h làm", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "CSJ5Title", "width": "fill_container", "children": [{"type": "text", "id": "CSJ5TitleT", "fill": "#FFFFFF", "content": "Đóng ca làm việc", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}]}, - {"type": "frame", "id": "CSJ5Summary", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 10, "children": [ - {"type": "frame", "id": "CSJ5Row1", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "CSJ5L1", "fill": "#8B8B90", "content": "Tiền đầu ca", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "CSJ5V1", "fill": "#FFFFFF", "content": "5,000,000₫", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "frame", "id": "CSJ5Row2", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "CSJ5L2", "fill": "#8B8B90", "content": "Thu tiền mặt", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "CSJ5V2", "fill": "#22C55E", "content": "+3,450,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "CSJ5Row3", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "CSJ5L3", "fill": "#8B8B90", "content": "Thối lại", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "CSJ5V3", "fill": "#EF4444", "content": "-780,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "CSJ5Divider", "width": "fill_container", "height": 1, "fill": "#2A2A2E"}, - {"type": "frame", "id": "CSJ5Total", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "CSJ5TotalL", "fill": "#FFFFFF", "content": "Tiền cuối ca", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "text", "id": "CSJ5TotalV", "fill": "#F59E0B", "content": "7,670,000₫", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}]} - ]}, - {"type": "frame", "id": "CSJ5Count", "width": "fill_container", "fill": "#F59E0B10", "cornerRadius": 10, "padding": 14, "layout": "vertical", "gap": 10, "children": [ - {"type": "text", "id": "CSJ5CountLabel", "fill": "#F59E0B", "content": "Kiểm đếm tiền mặt", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "CSJ5CountInput", "width": "fill_container", "height": 48, "fill": "#1A1A1D", "cornerRadius": 8, "stroke": {"thickness": 1, "fill": "#F59E0B"}, "padding": [0, 14], "alignItems": "center", "children": [ - {"type": "text", "id": "CSJ5CountV", "fill": "#FFFFFF", "content": "7,670,000", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "CSJ5Match", "width": "fill_container", "fill": "#22C55E10", "cornerRadius": 8, "padding": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CSJ5MatchI", "width": 16, "height": 16, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "CSJ5MatchT", "fill": "#22C55E", "content": "Tiền khớp với hệ thống", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "CSJ5Confirm", "width": "fill_container", "height": 50, "fill": "#F59E0B", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CSJ5ConfirmI", "width": 18, "height": 18, "iconFontName": "lock", "iconFontFamily": "lucide", "fill": "#000"}, - {"type": "text", "id": "CSJ5ConfirmT", "fill": "#000000", "content": "Xác nhận đóng ca", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "CashierJourney6", - "name": "Cashier Journey/6-Report", - "x": 2700, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CSJ6Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 20, - "padding": 28, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "CSJ6Step", "fill": "#14B8A620", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "CSJ6StepT", "fill": "#14B8A6", "content": "Hoàn tất", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "frame", "id": "CSJ6Icon", "width": 72, "height": 72, "fill": "#14B8A61A", "cornerRadius": 36, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CSJ6IconI", "width": 32, "height": 32, "iconFontName": "bar-chart-3", "iconFontFamily": "lucide", "fill": "#14B8A6"} - ]}, - {"type": "frame", "id": "CSJ6Title", "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "CSJ6TitleT", "fill": "#FFFFFF", "content": "Báo cáo Ca sáng", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}, - {"type": "text", "id": "CSJ6Desc", "fill": "#8B8B90", "content": "06/02/2026 • Lê Mai", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "CSJ6Stats", "width": "fill_container", "gap": 10, "children": [ - {"type": "frame", "id": "CSJ6Stat1", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "CSJ6Stat1V", "fill": "#14B8A6", "content": "32", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"}, - {"type": "text", "id": "CSJ6Stat1L", "fill": "#8B8B90", "content": "Đơn hàng", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "frame", "id": "CSJ6Stat2", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "CSJ6Stat2V", "fill": "#22C55E", "content": "8.2M", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"}, - {"type": "text", "id": "CSJ6Stat2L", "fill": "#8B8B90", "content": "Doanh thu", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "CSJ6Details", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 8, "children": [ - {"type": "frame", "id": "CSJ6D1", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "CSJ6D1L", "fill": "#8B8B90", "content": "Tiền mặt", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "CSJ6D1V", "fill": "#FFFFFF", "content": "3,450,000₫", "fontFamily": "Roboto", "fontSize": 12}]}, - {"type": "frame", "id": "CSJ6D2", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "CSJ6D2L", "fill": "#8B8B90", "content": "Chuyển khoản", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "CSJ6D2V", "fill": "#FFFFFF", "content": "4,750,000₫", "fontFamily": "Roboto", "fontSize": 12}]}, - {"type": "frame", "id": "CSJ6D3", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "CSJ6D3L", "fill": "#8B8B90", "content": "Thẻ", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "CSJ6D3V", "fill": "#FFFFFF", "content": "0₫", "fontFamily": "Roboto", "fontSize": 12}]} - ]}, - {"type": "frame", "id": "CSJ6Actions", "width": "fill_container", "gap": 10, "children": [ - {"type": "frame", "id": "CSJ6Print", "width": "fill_container", "height": 44, "fill": "#2A2A2E", "cornerRadius": 10, "gap": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "CSJ6PrintI", "width": 16, "height": 16, "iconFontName": "printer", "iconFontFamily": "lucide", "fill": "#ADADB0"}, - {"type": "text", "id": "CSJ6PrintT", "fill": "#ADADB0", "content": "In báo cáo", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "CSJ6Done", "width": "fill_container", "height": 44, "fill": "#14B8A6", "cornerRadius": 10, "gap": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "CSJ6DoneT", "fill": "#FFFFFF", "content": "Hoàn tất", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ] - } - ] - } - ] -} diff --git a/pencil-design/src/pages/tPOS/pos/shared/staff/kitchen-journey.pen b/pencil-design/src/pages/tPOS/pos/shared/staff/kitchen-journey.pen deleted file mode 100644 index 1392a928..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/staff/kitchen-journey.pen +++ /dev/null @@ -1,340 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "KitchenJourney1", - "name": "Kitchen Journey/1-Queue", - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "KTJ1Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 16, - "padding": 24, - "children": [ - {"type": "frame", "id": "KTJ1Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "KTJ1Step", "fill": "#FF5C0020", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "KTJ1StepT", "fill": "#FF5C00", "content": "Bước 1/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "frame", "id": "KTJ1Badge", "fill": "#EF4444", "cornerRadius": 10, "padding": [4, 10], "children": [{"type": "text", "id": "KTJ1BadgeT", "fill": "#FFFFFF", "content": "5 đơn chờ", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]} - ]}, - {"type": "frame", "id": "KTJ1Title", "width": "fill_container", "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "KTJ1TitleI", "width": 24, "height": 24, "iconFontName": "chef-hat", "iconFontFamily": "lucide", "fill": "#FF5C00"}, - {"type": "text", "id": "KTJ1TitleT", "fill": "#FFFFFF", "content": "Đơn hàng chờ", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "KTJ1Orders", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ - {"type": "frame", "id": "KTJ1Order1", "width": "fill_container", "fill": "#EF444420", "stroke": {"thickness": 2, "fill": "#EF4444"}, "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 10, "children": [ - {"type": "frame", "id": "KTJ1O1Header", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "KTJ1O1L", "gap": 6, "alignItems": "center", "children": [{"type": "text", "id": "KTJ1O1N", "fill": "#FFFFFF", "content": "#ORD-045", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "frame", "id": "KTJ1O1Urgent", "fill": "#EF4444", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "KTJ1O1UT", "fill": "#FFF", "content": "GẤP", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "700"}]}]}, - {"type": "text", "id": "KTJ1O1Time", "fill": "#EF4444", "content": "5 phút", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "KTJ1O1Items", "width": "fill_container", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "KTJ1O1I1", "fill": "#ADADB0", "content": "2x Phở bò tái", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "KTJ1O1I2", "fill": "#ADADB0", "content": "1x Bún chả", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "KTJ1Order2", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 10, "children": [ - {"type": "frame", "id": "KTJ1O2Header", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "KTJ1O2N", "fill": "#FFFFFF", "content": "#ORD-044", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "KTJ1O2Time", "fill": "#8B8B90", "content": "3 phút", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "text", "id": "KTJ1O2I1", "fill": "#ADADB0", "content": "1x Cơm tấm sườn bì chả", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "KTJ1Order3", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 10, "children": [ - {"type": "frame", "id": "KTJ1O3Header", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "KTJ1O3N", "fill": "#FFFFFF", "content": "#ORD-043", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "KTJ1O3Time", "fill": "#8B8B90", "content": "1 phút", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "text", "id": "KTJ1O3I1", "fill": "#ADADB0", "content": "3x Gỏi cuốn", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "KTJ1Accept", "width": "fill_container", "height": 48, "fill": "#FF5C00", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "KTJ1AcceptI", "width": 18, "height": 18, "iconFontName": "hand", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "KTJ1AcceptT", "fill": "#FFFFFF", "content": "Nhận đơn #ORD-045", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "KitchenJourney2", - "name": "Kitchen Journey/2-Accept", - "x": 540, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "KTJ2Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 2, "fill": "#3B82F6"}, - "layout": "vertical", - "gap": 20, - "padding": 28, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "KTJ2Step", "fill": "#3B82F620", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "KTJ2StepT", "fill": "#3B82F6", "content": "Bước 2/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "frame", "id": "KTJ2Icon", "width": 64, "height": 64, "fill": "#3B82F61A", "cornerRadius": 32, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "KTJ2IconI", "width": 28, "height": 28, "iconFontName": "clipboard-check", "iconFontFamily": "lucide", "fill": "#3B82F6"} - ]}, - {"type": "frame", "id": "KTJ2Title", "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "KTJ2TitleT", "fill": "#FFFFFF", "content": "Đã nhận đơn #ORD-045", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}, - {"type": "text", "id": "KTJ2Desc", "fill": "#8B8B90", "content": "Bắt đầu chuẩn bị món", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "KTJ2Items", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 14, "padding": 16, "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "KTJ2Item1", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "KTJ2I1L", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "KTJ2I1Check", "width": 24, "height": 24, "fill": "#2A2A2E", "cornerRadius": 6, "stroke": {"thickness": 1, "fill": "#3B82F6"}, "justifyContent": "center", "alignItems": "center"}, - {"type": "text", "id": "KTJ2I1T", "fill": "#FFFFFF", "content": "2x Phở bò tái", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "KTJ2I1Status", "fill": "#3B82F620", "cornerRadius": 4, "padding": [4, 8], "children": [{"type": "text", "id": "KTJ2I1ST", "fill": "#3B82F6", "content": "Bắt đầu", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]} - ]}, - {"type": "frame", "id": "KTJ2Item2", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "KTJ2I2L", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "KTJ2I2Check", "width": 24, "height": 24, "fill": "#2A2A2E", "cornerRadius": 6}, - {"type": "text", "id": "KTJ2I2T", "fill": "#8B8B90", "content": "1x Bún chả", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "text", "id": "KTJ2I2S", "fill": "#6B6B70", "content": "Chờ", "fontFamily": "Roboto", "fontSize": 10} - ]} - ]}, - {"type": "frame", "id": "KTJ2Timer", "width": "fill_container", "fill": "#3B82F610", "cornerRadius": 10, "padding": 12, "justifyContent": "center", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "KTJ2TimerI", "width": 16, "height": 16, "iconFontName": "timer", "iconFontFamily": "lucide", "fill": "#3B82F6"}, - {"type": "text", "id": "KTJ2TimerT", "fill": "#3B82F6", "content": "Mục tiêu: 10 phút", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "KTJ2Start", "width": "fill_container", "height": 50, "fill": "#3B82F6", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "KTJ2StartI", "width": 18, "height": 18, "iconFontName": "flame", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "KTJ2StartT", "fill": "#FFFFFF", "content": "Bắt đầu nấu", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "KitchenJourney3", - "name": "Kitchen Journey/3-Cooking", - "x": 1080, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "KTJ3Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 18, - "padding": 24, - "children": [ - {"type": "frame", "id": "KTJ3Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "KTJ3Step", "fill": "#EC489920", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "KTJ3StepT", "fill": "#EC4899", "content": "Bước 3/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "text", "id": "KTJ3Order", "fill": "#8B8B90", "content": "#ORD-045", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "KTJ3Timer", "width": "fill_container", "fill": "#EC48991A", "cornerRadius": 14, "padding": 18, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "KTJ3TimerL", "fill": "#EC4899", "content": "ĐANG NẤU", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}, - {"type": "text", "id": "KTJ3TimerV", "fill": "#EC4899", "content": "04:32", "fontFamily": "Roboto", "fontSize": 40, "fontWeight": "700"}, - {"type": "text", "id": "KTJ3TimerR", "fill": "#8B8B90", "content": "Còn 5:28 cho mục tiêu", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "KTJ3Items", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ - {"type": "frame", "id": "KTJ3Item1", "width": "fill_container", "fill": "#22C55E10", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "KTJ3I1L", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "KTJ3I1Check", "width": 24, "height": 24, "fill": "#22C55E", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "KTJ3I1CI", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFF"}]}, - {"type": "text", "id": "KTJ3I1T", "fill": "#FFFFFF", "content": "2x Phở bò tái", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "text", "id": "KTJ3I1S", "fill": "#22C55E", "content": "Xong", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "KTJ3Item2", "width": "fill_container", "fill": "#EC489910", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "KTJ3I2L", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "KTJ3I2Check", "width": 24, "height": 24, "fill": "#EC4899", "cornerRadius": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "KTJ3I2CI", "width": 14, "height": 14, "iconFontName": "loader-2", "iconFontFamily": "lucide", "fill": "#FFF"}]}, - {"type": "text", "id": "KTJ3I2T", "fill": "#FFFFFF", "content": "1x Bún chả", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "text", "id": "KTJ3I2S", "fill": "#EC4899", "content": "Đang nấu", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "KTJ3Actions", "width": "fill_container", "gap": 10, "children": [ - {"type": "frame", "id": "KTJ3Issue", "width": 48, "height": 48, "fill": "#EF444420", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "KTJ3IssueI", "width": 20, "height": 20, "iconFontName": "alert-triangle", "iconFontFamily": "lucide", "fill": "#EF4444"}]}, - {"type": "frame", "id": "KTJ3Complete", "width": "fill_container", "height": 48, "fill": "#22C55E", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "KTJ3CompleteI", "width": 18, "height": 18, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "KTJ3CompleteT", "fill": "#FFFFFF", "content": "Hoàn thành món", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "KitchenJourney4", - "name": "Kitchen Journey/4-Ready", - "x": 1620, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "KTJ4Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 2, "fill": "#22C55E"}, - "layout": "vertical", - "gap": 24, - "padding": 32, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "KTJ4Step", "fill": "#22C55E20", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "KTJ4StepT", "fill": "#22C55E", "content": "Bước 4/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "frame", "id": "KTJ4Icon", "width": 72, "height": 72, "fill": "#22C55E1A", "cornerRadius": 36, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "KTJ4IconI", "width": 32, "height": 32, "iconFontName": "utensils-crossed", "iconFontFamily": "lucide", "fill": "#22C55E"} - ]}, - {"type": "frame", "id": "KTJ4Title", "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "KTJ4TitleT", "fill": "#FFFFFF", "content": "Món đã sẵn sàng!", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}, - {"type": "text", "id": "KTJ4Desc", "fill": "#8B8B90", "content": "#ORD-045 • Bàn 12", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "KTJ4Time", "width": "fill_container", "fill": "#22C55E10", "cornerRadius": 12, "padding": 14, "justifyContent": "center", "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "KTJ4TimeI", "width": 18, "height": 18, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "KTJ4TimeT", "fill": "#22C55E", "content": "Hoàn thành trong 8:45 phút", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "KTJ4Items", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 8, "children": [ - {"type": "frame", "id": "KTJ4I1", "width": "fill_container", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "KTJ4I1I", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}, {"type": "text", "id": "KTJ4I1T", "fill": "#FFFFFF", "content": "2x Phở bò tái", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "frame", "id": "KTJ4I2", "width": "fill_container", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "KTJ4I2I", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}, {"type": "text", "id": "KTJ4I2T", "fill": "#FFFFFF", "content": "1x Bún chả", "fontFamily": "Roboto", "fontSize": 13}]} - ]}, - {"type": "frame", "id": "KTJ4Bell", "width": "fill_container", "height": 50, "fill": "#22C55E", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "KTJ4BellI", "width": 18, "height": 18, "iconFontName": "bell-ring", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "KTJ4BellT", "fill": "#FFFFFF", "content": "Gọi phục vụ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "KitchenJourney5", - "name": "Kitchen Journey/5-Served", - "x": 2160, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "KTJ5Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 24, - "padding": 32, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "KTJ5Step", "fill": "#14B8A620", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "KTJ5StepT", "fill": "#14B8A6", "content": "Bước 5/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "frame", "id": "KTJ5Icon", "width": 72, "height": 72, "fill": "#14B8A61A", "cornerRadius": 36, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "KTJ5IconI", "width": 32, "height": 32, "iconFontName": "truck", "iconFontFamily": "lucide", "fill": "#14B8A6"} - ]}, - {"type": "frame", "id": "KTJ5Title", "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "KTJ5TitleT", "fill": "#FFFFFF", "content": "Đã giao cho khách", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}, - {"type": "text", "id": "KTJ5Desc", "fill": "#8B8B90", "content": "#ORD-045 • Bàn 12", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "KTJ5Server", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 14, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "KTJ5Avatar", "width": 44, "height": 44, "fill": "#14B8A630", "cornerRadius": 22, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "KTJ5Initial", "fill": "#14B8A6", "content": "HT", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, - {"type": "frame", "id": "KTJ5Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "KTJ5Name", "fill": "#FFFFFF", "content": "Hoàng Tùng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "KTJ5Role", "fill": "#8B8B90", "content": "Đã phục vụ món • 14:23", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "KTJ5Summary", "width": "fill_container", "fill": "#14B8A610", "cornerRadius": 10, "padding": 14, "layout": "vertical", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "KTJ5SumL", "fill": "#14B8A6", "content": "Thời gian hoàn thành", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "KTJ5SumV", "fill": "#14B8A6", "content": "8:45", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, - {"type": "frame", "id": "KTJ5SumBadge", "fill": "#22C55E", "cornerRadius": 4, "padding": [4, 8], "children": [{"type": "text", "id": "KTJ5SumBT", "fill": "#FFF", "content": "Nhanh hơn mục tiêu!", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]} - ]}, - {"type": "frame", "id": "KTJ5Next", "width": "fill_container", "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "KTJ5NextT", "fill": "#FFFFFF", "content": "Xem đơn tiếp theo", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]} - ] - } - ] - }, - { - "type": "frame", - "id": "KitchenJourney6", - "name": "Kitchen Journey/6-Stats", - "x": 2700, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "KTJ6Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 16, - "padding": 24, - "children": [ - {"type": "frame", "id": "KTJ6Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "KTJ6Step", "fill": "#8B5CF620", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "KTJ6StepT", "fill": "#8B5CF6", "content": "Thống kê", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "text", "id": "KTJ6Date", "fill": "#8B8B90", "content": "Hôm nay", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "KTJ6Title", "width": "fill_container", "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "KTJ6TitleI", "width": 24, "height": 24, "iconFontName": "bar-chart-3", "iconFontFamily": "lucide", "fill": "#8B5CF6"}, - {"type": "text", "id": "KTJ6TitleT", "fill": "#FFFFFF", "content": "Hiệu suất bếp", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "KTJ6Stats", "width": "fill_container", "gap": 10, "children": [ - {"type": "frame", "id": "KTJ6Stat1", "width": "fill_container", "fill": "#22C55E10", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "KTJ6S1V", "fill": "#22C55E", "content": "45", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, - {"type": "text", "id": "KTJ6S1L", "fill": "#8B8B90", "content": "Món xong", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "frame", "id": "KTJ6Stat2", "width": "fill_container", "fill": "#3B82F610", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "KTJ6S2V", "fill": "#3B82F6", "content": "8.2", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, - {"type": "text", "id": "KTJ6S2L", "fill": "#8B8B90", "content": "Phút/món", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "KTJ6Breakdown", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 10, "children": [ - {"type": "text", "id": "KTJ6BLabel", "fill": "#8B8B90", "content": "Chi tiết", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "frame", "id": "KTJ6B1", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "KTJ6B1L", "fill": "#ADADB0", "content": "Đúng giờ", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "KTJ6B1V", "fill": "#22C55E", "content": "42 (93%)", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "KTJ6B2", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "KTJ6B2L", "fill": "#ADADB0", "content": "Chậm trễ", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "KTJ6B2V", "fill": "#F59E0B", "content": "3 (7%)", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "KTJ6B3", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "KTJ6B3L", "fill": "#ADADB0", "content": "Phản hồi tốt", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "KTJ6B3V", "fill": "#8B5CF6", "content": "12 lượt", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]} - ]}, - {"type": "frame", "id": "KTJ6Rating", "width": "fill_container", "fill": "#8B5CF610", "cornerRadius": 10, "padding": 14, "justifyContent": "center", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "KTJ6Stars", "gap": 4, "children": [ - {"type": "icon_font", "id": "KTJ6Star1", "width": 18, "height": 18, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "KTJ6Star2", "width": 18, "height": 18, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "KTJ6Star3", "width": 18, "height": 18, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "KTJ6Star4", "width": 18, "height": 18, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "KTJ6Star5", "width": 18, "height": 18, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#2A2A2E"} - ]}, - {"type": "text", "id": "KTJ6RatingV", "fill": "#8B5CF6", "content": "4.8/5", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"} - ]} - ] - } - ] - } - ] -} diff --git a/pencil-design/src/pages/tPOS/pos/shared/staff/manager-journey.pen b/pencil-design/src/pages/tPOS/pos/shared/staff/manager-journey.pen deleted file mode 100644 index ade8c048..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/staff/manager-journey.pen +++ /dev/null @@ -1,383 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "ManagerJourney1", - "name": "Manager Journey/1-Dashboard", - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "MJ1Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 16, - "padding": 24, - "children": [ - {"type": "frame", "id": "MJ1Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "MJ1Step", "fill": "#3B82F620", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "MJ1StepT", "fill": "#3B82F6", "content": "Bước 1/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "frame", "id": "MJ1User", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "MJ1Avatar", "width": 28, "height": 28, "fill": "#8B5CF630", "cornerRadius": 14, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "MJ1Initial", "fill": "#8B5CF6", "content": "QL", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}, - {"type": "text", "id": "MJ1Name", "fill": "#8B8B90", "content": "Quản lý", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "MJ1Title", "width": "fill_container", "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MJ1TitleI", "width": 22, "height": 22, "iconFontName": "layout-dashboard", "iconFontFamily": "lucide", "fill": "#3B82F6"}, - {"type": "text", "id": "MJ1TitleT", "fill": "#FFFFFF", "content": "Dashboard cửa hàng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "MJ1Stats", "width": "fill_container", "gap": 10, "children": [ - {"type": "frame", "id": "MJ1Stat1", "width": "fill_container", "fill": "#22C55E10", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "MJ1S1V", "fill": "#22C55E", "content": "12.5M", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "text", "id": "MJ1S1L", "fill": "#8B8B90", "content": "Doanh thu", "fontFamily": "Roboto", "fontSize": 10} - ]}, - {"type": "frame", "id": "MJ1Stat2", "width": "fill_container", "fill": "#3B82F610", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "MJ1S2V", "fill": "#3B82F6", "content": "89", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "text", "id": "MJ1S2L", "fill": "#8B8B90", "content": "Đơn hàng", "fontFamily": "Roboto", "fontSize": 10} - ]} - ]}, - {"type": "frame", "id": "MJ1Alerts", "width": "fill_container", "fill": "#EF444420", "cornerRadius": 12, "padding": 14, "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "MJ1AlertIcon", "width": 36, "height": 36, "fill": "#EF4444", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "MJ1AlertI", "width": 18, "height": 18, "iconFontName": "alert-triangle", "iconFontFamily": "lucide", "fill": "#FFF"}]}, - {"type": "frame", "id": "MJ1AlertInfo", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "MJ1AlertTitle", "fill": "#EF4444", "content": "3 cảnh báo cần xử lý", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "MJ1AlertDesc", "fill": "#8B8B90", "content": "1 yêu cầu hoàn tiền, 2 hàng sắp hết", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "MJ1Staff", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "MJ1StaffL", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "MJ1StaffI", "width": 16, "height": 16, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "#8B8B90"}, {"type": "text", "id": "MJ1StaffT", "fill": "#FFFFFF", "content": "Nhân viên đang làm", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "text", "id": "MJ1StaffV", "fill": "#22C55E", "content": "8/10", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "MJ1Tables", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "MJ1TablesL", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "MJ1TablesI", "width": 16, "height": 16, "iconFontName": "layout-grid", "iconFontFamily": "lucide", "fill": "#8B8B90"}, {"type": "text", "id": "MJ1TablesT", "fill": "#FFFFFF", "content": "Bàn đang hoạt động", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "text", "id": "MJ1TablesV", "fill": "#FF5C00", "content": "18/25", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "MJ1Action", "width": "fill_container", "height": 48, "fill": "#EF4444", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MJ1ActionI", "width": 18, "height": 18, "iconFontName": "alert-triangle", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "MJ1ActionT", "fill": "#FFFFFF", "content": "Xử lý cảnh báo (3)", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "ManagerJourney2", - "name": "Manager Journey/2-Alerts", - "x": 540, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "MJ2Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 2, "fill": "#EF4444"}, - "layout": "vertical", - "gap": 18, - "padding": 24, - "children": [ - {"type": "frame", "id": "MJ2Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "MJ2Step", "fill": "#EF444420", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "MJ2StepT", "fill": "#EF4444", "content": "Bước 2/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "frame", "id": "MJ2Badge", "fill": "#EF4444", "cornerRadius": 10, "padding": [4, 10], "children": [{"type": "text", "id": "MJ2BadgeT", "fill": "#FFF", "content": "3 cảnh báo", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]} - ]}, - {"type": "frame", "id": "MJ2Title", "width": "fill_container", "children": [{"type": "text", "id": "MJ2TitleT", "fill": "#FFFFFF", "content": "Xử lý cảnh báo", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}]}, - {"type": "frame", "id": "MJ2Alerts", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ - {"type": "frame", "id": "MJ2Alert1", "width": "fill_container", "fill": "#EF444420", "stroke": {"thickness": 2, "fill": "#EF4444"}, "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 10, "children": [ - {"type": "frame", "id": "MJ2A1Header", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "MJ2A1L", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MJ2A1I", "width": 18, "height": 18, "iconFontName": "undo-2", "iconFontFamily": "lucide", "fill": "#EF4444"}, - {"type": "text", "id": "MJ2A1T", "fill": "#EF4444", "content": "Yêu cầu hoàn tiền", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "text", "id": "MJ2A1Time", "fill": "#8B8B90", "content": "5 phút", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "text", "id": "MJ2A1Desc", "fill": "#ADADB0", "content": "Bàn 12 • 195,000₫ • Món không đúng", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "MJ2A1Actions", "width": "fill_container", "gap": 8, "children": [ - {"type": "frame", "id": "MJ2A1Reject", "width": "fill_container", "height": 36, "fill": "#2A2A2E", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "MJ2A1RejectT", "fill": "#ADADB0", "content": "Từ chối", "fontFamily": "Roboto", "fontSize": 12}]}, - {"type": "frame", "id": "MJ2A1Approve", "width": "fill_container", "height": 36, "fill": "#EF4444", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "MJ2A1ApproveT", "fill": "#FFF", "content": "Duyệt hoàn", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]} - ]} - ]}, - {"type": "frame", "id": "MJ2Alert2", "width": "fill_container", "fill": "#F59E0B20", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 6, "children": [ - {"type": "frame", "id": "MJ2A2L", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MJ2A2I", "width": 18, "height": 18, "iconFontName": "package", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "text", "id": "MJ2A2T", "fill": "#F59E0B", "content": "Hàng sắp hết", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "text", "id": "MJ2A2Desc", "fill": "#ADADB0", "content": "Thịt bò còn 5 phần • Rau còn 10 phần", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "MJ2Alert3", "width": "fill_container", "fill": "#F59E0B20", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 6, "children": [ - {"type": "frame", "id": "MJ2A3L", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MJ2A3I", "width": 18, "height": 18, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "text", "id": "MJ2A3T", "fill": "#F59E0B", "content": "Đơn chậm trễ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "text", "id": "MJ2A3Desc", "fill": "#ADADB0", "content": "#ORD-052 vượt 15 phút mục tiêu", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "ManagerJourney3", - "name": "Manager Journey/3-Staff", - "x": 1080, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "MJ3Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 16, - "padding": 24, - "children": [ - {"type": "frame", "id": "MJ3Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "MJ3Step", "fill": "#8B5CF620", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "MJ3StepT", "fill": "#8B5CF6", "content": "Bước 3/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "text", "id": "MJ3Count", "fill": "#8B8B90", "content": "8 nhân viên", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "MJ3Title", "width": "fill_container", "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MJ3TitleI", "width": 22, "height": 22, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "#8B5CF6"}, - {"type": "text", "id": "MJ3TitleT", "fill": "#FFFFFF", "content": "Quản lý nhân viên", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "MJ3Staff", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "frame", "id": "MJ3S1", "width": "fill_container", "fill": "#22C55E10", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "MJ3S1L", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "MJ3S1Avatar", "width": 36, "height": 36, "fill": "#22C55E30", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "MJ3S1I", "fill": "#22C55E", "content": "LM", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "MJ3S1Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "MJ3S1N", "fill": "#FFFFFF", "content": "Lê Mai", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "text", "id": "MJ3S1R", "fill": "#22C55E", "content": "Thu ngân • 12 đơn", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "MJ3S1Status", "width": 8, "height": 8, "fill": "#22C55E", "cornerRadius": 4} - ]}, - {"type": "frame", "id": "MJ3S2", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "MJ3S2L", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "MJ3S2Avatar", "width": 36, "height": 36, "fill": "#3B82F630", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "MJ3S2I", "fill": "#3B82F6", "content": "HT", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "MJ3S2Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "MJ3S2N", "fill": "#FFFFFF", "content": "Hoàng Tùng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "text", "id": "MJ3S2R", "fill": "#8B8B90", "content": "Phục vụ • 6 bàn", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "MJ3S2Status", "width": 8, "height": 8, "fill": "#22C55E", "cornerRadius": 4} - ]}, - {"type": "frame", "id": "MJ3S3", "width": "fill_container", "fill": "#FF5C0010", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "MJ3S3L", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "MJ3S3Avatar", "width": 36, "height": 36, "fill": "#FF5C0030", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "MJ3S3I", "fill": "#FF5C00", "content": "BT", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "MJ3S3Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "MJ3S3N", "fill": "#FFFFFF", "content": "Bảo Trâm", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "text", "id": "MJ3S3R", "fill": "#FF5C00", "content": "Bếp • 45 món", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "MJ3S3Status", "width": 8, "height": 8, "fill": "#22C55E", "cornerRadius": 4} - ]} - ]}, - {"type": "frame", "id": "MJ3Summary", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "padding": 12, "justifyContent": "space_around", "children": [ - {"type": "frame", "id": "MJ3Sum1", "alignItems": "center", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "MJ3Sum1V", "fill": "#22C55E", "content": "8", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "MJ3Sum1L", "fill": "#6B6B70", "content": "Đang làm", "fontFamily": "Roboto", "fontSize": 10}]}, - {"type": "frame", "id": "MJ3Sum2", "alignItems": "center", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "MJ3Sum2V", "fill": "#F59E0B", "content": "1", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "MJ3Sum2L", "fill": "#6B6B70", "content": "Nghỉ", "fontFamily": "Roboto", "fontSize": 10}]}, - {"type": "frame", "id": "MJ3Sum3", "alignItems": "center", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "MJ3Sum3V", "fill": "#6B6B70", "content": "1", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "MJ3Sum3L", "fill": "#6B6B70", "content": "Vắng", "fontFamily": "Roboto", "fontSize": 10}]} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "ManagerJourney4", - "name": "Manager Journey/4-Inventory", - "x": 1620, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "MJ4Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 16, - "padding": 24, - "children": [ - {"type": "frame", "id": "MJ4Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "MJ4Step", "fill": "#F59E0B20", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "MJ4StepT", "fill": "#F59E0B", "content": "Bước 4/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "frame", "id": "MJ4Badge", "fill": "#F59E0B", "cornerRadius": 6, "padding": [4, 8], "children": [{"type": "text", "id": "MJ4BadgeT", "fill": "#000", "content": "2 cảnh báo", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]} - ]}, - {"type": "frame", "id": "MJ4Title", "width": "fill_container", "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MJ4TitleI", "width": 22, "height": 22, "iconFontName": "package", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "text", "id": "MJ4TitleT", "fill": "#FFFFFF", "content": "Kiểm kho", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "MJ4Items", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "frame", "id": "MJ4I1", "width": "fill_container", "fill": "#EF444420", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "MJ4I1L", "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MJ4I1I", "width": 18, "height": 18, "iconFontName": "beef", "iconFontFamily": "lucide", "fill": "#EF4444"}, - {"type": "frame", "id": "MJ4I1Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "MJ4I1N", "fill": "#FFFFFF", "content": "Thịt bò", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "text", "id": "MJ4I1S", "fill": "#EF4444", "content": "Còn 5 phần", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "MJ4I1Btn", "fill": "#EF4444", "cornerRadius": 6, "padding": [6, 12], "children": [{"type": "text", "id": "MJ4I1BtnT", "fill": "#FFF", "content": "Đặt thêm", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]} - ]}, - {"type": "frame", "id": "MJ4I2", "width": "fill_container", "fill": "#F59E0B20", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "MJ4I2L", "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MJ4I2I", "width": 18, "height": 18, "iconFontName": "salad", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "frame", "id": "MJ4I2Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "MJ4I2N", "fill": "#FFFFFF", "content": "Rau sống", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "text", "id": "MJ4I2S", "fill": "#F59E0B", "content": "Còn 10 phần", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "text", "id": "MJ4I2Status", "fill": "#F59E0B", "content": "Thấp", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "MJ4I3", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "MJ4I3L", "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MJ4I3I", "width": 18, "height": 18, "iconFontName": "soup", "iconFontFamily": "lucide", "fill": "#8B8B90"}, - {"type": "frame", "id": "MJ4I3Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "MJ4I3N", "fill": "#FFFFFF", "content": "Bánh phở", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "text", "id": "MJ4I3S", "fill": "#22C55E", "content": "Còn 50 phần", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "text", "id": "MJ4I3Status", "fill": "#22C55E", "content": "Đủ", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "MJ4Order", "width": "fill_container", "height": 48, "fill": "#F59E0B", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MJ4OrderI", "width": 18, "height": 18, "iconFontName": "truck", "iconFontFamily": "lucide", "fill": "#000"}, - {"type": "text", "id": "MJ4OrderT", "fill": "#000000", "content": "Đặt hàng nhà cung cấp", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "ManagerJourney5", - "name": "Manager Journey/5-Override", - "x": 2160, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "MJ5Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 2, "fill": "#FF5C00"}, - "layout": "vertical", - "gap": 20, - "padding": 28, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "MJ5Step", "fill": "#FF5C0020", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "MJ5StepT", "fill": "#FF5C00", "content": "Bước 5/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "frame", "id": "MJ5Icon", "width": 64, "height": 64, "fill": "#FF5C001A", "cornerRadius": 32, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MJ5IconI", "width": 28, "height": 28, "iconFontName": "shield-check", "iconFontFamily": "lucide", "fill": "#FF5C00"} - ]}, - {"type": "frame", "id": "MJ5Title", "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "MJ5TitleT", "fill": "#FFFFFF", "content": "Duyệt giảm giá", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}, - {"type": "text", "id": "MJ5Desc", "fill": "#8B8B90", "content": "Yêu cầu từ Thu ngân Lê Mai", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "MJ5Request", "width": "fill_container", "fill": "#FF5C0010", "cornerRadius": 14, "padding": 16, "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "MJ5R1", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "MJ5R1L", "fill": "#8B8B90", "content": "Đơn hàng", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "MJ5R1V", "fill": "#FFFFFF", "content": "#ORD-058", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "MJ5R2", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "MJ5R2L", "fill": "#8B8B90", "content": "Tổng đơn", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "MJ5R2V", "fill": "#FFFFFF", "content": "450,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "MJ5R3", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "MJ5R3L", "fill": "#8B8B90", "content": "Giảm giá yêu cầu", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "MJ5R3V", "fill": "#FF5C00", "content": "-20% (-90,000₫)", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, - {"type": "frame", "id": "MJ5Div", "width": "fill_container", "height": 1, "fill": "#FF5C0030"}, - {"type": "frame", "id": "MJ5R4", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "MJ5R4L", "fill": "#8B8B90", "content": "Lý do", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "MJ5R4V", "fill": "#FFFFFF", "content": "Khách VIP, đặt buffet", "fontFamily": "Roboto", "fontSize": 13}]} - ]}, - {"type": "frame", "id": "MJ5Actions", "width": "fill_container", "gap": 10, "children": [ - {"type": "frame", "id": "MJ5Reject", "width": "fill_container", "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "MJ5RejectT", "fill": "#ADADB0", "content": "Từ chối", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "MJ5Approve", "width": "fill_container", "height": 48, "fill": "#FF5C00", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MJ5ApproveI", "width": 16, "height": 16, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "MJ5ApproveT", "fill": "#FFFFFF", "content": "Duyệt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "ManagerJourney6", - "name": "Manager Journey/6-Reports", - "x": 2700, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "MJ6Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 16, - "padding": 24, - "children": [ - {"type": "frame", "id": "MJ6Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "MJ6Step", "fill": "#14B8A620", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "MJ6StepT", "fill": "#14B8A6", "content": "Thống kê", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "text", "id": "MJ6Date", "fill": "#8B8B90", "content": "06/02/2026", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "MJ6Title", "width": "fill_container", "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MJ6TitleI", "width": 22, "height": 22, "iconFontName": "bar-chart-3", "iconFontFamily": "lucide", "fill": "#14B8A6"}, - {"type": "text", "id": "MJ6TitleT", "fill": "#FFFFFF", "content": "Báo cáo tổng hợp", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "MJ6Stats", "width": "fill_container", "gap": 10, "children": [ - {"type": "frame", "id": "MJ6S1", "width": "fill_container", "fill": "#22C55E10", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "MJ6S1V", "fill": "#22C55E", "content": "25.8M", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "text", "id": "MJ6S1L", "fill": "#8B8B90", "content": "Doanh thu ngày", "fontFamily": "Roboto", "fontSize": 10} - ]}, - {"type": "frame", "id": "MJ6S2", "width": "fill_container", "fill": "#3B82F610", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "MJ6S2V", "fill": "#3B82F6", "content": "156", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}, - {"type": "text", "id": "MJ6S2L", "fill": "#8B8B90", "content": "Tổng đơn", "fontFamily": "Roboto", "fontSize": 10} - ]} - ]}, - {"type": "frame", "id": "MJ6Details", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 8, "children": [ - {"type": "frame", "id": "MJ6D1", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "MJ6D1L", "fill": "#8B8B90", "content": "Tiền mặt", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "MJ6D1V", "fill": "#FFFFFF", "content": "8,450,000₫", "fontFamily": "Roboto", "fontSize": 12}]}, - {"type": "frame", "id": "MJ6D2", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "MJ6D2L", "fill": "#8B8B90", "content": "Chuyển khoản", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "MJ6D2V", "fill": "#FFFFFF", "content": "15,350,000₫", "fontFamily": "Roboto", "fontSize": 12}]}, - {"type": "frame", "id": "MJ6D3", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "MJ6D3L", "fill": "#8B8B90", "content": "Thẻ", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "MJ6D3V", "fill": "#FFFFFF", "content": "2,000,000₫", "fontFamily": "Roboto", "fontSize": 12}]}, - {"type": "frame", "id": "MJ6Div", "width": "fill_container", "height": 1, "fill": "#2A2A2E"}, - {"type": "frame", "id": "MJ6D4", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "MJ6D4L", "fill": "#8B8B90", "content": "Giảm giá", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "MJ6D4V", "fill": "#EF4444", "content": "-1,245,000₫", "fontFamily": "Roboto", "fontSize": 12}]}, - {"type": "frame", "id": "MJ6D5", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "MJ6D5L", "fill": "#8B8B90", "content": "Hoàn tiền", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "MJ6D5V", "fill": "#EF4444", "content": "-195,000₫", "fontFamily": "Roboto", "fontSize": 12}]} - ]}, - {"type": "frame", "id": "MJ6Actions", "width": "fill_container", "gap": 10, "children": [ - {"type": "frame", "id": "MJ6Export", "width": "fill_container", "height": 44, "fill": "#2A2A2E", "cornerRadius": 10, "gap": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MJ6ExportI", "width": 16, "height": 16, "iconFontName": "download", "iconFontFamily": "lucide", "fill": "#ADADB0"}, - {"type": "text", "id": "MJ6ExportT", "fill": "#ADADB0", "content": "Xuất Excel", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "MJ6Send", "width": "fill_container", "height": 44, "fill": "#14B8A6", "cornerRadius": 10, "gap": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "MJ6SendI", "width": 16, "height": 16, "iconFontName": "send", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "MJ6SendT", "fill": "#FFFFFF", "content": "Gửi báo cáo", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ] - } - ] - } - ] -} diff --git a/pencil-design/src/pages/tPOS/pos/shared/staff/waiter-journey.pen b/pencil-design/src/pages/tPOS/pos/shared/staff/waiter-journey.pen deleted file mode 100644 index 91bed20e..00000000 --- a/pencil-design/src/pages/tPOS/pos/shared/staff/waiter-journey.pen +++ /dev/null @@ -1,363 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "WaiterJourney1", - "name": "Waiter Journey/1-Tables", - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "WJ1Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 16, - "padding": 24, - "children": [ - {"type": "frame", "id": "WJ1Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "WJ1Step", "fill": "#3B82F620", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "WJ1StepT", "fill": "#3B82F6", "content": "Bước 1/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "frame", "id": "WJ1Staff", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "WJ1Avatar", "width": 24, "height": 24, "fill": "#3B82F630", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WJ1Initial", "fill": "#3B82F6", "content": "T", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}, - {"type": "text", "id": "WJ1Name", "fill": "#8B8B90", "content": "Trang", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "WJ1Title", "width": "fill_container", "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "WJ1TitleI", "width": 22, "height": 22, "iconFontName": "layout-grid", "iconFontFamily": "lucide", "fill": "#3B82F6"}, - {"type": "text", "id": "WJ1TitleT", "fill": "#FFFFFF", "content": "Bàn phụ trách", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "WJ1Tables", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ - {"type": "frame", "id": "WJ1Row1", "width": "fill_container", "gap": 10, "children": [ - {"type": "frame", "id": "WJ1T1", "width": "fill_container", "height": 64, "fill": "#FF5C0020", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "WJ1T1N", "fill": "#FF5C00", "content": "Bàn 5", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "WJ1T1S", "fill": "#FF5C00", "content": "Đang order", "fontFamily": "Roboto", "fontSize": 10} - ]}, - {"type": "frame", "id": "WJ1T2", "width": "fill_container", "height": 64, "fill": "#22C55E20", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "WJ1T2N", "fill": "#22C55E", "content": "Bàn 6", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "WJ1T2S", "fill": "#22C55E", "content": "Món xong", "fontFamily": "Roboto", "fontSize": 10} - ]}, - {"type": "frame", "id": "WJ1T3", "width": "fill_container", "height": 64, "fill": "#EC489920", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "WJ1T3N", "fill": "#EC4899", "content": "Bàn 7", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "WJ1T3S", "fill": "#EC4899", "content": "Đang ăn", "fontFamily": "Roboto", "fontSize": 10} - ]} - ]}, - {"type": "frame", "id": "WJ1Row2", "width": "fill_container", "gap": 10, "children": [ - {"type": "frame", "id": "WJ1T4", "width": "fill_container", "height": 64, "fill": "#1A1A1D", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "justifyContent": "center", "alignItems": "center", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "WJ1T4N", "fill": "#8B8B90", "content": "Bàn 8", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "WJ1T4S", "fill": "#6B6B70", "content": "Trống", "fontFamily": "Roboto", "fontSize": 10} - ]}, - {"type": "frame", "id": "WJ1T5", "width": "fill_container", "height": 64, "fill": "#F59E0B20", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "WJ1T5N", "fill": "#F59E0B", "content": "Bàn 9", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "WJ1T5S", "fill": "#F59E0B", "content": "Yêu cầu bill", "fontFamily": "Roboto", "fontSize": 10} - ]}, - {"type": "frame", "id": "WJ1T6", "width": "fill_container", "height": 64, "fill": "#1A1A1D", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "justifyContent": "center", "alignItems": "center", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "WJ1T6N", "fill": "#8B8B90", "content": "Bàn 10", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "WJ1T6S", "fill": "#6B6B70", "content": "Trống", "fontFamily": "Roboto", "fontSize": 10} - ]} - ]} - ]}, - {"type": "frame", "id": "WJ1Summary", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "padding": 12, "justifyContent": "space_around", "children": [ - {"type": "frame", "id": "WJ1Sum1", "alignItems": "center", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "WJ1Sum1V", "fill": "#FF5C00", "content": "4", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "WJ1Sum1L", "fill": "#6B6B70", "content": "Đang phục vụ", "fontFamily": "Roboto", "fontSize": 10}]}, - {"type": "frame", "id": "WJ1Sum2", "alignItems": "center", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "WJ1Sum2V", "fill": "#22C55E", "content": "1", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "WJ1Sum2L", "fill": "#6B6B70", "content": "Món xong", "fontFamily": "Roboto", "fontSize": 10}]}, - {"type": "frame", "id": "WJ1Sum3", "alignItems": "center", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "WJ1Sum3V", "fill": "#6B6B70", "content": "2", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, {"type": "text", "id": "WJ1Sum3L", "fill": "#6B6B70", "content": "Trống", "fontFamily": "Roboto", "fontSize": 10}]} - ]}, - {"type": "frame", "id": "WJ1Action", "width": "fill_container", "height": 48, "fill": "#22C55E", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "WJ1ActionI", "width": 18, "height": 18, "iconFontName": "utensils", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "WJ1ActionT", "fill": "#FFFFFF", "content": "Phục vụ Bàn 6", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "WaiterJourney2", - "name": "Waiter Journey/2-Greet", - "x": 540, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "WJ2Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 24, - "padding": 28, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "WJ2Step", "fill": "#22C55E20", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "WJ2StepT", "fill": "#22C55E", "content": "Bước 2/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "frame", "id": "WJ2Icon", "width": 64, "height": 64, "fill": "#22C55E1A", "cornerRadius": 32, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "WJ2IconI", "width": 28, "height": 28, "iconFontName": "hand-metal", "iconFontFamily": "lucide", "fill": "#22C55E"} - ]}, - {"type": "frame", "id": "WJ2Title", "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "WJ2TitleT", "fill": "#FFFFFF", "content": "Tiếp khách mới", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}, - {"type": "text", "id": "WJ2Desc", "fill": "#8B8B90", "content": "Chọn bàn cho khách", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "WJ2Guest", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 16, "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "WJ2GuestRow1", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "WJ2GL1", "fill": "#8B8B90", "content": "Số khách", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "WJ2GV1", "fill": "#FFFFFF", "content": "4 người", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "WJ2GuestRow2", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "WJ2GL2", "fill": "#8B8B90", "content": "Đặt trước", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "WJ2GV2", "fill": "#22C55E", "content": "Có • Anh Minh", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "WJ2GuestRow3", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "WJ2GL3", "fill": "#8B8B90", "content": "Loyalty", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "WJ2GV3", "fill": "#F59E0B", "content": "Gold • 2,340 điểm", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]} - ]}, - {"type": "frame", "id": "WJ2Table", "width": "fill_container", "fill": "#22C55E10", "stroke": {"thickness": 2, "fill": "#22C55E"}, "cornerRadius": 12, "padding": 16, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "WJ2TableL", "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "WJ2TableI", "width": 20, "height": 20, "iconFontName": "square", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "frame", "id": "WJ2TableInfo", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "WJ2TableN", "fill": "#FFFFFF", "content": "Bàn 8", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, - {"type": "text", "id": "WJ2TableS", "fill": "#8B8B90", "content": "4 ghế • Khu VIP", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "icon_font", "id": "WJ2TableCheck", "width": 20, "height": 20, "iconFontName": "check-circle-2", "iconFontFamily": "lucide", "fill": "#22C55E"} - ]}, - {"type": "frame", "id": "WJ2Confirm", "width": "fill_container", "height": 50, "fill": "#22C55E", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "WJ2ConfirmI", "width": 18, "height": 18, "iconFontName": "door-open", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "WJ2ConfirmT", "fill": "#FFFFFF", "content": "Dẫn khách vào Bàn 8", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "WaiterJourney3", - "name": "Waiter Journey/3-Order", - "x": 1080, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "WJ3Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 16, - "padding": 24, - "children": [ - {"type": "frame", "id": "WJ3Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "WJ3Step", "fill": "#FF5C0020", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "WJ3StepT", "fill": "#FF5C00", "content": "Bước 3/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "text", "id": "WJ3Table", "fill": "#8B8B90", "content": "Bàn 8 • 4 khách", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "WJ3Title", "width": "fill_container", "children": [{"type": "text", "id": "WJ3TitleT", "fill": "#FFFFFF", "content": "Ghi order", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}]}, - {"type": "frame", "id": "WJ3Items", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "frame", "id": "WJ3Item1", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "WJ3I1L", "gap": 10, "alignItems": "center", "children": [ - {"type": "text", "id": "WJ3I1Q", "fill": "#FF5C00", "content": "2x", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "frame", "id": "WJ3I1Info", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "WJ3I1N", "fill": "#FFFFFF", "content": "Phở bò tái", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - {"type": "text", "id": "WJ3I1Note", "fill": "#6B6B70", "content": "Ít hành", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "text", "id": "WJ3I1P", "fill": "#FFFFFF", "content": "90,000₫", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "WJ3Item2", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "WJ3I2L", "gap": 10, "alignItems": "center", "children": [ - {"type": "text", "id": "WJ3I2Q", "fill": "#FF5C00", "content": "1x", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "WJ3I2N", "fill": "#FFFFFF", "content": "Bún chả Hà Nội", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "text", "id": "WJ3I2P", "fill": "#FFFFFF", "content": "55,000₫", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "WJ3Item3", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "WJ3I3L", "gap": 10, "alignItems": "center", "children": [ - {"type": "text", "id": "WJ3I3Q", "fill": "#FF5C00", "content": "1x", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "WJ3I3N", "fill": "#FFFFFF", "content": "Cơm tấm sườn bì", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "text", "id": "WJ3I3P", "fill": "#FFFFFF", "content": "50,000₫", "fontFamily": "Roboto", "fontSize": 13} - ]} - ]}, - {"type": "frame", "id": "WJ3Add", "width": "fill_container", "height": 40, "fill": "#2A2A2E", "cornerRadius": 8, "gap": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "WJ3AddI", "width": 14, "height": 14, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#8B8B90"}, - {"type": "text", "id": "WJ3AddT", "fill": "#8B8B90", "content": "Thêm món", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "WJ3Total", "width": "fill_container", "fill": "#FF5C0010", "cornerRadius": 10, "padding": 14, "justifyContent": "space_between", "children": [{"type": "text", "id": "WJ3TotalL", "fill": "#FF5C00", "content": "Tổng tạm tính", "fontFamily": "Roboto", "fontSize": 14}, {"type": "text", "id": "WJ3TotalV", "fill": "#FF5C00", "content": "195,000₫", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}]}, - {"type": "frame", "id": "WJ3Send", "width": "fill_container", "height": 50, "fill": "#FF5C00", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "WJ3SendI", "width": 18, "height": 18, "iconFontName": "send", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "WJ3SendT", "fill": "#FFFFFF", "content": "Gửi bếp", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "WaiterJourney4", - "name": "Waiter Journey/4-Kitchen", - "x": 1620, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "WJ4Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 2, "fill": "#22C55E"}, - "layout": "vertical", - "gap": 24, - "padding": 28, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "WJ4Step", "fill": "#EC489920", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "WJ4StepT", "fill": "#EC4899", "content": "Bước 4/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "frame", "id": "WJ4Icon", "width": 72, "height": 72, "fill": "#22C55E1A", "cornerRadius": 36, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "WJ4IconI", "width": 32, "height": 32, "iconFontName": "bell-ring", "iconFontFamily": "lucide", "fill": "#22C55E"} - ]}, - {"type": "frame", "id": "WJ4Title", "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "WJ4TitleT", "fill": "#FFFFFF", "content": "Món đã xong!", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}, - {"type": "text", "id": "WJ4Desc", "fill": "#8B8B90", "content": "Bàn 8 • 4 món sẵn sàng", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "WJ4Items", "width": "fill_container", "fill": "#22C55E10", "cornerRadius": 14, "padding": 16, "layout": "vertical", "gap": 10, "children": [ - {"type": "frame", "id": "WJ4I1", "width": "fill_container", "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "WJ4I1I", "width": 16, "height": 16, "iconFontName": "check-circle-2", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "WJ4I1T", "fill": "#FFFFFF", "content": "2x Phở bò tái", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "WJ4I2", "width": "fill_container", "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "WJ4I2I", "width": 16, "height": 16, "iconFontName": "check-circle-2", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "WJ4I2T", "fill": "#FFFFFF", "content": "1x Bún chả Hà Nội", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "WJ4I3", "width": "fill_container", "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "WJ4I3I", "width": 16, "height": 16, "iconFontName": "check-circle-2", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "WJ4I3T", "fill": "#FFFFFF", "content": "1x Cơm tấm sườn bì", "fontFamily": "Roboto", "fontSize": 13} - ]} - ]}, - {"type": "frame", "id": "WJ4Location", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "padding": 12, "justifyContent": "center", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "WJ4LocI", "width": 16, "height": 16, "iconFontName": "map-pin", "iconFontFamily": "lucide", "fill": "#8B8B90"}, - {"type": "text", "id": "WJ4LocT", "fill": "#8B8B90", "content": "Lấy tại: Quầy bếp 01", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "WJ4Serve", "width": "fill_container", "height": 50, "fill": "#22C55E", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "WJ4ServeI", "width": 18, "height": 18, "iconFontName": "utensils", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "WJ4ServeT", "fill": "#FFFFFF", "content": "Lấy món phục vụ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "WaiterJourney5", - "name": "Waiter Journey/5-Serve", - "x": 2160, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "WJ5Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 24, - "padding": 28, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "WJ5Step", "fill": "#F59E0B20", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "WJ5StepT", "fill": "#F59E0B", "content": "Bước 5/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "frame", "id": "WJ5Icon", "width": 64, "height": 64, "fill": "#F59E0B1A", "cornerRadius": 32, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "WJ5IconI", "width": 28, "height": 28, "iconFontName": "utensils-crossed", "iconFontFamily": "lucide", "fill": "#F59E0B"} - ]}, - {"type": "frame", "id": "WJ5Title", "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "WJ5TitleT", "fill": "#FFFFFF", "content": "Đã phục vụ", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}, - {"type": "text", "id": "WJ5Desc", "fill": "#8B8B90", "content": "Bàn 8 • Khách đang dùng bữa", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "WJ5Status", "width": "fill_container", "fill": "#F59E0B10", "cornerRadius": 12, "padding": 16, "layout": "vertical", "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "WJ5StatusI", "width": 24, "height": 24, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "text", "id": "WJ5StatusT", "fill": "#F59E0B", "content": "Đang dùng bữa", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "WJ5StatusTime", "fill": "#8B8B90", "content": "15 phút kể từ khi phục vụ", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "WJ5Actions", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ - {"type": "frame", "id": "WJ5Add", "width": "fill_container", "height": 44, "fill": "#2A2A2E", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "WJ5AddI", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#ADADB0"}, - {"type": "text", "id": "WJ5AddT", "fill": "#ADADB0", "content": "Order thêm món", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "WJ5Bill", "width": "fill_container", "height": 44, "fill": "#F59E0B", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "WJ5BillI", "width": 16, "height": 16, "iconFontName": "receipt", "iconFontFamily": "lucide", "fill": "#000"}, - {"type": "text", "id": "WJ5BillT", "fill": "#000000", "content": "In bill cho khách", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "WaiterJourney6", - "name": "Waiter Journey/6-Bill", - "x": 2700, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "WJ6Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 16, - "padding": 24, - "children": [ - {"type": "frame", "id": "WJ6Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "WJ6Step", "fill": "#14B8A620", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "WJ6StepT", "fill": "#14B8A6", "content": "Bước 6/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "text", "id": "WJ6Table", "fill": "#8B8B90", "content": "Bàn 8", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "WJ6Title", "width": "fill_container", "children": [{"type": "text", "id": "WJ6TitleT", "fill": "#FFFFFF", "content": "Thanh toán & Đóng bàn", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}]}, - {"type": "frame", "id": "WJ6Bill", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 8, "children": [ - {"type": "frame", "id": "WJ6B1", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "WJ6B1L", "fill": "#8B8B90", "content": "2x Phở bò tái", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "WJ6B1V", "fill": "#FFFFFF", "content": "90,000₫", "fontFamily": "Roboto", "fontSize": 12}]}, - {"type": "frame", "id": "WJ6B2", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "WJ6B2L", "fill": "#8B8B90", "content": "1x Bún chả", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "WJ6B2V", "fill": "#FFFFFF", "content": "55,000₫", "fontFamily": "Roboto", "fontSize": 12}]}, - {"type": "frame", "id": "WJ6B3", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "WJ6B3L", "fill": "#8B8B90", "content": "1x Cơm tấm", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "WJ6B3V", "fill": "#FFFFFF", "content": "50,000₫", "fontFamily": "Roboto", "fontSize": 12}]} - ]}, - {"type": "frame", "id": "WJ6Summary", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "frame", "id": "WJ6Sub", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "WJ6SubL", "fill": "#8B8B90", "content": "Tạm tính", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "WJ6SubV", "fill": "#FFFFFF", "content": "195,000₫", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "frame", "id": "WJ6Loyalty", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "WJ6LoyaltyL", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "WJ6LoyaltyI", "width": 12, "height": 12, "iconFontName": "coins", "iconFontFamily": "lucide", "fill": "#14B8A6"}, {"type": "text", "id": "WJ6LoyaltyT", "fill": "#14B8A6", "content": "Gold -5%", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "text", "id": "WJ6LoyaltyV", "fill": "#14B8A6", "content": "-9,750₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "WJ6Div", "width": "fill_container", "height": 1, "fill": "#2A2A2E"}, - {"type": "frame", "id": "WJ6Total", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "WJ6TotalL", "fill": "#FFFFFF", "content": "Tổng thanh toán", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "text", "id": "WJ6TotalV", "fill": "#14B8A6", "content": "185,250₫", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}]} - ]}, - {"type": "frame", "id": "WJ6Method", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "WJ6MethodL", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "WJ6MethodI", "width": 16, "height": 16, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "#8B8B90"}, - {"type": "text", "id": "WJ6MethodT", "fill": "#FFFFFF", "content": "Chuyển khoản", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "icon_font", "id": "WJ6MethodCheck", "width": 16, "height": 16, "iconFontName": "check-circle-2", "iconFontFamily": "lucide", "fill": "#22C55E"} - ]}, - {"type": "frame", "id": "WJ6Complete", "width": "fill_container", "height": 50, "fill": "#14B8A6", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "WJ6CompleteI", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "WJ6CompleteT", "fill": "#FFFFFF", "content": "Hoàn tất & Đóng bàn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - } - ] -} diff --git a/pencil-design/src/pages/tPOS/pos/spa/desktop.pen b/pencil-design/src/pages/tPOS/pos/spa/desktop.pen deleted file mode 100644 index fcc7c9a5..00000000 --- a/pencil-design/src/pages/tPOS/pos/spa/desktop.pen +++ /dev/null @@ -1,132 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "POSSpaScreen", - "name": "POS Spa Screen", - "reusable": true, - "width": 1920, - "height": 1080, - "fill": "$bg-page", - "layout": "horizontal", - "clip": true, - "children": [ - { - "type": "frame", - "id": "SpaSidebar", - "name": "sidebar", - "width": 320, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["right"]}, - "layout": "vertical", - "children": [ - {"type": "frame", "id": "SpaSideHeader", "width": "fill_container", "padding": 20, "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "SpaLogo", "width": 44, "height": 44, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaLogoText", "fill": "$text-primary", "content": "G", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}]}, {"type": "frame", "id": "SpaStoreInfo", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "SpaStoreName", "fill": "$text-primary", "content": "GoodGo Beauty Spa", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "text", "id": "SpaBranch", "fill": "$text-secondary", "content": "Chi nhánh Phú Mỹ Hưng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}, - { - "type": "frame", - "id": "SpaAppointmentArea", - "name": "appointmentArea", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "padding": 16, - "gap": 12, - "children": [ - {"type": "frame", "id": "SpaDatePicker", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 10, "padding": [10, 14], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "SpaDateLeft", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaCalendarIcon", "width": 18, "height": 18, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "SpaDateText", "fill": "$text-primary", "content": "Hôm nay, 05/02", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "icon_font", "id": "SpaDateChevron", "width": 18, "height": 18, "iconFontName": "chevron-down", "iconFontFamily": "lucide", "fill": "$text-tertiary"}]}, - {"type": "text", "id": "SpaApptLabel", "fill": "$text-secondary", "content": "Lịch hẹn hôm nay", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, - { - "type": "frame", - "id": "SpaApptList", - "name": "appointmentList", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "gap": 10, - "children": [ - {"type": "frame", "id": "SpaAppt1", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "padding": 14, "layout": "vertical", "gap": 10, "children": [{"type": "frame", "id": "SpaAppt1Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "SpaAppt1Time", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 8], "children": [{"type": "text", "id": "SpaAppt1TimeText", "fill": "#22C55E", "content": "10:00 - 11:30", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaAppt1Status", "fill": "#22C55E20", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "SpaAppt1StatusText", "fill": "#22C55E", "content": "Đang làm", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}]}, {"type": "frame", "id": "SpaAppt1Customer", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "SpaAppt1Avatar", "width": 36, "height": 36, "fill": "#EC489930", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaAppt1Init", "fill": "#EC4899", "content": "TL", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaAppt1Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "SpaAppt1Name", "fill": "$text-primary", "content": "Trần Linh", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "SpaAppt1Service", "fill": "$text-secondary", "content": "Facial + Massage", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}, {"type": "frame", "id": "SpaAppt1Staff", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaAppt1StaffIcon", "width": 14, "height": 14, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "SpaAppt1StaffName", "fill": "$text-tertiary", "content": "NV: Hồng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}, - {"type": "frame", "id": "SpaAppt2", "width": "fill_container", "fill": "#F59E0B15", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#F59E0B50"}, "padding": 14, "layout": "vertical", "gap": 10, "children": [{"type": "frame", "id": "SpaAppt2Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "SpaAppt2Time", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [4, 8], "children": [{"type": "text", "id": "SpaAppt2TimeText", "fill": "#F59E0B", "content": "11:30 - 12:30", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaAppt2Status", "fill": "#F59E0B20", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "SpaAppt2StatusText", "fill": "#F59E0B", "content": "Chờ đến", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}]}, {"type": "frame", "id": "SpaAppt2Customer", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "SpaAppt2Avatar", "width": 36, "height": 36, "fill": "#3B82F630", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaAppt2Init", "fill": "#3B82F6", "content": "NH", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaAppt2Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "SpaAppt2Name", "fill": "$text-primary", "content": "Nguyễn Hoa", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "SpaAppt2Service", "fill": "$text-secondary", "content": "Nail Art", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}, {"type": "frame", "id": "SpaAppt2Staff", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaAppt2StaffIcon", "width": 14, "height": 14, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "SpaAppt2StaffName", "fill": "$text-tertiary", "content": "NV: Mai", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}, - {"type": "frame", "id": "SpaAppt3", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": 14, "layout": "vertical", "gap": 10, "children": [{"type": "frame", "id": "SpaAppt3Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "SpaAppt3Time", "fill": "$bg-surface", "cornerRadius": 6, "padding": [4, 8], "children": [{"type": "text", "id": "SpaAppt3TimeText", "fill": "$text-secondary", "content": "14:00 - 15:00", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaAppt3Status", "fill": "$bg-surface", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "SpaAppt3StatusText", "fill": "$text-tertiary", "content": "Đã đặt", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}]}, {"type": "frame", "id": "SpaAppt3Customer", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "SpaAppt3Avatar", "width": 36, "height": 36, "fill": "#8B5CF630", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaAppt3Init", "fill": "#8B5CF6", "content": "PT", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaAppt3Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "SpaAppt3Name", "fill": "$text-primary", "content": "Phạm Thảo", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "SpaAppt3Service", "fill": "$text-secondary", "content": "Triệt lông", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}, {"type": "frame", "id": "SpaAppt3Staff", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaAppt3StaffIcon", "width": 14, "height": 14, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "SpaAppt3StaffName", "fill": "$text-tertiary", "content": "NV: Lan", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}, - {"type": "frame", "id": "SpaAppt4", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": 14, "layout": "vertical", "gap": 10, "children": [{"type": "frame", "id": "SpaAppt4Top", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "SpaAppt4Time", "fill": "$bg-surface", "cornerRadius": 6, "padding": [4, 8], "children": [{"type": "text", "id": "SpaAppt4TimeText", "fill": "$text-secondary", "content": "15:30 - 17:00", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaAppt4Status", "fill": "$bg-surface", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "SpaAppt4StatusText", "fill": "$text-tertiary", "content": "Đã đặt", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}]}, {"type": "frame", "id": "SpaAppt4Customer", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "SpaAppt4Avatar", "width": 36, "height": 36, "fill": "#06B6D430", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaAppt4Init", "fill": "#06B6D4", "content": "LM", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaAppt4Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "SpaAppt4Name", "fill": "$text-primary", "content": "Lê My", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "SpaAppt4Service", "fill": "$text-secondary", "content": "Full Body Massage", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}, {"type": "frame", "id": "SpaAppt4Staff", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaAppt4StaffIcon", "width": 14, "height": 14, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "SpaAppt4StaffName", "fill": "$text-tertiary", "content": "NV: Hồng", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]} - ] - }, - {"type": "frame", "id": "SpaAddApptBtn", "width": "fill_container", "height": 44, "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "$border-default", "style": "dashed"}, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaAddApptIcon", "width": 18, "height": 18, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "SpaAddApptText", "fill": "$text-secondary", "content": "Thêm lịch hẹn", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]} - ] - } - ] - }, - { - "type": "frame", - "id": "SpaMainContent", - "name": "mainContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "children": [ - {"type": "frame", "id": "SpaHeader", "width": "fill_container", "height": 64, "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [0, 24], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "SpaHeaderCustomerInfo", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "SpaCustomerAvatar", "width": 44, "height": 44, "fill": "#EC489930", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaCustomerInit", "fill": "#EC4899", "content": "TL", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaCustomerDetails", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "SpaCustomerName", "fill": "$text-primary", "content": "Trần Linh", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, {"type": "frame", "id": "SpaCustomerPoints", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaPointsIcon", "width": 14, "height": 14, "iconFontName": "crown", "iconFontFamily": "lucide", "fill": "#F59E0B"}, {"type": "text", "id": "SpaPointsText", "fill": "#F59E0B", "content": "VIP Gold • 2,500 điểm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}]}]}, {"type": "frame", "id": "SpaSearchBox", "width": 360, "height": 44, "fill": "$bg-surface", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 16], "gap": 12, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaSearchIcon", "width": 20, "height": 20, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "SpaSearchPlaceholder", "fill": "$text-tertiary", "content": "Tìm dịch vụ, sản phẩm...", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}]}, {"type": "frame", "id": "SpaHeaderRight", "gap": 16, "alignItems": "center", "children": [{"type": "frame", "id": "SpaDateTime", "layout": "vertical", "gap": 2, "alignItems": "flex_end", "children": [{"type": "text", "id": "SpaTime", "fill": "$text-primary", "content": "10:45", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, {"type": "text", "id": "SpaDate", "fill": "$text-secondary", "content": "05/02/2026", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, {"type": "frame", "id": "SpaUserAvatar", "width": 40, "height": 40, "fill": "#EC489930", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaUserInit", "fill": "#EC4899", "content": "H", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]}]}]}, - {"type": "frame", "id": "SpaCategoryBar", "width": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "padding": [12, 24], "gap": 12, "children": [{"type": "frame", "id": "SpaCatAll", "fill": "$orange-primary", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "SpaCatAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaCatFacial", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaCatFacialIcon", "width": 14, "height": 14, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "SpaCatFacialText", "fill": "$text-secondary", "content": "Chăm sóc da", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, {"type": "frame", "id": "SpaCatMassage", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "SpaCatMassageText", "fill": "$text-secondary", "content": "Massage", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, {"type": "frame", "id": "SpaCatNail", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "SpaCatNailText", "fill": "$text-secondary", "content": "Nail", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, {"type": "frame", "id": "SpaCatHair", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "SpaCatHairText", "fill": "$text-secondary", "content": "Tóc", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, {"type": "frame", "id": "SpaCatProducts", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [10, 20], "children": [{"type": "text", "id": "SpaCatProductsText", "fill": "$text-secondary", "content": "Sản phẩm", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}]}, - { - "type": "frame", - "id": "SpaProductArea", - "name": "productArea", - "width": "fill_container", - "height": "fill_container", - "padding": 24, - "gap": 20, - "wrap": true, - "alignContent": "flex_start", - "children": [ - {"type": "frame", "id": "SpaProd1", "width": 200, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "SpaProd1Img", "width": "fill_container", "height": 130, "fill": "#EC489918"}, {"type": "frame", "id": "SpaProd1Content", "width": "fill_container", "layout": "vertical", "gap": 8, "padding": 14, "children": [{"type": "text", "id": "SpaProd1Name", "fill": "$text-primary", "content": "Chăm sóc da mặt cao cấp", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "SpaProd1Duration", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaProd1DurationIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "SpaProd1DurationText", "fill": "$text-tertiary", "content": "60 phút", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, {"type": "text", "id": "SpaProd1Price", "fill": "$orange-primary", "content": "650,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "SpaProd2", "width": 200, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "SpaProd2Img", "width": "fill_container", "height": 130, "fill": "#8B5CF618"}, {"type": "frame", "id": "SpaProd2Content", "width": "fill_container", "layout": "vertical", "gap": 8, "padding": 14, "children": [{"type": "text", "id": "SpaProd2Name", "fill": "$text-primary", "content": "Massage body thư giãn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "SpaProd2Duration", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaProd2DurationIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "SpaProd2DurationText", "fill": "$text-tertiary", "content": "90 phút", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, {"type": "text", "id": "SpaProd2Price", "fill": "$orange-primary", "content": "450,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "SpaProd3", "width": 200, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "SpaProd3Img", "width": "fill_container", "height": 130, "fill": "#F59E0B18"}, {"type": "frame", "id": "SpaProd3Content", "width": "fill_container", "layout": "vertical", "gap": 8, "padding": 14, "children": [{"type": "text", "id": "SpaProd3Name", "fill": "$text-primary", "content": "Sơn gel cao cấp", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "SpaProd3Duration", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaProd3DurationIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "SpaProd3DurationText", "fill": "$text-tertiary", "content": "45 phút", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, {"type": "text", "id": "SpaProd3Price", "fill": "$orange-primary", "content": "180,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "SpaProd4", "width": 200, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "SpaProd4Img", "width": "fill_container", "height": 130, "fill": "#22C55E18"}, {"type": "frame", "id": "SpaProd4Content", "width": "fill_container", "layout": "vertical", "gap": 8, "padding": 14, "children": [{"type": "text", "id": "SpaProd4Name", "fill": "$text-primary", "content": "Triệt lông vĩnh viễn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "SpaProd4Duration", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaProd4DurationIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "SpaProd4DurationText", "fill": "$text-tertiary", "content": "30 phút", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, {"type": "text", "id": "SpaProd4Price", "fill": "$orange-primary", "content": "350,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]}]}, - {"type": "frame", "id": "SpaProd5", "width": 200, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "SpaProd5Img", "width": "fill_container", "height": 130, "fill": "#3B82F618"}, {"type": "frame", "id": "SpaProd5Content", "width": "fill_container", "layout": "vertical", "gap": 8, "padding": 14, "children": [{"type": "text", "id": "SpaProd5Name", "fill": "$text-primary", "content": "Uốn/Duỗi tóc", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "frame", "id": "SpaProd5Duration", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaProd5DurationIcon", "width": 14, "height": 14, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, {"type": "text", "id": "SpaProd5DurationText", "fill": "$text-tertiary", "content": "120 phút", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}, {"type": "text", "id": "SpaProd5Price", "fill": "$orange-primary", "content": "800,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}]}]} - ] - }, - {"type": "frame", "id": "SpaBottomBar", "width": "fill_container", "fill": "$bg-elevated", "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, "padding": [12, 24], "gap": 12, "children": [{"type": "frame", "id": "SpaQuickStaff", "height": 52, "fill": "#EC4899", "cornerRadius": 12, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaQuickStaffIcon", "width": 20, "height": 20, "iconFontName": "user-check", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "SpaQuickStaffText", "fill": "$text-primary", "content": "Chọn NV", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaQuickHistory", "height": 52, "fill": "$bg-interactive", "cornerRadius": 12, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaQuickHistoryIcon", "width": 20, "height": 20, "iconFontName": "history", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "SpaQuickHistoryText", "fill": "$text-secondary", "content": "Lịch sử", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "SpaQuickPackage", "height": 52, "fill": "$bg-interactive", "cornerRadius": 12, "padding": [0, 16], "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaQuickPackageIcon", "width": 20, "height": 20, "iconFontName": "gift", "iconFontFamily": "lucide", "fill": "$text-secondary"}, {"type": "text", "id": "SpaQuickPackageText", "fill": "$text-secondary", "content": "Gói dịch vụ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "SpaQuickCustomer", "width": 52, "height": 52, "fill": "#14B8A620", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "#14B8A6"}, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaQuickCustomerIcon", "width": 22, "height": 22, "iconFontName": "user-search", "iconFontFamily": "lucide", "fill": "#14B8A6"}]}]} - ] - }, - { - "type": "frame", - "id": "SpaOrderPanel", - "name": "orderPanel", - "width": 380, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, - "layout": "vertical", - "children": [ - {"type": "frame", "id": "SpaOrderHeader", "width": "fill_container", "padding": [16, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "SpaOrderInfo", "layout": "vertical", "gap": 4, "children": [{"type": "text", "id": "SpaOrderTitle", "fill": "$text-primary", "content": "Hóa đơn - Trần Linh", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, {"type": "text", "id": "SpaOrderSub", "fill": "$text-secondary", "content": "Lịch hẹn 10:00 - 11:30", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}]}, {"type": "frame", "id": "SpaOrderMore", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaOrderMoreIcon", "width": 20, "height": 20, "iconFontName": "more-vertical", "iconFontFamily": "lucide", "fill": "$text-secondary"}]}]}, - { - "type": "frame", - "id": "SpaOrderItems", - "name": "orderItems", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "gap": 0, - "children": [ - {"type": "frame", "id": "SpaOrdItem1", "width": "fill_container", "padding": [14, 20], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "SpaOrdItem1Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "SpaOrdItem1Qty", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaOrdItem1QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaOrdItem1Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "SpaOrdItem1Name", "fill": "$text-primary", "content": "Chăm sóc da mặt cao cấp", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "SpaOrdItem1Staff", "fill": "$text-tertiary", "content": "NV: Hồng • 60 phút", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}, {"type": "text", "id": "SpaOrdItem1Price", "fill": "$text-primary", "content": "650,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, - {"type": "frame", "id": "SpaOrdItem2", "width": "fill_container", "padding": [14, 20], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "SpaOrdItem2Left", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "SpaOrdItem2Qty", "width": 32, "height": 32, "fill": "$bg-interactive", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaOrdItem2QtyText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, {"type": "frame", "id": "SpaOrdItem2Info", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "SpaOrdItem2Name", "fill": "$text-primary", "content": "Massage body thư giãn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, {"type": "text", "id": "SpaOrdItem2Staff", "fill": "$text-tertiary", "content": "NV: Hồng • 90 phút", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}]}]}, {"type": "text", "id": "SpaOrdItem2Price", "fill": "$text-primary", "content": "450,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]} - ] - }, - {"type": "frame", "id": "SpaOrderSummary", "width": "fill_container", "fill": "$bg-surface", "layout": "vertical", "padding": 20, "gap": 12, "children": [{"type": "frame", "id": "SpaSummSubtotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "SpaSubtotalLabel", "fill": "$text-secondary", "content": "Tạm tính", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, {"type": "text", "id": "SpaSubtotalValue", "fill": "$text-primary", "content": "1,100,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "SpaSummPoints", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "SpaPointsLabel", "fill": "$text-secondary", "content": "Dùng 500 điểm", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"}, {"type": "text", "id": "SpaPointsValue", "fill": "#22C55E", "content": "-50,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, {"type": "frame", "id": "SpaSummDivider", "width": "fill_container", "height": 1, "fill": "$border-subtle"}, {"type": "frame", "id": "SpaSummTotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "SpaTotalLabel", "fill": "$text-primary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}, {"type": "text", "id": "SpaTotalValue", "fill": "$orange-primary", "content": "1,050,000₫", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}]}, {"type": "frame", "id": "SpaSummEarn", "width": "fill_container", "justifyContent": "flex_end", "children": [{"type": "text", "id": "SpaEarnText", "fill": "#F59E0B", "content": "+105 điểm tích lũy", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}]}, - {"type": "frame", "id": "SpaPaymentBtn", "width": "fill_container", "height": 64, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaPaymentIcon", "width": 24, "height": 24, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "SpaPaymentText", "fill": "$text-primary", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}]} - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "bg-surface": {"type": "color", "value": "#111113"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "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/spa/mobile.pen b/pencil-design/src/pages/tPOS/pos/spa/mobile.pen deleted file mode 100644 index 58d2ef35..00000000 --- a/pencil-design/src/pages/tPOS/pos/spa/mobile.pen +++ /dev/null @@ -1,132 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "POSSpaMobile", - "name": "POS Spa Mobile", - "reusable": true, - "width": 390, - "height": 844, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "SpaMobHeader", - "width": "fill_container", - "height": 56, - "fill": "$bg-elevated", - "padding": [0, 16], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "SpaMobLeft", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "SpaMobAvatar", "width": 32, "height": 32, "fill": "#EC489920", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaMobAvatarText", "fill": "#EC4899", "content": "L", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, - {"type": "frame", "id": "SpaMobCustInfo", "layout": "vertical", "gap": 0, "children": [{"type": "text", "id": "SpaMobCustName", "fill": "$text-primary", "content": "Nguyễn Thị Lan", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, {"type": "frame", "id": "SpaMobCustVIP", "gap": 4, "alignItems": "center", "children": [{"type": "frame", "id": "SpaMobVIPBadge", "fill": "#F59E0B20", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "SpaMobVIPText", "fill": "#F59E0B", "content": "VIP", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "600"}]}, {"type": "text", "id": "SpaMobPoints", "fill": "$text-secondary", "content": "1,250 điểm", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"}]}]} - ]}, - {"type": "frame", "id": "SpaMobRight", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "SpaMobStaffBtn", "width": 40, "height": 40, "fill": "#EC4899", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaMobStaffIcon", "width": 20, "height": 20, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "$text-primary"}]}, - {"type": "frame", "id": "SpaMobCartBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SpaMobCartIcon", "width": 20, "height": 20, "iconFontName": "shopping-cart", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "frame", "id": "SpaMobCartBadge", "width": 18, "height": 18, "fill": "$orange-primary", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "position": "absolute", "top": -4, "right": -4, "children": [{"type": "text", "id": "SpaMobCartBadgeText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700"}]} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "SpaMobSearch", - "width": "fill_container", - "padding": [12, 16], - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "children": [ - {"type": "frame", "id": "SpaMobSearchBox", "width": "fill_container", "height": 44, "fill": "$bg-surface", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 14], "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SpaMobSearchIcon", "width": 20, "height": 20, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "SpaMobSearchText", "fill": "$text-tertiary", "content": "Tìm dịch vụ...", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"} - ]} - ] - }, - { - "type": "frame", - "id": "SpaMobCategories", - "width": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "padding": [10, 16], - "gap": 8, - "children": [ - {"type": "frame", "id": "SpaMobCatAll", "fill": "$orange-primary", "cornerRadius": 100, "padding": [8, 14], "children": [{"type": "text", "id": "SpaMobCatAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "SpaMobCatSkin", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 14], "children": [{"type": "text", "id": "SpaMobCatSkinText", "fill": "$text-secondary", "content": "Da", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "SpaMobCatMassage", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 14], "children": [{"type": "text", "id": "SpaMobCatMassageText", "fill": "$text-secondary", "content": "Massage", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "SpaMobCatNail", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 14], "children": [{"type": "text", "id": "SpaMobCatNailText", "fill": "$text-secondary", "content": "Nail", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]} - ] - }, - { - "type": "frame", - "id": "SpaMobProducts", - "width": "fill_container", - "height": "fill_container", - "padding": 12, - "layout": "vertical", - "gap": 12, - "clip": true, - "children": [ - {"type": "frame", "id": "SpaMobProdRow1", "width": "fill_container", "gap": 12, "children": [ - {"type": "frame", "id": "SpaMobProd1", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "SpaMobProd1Img", "width": "fill_container", "height": 100, "fill": "#EC489930"}, {"type": "frame", "id": "SpaMobProd1Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "SpaMobProd1Name", "fill": "$text-primary", "content": "Facial Cơ Bản", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "frame", "id": "SpaMobProd1Meta", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "SpaMobProd1Duration", "fill": "$text-tertiary", "content": "60 phút", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, {"type": "text", "id": "SpaMobProd1Price", "fill": "$orange-primary", "content": "350,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]}]}, - {"type": "frame", "id": "SpaMobProd2", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "SpaMobProd2Img", "width": "fill_container", "height": 100, "fill": "#8B5CF630"}, {"type": "frame", "id": "SpaMobProd2Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "SpaMobProd2Name", "fill": "$text-primary", "content": "Massage Body", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "frame", "id": "SpaMobProd2Meta", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "SpaMobProd2Duration", "fill": "$text-tertiary", "content": "90 phút", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, {"type": "text", "id": "SpaMobProd2Price", "fill": "$orange-primary", "content": "550,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]}]} - ]}, - {"type": "frame", "id": "SpaMobProdRow2", "width": "fill_container", "gap": 12, "children": [ - {"type": "frame", "id": "SpaMobProd3", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "SpaMobProd3Img", "width": "fill_container", "height": 100, "fill": "#F59E0B30"}, {"type": "frame", "id": "SpaMobProd3Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "SpaMobProd3Name", "fill": "$text-primary", "content": "Nail Gel", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "frame", "id": "SpaMobProd3Meta", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "SpaMobProd3Duration", "fill": "$text-tertiary", "content": "45 phút", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, {"type": "text", "id": "SpaMobProd3Price", "fill": "$orange-primary", "content": "200,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]}]}, - {"type": "frame", "id": "SpaMobProd4", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "SpaMobProd4Img", "width": "fill_container", "height": 100, "fill": "#22C55E30"}, {"type": "frame", "id": "SpaMobProd4Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "SpaMobProd4Name", "fill": "$text-primary", "content": "Gội Đầu Dưỡng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "frame", "id": "SpaMobProd4Meta", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "SpaMobProd4Duration", "fill": "$text-tertiary", "content": "30 phút", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, {"type": "text", "id": "SpaMobProd4Price", "fill": "$orange-primary", "content": "150,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]}]} - ]}, - {"type": "frame", "id": "SpaMobProdRow3", "width": "fill_container", "gap": 12, "children": [ - {"type": "frame", "id": "SpaMobProd5", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "SpaMobProd5Img", "width": "fill_container", "height": 100, "fill": "#3B82F630"}, {"type": "frame", "id": "SpaMobProd5Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "SpaMobProd5Name", "fill": "$text-primary", "content": "Tẩy Tế Bào Chết", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "frame", "id": "SpaMobProd5Meta", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "SpaMobProd5Duration", "fill": "$text-tertiary", "content": "45 phút", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, {"type": "text", "id": "SpaMobProd5Price", "fill": "$orange-primary", "content": "280,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]}]}, - {"type": "frame", "id": "SpaMobProd6", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "SpaMobProd6Img", "width": "fill_container", "height": 100, "fill": "#EC489930"}, {"type": "frame", "id": "SpaMobProd6Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "SpaMobProd6Name", "fill": "$text-primary", "content": "Facial Nâng Cao", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}, {"type": "frame", "id": "SpaMobProd6Meta", "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "text", "id": "SpaMobProd6Duration", "fill": "$text-tertiary", "content": "90 phút", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, {"type": "text", "id": "SpaMobProd6Price", "fill": "$orange-primary", "content": "650,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}]}]} - ]} - ] - }, - { - "type": "frame", - "id": "SpaMobBottomBar", - "width": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, - "padding": [12, 16], - "layout": "vertical", - "gap": 8, - "children": [ - {"type": "frame", "id": "SpaMobPointsRow", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "SpaMobPointsUse", "gap": 4, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaMobPointsIcon", "width": 14, "height": 14, "iconFontName": "gift", "iconFontFamily": "lucide", "fill": "#22C55E"}, {"type": "text", "id": "SpaMobPointsLabel", "fill": "#22C55E", "content": "Dùng 500 điểm: -50K", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "text", "id": "SpaMobPointsEarn", "fill": "#F59E0B", "content": "+85 điểm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SpaMobPayRow", "width": "fill_container", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "SpaMobTotal", "layout": "vertical", "gap": 0, "children": [ - {"type": "text", "id": "SpaMobTotalLabel", "fill": "$text-secondary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}, - {"type": "text", "id": "SpaMobTotalValue", "fill": "$text-primary", "content": "850,000₫", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "SpaMobPayBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SpaMobPayIcon", "width": 20, "height": 20, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "SpaMobPayText", "fill": "$text-primary", "content": "Thanh toá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"}, - "bg-surface": {"type": "color", "value": "#111113"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/spa/tablet.pen b/pencil-design/src/pages/tPOS/pos/spa/tablet.pen deleted file mode 100644 index 7957c021..00000000 --- a/pencil-design/src/pages/tPOS/pos/spa/tablet.pen +++ /dev/null @@ -1,128 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "POSSpaTablet", - "name": "POS Spa Tablet", - "reusable": true, - "width": 1024, - "height": 768, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "SpaTabHeader", - "width": "fill_container", - "height": 56, - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "padding": [0, 16], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "SpaTabLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "SpaTabLogoIcon", "width": 36, "height": 36, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaTabLogoText", "fill": "$text-primary", "content": "G", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}]}, - {"type": "frame", "id": "SpaTabCustomer", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "SpaTabAvatar", "width": 32, "height": 32, "fill": "#EC489920", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SpaTabAvatarText", "fill": "#EC4899", "content": "L", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, - {"type": "frame", "id": "SpaTabCustInfo", "layout": "vertical", "gap": 0, "children": [{"type": "text", "id": "SpaTabCustName", "fill": "$text-primary", "content": "Nguyễn Thị Lan", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "frame", "id": "SpaTabCustVIP", "gap": 4, "alignItems": "center", "children": [{"type": "frame", "id": "SpaTabVIPBadge", "fill": "#F59E0B20", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "SpaTabVIPText", "fill": "#F59E0B", "content": "VIP Gold", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]}, {"type": "text", "id": "SpaTabPoints", "fill": "$text-secondary", "content": "1,250 điểm", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "normal"}]}]} - ]} - ]}, - {"type": "frame", "id": "SpaTabSearch", "width": 220, "height": 40, "fill": "$bg-surface", "cornerRadius": 10, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 12], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SpaTabSearchIcon", "width": 18, "height": 18, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "SpaTabSearchText", "fill": "$text-tertiary", "content": "Tìm dịch vụ...", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "SpaTabRight", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "SpaTabStaffBtn", "height": 36, "fill": "#EC4899", "cornerRadius": 8, "padding": [0, 12], "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaTabStaffIcon", "width": 16, "height": 16, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "$text-primary"}, {"type": "text", "id": "SpaTabStaffText", "fill": "$text-primary", "content": "Chọn NV", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, - {"type": "text", "id": "SpaTabTime", "fill": "$text-primary", "content": "23:48", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - }, - { - "type": "frame", - "id": "SpaTabCategories", - "width": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "padding": [10, 16], - "gap": 8, - "children": [ - {"type": "frame", "id": "SpaTabCatAll", "fill": "$orange-primary", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "SpaTabCatAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, - {"type": "frame", "id": "SpaTabCatSkin", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "SpaTabCatSkinText", "fill": "$text-secondary", "content": "Chăm sóc da", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "SpaTabCatMassage", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "SpaTabCatMassageText", "fill": "$text-secondary", "content": "Massage", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "SpaTabCatNail", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "SpaTabCatNailText", "fill": "$text-secondary", "content": "Nail", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "SpaTabCatHair", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "SpaTabCatHairText", "fill": "$text-secondary", "content": "Tóc", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]} - ] - }, - { - "type": "frame", - "id": "SpaTabMain", - "width": "fill_container", - "height": "fill_container", - "children": [ - { - "type": "frame", - "id": "SpaTabProducts", - "width": "fill_container", - "height": "fill_container", - "padding": 16, - "layout": "vertical", - "gap": 12, - "clip": true, - "children": [ - {"type": "frame", "id": "SpaTabProdRow1", "width": "fill_container", "gap": 12, "children": [ - {"type": "frame", "id": "SpaTabProd1", "width": 160, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "SpaTabProd1Img", "width": "fill_container", "height": 85, "fill": "#EC489930"}, {"type": "frame", "id": "SpaTabProd1Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "SpaTabProd1Name", "fill": "$text-primary", "content": "Facial Cơ Bản", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "frame", "id": "SpaTabProd1Meta", "gap": 6, "alignItems": "center", "children": [{"type": "text", "id": "SpaTabProd1Duration", "fill": "$text-tertiary", "content": "60 phút", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"}, {"type": "text", "id": "SpaTabProd1Price", "fill": "$orange-primary", "content": "350,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}]}]}, - {"type": "frame", "id": "SpaTabProd2", "width": 160, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "SpaTabProd2Img", "width": "fill_container", "height": 85, "fill": "#8B5CF630"}, {"type": "frame", "id": "SpaTabProd2Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "SpaTabProd2Name", "fill": "$text-primary", "content": "Massage Body", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "frame", "id": "SpaTabProd2Meta", "gap": 6, "alignItems": "center", "children": [{"type": "text", "id": "SpaTabProd2Duration", "fill": "$text-tertiary", "content": "90 phút", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"}, {"type": "text", "id": "SpaTabProd2Price", "fill": "$orange-primary", "content": "550,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}]}]}, - {"type": "frame", "id": "SpaTabProd3", "width": 160, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 1, "fill": "$border-default"}, "layout": "vertical", "clip": true, "children": [{"type": "frame", "id": "SpaTabProd3Img", "width": "fill_container", "height": 85, "fill": "#F59E0B30"}, {"type": "frame", "id": "SpaTabProd3Info", "width": "fill_container", "layout": "vertical", "gap": 4, "padding": 10, "children": [{"type": "text", "id": "SpaTabProd3Name", "fill": "$text-primary", "content": "Nail Gel", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "frame", "id": "SpaTabProd3Meta", "gap": 6, "alignItems": "center", "children": [{"type": "text", "id": "SpaTabProd3Duration", "fill": "$text-tertiary", "content": "45 phút", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"}, {"type": "text", "id": "SpaTabProd3Price", "fill": "$orange-primary", "content": "200,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}]}]} - ]} - ] - }, - { - "type": "frame", - "id": "SpaTabCart", - "width": 300, - "height": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["left"]}, - "layout": "vertical", - "children": [ - {"type": "frame", "id": "SpaTabCartHeader", "width": "fill_container", "padding": [12, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "SpaTabCartTitle", "fill": "$text-primary", "content": "Dịch vụ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "text", "id": "SpaTabCartItems", "fill": "$text-secondary", "content": "2 dịch vụ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "SpaTabCartItems2", "width": "fill_container", "height": "fill_container", "layout": "vertical", "children": [ - {"type": "frame", "id": "SpaTabCartItem1", "width": "fill_container", "padding": [10, 16], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "SpaTabCartItem1Left", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "SpaTabCartItem1Name", "fill": "$text-primary", "content": "Facial Cơ Bản", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "frame", "id": "SpaTabCartItem1Staff", "gap": 4, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaTabCartItem1StaffIcon", "width": 12, "height": 12, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "#EC4899"}, {"type": "text", "id": "SpaTabCartItem1StaffName", "fill": "#EC4899", "content": "Hồng Nhung", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "500"}]}]}, {"type": "text", "id": "SpaTabCartItem1Price", "fill": "$text-primary", "content": "350,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "SpaTabCartItem2", "width": "fill_container", "padding": [10, 16], "justifyContent": "space_between", "alignItems": "center", "children": [{"type": "frame", "id": "SpaTabCartItem2Left", "layout": "vertical", "gap": 2, "children": [{"type": "text", "id": "SpaTabCartItem2Name", "fill": "$text-primary", "content": "Massage Body", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "frame", "id": "SpaTabCartItem2Staff", "gap": 4, "alignItems": "center", "children": [{"type": "icon_font", "id": "SpaTabCartItem2StaffIcon", "width": 12, "height": 12, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "#EC4899"}, {"type": "text", "id": "SpaTabCartItem2StaffName", "fill": "#EC4899", "content": "Minh Tâm", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "500"}]}]}, {"type": "text", "id": "SpaTabCartItem2Price", "fill": "$text-primary", "content": "550,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]} - ]}, - {"type": "frame", "id": "SpaTabCartSummary", "width": "fill_container", "fill": "$bg-surface", "layout": "vertical", "padding": 14, "gap": 6, "children": [ - {"type": "frame", "id": "SpaTabCartSubtotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "SpaTabCartSubtotalLabel", "fill": "$text-secondary", "content": "Tạm tính", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"}, {"type": "text", "id": "SpaTabCartSubtotalValue", "fill": "$text-primary", "content": "900,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "SpaTabCartPoints", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "SpaTabCartPointsLabel", "fill": "#22C55E", "content": "Dùng 500 điểm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "text", "id": "SpaTabCartPointsValue", "fill": "#22C55E", "content": "-50,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "SpaTabCartTotal", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "SpaTabCartTotalLabel", "fill": "$text-primary", "content": "Tổng cộng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, {"type": "text", "id": "SpaTabCartTotalValue", "fill": "$orange-primary", "content": "850,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}]}, - {"type": "frame", "id": "SpaTabCartEarn", "width": "fill_container", "justifyContent": "center", "children": [{"type": "text", "id": "SpaTabCartEarnText", "fill": "#F59E0B", "content": "+85 điểm sau thanh toán", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}]} - ]}, - {"type": "frame", "id": "SpaTabPayBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SpaTabPayIcon", "width": 18, "height": 18, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "SpaTabPayText", "fill": "$text-primary", "content": "Thanh toá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"}, - "bg-surface": {"type": "color", "value": "#111113"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/spa/workflow/appointment-book.pen b/pencil-design/src/pages/tPOS/pos/spa/workflow/appointment-book.pen deleted file mode 100644 index 1f5a8974..00000000 --- a/pencil-design/src/pages/tPOS/pos/spa/workflow/appointment-book.pen +++ /dev/null @@ -1,158 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "AppointmentBookDialog", - "name": "Dialog/Appointment Book", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "#0A0A0B80", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "AppointmentModal", - "width": 520, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 20, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "AppHeader", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "AppHeaderLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "AppIcon", "width": 44, "height": 44, "fill": "#22C55E1A", "cornerRadius": 22, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "AppIconI", "width": 22, "height": 22, "iconFontName": "calendar-plus", "iconFontFamily": "lucide", "fill": "#22C55E"} - ]}, - {"type": "frame", "id": "AppTitleBlock", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "AppTitle", "fill": "#FFFFFF", "content": "Đặt lịch hẹn", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}, - {"type": "text", "id": "AppDesc", "fill": "#8B8B90", "content": "Massage toàn thân 90'", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "AppClose", "width": 32, "height": 32, "fill": "#2A2A2E", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "AppCloseIcon", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#8B8B90"} - ]} - ] - }, - { - "type": "frame", - "id": "AppDatePicker", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - {"type": "text", "id": "AppDateLabel", "fill": "#8B8B90", "content": "Chọn ngày", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "frame", "id": "AppDates", "width": "fill_container", "gap": 8, "children": [ - {"type": "frame", "id": "AppDate1", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 10, "padding": [10, 0], "layout": "vertical", "gap": 2, "alignItems": "center", "children": [ - {"type": "text", "id": "AppDate1Day", "fill": "#6B6B70", "content": "T2", "fontFamily": "Roboto", "fontSize": 11}, - {"type": "text", "id": "AppDate1Num", "fill": "#8B8B90", "content": "10", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "AppDate2", "width": "fill_container", "fill": "#22C55E20", "stroke": {"thickness": 2, "fill": "#22C55E"}, "cornerRadius": 10, "padding": [10, 0], "layout": "vertical", "gap": 2, "alignItems": "center", "children": [ - {"type": "text", "id": "AppDate2Day", "fill": "#22C55E", "content": "T3", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"}, - {"type": "text", "id": "AppDate2Num", "fill": "#22C55E", "content": "11", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "AppDate3", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 10, "padding": [10, 0], "layout": "vertical", "gap": 2, "alignItems": "center", "children": [ - {"type": "text", "id": "AppDate3Day", "fill": "#6B6B70", "content": "T4", "fontFamily": "Roboto", "fontSize": 11}, - {"type": "text", "id": "AppDate3Num", "fill": "#8B8B90", "content": "12", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "AppDate4", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 10, "padding": [10, 0], "layout": "vertical", "gap": 2, "alignItems": "center", "children": [ - {"type": "text", "id": "AppDate4Day", "fill": "#6B6B70", "content": "T5", "fontFamily": "Roboto", "fontSize": 11}, - {"type": "text", "id": "AppDate4Num", "fill": "#8B8B90", "content": "13", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "AppDate5", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 10, "padding": [10, 0], "layout": "vertical", "gap": 2, "alignItems": "center", "children": [ - {"type": "text", "id": "AppDate5Day", "fill": "#6B6B70", "content": "T6", "fontFamily": "Roboto", "fontSize": 11}, - {"type": "text", "id": "AppDate5Num", "fill": "#8B8B90", "content": "14", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "AppDate6", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 10, "padding": [10, 0], "layout": "vertical", "gap": 2, "alignItems": "center", "children": [ - {"type": "text", "id": "AppDate6Day", "fill": "#EC4899", "content": "T7", "fontFamily": "Roboto", "fontSize": 11}, - {"type": "text", "id": "AppDate6Num", "fill": "#8B8B90", "content": "15", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "AppDate7", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 10, "padding": [10, 0], "layout": "vertical", "gap": 2, "alignItems": "center", "children": [ - {"type": "text", "id": "AppDate7Day", "fill": "#EF4444", "content": "CN", "fontFamily": "Roboto", "fontSize": 11}, - {"type": "text", "id": "AppDate7Num", "fill": "#8B8B90", "content": "16", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "AppTimePicker", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - {"type": "frame", "id": "AppTimeHeader", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "text", "id": "AppTimeLabel", "fill": "#8B8B90", "content": "Chọn giờ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "text", "id": "AppTimeAvail", "fill": "#22C55E", "content": "6 slot trống", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "AppTimes", "width": "fill_container", "gap": 8, "children": [ - {"type": "frame", "id": "AppTime1", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [10, 16], "children": [{"type": "text", "id": "AppTime1T", "fill": "#8B8B90", "content": "09:00", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "AppTime2", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [10, 16], "children": [{"type": "text", "id": "AppTime2T", "fill": "#8B8B90", "content": "10:30", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "AppTime3", "fill": "#22C55E20", "stroke": {"thickness": 2, "fill": "#22C55E"}, "cornerRadius": 8, "padding": [10, 16], "children": [{"type": "text", "id": "AppTime3T", "fill": "#22C55E", "content": "14:00", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, - {"type": "frame", "id": "AppTime4", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [10, 16], "children": [{"type": "text", "id": "AppTime4T", "fill": "#8B8B90", "content": "15:30", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]} - ]}, - {"type": "frame", "id": "AppTimes2", "width": "fill_container", "gap": 8, "children": [ - {"type": "frame", "id": "AppTime5", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [10, 16], "children": [{"type": "text", "id": "AppTime5T", "fill": "#8B8B90", "content": "17:00", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "AppTime6", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 8, "padding": [10, 16], "children": [{"type": "text", "id": "AppTime6T", "fill": "#8B8B90", "content": "19:00", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "AppTimeDisabled", "fill": "#1A1A1D40", "cornerRadius": 8, "padding": [10, 16], "children": [{"type": "text", "id": "AppTimeDisabledT", "fill": "#3A3A3E", "content": "20:30", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]} - ]} - ] - }, - { - "type": "frame", - "id": "AppStaff", - "width": "fill_container", - "layout": "vertical", - "gap": 10, - "children": [ - {"type": "text", "id": "AppStaffLabel", "fill": "#8B8B90", "content": "Nhân viên phục vụ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "frame", "id": "AppStaffSelected", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#22C55E"}, "cornerRadius": 12, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "AppStaffLeft", "gap": 10, "alignItems": "center", "children": [ - {"type": "frame", "id": "AppStaffAvatar", "width": 36, "height": 36, "fill": "#22C55E30", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "AppStaffInitial", "fill": "#22C55E", "content": "H", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]}, - {"type": "frame", "id": "AppStaffInfo", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "AppStaffName", "fill": "#FFFFFF", "content": "Hương", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "frame", "id": "AppStaffRating", "gap": 4, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "AppStaffStar", "width": 12, "height": 12, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "text", "id": "AppStaffRatingT", "fill": "#8B8B90", "content": "4.9 • 5 năm KN", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]} - ]}, - {"type": "icon_font", "id": "AppStaffCheck", "width": 20, "height": 20, "iconFontName": "check-circle-2", "iconFontFamily": "lucide", "fill": "#22C55E"} - ]} - ] - }, - {"type": "frame", "id": "AppDivider", "width": "fill_container", "height": 1, "fill": "#1F1F23"}, - { - "type": "frame", - "id": "AppSummary", - "width": "fill_container", - "fill": "#22C55E10", - "cornerRadius": 12, - "padding": 14, - "gap": 12, - "alignItems": "center", - "children": [ - {"type": "icon_font", "id": "AppSumIcon", "width": 20, "height": 20, "iconFontName": "calendar-check", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "AppSumText", "fill": "#22C55E", "content": "T3, 11/02 lúc 14:00 • NV Hương", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ] - }, - {"type": "frame", "id": "AppActions", "width": "fill_container", "gap": 12, "children": [ - {"type": "frame", "id": "AppCancel", "width": "fill_container", "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "AppCancelT", "fill": "#ADADB0", "content": "Hủy", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "AppConfirm", "width": "fill_container", "height": 48, "fill": "#22C55E", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "AppConfirmIcon", "width": 18, "height": 18, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFF"}, {"type": "text", "id": "AppConfirmT", "fill": "#FFF", "content": "Xác nhận đặt lịch", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]} - ]} - ] - } - ] - } - ] -} diff --git a/pencil-design/src/pages/tPOS/pos/spa/workflow/customer-lookup.pen b/pencil-design/src/pages/tPOS/pos/spa/workflow/customer-lookup.pen deleted file mode 100644 index 26483978..00000000 --- a/pencil-design/src/pages/tPOS/pos/spa/workflow/customer-lookup.pen +++ /dev/null @@ -1,170 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "SpaCustomerLookup", - "name": "Spa/Customer Lookup", - "reusable": true, - "width": 480, - "height": 640, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "LookupHeader", - "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": "LookupLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "LookupCloseBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LookupCloseIcon", "width": 20, "height": 20, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]}, - {"type": "text", "id": "LookupTitle", "fill": "$text-primary", "content": "Tìm khách hàng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "LookupNewBtn", "fill": "$orange-primary", "cornerRadius": 10, "padding": [10, 16], "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LookupNewIcon", "width": 18, "height": 18, "iconFontName": "user-plus", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "LookupNewText", "fill": "$text-primary", "content": "Tạo mới", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - }, - { - "type": "frame", - "id": "LookupSearch", - "width": "fill_container", - "padding": [16, 24], - "fill": "$bg-elevated", - "children": [ - {"type": "frame", "id": "LookupSearchBox", "width": "fill_container", "height": 52, "fill": "$bg-surface", "cornerRadius": 14, "stroke": {"thickness": 1, "fill": "$border-default"}, "padding": [0, 16], "gap": 12, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LookupSearchIcon", "width": 22, "height": 22, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "text", "id": "LookupSearchText", "fill": "$text-primary", "content": "Nguyễn", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "normal"}, - {"type": "frame", "id": "LookupSearchClear", "width": 28, "height": 28, "fill": "$bg-interactive", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "LookupSearchClearIcon", "width": 14, "height": 14, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "LookupResults", - "width": "fill_container", - "height": "fill_container", - "padding": 24, - "layout": "vertical", - "gap": 12, - "clip": true, - "children": [ - {"type": "text", "id": "ResultsCount", "fill": "$text-tertiary", "content": "3 kết quả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}, - { - "type": "frame", - "id": "Customer1", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": {"thickness": 2, "fill": "$orange-primary"}, - "padding": 16, - "gap": 16, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "Customer1Avatar", "width": 56, "height": 56, "fill": "#EC489920", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Customer1AvatarText", "fill": "#EC4899", "content": "NL", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}]}, - {"type": "frame", "id": "Customer1Info", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "frame", "id": "Customer1NameRow", "gap": 10, "alignItems": "center", "children": [ - {"type": "text", "id": "Customer1Name", "fill": "$text-primary", "content": "Nguyễn Thị Lan", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "frame", "id": "Customer1VIP", "fill": "#F59E0B20", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "Customer1VIPText", "fill": "#F59E0B", "content": "VIP Gold", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]} - ]}, - {"type": "text", "id": "Customer1Phone", "fill": "$text-secondary", "content": "0901 234 567", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}, - {"type": "frame", "id": "Customer1Stats", "gap": 16, "children": [ - {"type": "text", "id": "Customer1Points", "fill": "#22C55E", "content": "1,250 điểm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "text", "id": "Customer1Visits", "fill": "$text-tertiary", "content": "28 lượt", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ]} - ]}, - {"type": "icon_font", "id": "Customer1Check", "width": 24, "height": 24, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "$orange-primary"} - ] - }, - { - "type": "frame", - "id": "Customer2", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "padding": 16, - "gap": 16, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "Customer2Avatar", "width": 56, "height": 56, "fill": "#3B82F620", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Customer2AvatarText", "fill": "#3B82F6", "content": "NH", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}]}, - {"type": "frame", "id": "Customer2Info", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "text", "id": "Customer2Name", "fill": "$text-primary", "content": "Nguyễn Hoàng Anh", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "text", "id": "Customer2Phone", "fill": "$text-secondary", "content": "0912 345 678", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}, - {"type": "frame", "id": "Customer2Stats", "gap": 16, "children": [ - {"type": "text", "id": "Customer2Points", "fill": "#22C55E", "content": "320 điểm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "text", "id": "Customer2Visits", "fill": "$text-tertiary", "content": "5 lượt", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ]} - ]}, - {"type": "icon_font", "id": "Customer2Arrow", "width": 20, "height": 20, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ] - }, - { - "type": "frame", - "id": "Customer3", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "padding": 16, - "gap": 16, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "Customer3Avatar", "width": 56, "height": 56, "fill": "#22C55E20", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Customer3AvatarText", "fill": "#22C55E", "content": "NM", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}]}, - {"type": "frame", "id": "Customer3Info", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "text", "id": "Customer3Name", "fill": "$text-primary", "content": "Nguyễn Minh Châu", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "text", "id": "Customer3Phone", "fill": "$text-secondary", "content": "0987 654 321", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "normal"}, - {"type": "frame", "id": "Customer3Stats", "gap": 16, "children": [ - {"type": "text", "id": "Customer3Points", "fill": "#22C55E", "content": "85 điểm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, - {"type": "text", "id": "Customer3Visits", "fill": "$text-tertiary", "content": "2 lượt", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ]} - ]}, - {"type": "icon_font", "id": "Customer3Arrow", "width": 20, "height": 20, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ] - } - ] - }, - { - "type": "frame", - "id": "LookupFooter", - "width": "fill_container", - "fill": "$bg-elevated", - "padding": [16, 24], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, - "gap": 12, - "children": [ - {"type": "frame", "id": "LookupSkipBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "LookupSkipText", "fill": "$text-secondary", "content": "Bỏ qua", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "LookupSelectBtn", "width": "fill_container", "height": 48, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "LookupSelectText", "fill": "$text-primary", "content": "Chọn khách hàng", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ]} - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "bg-surface": {"type": "color", "value": "#111113"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "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/spa/workflow/customer-profile.pen b/pencil-design/src/pages/tPOS/pos/spa/workflow/customer-profile.pen deleted file mode 100644 index 4c2bfa1a..00000000 --- a/pencil-design/src/pages/tPOS/pos/spa/workflow/customer-profile.pen +++ /dev/null @@ -1,190 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "CustomerProfile", - "name": "Spa/Customer Profile", - "reusable": true, - "width": 500, - "height": 700, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "ProfileHeader", - "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": "ProfileHeaderLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "ProfileBackBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ProfileBackIcon", "width": 20, "height": 20, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]}, - {"type": "text", "id": "ProfileTitle", "fill": "$text-primary", "content": "Hồ sơ khách hàng", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "ProfileEditBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ProfileEditIcon", "width": 20, "height": 20, "iconFontName": "edit-2", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "ProfileContent", - "width": "fill_container", - "height": "fill_container", - "padding": 24, - "layout": "vertical", - "gap": 20, - "clip": true, - "children": [ - { - "type": "frame", - "id": "CustomerCard", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 16, - "padding": 24, - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "CustomerAvatar", "width": 80, "height": 80, "fill": "#EC489920", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "CustomerAvatarText", "fill": "#EC4899", "content": "NL", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "CustomerInfo", "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "CustomerName", "fill": "$text-primary", "content": "Nguyễn Thị Lan", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "700"}, - {"type": "text", "id": "CustomerPhone", "fill": "$text-secondary", "content": "0901 234 567", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "CustomerBadges", "gap": 12, "children": [ - {"type": "frame", "id": "VIPBadge", "fill": "#F59E0B20", "cornerRadius": 8, "padding": [8, 14], "gap": 6, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "VIPIcon", "width": 16, "height": 16, "iconFontName": "crown", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "text", "id": "VIPText", "fill": "#F59E0B", "content": "VIP Gold", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "PointsBadge", "fill": "#22C55E20", "cornerRadius": 8, "padding": [8, 14], "gap": 6, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "PointsIcon", "width": 16, "height": 16, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "PointsText", "fill": "#22C55E", "content": "1,250 điểm", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "StatsRow", - "width": "fill_container", - "gap": 12, - "children": [ - {"type": "frame", "id": "StatVisits", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": 16, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "StatVisitsValue", "fill": "$text-primary", "content": "28", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"}, - {"type": "text", "id": "StatVisitsLabel", "fill": "$text-tertiary", "content": "Lượt", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "StatSpent", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": 16, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "StatSpentValue", "fill": "$text-primary", "content": "12.5M", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"}, - {"type": "text", "id": "StatSpentLabel", "fill": "$text-tertiary", "content": "Đã chi", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "StatLast", "width": "fill_container", "fill": "$bg-elevated", "cornerRadius": 12, "padding": 16, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "StatLastValue", "fill": "$text-primary", "content": "3", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"}, - {"type": "text", "id": "StatLastLabel", "fill": "$text-tertiary", "content": "Ngày trước", "fontFamily": "Roboto", "fontSize": 12} - ]} - ] - }, - { - "type": "frame", - "id": "NotesSection", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "layout": "vertical", - "children": [ - {"type": "frame", "id": "NotesHeader", "width": "fill_container", "padding": [14, 18], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "NotesIcon", "width": 18, "height": 18, "iconFontName": "file-text", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "text", "id": "NotesTitle", "fill": "$text-primary", "content": "Ghi chú", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "NotesBody", "width": "fill_container", "padding": 18, "layout": "vertical", "gap": 10, "children": [ - {"type": "frame", "id": "NoteRow1", "gap": 8, "children": [ - {"type": "text", "id": "NoteLabel1", "fill": "$text-tertiary", "content": "Dị ứng:", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "NoteValue1", "fill": "$text-primary", "content": "Không", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "NoteRow2", "gap": 8, "children": [ - {"type": "text", "id": "NoteLabel2", "fill": "$text-tertiary", "content": "Ưa thích:", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "NoteValue2", "fill": "$text-primary", "content": "Massage thư giãn", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "NoteRow3", "gap": 8, "children": [ - {"type": "text", "id": "NoteLabel3", "fill": "$text-tertiary", "content": "Nhân viên:", "fontFamily": "Roboto", "fontSize": 13}, - {"type": "text", "id": "NoteValue3", "fill": "$text-primary", "content": "Chị Hương", "fontFamily": "Roboto", "fontSize": 13} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "HistorySection", - "width": "fill_container", - "height": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 14, - "layout": "vertical", - "clip": true, - "children": [ - {"type": "frame", "id": "HistoryHeader", "width": "fill_container", "padding": [14, 18], "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "HistoryIcon", "width": 18, "height": 18, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#8B5CF6"}, - {"type": "text", "id": "HistoryTitle", "fill": "$text-primary", "content": "Lịch sử gần đây", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "HistoryBody", "width": "fill_container", "padding": 12, "layout": "vertical", "gap": 10, "children": [ - {"type": "frame", "id": "HistoryItem1", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "History1Left", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "History1Date", "fill": "$text-tertiary", "content": "03/02/2026", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "History1Service", "fill": "$text-primary", "content": "Facial + Massage", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "History1Amount", "fill": "#22C55E", "content": "850,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "HistoryItem2", "width": "fill_container", "fill": "$bg-interactive", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "History2Left", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "History2Date", "fill": "$text-tertiary", "content": "15/01/2026", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "text", "id": "History2Service", "fill": "$text-primary", "content": "Gội đầu dưỡng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "text", "id": "History2Amount", "fill": "#22C55E", "content": "250,000₫", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "ProfileFooter", - "width": "fill_container", - "fill": "$bg-elevated", - "padding": [16, 24], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, - "gap": 12, - "children": [ - {"type": "frame", "id": "BookBtn", "width": "fill_container", "height": 48, "fill": "$orange-primary", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "gap": 8, "children": [ - {"type": "icon_font", "id": "BookIcon", "width": 18, "height": 18, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "BookText", "fill": "#FFFFFF", "content": "Đặt lịch", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "RedeemBtn", "width": "fill_container", "height": 48, "fill": "$bg-interactive", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "gap": 8, "children": [ - {"type": "icon_font", "id": "RedeemIcon", "width": 18, "height": 18, "iconFontName": "gift", "iconFontFamily": "lucide", "fill": "$text-secondary"}, - {"type": "text", "id": "RedeemText", "fill": "$text-secondary", "content": "Đổi đ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-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/spa/workflow/service-combo.pen b/pencil-design/src/pages/tPOS/pos/spa/workflow/service-combo.pen deleted file mode 100644 index 206febe4..00000000 --- a/pencil-design/src/pages/tPOS/pos/spa/workflow/service-combo.pen +++ /dev/null @@ -1,116 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "ServiceComboDialog", - "name": "Dialog/Service Combo", - "reusable": true, - "width": 1440, - "height": 900, - "fill": "#0A0A0B80", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ComboModal", - "width": 480, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 20, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "ComboHeader", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "ComboHeaderLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "ComboIcon", "width": 44, "height": 44, "fill": "#EC48991A", "cornerRadius": 22, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ComboIconI", "width": 22, "height": 22, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "#EC4899"} - ]}, - {"type": "frame", "id": "ComboTitleBlock", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "ComboTitle", "fill": "#FFFFFF", "content": "Combo dịch vụ", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}, - {"type": "text", "id": "ComboDesc", "fill": "#8B8B90", "content": "Tiết kiệm đến 30%", "fontFamily": "Roboto", "fontSize": 12} - ]} - ]}, - {"type": "frame", "id": "ComboClose", "width": 32, "height": 32, "fill": "#2A2A2E", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "ComboCloseIcon", "width": 16, "height": 16, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "#8B8B90"} - ]} - ] - }, - { - "type": "frame", - "id": "ComboList", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - {"type": "frame", "id": "Combo1", "width": "fill_container", "fill": "#EC489910", "stroke": {"thickness": 2, "fill": "#EC4899"}, "cornerRadius": 16, "padding": 16, "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "Combo1Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "flex-start", "children": [ - {"type": "frame", "id": "Combo1Left", "layout": "vertical", "gap": 4, "children": [ - {"type": "frame", "id": "Combo1NameRow", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "Combo1Name", "fill": "#FFFFFF", "content": "Combo Relax", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "frame", "id": "Combo1Badge", "fill": "#EC4899", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "Combo1BadgeT", "fill": "#FFF", "content": "HOT", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "700"}]} - ]}, - {"type": "text", "id": "Combo1Duration", "fill": "#8B8B90", "content": "120 phút", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "icon_font", "id": "Combo1Check", "width": 22, "height": 22, "iconFontName": "check-circle-2", "iconFontFamily": "lucide", "fill": "#EC4899"} - ]}, - {"type": "frame", "id": "Combo1Services", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "frame", "id": "Combo1Svc1", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "Combo1Svc1I", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}, {"type": "text", "id": "Combo1Svc1T", "fill": "#ADADB0", "content": "Massage toàn thân 60'", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "frame", "id": "Combo1Svc2", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "Combo1Svc2I", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}, {"type": "text", "id": "Combo1Svc2T", "fill": "#ADADB0", "content": "Xông hơi 30'", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "frame", "id": "Combo1Svc3", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "Combo1Svc3I", "width": 14, "height": 14, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}, {"type": "text", "id": "Combo1Svc3T", "fill": "#ADADB0", "content": "Đắp mặt nạ 30'", "fontFamily": "Roboto", "fontSize": 13}]} - ]}, - {"type": "frame", "id": "Combo1Price", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "Combo1PriceLeft", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "Combo1OldPrice", "fill": "#6B6B70", "content": "750,000₫", "fontFamily": "Roboto", "fontSize": 13, "textDecoration": "line-through"}, - {"type": "frame", "id": "Combo1Save", "fill": "#22C55E20", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "Combo1SaveT", "fill": "#22C55E", "content": "-20%", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}]} - ]}, - {"type": "text", "id": "Combo1NewPrice", "fill": "#EC4899", "content": "599,000₫", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} - ]} - ]}, - {"type": "frame", "id": "Combo2", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 16, "padding": 16, "layout": "vertical", "gap": 10, "children": [ - {"type": "frame", "id": "Combo2Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "Combo2Left", "layout": "vertical", "gap": 4, "children": [ - {"type": "frame", "id": "Combo2NameRow", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "Combo2Name", "fill": "#FFFFFF", "content": "Combo Premium", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "500"}, - {"type": "frame", "id": "Combo2Badge", "fill": "#F59E0B", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "Combo2BadgeT", "fill": "#000", "content": "VIP", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "700"}]} - ]}, - {"type": "text", "id": "Combo2Duration", "fill": "#8B8B90", "content": "180 phút • 5 dịch vụ", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "Combo2PriceBlock", "layout": "vertical", "gap": 2, "alignItems": "flex-end", "children": [ - {"type": "text", "id": "Combo2OldPrice", "fill": "#6B6B70", "content": "1,200,000₫", "fontFamily": "Roboto", "fontSize": 11, "textDecoration": "line-through"}, - {"type": "text", "id": "Combo2NewPrice", "fill": "#FFFFFF", "content": "899,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"} - ]} - ]} - ]}, - {"type": "frame", "id": "Combo3", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 16, "padding": 16, "layout": "vertical", "gap": 10, "children": [ - {"type": "frame", "id": "Combo3Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "Combo3Left", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "Combo3Name", "fill": "#FFFFFF", "content": "Combo Basic", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "500"}, - {"type": "text", "id": "Combo3Duration", "fill": "#8B8B90", "content": "60 phút • 2 dịch vụ", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "Combo3PriceBlock", "layout": "vertical", "gap": 2, "alignItems": "flex-end", "children": [ - {"type": "text", "id": "Combo3OldPrice", "fill": "#6B6B70", "content": "400,000₫", "fontFamily": "Roboto", "fontSize": 11, "textDecoration": "line-through"}, - {"type": "text", "id": "Combo3NewPrice", "fill": "#FFFFFF", "content": "299,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"} - ]} - ]} - ]} - ] - }, - {"type": "frame", "id": "ComboActions", "width": "fill_container", "gap": 12, "children": [ - {"type": "frame", "id": "ComboCustomize", "width": "fill_container", "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "gap": 6, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "ComboCustomizeIcon", "width": 16, "height": 16, "iconFontName": "sliders", "iconFontFamily": "lucide", "fill": "#ADADB0"}, {"type": "text", "id": "ComboCustomizeT", "fill": "#ADADB0", "content": "Tùy chỉnh", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}]}, - {"type": "frame", "id": "ComboConfirm", "width": "fill_container", "height": 48, "fill": "#EC4899", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "ComboConfirmIcon", "width": 18, "height": 18, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "#FFF"}, {"type": "text", "id": "ComboConfirmT", "fill": "#FFF", "content": "Chọn Combo Relax", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}]} - ]} - ] - } - ] - } - ] -} diff --git a/pencil-design/src/pages/tPOS/pos/spa/workflow/service-package.pen b/pencil-design/src/pages/tPOS/pos/spa/workflow/service-package.pen deleted file mode 100644 index b42fd7b0..00000000 --- a/pencil-design/src/pages/tPOS/pos/spa/workflow/service-package.pen +++ /dev/null @@ -1,533 +0,0 @@ -{ - "version": "2.7", - "children": [ - { - "type": "frame", - "id": "ServicePackageDialog", - "x": 0, - "y": 0, - "name": "Dialog/ServicePackage", - "reusable": true, - "clip": true, - "width": 420, - "height": 568, - "fill": "$bg-elevated", - "cornerRadius": 24, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "ServicePackageHeader", - "width": "fill_container", - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "padding": [ - 16, - 20 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ServicePackageHeaderLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ServicePackageIconBg", - "width": 40, - "height": 40, - "fill": "#EC489920", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ServicePackageIcon", - "width": 20, - "height": 20, - "iconFontName": "package", - "iconFontFamily": "lucide", - "fill": "#EC4899" - } - ] - }, - { - "type": "text", - "id": "ServicePackageTitle", - "fill": "$text-primary", - "content": "Gói dịch vụ", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "ServicePackageCloseBtn", - "width": 36, - "height": 36, - "fill": "$bg-interactive", - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ServicePackageCloseIcon", - "width": 18, - "height": 18, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "ServicePackageContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "gap": 16, - "padding": 20, - "children": [ - { - "type": "frame", - "id": "ServicePackageCustomer", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 14, - "gap": 12, - "padding": 14, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ServicePackageAvatar", - "width": 44, - "height": 44, - "fill": "#14B8A630", - "cornerRadius": 22, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ServicePackageInitial", - "fill": "#14B8A6", - "content": "LT", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "ServicePackageCustomerInfo", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "ServicePackageCustomerName", - "fill": "$text-primary", - "content": "Lê Thu", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - }, - { - "type": "text", - "id": "ServicePackageCustomerPhone", - "fill": "$text-tertiary", - "content": "0901 234 567", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "ServicePackageList", - "width": "fill_container", - "layout": "vertical", - "gap": 10, - "children": [ - { - "type": "text", - "id": "ServicePackageListLabel", - "fill": "$text-secondary", - "content": "Gói đã mua", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "Package1", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 14, - "stroke": { - "thickness": 2, - "fill": "#14B8A6" - }, - "layout": "vertical", - "gap": 10, - "padding": 14, - "children": [ - { - "type": "frame", - "id": "Package1Header", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "Package1Name", - "fill": "$text-primary", - "content": "Gói Massage VIP", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "Package1Badge", - "fill": "#22C55E20", - "cornerRadius": 8, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "Package1BadgeText", - "fill": "#22C55E", - "content": "Còn hạn", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "Package1Progress", - "width": "fill_container", - "height": 8, - "fill": "$bg-interactive", - "cornerRadius": 4, - "children": [ - { - "type": "frame", - "id": "Package1ProgressFill", - "width": "fit_content(0)", - "height": 8, - "fill": "#14B8A6", - "cornerRadius": 4 - } - ] - }, - { - "type": "frame", - "id": "Package1Stats", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "Package1StatsUsed", - "fill": "$text-tertiary", - "content": "Đã dùng: 6/10 buổi", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "Package1StatsExpiry", - "fill": "$text-tertiary", - "content": "HSD: 30/06/2025", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "Package2", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 14, - "layout": "vertical", - "gap": 10, - "padding": 14, - "children": [ - { - "type": "frame", - "id": "Package2Header", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "Package2Name", - "fill": "$text-primary", - "content": "Gói Chăm sóc da", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "Package2Badge", - "fill": "#F59E0B20", - "cornerRadius": 8, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "Package2BadgeText", - "fill": "#F59E0B", - "content": "Sắp hết", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "Package2Progress", - "width": "fill_container", - "height": 8, - "fill": "$bg-interactive", - "cornerRadius": 4, - "children": [ - { - "type": "frame", - "id": "Package2ProgressFill", - "width": "fit_content(0)", - "height": 8, - "fill": "#F59E0B", - "cornerRadius": 4 - } - ] - }, - { - "type": "frame", - "id": "Package2Stats", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "Package2StatsUsed", - "fill": "$text-tertiary", - "content": "Đã dùng: 9/10 buổi", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "Package2StatsExpiry", - "fill": "$text-tertiary", - "content": "HSD: 15/03/2025", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ServicePackageSelected", - "width": "fill_container", - "fill": "#14B8A615", - "cornerRadius": 12, - "gap": 10, - "padding": [ - 12, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ServicePackageSelectedIcon", - "width": 18, - "height": 18, - "iconFontName": "check-circle", - "iconFontFamily": "lucide", - "fill": "#14B8A6" - }, - { - "type": "frame", - "id": "ServicePackageSelectedInfo", - "width": "fill_container", - "layout": "vertical", - "gap": 2, - "children": [ - { - "type": "text", - "id": "ServicePackageSelectedTitle", - "fill": "#14B8A6", - "content": "Sử dụng 1 buổi từ gói VIP", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "text", - "id": "ServicePackageSelectedDesc", - "fill": "$text-tertiary", - "content": "Tiết kiệm 200,000₫", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ServicePackageFooter", - "width": "fill_container", - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "padding": [ - 16, - 20 - ], - "children": [ - { - "type": "frame", - "id": "ServicePackageApplyBtn", - "width": "fill_container", - "height": 52, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8533", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "gap": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ServicePackageApplyIcon", - "width": 20, - "height": 20, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "ServicePackageApplyText", - "fill": "$text-primary", - "content": "Sử dụng gó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/spa/workflow/spa-journey.pen b/pencil-design/src/pages/tPOS/pos/spa/workflow/spa-journey.pen deleted file mode 100644 index 3146b8bc..00000000 --- a/pencil-design/src/pages/tPOS/pos/spa/workflow/spa-journey.pen +++ /dev/null @@ -1,342 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "SpaJourney1", - "name": "Spa Journey/1-Booking", - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SJ1Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 20, - "padding": 28, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "SJ1Step", "fill": "#22C55E20", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "SJ1StepT", "fill": "#22C55E", "content": "Bước 1/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "frame", "id": "SJ1Icon", "width": 64, "height": 64, "fill": "#22C55E1A", "cornerRadius": 32, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SJ1IconI", "width": 28, "height": 28, "iconFontName": "calendar-check", "iconFontFamily": "lucide", "fill": "#22C55E"} - ]}, - {"type": "frame", "id": "SJ1Title", "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "SJ1TitleT", "fill": "#FFFFFF", "content": "Xác nhận lịch hẹn", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}, - {"type": "text", "id": "SJ1Desc", "fill": "#8B8B90", "content": "Chào mừng chị Ngọc Anh!", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "SJ1Booking", "width": "fill_container", "fill": "#22C55E10", "cornerRadius": 14, "padding": 16, "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "SJ1BookingRow1", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "SJ1BookingL1", "fill": "#8B8B90", "content": "Dịch vụ", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "SJ1BookingV1", "fill": "#FFFFFF", "content": "Combo Relax 120'", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "SJ1BookingRow2", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "SJ1BookingL2", "fill": "#8B8B90", "content": "Ngày giờ", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "SJ1BookingV2", "fill": "#22C55E", "content": "Hôm nay, 14:00", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, - {"type": "frame", "id": "SJ1BookingRow3", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "SJ1BookingL3", "fill": "#8B8B90", "content": "Nhân viên", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "SJ1BookingV3", "fill": "#FFFFFF", "content": "Chị Hương ⭐ 4.9", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "SJ1Divider", "width": "fill_container", "height": 1, "fill": "#22C55E30"}, - {"type": "frame", "id": "SJ1BookingRow4", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "SJ1BookingL4", "fill": "#8B8B90", "content": "Giá dịch vụ", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "SJ1BookingV4", "fill": "#22C55E", "content": "599,000₫", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"}]} - ]}, - {"type": "frame", "id": "SJ1Actions", "width": "fill_container", "gap": 10, "children": [ - {"type": "frame", "id": "SJ1Change", "width": 48, "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "SJ1ChangeI", "width": 18, "height": 18, "iconFontName": "edit-3", "iconFontFamily": "lucide", "fill": "#ADADB0"}]}, - {"type": "frame", "id": "SJ1Confirm", "width": "fill_container", "height": 48, "fill": "#22C55E", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SJ1ConfirmI", "width": 16, "height": 16, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "SJ1ConfirmT", "fill": "#FFFFFF", "content": "Check-in ngay", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "SpaJourney2", - "name": "Spa Journey/2-CheckIn", - "x": 540, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SJ2Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 24, - "padding": 32, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "SJ2Step", "fill": "#3B82F620", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "SJ2StepT", "fill": "#3B82F6", "content": "Bước 2/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "frame", "id": "SJ2Icon", "width": 72, "height": 72, "fill": "#3B82F61A", "cornerRadius": 36, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SJ2IconI", "width": 32, "height": 32, "iconFontName": "user-check", "iconFontFamily": "lucide", "fill": "#3B82F6"} - ]}, - {"type": "frame", "id": "SJ2Title", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "SJ2TitleT", "fill": "#FFFFFF", "content": "Check-in thành công!", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}, - {"type": "text", "id": "SJ2Desc", "fill": "#8B8B90", "content": "Vui lòng vào phòng thay đồ", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "SJ2Staff", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 14, "padding": 16, "gap": 14, "alignItems": "center", "children": [ - {"type": "frame", "id": "SJ2StaffAvatar", "width": 56, "height": 56, "fill": "#EC489930", "cornerRadius": 28, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SJ2StaffInitial", "fill": "#EC4899", "content": "H", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}]}, - {"type": "frame", "id": "SJ2StaffInfo", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "SJ2StaffName", "fill": "#FFFFFF", "content": "Chị Hương", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "frame", "id": "SJ2StaffRating", "gap": 6, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SJ2StaffStar", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "text", "id": "SJ2StaffRatingT", "fill": "#8B8B90", "content": "4.9 • 5 năm kinh nghiệm", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "text", "id": "SJ2StaffStatus", "fill": "#22C55E", "content": "Sẵn sàng phục vụ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]} - ]}, - {"type": "frame", "id": "SJ2Room", "width": "fill_container", "fill": "#EC489910", "cornerRadius": 10, "padding": 12, "gap": 10, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SJ2RoomI", "width": 18, "height": 18, "iconFontName": "door-open", "iconFontFamily": "lucide", "fill": "#EC4899"}, - {"type": "text", "id": "SJ2RoomT", "fill": "#EC4899", "content": "Phòng VIP 03 đã sẵn sàng", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SJ2Next", "width": "fill_container", "height": 48, "fill": "#3B82F6", "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SJ2NextT", "fill": "#FFFFFF", "content": "Bắt đầu dịch vụ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "icon_font", "id": "SJ2NextI", "width": 16, "height": 16, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "#FFFFFF"} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "SpaJourney3", - "name": "Spa Journey/3-Service", - "x": 1080, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SJ3Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 20, - "padding": 28, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "SJ3Step", "fill": "#EC489920", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "SJ3StepT", "fill": "#EC4899", "content": "Bước 3/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "frame", "id": "SJ3Timer", "width": "fill_container", "fill": "#EC48991A", "cornerRadius": 16, "padding": 20, "layout": "vertical", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "SJ3TimerLabel", "fill": "#EC4899", "content": "ĐANG THỰC HIỆN", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "600"}, - {"type": "text", "id": "SJ3TimerValue", "fill": "#EC4899", "content": "45:23", "fontFamily": "Roboto", "fontSize": 44, "fontWeight": "700"}, - {"type": "text", "id": "SJ3TimerRemain", "fill": "#8B8B90", "content": "Còn 75 phút", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "SJ3Progress", "width": "fill_container", "layout": "vertical", "gap": 12, "children": [ - {"type": "frame", "id": "SJ3Service1", "width": "fill_container", "fill": "#22C55E10", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SJ3Service1L", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SJ3Service1Check", "width": 16, "height": 16, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#22C55E"}, - {"type": "text", "id": "SJ3Service1N", "fill": "#FFFFFF", "content": "Massage đầu vai gáy", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "text", "id": "SJ3Service1S", "fill": "#22C55E", "content": "Hoàn thành", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SJ3Service2", "width": "fill_container", "fill": "#EC489910", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SJ3Service2L", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SJ3Service2Wait", "width": 16, "height": 16, "iconFontName": "loader-2", "iconFontFamily": "lucide", "fill": "#EC4899"}, - {"type": "text", "id": "SJ3Service2N", "fill": "#FFFFFF", "content": "Massage toàn thân", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "text", "id": "SJ3Service2S", "fill": "#EC4899", "content": "Đang thực hiện", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SJ3Service3", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 10, "padding": 12, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SJ3Service3L", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SJ3Service3Wait", "width": 16, "height": 16, "iconFontName": "circle", "iconFontFamily": "lucide", "fill": "#6B6B70"}, - {"type": "text", "id": "SJ3Service3N", "fill": "#8B8B90", "content": "Xông hơi + Đắp mặt nạ", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "text", "id": "SJ3Service3S", "fill": "#6B6B70", "content": "Chờ", "fontFamily": "Roboto", "fontSize": 11} - ]} - ]}, - {"type": "frame", "id": "SJ3Actions", "width": "fill_container", "gap": 10, "children": [ - {"type": "frame", "id": "SJ3Add", "width": "fill_container", "height": 44, "fill": "#2A2A2E", "cornerRadius": 10, "gap": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SJ3AddI", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#ADADB0"}, - {"type": "text", "id": "SJ3AddT", "fill": "#ADADB0", "content": "Thêm dịch vụ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SJ3Drink", "width": "fill_container", "height": 44, "fill": "#2A2A2E", "cornerRadius": 10, "gap": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SJ3DrinkI", "width": 16, "height": 16, "iconFontName": "cup-soda", "iconFontFamily": "lucide", "fill": "#ADADB0"}, - {"type": "text", "id": "SJ3DrinkT", "fill": "#ADADB0", "content": "Gọi nước", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "SpaJourney4", - "name": "Spa Journey/4-Upsell", - "x": 1620, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SJ4Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 20, - "padding": 28, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "SJ4Step", "fill": "#8B5CF620", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "SJ4StepT", "fill": "#8B5CF6", "content": "Bước 4/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "frame", "id": "SJ4Icon", "width": 64, "height": 64, "fill": "#8B5CF61A", "cornerRadius": 32, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SJ4IconI", "width": 28, "height": 28, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "#8B5CF6"} - ]}, - {"type": "frame", "id": "SJ4Title", "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "text", "id": "SJ4TitleT", "fill": "#FFFFFF", "content": "Gợi ý cho bạn", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}, - {"type": "text", "id": "SJ4Desc", "fill": "#8B8B90", "content": "Nâng cấp trải nghiệm của bạn", "fontFamily": "Roboto", "fontSize": 13} - ]}, - {"type": "frame", "id": "SJ4Offers", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ - {"type": "frame", "id": "SJ4Offer1", "width": "fill_container", "fill": "#8B5CF610", "stroke": {"thickness": 2, "fill": "#8B5CF6"}, "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 8, "children": [ - {"type": "frame", "id": "SJ4Offer1Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SJ4Offer1L", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "SJ4Offer1N", "fill": "#FFFFFF", "content": "Đắp mặt nạ cao cấp", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "frame", "id": "SJ4Offer1Badge", "fill": "#22C55E", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "SJ4Offer1BadgeT", "fill": "#FFF", "content": "-30%", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "700"}]} - ]}, - {"type": "icon_font", "id": "SJ4Offer1Check", "width": 18, "height": 18, "iconFontName": "check-circle-2", "iconFontFamily": "lucide", "fill": "#8B5CF6"} - ]}, - {"type": "frame", "id": "SJ4Offer1Price", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "SJ4Offer1Old", "fill": "#6B6B70", "content": "150,000₫", "fontFamily": "Roboto", "fontSize": 12, "textDecoration": "line-through"}, - {"type": "text", "id": "SJ4Offer1New", "fill": "#8B5CF6", "content": "99,000₫", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "SJ4Offer2", "width": "fill_container", "fill": "#1A1A1D", "stroke": {"thickness": 1, "fill": "#2A2A2E"}, "cornerRadius": 12, "padding": 14, "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SJ4Offer2L", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "SJ4Offer2N", "fill": "#FFFFFF", "content": "Thêm 30 phút massage", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"}, - {"type": "text", "id": "SJ4Offer2P", "fill": "#8B8B90", "content": "+120,000₫", "fontFamily": "Roboto", "fontSize": 13} - ]} - ]} - ]}, - {"type": "frame", "id": "SJ4Actions", "width": "fill_container", "gap": 10, "children": [ - {"type": "frame", "id": "SJ4Skip", "width": "fill_container", "height": 44, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "SJ4SkipT", "fill": "#ADADB0", "content": "Bỏ qua", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "SJ4Add", "width": "fill_container", "height": 44, "fill": "#8B5CF6", "cornerRadius": 10, "gap": 6, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SJ4AddI", "width": 16, "height": 16, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "SJ4AddT", "fill": "#FFFFFF", "content": "Thêm +99,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "SpaJourney5", - "name": "Spa Journey/5-Payment", - "x": 2160, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SJ5Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 16, - "padding": 24, - "children": [ - {"type": "frame", "id": "SJ5Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "SJ5Step", "fill": "#FF5C0020", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "SJ5StepT", "fill": "#FF5C00", "content": "Bước 5/6", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "text", "id": "SJ5Time", "fill": "#8B8B90", "content": "120 phút", "fontFamily": "Roboto", "fontSize": 12} - ]}, - {"type": "frame", "id": "SJ5Title", "width": "fill_container", "children": [{"type": "text", "id": "SJ5TitleT", "fill": "#FFFFFF", "content": "Tính tiền", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "600"}]}, - {"type": "frame", "id": "SJ5Bill", "width": "fill_container", "fill": "#1A1A1D", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 8, "children": [ - {"type": "frame", "id": "SJ5BillRow1", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "SJ5BillL1", "fill": "#8B8B90", "content": "Combo Relax 120'", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "SJ5BillV1", "fill": "#FFFFFF", "content": "599,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "SJ5BillRow2", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "SJ5BillL2", "fill": "#8B8B90", "content": "Đắp mặt nạ cao cấp", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "SJ5BillV2", "fill": "#FFFFFF", "content": "99,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "SJ5BillRow3", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "SJ5BillL3", "fill": "#8B8B90", "content": "Trà hoa cúc", "fontFamily": "Roboto", "fontSize": 12}, {"type": "text", "id": "SJ5BillV3", "fill": "#FFFFFF", "content": "35,000₫", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]} - ]}, - {"type": "frame", "id": "SJ5Summary", "width": "fill_container", "layout": "vertical", "gap": 8, "children": [ - {"type": "frame", "id": "SJ5Sub", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "SJ5SubL", "fill": "#8B8B90", "content": "Tạm tính", "fontFamily": "Roboto", "fontSize": 13}, {"type": "text", "id": "SJ5SubV", "fill": "#FFFFFF", "content": "733,000₫", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "frame", "id": "SJ5Loyalty", "width": "fill_container", "justifyContent": "space_between", "children": [ - {"type": "frame", "id": "SJ5LoyaltyL", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "SJ5LoyaltyI", "width": 12, "height": 12, "iconFontName": "coins", "iconFontFamily": "lucide", "fill": "#14B8A6"}, {"type": "text", "id": "SJ5LoyaltyT", "fill": "#14B8A6", "content": "Dùng 200 điểm", "fontFamily": "Roboto", "fontSize": 13}]}, - {"type": "text", "id": "SJ5LoyaltyV", "fill": "#14B8A6", "content": "-20,000₫", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SJ5DividerB", "width": "fill_container", "height": 1, "fill": "#2A2A2E"}, - {"type": "frame", "id": "SJ5Total", "width": "fill_container", "justifyContent": "space_between", "children": [{"type": "text", "id": "SJ5TotalL", "fill": "#FFFFFF", "content": "Tổng thanh toán", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, {"type": "text", "id": "SJ5TotalV", "fill": "#FF5C00", "content": "713,000₫", "fontFamily": "Roboto", "fontSize": 22, "fontWeight": "700"}]} - ]}, - {"type": "frame", "id": "SJ5Pay", "width": "fill_container", "height": 50, "fill": {"type": "gradient", "gradientType": "linear", "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 10, "gap": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SJ5PayI", "width": 18, "height": 18, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "#FFFFFF"}, - {"type": "text", "id": "SJ5PayT", "fill": "#FFFFFF", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ] - } - ] - }, - { - "type": "frame", - "id": "SpaJourney6", - "name": "Spa Journey/6-Feedback", - "x": 2700, - "width": 440, - "height": 700, - "fill": "#0A0A0B", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SJ6Modal", - "width": 380, - "fill": "#111113", - "cornerRadius": 24, - "stroke": {"thickness": 1, "fill": "#1F1F23"}, - "layout": "vertical", - "gap": 24, - "padding": 36, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "SJ6Step", "fill": "#14B8A620", "cornerRadius": 20, "padding": [6, 14], "children": [{"type": "text", "id": "SJ6StepT", "fill": "#14B8A6", "content": "Hoàn tất", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]}, - {"type": "frame", "id": "SJ6Icon", "width": 88, "height": 88, "fill": "#14B8A61A", "cornerRadius": 44, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SJ6IconI", "width": 40, "height": 40, "iconFontName": "heart", "iconFontFamily": "lucide", "fill": "#14B8A6"} - ]}, - {"type": "frame", "id": "SJ6Title", "layout": "vertical", "gap": 8, "alignItems": "center", "children": [ - {"type": "text", "id": "SJ6TitleT", "fill": "#FFFFFF", "content": "Cảm ơn chị Ngọc Anh!", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}, - {"type": "text", "id": "SJ6Desc", "fill": "#8B8B90", "content": "Hẹn gặp lại lần sau 💆‍♀️", "fontFamily": "Roboto", "fontSize": 14} - ]}, - {"type": "frame", "id": "SJ6Points", "width": "fill_container", "fill": "#14B8A610", "cornerRadius": 14, "padding": 18, "layout": "vertical", "gap": 8, "alignItems": "center", "children": [ - {"type": "frame", "id": "SJ6PointsRow", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "SJ6PointsI", "width": 18, "height": 18, "iconFontName": "coins", "iconFontFamily": "lucide", "fill": "#14B8A6"}, - {"type": "text", "id": "SJ6PointsLabel", "fill": "#14B8A6", "content": "Điểm tích lũy", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"} - ]}, - {"type": "text", "id": "SJ6PointsValue", "fill": "#14B8A6", "content": "+71 điểm", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, - {"type": "text", "id": "SJ6PointsTotal", "fill": "#8B8B90", "content": "Tổng: 3,891 điểm", "fontFamily": "Roboto", "fontSize": 11} - ]}, - {"type": "frame", "id": "SJ6Rating", "width": "fill_container", "layout": "vertical", "gap": 12, "alignItems": "center", "children": [ - {"type": "text", "id": "SJ6RatingLabel", "fill": "#8B8B90", "content": "Đánh giá dịch vụ hôm nay", "fontFamily": "Roboto", "fontSize": 12}, - {"type": "frame", "id": "SJ6Stars", "gap": 10, "children": [ - {"type": "icon_font", "id": "SJ6Star1", "width": 32, "height": 32, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "SJ6Star2", "width": 32, "height": 32, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "SJ6Star3", "width": 32, "height": 32, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "SJ6Star4", "width": 32, "height": 32, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "icon_font", "id": "SJ6Star5", "width": 32, "height": 32, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"} - ]}, - {"type": "text", "id": "SJ6RatingText", "fill": "#F59E0B", "content": "Tuyệt vời!", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "SJ6Done", "width": "fill_container", "height": 48, "fill": "#2A2A2E", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "SJ6DoneT", "fill": "#FFFFFF", "content": "Hoàn tất", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "500"} - ]} - ] - } - ] - } - ] -} diff --git a/pencil-design/src/pages/tPOS/pos/spa/workflow/staff-assign.pen b/pencil-design/src/pages/tPOS/pos/spa/workflow/staff-assign.pen deleted file mode 100644 index 1672e2bc..00000000 --- a/pencil-design/src/pages/tPOS/pos/spa/workflow/staff-assign.pen +++ /dev/null @@ -1,180 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "SpaStaffAssign", - "name": "Spa/Staff Assignment", - "reusable": true, - "width": 480, - "height": 640, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "StaffHeader", - "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": "StaffLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "StaffBackBtn", "width": 40, "height": 40, "fill": "$bg-interactive", "cornerRadius": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "StaffBackIcon", "width": 20, "height": 20, "iconFontName": "arrow-left", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]}, - {"type": "frame", "id": "StaffTitleInfo", "layout": "vertical", "gap": 2, "children": [ - {"type": "text", "id": "StaffTitle", "fill": "$text-primary", "content": "Chọn nhân viên", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"}, - {"type": "text", "id": "StaffService", "fill": "$text-tertiary", "content": "Facial Cơ Bản • 60 phút", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "StaffFilters", - "width": "fill_container", - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "padding": [12, 24], - "gap": 8, - "children": [ - {"type": "frame", "id": "FilterAll", "fill": "$orange-primary", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "FilterAllText", "fill": "$text-primary", "content": "Tất cả", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}]}, - {"type": "frame", "id": "FilterAvailable", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "FilterAvailableText", "fill": "$text-secondary", "content": "Đang rảnh", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "frame", "id": "FilterSkilled", "fill": "$bg-interactive", "cornerRadius": 100, "padding": [8, 16], "children": [{"type": "text", "id": "FilterSkilledText", "fill": "$text-secondary", "content": "Chuyên môn cao", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]} - ] - }, - { - "type": "frame", - "id": "StaffList", - "width": "fill_container", - "height": "fill_container", - "padding": 24, - "layout": "vertical", - "gap": 12, - "clip": true, - "children": [ - { - "type": "frame", - "id": "Staff1", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": {"thickness": 2, "fill": "$orange-primary"}, - "padding": 16, - "gap": 16, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "Staff1Avatar", "width": 60, "height": 60, "fill": "#EC489930", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Staff1AvatarText", "fill": "#EC4899", "content": "HN", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}]}, - {"type": "frame", "id": "Staff1Info", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "frame", "id": "Staff1NameRow", "gap": 10, "alignItems": "center", "children": [ - {"type": "text", "id": "Staff1Name", "fill": "$text-primary", "content": "Hồng Nhung", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "frame", "id": "Staff1StatusBadge", "fill": "#22C55E20", "cornerRadius": 100, "padding": [4, 10], "children": [{"type": "text", "id": "Staff1StatusText", "fill": "#22C55E", "content": "Rảnh", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]} - ]}, - {"type": "frame", "id": "Staff1Skills", "gap": 8, "children": [ - {"type": "frame", "id": "Staff1Skill1", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "Staff1Skill1Text", "fill": "$text-secondary", "content": "Facial", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "500"}]}, - {"type": "frame", "id": "Staff1Skill2", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "Staff1Skill2Text", "fill": "$text-secondary", "content": "Massage", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "500"}]} - ]}, - {"type": "frame", "id": "Staff1Rating", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Staff1Star", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "text", "id": "Staff1RatingValue", "fill": "#F59E0B", "content": "4.9", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "Staff1Reviews", "fill": "$text-tertiary", "content": "(128 đánh giá)", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ]} - ]}, - {"type": "icon_font", "id": "Staff1Check", "width": 24, "height": 24, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "$orange-primary"} - ] - }, - { - "type": "frame", - "id": "Staff2", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "padding": 16, - "gap": 16, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "Staff2Avatar", "width": 60, "height": 60, "fill": "#8B5CF630", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Staff2AvatarText", "fill": "#8B5CF6", "content": "MT", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}]}, - {"type": "frame", "id": "Staff2Info", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "frame", "id": "Staff2NameRow", "gap": 10, "alignItems": "center", "children": [ - {"type": "text", "id": "Staff2Name", "fill": "$text-primary", "content": "Minh Tâm", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "frame", "id": "Staff2StatusBadge", "fill": "#F59E0B20", "cornerRadius": 100, "padding": [4, 10], "children": [{"type": "text", "id": "Staff2StatusText", "fill": "#F59E0B", "content": "Bận đến 14:30", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]} - ]}, - {"type": "frame", "id": "Staff2Skills", "gap": 8, "children": [ - {"type": "frame", "id": "Staff2Skill1", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "Staff2Skill1Text", "fill": "$text-secondary", "content": "Massage", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "500"}]}, - {"type": "frame", "id": "Staff2Skill2", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "Staff2Skill2Text", "fill": "$text-secondary", "content": "Body", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "500"}]} - ]}, - {"type": "frame", "id": "Staff2Rating", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Staff2Star", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "text", "id": "Staff2RatingValue", "fill": "#F59E0B", "content": "4.8", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "Staff2Reviews", "fill": "$text-tertiary", "content": "(95 đánh giá)", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ]} - ]}, - {"type": "icon_font", "id": "Staff2Arrow", "width": 20, "height": 20, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ] - }, - { - "type": "frame", - "id": "Staff3", - "width": "fill_container", - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": {"thickness": 1, "fill": "$border-default"}, - "padding": 16, - "gap": 16, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "Staff3Avatar", "width": 60, "height": 60, "fill": "#3B82F630", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "Staff3AvatarText", "fill": "#3B82F6", "content": "TL", "fontFamily": "Roboto", "fontSize": 20, "fontWeight": "600"}]}, - {"type": "frame", "id": "Staff3Info", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "frame", "id": "Staff3NameRow", "gap": 10, "alignItems": "center", "children": [ - {"type": "text", "id": "Staff3Name", "fill": "$text-primary", "content": "Thanh Lan", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "600"}, - {"type": "frame", "id": "Staff3StatusBadge", "fill": "#22C55E20", "cornerRadius": 100, "padding": [4, 10], "children": [{"type": "text", "id": "Staff3StatusText", "fill": "#22C55E", "content": "Rảnh", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}]} - ]}, - {"type": "frame", "id": "Staff3Skills", "gap": 8, "children": [ - {"type": "frame", "id": "Staff3Skill1", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "Staff3Skill1Text", "fill": "$text-secondary", "content": "Nail", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "500"}]}, - {"type": "frame", "id": "Staff3Skill2", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "Staff3Skill2Text", "fill": "$text-secondary", "content": "Facial", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "500"}]} - ]}, - {"type": "frame", "id": "Staff3Rating", "gap": 8, "alignItems": "center", "children": [ - {"type": "icon_font", "id": "Staff3Star", "width": 14, "height": 14, "iconFontName": "star", "iconFontFamily": "lucide", "fill": "#F59E0B"}, - {"type": "text", "id": "Staff3RatingValue", "fill": "#F59E0B", "content": "4.7", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "Staff3Reviews", "fill": "$text-tertiary", "content": "(62 đánh giá)", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "normal"} - ]} - ]}, - {"type": "icon_font", "id": "Staff3Arrow", "width": 20, "height": 20, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"} - ] - } - ] - }, - { - "type": "frame", - "id": "StaffFooter", - "width": "fill_container", - "fill": "$bg-elevated", - "padding": [16, 24], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, - "children": [ - {"type": "frame", "id": "StaffConfirmBtn", "width": "fill_container", "height": 56, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "size": {"height": 1}, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8A4C", "position": 1}]}, "cornerRadius": 14, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "StaffConfirmText", "fill": "$text-primary", "content": "Xác nhận • Hồng Nhung", "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"}, - "bg-surface": {"type": "color", "value": "#111113"}, - "border-default": {"type": "color", "value": "#2A2A2E"}, - "border-subtle": {"type": "color", "value": "#1F1F23"}, - "orange-primary": {"type": "color", "value": "#FF5C00"}, - "text-primary": {"type": "color", "value": "#FFFFFF"}, - "text-secondary": {"type": "color", "value": "#ADADB0"}, - "text-tertiary": {"type": "color", "value": "#8B8B90"} - } -} diff --git a/pencil-design/src/pages/tPOS/pos/spa/workflow/therapist-schedule.pen b/pencil-design/src/pages/tPOS/pos/spa/workflow/therapist-schedule.pen deleted file mode 100644 index b7685dd7..00000000 --- a/pencil-design/src/pages/tPOS/pos/spa/workflow/therapist-schedule.pen +++ /dev/null @@ -1,166 +0,0 @@ -{ - "version": "2.7", - "children": [ - { - "type": "frame", - "id": "TherapistScheduleScreen", - "name": "Screen/TherapistSchedule", - "reusable": true, - "clip": true, - "width": 480, - "height": 560, - "fill": "$bg-elevated", - "cornerRadius": 24, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "TherapistScheduleHeader", - "width": "fill_container", - "padding": [16, 20], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "TherapistScheduleHeaderLeft", "gap": 12, "alignItems": "center", "children": [ - {"type": "frame", "id": "TherapistScheduleIconBg", "width": 40, "height": 40, "fill": "#3B82F620", "cornerRadius": 12, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "TherapistScheduleIcon", "width": 20, "height": 20, "iconFontName": "calendar", "iconFontFamily": "lucide", "fill": "#3B82F6"} - ]}, - {"type": "text", "id": "TherapistScheduleTitle", "fill": "$text-primary", "content": "Lịch kỹ thuật viên", "fontFamily": "Roboto", "fontSize": 18, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "TherapistScheduleCloseBtn", "width": 36, "height": 36, "fill": "$bg-interactive", "cornerRadius": 18, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "TherapistScheduleCloseIcon", "width": 18, "height": 18, "iconFontName": "x", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ] - }, - { - "type": "frame", - "id": "TherapistScheduleContent", - "width": "fill_container", - "height": "fill_container", - "padding": 20, - "layout": "vertical", - "gap": 16, - "children": [ - {"type": "frame", "id": "TherapistScheduleDateRow", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "frame", "id": "TherapistSchedulePrevBtn", "width": 36, "height": 36, "fill": "$bg-page", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "TherapistSchedulePrevIcon", "width": 18, "height": 18, "iconFontName": "chevron-left", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]}, - {"type": "text", "id": "TherapistScheduleDate", "fill": "$text-primary", "content": "Thứ Năm, 06/02/2025", "fontFamily": "Roboto", "fontSize": 15, "fontWeight": "600"}, - {"type": "frame", "id": "TherapistScheduleNextBtn", "width": 36, "height": 36, "fill": "$bg-page", "cornerRadius": 8, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "TherapistScheduleNextIcon", "width": 18, "height": 18, "iconFontName": "chevron-right", "iconFontFamily": "lucide", "fill": "$text-secondary"} - ]} - ]}, - {"type": "frame", "id": "TherapistScheduleList", "width": "fill_container", "layout": "vertical", "gap": 10, "children": [ - {"type": "frame", "id": "Therapist1", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 12, "children": [ - {"type": "frame", "id": "Therapist1Avatar", "width": 48, "height": 48, "fill": "#14B8A630", "cornerRadius": 24, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Therapist1Initial", "fill": "#14B8A6", "content": "TH", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "Therapist1Info", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "frame", "id": "Therapist1Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "Therapist1Name", "fill": "$text-primary", "content": "Nguyễn Thị Hoa", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "frame", "id": "Therapist1Status", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 8], "children": [ - {"type": "text", "id": "Therapist1StatusText", "fill": "#22C55E", "content": "Rảnh", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "Therapist1Slots", "width": "fill_container", "gap": 6, "children": [ - {"type": "frame", "id": "Therapist1Slot1", "fill": "$bg-interactive", "cornerRadius": 6, "padding": [4, 8], "children": [ - {"type": "text", "id": "Therapist1Slot1Text", "fill": "$text-tertiary", "content": "09:00", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "Therapist1Slot2", "fill": "$bg-interactive", "cornerRadius": 6, "padding": [4, 8], "children": [ - {"type": "text", "id": "Therapist1Slot2Text", "fill": "$text-tertiary", "content": "10:30", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "Therapist1Slot3", "fill": "#FF5C0030", "cornerRadius": 6, "padding": [4, 8], "children": [ - {"type": "text", "id": "Therapist1Slot3Text", "fill": "$orange-primary", "content": "14:00", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]}, - {"type": "frame", "id": "Therapist1Slot4", "fill": "$bg-interactive", "cornerRadius": 6, "padding": [4, 8], "children": [ - {"type": "text", "id": "Therapist1Slot4Text", "fill": "$text-tertiary", "content": "16:00", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"} - ]} - ]} - ]} - ]}, - {"type": "frame", "id": "Therapist2", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 12, "children": [ - {"type": "frame", "id": "Therapist2Avatar", "width": 48, "height": 48, "fill": "#EC489930", "cornerRadius": 24, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Therapist2Initial", "fill": "#EC4899", "content": "ML", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "Therapist2Info", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "frame", "id": "Therapist2Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "Therapist2Name", "fill": "$text-primary", "content": "Trần Mai Lan", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "frame", "id": "Therapist2Status", "fill": "#F59E0B20", "cornerRadius": 6, "padding": [4, 8], "children": [ - {"type": "text", "id": "Therapist2StatusText", "fill": "#F59E0B", "content": "Đang bận", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "Therapist2Slots", "width": "fill_container", "gap": 6, "children": [ - {"type": "frame", "id": "Therapist2Slot1", "fill": "#EF444420", "cornerRadius": 6, "padding": [4, 8], "children": [ - {"type": "text", "id": "Therapist2Slot1Text", "fill": "#EF4444", "content": "09:00 ✗", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "Therapist2Slot2", "fill": "#EF444420", "cornerRadius": 6, "padding": [4, 8], "children": [ - {"type": "text", "id": "Therapist2Slot2Text", "fill": "#EF4444", "content": "10:30 ✗", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "Therapist2Slot3", "fill": "$bg-interactive", "cornerRadius": 6, "padding": [4, 8], "children": [ - {"type": "text", "id": "Therapist2Slot3Text", "fill": "$text-tertiary", "content": "14:00", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "Therapist2Slot4", "fill": "$bg-interactive", "cornerRadius": 6, "padding": [4, 8], "children": [ - {"type": "text", "id": "Therapist2Slot4Text", "fill": "$text-tertiary", "content": "16:00", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"} - ]} - ]} - ]} - ]}, - {"type": "frame", "id": "Therapist3", "width": "fill_container", "fill": "$bg-page", "cornerRadius": 14, "padding": 14, "gap": 12, "children": [ - {"type": "frame", "id": "Therapist3Avatar", "width": 48, "height": 48, "fill": "#3B82F630", "cornerRadius": 24, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "text", "id": "Therapist3Initial", "fill": "#3B82F6", "content": "HN", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "700"} - ]}, - {"type": "frame", "id": "Therapist3Info", "width": "fill_container", "layout": "vertical", "gap": 6, "children": [ - {"type": "frame", "id": "Therapist3Header", "width": "fill_container", "justifyContent": "space_between", "alignItems": "center", "children": [ - {"type": "text", "id": "Therapist3Name", "fill": "$text-primary", "content": "Lê Hoàng Nam", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "frame", "id": "Therapist3Status", "fill": "#22C55E20", "cornerRadius": 6, "padding": [4, 8], "children": [ - {"type": "text", "id": "Therapist3StatusText", "fill": "#22C55E", "content": "Rảnh", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"} - ]} - ]}, - {"type": "frame", "id": "Therapist3Slots", "width": "fill_container", "gap": 6, "children": [ - {"type": "frame", "id": "Therapist3Slot1", "fill": "$bg-interactive", "cornerRadius": 6, "padding": [4, 8], "children": [ - {"type": "text", "id": "Therapist3Slot1Text", "fill": "$text-tertiary", "content": "09:00", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "Therapist3Slot2", "fill": "$bg-interactive", "cornerRadius": 6, "padding": [4, 8], "children": [ - {"type": "text", "id": "Therapist3Slot2Text", "fill": "$text-tertiary", "content": "10:30", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "Therapist3Slot3", "fill": "$bg-interactive", "cornerRadius": 6, "padding": [4, 8], "children": [ - {"type": "text", "id": "Therapist3Slot3Text", "fill": "$text-tertiary", "content": "14:00", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"} - ]}, - {"type": "frame", "id": "Therapist3Slot4", "fill": "$bg-interactive", "cornerRadius": 6, "padding": [4, 8], "children": [ - {"type": "text", "id": "Therapist3Slot4Text", "fill": "$text-tertiary", "content": "16:00", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "500"} - ]} - ]} - ]} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "TherapistScheduleFooter", - "width": "fill_container", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, - "padding": [16, 20], - "children": [ - {"type": "frame", "id": "TherapistScheduleBookBtn", "width": "fill_container", "height": 52, "fill": {"type": "gradient", "gradientType": "linear", "enabled": true, "rotation": 135, "colors": [{"color": "#FF5C00", "position": 0}, {"color": "#FF8533", "position": 1}]}, "cornerRadius": 12, "gap": 10, "justifyContent": "center", "alignItems": "center", "children": [ - {"type": "icon_font", "id": "TherapistScheduleBookIcon", "width": 20, "height": 20, "iconFontName": "calendar-plus", "iconFontFamily": "lucide", "fill": "$text-primary"}, - {"type": "text", "id": "TherapistScheduleBookText", "fill": "$text-primary", "content": "Đặt lịch", "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/spa/workflow/treatment-timer.pen b/pencil-design/src/pages/tPOS/pos/spa/workflow/treatment-timer.pen deleted file mode 100644 index d76361fb..00000000 --- a/pencil-design/src/pages/tPOS/pos/spa/workflow/treatment-timer.pen +++ /dev/null @@ -1,395 +0,0 @@ -{ - "version": "2.7", - "children": [ - { - "type": "frame", - "id": "TreatmentTimerDialog", - "x": 0, - "y": 0, - "name": "Dialog/TreatmentTimer", - "reusable": true, - "clip": true, - "width": 380, - "height": 529, - "fill": "$bg-elevated", - "cornerRadius": 24, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "TreatmentTimerHeader", - "width": "fill_container", - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "padding": [ - 16, - 20 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "TreatmentTimerHeaderLeft", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "TreatmentTimerIconBg", - "width": 40, - "height": 40, - "fill": "#14B8A620", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "TreatmentTimerIcon", - "width": 20, - "height": 20, - "iconFontName": "timer", - "iconFontFamily": "lucide", - "fill": "#14B8A6" - } - ] - }, - { - "type": "text", - "id": "TreatmentTimerTitle", - "fill": "$text-primary", - "content": "Thời gian liệu trình", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "TreatmentTimerCloseBtn", - "width": 36, - "height": 36, - "fill": "$bg-interactive", - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "TreatmentTimerCloseIcon", - "width": 18, - "height": 18, - "iconFontName": "x", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "TreatmentTimerContent", - "width": "fill_container", - "height": "fill_container", - "layout": "vertical", - "gap": 20, - "padding": 20, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "TreatmentTimerDisplay", - "width": 200, - "height": 200, - "fill": "$bg-page", - "cornerRadius": 100, - "stroke": { - "thickness": 8, - "fill": "#14B8A6" - }, - "layout": "vertical", - "gap": 4, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "TreatmentTimerTime", - "fill": "$text-primary", - "content": "45:23", - "fontFamily": "Roboto", - "fontSize": 48, - "fontWeight": "700" - }, - { - "type": "text", - "id": "TreatmentTimerRemaining", - "fill": "$text-tertiary", - "content": "còn lại", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "TreatmentTimerInfo", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 14, - "layout": "vertical", - "gap": 10, - "padding": 14, - "children": [ - { - "type": "frame", - "id": "TreatmentTimerService", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "TreatmentTimerServiceLabel", - "fill": "$text-secondary", - "content": "Dịch vụ:", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "TreatmentTimerServiceValue", - "fill": "$text-primary", - "content": "Massage body 90 phút", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "TreatmentTimerRoom", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "TreatmentTimerRoomLabel", - "fill": "$text-secondary", - "content": "Phòng:", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "TreatmentTimerRoomValue", - "fill": "$text-primary", - "content": "VIP 03", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "TreatmentTimerTherapist", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "TreatmentTimerTherapistLabel", - "fill": "$text-secondary", - "content": "KTV:", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "TreatmentTimerTherapistValue", - "fill": "$text-primary", - "content": "Nguyễn Thị Hoa", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "TreatmentTimerStart", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "TreatmentTimerStartLabel", - "fill": "$text-secondary", - "content": "Bắt đầu:", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "TreatmentTimerStartValue", - "fill": "$text-primary", - "content": "14:30 - Kết thúc: 16:00", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "TreatmentTimerFooter", - "width": "fill_container", - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "gap": 12, - "padding": [ - 16, - 20 - ], - "children": [ - { - "type": "frame", - "id": "TreatmentTimerExtendBtn", - "width": "fill_container", - "height": 48, - "fill": "$bg-interactive", - "cornerRadius": 12, - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "TreatmentTimerExtendIcon", - "width": 18, - "height": 18, - "iconFontName": "plus", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "TreatmentTimerExtendText", - "fill": "$text-secondary", - "content": "+15 phút", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "TreatmentTimerCompleteBtn", - "width": "fill_container", - "height": 48, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#14B8A6", - "position": 0 - }, - { - "color": "#0D9488", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "TreatmentTimerCompleteIcon", - "width": 18, - "height": 18, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "TreatmentTimerCompleteText", - "fill": "$text-primary", - "content": "Hoàn thành", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - } - ] - } - ], - "variables": { - "bg-elevated": { - "type": "color", - "value": "#1A1A1D" - }, - "bg-interactive": { - "type": "color", - "value": "#2A2A2E" - }, - "bg-page": { - "type": "color", - "value": "#0A0A0B" - }, - "border-default": { - "type": "color", - "value": "#2A2A2E" - }, - "border-subtle": { - "type": "color", - "value": "#1F1F23" - }, - "orange-primary": { - "type": "color", - "value": "#FF5C00" - }, - "text-primary": { - "type": "color", - "value": "#FFFFFF" - }, - "text-secondary": { - "type": "color", - "value": "#ADADB0" - }, - "text-tertiary": { - "type": "color", - "value": "#8B8B90" - } - } -} \ No newline at end of file diff --git a/pencil-design/src/pages/tPOS/pos/workflows/cafe-workflow.pen b/pencil-design/src/pages/tPOS/pos/workflows/cafe-workflow.pen deleted file mode 100644 index 16fd1462..00000000 --- a/pencil-design/src/pages/tPOS/pos/workflows/cafe-workflow.pen +++ /dev/null @@ -1,160 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "CafeWorkflow", - "name": "Workflow/Cafe", - "reusable": true, - "width": 1400, - "height": 900, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "WFHeader", - "width": "fill_container", - "padding": [20, 32], - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "WFTitle", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "WFTitleText", "fill": "$text-primary", "content": "☕ CAFÉ WORKFLOW", "fontFamily": "Roboto", "fontSize": 24, "fontWeight": "700"}, - {"type": "text", "id": "WFSubtitle", "fill": "$text-secondary", "content": "Quick Service • Pre-Pay Model", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "WFBadges", "gap": 12, "children": [ - {"type": "frame", "id": "WFBadge1", "fill": "#F59E0B20", "cornerRadius": 8, "padding": [6, 12], "children": [{"type": "text", "id": "WFBadge1Text", "fill": "#F59E0B", "content": "💳 Loyalty", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "WFBadge2", "fill": "#EC489920", "cornerRadius": 8, "padding": [6, 12], "children": [{"type": "text", "id": "WFBadge2Text", "fill": "#EC4899", "content": "🏷️ Discount", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "WFBadge3", "fill": "#22C55E20", "cornerRadius": 8, "padding": [6, 12], "children": [{"type": "text", "id": "WFBadge3Text", "fill": "#22C55E", "content": "5-10 phút", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]} - ]} - ] - }, - { - "type": "frame", - "id": "WFContent", - "width": "fill_container", - "height": "fill_container", - "padding": [32, 40], - "layout": "vertical", - "gap": 24, - "justifyContent": "center", - "alignItems": "center", - "clip": true, - "children": [ - {"type": "frame", "id": "WFRow1", "gap": 16, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep1", "width": 140, "fill": "$bg-elevated", "cornerRadius": 16, "layout": "vertical", "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep1Icon", "width": "fill_container", "height": 70, "fill": "#3B82F620", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep1Ic", "width": 32, "height": 32, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "#3B82F6"}]}, - {"type": "frame", "id": "WFStep1Info", "width": "fill_container", "padding": 12, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep1Num", "width": 24, "height": 24, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep1NumT", "fill": "#FFF", "content": "1", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}]}, - {"type": "text", "id": "WFStep1Title", "fill": "$text-primary", "content": "Khách đến", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]}, - {"type": "icon_font", "id": "WFArrow1", "width": 20, "height": 20, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "frame", "id": "WFStep2", "width": 140, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#EC4899"}, "layout": "vertical", "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep2Icon", "width": "fill_container", "height": 70, "fill": "#EC4899", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep2Ic", "width": 32, "height": 32, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "#FFF"}]}, - {"type": "frame", "id": "WFStep2Info", "width": "fill_container", "padding": 12, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep2Num", "width": 24, "height": 24, "fill": "#EC4899", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep2NumT", "fill": "#FFF", "content": "2", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}]}, - {"type": "text", "id": "WFStep2Title", "fill": "$text-primary", "content": "Tìm KH?", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "WFStep2Desc", "fill": "$text-tertiary", "content": "Optional", "fontFamily": "Roboto", "fontSize": 10} - ]} - ]}, - {"type": "icon_font", "id": "WFArrow2", "width": 20, "height": 20, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "frame", "id": "WFStep3", "width": 140, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep3Icon", "width": "fill_container", "height": 70, "fill": "$orange-primary", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep3Ic", "width": 32, "height": 32, "iconFontName": "clipboard-list", "iconFontFamily": "lucide", "fill": "#FFF"}]}, - {"type": "frame", "id": "WFStep3Info", "width": "fill_container", "padding": 12, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep3Num", "width": 24, "height": 24, "fill": "$orange-primary", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep3NumT", "fill": "#FFF", "content": "3", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}]}, - {"type": "text", "id": "WFStep3Title", "fill": "$text-primary", "content": "Chọn món", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "WFStep3Scr", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "WFStep3ScrT", "fill": "$text-secondary", "content": "desktop.pen", "fontFamily": "Roboto", "fontSize": 9}]} - ]} - ]}, - {"type": "icon_font", "id": "WFArrow3", "width": 20, "height": 20, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "frame", "id": "WFStep4", "width": 140, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#F59E0B"}, "layout": "vertical", "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep4Icon", "width": "fill_container", "height": 70, "fill": "#F59E0B", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep4Ic", "width": 32, "height": 32, "iconFontName": "percent", "iconFontFamily": "lucide", "fill": "#FFF"}]}, - {"type": "frame", "id": "WFStep4Info", "width": "fill_container", "padding": 12, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep4Num", "width": 24, "height": 24, "fill": "#F59E0B", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep4NumT", "fill": "#FFF", "content": "4", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}]}, - {"type": "text", "id": "WFStep4Title", "fill": "$text-primary", "content": "Giảm giá?", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "WFStep4Scr", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "WFStep4ScrT", "fill": "$text-secondary", "content": "discount.pen", "fontFamily": "Roboto", "fontSize": 9}]} - ]} - ]}, - {"type": "icon_font", "id": "WFArrow4", "width": 20, "height": 20, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "frame", "id": "WFStep5", "width": 140, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#22C55E"}, "layout": "vertical", "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep5Icon", "width": "fill_container", "height": 70, "fill": "#22C55E", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep5Ic", "width": 32, "height": 32, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "#FFF"}]}, - {"type": "frame", "id": "WFStep5Info", "width": "fill_container", "padding": 12, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep5Num", "width": 24, "height": 24, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep5NumT", "fill": "#FFF", "content": "5", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}]}, - {"type": "text", "id": "WFStep5Title", "fill": "$text-primary", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}, - {"type": "frame", "id": "WFStep5Scr", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "WFStep5ScrT", "fill": "$text-secondary", "content": "payment/*.pen", "fontFamily": "Roboto", "fontSize": 9}]} - ]} - ]} - ]}, - {"type": "frame", "id": "WFRow2", "gap": 16, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep6", "width": 140, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#14B8A6"}, "layout": "vertical", "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep6Icon", "width": "fill_container", "height": 70, "fill": "#14B8A6", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep6Ic", "width": 32, "height": 32, "iconFontName": "coins", "iconFontFamily": "lucide", "fill": "#FFF"}]}, - {"type": "frame", "id": "WFStep6Info", "width": "fill_container", "padding": 12, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep6Num", "width": 24, "height": 24, "fill": "#14B8A6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep6NumT", "fill": "#FFF", "content": "6", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}]}, - {"type": "text", "id": "WFStep6Title", "fill": "$text-primary", "content": "+Tích điểm", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "WFStep6Desc", "fill": "$text-tertiary", "content": "1đ / 10K", "fontFamily": "Roboto", "fontSize": 10} - ]} - ]}, - {"type": "icon_font", "id": "WFArrow6", "width": 20, "height": 20, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "frame", "id": "WFStep7", "width": 140, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#8B5CF6"}, "layout": "vertical", "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep7Icon", "width": "fill_container", "height": 70, "fill": "#8B5CF620", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep7Ic", "width": 32, "height": 32, "iconFontName": "coffee", "iconFontFamily": "lucide", "fill": "#8B5CF6"}]}, - {"type": "frame", "id": "WFStep7Info", "width": "fill_container", "padding": 12, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep7Num", "width": 24, "height": 24, "fill": "#8B5CF6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep7NumT", "fill": "#FFF", "content": "7", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}]}, - {"type": "text", "id": "WFStep7Title", "fill": "$text-primary", "content": "Pha chế", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "WFStep7Scr", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "WFStep7ScrT", "fill": "$text-secondary", "content": "barista.pen", "fontFamily": "Roboto", "fontSize": 9}]} - ]} - ]}, - {"type": "icon_font", "id": "WFArrow7", "width": 20, "height": 20, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "frame", "id": "WFStep8", "width": 140, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#06B6D4"}, "layout": "vertical", "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep8Icon", "width": "fill_container", "height": 70, "fill": "#06B6D4", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep8Ic", "width": 32, "height": 32, "iconFontName": "bell", "iconFontFamily": "lucide", "fill": "#FFF"}]}, - {"type": "frame", "id": "WFStep8Info", "width": "fill_container", "padding": 12, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep8Num", "width": 24, "height": 24, "fill": "#06B6D4", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep8NumT", "fill": "#FFF", "content": "8", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}]}, - {"type": "text", "id": "WFStep8Title", "fill": "$text-primary", "content": "Gọi số", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "WFStep8Scr", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [2, 6], "children": [{"type": "text", "id": "WFStep8ScrT", "fill": "$text-secondary", "content": "queue.pen", "fontFamily": "Roboto", "fontSize": 9}]} - ]} - ]}, - {"type": "icon_font", "id": "WFArrow8", "width": 20, "height": 20, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "frame", "id": "WFStep9", "width": 140, "fill": "$bg-elevated", "cornerRadius": 16, "layout": "vertical", "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep9Icon", "width": "fill_container", "height": 70, "fill": "#6B728020", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep9Ic", "width": 32, "height": 32, "iconFontName": "check-circle", "iconFontFamily": "lucide", "fill": "#22C55E"}]}, - {"type": "frame", "id": "WFStep9Info", "width": "fill_container", "padding": 12, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep9Num", "width": 24, "height": 24, "fill": "#6B7280", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep9NumT", "fill": "#FFF", "content": "9", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "700"}]}, - {"type": "text", "id": "WFStep9Title", "fill": "$text-primary", "content": "Hoàn tất", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "WFFooter", - "width": "fill_container", - "fill": "$bg-elevated", - "padding": [16, 32], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, - "gap": 24, - "justifyContent": "center", - "children": [ - {"type": "frame", "id": "WFL1", "gap": 8, "alignItems": "center", "children": [{"type": "frame", "id": "WFL1D", "width": 16, "height": 16, "fill": "#22C55E", "cornerRadius": 4}, {"type": "text", "id": "WFL1T", "fill": "$text-secondary", "content": "Thanh toán (PRE-PAY)", "fontFamily": "Roboto", "fontSize": 11}]}, - {"type": "frame", "id": "WFL2", "gap": 8, "alignItems": "center", "children": [{"type": "frame", "id": "WFL2D", "width": 16, "height": 16, "fill": "#F59E0B", "cornerRadius": 4}, {"type": "text", "id": "WFL2T", "fill": "$text-secondary", "content": "Discount", "fontFamily": "Roboto", "fontSize": 11}]}, - {"type": "frame", "id": "WFL3", "gap": 8, "alignItems": "center", "children": [{"type": "frame", "id": "WFL3D", "width": 16, "height": 16, "fill": "#14B8A6", "cornerRadius": 4}, {"type": "text", "id": "WFL3T", "fill": "$text-secondary", "content": "Loyalty Points", "fontFamily": "Roboto", "fontSize": 11}]}, - {"type": "frame", "id": "WFL4", "gap": 8, "alignItems": "center", "children": [{"type": "frame", "id": "WFL4D", "width": 16, "height": 16, "fill": "#EC4899", "cornerRadius": 4}, {"type": "text", "id": "WFL4T", "fill": "$text-secondary", "content": "Customer Lookup", "fontFamily": "Roboto", "fontSize": 11}]} - ] - } - ] - } - ], - "variables": { - "bg-elevated": {"type": "color", "value": "#1A1A1D"}, - "bg-interactive": {"type": "color", "value": "#2A2A2E"}, - "bg-page": {"type": "color", "value": "#0A0A0B"}, - "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/workflows/karaoke-workflow.pen b/pencil-design/src/pages/tPOS/pos/workflows/karaoke-workflow.pen deleted file mode 100644 index 2af8c2af..00000000 --- a/pencil-design/src/pages/tPOS/pos/workflows/karaoke-workflow.pen +++ /dev/null @@ -1,175 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "KaraokeWorkflow", - "name": "Workflow/Karaoke", - "reusable": true, - "width": 1400, - "height": 1000, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "WFHeader", - "width": "fill_container", - "padding": [24, 40], - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "WFTitle", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "WFTitleText", "fill": "$text-primary", "content": "🎤 KARAOKE WORKFLOW", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, - {"type": "text", "id": "WFSubtitle", "fill": "$text-secondary", "content": "Time-Based Service • Post-Pay Model", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "WFBadges", "gap": 12, "children": [ - {"type": "frame", "id": "WFBadge1", "fill": "#F59E0B20", "cornerRadius": 8, "padding": [6, 12], "children": [{"type": "text", "id": "WFBadge1T", "fill": "#F59E0B", "content": "💳 Loyalty", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "WFBadge2", "fill": "#EC489920", "cornerRadius": 8, "padding": [6, 12], "children": [{"type": "text", "id": "WFBadge2T", "fill": "#EC4899", "content": "🏷️ Discount", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "WFBadge3", "fill": "#8B5CF620", "cornerRadius": 8, "padding": [6, 12], "children": [{"type": "text", "id": "WFBadge3T", "fill": "#8B5CF6", "content": "1-4 giờ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]} - ]} - ] - }, - { - "type": "frame", - "id": "WFContent", - "width": "fill_container", - "height": "fill_container", - "padding": 40, - "layout": "vertical", - "gap": 32, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "WFRow1", "gap": 24, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep1", "width": 170, "fill": "$bg-elevated", "cornerRadius": 16, "layout": "vertical", "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep1Icon", "width": "fill_container", "height": 70, "fill": "#3B82F620", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep1IconInner", "width": 32, "height": 32, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "#3B82F6"}]}, - {"type": "frame", "id": "WFStep1Info", "width": "fill_container", "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep1Num", "width": 26, "height": 26, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep1NumText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, - {"type": "text", "id": "WFStep1Title", "fill": "$text-primary", "content": "Khách đến", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]}, - {"type": "icon_font", "id": "WFArrow1", "width": 22, "height": 22, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "frame", "id": "WFStep2", "width": 170, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#8B5CF6"}, "layout": "vertical", "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep2Icon", "width": "fill_container", "height": 70, "fill": "#8B5CF6", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep2IconInner", "width": 32, "height": 32, "iconFontName": "door-open", "iconFontFamily": "lucide", "fill": "$text-primary"}]}, - {"type": "frame", "id": "WFStep2Info", "width": "fill_container", "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep2Num", "width": 26, "height": 26, "fill": "#8B5CF6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep2NumText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, - {"type": "text", "id": "WFStep2Title", "fill": "$text-primary", "content": "Chọn phòng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "WFStep2Screen", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "WFStep2ScreenText", "fill": "$text-secondary", "content": "room-map.pen", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "500"}]} - ]} - ]}, - {"type": "icon_font", "id": "WFArrow2", "width": 22, "height": 22, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "frame", "id": "WFStep3", "width": 170, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#F59E0B"}, "layout": "vertical", "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep3Icon", "width": "fill_container", "height": 70, "fill": "#F59E0B", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep3IconInner", "width": 32, "height": 32, "iconFontName": "play", "iconFontFamily": "lucide", "fill": "$text-primary"}]}, - {"type": "frame", "id": "WFStep3Info", "width": "fill_container", "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep3Num", "width": 26, "height": 26, "fill": "#F59E0B", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep3NumText", "fill": "$text-primary", "content": "3", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, - {"type": "text", "id": "WFStep3Title", "fill": "$text-primary", "content": "⏱️ Mở phòng", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "WFStep3Desc", "fill": "$text-tertiary", "content": "Timer bắt đầu", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"} - ]} - ]}, - {"type": "icon_font", "id": "WFArrow3", "width": 22, "height": 22, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "frame", "id": "WFStep4", "width": 170, "fill": "$bg-elevated", "cornerRadius": 16, "layout": "vertical", "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep4Icon", "width": "fill_container", "height": 70, "fill": "#EC489920", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep4IconInner", "width": 32, "height": 32, "iconFontName": "mic", "iconFontFamily": "lucide", "fill": "#EC4899"}]}, - {"type": "frame", "id": "WFStep4Info", "width": "fill_container", "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep4Num", "width": 26, "height": 26, "fill": "#EC4899", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep4NumText", "fill": "$text-primary", "content": "4", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, - {"type": "text", "id": "WFStep4Title", "fill": "$text-primary", "content": "Hát karaoke", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ]}, - {"type": "frame", "id": "WFLoopBox", "fill": "#8B5CF610", "cornerRadius": 20, "stroke": {"thickness": 2, "fill": "#8B5CF6", "dashArray": [8, 4]}, "padding": [24, 40], "layout": "vertical", "gap": 20, "alignItems": "center", "children": [ - {"type": "text", "id": "WFLoopLabel", "fill": "#8B5CF6", "content": "🔄 TRONG PHÒNG", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "frame", "id": "WFLoopSteps", "gap": 20, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFLoopStep1", "width": 150, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "WFLoopStep1Icon", "width": 28, "height": 28, "iconFontName": "beer", "iconFontFamily": "lucide", "fill": "$orange-primary"}, {"type": "text", "id": "WFLoopStep1Title", "fill": "$text-primary", "content": "Order đồ", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "frame", "id": "WFLoopStep1Screen", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "WFLoopStep1ScreenText", "fill": "$text-secondary", "content": "desktop.pen", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "500"}]}]}, - {"type": "icon_font", "id": "WFLoopArrow1", "width": 18, "height": 18, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "frame", "id": "WFLoopStep2", "width": 150, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "#F59E0B"}, "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "WFLoopStep2Icon", "width": 28, "height": 28, "iconFontName": "alarm-clock", "iconFontFamily": "lucide", "fill": "#F59E0B"}, {"type": "text", "id": "WFLoopStep2Title", "fill": "$text-primary", "content": "Sắp hết giờ?", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}, {"type": "frame", "id": "WFLoopStep2Screen", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "WFLoopStep2ScreenText", "fill": "$text-secondary", "content": "room-session.pen", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "500"}]}]}, - {"type": "icon_font", "id": "WFLoopArrow2", "width": 18, "height": 18, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "frame", "id": "WFLoopStep3", "width": 150, "fill": "$bg-elevated", "cornerRadius": 12, "stroke": {"thickness": 2, "fill": "#8B5CF6"}, "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "WFLoopStep3Icon", "width": 28, "height": 28, "iconFontName": "clock", "iconFontFamily": "lucide", "fill": "#8B5CF6"}, {"type": "text", "id": "WFLoopStep3Title", "fill": "$text-primary", "content": "Gia hạn", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "icon_font", "id": "WFLoopArrow3", "width": 18, "height": 18, "iconFontName": "corner-up-left", "iconFontFamily": "lucide", "fill": "#8B5CF6"} - ]} - ]}, - {"type": "frame", "id": "WFRow2", "gap": 24, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep5", "width": 170, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#EF4444"}, "layout": "vertical", "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep5Icon", "width": "fill_container", "height": 70, "fill": "#EF4444", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep5IconInner", "width": 32, "height": 32, "iconFontName": "square", "iconFontFamily": "lucide", "fill": "$text-primary"}]}, - {"type": "frame", "id": "WFStep5Info", "width": "fill_container", "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep5Num", "width": 26, "height": 26, "fill": "#EF4444", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep5NumText", "fill": "$text-primary", "content": "5", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, - {"type": "text", "id": "WFStep5Title", "fill": "$text-primary", "content": "⏹️ Kết thúc", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "WFStep5Desc", "fill": "$text-tertiary", "content": "Timer dừng", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"} - ]} - ]}, - {"type": "icon_font", "id": "WFArrow5", "width": 22, "height": 22, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "frame", "id": "WFStep6", "width": 170, "fill": "$bg-elevated", "cornerRadius": 16, "layout": "vertical", "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep6Icon", "width": "fill_container", "height": 70, "fill": "#EC489920", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep6IconInner", "width": 32, "height": 32, "iconFontName": "receipt", "iconFontFamily": "lucide", "fill": "#EC4899"}]}, - {"type": "frame", "id": "WFStep6Info", "width": "fill_container", "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep6Num", "width": 26, "height": 26, "fill": "#EC4899", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep6NumText", "fill": "$text-primary", "content": "6", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, - {"type": "text", "id": "WFStep6Title", "fill": "$text-primary", "content": "Xem bill", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "WFStep6Desc", "fill": "$text-tertiary", "content": "Phòng + F&B", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"} - ]} - ]}, - {"type": "icon_font", "id": "WFArrow6", "width": 22, "height": 22, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "frame", "id": "WFStepCust", "width": 145, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#EC4899"}, "layout": "vertical", "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStepCustIcon", "width": "fill_container", "height": 55, "fill": "#EC4899", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStepCustIc", "width": 24, "height": 24, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "#FFF"}]}, - {"type": "frame", "id": "WFStepCustInfo", "width": "fill_container", "padding": 10, "layout": "vertical", "gap": 3, "alignItems": "center", "children": [ - {"type": "text", "id": "WFStepCustTitle", "fill": "$text-primary", "content": "Tìm KH?", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "600"}, - {"type": "text", "id": "WFStepCustDesc", "fill": "$text-tertiary", "content": "Optional", "fontFamily": "Roboto", "fontSize": 9} - ]} - ]}, - {"type": "icon_font", "id": "WFArrow6b", "width": 22, "height": 22, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "frame", "id": "WFStep7", "width": 145, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#22C55E"}, "layout": "vertical", "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep7Icon", "width": "fill_container", "height": 70, "fill": "#22C55E", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep7IconInner", "width": 32, "height": 32, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"}]}, - {"type": "frame", "id": "WFStep7Info", "width": "fill_container", "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep7Num", "width": 26, "height": 26, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep7NumText", "fill": "$text-primary", "content": "7", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, - {"type": "text", "id": "WFStep7Title", "fill": "$text-primary", "content": "THANH TOÁN", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}, - {"type": "frame", "id": "WFStep7Screen", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "WFStep7ScreenText", "fill": "$text-secondary", "content": "payment/*.pen", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "500"}]} - ]} - ]}, - {"type": "icon_font", "id": "WFArrow7", "width": 22, "height": 22, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "frame", "id": "WFStepLoyalty", "width": 150, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#14B8A6"}, "layout": "vertical", "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStepLoyaltyIcon", "width": "fill_container", "height": 60, "fill": "#14B8A6", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStepLoyaltyIc", "width": 28, "height": 28, "iconFontName": "coins", "iconFontFamily": "lucide", "fill": "#FFF"}]}, - {"type": "frame", "id": "WFStepLoyaltyInfo", "width": "fill_container", "padding": 12, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "WFStepLoyaltyTitle", "fill": "$text-primary", "content": "+Tích điểm", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "WFStepLoyaltyDesc", "fill": "$text-tertiary", "content": "1đ / 10K", "fontFamily": "Roboto", "fontSize": 10} - ]} - ]}, - {"type": "icon_font", "id": "WFArrow8", "width": 22, "height": 22, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "frame", "id": "WFStep8", "width": 150, "fill": "$bg-elevated", "cornerRadius": 16, "layout": "vertical", "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep8Icon", "width": "fill_container", "height": 60, "fill": "#6B728020", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep8IconInner", "width": 28, "height": 28, "iconFontName": "log-out", "iconFontFamily": "lucide", "fill": "#6B7280"}]}, - {"type": "frame", "id": "WFStep8Info", "width": "fill_container", "padding": 12, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "WFStep8Title", "fill": "$text-primary", "content": "Ra về", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"} - ]} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "WFFooter", - "width": "fill_container", - "fill": "$bg-elevated", - "padding": [20, 40], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, - "gap": 32, - "justifyContent": "center", - "children": [ - {"type": "frame", "id": "WFLegend1", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "WFLegend1Dot", "width": 18, "height": 18, "fill": "#F59E0B", "cornerRadius": 6}, {"type": "text", "id": "WFLegend1Text", "fill": "$text-secondary", "content": "Timer", "fontFamily": "Roboto", "fontSize": 11}]}, - {"type": "frame", "id": "WFLegend2", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "WFLegend2Dot", "width": 18, "height": 18, "fill": "#22C55E", "cornerRadius": 6}, {"type": "text", "id": "WFLegend2Text", "fill": "$text-secondary", "content": "Payment", "fontFamily": "Roboto", "fontSize": 11}]}, - {"type": "frame", "id": "WFLegend3", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "WFLegend3Dot", "width": 18, "height": 18, "fill": "#14B8A6", "cornerRadius": 6}, {"type": "text", "id": "WFLegend3Text", "fill": "$text-secondary", "content": "Loyalty", "fontFamily": "Roboto", "fontSize": 11}]}, - {"type": "frame", "id": "WFLegend4", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "WFLegend4Dot", "width": 18, "height": 18, "fill": "#8B5CF6", "cornerRadius": 100, "stroke": {"thickness": 2, "fill": "#8B5CF6", "dashArray": [4, 2]}}, {"type": "text", "id": "WFLegend4Text", "fill": "$text-secondary", "content": "Loop", "fontFamily": "Roboto", "fontSize": 11}]} - ] - } - ] - } - ], - "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/workflows/restaurant-workflow.pen b/pencil-design/src/pages/tPOS/pos/workflows/restaurant-workflow.pen deleted file mode 100644 index 703e0f01..00000000 --- a/pencil-design/src/pages/tPOS/pos/workflows/restaurant-workflow.pen +++ /dev/null @@ -1,164 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "RestaurantWorkflow", - "name": "Workflow/Restaurant", - "reusable": true, - "width": 1400, - "height": 1000, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "WFHeader", - "width": "fill_container", - "padding": [24, 40], - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "WFTitle", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "WFTitleText", "fill": "$text-primary", "content": "🍽️ RESTAURANT WORKFLOW", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, - {"type": "text", "id": "WFSubtitle", "fill": "$text-secondary", "content": "Full Service • Post-Pay Model", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "WFBadges", "gap": 12, "children": [ - {"type": "frame", "id": "WFBadge1", "fill": "#F59E0B20", "cornerRadius": 8, "padding": [6, 12], "children": [{"type": "text", "id": "WFBadge1T", "fill": "#F59E0B", "content": "💳 Loyalty", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "WFBadge2", "fill": "#EC489920", "cornerRadius": 8, "padding": [6, 12], "children": [{"type": "text", "id": "WFBadge2T", "fill": "#EC4899", "content": "🏷️ Discount", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "WFBadge3", "fill": "#EF444420", "cornerRadius": 8, "padding": [6, 12], "children": [{"type": "text", "id": "WFBadge3T", "fill": "#EF4444", "content": "30-90 phút", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]} - ]} - ] - }, - { - "type": "frame", - "id": "WFContent", - "width": "fill_container", - "height": "fill_container", - "padding": 40, - "layout": "vertical", - "gap": 32, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "WFRow1", "gap": 24, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep1", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "layout": "vertical", "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep1Icon", "width": "fill_container", "height": 80, "fill": "#3B82F620", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep1IconInner", "width": 36, "height": 36, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "#3B82F6"}]}, - {"type": "frame", "id": "WFStep1Info", "width": "fill_container", "padding": 16, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep1Num", "width": 28, "height": 28, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep1NumText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}, - {"type": "text", "id": "WFStep1Title", "fill": "$text-primary", "content": "Khách đến", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ]}, - {"type": "icon_font", "id": "WFArrow1", "width": 24, "height": 24, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "frame", "id": "WFStep2", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#8B5CF6"}, "layout": "vertical", "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep2Icon", "width": "fill_container", "height": 80, "fill": "#8B5CF6", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep2IconInner", "width": 36, "height": 36, "iconFontName": "layout-grid", "iconFontFamily": "lucide", "fill": "$text-primary"}]}, - {"type": "frame", "id": "WFStep2Info", "width": "fill_container", "padding": 16, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep2Num", "width": 28, "height": 28, "fill": "#8B5CF6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep2NumText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}, - {"type": "text", "id": "WFStep2Title", "fill": "$text-primary", "content": "Chọn bàn", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "frame", "id": "WFStep2Screen", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "WFStep2ScreenText", "fill": "$text-secondary", "content": "table-map.pen", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "500"}]} - ]} - ]}, - {"type": "icon_font", "id": "WFArrow2", "width": 24, "height": 24, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "frame", "id": "WFStep3", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep3Icon", "width": "fill_container", "height": 80, "fill": "$orange-primary", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep3IconInner", "width": 36, "height": 36, "iconFontName": "clipboard-list", "iconFontFamily": "lucide", "fill": "$text-primary"}]}, - {"type": "frame", "id": "WFStep3Info", "width": "fill_container", "padding": 16, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep3Num", "width": 28, "height": 28, "fill": "$orange-primary", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep3NumText", "fill": "$text-primary", "content": "3", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}, - {"type": "text", "id": "WFStep3Title", "fill": "$text-primary", "content": "Order món", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "frame", "id": "WFStep3Screen", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "WFStep3ScreenText", "fill": "$text-secondary", "content": "desktop.pen", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "500"}]} - ]} - ]}, - {"type": "icon_font", "id": "WFArrow3", "width": 24, "height": 24, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "frame", "id": "WFStep4", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#F59E0B"}, "layout": "vertical", "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep4Icon", "width": "fill_container", "height": 80, "fill": "#F59E0B", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep4IconInner", "width": 36, "height": 36, "iconFontName": "chef-hat", "iconFontFamily": "lucide", "fill": "$text-primary"}]}, - {"type": "frame", "id": "WFStep4Info", "width": "fill_container", "padding": 16, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep4Num", "width": 28, "height": 28, "fill": "#F59E0B", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep4NumText", "fill": "$text-primary", "content": "4", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}, - {"type": "text", "id": "WFStep4Title", "fill": "$text-primary", "content": "Bếp nấu", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "frame", "id": "WFStep4Screen", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "WFStep4ScreenText", "fill": "$text-secondary", "content": "kitchen-display.pen", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "500"}]} - ]} - ]} - ]}, - {"type": "frame", "id": "WFLoopBox", "fill": "#3B82F610", "cornerRadius": 20, "stroke": {"thickness": 2, "fill": "#3B82F6", "dashArray": [8, 4]}, "padding": [24, 40], "layout": "vertical", "gap": 16, "alignItems": "center", "children": [ - {"type": "text", "id": "WFLoopLabel", "fill": "#3B82F6", "content": "🔄 LẶP LẠI: Order thêm món", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "frame", "id": "WFLoopSteps", "gap": 24, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep5", "width": 160, "fill": "$bg-elevated", "cornerRadius": 12, "padding": 16, "layout": "vertical", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep5Icon", "width": 28, "height": 28, "iconFontName": "utensils", "iconFontFamily": "lucide", "fill": "#22C55E"}, {"type": "text", "id": "WFStep5Title", "fill": "$text-primary", "content": "Phục vụ món", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "icon_font", "id": "WFArrow5", "width": 20, "height": 20, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "frame", "id": "WFStep6", "width": 160, "fill": "$bg-elevated", "cornerRadius": 12, "padding": 16, "layout": "vertical", "gap": 8, "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep6Icon", "width": 28, "height": 28, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$orange-primary"}, {"type": "text", "id": "WFStep6Title", "fill": "$text-primary", "content": "Thêm món?", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "500"}]}, - {"type": "icon_font", "id": "WFArrow6", "width": 20, "height": 20, "iconFontName": "corner-up-left", "iconFontFamily": "lucide", "fill": "#3B82F6"} - ]} - ]}, - {"type": "frame", "id": "WFRow2", "gap": 24, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep7", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "layout": "vertical", "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep7Icon", "width": "fill_container", "height": 80, "fill": "#EC489920", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep7IconInner", "width": 36, "height": 36, "iconFontName": "receipt", "iconFontFamily": "lucide", "fill": "#EC4899"}]}, - {"type": "frame", "id": "WFStep7Info", "width": "fill_container", "padding": 16, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep7Num", "width": 28, "height": 28, "fill": "#EC4899", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep7NumText", "fill": "$text-primary", "content": "5", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}, - {"type": "text", "id": "WFStep7Title", "fill": "$text-primary", "content": "Tính tiền", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"} - ]} - ]}, - {"type": "icon_font", "id": "WFArrow7", "width": 24, "height": 24, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "frame", "id": "WFStepCust", "width": 150, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#EC4899"}, "layout": "vertical", "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStepCustIcon", "width": "fill_container", "height": 65, "fill": "#EC4899", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStepCustIc", "width": 28, "height": 28, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "#FFF"}]}, - {"type": "frame", "id": "WFStepCustInfo", "width": "fill_container", "padding": 12, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "WFStepCustTitle", "fill": "$text-primary", "content": "Tìm KH?", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}, - {"type": "text", "id": "WFStepCustDesc", "fill": "$text-tertiary", "content": "Optional", "fontFamily": "Roboto", "fontSize": 9} - ]} - ]}, - {"type": "icon_font", "id": "WFArrow7b", "width": 24, "height": 24, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "frame", "id": "WFStep8", "width": 180, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#22C55E"}, "layout": "vertical", "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep8Icon", "width": "fill_container", "height": 80, "fill": "#22C55E", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep8IconInner", "width": 36, "height": 36, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"}]}, - {"type": "frame", "id": "WFStep8Info", "width": "fill_container", "padding": 16, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep8Num", "width": 28, "height": 28, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep8NumText", "fill": "$text-primary", "content": "6", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}]}, - {"type": "text", "id": "WFStep8Title", "fill": "$text-primary", "content": "THANH TOÁN", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "700"}, - {"type": "frame", "id": "WFStep8Screen", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "WFStep8ScreenText", "fill": "$text-secondary", "content": "payment/*.pen", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "500"}]} - ]} - ]}, - {"type": "icon_font", "id": "WFArrow8", "width": 24, "height": 24, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "frame", "id": "WFStepLoyalty", "width": 160, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#14B8A6"}, "layout": "vertical", "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStepLoyaltyIcon", "width": "fill_container", "height": 70, "fill": "#14B8A6", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStepLoyaltyIc", "width": 32, "height": 32, "iconFontName": "coins", "iconFontFamily": "lucide", "fill": "#FFF"}]}, - {"type": "frame", "id": "WFStepLoyaltyInfo", "width": "fill_container", "padding": 14, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "WFStepLoyaltyTitle", "fill": "$text-primary", "content": "+Tích điểm", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "WFStepLoyaltyDesc", "fill": "$text-tertiary", "content": "1đ / 10K", "fontFamily": "Roboto", "fontSize": 10} - ]} - ]}, - {"type": "icon_font", "id": "WFArrow9", "width": 24, "height": 24, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "frame", "id": "WFStep9", "width": 160, "fill": "$bg-elevated", "cornerRadius": 16, "layout": "vertical", "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep9Icon", "width": "fill_container", "height": 70, "fill": "#6B728020", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep9IconInner", "width": 32, "height": 32, "iconFontName": "log-out", "iconFontFamily": "lucide", "fill": "#6B7280"}]}, - {"type": "frame", "id": "WFStep9Info", "width": "fill_container", "padding": 14, "layout": "vertical", "gap": 4, "alignItems": "center", "children": [ - {"type": "text", "id": "WFStep9Title", "fill": "$text-primary", "content": "Ra về", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "WFFooter", - "width": "fill_container", - "fill": "$bg-elevated", - "padding": [20, 40], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, - "gap": 40, - "justifyContent": "center", - "children": [ - {"type": "frame", "id": "WFLegend1", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "WFLegend1Dot", "width": 20, "height": 20, "fill": "#22C55E", "cornerRadius": 6}, {"type": "text", "id": "WFLegend1Text", "fill": "$text-secondary", "content": "Thanh toán", "fontFamily": "Roboto", "fontSize": 12}]}, - {"type": "frame", "id": "WFLegend2", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "WFLegend2Dot", "width": 20, "height": 20, "fill": "#14B8A6", "cornerRadius": 6}, {"type": "text", "id": "WFLegend2Text", "fill": "$text-secondary", "content": "Loyalty Points", "fontFamily": "Roboto", "fontSize": 12}]}, - {"type": "frame", "id": "WFLegend3", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "WFLegend3Dot", "width": 20, "height": 20, "fill": "#F59E0B", "cornerRadius": 6}, {"type": "text", "id": "WFLegend3Text", "fill": "$text-secondary", "content": "Kitchen", "fontFamily": "Roboto", "fontSize": 12}]}, - {"type": "frame", "id": "WFLegend4", "gap": 12, "alignItems": "center", "children": [{"type": "frame", "id": "WFLegend4Dot", "width": 20, "height": 20, "fill": "#3B82F6", "cornerRadius": 100, "stroke": {"thickness": 2, "fill": "#3B82F6", "dashArray": [4, 2]}}, {"type": "text", "id": "WFLegend4Text", "fill": "$text-secondary", "content": "Loop", "fontFamily": "Roboto", "fontSize": 12}]} - ] - } - ] - } - ], - "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/workflows/spa-workflow.pen b/pencil-design/src/pages/tPOS/pos/workflows/spa-workflow.pen deleted file mode 100644 index 4b85c7ae..00000000 --- a/pencil-design/src/pages/tPOS/pos/workflows/spa-workflow.pen +++ /dev/null @@ -1,175 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "SpaWorkflow", - "name": "Workflow/Spa", - "reusable": true, - "width": 1400, - "height": 1000, - "fill": "$bg-page", - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "WFHeader", - "width": "fill_container", - "padding": [24, 40], - "fill": "$bg-elevated", - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["bottom"]}, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - {"type": "frame", "id": "WFTitle", "layout": "vertical", "gap": 4, "children": [ - {"type": "text", "id": "WFTitleText", "fill": "$text-primary", "content": "💆 SPA WORKFLOW", "fontFamily": "Roboto", "fontSize": 28, "fontWeight": "700"}, - {"type": "text", "id": "WFSubtitle", "fill": "$text-secondary", "content": "Appointment Service • Post-Pay + Loyalty", "fontFamily": "Roboto", "fontSize": 16, "fontWeight": "normal"} - ]}, - {"type": "frame", "id": "WFBadges", "gap": 12, "children": [ - {"type": "frame", "id": "WFBadge1", "fill": "#F59E0B20", "cornerRadius": 8, "padding": [6, 12], "children": [{"type": "text", "id": "WFBadge1T", "fill": "#F59E0B", "content": "💳 Loyalty", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "WFBadge2", "fill": "#EC489920", "cornerRadius": 8, "padding": [6, 12], "children": [{"type": "text", "id": "WFBadge2T", "fill": "#EC4899", "content": "🏷️ Discount", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]}, - {"type": "frame", "id": "WFBadge3", "fill": "#8B5CF620", "cornerRadius": 8, "padding": [6, 12], "children": [{"type": "text", "id": "WFBadge3T", "fill": "#8B5CF6", "content": "30-120 phút", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "600"}]} - ]} - ] - }, - { - "type": "frame", - "id": "WFContent", - "width": "fill_container", - "height": "fill_container", - "padding": 40, - "layout": "vertical", - "gap": 32, - "alignItems": "center", - "children": [ - {"type": "frame", "id": "WFRow1", "gap": 20, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep1", "width": 160, "fill": "$bg-elevated", "cornerRadius": 16, "layout": "vertical", "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep1Icon", "width": "fill_container", "height": 70, "fill": "#3B82F620", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep1IconInner", "width": 32, "height": 32, "iconFontName": "user", "iconFontFamily": "lucide", "fill": "#3B82F6"}]}, - {"type": "frame", "id": "WFStep1Info", "width": "fill_container", "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep1Num", "width": 26, "height": 26, "fill": "#3B82F6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep1NumText", "fill": "$text-primary", "content": "1", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, - {"type": "text", "id": "WFStep1Title", "fill": "$text-primary", "content": "Khách đến", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]}, - {"type": "icon_font", "id": "WFArrow1", "width": 20, "height": 20, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "frame", "id": "WFStep2", "width": 160, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#EC4899"}, "layout": "vertical", "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep2Icon", "width": "fill_container", "height": 70, "fill": "#EC4899", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep2IconInner", "width": 32, "height": 32, "iconFontName": "search", "iconFontFamily": "lucide", "fill": "$text-primary"}]}, - {"type": "frame", "id": "WFStep2Info", "width": "fill_container", "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep2Num", "width": 26, "height": 26, "fill": "#EC4899", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep2NumText", "fill": "$text-primary", "content": "2", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, - {"type": "text", "id": "WFStep2Title", "fill": "$text-primary", "content": "Tìm khách", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "WFStep2Screen", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "WFStep2ScreenText", "fill": "$text-secondary", "content": "customer-lookup.pen", "fontFamily": "Roboto", "fontSize": 8, "fontWeight": "500"}]} - ]} - ]}, - {"type": "icon_font", "id": "WFArrow2", "width": 20, "height": 20, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "frame", "id": "WFStep3", "width": 160, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "$orange-primary"}, "layout": "vertical", "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep3Icon", "width": "fill_container", "height": 70, "fill": "$orange-primary", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep3IconInner", "width": 32, "height": 32, "iconFontName": "sparkles", "iconFontFamily": "lucide", "fill": "$text-primary"}]}, - {"type": "frame", "id": "WFStep3Info", "width": "fill_container", "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep3Num", "width": 26, "height": 26, "fill": "$orange-primary", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep3NumText", "fill": "$text-primary", "content": "3", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, - {"type": "text", "id": "WFStep3Title", "fill": "$text-primary", "content": "Chọn dịch vụ", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "WFStep3Screen", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "WFStep3ScreenText", "fill": "$text-secondary", "content": "desktop.pen", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "500"}]} - ]} - ]}, - {"type": "icon_font", "id": "WFArrow3", "width": 20, "height": 20, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "frame", "id": "WFStep4", "width": 160, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#8B5CF6"}, "layout": "vertical", "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep4Icon", "width": "fill_container", "height": 70, "fill": "#8B5CF6", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep4IconInner", "width": 32, "height": 32, "iconFontName": "users", "iconFontFamily": "lucide", "fill": "$text-primary"}]}, - {"type": "frame", "id": "WFStep4Info", "width": "fill_container", "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep4Num", "width": 26, "height": 26, "fill": "#8B5CF6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep4NumText", "fill": "$text-primary", "content": "4", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, - {"type": "text", "id": "WFStep4Title", "fill": "$text-primary", "content": "Chọn NV", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "frame", "id": "WFStep4Screen", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "WFStep4ScreenText", "fill": "$text-secondary", "content": "staff-assign.pen", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "500"}]} - ]} - ]}, - {"type": "icon_font", "id": "WFArrow4", "width": 20, "height": 20, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "frame", "id": "WFStep5", "width": 160, "fill": "$bg-elevated", "cornerRadius": 16, "layout": "vertical", "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep5Icon", "width": "fill_container", "height": 70, "fill": "#F59E0B20", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep5IconInner", "width": 32, "height": 32, "iconFontName": "heart-handshake", "iconFontFamily": "lucide", "fill": "#F59E0B"}]}, - {"type": "frame", "id": "WFStep5Info", "width": "fill_container", "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep5Num", "width": 26, "height": 26, "fill": "#F59E0B", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep5NumText", "fill": "$text-primary", "content": "5", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, - {"type": "text", "id": "WFStep5Title", "fill": "$text-primary", "content": "Thực hiện", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ]}, - {"type": "frame", "id": "WFLoopBox", "fill": "#EC489910", "cornerRadius": 20, "stroke": {"thickness": 2, "fill": "#EC4899", "dashArray": [8, 4]}, "padding": [24, 40], "layout": "vertical", "gap": 16, "alignItems": "center", "children": [ - {"type": "text", "id": "WFLoopLabel", "fill": "#EC4899", "content": "🔄 LẶP LẠI: Thêm dịch vụ", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}, - {"type": "frame", "id": "WFLoopSteps", "gap": 20, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFLoopStep1", "width": 150, "fill": "$bg-elevated", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "WFLoopStep1Icon", "width": 28, "height": 28, "iconFontName": "check", "iconFontFamily": "lucide", "fill": "#22C55E"}, {"type": "text", "id": "WFLoopStep1Title", "fill": "$text-primary", "content": "Hoàn thành DV", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "icon_font", "id": "WFLoopArrow1", "width": 18, "height": 18, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$text-tertiary"}, - {"type": "frame", "id": "WFLoopStep2", "width": 150, "fill": "$bg-elevated", "cornerRadius": 12, "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [{"type": "icon_font", "id": "WFLoopStep2Icon", "width": 28, "height": 28, "iconFontName": "plus", "iconFontFamily": "lucide", "fill": "$orange-primary"}, {"type": "text", "id": "WFLoopStep2Title", "fill": "$text-primary", "content": "Thêm DV?", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "icon_font", "id": "WFLoopArrow2", "width": 18, "height": 18, "iconFontName": "corner-up-left", "iconFontFamily": "lucide", "fill": "#EC4899"} - ]} - ]}, - {"type": "frame", "id": "WFRow2", "gap": 20, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep6", "width": 160, "fill": "$bg-elevated", "cornerRadius": 16, "layout": "vertical", "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep6Icon", "width": "fill_container", "height": 70, "fill": "#14B8A620", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep6IconInner", "width": 32, "height": 32, "iconFontName": "receipt", "iconFontFamily": "lucide", "fill": "#14B8A6"}]}, - {"type": "frame", "id": "WFStep6Info", "width": "fill_container", "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep6Num", "width": 26, "height": 26, "fill": "#14B8A6", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep6NumText", "fill": "$text-primary", "content": "6", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, - {"type": "text", "id": "WFStep6Title", "fill": "$text-primary", "content": "Xem bill", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]}, - {"type": "icon_font", "id": "WFArrow6", "width": 20, "height": 20, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "frame", "id": "WFStep7", "width": 180, "fill": "#F59E0B10", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#F59E0B"}, "layout": "vertical", "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep7Icon", "width": "fill_container", "height": 70, "fill": "#F59E0B", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep7IconInner", "width": 32, "height": 32, "iconFontName": "gift", "iconFontFamily": "lucide", "fill": "$text-primary"}]}, - {"type": "frame", "id": "WFStep7Info", "width": "fill_container", "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep7Num", "width": 26, "height": 26, "fill": "#F59E0B", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep7NumText", "fill": "$text-primary", "content": "7", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, - {"type": "text", "id": "WFStep7Title", "fill": "$text-primary", "content": "Đổi điểm?", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "WFStep7Desc", "fill": "$text-tertiary", "content": "Loyalty Points", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"} - ]} - ]}, - {"type": "icon_font", "id": "WFArrow7", "width": 20, "height": 20, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "frame", "id": "WFStep8", "width": 160, "fill": "$bg-elevated", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#22C55E"}, "layout": "vertical", "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep8Icon", "width": "fill_container", "height": 70, "fill": "#22C55E", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep8IconInner", "width": 32, "height": 32, "iconFontName": "credit-card", "iconFontFamily": "lucide", "fill": "$text-primary"}]}, - {"type": "frame", "id": "WFStep8Info", "width": "fill_container", "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep8Num", "width": 26, "height": 26, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep8NumText", "fill": "$text-primary", "content": "8", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, - {"type": "text", "id": "WFStep8Title", "fill": "$text-primary", "content": "THANH TOÁN", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}, - {"type": "frame", "id": "WFStep8Screen", "fill": "$bg-interactive", "cornerRadius": 4, "padding": [3, 8], "children": [{"type": "text", "id": "WFStep8ScreenText", "fill": "$text-secondary", "content": "payment/*.pen", "fontFamily": "Roboto", "fontSize": 9, "fontWeight": "500"}]} - ]} - ]}, - {"type": "icon_font", "id": "WFArrow8", "width": 20, "height": 20, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "frame", "id": "WFStep9", "width": 180, "fill": "#22C55E10", "cornerRadius": 16, "stroke": {"thickness": 2, "fill": "#22C55E"}, "layout": "vertical", "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep9Icon", "width": "fill_container", "height": 70, "fill": "#22C55E20", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep9IconInner", "width": 32, "height": 32, "iconFontName": "coins", "iconFontFamily": "lucide", "fill": "#22C55E"}]}, - {"type": "frame", "id": "WFStep9Info", "width": "fill_container", "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep9Num", "width": 26, "height": 26, "fill": "#22C55E", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep9NumText", "fill": "$text-primary", "content": "9", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "700"}]}, - {"type": "text", "id": "WFStep9Title", "fill": "$text-primary", "content": "+Tích điểm", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"}, - {"type": "text", "id": "WFStep9Desc", "fill": "$text-tertiary", "content": "1đ / 10,000₫", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "normal"} - ]} - ]}, - {"type": "icon_font", "id": "WFArrow9", "width": 20, "height": 20, "iconFontName": "arrow-right", "iconFontFamily": "lucide", "fill": "$orange-primary"}, - {"type": "frame", "id": "WFStep10", "width": 160, "fill": "$bg-elevated", "cornerRadius": 16, "layout": "vertical", "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep10Icon", "width": "fill_container", "height": 70, "fill": "#6B728020", "cornerRadius": [16, 16, 0, 0], "justifyContent": "center", "alignItems": "center", "children": [{"type": "icon_font", "id": "WFStep10IconInner", "width": 32, "height": 32, "iconFontName": "calendar-plus", "iconFontFamily": "lucide", "fill": "#6B7280"}]}, - {"type": "frame", "id": "WFStep10Info", "width": "fill_container", "padding": 14, "layout": "vertical", "gap": 6, "alignItems": "center", "children": [ - {"type": "frame", "id": "WFStep10Num", "width": 26, "height": 26, "fill": "#6B7280", "cornerRadius": 100, "justifyContent": "center", "alignItems": "center", "children": [{"type": "text", "id": "WFStep10NumText", "fill": "$text-primary", "content": "10", "fontFamily": "Roboto", "fontSize": 11, "fontWeight": "700"}]}, - {"type": "text", "id": "WFStep10Title", "fill": "$text-primary", "content": "Đặt lịch?", "fontFamily": "Roboto", "fontSize": 13, "fontWeight": "600"} - ]} - ]} - ]} - ] - }, - { - "type": "frame", - "id": "WFFooter", - "width": "fill_container", - "fill": "$bg-elevated", - "padding": [20, 40], - "stroke": {"thickness": 1, "fill": "$border-subtle", "sides": ["top"]}, - "gap": 32, - "justifyContent": "center", - "children": [ - {"type": "frame", "id": "WFLegend1", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "WFLegend1Dot", "width": 18, "height": 18, "fill": "#EC4899", "cornerRadius": 6}, {"type": "text", "id": "WFLegend1Text", "fill": "$text-secondary", "content": "Customer Screen", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "WFLegend2", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "WFLegend2Dot", "width": 18, "height": 18, "fill": "#8B5CF6", "cornerRadius": 6}, {"type": "text", "id": "WFLegend2Text", "fill": "$text-secondary", "content": "Staff Screen", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "WFLegend3", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "WFLegend3Dot", "width": 18, "height": 18, "fill": "#F59E0B", "cornerRadius": 6}, {"type": "text", "id": "WFLegend3Text", "fill": "$text-secondary", "content": "Loyalty Points", "fontFamily": "Roboto", "fontSize": 12, "fontWeight": "500"}]}, - {"type": "frame", "id": "WFLegend4", "gap": 10, "alignItems": "center", "children": [{"type": "frame", "id": "WFLegend4Dot", "width": 18, "height": 18, "fill": "#22C55E", "cornerRadius": 6}, {"type": "text", "id": "WFLegend4Text", "fill": "$text-secondary", "content": "Thanh toán (POST-PAY)", "fontFamily": "Roboto", "fontSize": 12, "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/tPOS.pen b/pencil-design/tPOS.pen deleted file mode 100644 index 69ed2537..00000000 --- a/pencil-design/tPOS.pen +++ /dev/null @@ -1,12275 +0,0 @@ -{ - "version": "2.6", - "children": [ - { - "type": "frame", - "id": "IxtYA", - "x": 0, - "y": 0, - "name": "aPOS Landing Page", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "8qjLq", - "name": "newHeader", - "width": 1440, - "height": "fit_content(84)", - "padding": [ - 20, - 120 - ], - "justifyContent": "space_between", - "alignItems": "center" - }, - { - "type": "frame", - "id": "tpMHr", - "name": "Hero Section", - "width": "fill_container", - "layout": "vertical", - "gap": 40, - "padding": [ - 100, - 120, - 80, - 120 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "IFtQL", - "name": "newHeroBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "gap": 8, - "padding": [ - 8, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "G1DqV", - "name": "heroBadgeDot", - "fill": "$orange-primary", - "width": 8, - "height": 8 - }, - { - "type": "text", - "id": "dpRNf", - "name": "heroBadgeText", - "fill": "$orange-primary", - "content": "Hệ thống POS & Loyalty hàng đầu Việt Nam", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "z6SsC", - "name": "headline", - "fill": "$text-primary", - "textGrowth": "fixed-width", - "width": 900, - "content": "Quản lý bán hàng thông minh.\nTích điểm khách hàng tự động.", - "lineHeight": 1.15, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 56, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "50RjU", - "name": "subline", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 750, - "content": "aPOS là giải pháp POS toàn diện cho ngành F&B, Bar, Karaoke và Coffee — giúp bạn bán hàng nhanh hơn, quản lý thông minh hơn và giữ chân khách hàng bằng hệ thống tích điểm thành viên.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "Ktf5k", - "name": "ctaRow", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "AqJ6X", - "name": "newPrimaryCta", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 16, - 32 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ocR1c", - "name": "btnPIcon", - "width": 18, - "height": 18, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "fEtjW", - "name": "btnPText", - "fill": "$text-primary", - "content": "Bắt đầu miễn phí", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "Dys8A", - "name": "newSecondaryCta", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 16, - 32 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "CuXSB", - "name": "btnSIcon", - "width": 16, - "height": 16, - "iconFontName": "play", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "JptXG", - "name": "btnSText", - "fill": "$text-secondary", - "content": "Xem demo", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "CX0yT", - "name": "Product Mockup", - "clip": true, - "width": 1000, - "height": 560, - "fill": { - "type": "image", - "enabled": true, - "url": "./images/generated-1769859502510.png", - "mode": "fill" - }, - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "FfW2s", - "name": "mockupLabel", - "fill": "$text-disabled", - "content": "POS Dashboard Preview", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "yEE9s", - "name": "newTrustStats", - "width": "fill_container", - "gap": 40, - "padding": [ - 20, - 0, - 0, - 0 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "QdxMK", - "name": "tsLabel", - "fill": "$text-disabled", - "content": "Được tin dùng bởi 2,000+ doanh nghiệp", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "rectangle", - "id": "77g7e", - "name": "tsDivider1", - "fill": "$border-default", - "width": 1, - "height": 20 - }, - { - "type": "text", - "id": "jOexp", - "name": "tsStat1", - "fill": "$text-tertiary", - "content": "50,000+ giao dịch/ngày", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "rectangle", - "id": "yVcTj", - "name": "tsDivider2", - "fill": "$border-default", - "width": 1, - "height": 20 - }, - { - "type": "text", - "id": "2btDz", - "name": "tsStat2", - "fill": "$text-tertiary", - "content": "99.9% uptime", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "lZbGT", - "name": "Features Section", - "width": "fill_container", - "layout": "vertical", - "gap": 60, - "padding": [ - 100, - 120 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ztFwh", - "name": "newFeatHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "hz6Jy", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "zWi76", - "name": "badgeText", - "fill": "$orange-primary", - "content": "TÍNH NĂNG", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "AMYB9", - "name": "shTitle", - "fill": "$text-primary", - "content": "Mọi thứ bạn cần để vận hành doanh nghiệp", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "xl0pr", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "Từ quản lý đơn hàng đến tích điểm khách hàng, aPOS cung cấp giải pháp toàn diện cho doanh nghiệp của bạn.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "jsaba", - "name": "Feature Grid", - "width": "fill_container", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "DA2ma", - "name": "newFC1", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "ttzoK", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#FF5C0018", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "IsPEk", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "monitor-smartphone", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - } - ] - }, - { - "type": "text", - "id": "V6MaB", - "name": "fcTitle", - "fill": "$text-primary", - "content": "POS Đa nền tảng", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "xzGQH", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Hoạt động trên mọi thiết bị: tablet, điện thoại và máy tính. Đồng bộ dữ liệu realtime.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "nnfv4", - "name": "newFC2", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "Vhe45", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#22C55E18", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "2R7jV", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "award", - "iconFontFamily": "lucide", - "fill": "$green-success" - } - ] - }, - { - "type": "text", - "id": "MiZas", - "name": "fcTitle", - "fill": "$text-primary", - "content": "Tích điểm thành viên", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "uVGg0", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Hệ thống loyalty tự động: tích điểm, đổi quà, phân hạng thành viên theo chi tiêu.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "lRmHb", - "name": "newFC3", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "JLUHC", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#3B82F618", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "WX408", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "chart-bar", - "iconFontFamily": "lucide", - "fill": "#3B82F6" - } - ] - }, - { - "type": "text", - "id": "pFBcT", - "name": "fcTitle", - "fill": "$text-primary", - "content": "Báo cáo doanh thu", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "Y1FkX", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Dashboard trực quan với biểu đồ realtime. Theo dõi doanh thu, sản phẩm bán chạy và xu hướng.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "pcbaX", - "name": "Feature Grid Row 2", - "width": "fill_container", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "J2O62", - "name": "newFC4", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "wgTRi", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#A855F718", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "IjVLP", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "#A855F7" - } - ] - }, - { - "type": "text", - "id": "FxXdh", - "name": "fcTitle", - "fill": "$text-primary", - "content": "Quản lý nhân viên", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "vVQ8D", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Phân quyền theo vai trò, theo dõi ca làm việc, tính lương và đánh giá hiệu suất.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "GXocB", - "name": "newFC5", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "HJ8wD", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#F59E0B18", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "mdbjq", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "package", - "iconFontFamily": "lucide", - "fill": "#F59E0B" - } - ] - }, - { - "type": "text", - "id": "NVthg", - "name": "fcTitle", - "fill": "$text-primary", - "content": "Quản lý kho hàng", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "8Yrnc", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Theo dõi tồn kho, cảnh báo hết hàng, nhập xuất kho tự động khi có đơn hàng.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "A2gcA", - "name": "newFC6", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "Yd3x5", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#EC489918", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "Y8w0u", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "qr-code", - "iconFontFamily": "lucide", - "fill": "#EC4899" - } - ] - }, - { - "type": "text", - "id": "ajm5S", - "name": "fcTitle", - "fill": "$text-primary", - "content": "Thanh toán đa kênh", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "6tgCh", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Hỗ trợ tiền mặt, thẻ, QR code, ví điện tử. Tích hợp mọi cổng thanh toán phổ biến.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "1ZzyA", - "name": "Industry Solutions", - "width": "fill_container", - "fill": "$bg-surface", - "layout": "vertical", - "gap": 60, - "padding": [ - 100, - 120 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "eU7we", - "name": "newIndHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "p6J5O", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "vRiH8", - "name": "badgeText", - "fill": "$orange-primary", - "content": "NGÀNH NGHỀ", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "x6xl8", - "name": "shTitle", - "fill": "$text-primary", - "content": "Giải pháp cho mọi ngành kinh doanh", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "W18Kq", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "aPOS được thiết kế riêng cho từng ngành, với quy trình vận hành và tính năng phù hợp nhất.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "rPxFV", - "name": "Industry Grid", - "width": "fill_container", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "oOZI0", - "name": "newInd1", - "clip": true, - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "J2ulP", - "name": "indImg", - "width": "fill_container", - "height": 200, - "fill": { - "type": "image", - "enabled": true, - "url": "https://images.unsplash.com/photo-1591552694788-3b74d181b46f?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4NDM0ODN8MHwxfHJhbmRvbXx8fHx8fHx8fDE3Njk4NjAxMDl8&ixlib=rb-4.1.0&q=80&w=1080", - "mode": "fill" - } - }, - { - "type": "frame", - "id": "8t0Kl", - "name": "indContent", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "padding": 24, - "children": [ - { - "type": "text", - "id": "5yC7a", - "name": "indTitle", - "fill": "$text-primary", - "content": "Nhà hàng & F&B", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "Mi9F0", - "name": "indDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Quản lý bàn, order tại chỗ & mang đi, chia bill, quản lý bếp realtime.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "Q0Hz2", - "name": "indTags", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "Xw9pj", - "name": "indTag1", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "E47BO", - "name": "chipText", - "fill": "$text-secondary", - "content": "Quản lý bàn", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "ilssA", - "name": "indTag2", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "Iby7p", - "name": "chipText", - "fill": "$text-secondary", - "content": "Kitchen Display", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "BBpEN", - "name": "newInd2", - "clip": true, - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "xJiSx", - "name": "indImg", - "width": "fill_container", - "height": 200, - "fill": { - "type": "image", - "enabled": true, - "url": "https://images.unsplash.com/photo-1610931002340-fe06e753976e?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4NDM0ODN8MHwxfHJhbmRvbXx8fHx8fHx8fDE3Njk4NjAxMTJ8&ixlib=rb-4.1.0&q=80&w=1080", - "mode": "fill" - } - }, - { - "type": "frame", - "id": "r6MIK", - "name": "indContent", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "padding": 24, - "children": [ - { - "type": "text", - "id": "kOgh7", - "name": "indTitle", - "fill": "$text-primary", - "content": "Bar & Lounge", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "tY4IM", - "name": "indDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Tab quản lý khách, happy hour tự động, quản lý công thức pha chế.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "eRO4k", - "name": "indTags", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "x7J4F", - "name": "indTag1", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "dg43M", - "name": "chipText", - "fill": "$text-secondary", - "content": "Tab Manager", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "rAv1H", - "name": "indTag2", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "jxO6Q", - "name": "chipText", - "fill": "$text-secondary", - "content": "Happy Hour", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "4N0SP", - "name": "newInd3", - "clip": true, - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "nx1DJ", - "name": "indImg", - "width": "fill_container", - "height": 200, - "fill": { - "type": "image", - "enabled": true, - "url": "https://images.unsplash.com/photo-1760598742492-7ad941e658e5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4NDM0ODN8MHwxfHJhbmRvbXx8fHx8fHx8fDE3Njk4NjAxMTh8&ixlib=rb-4.1.0&q=80&w=1080", - "mode": "fill" - } - }, - { - "type": "frame", - "id": "fDUMx", - "name": "indContent", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "padding": 24, - "children": [ - { - "type": "text", - "id": "S7Bu3", - "name": "indTitle", - "fill": "$text-primary", - "content": "Karaoke", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "C8Mdp", - "name": "indDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Quản lý phòng, tính giờ tự động, gọi đồ uống từ phòng, khuyến mãi theo khung giờ.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "81mgY", - "name": "indTags", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "fqHyv", - "name": "indTag1", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "ifaEv", - "name": "chipText", - "fill": "$text-secondary", - "content": "Quản lý phòng", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "AWtwp", - "name": "indTag2", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "kbEcj", - "name": "chipText", - "fill": "$text-secondary", - "content": "Tính giờ", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "XwCiu", - "name": "newInd4", - "clip": true, - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "VdwON", - "name": "indImg", - "width": "fill_container", - "height": 200, - "fill": { - "type": "image", - "enabled": true, - "url": "https://images.unsplash.com/photo-1688683035298-2eff07d8c323?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w4NDM0ODN8MHwxfHJhbmRvbXx8fHx8fHx8fDE3Njk4NjAxMjF8&ixlib=rb-4.1.0&q=80&w=1080", - "mode": "fill" - } - }, - { - "type": "frame", - "id": "l4KPm", - "name": "indContent", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "padding": 24, - "children": [ - { - "type": "text", - "id": "E9IUZ", - "name": "indTitle", - "fill": "$text-primary", - "content": "Coffee Shop", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "RbSR7", - "name": "indDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Order nhanh, quản lý menu đa dạng, in barcode, kết nối máy pha trực tiếp.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "r1z2N", - "name": "indTags", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "LxRKS", - "name": "indTag1", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "rVd6g", - "name": "chipText", - "fill": "$text-secondary", - "content": "Quick Order", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "z55bo", - "name": "indTag2", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "Xf7lP", - "name": "chipText", - "fill": "$text-secondary", - "content": "Loyalty", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "EPpvo", - "name": "How It Works", - "width": "fill_container", - "layout": "vertical", - "gap": 60, - "padding": [ - 100, - 120 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "YuShH", - "name": "newHiwHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "eNKJn", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "vWIWI", - "name": "badgeText", - "fill": "$orange-primary", - "content": "BẮT ĐẦU DỄ DÀNG", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "QsxWM", - "name": "shTitle", - "fill": "$text-primary", - "content": "3 bước để đưa doanh nghiệp lên aPOS", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "67Eip", - "name": "shDesc", - "enabled": false, - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "Section description goes here with more details about this section.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "kHnqX", - "name": "stepsRow", - "width": "fill_container", - "gap": 32, - "children": [ - { - "type": "frame", - "id": "6lrDg", - "name": "newStep1", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 20, - "padding": 32, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "4O5Qo", - "name": "stepNum", - "width": 56, - "height": 56, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 28, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "moJQR", - "name": "stepNumText", - "fill": "$text-primary", - "content": "1", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "i31Ol", - "name": "stepTitle", - "fill": "$text-primary", - "content": "Đăng ký tài khoản", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "bqaWg", - "name": "stepDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Tạo tài khoản miễn phí chỉ trong 2 phút. Không cần thẻ tín dụng.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "yXLbg", - "name": "newStep2", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 20, - "padding": 32, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "QZaPn", - "name": "stepNum", - "width": 56, - "height": 56, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 28, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "5S6qq", - "name": "stepNumText", - "fill": "$text-primary", - "content": "2", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "b4Geq", - "name": "stepTitle", - "fill": "$text-primary", - "content": "Cài đặt cửa hàng", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "9Kz1R", - "name": "stepDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Thêm menu, nhân viên và cấu hình hệ thống loyalty theo nhu cầu.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "dT4H5", - "name": "newStep3", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 20, - "padding": 32, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Kzh11", - "name": "stepNum", - "width": 56, - "height": 56, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 28, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "LjEwo", - "name": "stepNumText", - "fill": "$text-primary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "ZMaSf", - "name": "stepTitle", - "fill": "$text-primary", - "content": "Bắt đầu bán hàng", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "JsYU2", - "name": "stepDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Bắt đầu nhận đơn, tích điểm khách hàng và theo dõi doanh thu ngay lập tức.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PUXqC", - "name": "Pricing Section", - "width": "fill_container", - "fill": "$bg-surface", - "layout": "vertical", - "gap": 60, - "padding": [ - 100, - 120 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ApJyq", - "name": "newPrcHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "EqJK7", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "ywqo2", - "name": "badgeText", - "fill": "$orange-primary", - "content": "BẢNG GIÁ", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "fmNVg", - "name": "shTitle", - "fill": "$text-primary", - "content": "Gói dịch vụ phù hợp mọi quy mô", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "FsJSQ", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 500, - "content": "Bắt đầu miễn phí, nâng cấp khi doanh nghiệp phát triển. Không phí ẩn.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "5kJ39", - "name": "Pricing Grid", - "width": "fill_container", - "gap": 24, - "children": [ - { - "type": "frame", - "id": "tgARM", - "name": "newStarter", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "kkMfs", - "name": "pcBadge", - "enabled": false, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "z4JfD", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Phổ biến nhất", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "2hC8D", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "AIl3d", - "name": "pcName", - "fill": "$text-secondary", - "content": "Starter", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "J0Hmh", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "STsMe", - "name": "pcPrice", - "fill": "$text-primary", - "content": "Miễn phí", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "SBD8B", - "name": "pcPer", - "enabled": false, - "fill": "$text-tertiary", - "content": "/tháng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "bnncL", - "name": "pcDesc", - "fill": "$text-tertiary", - "content": "Dành cho cửa hàng nhỏ mới bắt đầu", - "lineHeight": 1.5, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "rectangle", - "id": "jaNAs", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "KDm7t", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "gZW53", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "f6f2F", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "EmvXg", - "name": "checkText", - "fill": "$text-secondary", - "content": "1 cửa hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "nxrPn", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PT7fu", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "zKkeP", - "name": "checkText", - "fill": "$text-secondary", - "content": "100 giao dịch/tháng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "JCBnm", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "2wSt6", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "TKfKt", - "name": "checkText", - "fill": "$text-secondary", - "content": "Báo cáo cơ bản", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "W44Ge", - "name": "pcBtn", - "width": "fill_container", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "pA83d", - "name": "btnSIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "yDCY3", - "name": "btnSText", - "fill": "$text-primary", - "content": "Bắt đầu miễn phí", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "ZcmxL", - "name": "newPro", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 2, - "fill": "$orange-primary" - }, - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "VuEoj", - "name": "pcBadge", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "pSIOd", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Phổ biến nhất", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "Bq7HU", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "z9xYo", - "name": "pcName", - "fill": "$orange-primary", - "content": "Professional", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "BDGwY", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "SAUa0", - "name": "pcPrice", - "fill": "$text-primary", - "content": "499K", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "YnOnQ", - "name": "pcPer", - "fill": "$text-tertiary", - "content": "/tháng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "mGOke", - "name": "pcDesc", - "fill": "$text-tertiary", - "content": "Dành cho chuỗi cửa hàng đang phát triển", - "lineHeight": 1.5, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "rectangle", - "id": "VirYB", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "kruAJ", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "HxBKP", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "iDfHq", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "2O1SN", - "name": "checkText", - "fill": "$text-secondary", - "content": "5 cửa hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "tTAOL", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "LHLCW", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "MYADR", - "name": "checkText", - "fill": "$text-secondary", - "content": "Giao dịch không giới hạn", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "pepsl", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "qsAwN", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "wSuyK", - "name": "checkText", - "fill": "$text-secondary", - "content": "Báo cáo nâng cao & xuất Excel", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "FxkD9", - "name": "newProBtn", - "width": "fill_container", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ry6qH", - "name": "btnPIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "Y3oA2", - "name": "btnPText", - "fill": "$text-primary", - "content": "Dùng thử 14 ngày", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "xzGPb", - "name": "newEnt", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "lJRxo", - "name": "pcBadge", - "enabled": false, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "U5spD", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Phổ biến nhất", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "rQkVA", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "orOne", - "name": "pcName", - "fill": "$text-secondary", - "content": "Enterprise", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "S6enu", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "zMXYz", - "name": "pcPrice", - "fill": "$text-primary", - "content": "Liên hệ", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "87ILE", - "name": "pcPer", - "enabled": false, - "fill": "$text-tertiary", - "content": "/tháng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "gvyl2", - "name": "pcDesc", - "fill": "$text-tertiary", - "content": "Dành cho chuỗi lớn và doanh nghiệp đa chi nhánh", - "lineHeight": 1.5, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "rectangle", - "id": "eG9vj", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "kLIGa", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "ifsTy", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "m8IWV", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "lH5lK", - "name": "checkText", - "fill": "$text-secondary", - "content": "Không giới hạn cửa hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "NGRVt", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "Q1EeF", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "YmInO", - "name": "checkText", - "fill": "$text-secondary", - "content": "API tích hợp & white-label", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "gXHga", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "uSsyg", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "WrHKB", - "name": "checkText", - "fill": "$text-secondary", - "content": "Dedicated account manager", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "2VLLn", - "name": "pcBtn", - "width": "fill_container", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "4S2MD", - "name": "btnSIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "y95SA", - "name": "btnSText", - "fill": "$text-primary", - "content": "Liên hệ tư vấn", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "KMcSO", - "name": "Final CTA", - "width": "fill_container", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 180, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C0015", - "position": 0 - }, - { - "color": "#0A0A0B", - "position": 1 - } - ] - }, - "layout": "vertical", - "gap": 32, - "padding": [ - 100, - 120 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "pZ0dD", - "name": "ctaTitle", - "fill": "$text-primary", - "textGrowth": "fixed-width", - "width": 700, - "content": "Sẵn sàng nâng cấp\ndoanh nghiệp của bạn?", - "lineHeight": 1.2, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 48, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "2f9hS", - "name": "ctaSub", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 550, - "content": "Hơn 2,000 doanh nghiệp đã tin tưởng aPOS. Tham gia ngay hôm nay — hoàn toàn miễn phí.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "NLwzN", - "name": "ctaBtnRow", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "SEbxe", - "name": "newCtaBtn1", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "gap": 8, - "padding": [ - 18, - 40 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "2c1V5", - "name": "btnPIcon", - "width": 18, - "height": 18, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "dwOU4", - "name": "btnPText", - "fill": "$text-primary", - "content": "Bắt đầu miễn phí", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "UmV8x", - "name": "newCtaBtn2", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 18, - 40 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "5ZrRT", - "name": "btnSIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "6Uub3", - "name": "btnSText", - "fill": "$text-secondary", - "content": "Đặt lịch demo", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "text", - "id": "IUzS0", - "name": "ctaTrust", - "fill": "$text-disabled", - "content": "Không cần thẻ tín dụng · Thiết lập trong 2 phút · Hủy bất kỳ lúc nào", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "ZJjfQ", - "name": "Footer", - "width": "fill_container", - "fill": "$bg-surface", - "layout": "vertical", - "gap": 40, - "padding": [ - 60, - 120 - ], - "children": [ - { - "type": "frame", - "id": "RWIqm", - "name": "footTop", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "PbyTa", - "name": "footBrand", - "width": 320, - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "6Dm97", - "name": "newFootLogo", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "Vz7PV", - "name": "logoDot", - "fill": "$orange-primary", - "width": 10, - "height": 10 - }, - { - "type": "text", - "id": "5Rfgw", - "name": "logoText", - "fill": "$text-primary", - "content": "aPOS", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "600", - "letterSpacing": 3 - } - ] - }, - { - "type": "text", - "id": "hbZGS", - "name": "footTagline", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 300, - "content": "Hệ thống POS và tích điểm thành viên hàng đầu cho ngành F&B, Bar, Karaoke và Coffee tại Việt Nam.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "iY8ru", - "name": "newFootCol1", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "text", - "id": "p5LpH", - "name": "footColTitle", - "fill": "$text-primary", - "content": "Sản phẩm", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "VfYlH", - "name": "footColL1", - "fill": "$text-tertiary", - "content": "POS System", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "iKBS3", - "name": "footColL2", - "fill": "$text-tertiary", - "content": "Loyalty & Membership", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "HQbaO", - "name": "footColL3", - "fill": "$text-tertiary", - "content": "Báo cáo & Analytics", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "ztrVL", - "name": "footColL4", - "fill": "$text-tertiary", - "content": "Quản lý kho", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "TO01Z", - "name": "newFootCol2", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "text", - "id": "ouZqX", - "name": "footColTitle", - "fill": "$text-primary", - "content": "Ngành nghề", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "VWP8z", - "name": "footColL1", - "fill": "$text-tertiary", - "content": "Nhà hàng & F&B", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "YMCcn", - "name": "footColL2", - "fill": "$text-tertiary", - "content": "Bar & Lounge", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "w5Eww", - "name": "footColL3", - "fill": "$text-tertiary", - "content": "Karaoke", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "8NsnV", - "name": "footColL4", - "fill": "$text-tertiary", - "content": "Coffee Shop", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "SU4XZ", - "name": "newFootCol3", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "text", - "id": "IJDFD", - "name": "footColTitle", - "fill": "$text-primary", - "content": "Hỗ trợ", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "XU1Cu", - "name": "footColL1", - "fill": "$text-tertiary", - "content": "Trung tâm trợ giúp", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "s6Nyu", - "name": "footColL2", - "fill": "$text-tertiary", - "content": "Liên hệ", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "R9Smd", - "name": "footColL3", - "fill": "$text-tertiary", - "content": "Chính sách bảo mật", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "IxH0i", - "name": "footColL4", - "fill": "$text-tertiary", - "content": "Điều khoản sử dụng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "rectangle", - "id": "n8eJ5", - "name": "newFootDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "OXqMx", - "name": "footBottom", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ujwE3", - "name": "footCopy", - "fill": "$text-disabled", - "content": "© 2026 aPOS. All rights reserved.", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "zRuDe", - "name": "footSocials", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "IvThd", - "name": "newSoc1", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "loHwh", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "facebook", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - }, - { - "type": "frame", - "id": "24g7T", - "name": "newSoc2", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "oDnuk", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "instagram", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - }, - { - "type": "frame", - "id": "TCdzl", - "name": "newSoc3", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "Ls6CG", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "youtube", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - }, - { - "type": "frame", - "id": "u9sTP", - "name": "newSoc4", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "OYJjl", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "linkedin", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "MobPg", - "x": 1910, - "y": 0, - "name": "aPOS Mobile Page", - "width": 390, - "fill": "$bg-page", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "mNav1", - "name": "mobileHeader", - "width": 390, - "padding": [ - 16, - 20 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "NsgO1", - "name": "mNavLogo", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "eWA05", - "name": "logoDot", - "fill": "$orange-primary", - "width": 10, - "height": 10 - }, - { - "type": "text", - "id": "WHoit", - "name": "logoText", - "fill": "$text-primary", - "content": "aPOS", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600", - "letterSpacing": 3 - } - ] - }, - { - "type": "icon_font", - "id": "4TnP7", - "name": "hamburgerIcon", - "width": 24, - "height": 24, - "iconFontName": "menu", - "iconFontFamily": "lucide", - "fill": "$text-primary" - } - ] - }, - { - "type": "frame", - "id": "mHero", - "name": "Mobile Hero Section", - "width": "fill_container", - "layout": "vertical", - "gap": 24, - "padding": [ - 60, - 24, - 40, - 24 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "mBadge1", - "name": "mHeroBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "gap": 8, - "padding": [ - 8, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "Z3jN0", - "name": "heroBadgeDot", - "fill": "$orange-primary", - "width": 8, - "height": 8 - }, - { - "type": "text", - "id": "6PLFF", - "name": "heroBadgeText", - "fill": "$orange-primary", - "content": "POS & Loyalty #1 Việt Nam", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "mHead1", - "name": "mHeadline", - "fill": "$text-primary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Quản lý bán hàng\nthông minh.", - "lineHeight": 1.15, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 32, - "fontWeight": "normal", - "letterSpacing": -0.5 - }, - { - "type": "text", - "id": "mSub1", - "name": "mSubline", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "aPOS là giải pháp POS toàn diện cho F&B, Bar, Karaoke và Coffee — bán hàng nhanh, quản lý thông minh.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "mCtas", - "name": "mCtaStack", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "mCta1", - "name": "mPrimaryCta", - "width": "fill_container", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 16, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "I0W7T", - "name": "btnPIcon", - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "nCPiZ", - "name": "btnPText", - "fill": "$text-primary", - "content": "Bắt đầu miễn phí", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "mCta2", - "name": "mSecondaryCta", - "width": "fill_container", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 16, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "RIlLJ", - "name": "btnSIcon", - "width": 16, - "height": 16, - "iconFontName": "play", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "o0gUh", - "name": "btnSText", - "fill": "$text-secondary", - "content": "Xem demo", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "mMock", - "name": "mProductMockup", - "clip": true, - "width": "fill_container", - "height": 200, - "fill": { - "type": "image", - "enabled": true, - "url": "./images/generated-1769859502510.png", - "mode": "fill" - }, - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - } - } - ] - }, - { - "type": "frame", - "id": "mFeat", - "name": "Mobile Features Section", - "width": "fill_container", - "fill": "$bg-surface", - "layout": "vertical", - "gap": 24, - "padding": [ - 48, - 24 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "mFeatH", - "name": "mFeatHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "GdSXX", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "tZhQQ", - "name": "badgeText", - "fill": "$orange-primary", - "content": "TÍNH NĂNG", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "yRqrX", - "name": "shTitle", - "fill": "$text-primary", - "content": "Mọi thứ bạn cần", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "K0Bug", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Từ quản lý đơn hàng đến tích điểm khách hàng.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "mFGrid", - "name": "mFeatureStack", - "width": "fill_container", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "mFC1", - "name": "mFeatureCard1", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "VJ1VO", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#FF5C0018", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "sscPx", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "monitor-smartphone", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - } - ] - }, - { - "type": "text", - "id": "QhgVN", - "name": "fcTitle", - "fill": "$text-primary", - "content": "POS Đa nền tảng", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - }, - { - "type": "text", - "id": "6QJrG", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Hoạt động trên mọi thiết bị. Đồng bộ realtime.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "mFC2", - "name": "mFeatureCard2", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "OoQbN", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#22C55E18", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "hamiI", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "award", - "iconFontFamily": "lucide", - "fill": "$green-success" - } - ] - }, - { - "type": "text", - "id": "kzMgW", - "name": "fcTitle", - "fill": "$text-primary", - "content": "Tích điểm thành viên", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - }, - { - "type": "text", - "id": "24rWi", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Loyalty tự động: tích điểm, đổi quà, phân hạng.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "mFC3", - "name": "mFeatureCard3", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "vrO4H", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#3B82F618", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "1u2mH", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "chart-bar", - "iconFontFamily": "lucide", - "fill": "#3B82F6" - } - ] - }, - { - "type": "text", - "id": "X50Q2", - "name": "fcTitle", - "fill": "$text-primary", - "content": "Báo cáo doanh thu", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - }, - { - "type": "text", - "id": "6UVmW", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Dashboard realtime, theo dõi sản phẩm bán chạy.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "mPrc", - "name": "Mobile Pricing Section", - "width": "fill_container", - "layout": "vertical", - "gap": 24, - "padding": [ - 48, - 24 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "mPrcH", - "name": "mPrcHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "0Y3Dv", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "ZshkQ", - "name": "badgeText", - "fill": "$orange-primary", - "content": "BẢNG GIÁ", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "P3itJ", - "name": "shTitle", - "fill": "$text-primary", - "content": "Gói phù hợp mọi quy mô", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "ZdFWI", - "name": "shDesc", - "enabled": false, - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "Section description goes here with more details about this section.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "mPrcStack", - "name": "mPricingStack", - "width": "fill_container", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "mPrc1", - "name": "mProPlan", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 2, - "fill": "$orange-primary" - }, - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "o8knd", - "name": "pcBadge", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "Xow2x", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Phổ biến nhất", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "AO70W", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "3IOQL", - "name": "pcName", - "fill": "$orange-primary", - "content": "Professional", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "4iwqa", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "Ej9Qy", - "name": "pcPrice", - "fill": "$text-primary", - "content": "499K", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "pWlWk", - "name": "pcPer", - "fill": "$text-tertiary", - "content": "/tháng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "pFoWe", - "name": "pcDesc", - "fill": "$text-tertiary", - "content": "Cho chuỗi đang phát triển", - "lineHeight": 1.5, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "rectangle", - "id": "1K3b5", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "P6JkD", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "HEWri", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "scGHI", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "sN1RU", - "name": "checkText", - "fill": "$text-secondary", - "content": "5 cửa hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "DEO1W", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "tC0eE", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "7zKf9", - "name": "checkText", - "fill": "$text-secondary", - "content": "Giao dịch không giới hạn", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "Ux752", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "Ujmo8", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "ZEdgf", - "name": "checkText", - "fill": "$text-secondary", - "content": "Báo cáo nâng cao", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "QYYET", - "name": "mProCta", - "width": "fill_container", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "Bz4ky", - "name": "btnPIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "dTZKl", - "name": "btnPText", - "fill": "$text-primary", - "content": "Dùng thử 14 ngày", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "mPrc2", - "name": "mStarterPlan", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "9mCvs", - "name": "pcBadge", - "enabled": false, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "HHpa9", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Phổ biến nhất", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "q7Yf1", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "cyHXI", - "name": "pcName", - "fill": "$text-secondary", - "content": "Starter", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "sSnLb", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "XP12E", - "name": "pcPrice", - "fill": "$text-primary", - "content": "Miễn phí", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "qL0oG", - "name": "pcPer", - "enabled": false, - "fill": "$text-tertiary", - "content": "/tháng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "qlTKz", - "name": "pcDesc", - "fill": "$text-tertiary", - "content": "Cho cửa hàng nhỏ mới bắt đầu", - "lineHeight": 1.5, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "rectangle", - "id": "7Uk8L", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "mEY76", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "0AwwL", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "Ao9nl", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "X4DFp", - "name": "checkText", - "fill": "$text-secondary", - "content": "1 cửa hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "JEfAL", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "zdFLa", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "MI3ss", - "name": "checkText", - "fill": "$text-secondary", - "content": "100 giao dịch/tháng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "9ih9l", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MsmeF", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "jjvqC", - "name": "checkText", - "fill": "$text-secondary", - "content": "Báo cáo cơ bản", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "MpGzn", - "name": "pcBtn", - "width": "fill_container", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MCCrg", - "name": "btnSIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "EhiuS", - "name": "btnSText", - "fill": "$text-primary", - "content": "Bắt đầu miễn phí", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "mCta", - "name": "Mobile CTA Section", - "width": "fill_container", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 180, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C0015", - "position": 0 - }, - { - "color": "#0A0A0B", - "position": 1 - } - ] - }, - "layout": "vertical", - "gap": 20, - "padding": [ - 48, - 24 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "mCtaT", - "name": "mCtaTitle", - "fill": "$text-primary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Sẵn sàng nâng cấp\ndoanh nghiệp?", - "lineHeight": 1.2, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 28, - "fontWeight": "normal", - "letterSpacing": -0.5 - }, - { - "type": "frame", - "id": "mCtaBtn", - "name": "mCtaPrimary", - "width": "fill_container", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "gap": 8, - "padding": [ - 18, - 32 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "V9mJP", - "name": "btnPIcon", - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "LJPiD", - "name": "btnPText", - "fill": "$text-primary", - "content": "Bắt đầu miễn phí", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "mCtaTrust", - "name": "mCtaTrustText", - "fill": "$text-disabled", - "content": "Không cần thẻ · Thiết lập 2 phút", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "mFoot", - "name": "Mobile Footer", - "width": "fill_container", - "fill": "$bg-surface", - "layout": "vertical", - "gap": 24, - "padding": [ - 40, - 24 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "mFootLogo", - "name": "mFooterLogo", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "6cb08", - "name": "logoDot", - "fill": "$orange-primary", - "width": 10, - "height": 10 - }, - { - "type": "text", - "id": "Jb2YP", - "name": "logoText", - "fill": "$text-primary", - "content": "aPOS", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600", - "letterSpacing": 3 - } - ] - }, - { - "type": "text", - "id": "mFootTag", - "name": "mFooterTagline", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Hệ thống POS và tích điểm thành viên hàng đầu cho F&B tại Việt Nam.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "mSocRow", - "name": "mSocialRow", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "mS1", - "name": "mSoc1", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "Ha00P", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "facebook", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - }, - { - "type": "frame", - "id": "mS2", - "name": "mSoc2", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "tgwMC", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "instagram", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - }, - { - "type": "frame", - "id": "mS3", - "name": "mSoc3", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "FA77I", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "youtube", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - } - ] - }, - { - "type": "rectangle", - "id": "mFootDiv", - "name": "mFooterDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "text", - "id": "mCopy", - "name": "mCopyright", - "fill": "$text-disabled", - "content": "© 2026 aPOS. All rights reserved.", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "TabPg", - "x": 2770, - "y": 0, - "name": "aPOS Tablet Page", - "width": 768, - "fill": "$bg-page", - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "tNav", - "name": "Tablet NavBar", - "width": "fill_container", - "padding": [ - 16, - 40 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "tLogo", - "name": "tNavLogo", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "CH0we", - "name": "logoDot", - "fill": "$orange-primary", - "width": 10, - "height": 10 - }, - { - "type": "text", - "id": "55EeP", - "name": "logoText", - "fill": "$text-primary", - "content": "aPOS", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "600", - "letterSpacing": 3 - } - ] - }, - { - "type": "frame", - "id": "tNavLinks", - "name": "tNavLinksRow", - "gap": 24, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "tL1", - "name": "tNavL1", - "fill": "$text-secondary", - "content": "Tính năng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "tL2", - "name": "tNavL2", - "fill": "$text-secondary", - "content": "Bảng giá", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "tL3", - "name": "tNavL3", - "fill": "$text-secondary", - "content": "Liên hệ", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "tNavCta", - "name": "tNavTrialBtn", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "MdCZ7", - "name": "btnPIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "UHBDe", - "name": "btnPText", - "fill": "$text-primary", - "content": "Dùng thử", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "tHero", - "name": "Tablet Hero Section", - "width": "fill_container", - "layout": "vertical", - "gap": 32, - "padding": [ - 80, - 48, - 60, - 48 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "tBadge", - "name": "tHeroBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "gap": 8, - "padding": [ - 8, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "NEFdT", - "name": "heroBadgeDot", - "fill": "$orange-primary", - "width": 8, - "height": 8 - }, - { - "type": "text", - "id": "x5aXx", - "name": "heroBadgeText", - "fill": "$orange-primary", - "content": "Hệ thống POS & Loyalty hàng đầu Việt Nam", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "tHead", - "name": "tHeadline", - "fill": "$text-primary", - "textGrowth": "fixed-width", - "width": 650, - "content": "Quản lý bán hàng thông minh.\nTích điểm khách hàng tự động.", - "lineHeight": 1.15, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 40, - "fontWeight": "normal", - "letterSpacing": -0.5 - }, - { - "type": "text", - "id": "tSub", - "name": "tSubline", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 550, - "content": "aPOS là giải pháp POS toàn diện cho ngành F&B, Bar, Karaoke và Coffee — giúp bạn bán hàng nhanh hơn và giữ chân khách hàng.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "tCtas", - "name": "tCtaRow", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "tCta1", - "name": "tPrimaryCta", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 16, - 32 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "DUSpV", - "name": "btnPIcon", - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "84psj", - "name": "btnPText", - "fill": "$text-primary", - "content": "Bắt đầu miễn phí", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "tCta2", - "name": "tSecondaryCta", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 16, - 32 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "7xn7F", - "name": "btnSIcon", - "width": 16, - "height": 16, - "iconFontName": "play", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "lDTmo", - "name": "btnSText", - "fill": "$text-secondary", - "content": "Xem demo", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "tMock", - "name": "tProductMockup", - "clip": true, - "width": 650, - "height": 365, - "fill": { - "type": "image", - "enabled": true, - "url": "./images/generated-1769859502510.png", - "mode": "fill" - }, - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - } - } - ] - }, - { - "type": "frame", - "id": "tFeat", - "name": "Tablet Features Section", - "width": "fill_container", - "layout": "vertical", - "gap": 40, - "padding": [ - 60, - 48 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "tFeatH", - "name": "tFeatHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "T79s5", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "RPSM5", - "name": "badgeText", - "fill": "$orange-primary", - "content": "TÍNH NĂNG", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "0kwb9", - "name": "shTitle", - "fill": "$text-primary", - "content": "Mọi thứ bạn cần để vận hành", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 32, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "dr5Bu", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 500, - "content": "Từ quản lý đơn hàng đến tích điểm khách hàng, aPOS cung cấp giải pháp toàn diện.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "tFGrid", - "name": "tFeatureGrid", - "width": "fill_container", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "tFC1", - "name": "tFeatureCard1", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "CKliQ", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#FF5C0018", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "qwNCa", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "monitor-smartphone", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - } - ] - }, - { - "type": "text", - "id": "WzWhl", - "name": "fcTitle", - "fill": "$text-primary", - "content": "POS Đa nền tảng", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "hH4Ij", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Hoạt động trên mọi thiết bị. Đồng bộ realtime.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "tFC2", - "name": "tFeatureCard2", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "KLhq7", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#22C55E18", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "uheZw", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "award", - "iconFontFamily": "lucide", - "fill": "$green-success" - } - ] - }, - { - "type": "text", - "id": "rToEP", - "name": "fcTitle", - "fill": "$text-primary", - "content": "Tích điểm thành viên", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "Q9LlX", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Loyalty tự động: tích điểm, đổi quà, phân hạng.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "tFGrid2", - "name": "tFeatureGrid2", - "width": "fill_container", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "tFC3", - "name": "tFeatureCard3", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "6IGig", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#3B82F618", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "JRpGR", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "chart-bar", - "iconFontFamily": "lucide", - "fill": "#3B82F6" - } - ] - }, - { - "type": "text", - "id": "QXd9H", - "name": "fcTitle", - "fill": "$text-primary", - "content": "Báo cáo doanh thu", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "KCorA", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Dashboard realtime. Theo dõi sản phẩm bán chạy.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "tFC4", - "name": "tFeatureCard4", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "OrBY6", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#A855F718", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "wwx7N", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "users", - "iconFontFamily": "lucide", - "fill": "#A855F7" - } - ] - }, - { - "type": "text", - "id": "EDunI", - "name": "fcTitle", - "fill": "$text-primary", - "content": "Quản lý nhân viên", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "H5L0U", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Phân quyền, theo dõi ca làm, tính lương.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "tPrc", - "name": "Tablet Pricing Section", - "width": "fill_container", - "fill": "$bg-surface", - "layout": "vertical", - "gap": 40, - "padding": [ - 60, - 48 - ], - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "tPrcH", - "name": "tPrcHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "5A9ot", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "u0Adu", - "name": "badgeText", - "fill": "$orange-primary", - "content": "BẢNG GIÁ", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "qAvL2", - "name": "shTitle", - "fill": "$text-primary", - "content": "Gói dịch vụ phù hợp", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 32, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "oAkDh", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 400, - "content": "Bắt đầu miễn phí, nâng cấp khi phát triển.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "tPrcGrid", - "name": "tPricingGrid", - "width": "fill_container", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "tPrc1", - "name": "tStarterPlan", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "eJBIC", - "name": "pcBadge", - "enabled": false, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "8KP47", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Phổ biến nhất", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "r4XQV", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "6FvlL", - "name": "pcName", - "fill": "$text-secondary", - "content": "Starter", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "BA67c", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "G2fB2", - "name": "pcPrice", - "fill": "$text-primary", - "content": "Miễn phí", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "vMefg", - "name": "pcPer", - "enabled": false, - "fill": "$text-tertiary", - "content": "/tháng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "t3jSo", - "name": "pcDesc", - "fill": "$text-tertiary", - "content": "Cho cửa hàng nhỏ", - "lineHeight": 1.5, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "rectangle", - "id": "uU5EQ", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "l16NG", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "EN6Ut", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "VlKXx", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "YIaJg", - "name": "checkText", - "fill": "$text-secondary", - "content": "1 cửa hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "CMC5G", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "OMeW3", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "EG7K3", - "name": "checkText", - "fill": "$text-secondary", - "content": "100 giao dịch/tháng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "PiwxZ", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "t2bi7", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "sgJ0T", - "name": "checkText", - "fill": "$text-secondary", - "content": "Báo cáo cơ bản", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "wc9r2", - "name": "pcBtn", - "width": "fill_container", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "I93SS", - "name": "btnSIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "KbD8j", - "name": "btnSText", - "fill": "$text-primary", - "content": "Bắt đầu miễn phí", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "tPrc2", - "name": "tProPlan", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 2, - "fill": "$orange-primary" - }, - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "tPRqe", - "name": "pcBadge", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "QT07v", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Phổ biến nhất", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "BpPrf", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "0aX3K", - "name": "pcName", - "fill": "$orange-primary", - "content": "Professional", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "Yn0xA", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "ZM7dC", - "name": "pcPrice", - "fill": "$text-primary", - "content": "499K", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "qSsdQ", - "name": "pcPer", - "fill": "$text-tertiary", - "content": "/tháng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "aKzal", - "name": "pcDesc", - "fill": "$text-tertiary", - "content": "Cho chuỗi phát triển", - "lineHeight": 1.5, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "rectangle", - "id": "ZpCjl", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "kgCR9", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "6bqLl", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "vMQnD", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "SVxvC", - "name": "checkText", - "fill": "$text-secondary", - "content": "5 cửa hàng", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "AY7Uh", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "WXfvG", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "0zD8m", - "name": "checkText", - "fill": "$text-secondary", - "content": "Giao dịch không giới hạn", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "4egsm", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "Hd4C4", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "NHplH", - "name": "checkText", - "fill": "$text-secondary", - "content": "Báo cáo nâng cao", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "Gg92n", - "name": "tProCta", - "width": "fill_container", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "E8Q4M", - "name": "btnPIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "cG89F", - "name": "btnPText", - "fill": "$text-primary", - "content": "Dùng thử 14 ngày", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "tCta", - "name": "Tablet CTA Section", - "width": "fill_container", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 180, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C0015", - "position": 0 - }, - { - "color": "#0A0A0B", - "position": 1 - } - ] - }, - "layout": "vertical", - "gap": 24, - "padding": [ - 60, - 48 - ], - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "tCtaT", - "name": "tCtaTitle", - "fill": "$text-primary", - "textGrowth": "fixed-width", - "width": 500, - "content": "Sẵn sàng nâng cấp\ndoanh nghiệp của bạn?", - "lineHeight": 1.2, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "normal", - "letterSpacing": -0.5 - }, - { - "type": "frame", - "id": "tCtaBtns", - "name": "tCtaButtons", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "tCtaB1", - "name": "tCtaPrimary", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "gap": 8, - "padding": [ - 18, - 40 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "8hMtq", - "name": "btnPIcon", - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "cAq9F", - "name": "btnPText", - "fill": "$text-primary", - "content": "Bắt đầu miễn phí", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "tCtaB2", - "name": "tCtaSecondary", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 18, - 40 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "q3Jhu", - "name": "btnSIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "cLISI", - "name": "btnSText", - "fill": "$text-secondary", - "content": "Đặt lịch demo", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "text", - "id": "tCtaTrust", - "name": "tCtaTrustText", - "fill": "$text-disabled", - "content": "Không cần thẻ tín dụng · Thiết lập trong 2 phút · Hủy bất kỳ lúc nào", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "tFoot", - "name": "Tablet Footer", - "width": "fill_container", - "fill": "$bg-surface", - "layout": "vertical", - "gap": 32, - "padding": 48, - "children": [ - { - "type": "frame", - "id": "tFootTop", - "name": "tFooterTop", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "frame", - "id": "tFootBrand", - "name": "tFooterBrand", - "width": 280, - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "tFLogo", - "name": "tFootLogo", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "2voAL", - "name": "logoDot", - "fill": "$orange-primary", - "width": 10, - "height": 10 - }, - { - "type": "text", - "id": "6WxMZ", - "name": "logoText", - "fill": "$text-primary", - "content": "aPOS", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "600", - "letterSpacing": 3 - } - ] - }, - { - "type": "text", - "id": "tFTag", - "name": "tFootTagline", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 260, - "content": "Hệ thống POS và tích điểm thành viên hàng đầu cho F&B tại Việt Nam.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "tFootCols", - "name": "tFooterColumns", - "gap": 48, - "children": [ - { - "type": "frame", - "id": "tFCol1", - "name": "tFootCol1", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "text", - "id": "vQ3jr", - "name": "footColTitle", - "fill": "$text-primary", - "content": "Sản phẩm", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "vsK21", - "name": "footColL1", - "fill": "$text-tertiary", - "content": "POS System", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "YG2ju", - "name": "footColL2", - "fill": "$text-tertiary", - "content": "Loyalty", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "dg59B", - "name": "footColL3", - "fill": "$text-tertiary", - "content": "Báo cáo", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "eMbMV", - "name": "footColL4", - "fill": "$text-tertiary", - "content": "Quản lý kho", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "tFCol2", - "name": "tFootCol2", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "text", - "id": "AwD8s", - "name": "footColTitle", - "fill": "$text-primary", - "content": "Hỗ trợ", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "sTwJb", - "name": "footColL1", - "fill": "$text-tertiary", - "content": "Trợ giúp", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "EOJmD", - "name": "footColL2", - "fill": "$text-tertiary", - "content": "Liên hệ", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "XpRcP", - "name": "footColL3", - "fill": "$text-tertiary", - "content": "Bảo mật", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "qybaE", - "name": "footColL4", - "fill": "$text-tertiary", - "content": "Điều khoản", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - } - ] - }, - { - "type": "rectangle", - "id": "tFootDiv", - "name": "tFooterDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "tFootBot", - "name": "tFooterBottom", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "tCopy", - "name": "tCopyright", - "fill": "$text-disabled", - "content": "© 2026 aPOS. All rights reserved.", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "tSocRow", - "name": "tSocialRow", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "tS1", - "name": "tSoc1", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "jTxLT", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "facebook", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - }, - { - "type": "frame", - "id": "tS2", - "name": "tSoc2", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "gxXJf", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "instagram", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - }, - { - "type": "frame", - "id": "tS3", - "name": "tSoc3", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "FtADR", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "youtube", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - }, - { - "type": "frame", - "id": "tS4", - "name": "tSoc4", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "kXQIC", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "linkedin", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "name": "aPOS Component Library", - "width": 1440, - "fill": "$bg-page", - "layout": "vertical", - "gap": 40, - "padding": 40, - "children": [ - { - "type": "frame", - "id": "sokxt", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "NK10q", - "name": "badgeText", - "fill": "$orange-primary", - "content": "BADGES & LABELS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "BadgeRow", - "name": "badgeExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "gap": 20, - "padding": 40, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "Badge1", - "name": "exampleSectionLabel", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "4yAKs", - "name": "badgeText", - "fill": "$orange-primary", - "content": "SECTION LABEL", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "Badge2", - "name": "exampleHeroBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "gap": 8, - "padding": [ - 8, - 16 - ], - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "j3ksJ", - "name": "heroBadgeDot", - "fill": "$orange-primary", - "width": 8, - "height": 8 - }, - { - "type": "text", - "id": "zzm6Q", - "name": "heroBadgeText", - "fill": "$orange-primary", - "content": "Hero Badge with Dot", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "Badge3", - "name": "exampleChip", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "Rb7IM", - "name": "chipText", - "fill": "$text-secondary", - "content": "Chip Label", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "coD4i", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "MOLga", - "name": "badgeText", - "fill": "$orange-primary", - "content": "BUTTONS & ACTIONS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "BtnRow", - "name": "buttonExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "gap": 20, - "padding": 40, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "PrimaryBtn1", - "name": "examplePrimaryBtn", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "xMjoJ", - "name": "btnPIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "yR7mY", - "name": "btnPText", - "fill": "$text-primary", - "content": "Primary Button", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "PrimaryBtn2", - "name": "examplePrimaryBtnIcon", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "qkXav", - "name": "btnPIcon", - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "nrUMI", - "name": "btnPText", - "fill": "$text-primary", - "content": "With Icon", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "SecondaryBtn1", - "name": "exampleSecondaryBtn", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "qM2TY", - "name": "btnSIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "ixoFp", - "name": "btnSText", - "fill": "$text-primary", - "content": "Secondary Button", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "SecondaryBtn2", - "name": "exampleSecondaryBtnIcon", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "6Hmda", - "name": "btnSIcon", - "width": 16, - "height": 16, - "iconFontName": "play", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "4D31l", - "name": "btnSText", - "fill": "$text-primary", - "content": "With Icon", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "NumpadBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "NumpadBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "NUMPAD KEYS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "NumpadExamples", - "name": "numpadKeyExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "gap": 16, - "padding": 40, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "NumKey1", - "name": "Atom/NumpadKey/Standard", - "reusable": true, - "width": 64, - "height": 64, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NumKey1Text", - "name": "keyLabel", - "fill": "$text-primary", - "content": "1", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NumKey2", - "name": "exampleNumpadKey2", - "width": 64, - "height": 64, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NumKey2Text", - "name": "keyLabel", - "fill": "$text-primary", - "content": "2", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NumKey3", - "name": "exampleNumpadKey3", - "width": 64, - "height": 64, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NumKey3Text", - "name": "keyLabel", - "fill": "$text-primary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NumKeyClear", - "name": "Atom/NumpadKey/Action/Clear", - "reusable": true, - "width": 64, - "height": 64, - "fill": "#EF444418", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "#EF4444" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NumKeyClearText", - "name": "keyLabel", - "fill": "#EF4444", - "content": "C", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "NumKeyEnter", - "name": "Atom/NumpadKey/Action/Enter", - "reusable": true, - "width": 64, - "height": 64, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "NumKeyEnterIcon", - "name": "keyIcon", - "width": 24, - "height": 24, - "iconFontName": "corner-down-left", - "iconFontFamily": "lucide", - "fill": "$text-primary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "QtyBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "QtyBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "QUANTITY CONTROLS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "QtyExamples", - "name": "quantityControlExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "gap": 32, - "padding": 40, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "QtyToggle1", - "name": "Atom/QuantityToggle", - "reusable": true, - "fill": "$bg-elevated", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 0, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "QtyMinus", - "name": "minusBtn", - "width": 48, - "height": 48, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "QtyMinusIcon", - "name": "icon", - "width": 20, - "height": 20, - "iconFontName": "minus", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - }, - { - "type": "frame", - "id": "QtyValue", - "name": "valueDisplay", - "width": 56, - "height": 48, - "fill": "$bg-surface", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "QtyValueText", - "name": "value", - "fill": "$text-primary", - "content": "1", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "QtyPlus", - "name": "plusBtn", - "width": 48, - "height": 48, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "QtyPlusIcon", - "name": "icon", - "width": 20, - "height": 20, - "iconFontName": "plus", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "StatusGroup", - "name": "statusIndicatorExamples", - "gap": 24, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "StatusOnline", - "name": "Atom/StatusIndicator/Online", - "reusable": true, - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "StatusOnlineDot", - "name": "dot", - "width": 10, - "height": 10, - "fill": "$green-success" - }, - { - "type": "text", - "id": "StatusOnlineText", - "name": "label", - "fill": "$text-secondary", - "content": "Online", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "StatusOffline", - "name": "Atom/StatusIndicator/Offline", - "reusable": true, - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "StatusOfflineDot", - "name": "dot", - "width": 10, - "height": 10, - "fill": "#EF4444" - }, - { - "type": "text", - "id": "StatusOfflineText", - "name": "label", - "fill": "$text-secondary", - "content": "Offline", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "StatusBusy", - "name": "Atom/StatusIndicator/Busy", - "reusable": true, - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "StatusBusyDot", - "name": "dot", - "width": 10, - "height": 10, - "fill": "#F59E0B" - }, - { - "type": "text", - "id": "StatusBusyText", - "name": "label", - "fill": "$text-secondary", - "content": "Busy", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "Cfoh0", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "JsBB8", - "name": "badgeText", - "fill": "$orange-primary", - "content": "TYPOGRAPHY & BRANDING", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "TypoRow", - "name": "typoExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 32, - "padding": 40, - "children": [ - { - "type": "frame", - "id": "LogoRow", - "name": "logoRow", - "width": "fill_container", - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "LogoEx", - "name": "exampleLogo", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "8osja", - "name": "logoDot", - "fill": "$orange-primary", - "width": 10, - "height": 10 - }, - { - "type": "text", - "id": "7V59t", - "name": "logoText", - "fill": "$text-primary", - "content": "aPOS", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "600", - "letterSpacing": 3 - } - ] - } - ] - }, - { - "type": "frame", - "id": "SectHeader", - "name": "exampleSectionHeader", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "n6zyD", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "mrU8q", - "name": "badgeText", - "fill": "$orange-primary", - "content": "CATEGORY", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "text", - "id": "ivisG", - "name": "shTitle", - "fill": "$text-primary", - "content": "Section Header Component", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 42, - "fontWeight": "normal", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "YFM0A", - "name": "shDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 600, - "content": "This is a reusable section header with badge, title, and description.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "NavLinkRow", - "name": "navLinkRow", - "width": "fill_container", - "gap": 24, - "justifyContent": "center", - "children": [ - { - "type": "text", - "id": "NavLink1", - "name": "exampleNavLink1", - "fill": "$text-secondary", - "content": "Features", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "NavLink2", - "name": "exampleNavLink2", - "fill": "$text-secondary", - "content": "Pricing", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "NavLink3", - "name": "exampleNavLink3", - "fill": "$text-secondary", - "content": "Contact", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "mode_switch_container", - "name": "Molecule/ModeSwitch/Container", - "reusable": true, - "width": "fill_container", - "height": 48, - "layout": "horizontal", - "justifyContent": "center", - "alignItems": "center", - "gap": 4, - "padding": 4, - "fill": "$bg-surface", - "cornerRadius": "$radius-lg", - "children": [ - { - "type": "frame", - "id": "mode_restaurant", - "name": "Mode/Restaurant/Active", - "layout": "horizontal", - "justifyContent": "center", - "alignItems": "center", - "gap": 8, - "padding": [ - 8, - 16 - ], - "fill": "$vertical-restaurant", - "cornerRadius": "$radius-md", - "children": [ - { - "type": "text", - "content": "🍽️", - "fontSize": 16 - }, - { - "type": "text", - "content": "Nhà hàng", - "fontSize": "$text-sm", - "fontWeight": "$font-medium", - "fill": "#FFFFFF" - } - ] - }, - { - "type": "frame", - "id": "mode_bar", - "name": "Mode/Bar/Inactive", - "layout": "horizontal", - "justifyContent": "center", - "alignItems": "center", - "gap": 8, - "padding": [ - 8, - 16 - ], - "fill": "transparent", - "cornerRadius": "$radius-md", - "children": [ - { - "type": "text", - "content": "🍸", - "fontSize": 16 - }, - { - "type": "text", - "content": "Bar", - "fontSize": "$text-sm", - "fontWeight": "$font-medium", - "fill": "$text-secondary" - } - ] - }, - { - "type": "frame", - "id": "mode_karaoke", - "name": "Mode/Karaoke/Inactive", - "layout": "horizontal", - "justifyContent": "center", - "alignItems": "center", - "gap": 8, - "padding": [ - 8, - 16 - ], - "fill": "transparent", - "cornerRadius": "$radius-md", - "children": [ - { - "type": "text", - "content": "🎤", - "fontSize": 16 - }, - { - "type": "text", - "content": "Karaoke", - "fontSize": "$text-sm", - "fontWeight": "$font-medium", - "fill": "$text-secondary" - } - ] - }, - { - "type": "frame", - "id": "mode_spa", - "name": "Mode/Spa/Inactive", - "layout": "horizontal", - "justifyContent": "center", - "alignItems": "center", - "gap": 8, - "padding": [ - 8, - 16 - ], - "fill": "transparent", - "cornerRadius": "$radius-md", - "children": [ - { - "type": "text", - "content": "💆", - "fontSize": 16 - }, - { - "type": "text", - "content": "Spa", - "fontSize": "$text-sm", - "fontWeight": "$font-medium", - "fill": "$text-secondary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "mode_indicator_001", - "name": "Atom/ModeIndicator/Restaurant", - "reusable": true, - "width": 32, - "height": 32, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "fill": "$vertical-restaurant", - "cornerRadius": "$radius-full", - "children": [ - { - "type": "text", - "content": "🍽️", - "fontSize": 16 - } - ] - }, - { - "type": "frame", - "id": "mode_indicator_002", - "name": "Atom/ModeIndicator/Bar", - "reusable": true, - "width": 32, - "height": 32, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "fill": "$vertical-bar", - "cornerRadius": "$radius-full", - "children": [ - { - "type": "text", - "content": "🍸", - "fontSize": 16 - } - ] - }, - { - "type": "frame", - "id": "mode_indicator_003", - "name": "Atom/ModeIndicator/Karaoke", - "reusable": true, - "width": 32, - "height": 32, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "fill": "$vertical-karaoke", - "cornerRadius": "$radius-full", - "children": [ - { - "type": "text", - "content": "🎤", - "fontSize": 16 - } - ] - }, - { - "type": "frame", - "id": "mode_indicator_004", - "name": "Atom/ModeIndicator/Spa", - "reusable": true, - "width": 32, - "height": 32, - "layout": "vertical", - "justifyContent": "center", - "alignItems": "center", - "fill": "$vertical-spa", - "cornerRadius": "$radius-full", - "children": [ - { - "type": "text", - "content": "💆", - "fontSize": 16 - } - ] - }, - { - "type": "frame", - "id": "OrderItemBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "OrderItemBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "ORDER ITEMS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "OrderItemExamples", - "name": "orderItemExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 0, - "padding": 0, - "children": [ - { - "type": "frame", - "id": "OrderItem1", - "name": "Molecule/OrderItem/Standard", - "reusable": true, - "width": "fill_container", - "padding": [ - 16, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "OrderItem1Left", - "name": "leftContent", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "OrderItem1Qty", - "name": "qtyBadge", - "width": 32, - "height": 32, - "fill": "$bg-elevated", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "OrderItem1QtyText", - "name": "qty", - "fill": "$text-primary", - "content": "2", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "OrderItem1Info", - "name": "itemInfo", - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "OrderItem1Name", - "name": "itemName", - "fill": "$text-primary", - "content": "Cà Phê Sữa Đá", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "500" - }, - { - "type": "text", - "id": "OrderItem1Note", - "name": "itemNote", - "fill": "$text-tertiary", - "content": "Ít đường, thêm đá", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "text", - "id": "OrderItem1Price", - "name": "itemPrice", - "fill": "$text-primary", - "content": "58,000₫", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "OrderItem2", - "name": "Molecule/OrderItem/WithModifiers", - "reusable": true, - "width": "fill_container", - "layout": "vertical", - "padding": [ - 16, - 20 - ], - "stroke": { - "thickness": 1, - "fill": "$border-subtle", - "sides": [ - "bottom" - ] - }, - "gap": 8, - "children": [ - { - "type": "frame", - "id": "OrderItem2Main", - "name": "mainRow", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "OrderItem2Left", - "name": "leftContent", - "gap": 12, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "OrderItem2Qty", - "name": "qtyBadge", - "width": 32, - "height": 32, - "fill": "$bg-elevated", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "OrderItem2QtyText", - "name": "qty", - "fill": "$text-primary", - "content": "1", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "OrderItem2Name", - "name": "itemName", - "fill": "$text-primary", - "content": "Bánh Mì Thịt Nguội", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "500" - } - ] - }, - { - "type": "text", - "id": "OrderItem2Price", - "name": "itemPrice", - "fill": "$text-primary", - "content": "45,000₫", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "OrderItem2Mods", - "name": "modifierList", - "padding": [ - 0, - 0, - 0, - 44 - ], - "layout": "vertical", - "gap": 4, - "children": [ - { - "type": "text", - "id": "OrderItem2Mod1", - "name": "modifier1", - "fill": "$text-tertiary", - "content": "+ Phô mai (+10,000₫)", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "OrderItem2Mod2", - "name": "modifier2", - "fill": "$text-tertiary", - "content": "+ Trứng ốp la (+8,000₫)", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "BillRowBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "BillRowBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "BILL SUMMARY", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "BillRowExamples", - "name": "billRowExamples", - "width": 400, - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 0, - "padding": 24, - "children": [ - { - "type": "frame", - "id": "BillSubtotal", - "name": "Molecule/BillRow/Subtotal", - "reusable": true, - "width": "fill_container", - "padding": [ - 8, - 0 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "BillSubtotalLabel", - "name": "label", - "fill": "$text-secondary", - "content": "Tạm tính", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "BillSubtotalValue", - "name": "value", - "fill": "$text-secondary", - "content": "103,000₫", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "BillDiscount", - "name": "Molecule/BillRow/Discount", - "reusable": true, - "width": "fill_container", - "padding": [ - 8, - 0 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "BillDiscountLabel", - "name": "label", - "fill": "$green-success", - "content": "Giảm giá (10%)", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "BillDiscountValue", - "name": "value", - "fill": "$green-success", - "content": "-10,300₫", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "BillTax", - "name": "Molecule/BillRow/Tax", - "reusable": true, - "width": "fill_container", - "padding": [ - 8, - 0 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "BillTaxLabel", - "name": "label", - "fill": "$text-tertiary", - "content": "VAT (8%)", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "BillTaxValue", - "name": "value", - "fill": "$text-tertiary", - "content": "7,416₫", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "BillDivider", - "name": "divider", - "width": "fill_container", - "height": 1, - "fill": "$border-subtle", - "margin": [ - 12, - 0 - ] - }, - { - "type": "frame", - "id": "BillTotal", - "name": "Molecule/BillRow/Total", - "reusable": true, - "width": "fill_container", - "padding": [ - 12, - 0 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "BillTotalLabel", - "name": "label", - "fill": "$text-primary", - "content": "Tổng cộng", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "BillTotalValue", - "name": "value", - "fill": "$orange-primary", - "content": "100,116₫", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "700" - } - ] - } - ] - }, - { - "type": "frame", - "id": "ProductCardBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "ProductCardBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "PRODUCT CARDS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "ProductCardExamples", - "name": "productCardExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "gap": 16, - "padding": 40, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "ProductCard1", - "name": "Molecule/ProductCard/POS", - "reusable": true, - "width": 140, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "ProductCard1Img", - "name": "productImage", - "width": "fill_container", - "height": 100, - "fill": "#3B82F618" - }, - { - "type": "frame", - "id": "ProductCard1Content", - "name": "content", - "width": "fill_container", - "layout": "vertical", - "gap": 4, - "padding": 12, - "children": [ - { - "type": "text", - "id": "ProductCard1Name", - "name": "productName", - "fill": "$text-primary", - "content": "Cà Phê Sữa", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "text", - "id": "ProductCard1Price", - "name": "productPrice", - "fill": "$orange-primary", - "content": "29,000₫", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "ProductCard2", - "name": "Molecule/ProductCard/POS/Selected", - "reusable": true, - "width": 140, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { - "thickness": 2, - "fill": "$orange-primary" - }, - "layout": "vertical", - "clip": true, - "children": [ - { - "type": "frame", - "id": "ProductCard2Img", - "name": "productImage", - "width": "fill_container", - "height": 100, - "fill": "#22C55E18" - }, - { - "type": "frame", - "id": "ProductCard2Content", - "name": "content", - "width": "fill_container", - "layout": "vertical", - "gap": 4, - "padding": 12, - "children": [ - { - "type": "text", - "id": "ProductCard2Name", - "name": "productName", - "fill": "$text-primary", - "content": "Trà Đào", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "text", - "id": "ProductCard2Price", - "name": "productPrice", - "fill": "$orange-primary", - "content": "35,000₫", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "ProductCard3", - "name": "Molecule/ProductCard/POS/OutOfStock", - "reusable": true, - "width": 140, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "clip": true, - "opacity": 0.5, - "children": [ - { - "type": "frame", - "id": "ProductCard3Img", - "name": "productImage", - "width": "fill_container", - "height": 100, - "fill": "#6B6B7018", - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ProductCard3OOS", - "name": "oosLabel", - "fill": "$text-disabled", - "content": "Hết hàng", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "ProductCard3Content", - "name": "content", - "width": "fill_container", - "layout": "vertical", - "gap": 4, - "padding": 12, - "children": [ - { - "type": "text", - "id": "ProductCard3Name", - "name": "productName", - "fill": "$text-disabled", - "content": "Sinh Tố Bơ", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "text", - "id": "ProductCard3Price", - "name": "productPrice", - "fill": "$text-disabled", - "content": "45,000₫", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "WocUJ", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "jV70R", - "name": "badgeText", - "fill": "$orange-primary", - "content": "CARDS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "CardGrid", - "name": "cardExamples", - "width": "fill_container", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "FeatCard1", - "name": "exampleFeatureCard", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 16, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "HpzSJ", - "name": "fcIconBg", - "width": 48, - "height": 48, - "fill": "#FF5C0018", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "suLNf", - "name": "fcIcon", - "width": 24, - "height": 24, - "iconFontName": "monitor-smartphone", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - } - ] - }, - { - "type": "text", - "id": "UJFMb", - "name": "fcTitle", - "fill": "$text-primary", - "content": "Feature Card", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "tDzj5", - "name": "fcDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "This is a feature card component used to showcase key features and capabilities.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "IndCard1", - "name": "exampleIndustryCard", - "clip": true, - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "FLdiF", - "name": "indImg", - "width": "fill_container", - "height": 200, - "fill": "#3B82F618" - }, - { - "type": "frame", - "id": "8ZFVY", - "name": "indContent", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "padding": 24, - "children": [ - { - "type": "text", - "id": "8gWd8", - "name": "indTitle", - "fill": "$text-primary", - "content": "Industry Card", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "1piNF", - "name": "indDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Industry-specific card with image, title, description and tags.", - "lineHeight": 1.6, - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "frame", - "id": "h0FX2", - "name": "indTags", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "DSgMw", - "name": "indTag1", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "rVbro", - "name": "chipText", - "fill": "$text-secondary", - "content": "Feature 1", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "uoFFu", - "name": "indTag2", - "fill": "$bg-elevated", - "cornerRadius": 6, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "JI7l0", - "name": "chipText", - "fill": "$text-secondary", - "content": "Feature 2", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "StepCard1", - "name": "exampleStepCard", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 20, - "padding": 32, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ZReaA", - "name": "stepNum", - "width": 56, - "height": 56, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 28, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "m5Mjz", - "name": "stepNumText", - "fill": "$text-primary", - "content": "1", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "text", - "id": "2XBUX", - "name": "stepTitle", - "fill": "$text-primary", - "content": "Step Card", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "c553G", - "name": "stepDesc", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": "fill_container", - "content": "Step-by-step instruction card with numbered badge.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PricingCardRow", - "name": "pricingCardExamples", - "width": "fill_container", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "PriceCard1", - "name": "examplePricingBasic", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "teMVu", - "name": "pcBadge", - "enabled": false, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "azC2t", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Phổ biến nhất", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "isTGs", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "ZFjfl", - "name": "pcName", - "fill": "$text-secondary", - "content": "Starter", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "5UeZM", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "8fM2n", - "name": "pcPrice", - "fill": "$text-primary", - "content": "Free", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "GfS02", - "name": "pcPer", - "enabled": false, - "fill": "$text-tertiary", - "content": "/tháng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "uLtIh", - "name": "pcDesc", - "fill": "$text-tertiary", - "content": "For small businesses getting started", - "lineHeight": 1.5, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "rectangle", - "id": "u5uVY", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "MXmSA", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "YbXof", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "mzamm", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "3r8fL", - "name": "checkText", - "fill": "$text-secondary", - "content": "1 store", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "Nj2yA", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "NVTzn", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "5LtsD", - "name": "checkText", - "fill": "$text-secondary", - "content": "100 transactions/month", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "GqUzO", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "yZlVe", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "Ut5uS", - "name": "checkText", - "fill": "$text-secondary", - "content": "Basic reports", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "0Fnac", - "name": "pcBtn", - "width": "fill_container", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "1w3HC", - "name": "btnSIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "RVZxt", - "name": "btnSText", - "fill": "$text-primary", - "content": "Get Started", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PriceCard2", - "name": "examplePricingPro", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 2, - "fill": "$orange-primary" - }, - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "2qVjH", - "name": "pcBadge", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "PthNf", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Phổ biến nhất", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "yT240", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "G4OEv", - "name": "pcName", - "fill": "$orange-primary", - "content": "Professional", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "IQojv", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "R1uJY", - "name": "pcPrice", - "fill": "$text-primary", - "content": "499K", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "lbKkc", - "name": "pcPer", - "fill": "$text-tertiary", - "content": "/tháng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "i9xHO", - "name": "pcDesc", - "fill": "$text-tertiary", - "content": "For growing business chains", - "lineHeight": 1.5, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "rectangle", - "id": "GaBI4", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "KiK1Y", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "s5RvM", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "7e7A1", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "Lmf0e", - "name": "checkText", - "fill": "$text-secondary", - "content": "5 stores", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "pc2H0", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "JsYjG", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "UUmpR", - "name": "checkText", - "fill": "$text-secondary", - "content": "Unlimited transactions", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "jqWaK", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "6LR43", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "ULIlu", - "name": "checkText", - "fill": "$text-secondary", - "content": "Advanced analytics", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "3xz7n", - "name": "proPricingBtn", - "width": "fill_container", - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "6y0tm", - "name": "btnPIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-primary" - }, - { - "type": "text", - "id": "96nc7", - "name": "btnPText", - "fill": "$text-primary", - "content": "Try 14 days free", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - } - ] - } - ] - }, - { - "type": "frame", - "id": "PriceCard3", - "name": "examplePricingEnterprise", - "width": "fill_container", - "fill": "$bg-page", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 24, - "padding": 32, - "children": [ - { - "type": "frame", - "id": "We76w", - "name": "pcBadge", - "enabled": false, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 100, - "padding": [ - 4, - 10 - ], - "children": [ - { - "type": "text", - "id": "ttbZY", - "name": "pcBadgeText", - "fill": "$text-primary", - "content": "Phổ biến nhất", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "0aQSi", - "name": "pcTop", - "width": "fill_container", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "text", - "id": "aSefC", - "name": "pcName", - "fill": "$text-secondary", - "content": "Enterprise", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600", - "letterSpacing": 1 - }, - { - "type": "frame", - "id": "QJm3P", - "name": "pcPriceRow", - "gap": 4, - "alignItems": "end", - "children": [ - { - "type": "text", - "id": "PNKkF", - "name": "pcPrice", - "fill": "$text-primary", - "content": "Custom", - "fontFamily": "Roboto", - "fontSize": 36, - "fontWeight": "500", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "VHRx4", - "name": "pcPer", - "enabled": false, - "fill": "$text-tertiary", - "content": "/tháng", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "teqD3", - "name": "pcDesc", - "fill": "$text-tertiary", - "content": "For large enterprise chains", - "lineHeight": 1.5, - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "rectangle", - "id": "vbKaC", - "name": "pcDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "dBIlb", - "name": "pcFeats", - "width": "fill_container", - "layout": "vertical", - "gap": 14, - "children": [ - { - "type": "frame", - "id": "EXa0J", - "name": "pcF1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "U0aiJ", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "F221P", - "name": "checkText", - "fill": "$text-secondary", - "content": "Unlimited stores", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "DHLmw", - "name": "pcF2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "En6Un", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "ytc60", - "name": "checkText", - "fill": "$text-secondary", - "content": "API integration", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "zWEio", - "name": "pcF3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "P4YlO", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "seCtG", - "name": "checkText", - "fill": "$text-secondary", - "content": "Dedicated account manager", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "8129K", - "name": "pcBtn", - "width": "fill_container", - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "gap": 8, - "padding": [ - 14, - 24 - ], - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "kqsyZ", - "name": "btnSIcon", - "enabled": false, - "width": 16, - "height": 16, - "iconFontName": "arrow-right", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "koJzc", - "name": "btnSText", - "fill": "$text-primary", - "content": "Contact Sales", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "vQqcl", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "NH6gQ", - "name": "badgeText", - "fill": "$orange-primary", - "content": "FOOTER COMPONENTS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "FooterColRow", - "name": "footerColumnExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "gap": 48, - "padding": 40, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "FootCol1", - "name": "exampleFooterCol1", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "text", - "id": "jcBoY", - "name": "footColTitle", - "fill": "$text-primary", - "content": "Products", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "NX2A9", - "name": "footColL1", - "fill": "$text-tertiary", - "content": "POS System", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "qkmXd", - "name": "footColL2", - "fill": "$text-tertiary", - "content": "Loyalty Program", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "MqnX1", - "name": "footColL3", - "fill": "$text-tertiary", - "content": "Analytics", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "U5fbU", - "name": "footColL4", - "fill": "$text-tertiary", - "content": "Inventory", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "FootCol2", - "name": "exampleFooterCol2", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "text", - "id": "3f7yU", - "name": "footColTitle", - "fill": "$text-primary", - "content": "Industries", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "nUIva", - "name": "footColL1", - "fill": "$text-tertiary", - "content": "Restaurant & F&B", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "VMn3X", - "name": "footColL2", - "fill": "$text-tertiary", - "content": "Bar & Lounge", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "TYRQA", - "name": "footColL3", - "fill": "$text-tertiary", - "content": "Karaoke", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "Y1hlD", - "name": "footColL4", - "fill": "$text-tertiary", - "content": "Coffee Shop", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "FootCol3", - "name": "exampleFooterCol3", - "layout": "vertical", - "gap": 16, - "children": [ - { - "type": "text", - "id": "ynsnj", - "name": "footColTitle", - "fill": "$text-primary", - "content": "Support", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "600" - }, - { - "type": "text", - "id": "CxgY7", - "name": "footColL1", - "fill": "$text-tertiary", - "content": "Help Center", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "PNNws", - "name": "footColL2", - "fill": "$text-tertiary", - "content": "Contact", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "KTHFx", - "name": "footColL3", - "fill": "$text-tertiary", - "content": "Privacy Policy", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "F0e0G", - "name": "footColL4", - "fill": "$text-tertiary", - "content": "Terms of Use", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "LibHeader", - "name": "Library Header", - "width": "fill_container", - "layout": "vertical", - "gap": 16, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "LibLogo", - "name": "componentLibLogo", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "L1IHb", - "name": "logoDot", - "fill": "$orange-primary", - "width": 10, - "height": 10 - }, - { - "type": "text", - "id": "oAfvR", - "name": "logoText", - "fill": "$text-primary", - "content": "aPOS", - "fontFamily": "Roboto", - "fontSize": 22, - "fontWeight": "600", - "letterSpacing": 3 - } - ] - }, - { - "type": "text", - "id": "LibTitle", - "name": "libTitle", - "fill": "$text-primary", - "content": "aPOS Component Library", - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 48, - "fontWeight": "600", - "letterSpacing": -1 - }, - { - "type": "text", - "id": "LibDesc", - "name": "libDescription", - "fill": "$text-tertiary", - "textGrowth": "fixed-width", - "width": 700, - "content": "Design system components for aPOS - POS and loyalty management platform. All components are reusable and customizable.", - "lineHeight": 1.6, - "textAlign": "center", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "fBoMm", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "o5bXI", - "name": "badgeText", - "fill": "$orange-primary", - "content": "UTILITIES", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "UtilRow", - "name": "utilExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 32, - "padding": 40, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "CheckRow", - "name": "checkListRow", - "layout": "vertical", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "Check1", - "name": "exampleCheckItem1", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "VJGh3", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "VwkNy", - "name": "checkText", - "fill": "$text-secondary", - "content": "Feature check list item", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "Check2", - "name": "exampleCheckItem2", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "BrCzS", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "9qmDC", - "name": "checkText", - "fill": "$text-secondary", - "content": "Another check list item", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "Check3", - "name": "exampleCheckItem3", - "gap": 10, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "87yKj", - "name": "checkIcon", - "width": 16, - "height": 16, - "iconFontName": "check", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "JoqXu", - "name": "checkText", - "fill": "$text-secondary", - "content": "Third check list item", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "rectangle", - "id": "DividerEx", - "name": "exampleDivider", - "fill": "$border-subtle", - "width": "fill_container", - "height": 1 - }, - { - "type": "frame", - "id": "SocialRow", - "name": "socialIconsRow", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "Social1", - "name": "exampleFacebook", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "YXkpa", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "facebook", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - }, - { - "type": "frame", - "id": "Social2", - "name": "exampleInstagram", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "4UrP1", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "instagram", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - }, - { - "type": "frame", - "id": "Social3", - "name": "exampleYoutube", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "QG5mc", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "youtube", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - }, - { - "type": "frame", - "id": "Social4", - "name": "exampleLinkedIn", - "width": 36, - "height": 36, - "cornerRadius": 18, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "FNwhd", - "name": "socIcn", - "width": 18, - "height": 18, - "iconFontName": "linkedin", - "iconFontFamily": "lucide", - "fill": "$text-disabled" - } - ] - } - ] - }, - { - "type": "frame", - "id": "TrustEx", - "name": "exampleTrustStat", - "width": "fill_container", - "gap": 40, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "iObWZ", - "name": "tsLabel", - "fill": "$text-disabled", - "content": "Được tin dùng bởi 2,000+ doanh nghiệp", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "normal" - }, - { - "type": "rectangle", - "id": "M0mkC", - "name": "tsDivider1", - "fill": "$border-default", - "width": 1, - "height": 20 - }, - { - "type": "text", - "id": "wZxFi", - "name": "tsStat1", - "fill": "$text-tertiary", - "content": "50,000+ giao dịch/ngày", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - }, - { - "type": "rectangle", - "id": "9ZsNt", - "name": "tsDivider2", - "fill": "$border-default", - "width": 1, - "height": 20 - }, - { - "type": "text", - "id": "gpriC", - "name": "tsStat2", - "fill": "$text-tertiary", - "content": "99.9% uptime", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "jNieW", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "jVugF", - "name": "badgeText", - "fill": "$orange-primary", - "content": "NAVIGATION", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "NavExamples", - "name": "navExamples", - "width": "fill_container", - "layout": "vertical", - "gap": 20, - "children": [ - { - "type": "frame", - "id": "DesktopNav", - "name": "exampleDesktopNav", - "width": "fill_container", - "height": "fit_content(84)", - "padding": [ - 20, - 120 - ], - "justifyContent": "space_between", - "alignItems": "center" - }, - { - "type": "frame", - "id": "MobileNav", - "name": "exampleMobileNav", - "width": "fill_container", - "padding": [ - 16, - 20 - ], - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "EYcUX", - "name": "mNavLogo", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "ellipse", - "id": "c7KAp", - "name": "logoDot", - "fill": "$orange-primary", - "width": 10, - "height": 10 - }, - { - "type": "text", - "id": "9deBe", - "name": "logoText", - "fill": "$text-primary", - "content": "aPOS", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600", - "letterSpacing": 3 - } - ] - }, - { - "type": "icon_font", - "id": "yEnDr", - "name": "hamburgerIcon", - "width": 24, - "height": 24, - "iconFontName": "menu", - "iconFontFamily": "lucide", - "fill": "$text-primary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "NumpadFullBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "NumpadFullBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "POS NUMPAD", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "NumpadFullExamples", - "name": "numpadFullExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "padding": 40, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "NumpadFull", - "name": "Organism/Numpad/Full", - "reusable": true, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "gap": 8, - "padding": 16, - "children": [ - { - "type": "frame", - "id": "NumpadRow1", - "name": "row1", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "NK7", - "name": "key7", - "width": 64, - "height": 64, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NK7T", - "fill": "$text-primary", - "content": "7", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NK8", - "name": "key8", - "width": 64, - "height": 64, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NK8T", - "fill": "$text-primary", - "content": "8", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NK9", - "name": "key9", - "width": 64, - "height": 64, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NK9T", - "fill": "$text-primary", - "content": "9", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NKC", - "name": "keyClear", - "width": 64, - "height": 64, - "fill": "#EF444418", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NKCT", - "fill": "#EF4444", - "content": "C", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "700" - } - ] - } - ] - }, - { - "type": "frame", - "id": "NumpadRow2", - "name": "row2", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "NK4", - "name": "key4", - "width": 64, - "height": 64, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NK4T", - "fill": "$text-primary", - "content": "4", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NK5", - "name": "key5", - "width": 64, - "height": 64, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NK5T", - "fill": "$text-primary", - "content": "5", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NK6", - "name": "key6", - "width": 64, - "height": 64, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NK6T", - "fill": "$text-primary", - "content": "6", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NKBack", - "name": "keyBackspace", - "width": 64, - "height": 64, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "NKBackI", - "width": 24, - "height": 24, - "iconFontName": "delete", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "NumpadRow3", - "name": "row3", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "NK1", - "name": "key1", - "width": 64, - "height": 64, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NK1T", - "fill": "$text-primary", - "content": "1", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NK2", - "name": "key2", - "width": 64, - "height": 64, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NK2T", - "fill": "$text-primary", - "content": "2", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NK3", - "name": "key3", - "width": 64, - "height": 64, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NK3T", - "fill": "$text-primary", - "content": "3", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NKEnter", - "name": "keyEnter", - "width": 64, - "height": 136, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "NKEnterI", - "width": 28, - "height": 28, - "iconFontName": "corner-down-left", - "iconFontFamily": "lucide", - "fill": "$text-primary" - } - ] - } - ] - }, - { - "type": "frame", - "id": "NumpadRow4", - "name": "row4", - "gap": 8, - "children": [ - { - "type": "frame", - "id": "NK0", - "name": "key0", - "width": 136, - "height": 64, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NK0T", - "fill": "$text-primary", - "content": "0", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "NKDot", - "name": "keyDot", - "width": 64, - "height": 64, - "fill": "$bg-interactive", - "cornerRadius": 12, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "NKDotT", - "fill": "$text-primary", - "content": ".", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "PaymentMethodsBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "PaymentMethodsBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "PAYMENT METHODS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "PaymentMethodsExamples", - "name": "paymentMethodsExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "padding": 40, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "PaymentGrid", - "name": "Organism/PaymentMethods", - "reusable": true, - "gap": 16, - "children": [ - { - "type": "frame", - "id": "PayCash", - "name": "cashMethod", - "width": 120, - "height": 100, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": { - "thickness": 2, - "fill": "$orange-primary" - }, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PayCashIcon", - "width": 32, - "height": 32, - "iconFontName": "banknote", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "PayCashText", - "fill": "$text-primary", - "content": "Tiền mặt", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PayCard", - "name": "cardMethod", - "width": 120, - "height": 100, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PayCardIcon", - "width": 32, - "height": 32, - "iconFontName": "credit-card", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PayCardText", - "fill": "$text-primary", - "content": "Thẻ", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PayQR", - "name": "qrMethod", - "width": 120, - "height": 100, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PayQRIcon", - "width": 32, - "height": 32, - "iconFontName": "qr-code", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PayQRText", - "fill": "$text-primary", - "content": "QR Code", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "PayWallet", - "name": "walletMethod", - "width": 120, - "height": 100, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "PayWalletIcon", - "width": 32, - "height": 32, - "iconFontName": "wallet", - "iconFontFamily": "lucide", - "fill": "$text-secondary" - }, - { - "type": "text", - "id": "PayWalletText", - "fill": "$text-primary", - "content": "Ví điện tử", - "fontFamily": "Roboto", - "fontSize": 13, - "fontWeight": "500" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "DialogBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "DialogBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "DIALOGS & TOASTS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "DialogExamples", - "name": "dialogExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 32, - "padding": 40, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "ConfirmDialog", - "name": "Organism/Dialog/Confirm", - "reusable": true, - "width": 400, - "fill": "$bg-elevated", - "cornerRadius": 20, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "gap": 24, - "padding": 28, - "children": [ - { - "type": "frame", - "id": "ConfirmDialogHeader", - "name": "header", - "width": "fill_container", - "layout": "vertical", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ConfirmDialogIcon", - "width": 48, - "height": 48, - "iconFontName": "circle-alert", - "iconFontFamily": "lucide", - "fill": "$orange-primary" - }, - { - "type": "text", - "id": "ConfirmDialogTitle", - "name": "title", - "fill": "$text-primary", - "content": "Xác nhận thanh toán", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "600", - "textAlign": "center" - }, - { - "type": "text", - "id": "ConfirmDialogMessage", - "name": "message", - "fill": "$text-secondary", - "content": "Thanh toán đơn hàng 100,116₫ bằng Tiền mặt?", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal", - "textAlign": "center", - "lineHeight": 1.5 - } - ] - }, - { - "type": "frame", - "id": "ConfirmDialogActions", - "name": "actions", - "width": "fill_container", - "gap": 12, - "children": [ - { - "type": "frame", - "id": "ConfirmDialogCancel", - "name": "cancelBtn", - "width": "fill_container", - "height": 48, - "cornerRadius": 10, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ConfirmDialogCancelText", - "fill": "$text-secondary", - "content": "Hủy", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "ConfirmDialogConfirm", - "name": "confirmBtn", - "width": "fill_container", - "height": 48, - "fill": { - "type": "gradient", - "gradientType": "linear", - "enabled": true, - "rotation": 135, - "size": { - "height": 1 - }, - "colors": [ - { - "color": "#FF5C00", - "position": 0 - }, - { - "color": "#FF8A4C", - "position": 1 - } - ] - }, - "cornerRadius": 10, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "ConfirmDialogConfirmText", - "fill": "$text-primary", - "content": "Xác nhận", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "ToastSuccess", - "name": "Organism/Toast/Success", - "reusable": true, - "width": 400, - "fill": "#22C55E18", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$green-success" - }, - "gap": 12, - "padding": [ - 16, - 20 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ToastSuccessIcon", - "width": 24, - "height": 24, - "iconFontName": "check-circle", - "iconFontFamily": "lucide", - "fill": "$green-success" - }, - { - "type": "text", - "id": "ToastSuccessText", - "name": "message", - "fill": "$green-success", - "content": "Thanh toán thành công!", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "ToastError", - "name": "Organism/Toast/Error", - "reusable": true, - "width": 400, - "fill": "#EF444418", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "#EF4444" - }, - "gap": 12, - "padding": [ - 16, - 20 - ], - "alignItems": "center", - "children": [ - { - "type": "icon_font", - "id": "ToastErrorIcon", - "width": 24, - "height": 24, - "iconFontName": "x-circle", - "iconFontFamily": "lucide", - "fill": "#EF4444" - }, - { - "type": "text", - "id": "ToastErrorText", - "name": "message", - "fill": "#EF4444", - "content": "Giao dịch thất bại. Vui lòng thử lại.", - "fontFamily": "Roboto", - "fontSize": 15, - "fontWeight": "500" - } - ] - } - ] - }, - { - "type": "frame", - "id": "ApptBadge", - "name": "shBadge", - "fill": "#14B8A618", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "ApptBadgeText", - "name": "badgeText", - "fill": "$spa-primary", - "content": "💆 APPOINTMENT", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "ApptExamples", - "name": "apptExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "padding": 40, - "gap": 24, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "SlotAvailable", - "name": "Organism/Appointment/Available", - "reusable": true, - "width": 140, - "height": 80, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { - "thickness": 1, - "fill": "$border-default", - "dashPattern": [ - 4, - 4 - ] - }, - "layout": "vertical", - "gap": 4, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "SlotAvailTime", - "name": "slotTime", - "fill": "$text-primary", - "content": "09:00", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "500" - }, - { - "type": "text", - "id": "SlotAvailLabel", - "fill": "$green-success", - "content": "Có slot", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "SlotBooked", - "name": "Organism/Appointment/Booked", - "reusable": true, - "width": 140, - "height": 80, - "fill": "$spa-primary", - "cornerRadius": 12, - "layout": "vertical", - "padding": 12, - "gap": 4, - "alignItems": "flex_start", - "children": [ - { - "type": "text", - "id": "SlotBookTime", - "name": "timeRange", - "fill": "$text-muted", - "content": "10:00 - 11:30", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "SlotBookCust", - "name": "customerName", - "fill": "$text-primary", - "content": "Chị Lan", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "text", - "id": "SlotBookSvc", - "name": "serviceName", - "fill": "$text-muted", - "content": "Facial 90 phút", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "SlotInProgress", - "name": "Organism/Appointment/InProgress", - "reusable": true, - "width": 140, - "height": 80, - "fill": "$spa-dark", - "cornerRadius": 12, - "stroke": { - "thickness": 2, - "fill": "$green-success" - }, - "layout": "vertical", - "padding": 12, - "gap": 4, - "alignItems": "flex_start", - "children": [ - { - "type": "frame", - "id": "SlotProgTop", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "SlotProgStatus", - "fill": "$green-success", - "content": "ĐANG LÀM", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "700" - }, - { - "type": "text", - "id": "SlotProgRemain", - "fill": "$text-muted", - "content": "45p còn", - "fontFamily": "Roboto", - "fontSize": 10, - "fontWeight": "normal" - } - ] - }, - { - "type": "text", - "id": "SlotProgCust", - "name": "customerName", - "fill": "$text-primary", - "content": "Chị Hương", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "text", - "id": "SlotProgStaff", - "name": "therapist", - "fill": "$text-muted", - "content": "NV: Ngọc", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "RmGridBadge", - "name": "shBadge", - "fill": "#EC489918", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "RmGridBadgeText", - "name": "badgeText", - "fill": "$karaoke-primary", - "content": "🎤 ROOM GRID", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "RoomGridExamples", - "name": "roomGridExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "padding": 40, - "gap": 24, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "RoomAvailable", - "name": "Organism/Room/Available", - "reusable": true, - "width": 160, - "height": 120, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": { - "thickness": 2, - "fill": "$border-default" - }, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "RmAvailIcon", - "content": "🎤", - "fontSize": 24 - }, - { - "type": "text", - "id": "RmAvailName", - "name": "roomName", - "fill": "$text-primary", - "content": "Phòng VIP 01", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - }, - { - "type": "text", - "id": "RmAvailCap", - "name": "capacity", - "fill": "$text-secondary", - "content": "8-12 người", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "RoomOccupied", - "name": "Organism/Room/Occupied", - "reusable": true, - "width": 160, - "height": 120, - "fill": "$karaoke-primary", - "cornerRadius": 16, - "layout": "vertical", - "justifyContent": "space_between", - "padding": 12, - "children": [ - { - "type": "frame", - "id": "RmOccTop", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "RmOccName", - "name": "roomName", - "fill": "$text-primary", - "content": "VIP 02", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "600" - }, - { - "type": "text", - "id": "RmOccTimer", - "name": "sessionTimer", - "fill": "$text-primary", - "content": "01:45:22", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "RmOccMid", - "layout": "vertical", - "gap": 4, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "RmOccAmount", - "name": "totalAmount", - "fill": "$text-primary", - "content": "1,250,000đ", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "700" - }, - { - "type": "text", - "id": "RmOccRate", - "name": "hourlyRate", - "fill": "$text-muted", - "content": "Giờ: 150K/h", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "RmOccActions", - "gap": 8, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "RmOccAddBtn", - "width": 60, - "height": 28, - "fill": "#FFFFFF33", - "cornerRadius": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "RmOccAddTxt", - "fill": "$text-primary", - "content": "+ Thêm", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "RmOccEndBtn", - "width": 60, - "height": 28, - "fill": "#FFFFFF33", - "cornerRadius": 6, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "RmOccEndTxt", - "fill": "$text-primary", - "content": "Kết thúc", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "SvcDispBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "SvcDispBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "SERVICE DISPLAYS", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "KitchenDispExamples", - "name": "kitchenDisplayExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "gap": 32, - "padding": 40, - "alignItems": "center", - "children": [ - { - "type": "frame", - "id": "KitchenTicket", - "name": "Organism/Display/KitchenTicket", - "reusable": true, - "width": 280, - "fill": "$bg-elevated", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "children": [ - { - "type": "frame", - "id": "KTHeader", - "name": "ticketHeader", - "width": "fill_container", - "fill": "$orange-primary", - "padding": 12, - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "KTOrderNum", - "name": "orderNumber", - "fill": "$text-primary", - "content": "#0042", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "700" - }, - { - "type": "text", - "id": "KTTableInfo", - "name": "tableInfo", - "fill": "$text-muted", - "content": "Bàn 07", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "500" - }, - { - "type": "text", - "id": "KTElapsed", - "name": "elapsedTime", - "fill": "$text-primary", - "content": "5:32", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "KTItems", - "name": "ticketItems", - "width": "fill_container", - "layout": "vertical", - "padding": 12, - "gap": 8, - "children": [ - { - "type": "frame", - "id": "KTItem1", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "KTItem1Name", - "fill": "$text-primary", - "content": "2x Phở bò tái", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "500" - }, - { - "type": "text", - "id": "KTItem1Note", - "fill": "$status-warning", - "content": "Ít hành", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "KTItem2", - "width": "fill_container", - "children": [ - { - "type": "text", - "id": "KTItem2Name", - "fill": "$text-primary", - "content": "1x Bún chả", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "500" - } - ] - }, - { - "type": "frame", - "id": "KTItem3", - "width": "fill_container", - "justifyContent": "space_between", - "children": [ - { - "type": "text", - "id": "KTItem3Name", - "fill": "$text-secondary", - "content": "1x Nước cam", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "KTItem3Station", - "fill": "$text-tertiary", - "content": "Bar", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "KTActions", - "name": "ticketActions", - "padding": 12, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "KTDoneBtn", - "width": 100, - "height": 36, - "fill": "$green-success", - "cornerRadius": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "KTDoneTxt", - "fill": "$text-primary", - "content": "✓ Xong", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "600" - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "QueueDispRow", - "gap": 24, - "children": [ - { - "type": "frame", - "id": "QueueNumber", - "name": "Organism/Display/QueueNumber", - "reusable": true, - "width": 200, - "height": 160, - "fill": "$bg-elevated", - "cornerRadius": 20, - "stroke": { - "thickness": 1, - "fill": "$border-default" - }, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "QNLabel", - "fill": "$text-secondary", - "content": "Số thứ tự", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "QNNumber", - "name": "queueNumber", - "fill": "$spa-primary", - "content": "A-042", - "fontFamily": "Roboto", - "fontSize": 48, - "fontWeight": "700" - }, - { - "type": "text", - "id": "QNService", - "name": "serviceType", - "fill": "$text-primary", - "content": "Facial", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "QueueCalling", - "name": "Organism/Display/QueueCalling", - "reusable": true, - "width": 300, - "height": 120, - "fill": "$green-success", - "cornerRadius": 20, - "layout": "vertical", - "gap": 8, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "QCLabel", - "fill": "$text-primary", - "content": "🔔 MỜI KHÁCH", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "700" - }, - { - "type": "text", - "id": "QCNumber", - "name": "callingNumber", - "fill": "$text-primary", - "content": "A-038", - "fontFamily": "Roboto", - "fontSize": 56, - "fontWeight": "700" - }, - { - "type": "text", - "id": "QCStation", - "name": "station", - "fill": "$text-muted", - "content": "Phòng 3 - Ngọc", - "fontFamily": "Roboto", - "fontSize": 16, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "RoomDisplay", - "name": "Organism/Display/RoomStatus", - "reusable": true, - "width": 400, - "height": 300, - "fill": "$bg-surface", - "cornerRadius": 20, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "justifyContent": "space_between", - "padding": 24, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "RDName", - "name": "roomName", - "fill": "$text-primary", - "content": "PHÒNG VIP 01", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "700" - }, - { - "type": "frame", - "id": "RDTimerBox", - "layout": "vertical", - "gap": 8, - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "RDTimerLabel", - "fill": "$text-secondary", - "content": "THỜI GIAN", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "RDTimer", - "name": "sessionTimer", - "fill": "$karaoke-primary", - "content": "02:15:42", - "fontFamily": "Roboto", - "fontSize": 64, - "fontWeight": "700" - } - ] - }, - { - "type": "frame", - "id": "RDStats", - "gap": 24, - "children": [ - { - "type": "frame", - "id": "RDTotalBox", - "layout": "vertical", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "RDTotalLabel", - "fill": "$text-secondary", - "content": "Tổng tiền", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "RDTotalVal", - "name": "totalAmount", - "fill": "$text-primary", - "content": "1,850,000đ", - "fontFamily": "Roboto", - "fontSize": 24, - "fontWeight": "600" - } - ] - }, - { - "type": "frame", - "id": "RDPendingBox", - "layout": "vertical", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "RDPendingLabel", - "fill": "$text-secondary", - "content": "Order mới", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "normal" - }, - { - "type": "text", - "id": "RDPendingVal", - "name": "pendingItems", - "fill": "$status-warning", - "content": "3 món", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "500" - } - ] - } - ] - } - ] - } - ] - }, - { - "type": "frame", - "id": "TblMapBadge", - "name": "shBadge", - "fill": "#FF5C0018", - "cornerRadius": 100, - "padding": [ - 6, - 14 - ], - "children": [ - { - "type": "text", - "id": "TblMapBadgeText", - "name": "badgeText", - "fill": "$orange-primary", - "content": "🍽️ TABLE MAP", - "fontFamily": "Roboto", - "fontSize": 11, - "fontWeight": "500", - "letterSpacing": 2 - } - ] - }, - { - "type": "frame", - "id": "TableMapExamples", - "name": "tableMapExamples", - "width": "fill_container", - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "padding": 40, - "gap": 24, - "justifyContent": "center", - "children": [ - { - "type": "frame", - "id": "TableAvailable", - "name": "Organism/Table/Available", - "reusable": true, - "width": 100, - "height": 100, - "fill": "$bg-elevated", - "cornerRadius": 12, - "stroke": { - "thickness": 2, - "fill": "$border-default" - }, - "layout": "vertical", - "gap": 4, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "TblAvailNum", - "name": "tableNumber", - "fill": "$text-primary", - "content": "T01", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "TblAvailSeats", - "name": "seatCount", - "fill": "$text-secondary", - "content": "4 ghế", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "TableOccupied", - "name": "Organism/Table/Occupied", - "reusable": true, - "width": 100, - "height": 100, - "fill": "$orange-primary", - "cornerRadius": 12, - "layout": "vertical", - "gap": 4, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "TblOccNum", - "name": "tableNumber", - "fill": "$text-primary", - "content": "T02", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "TblOccAmount", - "name": "orderAmount", - "fill": "$text-muted", - "content": "450K", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "text", - "id": "TblOccTime", - "name": "elapsedTime", - "fill": "#FFFFFF99", - "content": "45 phút", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "TableReserved", - "name": "Organism/Table/Reserved", - "reusable": true, - "width": 100, - "height": 100, - "fill": "#F59E0B18", - "cornerRadius": 12, - "stroke": { - "thickness": 2, - "fill": "$status-warning" - }, - "layout": "vertical", - "gap": 4, - "justifyContent": "center", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "TblResNum", - "name": "tableNumber", - "fill": "$status-warning", - "content": "T03", - "fontFamily": "Roboto", - "fontSize": 18, - "fontWeight": "600" - }, - { - "type": "text", - "id": "TblResTime", - "name": "reserveTime", - "fill": "$text-secondary", - "content": "19:00", - "fontFamily": "Roboto", - "fontSize": 14, - "fontWeight": "500" - }, - { - "type": "text", - "id": "TblResName", - "name": "guestName", - "fill": "$text-tertiary", - "content": "Anh Minh", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - } - ] - }, - { - "type": "frame", - "id": "TableMapContainer", - "name": "Organism/TableMap/Container", - "reusable": true, - "width": 600, - "height": 400, - "fill": "$bg-surface", - "cornerRadius": 16, - "stroke": { - "thickness": 1, - "fill": "$border-subtle" - }, - "layout": "vertical", - "padding": 20, - "gap": 16, - "children": [ - { - "type": "frame", - "id": "TblMapContHeader", - "name": "header", - "width": "fill_container", - "justifyContent": "space_between", - "alignItems": "center", - "children": [ - { - "type": "text", - "id": "TblMapContTitle", - "fill": "$text-primary", - "content": "Sơ đồ bàn", - "fontFamily": "Roboto", - "fontSize": 20, - "fontWeight": "600" - }, - { - "type": "frame", - "id": "TblMapLegend", - "name": "legend", - "gap": 16, - "children": [ - { - "type": "frame", - "id": "LegAvail", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "rectangle", - "id": "LegAvailDot", - "width": 12, - "height": 12, - "fill": "$bg-elevated", - "cornerRadius": 2 - }, - { - "type": "text", - "id": "LegAvailTxt", - "fill": "$text-secondary", - "content": "Trống", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "LegOcc", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "rectangle", - "id": "LegOccDot", - "width": 12, - "height": 12, - "fill": "$orange-primary", - "cornerRadius": 2 - }, - { - "type": "text", - "id": "LegOccTxt", - "fill": "$text-secondary", - "content": "Đang phục vụ", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - }, - { - "type": "frame", - "id": "LegRes", - "gap": 6, - "alignItems": "center", - "children": [ - { - "type": "rectangle", - "id": "LegResDot", - "width": 12, - "height": 12, - "fill": "$status-warning", - "cornerRadius": 2 - }, - { - "type": "text", - "id": "LegResTxt", - "fill": "$text-secondary", - "content": "Đã đặt", - "fontFamily": "Roboto", - "fontSize": 12, - "fontWeight": "normal" - } - ] - } - ] - } - ] - } - ] - } - ], - "x": 4008, - "y": 0 - } - ], - "variables": { - "bg-page": { - "type": "color", - "value": "#0A0A0B" - }, - "bg-surface": { - "type": "color", - "value": "#111113" - }, - "bg-elevated": { - "type": "color", - "value": "#1A1A1D" - }, - "bg-interactive": { - "type": "color", - "value": "#2A2A2E" - }, - "bg-hover": { - "type": "color", - "value": "#3A3A3E" - }, - "bg-active": { - "type": "color", - "value": "#4A4A4E" - }, - "text-primary": { - "type": "color", - "value": "#FFFFFF" - }, - "text-secondary": { - "type": "color", - "value": "#ADADB0" - }, - "text-tertiary": { - "type": "color", - "value": "#8B8B90" - }, - "text-muted": { - "type": "color", - "value": "#6B6B70" - }, - "text-disabled": { - "type": "color", - "value": "#4B4B50" - }, - "text-inverse": { - "type": "color", - "value": "#0A0A0B" - }, - "border-default": { - "type": "color", - "value": "#2A2A2E" - }, - "border-subtle": { - "type": "color", - "value": "#1F1F23" - }, - "border-strong": { - "type": "color", - "value": "#4A4A4E" - }, - "border-focus": { - "type": "color", - "value": "#FF5C00" - }, - "accent-primary": { - "type": "color", - "value": "#FF5C00" - }, - "accent-primary-hover": { - "type": "color", - "value": "#FF7A33" - }, - "accent-primary-active": { - "type": "color", - "value": "#E55200" - }, - "orange-primary": { - "type": "color", - "value": "#FF5C00" - }, - "orange-light": { - "type": "color", - "value": "#FF8A4C" - }, - "status-success": { - "type": "color", - "value": "#22C55E" - }, - "status-success-bg": { - "type": "color", - "value": "#22C55E1A" - }, - "status-warning": { - "type": "color", - "value": "#F59E0B" - }, - "status-warning-bg": { - "type": "color", - "value": "#F59E0B1A" - }, - "status-error": { - "type": "color", - "value": "#EF4444" - }, - "status-error-bg": { - "type": "color", - "value": "#EF44441A" - }, - "status-info": { - "type": "color", - "value": "#3B82F6" - }, - "status-info-bg": { - "type": "color", - "value": "#3B82F61A" - }, - "green-success": { - "type": "color", - "value": "#22C55E" - }, - "vertical-restaurant": { - "type": "color", - "value": "#FF5C00" - }, - "vertical-bar": { - "type": "color", - "value": "#8B5CF6" - }, - "vertical-karaoke": { - "type": "color", - "value": "#EC4899" - }, - "vertical-spa": { - "type": "color", - "value": "#14B8A6" - }, - "vertical-retail": { - "type": "color", - "value": "#3B82F6" - }, - "space-1": { - "type": "number", - "value": 4 - }, - "space-2": { - "type": "number", - "value": 8 - }, - "space-3": { - "type": "number", - "value": 12 - }, - "space-4": { - "type": "number", - "value": 16 - }, - "space-5": { - "type": "number", - "value": 20 - }, - "space-6": { - "type": "number", - "value": 24 - }, - "space-8": { - "type": "number", - "value": 32 - }, - "space-10": { - "type": "number", - "value": 40 - }, - "space-12": { - "type": "number", - "value": 48 - }, - "radius-sm": { - "type": "number", - "value": 4 - }, - "radius-md": { - "type": "number", - "value": 8 - }, - "radius-lg": { - "type": "number", - "value": 12 - }, - "radius-xl": { - "type": "number", - "value": 16 - }, - "radius-full": { - "type": "number", - "value": 9999 - }, - "text-xs": { - "type": "number", - "value": 12 - }, - "text-sm": { - "type": "number", - "value": 14 - }, - "text-base": { - "type": "number", - "value": 16 - }, - "text-lg": { - "type": "number", - "value": 18 - }, - "text-xl": { - "type": "number", - "value": 20 - }, - "text-2xl": { - "type": "number", - "value": 24 - }, - "text-3xl": { - "type": "number", - "value": 30 - }, - "text-4xl": { - "type": "number", - "value": 36 - }, - "font-normal": { - "type": "string", - "value": "400" - }, - "font-medium": { - "type": "string", - "value": "500" - }, - "font-semibold": { - "type": "string", - "value": "600" - }, - "font-bold": { - "type": "string", - "value": "700" - }, - "shadow-sm": { - "type": "string", - "value": "0 1px 2px rgba(0,0,0,0.3)" - }, - "shadow-md": { - "type": "string", - "value": "0 4px 6px rgba(0,0,0,0.4)" - }, - "shadow-lg": { - "type": "string", - "value": "0 10px 15px rgba(0,0,0,0.5)" - }, - "shadow-xl": { - "type": "string", - "value": "0 20px 25px rgba(0,0,0,0.6)" - } - } -} \ No newline at end of file