fix homepage news, invoice

point
update point
2025-12-09 11:17:32 +07:00 · 2025-12-05 10:11:03 +07:00 · 2025-12-04 11:43:27 +07:00 · 2025-12-04 10:39:47 +07:00
19 changed files with 2329 additions and 644 deletions
--- a/html/points-history.html
+++ b/html/points-history.html
@@ -8,78 +8,6 @@
    <link rel="stylesheet" href="assets/css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
 </head>
-<style>
-        .modal-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background: rgba(0,0,0,0.5);
-            z-index: 1000;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 20px;
-        }
-
-        .modal-content {
-            background: white;
-            border-radius: 12px;
-            width: 100%;
-            max-width: 500px;
-            animation: slideUp 0.3s ease;
-        }
-
-        @keyframes slideUp {
-            from { transform: translateY(20px); opacity: 0; }
-            to { transform: translateY(0); opacity: 1; }
-        }
-
-        .modal-header {
-            padding: 20px;
-            border-bottom: 1px solid #e5e7eb;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-        }
-
-        .modal-body {
-            padding: 20px;
-        }
-
-        .modal-footer {
-            padding: 20px;
-            border-top: 1px solid #e5e7eb;
-            display: flex;
-            gap: 12px;
-        }
-
-        .modal-close {
-            background: none;
-            border: none;
-            font-size: 20px;
-            color: #6b7280;
-            cursor: pointer;
-        }
-
-        @media (max-width: 768px) {
-            .document-card {
-                flex-direction: column;
-                align-items: stretch;
-            }
-
-            .download-btn {
-                width: 100%;
-                justify-content: center;
-            }
-        }
-
-	.tab-item.active {
-    	background: var(--primary-blue);
-    	color: var(--white);
-	}
-</style>
 <body>
    <div class="page-wrapper">
        <!-- Header -->
@@ -88,15 +16,12 @@
                <i class="fas fa-arrow-left"></i>
            </a>
            <h1 class="header-title">Lịch sử điểm</h1>
-            <!--<div style="width: 32px;"></div>-->
-            <button class="back-button" onclick="openInfoModal()">
-                <i class="fas fa-info-circle"></i>
-            </button>
+            <div style="width: 32px;"></div>
        </div>
        
        <div class="container">
            <!-- Filter Section -->
-            <!--<div class="card mb-3">
+            <div class="card mb-3">
                <div class="d-flex justify-between align-center">
                    <h3 class="card-title">Bộ lọc</h3>
                    <i class="fas fa-filter" style="color: var(--primary-blue);"></i>
@@ -104,185 +29,222 @@
                <p class="text-muted" style="font-size: 12px; margin-top: 8px;">
                    Thời gian hiệu lực: 01/01/2023 - 31/12/2023
                </p>
-            </div>-->
+            </div>

            <!-- Points History List -->
            <div class="points-history-list">
-                <!-- Transaction Item 1 -->
-                <div class="card mb-3">
-                    <div class="d-flex justify-between align-start mb-2">
-                        <div style="flex: 1;">
-                            <h4 style="color: var(--primary-blue); font-weight: 500; margin-bottom: 4px;">
-                                Giao dịch mua hàng 00083
-                            </h4>
-                            <p class="text-muted" style="font-size: 12px;">
-                                Thời gian: 28/09/2023 17:23:18
-                            </p>
-                            <p class="text-muted" style="font-size: 12px;">
-                                Giao dịch: 100.000.000 VND
-                            </p>
-                        </div>
-                        <button class="btn-complaint" onclick="openComplaint(this)">
-                            Khiếu nại
-                        </button>
+                <!-- Transaction Card 1 -->
+                <div class="transaction-card">
+                    <div class="card-header">
+                        <span class="transaction-code">GD-00083</span>
+                        <span class="transaction-date">28/09/2023</span>
                    </div>
-                    
-                    <div class="d-flex justify-end align-center" style="margin-top: 12px;">
-                        <div style="text-align: right;">
-                            <div style="color: var(--success-color); font-weight: 500;">+3</div>
-                            <div style="color: var(--primary-blue); font-size: 12px;">Điểm mới: 604</div>
+                    <div class="card-content">
+                        <div class="transaction-desc">
+                            <div style="font-weight: 600; color: #333; margin-bottom: 4px;">Giao dịch mua hàng</div>
+                            <div style="font-size: 13px; color: #999;">Mã tham chiếu: #HD-2023-00083</div>
                        </div>
+                        <div class="transaction-points positive">
+                            +3 điểm
+                        </div>
+                    </div>
+                    <div class="card-footer">
+                        <span class="balance-after">Số dư sau: <strong>604 điểm</strong></span>
                    </div>
                </div>

-                <!-- Transaction Item 2 -->
-                <div class="card mb-3">
-                    <div class="d-flex justify-between align-start mb-2">
-                        <div style="flex: 1;">
-                            <h4 style="color: var(--primary-blue); font-weight: 500; margin-bottom: 4px;">
-                                Giao dịch mua hàng 00081
-                            </h4>
-                            <p class="text-muted" style="font-size: 12px;">
-                                Thời gian: 27/09/2023 17:23:18
-                            </p>
-                            <p class="text-muted" style="font-size: 12px;">
-                                Giao dịch: 200.000.000 VND
-                            </p>
-                        </div>
-                        <button class="btn-complaint" onclick="openComplaint(this)">
-                            Khiếu nại
-                        </button>
+                <!-- Transaction Card 2 -->
+                <div class="transaction-card">
+                    <div class="card-header">
+                        <span class="transaction-code">GD-00081</span>
+                        <span class="transaction-date">27/09/2023</span>
                    </div>
-                    
-                    <div class="d-flex justify-end align-center" style="margin-top: 12px;">
-                        <div style="text-align: right;">
-                            <div style="color: var(--text-dark); font-weight: 500;">0</div>
-                            <div style="color: var(--primary-blue); font-size: 12px;">Điểm mới: 604</div>
+                    <div class="card-content">
+                        <div class="transaction-desc">
+                            <div style="font-weight: 600; color: #333; margin-bottom: 4px;">Giao dịch mua hàng</div>
+                            <div style="font-size: 13px; color: #999;">Mã tham chiếu: #HD-2023-00081</div>
                        </div>
+                        <div class="transaction-points neutral">
+                            0 điểm
+                        </div>
+                    </div>
+                    <div class="card-footer">
+                        <span class="balance-after">Số dư sau: <strong>601 điểm</strong></span>
                    </div>
                </div>

-                <!-- Transaction Item 3 -->
-                <div class="card mb-3">
-                    <div class="d-flex justify-between align-start mb-2">
-                        <div style="flex: 1;">
-                            <h4 style="color: var(--primary-blue); font-weight: 500; margin-bottom: 4px;">
-                                Điểm thưởng hết hạn
-                            </h4>
-                            <p class="text-muted" style="font-size: 12px;">
-                                Thời gian: 20/09/2023 17:23:18
-                            </p>
-                        </div>
-                        <button class="btn-complaint" onclick="openComplaint(this)">
-                            Khiếu nại
-                        </button>
+                <!-- Transaction Card 3 -->
+                <div class="transaction-card">
+                    <div class="card-header">
+                        <span class="transaction-code">EXP-2023-001</span>
+                        <span class="transaction-date">20/09/2023</span>
                    </div>
-                    
-                    <div class="d-flex justify-end align-center" style="margin-top: 12px;">
-                        <div style="text-align: right;">
-                            <div style="color: var(--danger-color); font-weight: 500;">-5</div>
-                            <div style="color: var(--primary-blue); font-size: 12px;">Điểm mới: 604</div>
+                    <div class="card-content">
+                        <div class="transaction-desc">
+                            <div style="font-weight: 600; color: #333; margin-bottom: 4px;">Điểm thưởng hết hạn</div>
+                            <div style="font-size: 13px; color: #999;">Hết hạn sử dụng</div>
                        </div>
+                        <div class="transaction-points negative">
+                            -5 điểm
+                        </div>
+                    </div>
+                    <div class="card-footer">
+                        <span class="balance-after">Số dư sau: <strong>601 điểm</strong></span>
                    </div>
                </div>

-                <!-- Transaction Item 4 -->
-                <div class="card mb-3">
-                    <div class="d-flex justify-between align-start mb-2">
-                        <div style="flex: 1;">
-                            <h4 style="color: var(--primary-blue); font-weight: 500; margin-bottom: 4px;">
-                                Đổi Voucher HSG
-                            </h4>
-                            <p class="text-muted" style="font-size: 12px;">
-                                Thời gian: 19/09/2023 17:23:18
-                            </p>
-                        </div>
-                        <button class="btn-complaint" onclick="openComplaint(this)">
-                            Khiếu nại
-                        </button>
+                <!-- Transaction Card 4 -->
+                <div class="transaction-card">
+                    <div class="card-header">
+                        <span class="transaction-code">RDM-2023-042</span>
+                        <span class="transaction-date">19/09/2023</span>
                    </div>
-                    
-                    <div class="d-flex justify-end align-center" style="margin-top: 12px;">
-                        <div style="text-align: right;">
-                            <div style="color: var(--danger-color); font-weight: 500;">-500</div>
-                            <div style="color: var(--primary-blue); font-size: 12px;">Điểm mới: 604</div>
+                    <div class="card-content">
+                        <div class="transaction-desc">
+                            <div style="font-weight: 600; color: #333; margin-bottom: 4px;">Đổi Voucher giảm giá</div>
+                            <div style="font-size: 13px; color: #999;">Voucher 5.000.000đ - HSG</div>
                        </div>
+                        <div class="transaction-points negative">
+                            -500 điểm
+                        </div>
+                    </div>
+                    <div class="card-footer">
+                        <span class="balance-after">Số dư sau: <strong>606 điểm</strong></span>
                    </div>
                </div>

-                <!-- Transaction Item 5 -->
-                <div class="card mb-3">
-                    <div class="d-flex justify-between align-start mb-2">
-                        <div style="flex: 1;">
-                            <h4 style="color: var(--primary-blue); font-weight: 500; margin-bottom: 4px;">
-                                Giới thiệu người dùng
-                            </h4>
-                            <p class="text-muted" style="font-size: 12px;">
-                                Thời gian: 10/09/2023 17:23:18
-                            </p>
-                        </div>
-                        <button class="btn-complaint" onclick="openComplaint(this)">
-                            Khiếu nại
-                        </button>
+                <!-- Transaction Card 5 -->
+                <div class="transaction-card">
+                    <div class="card-header">
+                        <span class="transaction-code">REF-2023-128</span>
+                        <span class="transaction-date">10/09/2023</span>
                    </div>
-                    
-                    <div class="d-flex justify-end align-center" style="margin-top: 12px;">
-                        <div style="text-align: right;">
-                            <div style="color: var(--success-color); font-weight: 500;">+5</div>
-                            <div style="color: var(--primary-blue); font-size: 12px;">Điểm mới: 604</div>
+                    <div class="card-content">
+                        <div class="transaction-desc">
+                            <div style="font-weight: 600; color: #333; margin-bottom: 4px;">Giới thiệu thành công</div>
+                            <div style="font-size: 13px; color: #999;">Giới thiệu: Nguyễn Văn A</div>
                        </div>
+                        <div class="transaction-points positive">
+                            +5 điểm
+                        </div>
+                    </div>
+                    <div class="card-footer">
+                        <span class="balance-after">Số dư sau: <strong>1.106 điểm</strong></span>
                    </div>
                </div>

-                <!-- Transaction Item 6 -->
-                <div class="card mb-3">
-                    <div class="d-flex justify-between align-start mb-2">
-                        <div style="flex: 1;">
-                            <h4 style="color: var(--primary-blue); font-weight: 500; margin-bottom: 4px;">
-                                Đổi quà
-                            </h4>
-                            <p class="text-muted" style="font-size: 12px;">
-                                Thời gian: 19/09/2023 17:23:18
-                            </p>
-                        </div>
-                        <button class="btn-complaint" onclick="openComplaint(this)">
-                            Khiếu nại
-                        </button>
+                <!-- Transaction Card 6 -->
+                <div class="transaction-card">
+                    <div class="card-header">
+                        <span class="transaction-code">RDM-2023-038</span>
+                        <span class="transaction-date">05/09/2023</span>
                    </div>
-                    
-                    <div class="d-flex justify-end align-center" style="margin-top: 12px;">
-                        <div style="text-align: right;">
-                            <div style="color: var(--danger-color); font-weight: 500;">-200</div>
-                            <div style="color: var(--primary-blue); font-size: 12px;">Điểm mới: 604</div>
+                    <div class="card-content">
+                        <div class="transaction-desc">
+                            <div style="font-weight: 600; color: #333; margin-bottom: 4px;">Đổi quà tặng</div>
+                            <div style="font-size: 13px; color: #999;">Tai nghe Bluetooth Sony WH-1000XM4</div>
+                        </div>
+                        <div class="transaction-points negative">
+                            -200 điểm
                        </div>
                    </div>
-                </div>
-            </div>
-        </div>
-<!-- Info Modal -->
-        <div id="infoModal" class="modal-overlay" style="display: none;">
-            <div class="modal-content info-modal">
-                <div class="modal-header">
-                    <h3 class="modal-title" style="font-weight: bold;">Hướng dẫn sử dụng</h3>
-                    <button class="modal-close" onclick="closeInfoModal()">
-                        <i class="fas fa-times"></i>
-                    </button>
-                </div>
-                <div class="modal-body">
-                    <p>Đây là nội dung hướng dẫn sử dụng cho tính năng Lịch sử điểm:</p>
-                    <ul class="list-disc ml-6 mt-3">
-                        <li>Đây là sao kê chi tiết tất cả các giao dịch cộng/trừ điểm của bạn.</li>
-                        <li>Bạn có thể kiểm tra điểm được cộng từ đơn hàng, từ việc đăng ký công trình, hoặc điểm bị trừ khi đổi quà.</li>
-                        <li>Nếu phát hiện giao dịch bị sai sót, hãy bấm nút "Khiếu nại" trên dòng giao dịch đó để gửi yêu cầu hỗ trợ.</li>
-                    </ul>
-                </div>
-                <div class="modal-footer">
-                    <button class="btn btn-primary" onclick="closeInfoModal()">Đóng</button>
+                    <div class="card-footer">
+                        <span class="balance-after">Số dư sau: <strong>1.101 điểm</strong></span>
+                    </div>
                </div>
            </div>
        </div>
    </div>
    
+    <style>
+        /* Modern Transaction Card Styles */
+        .transaction-card {
+            background: white;
+            border-radius: 12px;
+            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+            margin-bottom: 12px;
+            overflow: hidden;
+            transition: all 0.2s;
+        }
+
+        .transaction-card:hover {
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+            transform: translateY(-2px);
+        }
+
+        .transaction-card .card-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 12px 16px;
+            background: #f9fafb;
+            border-bottom: 1px solid #e5e7eb;
+        }
+
+        .transaction-code {
+            font-weight: 700;
+            font-size: 14px;
+            color: #005B9A;
+        }
+
+        .transaction-date {
+            font-size: 12px;
+            color: #9ca3af;
+        }
+
+        .transaction-card .card-content {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 16px;
+        }
+
+        .transaction-desc {
+            flex: 1;
+        }
+
+        .transaction-points {
+            font-size: 24px;
+            font-weight: 700;
+            text-align: right;
+            margin-left: 16px;
+        }
+
+        .transaction-points.positive {
+            color: #059669;
+        }
+
+        .transaction-points.negative {
+            color: #dc2626;
+        }
+
+        .transaction-points.neutral {
+            color: #6b7280;
+        }
+
+        .transaction-card .card-footer {
+            padding: 10px 16px;
+            background: #fafafa;
+            border-top: 1px solid #f0f0f0;
+        }
+
+        .balance-after {
+            font-size: 13px;
+            color: #666;
+        }
+
+        .balance-after strong {
+            color: #005B9A;
+            font-weight: 600;
+        }
+
+        @media (max-width: 480px) {
+            .transaction-points {
+                font-size: 20px;
+            }
+        }
+    </style>
+    
    <script>
        function openComplaint(buttonElement) {
            // Get transaction info from the card
@@ -302,21 +264,6 @@
            
            window.location.href = `point-complaint.html?${params.toString()}`;
        }
-
-        function openInfoModal() {
-            document.getElementById('infoModal').style.display = 'flex';
-        }
-
-        function closeInfoModal() {
-            document.getElementById('infoModal').style.display = 'none';
-        }
-
-        // Close modal when clicking outside
-        document.addEventListener('click', function(e) {
-            if (e.target.classList.contains('modal-overlay')) {
-                e.target.style.display = 'none';
-            }
-        });
    </script>
 </body>
 </html>
--- a/html/points-record.html
+++ b/html/points-record.html
@@ -319,7 +319,124 @@
            color: #0369a1;
        }

+        .product-row {
+            background: #f8f9fa;
+            border: 2px solid var(--border-color);
+            border-radius: 12px;
+            padding: 16px;
+            margin-bottom: 12px;
+            position: relative;
+        }
+
+        .product-row-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 12px;
+            padding-bottom: 8px;
+            border-bottom: 1px dashed #ddd;
+        }
+
+        .product-row-title {
+            font-size: 14px;
+            font-weight: 600;
+            color: var(--primary-color);
+        }
+
+        .btn-remove-product {
+            background: #fee2e2;
+            color: #dc2626;
+            border: none;
+            padding: 6px 12px;
+            border-radius: 6px;
+            font-size: 12px;
+            cursor: pointer;
+            transition: all 0.2s;
+            font-weight: 500;
+        }
+
+        .btn-remove-product:hover {
+            background: #fecaca;
+        }
+
+        .product-input-group {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 12px;
+            margin-bottom: 12px;
+        }
+
+        .product-input-full {
+            grid-column: 1 / -1;
+        }
+
+        .product-label {
+            font-size: 13px;
+            font-weight: 600;
+            color: var(--text-primary);
+            margin-bottom: 6px;
+            display: block;
+        }
+
+        .product-label.required::after {
+            content: " *";
+            color: var(--danger-color);
+        }
+
+        .product-subtotal {
+            background: #eff6ff;
+            border: 2px dashed #005B9A;
+            border-radius: 8px;
+            padding: 12px;
+            text-align: center;
+        }
+
+        .product-subtotal-label {
+            font-size: 12px;
+            color: #666;
+            margin-bottom: 4px;
+        }
+
+        .product-subtotal-value {
+            font-size: 18px;
+            font-weight: 700;
+            color: #005B9A;
+        }
+
+        .btn-add-product {
+            width: 100%;
+            background: white;
+            border: 2px dashed var(--primary-color);
+            color: var(--primary-color);
+            padding: 14px;
+            border-radius: 12px;
+            font-size: 15px;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+        }
+
+        .btn-add-product:hover {
+            background: #eff6ff;
+            border-color: var(--primary-dark);
+        }
+
+        .summary-card {
+            background: linear-gradient(135deg, #eff6ff, #dbeafe);
+            border: 2px solid #005B9A;
+            border-radius: 12px;
+            padding: 20px;
+            margin-bottom: 16px;
+        }
+
        @media (max-width: 480px) {
+            .product-input-group {
+                grid-template-columns: 1fr;
+            }
            .content {
                padding: 0.75rem;
            }
@@ -403,44 +520,9 @@
                           placeholder="Nhập số hóa đơn (nếu có)"
                           onchange="validateForm()">
                </div>
-
-                <!-- Total Amount -->
-                <div class="form-group">
-                    <label class="form-label required">Tổng giá trị đơn hàng (VNĐ)</label>
-                    <input type="number" 
-                           class="form-input" 
-                           id="totalAmount" 
-                           placeholder="0" 
-                           min="0" 
-                           step="1000" 
-                           required 
-                           oninput="calculatePoints(); validateForm()">
-                </div>
-
-                <!-- Points Estimate -->
-                <!--<div class="points-estimate" id="pointsEstimate">
-                    <div class="estimate-title">Điểm dự kiến nhận được</div>
-                    <div class="estimate-text" id="estimateText">0 điểm</div>
-                </div>-->
-
-                <!-- Products Purchased -->
-                <!--<div class="form-group">
-                    <label class="form-label">Sản phẩm đã mua</label>
-                    <textarea class="form-input form-textarea" 
-                              id="products" 
-                              placeholder="Mô tả các sản phẩm đã mua (tùy chọn)"
-                              rows="3"></textarea>
-                </div>-->
-
-                <!-- Points Estimate -->
-                <div class="points-estimate" id="pointsEstimate">
-                    <div class="estimate-title">Điểm dự kiến nhận được</div>
-                    <div class="estimate-text" id="estimateText">0 điểm</div>
-                </div>
-
                <!-- Company Information -->
                <div class="form-group">
-                    <label class="form-label">Tên công ty</label>
+                    <label class="form-label">Tên đơn vị mua hàng</label>
                    <input type="text" 
                           class="form-input" 
                           id="companyName" 
@@ -454,26 +536,41 @@
                           id="taxCode" 
                           placeholder="Nhập mã số thuế (nếu có)">
                </div>
-
+                <!-- Dynamic Product List -->
                <div class="form-group">
-                    <label class="form-label">Số lượng (m²) đã mua</label>
-                    <input type="number" 
-                           class="form-input" 
-                           id="squareMeters" 
-                           placeholder="0" 
-                           min="0" 
-                           step="0.01">
+                    <label class="form-label required">Danh sách sản phẩm</label>
+                    <div id="productsList">
+                        <!-- Product rows will be added here dynamically -->
+                    </div>
+                    <button type="button" onclick="addProductRow()" class="btn-add-product">
+                        <i class="fas fa-plus-circle"></i>
+                        Thêm sản phẩm
+                    </button>
                </div>

-                <!-- Products Purchased -->
-                <div class="form-group">
-                    <label class="form-label">Sản phẩm đã mua</label>
-                    <textarea class="form-input form-textarea" 
-                              id="products" 
-                              placeholder="Mô tả các sản phẩm đã mua (tùy chọn)"
-                              rows="3"></textarea>
+                <!-- Order Summary (Auto-calculated) -->
+                <div class="summary-card">
+                    <h3 style="font-size: 16px; font-weight: 600; color: #333; margin-bottom: 16px;">
+                        <i class="fas fa-calculator" style="color: #005B9A; margin-right: 8px;"></i>
+                        Tổng kết đơn hàng
+                    </h3>
+                    <div style="display: flex; flex-direction: column; gap: 12px;">
+                        <div style="display: flex; justify-content: space-between; padding-bottom: 12px; border-bottom: 1px dashed #e5e7eb;">
+                            <span style="color: #666; font-size: 15px;">Tổng số lượng:</span>
+                            <span id="totalSquareMeters" style="color: #333; font-weight: 600; font-size: 15px;">0 m²</span>
+                        </div>
+                        <div style="display: flex; justify-content: space-between;">
+                            <span style="color: #666; font-size: 15px;">Tổng giá trị đơn hàng:</span>
+                            <span id="totalAmount" style="color: #005B9A; font-weight: 700; font-size: 18px;">0 đ</span>
+                        </div>
+                    </div>
                </div>

+                <!-- Points Estimate -->
+                <div class="points-estimate" id="pointsEstimate">
+                    <div class="estimate-title">Điểm dự kiến nhận được</div>
+                    <div class="estimate-text" id="estimateText">0 điểm</div>
+                </div>

                <!-- Invoice Images -->
                <div class="form-group">
@@ -504,13 +601,13 @@
                </div>

                <!-- Additional Notes -->
-                <div class="form-group">
+                <!--<div class="form-group">
                    <label class="form-label">Ghi chú thêm</label>
                    <textarea class="form-input form-textarea" 
                              id="notes" 
                              placeholder="Ghi chú thêm về đơn hàng (tùy chọn)"
                              rows="3"></textarea>
-                </div>
+                </div>-->

                <!-- Submit Button -->
                <button type="submit" class="submit-button" id="submitButton" disabled>
@@ -523,26 +620,153 @@

    <script>
        let selectedFiles = [];
+        let productCounter = 0;
+        let products = [];

        // Set max date to today
        document.getElementById('purchaseDate').max = new Date().toISOString().split('T')[0];

+        // Add first product row on page load
+        window.addEventListener('DOMContentLoaded', function() {
+            addProductRow();
+        });
+
        function goBack() {
            window.history.back();
        }

+        function addProductRow() {
+            productCounter++;
+            const productsList = document.getElementById('productsList');
+            
+            const productRow = document.createElement('div');
+            productRow.className = 'product-row';
+            productRow.id = `product-${productCounter}`;
+            productRow.innerHTML = `
+                <div class="product-row-header">
+                    <span class="product-row-title">
+                        <i class="fas fa-box"></i> Sản phẩm #${productCounter}
+                    </span>
+                    <button type="button" onclick="removeProductRow(${productCounter})" class="btn-remove-product">
+                        <i class="fas fa-trash"></i> Xóa
+                    </button>
+                </div>
+                <div class="product-input-full">
+                    <label class="product-label required">Tên sản phẩm</label>
+                    <input type="text" 
+                           class="form-input" 
+                           id="productName-${productCounter}"
+                           placeholder="Ví dụ: Gạch Granite 60x60" 
+                           required
+                           onchange="updateCalculations()">
+                </div>
+                <div class="product-input-group">
+                    <div>
+                        <label class="product-label required">Số lượng (m²)</label>
+                        <input type="number" 
+                               class="form-input" 
+                               id="productQty-${productCounter}"
+                               placeholder="0" 
+                               min="0" 
+                               step="0.01" 
+                               required
+                               oninput="updateCalculations()">
+                    </div>
+                    <div>
+                        <label class="product-label required">Đơn giá (VNĐ/m²)</label>
+                        <input type="number" 
+                               class="form-input" 
+                               id="productPrice-${productCounter}"
+                               placeholder="0" 
+                               min="0" 
+                               step="1000" 
+                               required
+                               oninput="updateCalculations()">
+                    </div>
+                </div>
+                <div class="product-subtotal">
+                    <div class="product-subtotal-label">Thành tiền</div>
+                    <div class="product-subtotal-value" id="productSubtotal-${productCounter}">0 đ</div>
+                </div>
+            `;
+            
+            productsList.appendChild(productRow);
+            products.push(productCounter);
+            updateCalculations();
+        }
+
+        function removeProductRow(id) {
+            if (products.length <= 1) {
+                alert('Cần ít nhất một sản phẩm!');
+                return;
+            }
+            
+            const row = document.getElementById(`product-${id}`);
+            if (row) {
+                row.remove();
+                products = products.filter(p => p !== id);
+                updateCalculations();
+            }
+        }
+
+        function updateCalculations() {
+            let totalQty = 0;
+            let totalValue = 0;
+            
+            products.forEach(id => {
+                const qtyInput = document.getElementById(`productQty-${id}`);
+                const priceInput = document.getElementById(`productPrice-${id}`);
+                const subtotalEl = document.getElementById(`productSubtotal-${id}`);
+                
+                if (qtyInput && priceInput && subtotalEl) {
+                    const qty = parseFloat(qtyInput.value) || 0;
+                    const price = parseFloat(priceInput.value) || 0;
+                    const subtotal = qty * price;
+                    
+                    totalQty += qty;
+                    totalValue += subtotal;
+                    
+                    subtotalEl.textContent = formatCurrency(subtotal);
+                }
+            });
+            
+            // Update summary
+            document.getElementById('totalSquareMeters').textContent = totalQty.toFixed(2) + ' m²';
+            document.getElementById('totalAmount').textContent = formatCurrency(totalValue);
+            
+            // Calculate points
+            calculatePoints(totalValue);
+            validateForm();
+        }
+
+        function formatCurrency(value) {
+            return new Intl.NumberFormat('vi-VN', {
+                style: 'currency',
+                currency: 'VND',
+                minimumFractionDigits: 0
+            }).format(value);
+        }
+
        function validateForm() {
            const purchaseDate = document.getElementById('purchaseDate').value;
-            const storeLocation = document.getElementById('storeLocation').value;
-            const totalAmount = document.getElementById('totalAmount').value;
            const hasFiles = selectedFiles.length > 0;
+            
+            // Check if at least one product is filled
+            let hasValidProduct = false;
+            products.forEach(id => {
+                const name = document.getElementById(`productName-${id}`).value;
+                const qty = document.getElementById(`productQty-${id}`).value;
+                const price = document.getElementById(`productPrice-${id}`).value;
+                if (name && qty && price) {
+                    hasValidProduct = true;
+                }
+            });

-            const isValid = purchaseDate && storeLocation && totalAmount && hasFiles;
+            const isValid = purchaseDate && hasValidProduct && hasFiles;
            document.getElementById('submitButton').disabled = !isValid;
        }

-        function calculatePoints() {
-            const totalAmount = document.getElementById('totalAmount').value;
+        function calculatePoints(totalAmount) {
            const pointsEstimate = document.getElementById('pointsEstimate');
            const estimateText = document.getElementById('estimateText');

--- a/ios/Runner.xcodeproj/project.pbxproj
+++ b/ios/Runner.xcodeproj/project.pbxproj
@@ -632,6 +632,7 @@
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = Runner/Info.plist;
 				INFOPLIST_KEY_CFBundleDisplayName = "DBIZ Partner";
+				IPHONEOS_DEPLOYMENT_TARGET = 15;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
@@ -934,6 +935,7 @@
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = Runner/Info.plist;
 				INFOPLIST_KEY_CFBundleDisplayName = "DBIZ Partner";
+				IPHONEOS_DEPLOYMENT_TARGET = 15;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
@@ -959,6 +961,7 @@
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = Runner/Info.plist;
 				INFOPLIST_KEY_CFBundleDisplayName = "DBIZ Partner";
+				IPHONEOS_DEPLOYMENT_TARGET = 15;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
--- a/lib/core/router/app_router.dart
+++ b/lib/core/router/app_router.dart
@@ -28,6 +28,7 @@ import 'package:worker/features/chat/presentation/pages/chat_list_page.dart';
 import 'package:worker/features/favorites/presentation/pages/favorites_page.dart';
 import 'package:worker/features/loyalty/presentation/pages/loyalty_page.dart';
 import 'package:worker/features/loyalty/presentation/pages/points_history_page.dart';
+import 'package:worker/features/loyalty/presentation/pages/points_record_create_page.dart';
 import 'package:worker/features/loyalty/presentation/pages/points_records_page.dart';
 import 'package:worker/features/loyalty/presentation/pages/rewards_page.dart';
 import 'package:worker/features/main/presentation/pages/main_scaffold.dart';
@@ -323,6 +324,14 @@ final routerProvider = Provider<GoRouter>((ref) {
            MaterialPage(key: state.pageKey, child: const PointsRecordsPage()),
      ),

+      // Points Record Create Route
+      GoRoute(
+        path: RouteNames.pointsRecordCreate,
+        name: 'loyalty_points_record_create',
+        pageBuilder: (context, state) =>
+            MaterialPage(key: state.pageKey, child: const PointsRecordCreatePage()),
+      ),
+
      // Orders Route
      GoRoute(
        path: RouteNames.orders,
@@ -651,6 +660,7 @@ class RouteNames {
  static const String rewards = '$loyalty/rewards';
  static const String pointsHistory = '$loyalty/points-history';
  static const String pointsRecords = '$loyalty/points-records';
+  static const String pointsRecordCreate = '$loyalty/points-records/create';
  static const String myGifts = '$loyalty/gifts';
  static const String referral = '$loyalty/referral';

--- a/lib/features/home/presentation/pages/home_page.dart
+++ b/lib/features/home/presentation/pages/home_page.dart
@@ -131,7 +131,8 @@ class _HomePageState extends ConsumerState<HomePage> {
                      promotions: promotions,
                      onPromotionTap: (promotion) {
                        // Navigate to promotion details
-                        context.push('/promotions/${promotion.id}');
+                        context.push('/news/${promotion.id}');
+
                      },
                    )
                  : const SizedBox.shrink(),
--- a/lib/features/invoices/data/models/invoice_model.dart
+++ b/lib/features/invoices/data/models/invoice_model.dart
@@ -87,6 +87,7 @@ class BuyerInfoModel {
  final String? wardCode;
  final String? cityName;
  final String? wardName;
+  final String? customerName;

  const BuyerInfoModel({
    this.name,
@@ -100,6 +101,7 @@ class BuyerInfoModel {
    this.wardCode,
    this.cityName,
    this.wardName,
+    this.customerName,
  });

  factory BuyerInfoModel.fromJson(Map<String, dynamic> json) {
@@ -115,6 +117,7 @@ class BuyerInfoModel {
      wardCode: json['ward_code'] as String?,
      cityName: json['city_name'] as String?,
      wardName: json['ward_name'] as String?,
+      customerName: json['customer_name'] as String?,
    );
  }

@@ -130,6 +133,7 @@ class BuyerInfoModel {
        'ward_code': wardCode,
        'city_name': cityName,
        'ward_name': wardName,
+        'customer_name': customerName,
      };

  BuyerInfo toEntity() => BuyerInfo(
@@ -144,6 +148,7 @@ class BuyerInfoModel {
        wardCode: wardCode,
        cityName: cityName,
        wardName: wardName,
+        customerName: customerName,
      );
 }

--- a/lib/features/invoices/domain/entities/invoice.dart
+++ b/lib/features/invoices/domain/entities/invoice.dart
@@ -75,6 +75,7 @@ class BuyerInfo extends Equatable {
  final String? wardCode;
  final String? cityName;
  final String? wardName;
+  final String? customerName;

  const BuyerInfo({
    this.name,
@@ -88,6 +89,7 @@ class BuyerInfo extends Equatable {
    this.wardCode,
    this.cityName,
    this.wardName,
+    this.customerName
  });

  /// Get formatted full address
@@ -118,6 +120,7 @@ class BuyerInfo extends Equatable {
        wardCode,
        cityName,
        wardName,
+        customerName
      ];
 }

--- a/lib/features/invoices/presentation/pages/invoice_detail_page.dart
+++ b/lib/features/invoices/presentation/pages/invoice_detail_page.dart
@@ -294,10 +294,10 @@ class InvoiceDetailPage extends ConsumerWidget {

  List<_InfoLine> _buildBuyerInfoLines(Invoice invoice) {
    return [
-      if (invoice.buyerInfo!.name != null)
-        _InfoLine(label: 'Người mua hàng', value: invoice.buyerInfo!.name!),
-      if (invoice.customerName != null)
-        _InfoLine(label: 'Tên đơn vị', value: invoice.customerName!),
+      if (invoice.buyerInfo!.customerName != null)
+        _InfoLine(label: 'Người mua hàng', value: invoice.buyerInfo!.customerName!),
+      if (invoice.buyerInfo!.addressTitle != null)
+        _InfoLine(label: 'Tên đơn vị', value: invoice.buyerInfo!.addressTitle!),
      if (invoice.buyerInfo!.taxCode != null)
        _InfoLine(label: 'Mã số thuế', value: invoice.buyerInfo!.taxCode!),
      if (invoice.buyerInfo!.fullAddress.isNotEmpty)
--- a/lib/features/loyalty/data/datasources/points_history_local_datasource.dart
+++ b/lib/features/loyalty/data/datasources/points_history_local_datasource.dart
@@ -93,7 +93,7 @@ class PointsHistoryLocalDataSource {
        complaintStatus: ComplaintStatus.none,
        balanceAfter: 604,
        expiryDate: now.add(const Duration(days: 365)),
-        timestamp: DateTime(2023, 9, 28, 17, 23, 18),
+        timestamp: DateTime(2025, 9, 28, 17, 23, 18),
      ),
      LoyaltyPointEntryModel(
        entryId: 'entry_002',
@@ -108,7 +108,7 @@ class PointsHistoryLocalDataSource {
        complaintStatus: ComplaintStatus.none,
        balanceAfter: 604,
        expiryDate: now.add(const Duration(days: 365)),
-        timestamp: DateTime(2023, 9, 27, 17, 23, 18),
+        timestamp: DateTime(2025, 9, 27, 17, 23, 18),
      ),
      LoyaltyPointEntryModel(
        entryId: 'entry_003',
@@ -123,7 +123,7 @@ class PointsHistoryLocalDataSource {
        complaintStatus: ComplaintStatus.none,
        balanceAfter: 604,
        expiryDate: null,
-        timestamp: DateTime(2023, 9, 20, 17, 23, 18),
+        timestamp: DateTime(2025, 9, 20, 17, 23, 18),
      ),
      LoyaltyPointEntryModel(
        entryId: 'entry_004',
@@ -138,7 +138,7 @@ class PointsHistoryLocalDataSource {
        complaintStatus: ComplaintStatus.none,
        balanceAfter: 604,
        expiryDate: null,
-        timestamp: DateTime(2023, 9, 19, 17, 23, 18),
+        timestamp: DateTime(2025, 9, 19, 17, 23, 18),
      ),
      LoyaltyPointEntryModel(
        entryId: 'entry_005',
@@ -153,7 +153,7 @@ class PointsHistoryLocalDataSource {
        complaintStatus: ComplaintStatus.none,
        balanceAfter: 604,
        expiryDate: now.add(const Duration(days: 365)),
-        timestamp: DateTime(2023, 9, 10, 17, 23, 18),
+        timestamp: DateTime(2025, 9, 10, 17, 23, 18),
      ),
      LoyaltyPointEntryModel(
        entryId: 'entry_006',
@@ -168,7 +168,7 @@ class PointsHistoryLocalDataSource {
        complaintStatus: ComplaintStatus.none,
        balanceAfter: 604,
        expiryDate: null,
-        timestamp: DateTime(2023, 9, 5, 17, 23, 18),
+        timestamp: DateTime(2025, 9, 5, 17, 23, 18),
      ),
    ];

--- a/lib/features/loyalty/data/datasources/points_record_remote_datasource.dart
+++ b/lib/features/loyalty/data/datasources/points_record_remote_datasource.dart
@@ -30,7 +30,7 @@ class PointsRecordRemoteDataSourceImpl
        userId: 'user123',
        invoiceNumber: 'INV-VG-001',
        storeName: 'Công ty TNHH Vingroup',
-        transactionDate: DateTime(2023, 11, 15),
+        transactionDate: DateTime(2025, 11, 15),
        invoiceAmount: 2500000,
        notes: 'Gạch granite cao cấp cho khu vực lobby và hành lang',
        attachments: const [
@@ -39,8 +39,8 @@ class PointsRecordRemoteDataSourceImpl
        ],
        status: PointsStatus.approved,
        pointsEarned: 250,
-        submittedAt: DateTime(2023, 11, 15, 10, 0),
-        processedAt: DateTime(2023, 11, 20, 14, 30),
+        submittedAt: DateTime(2025, 11, 15, 10, 0),
+        processedAt: DateTime(2025, 11, 20, 14, 30),
        processedBy: 'admin001',
      ),
      PointsRecord(
@@ -48,21 +48,21 @@ class PointsRecordRemoteDataSourceImpl
        userId: 'user123',
        invoiceNumber: 'INV-BTX-002',
        storeName: 'Tập đoàn Bitexco',
-        transactionDate: DateTime(2023, 11, 25),
+        transactionDate: DateTime(2025, 11, 25),
        invoiceAmount: 1250000,
        notes: 'Gạch porcelain 80x80 cho sảnh chính và khu mua sắm',
        attachments: const [
          'https://example.com/invoice3.jpg',
        ],
        status: PointsStatus.pending,
-        submittedAt: DateTime(2023, 11, 25, 9, 15),
+        submittedAt: DateTime(2025, 11, 25, 9, 15),
      ),
      PointsRecord(
        recordId: 'PRR003',
        userId: 'user123',
        invoiceNumber: 'INV-ABC-003',
        storeName: 'Công ty TNHH ABC Manufacturing',
-        transactionDate: DateTime(2023, 11, 20),
+        transactionDate: DateTime(2025, 11, 20),
        invoiceAmount: 4200000,
        notes: 'Gạch chống trơn cho khu vực sản xuất và kho bãi',
        attachments: const [
@@ -71,8 +71,8 @@ class PointsRecordRemoteDataSourceImpl
        ],
        status: PointsStatus.rejected,
        rejectReason: 'Hình ảnh minh chứng không hợp lệ',
-        submittedAt: DateTime(2023, 11, 20, 11, 0),
-        processedAt: DateTime(2023, 11, 28, 16, 45),
+        submittedAt: DateTime(2025, 11, 20, 11, 0),
+        processedAt: DateTime(2025, 11, 28, 16, 45),
        processedBy: 'admin002',
      ),
      PointsRecord(
@@ -80,7 +80,7 @@ class PointsRecordRemoteDataSourceImpl
        userId: 'user123',
        invoiceNumber: 'INV-ECO-004',
        storeName: 'Ecopark Group',
-        transactionDate: DateTime(2023, 10, 10),
+        transactionDate: DateTime(2025, 10, 10),
        invoiceAmount: 3700000,
        notes: 'Gạch ceramic vân gỗ cho khu vực phòng khách và sân vườn',
        attachments: const [
@@ -88,8 +88,8 @@ class PointsRecordRemoteDataSourceImpl
        ],
        status: PointsStatus.approved,
        pointsEarned: 370,
-        submittedAt: DateTime(2023, 10, 10, 8, 30),
-        processedAt: DateTime(2023, 10, 15, 10, 20),
+        submittedAt: DateTime(2025, 10, 10, 8, 30),
+        processedAt: DateTime(2025, 10, 15, 10, 20),
        processedBy: 'admin001',
      ),
      PointsRecord(
@@ -97,7 +97,7 @@ class PointsRecordRemoteDataSourceImpl
        userId: 'user123',
        invoiceNumber: 'INV-DMD-005',
        storeName: 'Diamond Hospitality Group',
-        transactionDate: DateTime(2023, 12, 1),
+        transactionDate: DateTime(2025, 12, 1),
        invoiceAmount: 8600000,
        notes: 'Gạch marble tự nhiên cho lobby và phòng suite',
        attachments: const [
@@ -106,7 +106,7 @@ class PointsRecordRemoteDataSourceImpl
          'https://example.com/invoice9.jpg',
        ],
        status: PointsStatus.pending,
-        submittedAt: DateTime(2023, 12, 1, 13, 0),
+        submittedAt: DateTime(2025, 12, 1, 13, 0),
      ),
    ];
  }
--- a/lib/features/loyalty/presentation/pages/points_history_page.dart
+++ b/lib/features/loyalty/presentation/pages/points_history_page.dart
@@ -8,28 +8,29 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:go_router/go_router.dart';
 import 'package:intl/intl.dart';
-import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:worker/core/constants/ui_constants.dart';
-import 'package:worker/core/database/models/enums.dart';
 import 'package:worker/core/theme/colors.dart';
-import 'package:worker/features/loyalty/data/datasources/points_history_local_datasource.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:worker/features/loyalty/data/models/loyalty_point_entry_model.dart';
 import 'package:worker/features/loyalty/presentation/providers/points_history_provider.dart';

 /// Points History Page
 ///
 /// Features:
-/// - Filter section with date range
-/// - List of transaction cards
-/// - Each card shows: description, date, amount, points change, new balance
-/// - Complaint button for each transaction
+/// - Filter section with date range picker
+/// - List of transaction cards with new design
+/// - Each card shows: code, date, description, reference, points change, balance after
 class PointsHistoryPage extends ConsumerWidget {
  const PointsHistoryPage({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final colorScheme = Theme.of(context).colorScheme;
+    // Use unfiltered data for now (mock data)
    final historyAsync = ref.watch(pointsHistoryProvider);
+    final filter = ref.watch(pointsHistoryFilterProvider);
+    //todo: implement filtering logic in provider later
+    //:note: final historyAsync = ref.watch(filteredPointsHistoryProvider);

    return Scaffold(
      backgroundColor: colorScheme.surfaceContainerLowest,
@@ -53,26 +54,22 @@ class PointsHistoryPage extends ConsumerWidget {
        },
        child: historyAsync.when(
          data: (entries) {
-            if (entries.isEmpty) {
-              return _buildEmptyState(colorScheme);
-            }
-
-            return SingleChildScrollView(
+            return ListView(
              padding: const EdgeInsets.all(16),
-              child: Column(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                children: [
-                  // Filter Section
-                  _buildFilterSection(colorScheme),
+              children: [
+                // Filter Section
+                _buildFilterSection(context, ref, colorScheme, filter),

-                  const SizedBox(height: 16),
+                const SizedBox(height: 16),

-                  // Transaction List
+                // Empty state or Transaction List
+                if (entries.isEmpty)
+                  _buildEmptyStateInline(colorScheme)
+                else
                  ...entries.map(
-                    (entry) => _buildTransactionCard(context, ref, entry, colorScheme),
+                    (entry) => _buildTransactionCard(context, entry, colorScheme),
                  ),
-                ],
-              ),
+              ],
            );
          },
          loading: () => const CustomLoadingIndicator(),
@@ -82,14 +79,21 @@ class PointsHistoryPage extends ConsumerWidget {
    );
  }

-  /// Build filter section
-  Widget _buildFilterSection(ColorScheme colorScheme) {
+  /// Build filter section with date pickers
+  Widget _buildFilterSection(
+    BuildContext context,
+    WidgetRef ref,
+    ColorScheme colorScheme,
+    PointsHistoryFilter filter,
+  ) {
+    final dateFormatter = DateFormat('dd/MM/yyyy');
+
    return Card(
      elevation: 1,
      margin: EdgeInsets.zero,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
      child: Padding(
-        padding: const EdgeInsets.all(20),
+        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
@@ -104,156 +108,130 @@ class PointsHistoryPage extends ConsumerWidget {
                    color: colorScheme.onSurface,
                  ),
                ),
-                FaIcon(FontAwesomeIcons.sliders, color: colorScheme.primary, size: 18),
+                FaIcon(FontAwesomeIcons.filter, color: colorScheme.primary, size: 18),
              ],
            ),
-            const SizedBox(height: 8),
-            Text(
-              'Thời gian hiệu lực: 01/01/2023 - 31/12/2023',
-              style: TextStyle(fontSize: 12, color: colorScheme.onSurfaceVariant),
-            ),
-          ],
-        ),
-      ),
-    );
-  }
+            const SizedBox(height: 16),

-  /// Build transaction card
-  Widget _buildTransactionCard(
-    BuildContext context,
-    WidgetRef ref,
-    LoyaltyPointEntryModel entry,
-    ColorScheme colorScheme,
-  ) {
-    final dateFormatter = DateFormat('dd/MM/yyyy HH:mm:ss');
-    final currencyFormatter = NumberFormat.currency(
-      locale: 'vi_VN',
-      symbol: 'VND',
-      decimalDigits: 0,
-    );
-
-    // Get transaction amount if it's a purchase
-    final datasource = ref.read(pointsHistoryLocalDataSourceProvider);
-    final transactionAmount = datasource.getTransactionAmount(
-      entry.description,
-    );
-
-    return Card(
-      elevation: 1,
-      margin: const EdgeInsets.only(bottom: 12),
-      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
-      child: Padding(
-        padding: const EdgeInsets.all(16),
-        child: Column(
-          crossAxisAlignment: CrossAxisAlignment.start,
-          children: [
-            // Top row: Description and Complaint button
+            // Date range row
            Row(
-              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
+                // Start date
                Expanded(
-                  child: Column(
-                    crossAxisAlignment: CrossAxisAlignment.start,
-                    children: [
-                      // Description
-                      Text(
-                        entry.description,
-                        style: TextStyle(
-                          fontSize: 15,
-                          fontWeight: FontWeight.w500,
-                          color: colorScheme.primary,
-                        ),
-                      ),
-                      const SizedBox(height: 4),
-
-                      // Timestamp
-                      Text(
-                        'Thời gian: ${dateFormatter.format(entry.timestamp)}',
-                        style: TextStyle(
-                          fontSize: 12,
-                          color: colorScheme.onSurfaceVariant,
-                        ),
-                      ),
-
-                      // Transaction amount (if purchase)
-                      if (transactionAmount != null) ...[
-                        const SizedBox(height: 2),
-                        Text(
-                          'Giao dịch: ${currencyFormatter.format(transactionAmount)}',
-                          style: TextStyle(
-                            fontSize: 12,
-                            color: colorScheme.onSurfaceVariant,
-                          ),
-                        ),
-                      ],
-                    ],
+                  child: _buildDateField(
+                    context: context,
+                    colorScheme: colorScheme,
+                    label: 'Từ ngày',
+                    value: filter.startDate,
+                    dateFormatter: dateFormatter,
+                    onTap: () async {
+                      final date = await showDatePicker(
+                        context: context,
+                        initialDate: filter.startDate ?? DateTime.now(),
+                        firstDate: DateTime(2020),
+                        lastDate: filter.endDate ?? DateTime.now(),
+                      );
+                      if (date != null) {
+                        ref.read(pointsHistoryFilterProvider.notifier).setStartDate(date);
+                      }
+                    },
                  ),
                ),
-
                const SizedBox(width: 12),
-
-                // Complaint button
-                OutlinedButton(
-                  onPressed: () {
-                    ScaffoldMessenger.of(context).showSnackBar(
-                      const SnackBar(
-                        content: Text('Chức năng khiếu nại đang phát triển'),
-                      ),
-                    );
-                  },
-                  style: OutlinedButton.styleFrom(
-                    padding: const EdgeInsets.symmetric(
-                      horizontal: 12,
-                      vertical: 6,
-                    ),
-                    side: BorderSide(color: colorScheme.onSurfaceVariant),
-                    foregroundColor: colorScheme.onSurface,
-                    textStyle: const TextStyle(fontSize: 12),
-                    minimumSize: const Size(0, 32),
-                    shape: RoundedRectangleBorder(
-                      borderRadius: BorderRadius.circular(6),
-                    ),
+                // End date
+                Expanded(
+                  child: _buildDateField(
+                    context: context,
+                    colorScheme: colorScheme,
+                    label: 'Đến ngày',
+                    value: filter.endDate,
+                    dateFormatter: dateFormatter,
+                    onTap: () async {
+                      final date = await showDatePicker(
+                        context: context,
+                        initialDate: filter.endDate ?? DateTime.now(),
+                        firstDate: filter.startDate ?? DateTime(2020),
+                        lastDate: DateTime.now(),
+                      );
+                      if (date != null) {
+                        ref.read(pointsHistoryFilterProvider.notifier).setEndDate(date);
+                      }
+                    },
                  ),
-                  child: const Text('Khiếu nại'),
                ),
              ],
            ),

            const SizedBox(height: 12),

-            // Bottom row: Points change and new balance
-            Row(
-              mainAxisAlignment: MainAxisAlignment.end,
-              children: [
-                Column(
-                  crossAxisAlignment: CrossAxisAlignment.end,
-                  children: [
-                    // Points change
-                    Text(
-                      entry.points > 0 ? '+${entry.points}' : '${entry.points}',
-                      style: TextStyle(
-                        fontSize: 16,
-                        fontWeight: FontWeight.w500,
-                        color: entry.points > 0
-                            ? AppColors.success
-                            : entry.points < 0
-                            ? AppColors.danger
-                            : colorScheme.onSurface,
-                      ),
-                    ),
-                    const SizedBox(height: 2),
-
-                    // New balance
-                    Text(
-                      'Điểm mới: ${entry.balanceAfter}',
-                      style: TextStyle(
-                        fontSize: 12,
-                        color: colorScheme.primary,
-                      ),
-                    ),
-                  ],
-                ),
-              ],
+            // Quick filter chips
+            SingleChildScrollView(
+              scrollDirection: Axis.horizontal,
+              child: Row(
+                children: [
+                  _buildQuickFilterChip(
+                    context: context,
+                    ref: ref,
+                    colorScheme: colorScheme,
+                    label: 'Hôm nay',
+                    onTap: () {
+                      final now = DateTime.now();
+                      final today = DateTime(now.year, now.month, now.day);
+                      ref.read(pointsHistoryFilterProvider.notifier).setDateRange(today, today);
+                    },
+                  ),
+                  const SizedBox(width: 8),
+                  _buildQuickFilterChip(
+                    context: context,
+                    ref: ref,
+                    colorScheme: colorScheme,
+                    label: '7 ngày',
+                    onTap: () {
+                      final now = DateTime.now();
+                      final today = DateTime(now.year, now.month, now.day);
+                      final weekAgo = today.subtract(const Duration(days: 7));
+                      ref.read(pointsHistoryFilterProvider.notifier).setDateRange(weekAgo, today);
+                    },
+                  ),
+                  const SizedBox(width: 8),
+                  _buildQuickFilterChip(
+                    context: context,
+                    ref: ref,
+                    colorScheme: colorScheme,
+                    label: '30 ngày',
+                    onTap: () {
+                      final now = DateTime.now();
+                      final today = DateTime(now.year, now.month, now.day);
+                      final monthAgo = today.subtract(const Duration(days: 30));
+                      ref.read(pointsHistoryFilterProvider.notifier).setDateRange(monthAgo, today);
+                    },
+                  ),
+                  const SizedBox(width: 8),
+                  _buildQuickFilterChip(
+                    context: context,
+                    ref: ref,
+                    colorScheme: colorScheme,
+                    label: 'Năm nay',
+                    onTap: () {
+                      final now = DateTime.now();
+                      ref.read(pointsHistoryFilterProvider.notifier).setDateRange(
+                        DateTime(now.year, 1, 1),
+                        DateTime(now.year, 12, 31),
+                      );
+                    },
+                  ),
+                  const SizedBox(width: 8),
+                  _buildQuickFilterChip(
+                    context: context,
+                    ref: ref,
+                    colorScheme: colorScheme,
+                    label: 'Tất cả',
+                    onTap: () {
+                      ref.read(pointsHistoryFilterProvider.notifier).clearFilter();
+                    },
+                  ),
+                ],
+              ),
            ),
          ],
        ),
@@ -261,30 +239,257 @@ class PointsHistoryPage extends ConsumerWidget {
    );
  }

-  /// Build empty state
-  Widget _buildEmptyState(ColorScheme colorScheme) {
-    return Center(
+  Widget _buildDateField({
+    required BuildContext context,
+    required ColorScheme colorScheme,
+    required String label,
+    required DateTime? value,
+    required DateFormat dateFormatter,
+    required VoidCallback onTap,
+  }) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Text(
+          label,
+          style: TextStyle(
+            fontSize: 12,
+            color: colorScheme.onSurfaceVariant,
+          ),
+        ),
+        const SizedBox(height: 4),
+        InkWell(
+          onTap: onTap,
+          borderRadius: BorderRadius.circular(8),
+          child: Container(
+            padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
+            decoration: BoxDecoration(
+              color: colorScheme.surfaceContainerHighest.withValues(alpha: 0.5),
+              borderRadius: BorderRadius.circular(8),
+            ),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Text(
+                  value != null ? dateFormatter.format(value) : 'Chọn',
+                  style: TextStyle(
+                    fontSize: 14,
+                    color: value != null ? colorScheme.onSurface : colorScheme.onSurfaceVariant,
+                  ),
+                ),
+                FaIcon(
+                  FontAwesomeIcons.calendar,
+                  size: 14,
+                  color: colorScheme.onSurfaceVariant,
+                ),
+              ],
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  Widget _buildQuickFilterChip({
+    required BuildContext context,
+    required WidgetRef ref,
+    required ColorScheme colorScheme,
+    required String label,
+    required VoidCallback onTap,
+  }) {
+    return InkWell(
+      onTap: onTap,
+      borderRadius: BorderRadius.circular(16),
+      child: Container(
+        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
+        decoration: BoxDecoration(
+          color: colorScheme.surfaceContainerHighest.withValues(alpha: 0.5),
+          borderRadius: BorderRadius.circular(16),
+          border: Border.all(color: colorScheme.outlineVariant),
+        ),
+        child: Text(
+          label,
+          style: TextStyle(
+            fontSize: 12,
+            color: colorScheme.onSurface,
+          ),
+        ),
+      ),
+    );
+  }
+
+  /// Build transaction card with new design
+  Widget _buildTransactionCard(
+    BuildContext context,
+    LoyaltyPointEntryModel entry,
+    ColorScheme colorScheme,
+  ) {
+    final dateFormatter = DateFormat('dd/MM/yyyy');
+
+    // Determine points color
+    Color pointsColor;
+    String pointsPrefix;
+    if (entry.points > 0) {
+      pointsColor = AppColors.success;
+      pointsPrefix = '+';
+    } else if (entry.points < 0) {
+      pointsColor = AppColors.danger;
+      pointsPrefix = '';
+    } else {
+      pointsColor = colorScheme.onSurfaceVariant;
+      pointsPrefix = '';
+    }
+
+    return Card(
+      elevation: 1,
+      margin: const EdgeInsets.only(bottom: 12),
+      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+      clipBehavior: Clip.antiAlias,
+      child: Column(
+        children: [
+          // Header: Code and Date
+          Container(
+            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
+            decoration: BoxDecoration(
+              color: colorScheme.surfaceContainerHighest.withValues(alpha: 0.5),
+              border: Border(
+                bottom: BorderSide(
+                  color: colorScheme.outlineVariant,
+                  width: 1,
+                ),
+              ),
+            ),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                Text(
+                  entry.entryId,
+                  style: TextStyle(
+                    fontSize: 14,
+                    fontWeight: FontWeight.w700,
+                    color: colorScheme.primary,
+                  ),
+                ),
+                Text(
+                  dateFormatter.format(entry.timestamp),
+                  style: TextStyle(
+                    fontSize: 12,
+                    color: colorScheme.onSurfaceVariant,
+                  ),
+                ),
+              ],
+            ),
+          ),
+
+          // Content: Description and Points
+          Padding(
+            padding: const EdgeInsets.all(16),
+            child: Row(
+              crossAxisAlignment: CrossAxisAlignment.center,
+              children: [
+                // Description
+                Expanded(
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      Text(
+                        entry.description,
+                        style: TextStyle(
+                          fontSize: 14,
+                          fontWeight: FontWeight.w600,
+                          color: colorScheme.onSurface,
+                        ),
+                      ),
+                      const SizedBox(height: 4),
+                      Text(
+                        'Mã tham chiếu: #${entry.entryId}',
+                        style: TextStyle(
+                          fontSize: 13,
+                          color: colorScheme.onSurfaceVariant,
+                        ),
+                      ),
+                    ],
+                  ),
+                ),
+
+                const SizedBox(width: 16),
+
+                // Points
+                Text(
+                  '$pointsPrefix${entry.points} điểm',
+                  style: TextStyle(
+                    fontSize: 20,
+                    fontWeight: FontWeight.w700,
+                    color: pointsColor,
+                  ),
+                ),
+              ],
+            ),
+          ),
+
+          // Footer: Balance After
+          Container(
+            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 10),
+            decoration: BoxDecoration(
+              color: colorScheme.surfaceContainerLowest,
+              border: Border(
+                top: BorderSide(
+                  color: colorScheme.outlineVariant.withValues(alpha: 0.5),
+                  width: 1,
+                ),
+              ),
+            ),
+            child: Row(
+              children: [
+                Text(
+                  'Số dư sau: ',
+                  style: TextStyle(
+                    fontSize: 13,
+                    color: colorScheme.onSurfaceVariant,
+                  ),
+                ),
+                Text(
+                  '${entry.balanceAfter} điểm',
+                  style: TextStyle(
+                    fontSize: 13,
+                    fontWeight: FontWeight.w600,
+                    color: colorScheme.primary,
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  /// Build inline empty state (inside scrollable list)
+  Widget _buildEmptyStateInline(ColorScheme colorScheme) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 60),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          FaIcon(
            FontAwesomeIcons.clockRotateLeft,
-            size: 80,
+            size: 64,
            color: colorScheme.onSurfaceVariant.withValues(alpha: 0.5),
          ),
          const SizedBox(height: 16),
          Text(
-            'Chưa có lịch sử điểm',
+            'Không có giao dịch',
            style: TextStyle(
-              fontSize: 18,
+              fontSize: 16,
              fontWeight: FontWeight.w600,
              color: colorScheme.onSurfaceVariant,
            ),
          ),
          const SizedBox(height: 8),
          Text(
-            'Kéo xuống để làm mới',
+            'Không tìm thấy giao dịch trong khoảng thời gian này',
            style: TextStyle(fontSize: 14, color: colorScheme.onSurfaceVariant),
+            textAlign: TextAlign.center,
          ),
        ],
      ),
@@ -293,7 +498,6 @@ class PointsHistoryPage extends ConsumerWidget {

  /// Build error state
  Widget _buildErrorState(Object error, ColorScheme colorScheme) {
-    print(error.toString());
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
--- a/lib/features/loyalty/presentation/pages/points_record_create_page.dart
+++ b/lib/features/loyalty/presentation/pages/points_record_create_page.dart
--- a/lib/features/loyalty/presentation/pages/points_records_page.dart
+++ b/lib/features/loyalty/presentation/pages/points_records_page.dart
@@ -8,9 +8,10 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:go_router/go_router.dart';
 import 'package:intl/intl.dart';
-import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:worker/core/constants/ui_constants.dart';
+import 'package:worker/core/router/app_router.dart';
 import 'package:worker/core/theme/colors.dart';
+import 'package:worker/core/widgets/loading_indicator.dart';
 import 'package:worker/features/loyalty/domain/entities/points_record.dart';
 import 'package:worker/features/loyalty/presentation/providers/points_records_provider.dart';

@@ -47,13 +48,12 @@ class PointsRecordsPage extends ConsumerWidget {
              color: colorScheme.onSurface,
              size: 20,
            ),
-            onPressed: () {
-              // TODO: Navigate to points record create page
-              ScaffoldMessenger.of(context).showSnackBar(
-                const SnackBar(
-                  content: Text('Tính năng tạo ghi nhận điểm sẽ được cập nhật'),
-                ),
-              );
+            onPressed: () async {
+              final result = await context.push<bool>(RouteNames.pointsRecordCreate);
+              if (result == true) {
+                // Refresh list after successful creation
+                ref.invalidate(allPointsRecordsProvider);
+              }
            },
          ),
          const SizedBox(width: AppSpacing.sm),
--- a/lib/features/loyalty/presentation/providers/points_history_provider.dart
+++ b/lib/features/loyalty/presentation/providers/points_history_provider.dart
@@ -9,6 +9,59 @@ import 'package:worker/features/loyalty/data/models/loyalty_point_entry_model.da

 part 'points_history_provider.g.dart';

+/// Points History Filter State
+class PointsHistoryFilter {
+  const PointsHistoryFilter({
+    this.startDate,
+    this.endDate,
+  });
+
+  final DateTime? startDate;
+  final DateTime? endDate;
+
+  PointsHistoryFilter copyWith({
+    DateTime? startDate,
+    DateTime? endDate,
+    bool clearStartDate = false,
+    bool clearEndDate = false,
+  }) {
+    return PointsHistoryFilter(
+      startDate: clearStartDate ? null : (startDate ?? this.startDate),
+      endDate: clearEndDate ? null : (endDate ?? this.endDate),
+    );
+  }
+}
+
+/// Points History Filter Provider
+@riverpod
+class PointsHistoryFilterNotifier extends _$PointsHistoryFilterNotifier {
+  @override
+  PointsHistoryFilter build() {
+    // Default: current year
+    final now = DateTime.now();
+    return PointsHistoryFilter(
+      startDate: DateTime(now.year, 1, 1),
+      endDate: DateTime(now.year, 12, 31),
+    );
+  }
+
+  void setDateRange(DateTime? start, DateTime? end) {
+    state = PointsHistoryFilter(startDate: start, endDate: end);
+  }
+
+  void setStartDate(DateTime? date) {
+    state = state.copyWith(startDate: date);
+  }
+
+  void setEndDate(DateTime? date) {
+    state = state.copyWith(endDate: date);
+  }
+
+  void clearFilter() {
+    state = const PointsHistoryFilter();
+  }
+}
+
 /// Points History Local Data Source Provider
@riverpod
 PointsHistoryLocalDataSource pointsHistoryLocalDataSource(Ref ref) {
@@ -44,3 +97,41 @@ class PointsHistory extends _$PointsHistory {
    });
  }
 }
+
+/// Filtered Points History Provider
+@riverpod
+Future<List<LoyaltyPointEntryModel>> filteredPointsHistory(Ref ref) async {
+  final entries = await ref.watch(pointsHistoryProvider.future);
+  final filter = ref.watch(pointsHistoryFilterProvider);
+
+  return entries.where((entry) {
+    // Filter by start date
+    if (filter.startDate != null) {
+      final startOfDay = DateTime(
+        filter.startDate!.year,
+        filter.startDate!.month,
+        filter.startDate!.day,
+      );
+      if (entry.timestamp.isBefore(startOfDay)) {
+        return false;
+      }
+    }
+
+    // Filter by end date
+    if (filter.endDate != null) {
+      final endOfDay = DateTime(
+        filter.endDate!.year,
+        filter.endDate!.month,
+        filter.endDate!.day,
+        23,
+        59,
+        59,
+      );
+      if (entry.timestamp.isAfter(endOfDay)) {
+        return false;
+      }
+    }
+
+    return true;
+  }).toList();
+}
--- a/lib/features/loyalty/presentation/providers/points_history_provider.g.dart
+++ b/lib/features/loyalty/presentation/providers/points_history_provider.g.dart
@@ -8,6 +8,68 @@ part of 'points_history_provider.dart';

 // GENERATED CODE - DO NOT MODIFY BY HAND
 // ignore_for_file: type=lint, type=warning
+/// Points History Filter Provider
+
+@ProviderFor(PointsHistoryFilterNotifier)
+const pointsHistoryFilterProvider = PointsHistoryFilterNotifierProvider._();
+
+/// Points History Filter Provider
+final class PointsHistoryFilterNotifierProvider
+    extends
+        $NotifierProvider<PointsHistoryFilterNotifier, PointsHistoryFilter> {
+  /// Points History Filter Provider
+  const PointsHistoryFilterNotifierProvider._()
+    : super(
+        from: null,
+        argument: null,
+        retry: null,
+        name: r'pointsHistoryFilterProvider',
+        isAutoDispose: true,
+        dependencies: null,
+        $allTransitiveDependencies: null,
+      );
+
+  @override
+  String debugGetCreateSourceHash() => _$pointsHistoryFilterNotifierHash();
+
+  @$internal
+  @override
+  PointsHistoryFilterNotifier create() => PointsHistoryFilterNotifier();
+
+  /// {@macro riverpod.override_with_value}
+  Override overrideWithValue(PointsHistoryFilter value) {
+    return $ProviderOverride(
+      origin: this,
+      providerOverride: $SyncValueProvider<PointsHistoryFilter>(value),
+    );
+  }
+}
+
+String _$pointsHistoryFilterNotifierHash() =>
+    r'ef2587f4461c9488d9b15ed033e1d362042795f8';
+
+/// Points History Filter Provider
+
+abstract class _$PointsHistoryFilterNotifier
+    extends $Notifier<PointsHistoryFilter> {
+  PointsHistoryFilter build();
+  @$mustCallSuper
+  @override
+  void runBuild() {
+    final created = build();
+    final ref = this.ref as $Ref<PointsHistoryFilter, PointsHistoryFilter>;
+    final element =
+        ref.element
+            as $ClassProviderElement<
+              AnyNotifier<PointsHistoryFilter, PointsHistoryFilter>,
+              PointsHistoryFilter,
+              Object?,
+              Object?
+            >;
+    element.handleValue(ref, created);
+  }
+}
+
 /// Points History Local Data Source Provider

@ProviderFor(pointsHistoryLocalDataSource)
@@ -130,3 +192,50 @@ abstract class _$PointsHistory
    element.handleValue(ref, created);
  }
 }
+
+/// Filtered Points History Provider
+
+@ProviderFor(filteredPointsHistory)
+const filteredPointsHistoryProvider = FilteredPointsHistoryProvider._();
+
+/// Filtered Points History Provider
+
+final class FilteredPointsHistoryProvider
+    extends
+        $FunctionalProvider<
+          AsyncValue<List<LoyaltyPointEntryModel>>,
+          List<LoyaltyPointEntryModel>,
+          FutureOr<List<LoyaltyPointEntryModel>>
+        >
+    with
+        $FutureModifier<List<LoyaltyPointEntryModel>>,
+        $FutureProvider<List<LoyaltyPointEntryModel>> {
+  /// Filtered Points History Provider
+  const FilteredPointsHistoryProvider._()
+    : super(
+        from: null,
+        argument: null,
+        retry: null,
+        name: r'filteredPointsHistoryProvider',
+        isAutoDispose: true,
+        dependencies: null,
+        $allTransitiveDependencies: null,
+      );
+
+  @override
+  String debugGetCreateSourceHash() => _$filteredPointsHistoryHash();
+
+  @$internal
+  @override
+  $FutureProviderElement<List<LoyaltyPointEntryModel>> $createElement(
+    $ProviderPointer pointer,
+  ) => $FutureProviderElement(pointer);
+
+  @override
+  FutureOr<List<LoyaltyPointEntryModel>> create(Ref ref) {
+    return filteredPointsHistory(ref);
+  }
+}
+
+String _$filteredPointsHistoryHash() =>
+    r'989e2bf824eeb161b44b67d9ee81b713444a6e87';
--- a/lib/features/products/presentation/widgets/product_card.dart
+++ b/lib/features/products/presentation/widgets/product_card.dart
@@ -9,6 +9,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:intl/intl.dart';
 import 'package:shimmer/shimmer.dart';
+import 'package:url_launcher/url_launcher.dart';
 import 'package:worker/core/constants/ui_constants.dart';
 import 'package:worker/core/theme/colors.dart';
 import 'package:worker/features/products/domain/entities/product.dart';
@@ -273,17 +274,14 @@ class ProductCard extends ConsumerWidget {
                          width: double.infinity,
                          height: 36.0,
                          child: OutlinedButton.icon(
-                            onPressed: () {
-                              // TODO: Open 360 view in browser
-                              // For now, show a message
-                              ScaffoldMessenger.of(context).showSnackBar(
-                                const SnackBar(
-                                  content: Text(
-                                    'Đang phát triển tính năng xem 360°',
-                                  ),
-                                  duration: Duration(seconds: 2),
-                                ),
-                              );
+                            onPressed: () async {
+                              final url = Uri.parse(product.customLink360!);
+                              if (await canLaunchUrl(url)) {
+                                await launchUrl(
+                                  url,
+                                  mode: LaunchMode.inAppWebView,
+                                );
+                              }
                            },
                            style: OutlinedButton.styleFrom(
                              foregroundColor: colorScheme.primary,
--- a/lib/features/products/presentation/widgets/product_detail/image_gallery_section.dart
+++ b/lib/features/products/presentation/widgets/product_detail/image_gallery_section.dart
@@ -7,6 +7,7 @@ import 'package:cached_network_image/cached_network_image.dart';
 import 'package:flutter/material.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 import 'package:shimmer/shimmer.dart';
+import 'package:url_launcher/url_launcher.dart';
 import 'package:worker/core/constants/ui_constants.dart';
 import 'package:worker/features/products/domain/entities/product.dart';

@@ -18,7 +19,6 @@ import 'package:worker/features/products/domain/entities/product.dart';
 /// - Image indicators (dots)
 /// - Thumbnail gallery row (horizontal scroll)
 class ImageGallerySection extends StatefulWidget {
-
  const ImageGallerySection({super.key, required this.product});
  final Product product;

@@ -40,22 +40,15 @@ class _ImageGallerySectionState extends State<ImageGallerySection> {
    setState(() {
      _currentImageIndex = index;
    });
-    _pageController.animateToPage(
-      index,
-      duration: AppDuration.medium,
-      curve: Curves.easeInOut,
-    );
+    _pageController.animateToPage(index, duration: AppDuration.medium, curve: Curves.easeInOut);
  }

-  void _open360View() {
+  void _open360View() async {
    if (widget.product.customLink360 != null) {
-      // TODO: Open in browser
-      ScaffoldMessenger.of(context).showSnackBar(
-        const SnackBar(
-          content: Text('Đang phát triển tính năng xem 360°'),
-          duration: Duration(seconds: 2),
-        ),
-      );
+      final url = Uri.parse(widget.product.customLink360!);
+      if (await canLaunchUrl(url)) {
+        await launchUrl(url, mode: LaunchMode.inAppWebView);
+      }
    }
  }

@@ -108,11 +101,7 @@ class _ImageGallerySectionState extends State<ImageGallerySection> {
                        ),
                        errorWidget: (context, url, error) => Container(
                          color: colorScheme.surfaceContainerHighest,
-                          child: Icon(
-                            FontAwesomeIcons.image,
-                            size: 64,
-                            color: colorScheme.onSurfaceVariant,
-                          ),
+                          child: Icon(FontAwesomeIcons.image, size: 64, color: colorScheme.onSurfaceVariant),
                        ),
                      ),
                    );
@@ -131,10 +120,7 @@ class _ImageGallerySectionState extends State<ImageGallerySection> {
                        onTap: _open360View,
                        borderRadius: BorderRadius.circular(20),
                        child: Container(
-                          padding: const EdgeInsets.symmetric(
-                            horizontal: 12,
-                            vertical: 8,
-                          ),
+                          padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
                          child: Row(
                            mainAxisSize: MainAxisSize.min,
                            children: [
@@ -144,11 +130,7 @@ class _ImageGallerySectionState extends State<ImageGallerySection> {
                                builder: (context, double value, child) {
                                  return Transform.rotate(
                                    angle: value * 2 * 3.14159,
-                                    child: Icon(
-                                      FontAwesomeIcons.arrowsRotate,
-                                      size: 10,
-                                      color: colorScheme.surface,
-                                    ),
+                                    child: Icon(FontAwesomeIcons.arrowsRotate, size: 10, color: colorScheme.surface),
                                  );
                                },
                                onEnd: () {
@@ -159,11 +141,7 @@ class _ImageGallerySectionState extends State<ImageGallerySection> {
                              const SizedBox(width: 6),
                              Text(
                                '360°',
-                                style: TextStyle(
-                                  color: colorScheme.surface,
-                                  fontSize: 12,
-                                  fontWeight: FontWeight.w600,
-                                ),
+                                style: TextStyle(color: colorScheme.surface, fontSize: 12, fontWeight: FontWeight.w600),
                              ),
                            ],
                          ),
@@ -245,9 +223,7 @@ class _ImageGallerySectionState extends State<ImageGallerySection> {
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(8),
                                border: Border.all(
-                                  color: isActive
-                                      ? colorScheme.primary
-                                      : Colors.transparent,
+                                  color: isActive ? colorScheme.primary : Colors.transparent,
                                  width: 2,
                                ),
                              ),
@@ -256,15 +232,10 @@ class _ImageGallerySectionState extends State<ImageGallerySection> {
                                child: CachedNetworkImage(
                                  imageUrl: imageUrl,
                                  fit: BoxFit.cover,
-                                  placeholder: (context, url) =>
-                                      Container(color: colorScheme.surfaceContainerHighest),
+                                  placeholder: (context, url) => Container(color: colorScheme.surfaceContainerHighest),
                                  errorWidget: (context, url, error) => Container(
                                    color: colorScheme.surfaceContainerHighest,
-                                    child: Icon(
-                                      FontAwesomeIcons.image,
-                                      size: 20,
-                                      color: colorScheme.onSurfaceVariant,
-                                    ),
+                                    child: Icon(FontAwesomeIcons.image, size: 20, color: colorScheme.onSurfaceVariant),
                                  ),
                                ),
                              ),
@@ -285,12 +256,7 @@ class _ImageGallerySectionState extends State<ImageGallerySection> {

 /// Image Lightbox for full-screen image viewing
 class _ImageLightbox extends StatefulWidget {
-
-  const _ImageLightbox({
-    required this.images,
-    required this.imageCaptions,
-    required this.initialIndex,
-  });
+  const _ImageLightbox({required this.images, required this.imageCaptions, required this.initialIndex});
  final List<String> images;
  final Map<String, String> imageCaptions;
  final int initialIndex;
@@ -318,19 +284,13 @@ class _ImageLightboxState extends State<_ImageLightbox> {

  void _nextImage() {
    if (_currentIndex < widget.images.length - 1) {
-      _pageController.nextPage(
-        duration: AppDuration.medium,
-        curve: Curves.easeInOut,
-      );
+      _pageController.nextPage(duration: AppDuration.medium, curve: Curves.easeInOut);
    }
  }

  void _previousImage() {
    if (_currentIndex > 0) {
-      _pageController.previousPage(
-        duration: AppDuration.medium,
-        curve: Curves.easeInOut,
-      );
+      _pageController.previousPage(duration: AppDuration.medium, curve: Curves.easeInOut);
    }
  }

@@ -372,11 +332,8 @@ class _ImageLightboxState extends State<_ImageLightbox> {
                  child: CachedNetworkImage(
                    imageUrl: widget.images[index],
                    fit: BoxFit.contain,
-                    errorWidget: (context, url, error) => Icon(
-                      FontAwesomeIcons.circleExclamation,
-                      color: colorScheme.surface,
-                      size: 64,
-                    ),
+                    errorWidget: (context, url, error) =>
+                        Icon(FontAwesomeIcons.circleExclamation, color: colorScheme.surface, size: 64),
                  ),
                ),
              );
@@ -393,15 +350,9 @@ class _ImageLightboxState extends State<_ImageLightbox> {
                bottom: 0,
                child: Center(
                  child: IconButton(
-                    icon: Icon(
-                      FontAwesomeIcons.chevronLeft,
-                      color: colorScheme.surface,
-                      size: 32,
-                    ),
+                    icon: Icon(FontAwesomeIcons.chevronLeft, color: colorScheme.surface, size: 32),
                    onPressed: _previousImage,
-                    style: IconButton.styleFrom(
-                      backgroundColor: Colors.white.withAlpha(51),
-                    ),
+                    style: IconButton.styleFrom(backgroundColor: Colors.white.withAlpha(51)),
                  ),
                ),
              ),
@@ -414,15 +365,9 @@ class _ImageLightboxState extends State<_ImageLightbox> {
                bottom: 0,
                child: Center(
                  child: IconButton(
-                    icon: Icon(
-                      FontAwesomeIcons.chevronRight,
-                      color: colorScheme.surface,
-                      size: 32,
-                    ),
+                    icon: Icon(FontAwesomeIcons.chevronRight, color: colorScheme.surface, size: 32),
                    onPressed: _nextImage,
-                    style: IconButton.styleFrom(
-                      backgroundColor: Colors.white.withAlpha(51),
-                    ),
+                    style: IconButton.styleFrom(backgroundColor: Colors.white.withAlpha(51)),
                  ),
                ),
              ),
--- a/lib/features/projects/presentation/pages/submission_create_page.dart
+++ b/lib/features/projects/presentation/pages/submission_create_page.dart
@@ -53,10 +53,14 @@ class _SubmissionCreatePageState extends ConsumerState<SubmissionCreatePage> {
  bool _isSubmitting = false;
  bool _isLoadingDetail = false;
  String? _deletingFileId; // Track which file is being deleted
+  bool _isAllowModify = true; // From API detail response

  /// Whether we're editing an existing submission
  bool get isEditing => widget.submission != null;

+  /// Whether the form is read-only (editing but not allowed to modify)
+  bool get isReadOnly => isEditing && !_isAllowModify;
+
  @override
  void initState() {
    super.initState();
@@ -101,6 +105,9 @@ class _SubmissionCreatePageState extends ConsumerState<SubmissionCreatePage> {

      // Set existing files from API
      _existingFiles = detail.filesList;
+
+      // Set modify permission from API
+      _isAllowModify = detail.isAllowModify;
    } catch (e) {
      if (mounted) {
        ScaffoldMessenger.of(context).showSnackBar(
@@ -146,7 +153,11 @@ class _SubmissionCreatePageState extends ConsumerState<SubmissionCreatePage> {
          onPressed: () => Navigator.of(context).pop(),
        ),
        title: Text(
-          isEditing ? 'Chỉnh sửa Dự án' : 'Đăng ký Công trình',
+          isReadOnly
+              ? 'Chi tiết Dự án'
+              : isEditing
+                  ? 'Chỉnh sửa Dự án'
+                  : 'Đăng ký Công trình',
          style: TextStyle(color: colorScheme.onSurface),
        ),
        actions: [
@@ -197,10 +208,12 @@ class _SubmissionCreatePageState extends ConsumerState<SubmissionCreatePage> {

            // File Upload
            _buildFileUploadCard(colorScheme),
-            const SizedBox(height: 24),

-            // Submit Button
-            _buildSubmitButton(colorScheme),
+            // Submit Button - only show when not read-only
+            if (!isReadOnly) ...[
+              const SizedBox(height: 24),
+              _buildSubmitButton(colorScheme),
+            ],
            const SizedBox(height: 40),
          ],
        ),
@@ -376,49 +389,50 @@ class _SubmissionCreatePageState extends ConsumerState<SubmissionCreatePage> {
            ),
            const SizedBox(height: 16),

-            // Upload Area
-            InkWell(
-              onTap: _pickFiles,
-              borderRadius: BorderRadius.circular(8),
-              child: Container(
-                padding: const EdgeInsets.symmetric(vertical: 40, horizontal: 20),
-                width: double.infinity,
-                decoration: BoxDecoration(
-                  border: Border.all(
-                    color: colorScheme.surfaceContainerHighest,
-                    width: 2,
-                    style: BorderStyle.solid,
+            // Upload Area - only show when not read-only
+            if (!isReadOnly)
+              InkWell(
+                onTap: _pickFiles,
+                borderRadius: BorderRadius.circular(8),
+                child: Container(
+                  padding: const EdgeInsets.symmetric(vertical: 40, horizontal: 20),
+                  width: double.infinity,
+                  decoration: BoxDecoration(
+                    border: Border.all(
+                      color: colorScheme.surfaceContainerHighest,
+                      width: 2,
+                      style: BorderStyle.solid,
+                    ),
+                    borderRadius: BorderRadius.circular(8),
                  ),
-                  borderRadius: BorderRadius.circular(8),
-                ),
-                child: Column(
-                  children: [
-                    FaIcon(
-                      FontAwesomeIcons.cloudArrowUp,
-                      size: 48,
-                      color: colorScheme.onSurfaceVariant,
-                    ),
-                    const SizedBox(height: 12),
-                    Text(
-                      'Kéo thả ảnh vào đây',
-                      style: TextStyle(
-                        fontSize: 16,
-                        fontWeight: FontWeight.w500,
-                        color: colorScheme.onSurface,
-                      ),
-                    ),
-                    const SizedBox(height: 4),
-                    Text(
-                      'hoặc nhấn để chọn file',
-                      style: TextStyle(
-                        fontSize: 14,
+                  child: Column(
+                    children: [
+                      FaIcon(
+                        FontAwesomeIcons.cloudArrowUp,
+                        size: 48,
                        color: colorScheme.onSurfaceVariant,
                      ),
-                    ),
-                  ],
+                      const SizedBox(height: 12),
+                      Text(
+                        'Kéo thả ảnh vào đây',
+                        style: TextStyle(
+                          fontSize: 16,
+                          fontWeight: FontWeight.w500,
+                          color: colorScheme.onSurface,
+                        ),
+                      ),
+                      const SizedBox(height: 4),
+                      Text(
+                        'hoặc nhấn để chọn file',
+                        style: TextStyle(
+                          fontSize: 14,
+                          color: colorScheme.onSurfaceVariant,
+                        ),
+                      ),
+                    ],
+                  ),
                ),
              ),
-            ),

            // Existing files from API
            if (_existingFiles.isNotEmpty) ...[
@@ -488,7 +502,9 @@ class _SubmissionCreatePageState extends ConsumerState<SubmissionCreatePage> {
    int maxLines = 1,
    TextInputType? keyboardType,
    String? helperText,
+    bool? readOnly,
  }) {
+    final isFieldReadOnly = readOnly ?? isReadOnly;
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
@@ -517,11 +533,12 @@ class _SubmissionCreatePageState extends ConsumerState<SubmissionCreatePage> {
          controller: controller,
          maxLines: maxLines,
          keyboardType: keyboardType,
+          readOnly: isFieldReadOnly,
          decoration: InputDecoration(
            hintText: hint,
            hintStyle: TextStyle(color: colorScheme.onSurfaceVariant),
            filled: true,
-            fillColor: colorScheme.surface,
+            fillColor: isFieldReadOnly ? colorScheme.surfaceContainerHighest : colorScheme.surface,
            border: OutlineInputBorder(
              borderRadius: BorderRadius.circular(8),
              borderSide: BorderSide(color: colorScheme.surfaceContainerHighest),
@@ -594,10 +611,10 @@ class _SubmissionCreatePageState extends ConsumerState<SubmissionCreatePage> {
        const SizedBox(height: 8),
        progressListAsync.when(
          data: (progressList) => DropdownButtonFormField<ProjectProgress>(
-            initialValue: _selectedProgress,
+            value: _selectedProgress,
            decoration: InputDecoration(
              filled: true,
-              fillColor: colorScheme.surface,
+              fillColor: isReadOnly ? colorScheme.surfaceContainerHighest : colorScheme.surface,
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(8),
                borderSide: BorderSide(color: colorScheme.surfaceContainerHighest),
@@ -618,11 +635,13 @@ class _SubmissionCreatePageState extends ConsumerState<SubmissionCreatePage> {
                      child: Text(progress.status),
                    ))
                .toList(),
-            onChanged: (value) {
-              setState(() {
-                _selectedProgress = value;
-              });
-            },
+            onChanged: isReadOnly
+                ? null
+                : (value) {
+                    setState(() {
+                      _selectedProgress = value;
+                    });
+                  },
            validator: (value) {
              if (value == null) {
                return 'Vui lòng chọn tiến độ công trình';
@@ -692,11 +711,11 @@ class _SubmissionCreatePageState extends ConsumerState<SubmissionCreatePage> {
        ),
        const SizedBox(height: 8),
        InkWell(
-          onTap: _pickExpectedDate,
+          onTap: isReadOnly ? null : _pickExpectedDate,
          child: Container(
            padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
            decoration: BoxDecoration(
-              color: colorScheme.surface,
+              color: isReadOnly ? colorScheme.surfaceContainerHighest : colorScheme.surface,
              border: Border.all(color: colorScheme.surfaceContainerHighest),
              borderRadius: BorderRadius.circular(8),
            ),
@@ -847,8 +866,8 @@ class _SubmissionCreatePageState extends ConsumerState<SubmissionCreatePage> {
              ],
            ),
          ),
-          // Only show remove button when not uploading
-          if (!_isSubmitting)
+          // Only show remove button when not uploading and not read-only
+          if (!_isSubmitting && !isReadOnly)
            IconButton(
              icon: const FaIcon(
                FontAwesomeIcons.xmark,
@@ -961,8 +980,8 @@ class _SubmissionCreatePageState extends ConsumerState<SubmissionCreatePage> {
              ],
            ),
          ),
-          // Delete button or checkmark
-          if (!_isSubmitting && !isDeleting)
+          // Delete button or checkmark - only show delete when not read-only
+          if (!_isSubmitting && !isDeleting && !isReadOnly)
            IconButton(
              icon: const FaIcon(
                FontAwesomeIcons.trash,
@@ -1147,13 +1166,13 @@ class _SubmissionCreatePageState extends ConsumerState<SubmissionCreatePage> {
                height: 24,
                child: CustomLoadingIndicator(color: Colors.white, size: 20),
              )
-            : const Row(
+            : Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
-                  FaIcon(FontAwesomeIcons.paperPlane, size: 16),
-                  SizedBox(width: 8),
+                  const FaIcon(FontAwesomeIcons.paperPlane, size: 16),
+                  const SizedBox(width: 8),
                  Text(
-                    'Gửi đăng ký',
+                    isEditing ? 'Cập nhật' : 'Gửi đăng ký',
                    style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.w600,
@@ -1166,10 +1185,19 @@ class _SubmissionCreatePageState extends ConsumerState<SubmissionCreatePage> {
  }

  Future<void> _pickExpectedDate() async {
+    final now = DateTime.now();
+    final today = DateTime(now.year, now.month, now.day);
+
+    // For editing mode with past date, allow selecting from that date
+    // Otherwise, start from today
+    final firstDate = (_expectedStartDate != null && _expectedStartDate!.isBefore(today))
+        ? _expectedStartDate!
+        : today;
+
    final date = await showDatePicker(
      context: context,
-      initialDate: _expectedStartDate ?? DateTime.now(),
-      firstDate: DateTime.now(),
+      initialDate: _expectedStartDate ?? today,
+      firstDate: firstDate,
      lastDate: DateTime.now().add(const Duration(days: 365 * 3)),
    );

--- a/pubspec.yaml
+++ b/pubspec.yaml
@@ -16,7 +16,7 @@ publish_to: 'none' # Remove this line if you wish to publish to pub.dev
 # https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
 # In Windows, build-name is used as the major, minor, and patch parts
 # of the product and file versions while build-number is used as the build suffix.
-version: 1.0.1+23
+version: 1.0.1+26

 environment:
  sdk: ^3.10.0
Author	SHA1	Message	Date
Phuoc Nguyen	597c6a0e57	fix homepage news, invoice	2025-12-09 11:17:32 +07:00
Phuoc Nguyen	e0a9b3b9f4	point	2025-12-05 10:11:03 +07:00
Phuoc Nguyen	b9b6d91a87	update point	2025-12-04 11:43:27 +07:00
Phuoc Nguyen	d4de557662	fix update page	2025-12-04 10:39:47 +07:00