From 19d692afe7cfafa012bbbee21482e62ad8b3eacd Mon Sep 17 00:00:00 2001
From: gsinghpal <gur_preet.singh@outlook.com>
Date: Thu, 14 May 2026 01:18:04 -0400
Subject: [PATCH] feat(fusion_clock): NFC kiosk QWeb template with static
 chrome + setup wizard

Replace placeholder template with full version: static chrome (company,
clock, date, location, settings button), one-time setup wizard state,
hidden video/canvas for camera, and data-* attrs for JS feature flags.
Update test assertion from h1 text to nfc_kiosk_root id to match new markup.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 fusion_clock/tests/test_clock_nfc_kiosk.py |  2 +-
 fusion_clock/views/kiosk_nfc_templates.xml | 37 ++++++++++++++++++----
 2 files changed, 32 insertions(+), 7 deletions(-)

diff --git a/fusion_clock/tests/test_clock_nfc_kiosk.py b/fusion_clock/tests/test_clock_nfc_kiosk.py
index e58ba12d..7a47e9ec 100644
--- a/fusion_clock/tests/test_clock_nfc_kiosk.py
+++ b/fusion_clock/tests/test_clock_nfc_kiosk.py
@@ -35,7 +35,7 @@ class TestNfcKioskController(HttpCase):
         self.authenticate('nfc-kiosk-test', 'kioskpass123')
         response = self.url_open('/fusion_clock/kiosk/nfc')
         self.assertEqual(response.status_code, 200)
-        self.assertIn('NFC Clock Kiosk', response.text)
+        self.assertIn('nfc_kiosk_root', response.text)
 
 
 from odoo.tests.common import TransactionCase
diff --git a/fusion_clock/views/kiosk_nfc_templates.xml b/fusion_clock/views/kiosk_nfc_templates.xml
index d01d472a..500e3225 100644
--- a/fusion_clock/views/kiosk_nfc_templates.xml
+++ b/fusion_clock/views/kiosk_nfc_templates.xml
@@ -5,14 +5,39 @@
         <t t-call="web.frontend_layout">
             <t t-set="no_header" t-value="True"/>
             <t t-set="no_footer" t-value="True"/>
-            <div id="nfc_kiosk_root" class="nfc-kiosk">
-                <h1>NFC Clock Kiosk</h1>
-                <div t-if="not location_configured" class="alert alert-warning">
-                    No NFC kiosk location configured for <t t-esc="company_name"/>. Ask your administrator to configure one in Fusion Clock settings.
+            <t t-set="head">
+                <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
+            </t>
+
+            <div id="nfc_kiosk_root" class="nfc-kiosk"
+                 t-att-data-photo-required="'1' if photo_required else '0'"
+                 t-att-data-debug-enabled="'1' if debug_enabled else '0'"
+                 t-att-data-location-configured="'1' if location_configured else '0'">
+
+                <!-- Static chrome (always visible) -->
+                <div class="nfc-kiosk__company" t-esc="company_name"/>
+                <div class="nfc-kiosk__time" id="nfc_clock_time">--:--</div>
+                <div class="nfc-kiosk__date" id="nfc_clock_date">—</div>
+                <div class="nfc-kiosk__location">
+                    <span t-if="location_configured">Clock at: <t t-esc="location_name"/></span>
+                    <span t-else="" style="color:#d9374e">⚠ No location configured</span>
                 </div>
-                <div t-else="">
-                    <p>Clock at: <span t-esc="location_name"/></p>
+                <button class="nfc-kiosk__settings" id="nfc_settings_btn" title="Enroll Mode">⚙</button>
+
+                <!-- Dynamic state container (JS swaps inner HTML) -->
+                <div id="nfc_state_container">
+                    <!-- Initially: One-time setup wizard step 1 -->
+                    <div class="nfc-kiosk__setup">
+                        <h2>Welcome to Fusion Clock NFC Kiosk</h2>
+                        <p>Tap the button below to enable the NFC reader and camera. This is a one-time setup for this device.</p>
+                        <button id="nfc_setup_start">Tap to enable NFC reader</button>
+                    </div>
                 </div>
+
+                <!-- Hidden video element for camera feed -->
+                <video id="nfc_camera_feed" autoplay="autoplay" playsinline="playsinline" muted="muted"
+                       style="position:absolute; width:1px; height:1px; opacity:0; pointer-events:none;"/>
+                <canvas id="nfc_camera_canvas" style="display:none;"/>
             </div>
         </t>
     </template>