feat: introduce tPOS admin panel for store, product, staff, and role management with accompanying documentation.
This commit is contained in:
Ho Ngoc Hai
712
pencil-design/docs/admin-workflow-guide.md
Normal file
712
pencil-design/docs/admin-workflow-guide.md
Normal file
@@ -0,0 +1,712 @@
|
||||
# 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)
|
||||
404
pencil-design/src/pages/tPOS/admin/admin-dashboard.pen
Normal file
404
pencil-design/src/pages/tPOS/admin/admin-dashboard.pen
Normal file
@@ -0,0 +1,404 @@
|
||||
{
|
||||
"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"}
|
||||
}
|
||||
}
|
||||
244
pencil-design/src/pages/tPOS/admin/product-catalog.pen
Normal file
244
pencil-design/src/pages/tPOS/admin/product-catalog.pen
Normal file
@@ -0,0 +1,244 @@
|
||||
{
|
||||
"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", "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": "PCNavProd", "width": "fill_container", "height": 44, "fill": "$orange-primary", "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"}
|
||||
]},
|
||||
{"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": "text", "id": "PCNavL3", "fill": "$text-tertiary", "content": "KINH DOANH", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"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": "text", "id": "PCNavL4", "fill": "$text-tertiary", "content": "HỆ THỐNG", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"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},
|
||||
{"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},
|
||||
{"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},
|
||||
{"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},
|
||||
{"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},
|
||||
{"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},
|
||||
{"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}
|
||||
]},
|
||||
{"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}
|
||||
]},
|
||||
{"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}
|
||||
]},
|
||||
{"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}
|
||||
]},
|
||||
{"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"}
|
||||
}
|
||||
}
|
||||
244
pencil-design/src/pages/tPOS/admin/role-permissions.pen
Normal file
244
pencil-design/src/pages/tPOS/admin/role-permissions.pen
Normal file
@@ -0,0 +1,244 @@
|
||||
{
|
||||
"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", "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": "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, "fill": "$orange-primary", "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"}
|
||||
]},
|
||||
{"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"}
|
||||
}
|
||||
}
|
||||
353
pencil-design/src/pages/tPOS/admin/staff-directory.pen
Normal file
353
pencil-design/src/pages/tPOS/admin/staff-directory.pen
Normal file
@@ -0,0 +1,353 @@
|
||||
{
|
||||
"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", "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": "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, "fill": "$orange-primary", "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"}
|
||||
]},
|
||||
{"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": "text", "id": "SDNavL3", "fill": "$text-tertiary", "content": "KINH DOANH", "fontFamily": "Roboto", "fontSize": 10, "fontWeight": "700", "padding": [16, 12, 8, 12]},
|
||||
{"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", "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": "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"}
|
||||
}
|
||||
}
|
||||
206
pencil-design/src/pages/tPOS/admin/store-create.pen
Normal file
206
pencil-design/src/pages/tPOS/admin/store-create.pen
Normal file
@@ -0,0 +1,206 @@
|
||||
{
|
||||
"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, "fill": "$orange-primary", "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"}
|
||||
]},
|
||||
{"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": "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},
|
||||
{"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},
|
||||
{"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},
|
||||
{"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},
|
||||
{"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},
|
||||
{"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"}
|
||||
}
|
||||
}
|
||||
336
pencil-design/src/pages/tPOS/admin/store-list.pen
Normal file
336
pencil-design/src/pages/tPOS/admin/store-list.pen
Normal file
@@ -0,0 +1,336 @@
|
||||
{
|
||||
"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, "fill": "$orange-primary", "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"}
|
||||
]},
|
||||
{"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": "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": "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"}
|
||||
}
|
||||
}
|
||||
221
pencil-design/src/pages/tPOS/admin/store-settings.pen
Normal file
221
pencil-design/src/pages/tPOS/admin/store-settings.pen
Normal file
@@ -0,0 +1,221 @@
|
||||
{
|
||||
"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": "$text-secondary"},
|
||||
{"type": "text", "id": "SSNavStoresT", "fill": "$text-secondary", "content": "Quản lý cửa hàng", "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, "fill": "$orange-primary", "cornerRadius": 10, "padding": [0, 12], "gap": 12, "alignItems": "center", "children": [
|
||||
{"type": "icon_font", "id": "SSNavSetI", "width": 20, "height": 20, "iconFontName": "settings", "iconFontFamily": "lucide", "fill": "#FFFFFF"},
|
||||
{"type": "text", "id": "SSNavSetT", "fill": "#FFFFFF", "content": "Cài đặt", "fontFamily": "Roboto", "fontSize": 14, "fontWeight": "600"}
|
||||
]}
|
||||
]},
|
||||
{"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"}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user