diff --git a/pencil-design/docs/admin-workflow-guide.md b/pencil-design/docs/admin-workflow-guide.md new file mode 100644 index 00000000..a247dddb --- /dev/null +++ b/pencil-design/docs/admin-workflow-guide.md @@ -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) diff --git a/pencil-design/src/pages/tPOS/admin/admin-dashboard.pen b/pencil-design/src/pages/tPOS/admin/admin-dashboard.pen new file mode 100644 index 00000000..c490f1ff --- /dev/null +++ b/pencil-design/src/pages/tPOS/admin/admin-dashboard.pen @@ -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"} + } +} diff --git a/pencil-design/src/pages/tPOS/admin/product-catalog.pen b/pencil-design/src/pages/tPOS/admin/product-catalog.pen new file mode 100644 index 00000000..2381bae9 --- /dev/null +++ b/pencil-design/src/pages/tPOS/admin/product-catalog.pen @@ -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"} + } +} diff --git a/pencil-design/src/pages/tPOS/admin/role-permissions.pen b/pencil-design/src/pages/tPOS/admin/role-permissions.pen new file mode 100644 index 00000000..f1e94e7b --- /dev/null +++ b/pencil-design/src/pages/tPOS/admin/role-permissions.pen @@ -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"} + } +} diff --git a/pencil-design/src/pages/tPOS/admin/staff-directory.pen b/pencil-design/src/pages/tPOS/admin/staff-directory.pen new file mode 100644 index 00000000..c34d96b4 --- /dev/null +++ b/pencil-design/src/pages/tPOS/admin/staff-directory.pen @@ -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"} + } +} diff --git a/pencil-design/src/pages/tPOS/admin/store-create.pen b/pencil-design/src/pages/tPOS/admin/store-create.pen new file mode 100644 index 00000000..8c881dd2 --- /dev/null +++ b/pencil-design/src/pages/tPOS/admin/store-create.pen @@ -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"} + } +} diff --git a/pencil-design/src/pages/tPOS/admin/store-list.pen b/pencil-design/src/pages/tPOS/admin/store-list.pen new file mode 100644 index 00000000..038d7d25 --- /dev/null +++ b/pencil-design/src/pages/tPOS/admin/store-list.pen @@ -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"} + } +} diff --git a/pencil-design/src/pages/tPOS/admin/store-settings.pen b/pencil-design/src/pages/tPOS/admin/store-settings.pen new file mode 100644 index 00000000..a5e090c7 --- /dev/null +++ b/pencil-design/src/pages/tPOS/admin/store-settings.pen @@ -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"} + } +}