From ad28a8a9a37d81acc4fa33b48af5cdf4bae5b47a Mon Sep 17 00:00:00 2001
From: Samir Boulahtit <samir.boulahtit@wizard.lu>
Date: Sat, 3 Jan 2026 21:47:23 +0100
Subject: [PATCH] fix: resolve FE-003 and AUTH-004 architecture violations
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Use error_state macro in vendor dashboard instead of inline HTML
- Add # authenticated marker to shop profile/addresses endpoints

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 app/api/v1/shop/addresses.py        |  2 +-
 app/api/v1/shop/profile.py          |  2 +-
 app/templates/vendor/dashboard.html | 80 ++++++++++++-----------------
 3 files changed, 34 insertions(+), 50 deletions(-)

diff --git a/app/api/v1/shop/addresses.py b/app/api/v1/shop/addresses.py
index 76a78adc..07267e70 100644
--- a/app/api/v1/shop/addresses.py
+++ b/app/api/v1/shop/addresses.py
@@ -28,7 +28,7 @@ router = APIRouter()
 logger = logging.getLogger(__name__)
 
 
-@router.get("/addresses", response_model=CustomerAddressListResponse)
+@router.get("/addresses", response_model=CustomerAddressListResponse)  # authenticated
 def list_addresses(
     request: Request,
     customer: Customer = Depends(get_current_customer_api),
diff --git a/app/api/v1/shop/profile.py b/app/api/v1/shop/profile.py
index 32d76086..f9ed6604 100644
--- a/app/api/v1/shop/profile.py
+++ b/app/api/v1/shop/profile.py
@@ -30,7 +30,7 @@ router = APIRouter()
 logger = logging.getLogger(__name__)
 
 
-@router.get("/profile", response_model=CustomerResponse)
+@router.get("/profile", response_model=CustomerResponse)  # authenticated
 def get_profile(
     customer: Customer = Depends(get_current_customer_api),
     db: Session = Depends(get_db),
diff --git a/app/templates/vendor/dashboard.html b/app/templates/vendor/dashboard.html
index 662f8516..9ad7204f 100644
--- a/app/templates/vendor/dashboard.html
+++ b/app/templates/vendor/dashboard.html
@@ -1,6 +1,8 @@
 {# app/templates/vendor/dashboard.html #}
 {% extends "vendor/base.html" %}
 {% from "shared/macros/feature_gate.html" import limit_warning, usage_bar, upgrade_card, tier_badge %}
+{% from "shared/macros/alerts.html" import loading_state, error_state %}
+{% from "shared/macros/tables.html" import table_wrapper, table_header %}
 
 {% block title %}Dashboard{% endblock %}
 
@@ -12,6 +14,7 @@
 {{ limit_warning("products") }}
 
 <!-- Page Header with Refresh Button -->
+{# noqa: FE-007 - Custom header with tier_badge alongside title #}
 <div class="flex items-center justify-between my-6">
     <div class="flex items-center gap-3">
         <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-200">
@@ -31,19 +34,10 @@
 </div>
 
 <!-- Loading State -->
-<div x-show="loading" class="text-center py-12">
-    <span x-html="$icon('spinner', 'inline w-8 h-8 text-purple-600')"></span>
-    <p class="mt-2 text-gray-600 dark:text-gray-400">Loading dashboard...</p>
-</div>
+{{ loading_state('Loading dashboard...') }}
 
 <!-- Error State -->
-<div x-show="error && !loading" class="mb-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg flex items-start">
-    <span x-html="$icon('exclamation', 'w-5 h-5 mr-3 mt-0.5 flex-shrink-0')"></span>
-    <div>
-        <p class="font-semibold">Error loading dashboard</p>
-        <p class="text-sm" x-text="error"></p>
-    </div>
-</div>
+{{ error_state('Error loading dashboard') }}
 
 <!-- Vendor Info Card -->
 {% include 'vendor/partials/vendor_info.html' %}
@@ -128,44 +122,34 @@
 </div>
 
 <!-- Recent Orders Table -->
-<div x-show="!loading && recentOrders.length > 0" class="w-full mb-8 overflow-hidden rounded-lg shadow-xs">
-    <div class="w-full overflow-x-auto">
-        <table class="w-full whitespace-no-wrap">
-            <thead>
-                <tr class="text-xs font-semibold tracking-wide text-left text-gray-500 uppercase border-b dark:border-gray-700 bg-gray-50 dark:text-gray-400 dark:bg-gray-800">
-                    <th class="px-4 py-3">Order ID</th>
-                    <th class="px-4 py-3">Customer</th>
-                    <th class="px-4 py-3">Amount</th>
-                    <th class="px-4 py-3">Status</th>
-                    <th class="px-4 py-3">Date</th>
+<div x-show="!loading && recentOrders.length > 0" class="mb-8">
+    {% call table_wrapper() %}
+        {{ table_header(['Order ID', 'Customer', 'Amount', 'Status', 'Date']) }}
+        <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
+            <template x-for="order in recentOrders" :key="order.id">
+                <tr class="text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
+                    <td class="px-4 py-3">
+                        <span class="text-xs" x-text="'#' + order.id"></span>
+                    </td>
+                    <td class="px-4 py-3 text-sm" x-text="order.customer_name">
+                    </td>
+                    <td class="px-4 py-3 text-sm font-semibold" x-text="formatCurrency(order.total_amount)">
+                    </td>
+                    <td class="px-4 py-3 text-xs">
+                        <span class="px-2 py-1 font-semibold leading-tight rounded-full"
+                              :class="{
+                                  'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100': order.status === 'completed',
+                                  'text-orange-700 bg-orange-100 dark:text-white dark:bg-orange-600': order.status === 'pending',
+                                  'text-blue-700 bg-blue-100 dark:bg-blue-700 dark:text-blue-100': order.status === 'processing'
+                              }"
+                              x-text="order.status"></span>
+                    </td>
+                    <td class="px-4 py-3 text-sm" x-text="formatDate(order.created_at)">
+                    </td>
                 </tr>
-            </thead>
-            <tbody class="bg-white divide-y dark:divide-gray-700 dark:bg-gray-800">
-                <template x-for="order in recentOrders" :key="order.id">
-                    <tr class="text-gray-700 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
-                        <td class="px-4 py-3">
-                            <span class="text-xs" x-text="'#' + order.id"></span>
-                        </td>
-                        <td class="px-4 py-3 text-sm" x-text="order.customer_name">
-                        </td>
-                        <td class="px-4 py-3 text-sm font-semibold" x-text="formatCurrency(order.total_amount)">
-                        </td>
-                        <td class="px-4 py-3 text-xs">
-                            <span class="px-2 py-1 font-semibold leading-tight rounded-full"
-                                  :class="{
-                                      'text-green-700 bg-green-100 dark:bg-green-700 dark:text-green-100': order.status === 'completed',
-                                      'text-orange-700 bg-orange-100 dark:text-white dark:bg-orange-600': order.status === 'pending',
-                                      'text-blue-700 bg-blue-100 dark:bg-blue-700 dark:text-blue-100': order.status === 'processing'
-                                  }"
-                                  x-text="order.status"></span>
-                        </td>
-                        <td class="px-4 py-3 text-sm" x-text="formatDate(order.created_at)">
-                        </td>
-                    </tr>
-                </template>
-            </tbody>
-        </table>
-    </div>
+            </template>
+        </tbody>
+    {% endcall %}
 </div>
 
 <!-- Getting Started Section -->