# LANDING PAGE FEATURE - TASK TRACKING

> **Tính năng:** Tạo Landing Page bán hàng online cho quảng cáo
> **Ngày bắt đầu:** 28/12/2024
> **Trạng thái:** 🔄 Đang thực hiện

---

## 📋 TỔNG QUAN TÍNH NĂNG

Landing Page là tính năng cho phép shop tạo các trang bán hàng độc lập để:
- Chạy quảng cáo trên Facebook, Google, TikTok...
- Khách hàng có thể mua hàng trực tiếp bằng cách điền form
- Theo dõi đơn hàng từ Landing Page riêng biệt
- Tùy chỉnh giao diện theo sản phẩm/chiến dịch

---

## 📊 TIẾN ĐỘ TỔNG QUAN

| Module | Mô tả | Trạng thái | Tiến độ |
|--------|-------|------------|---------|
| Phase 1 | Database & Models | ✅ Hoàn thành | 100% |
| Phase 2 | Backend API | ✅ Hoàn thành | 100% |
| Phase 3 | Shop Frontend - Quản lý Landing Page | ✅ Hoàn thành | 100% |
| Phase 4 | Shop Frontend - Quản lý Order Landing Page | ✅ Hoàn thành | 100% |
| Phase 5 | Public Landing Page (Customer View) | ✅ Hoàn thành | 100% |
| Phase 6 | Admin - Quản lý Landing Page | ✅ Hoàn thành | 100% |
| Phase 7 | Statistics & Analytics | ✅ Hoàn thành | 100% |

---

## 🗃️ PHASE 1: DATABASE & MODELS ✅

### 1.1 Migration: `landing_pages` table ✅
- [x] `id` - Primary key
- [x] `shop_id` - FK to shops
- [x] `name` - Tên landing page (internal)
- [x] `slug` - URL slug (unique per shop)
- [x] `title` - Tiêu đề hiển thị
- [x] `description` - Mô tả ngắn (meta description)
- [x] `logo` - Logo cho landing page (nullable)
- [x] `favicon` - Favicon (nullable)
- [x] `theme` - JSON (màu sắc, font, style)
- [x] `header_config` - JSON (header settings)
- [x] `footer_config` - JSON (footer settings)
- [x] `custom_css` - Custom CSS (nullable)
- [x] `custom_js` - Custom JS (nullable) 
- [x] `seo_title` - SEO title
- [x] `seo_description` - SEO description
- [x] `seo_keywords` - SEO keywords
- [x] `og_image` - Open Graph image
- [x] `facebook_pixel` - Facebook Pixel ID
- [x] `google_analytics` - GA4 ID
- [x] `tiktok_pixel` - TikTok Pixel ID
- [x] `form_config` - JSON (cấu hình form: fields required, labels...)
- [x] `success_message` - Thông báo sau khi đặt hàng
- [x] `redirect_url` - URL redirect sau khi đặt hàng (optional)
- [x] `is_active` - Trạng thái (cho shop enable/disable)
- [x] `is_approved` - Admin đã duyệt (mặc định true)
- [x] `rejection_reason` - Lý do từ chối (nếu bị reject)
- [x] `views_count` - Lượt xem
- [x] `orders_count` - Số đơn hàng (cached)
- [x] `expires_at` - Ngày hết hạn (nullable)
- [x] `timestamps`
- [x] `soft_deletes`

### 1.2 Migration: `landing_page_products` table (Pivot) ✅
- [x] `id` - Primary key
- [x] `landing_page_id` - FK
- [x] `product_id` - FK
- [x] `display_order` - Thứ tự hiển thị
- [x] `custom_name` - Tên tùy chỉnh (nullable)
- [x] `custom_price` - Giá tùy chỉnh (nullable, cho flash sale)
- [x] `custom_description` - Mô tả tùy chỉnh (nullable)
- [x] `custom_image` - Ảnh tùy chỉnh (nullable)
- [x] `is_featured` - Sản phẩm nổi bật

### 1.3 Migration: `landing_page_sections` table ✅
- [x] `id` - Primary key
- [x] `landing_page_id` - FK
- [x] `type` - Loại section (hero, features, testimonials, cta, gallery, countdown...)
- [x] `title` - Tiêu đề section
- [x] `content` - JSON content
- [x] `display_order` - Thứ tự
- [x] `is_active` - Hiển thị hay không

### 1.4 Migration: `landing_page_orders` table ✅
- [x] `id` - Primary key
- [x] `shop_id` - FK
- [x] `landing_page_id` - FK
- [x] `product_id` - FK (sản phẩm chính)
- [x] `order_number` - Mã đơn (LP-YYMMDD-XXXX)
- [x] `customer_name` - Tên KH
- [x] `customer_phone` - SĐT KH
- [x] `customer_email` - Email (optional)
- [x] `customer_address` - Địa chỉ
- [x] `province` - Tỉnh/TP
- [x] `district` - Quận/Huyện
- [x] `ward` - Phường/Xã
- [x] `quantity` - Số lượng
- [x] `unit_price` - Đơn giá
- [x] `total` - Tổng tiền
- [x] `notes` - Ghi chú từ KH
- [x] `status` - pending, confirmed, processing, shipping, completed, cancelled, returned
- [x] `shipping_carrier` - Đơn vị vận chuyển
- [x] `shipping_code` - Mã vận đơn
- [x] `tracking_url` - Link tracking
- [x] `shipping_fee` - Phí ship
- [x] `cod_amount` - Tiền thu hộ COD
- [x] `confirmed_at` - Thời gian xác nhận
- [x] `shipped_at` - Thời gian giao hàng
- [x] `completed_at` - Thời gian hoàn thành
- [x] `cancelled_at` - Thời gian hủy
- [x] `cancel_reason` - Lý do hủy
- [x] `internal_notes` - Ghi chú nội bộ
- [x] `utm_source` - UTM Source (tracking)
- [x] `utm_medium` - UTM Medium
- [x] `utm_campaign` - UTM Campaign
- [x] `utm_content` - UTM Content
- [x] `ip_address` - IP đặt hàng
- [x] `user_agent` - User agent
- [x] `timestamps`
- [x] `soft_deletes`

### 1.5 Migration: `landing_page_order_items` table ✅
- [x] `id` - Primary key
- [x] `landing_page_order_id` - FK
- [x] `product_id` - FK
- [x] `product_name` - Snapshot tên SP
- [x] `product_sku` - Snapshot SKU
- [x] `quantity` - Số lượng
- [x] `unit_price` - Đơn giá
- [x] `total` - Tổng tiền

### 1.6 Migration: `landing_page_logs` table (Audit log) ✅
- [x] `id` - Primary key
- [x] `landing_page_order_id` - FK
- [x] `user_id` - FK (nullable - nếu hệ thống tự động thì null)
- [x] `action` - created, status_changed, tracking_updated, cancelled...
- [x] `old_value` - JSON (giá trị cũ)
- [x] `new_value` - JSON (giá trị mới)
- [x] `notes` - Ghi chú
- [x] `timestamps`

### 1.7 Eloquent Models ✅
- [x] `LandingPage` model
- [x] `LandingPageProduct` model (pivot)
- [x] `LandingPageSection` model
- [x] `LandingPageOrder` model
- [x] `LandingPageOrderItem` model
- [x] `LandingPageLog` model

---

## 🔧 PHASE 2: BACKEND API ✅

### 2.1 Services ✅
- [x] `LandingPageService` - CRUD Landing Page
- [x] `LandingPageOrderService` - Xử lý đơn hàng LP
- [x] `LandingPageStatisticsService` - Thống kê

### 2.2 Controllers (Shop) ✅
- [x] `LandingPageController`
  - [x] `index()` - Danh sách LP của shop
  - [x] `store()` - Tạo mới LP
  - [x] `show()` - Chi tiết LP
  - [x] `update()` - Cập nhật LP
  - [x] `destroy()` - Soft delete LP
  - [x] `duplicate()` - Nhân bản LP
  - [x] `toggleActive()` - Bật/tắt LP

- [x] `LandingPageOrderController`
  - [x] `index()` - Danh sách đơn hàng (có filter)
  - [x] `show()` - Chi tiết đơn
  - [x] `updateStatus()` - Cập nhật trạng thái
  - [x] `updateShipping()` - Cập nhật vận chuyển
  - [x] `addNote()` - Thêm ghi chú
  - [x] `export()` - Xuất Excel
  - [x] `bulkUpdateStatus()` - Cập nhật hàng loạt

- [x] `LandingPageStatisticsController`
  - [x] `overview()` - Tổng quan (đơn, doanh thu, chuyển đổi)
  - [x] `byLandingPage()` - Thống kê theo từng LP
  - [x] `byCampaign()` - Thống kê theo UTM campaign
  - [x] `ordersByStatus()` - Đơn theo trạng thái
  - [x] `chart()` - Data biểu đồ

### 2.3 Controllers (Public - Không cần auth) ✅
- [x] `PublicLandingPageController`
  - [x] `show()` - Hiển thị LP theo slug
  - [x] `submitOrder()` - Submit form đặt hàng
  - [x] `trackOrder()` - Tra cứu đơn hàng (optional)

### 2.4 Controllers (Admin) ✅
- [x] `AdminLandingPageController`
  - [x] `index()` - Danh sách tất cả LP (có filter shop, status)
  - [x] `show()` - Chi tiết LP
  - [x] `approve()` - Duyệt LP
  - [x] `reject()` - Từ chối LP + lý do
  - [x] `disable()` - Disable LP vi phạm
  - [x] `statistics()` - Thống kê tổng hợp

### 2.5 Form Requests ✅
- [x] `StoreLandingPageRequest`
- [x] `UpdateLandingPageRequest`
- [x] `SubmitLandingPageOrderRequest`
- [x] `UpdateLandingPageOrderRequest`
- [x] `UpdateShippingRequest`
- [x] `BulkUpdateOrderStatusRequest`

### 2.6 API Resources ✅
- [x] `LandingPageResource`
- [x] `LandingPageListResource` (compact)
- [x] `LandingPageProductResource`
- [x] `LandingPageSectionResource`
- [x] `LandingPageOrderResource`
- [x] `LandingPageOrderListResource` (compact)
- [x] `LandingPageLogResource`

### 2.7 API Routes ✅
- [x] Routes cho Shop (prefix: `/shop/landing-pages`)
- [x] Routes cho Admin (prefix: `/admin/landing-pages`)
- [x] Routes Public (prefix: `/public/lp/{shopSlug}/{pageSlug}`)

### 2.8 Translations ✅
- [x] Vietnamese translations in `lang/vi/messages.php`

---

## 🎨 PHASE 3: SHOP FRONTEND - QUẢN LÝ LANDING PAGE ✅

### 3.1 Landing Page List ✅
- [x] Bảng danh sách với các cột: Tên, Slug, Views, Orders, Status, Created, Actions
- [x] Filter: Status, Date range
- [x] Search: Tên, slug
- [x] Quick actions: View, Edit, Duplicate, Toggle Active, Delete
- [x] Button: Tạo LP mới
- [x] Preview link: Copy link public
- [x] Responsive: expandable rows on mobile

### 3.2 Landing Page Form (Create/Edit) ✅
- [x] **Tab: Thông tin cơ bản**
  - [x] Tên (internal)
  - [x] Slug (auto-generate từ tên, editable)
  - [x] Tiêu đề hiển thị
  - [x] Mô tả ngắn
  - [x] Success message
  - [x] Redirect URL
  - [x] Active toggle

- [x] **Tab: Thiết kế giao diện**
  - [x] Chọn template có sẵn
  - [x] Tùy chỉnh màu sắc: Primary, Secondary, Background, Text
  - [x] Color picker

- [x] **Tab: SEO & Tracking**
  - [x] SEO Title
  - [x] SEO Description
  - [x] SEO Keywords
  - [x] Facebook Pixel ID
  - [x] TikTok Pixel ID
  - [x] Google Analytics ID

### 3.3 Frontend Services ✅
- [x] `LandingPageService` với CRUD operations
- [x] TypeScript models cho Landing Page

### 3.4 Sidebar Navigation ✅
- [x] Landing Pages menu trong shop sidebar
- [x] Sub-menu: Danh sách, Tạo mới, Đơn hàng, Thống kê

---

## 📦 PHASE 4: SHOP FRONTEND - QUẢN LÝ ORDER LP ✅

### 4.1 Order List ✅
- [x] Bảng đơn hàng với columns: Order#, Customer, Phone, Product, Total, Status, LP Name, Created, Actions
- [x] **Filters:**
  - [x] Landing Page
  - [x] Status (multi-select)
  - [x] Date range
- [x] **Search:** Order#, Customer name, Phone
- [x] **Bulk actions:**
  - [x] Update status hàng loạt
  - [x] Export Excel
- [x] Quick status badges với màu sắc
- [x] Responsive: expandable rows on mobile
- [x] Summary cards (pending, completed, total, revenue)

### 4.2 Order Detail ✅
- [x] **Thông tin khách hàng:**
  - [x] Tên, SĐT (click to call), Email
  - [x] Địa chỉ đầy đủ (tỉnh/quận/phường)
  - [x] Copy nhanh địa chỉ

- [x] **Thông tin sản phẩm:**
  - [x] Danh sách SP đã đặt
  - [x] Số lượng, đơn giá, thành tiền
  - [x] Ghi chú từ KH

- [x] **Trạng thái đơn hàng:**
  - [x] Timeline trạng thái (visual)
  - [x] Dropdown thay đổi trạng thái
  - [x] Input lý do (nếu hủy)

- [x] **Vận chuyển:**
  - [x] Dropdown chọn đơn vị vận chuyển
  - [x] Input mã vận đơn
  - [x] Input link tracking
  - [x] Phí ship
  - [x] Tiền COD

- [x] **Ghi chú nội bộ:**
  - [x] Thêm ghi chú
  - [x] Lịch sử ghi chú

- [x] **Lịch sử hoạt động:**
  - [x] Timeline log (ai, làm gì, lúc nào)

- [x] **UTM Tracking info:**
  - [x] Source, Medium, Campaign, Content

### 4.3 Statistics Page ✅
- [x] **Overview Cards:**
  - [x] Tổng Landing Pages
  - [x] Tổng lượt xem
  - [x] Tổng đơn hàng
  - [x] Doanh thu

- [x] **Rankings:**
  - [x] By Landing Page
  - [x] By Campaign (UTM)
  - [x] Top Products
  - [x] By Province

- [x] **Orders by Status Grid**

### 4.4 Frontend Services ✅
- [x] `LandingPageOrderService` với đầy đủ API methods
- [x] TypeScript models cho Orders, Statistics

---

## 🌐 PHASE 5: PUBLIC LANDING PAGE (CUSTOMER VIEW) ✅

### 5.1 Landing Page Route ✅
- [x] URL format: `/lp/{shopSlug}/{pageSlug}`
- [x] SEO-friendly URLs
- [x] Meta tags dynamic
- [x] OG tags for social sharing

### 5.2 Landing Page Template Rendering ✅
- [x] **Layouts/Templates:**
  - [x] Classic (product left, form right)
  - [x] Modern (full-width sections)
  - [x] Minimal (simple, clean)

- [x] **Components:**
  - [x] Header (logo, title)
  - [x] Hero section
  - [x] Product gallery
  - [x] Order form

### 5.3 Order Form ✅
- [x] Customer name (required)
- [x] Phone (required, validation VN phone)
- [x] Email (optional)
- [x] Tỉnh/Thành (dropdown API)
- [x] Quận/Huyện (dropdown dynamic)
- [x] Phường/Xã (dropdown dynamic)
- [x] Địa chỉ chi tiết
- [x] Submit button với loading state
- [x] Success page

---

## 👮 PHASE 6: ADMIN - QUẢN LÝ LANDING PAGE ✅

### 6.1 Landing Page Moderation ✅
- [x] `AdminLandingPageController` created
- [x] Danh sách tất cả LP (filter by shop, status)
- [x] View preview LP
- [x] Approve LP
- [x] Reject LP với lý do
- [x] Disable LP vi phạm
- [x] Enable LP lại

### 6.2 Statistics ✅
- [x] API endpoint cho admin statistics
- [x] Pending approval list

---

## 📈 PHASE 7: STATISTICS & ANALYTICS ✅

### 7.1 Backend Statistics Service ✅
- [x] `LandingPageStatisticsService`
- [x] Overview stats
- [x] By Landing Page
- [x] By Campaign
- [x] Orders by Status
- [x] Orders Chart data
- [x] Top Products
- [x] By Province
- [x] By Hour

### 7.2 Frontend Statistics ✅
- [x] Statistics component với filters
- [x] Overview cards
- [x] Ranking lists
- [x] Status grid

---

## 🌍 PHASE 8: TRANSLATIONS (i18n) ✅

### 8.1 Backend (Laravel) ✅
- [x] `lang/vi/messages.php` - Landing page translations

### 8.2 Frontend (Angular) ✅
- [x] Cần thêm translation keys vào `vi.json` và `en.json` (Đã thêm vào `vi.json`)

---

## � FILES CREATED

### Backend Files:
```
backend/
├── database/migrations/
│   ├── 2024_12_28_100000_create_landing_pages_table.php
│   ├── 2024_12_28_100001_create_landing_page_products_table.php
│   ├── 2024_12_28_100002_create_landing_page_sections_table.php
│   ├── 2024_12_28_100003_create_landing_page_orders_table.php
│   ├── 2024_12_28_100004_create_landing_page_order_items_table.php
│   └── 2024_12_28_100005_create_landing_page_logs_table.php
├── app/Models/
│   ├── LandingPage.php
│   ├── LandingPageProduct.php
│   ├── LandingPageSection.php
│   ├── LandingPageOrder.php
│   ├── LandingPageOrderItem.php
│   └── LandingPageLog.php
├── app/Services/
│   ├── LandingPageService.php
│   ├── LandingPageOrderService.php
│   └── LandingPageStatisticsService.php
├── app/Http/Controllers/Api/V1/
│   ├── LandingPageController.php
│   ├── LandingPageOrderController.php
│   ├── LandingPageStatisticsController.php
│   └── PublicLandingPageController.php
├── app/Http/Controllers/Api/V1/Admin/
│   └── AdminLandingPageController.php
├── app/Http/Requests/LandingPage/
│   ├── StoreLandingPageRequest.php
│   ├── UpdateLandingPageRequest.php
│   └── SubmitLandingPageOrderRequest.php
└── app/Http/Resources/
    ├── LandingPageResource.php
    ├── LandingPageListResource.php
    ├── LandingPageProductResource.php
    ├── LandingPageSectionResource.php
    ├── LandingPageOrderResource.php
    ├── LandingPageOrderListResource.php
    └── LandingPageLogResource.php
```

### Frontend Files:
```
frontend/src/app/
├── core/models/
│   └── landing-page.model.ts
├── core/services/
│   ├── landing-page.service.ts
│   └── landing-page-order.service.ts
└── features/shop/
    ├── landing-pages/
    │   ├── landing-page-list/
    │   │   ├── landing-page-list.component.ts
    │   │   ├── landing-page-list.component.html
    │   │   └── landing-page-list.component.scss
    │   └── landing-page-form/
    │       ├── landing-page-form.component.ts
    │       ├── landing-page-form.component.html
    │       └── landing-page-form.component.scss
    └── landing-page-orders/
        ├── landing-order-list/
        │   ├── landing-order-list.component.ts
        │   ├── landing-order-list.component.html
        │   └── landing-order-list.component.scss
        ├── landing-order-detail/
        │   ├── landing-order-detail.component.ts
        │   ├── landing-order-detail.component.html
        │   └── landing-order-detail.component.scss
        └── landing-order-statistics/
            ├── landing-order-statistics.component.ts
            ├── landing-order-statistics.component.html
            └── landing-order-statistics.component.scss
```

---

## 📅 CHANGELOG

| Ngày | Nội dung | Phase |
|------|----------|-------|
| 28/12/2024 | Tạo task-landing.md với đầy đủ tính năng | - |
| 28/12/2024 | Hoàn thành Phase 1: Database & Models | 1 |
| 28/12/2024 | Hoàn thành Phase 2: Backend API (Controllers, Services, Resources, Routes) | 2 |
| 28/12/2024 | Hoàn thành Phase 3: Shop Frontend - Landing Page List & Form | 3 |
| 28/12/2024 | Hoàn thành Phase 4: Shop Frontend - Order List, Detail, Statistics | 4 |
| 28/12/2024 | Hoàn thành Phase 6: Admin Landing Page Controller | 6 |
| 28/12/2024 | Hoàn thành Phase 7: Statistics & Analytics | 7 |

---

## 🔜 NEXT STEPS

1. **Phase 5** - Public Landing Page:
   - Tạo public Angular module/routes
   - Render landing page templates
   - Order form với address API
   - Success page

2. **Testing**:
   - Test API endpoints
   - Test frontend components
   - Fix any bugs

3. **Enhancements**:
   - Thêm translation keys cho Angular
   - Thêm product/section management trong form

---

*Cập nhật lần cuối: 28/12/2024 18:45*