nodebb-plugin-niki-loyalty 1.3.0 → 1.3.1

package/static/widgets/niki-kasa-widget.html

@@ -0,0 +1,506 @@
+<script src="https://unpkg.com/html5-qrcode" type="text/javascript"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/locale/tr.min.js"></script>
+
+<style>
+    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
+    body.niki-kasa-body { background-color: #000; margin: 0; padding: 0; overflow: hidden; }
+    #content { padding: 0 !important; margin: 0 !important; width: 100% !important; background: #000; }
+
+    /* GİRİŞ */
+    .start-view { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #111; z-index: 100; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: 'Poppins', sans-serif; }
+    .logo-box { width: 90px; height: 90px; border-radius: 50%; border: 3px solid #C5A065; display: flex; align-items: center; justify-content: center; margin-bottom: 30px; box-shadow: 0 0 30px rgba(197, 160, 101, 0.2); background: #000; }
+    .btn-start { background: #C5A065; color: #000; padding: 18px 40px; border-radius: 14px; font-weight: 700; border: none; cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 16px; margin-bottom: 15px; width: 260px; justify-content: center; box-shadow: 0 5px 15px rgba(197, 160, 101, 0.3); }
+    .btn-hist { background: #222; color: #fff; padding: 18px 40px; border-radius: 14px; font-weight: 600; border: 1px solid #333; cursor: pointer; display: flex; align-items: center; gap: 10px; font-size: 14px; width: 260px; justify-content: center; }
+
+    /* KAMERA */
+    .camera-ui { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; display: none; z-index: 200; }
+    #reader { width: 100% !important; height: 100% !important; border: none !important; }
+    #reader video { object-fit: cover !important; width: 100% !important; height: 100% !important; }
+    
+    .session-bar-bg { position: absolute; top:0; left:0; width:100%; height:6px; background:rgba(255,255,255,0.2); z-index: 220; }
+    .session-bar-fill { height:100%; background:#C5A065; width:100%; transition: width 1s linear; }
+    
+    .top-ctrl { position: absolute; top: 20px; left: 0; width: 100%; padding: 0 20px; display: flex; justify-content: space-between; z-index: 230; box-sizing: border-box; }
+    .badge-live { background: rgba(0,0,0,0.6); color: #C5A065; padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; border: 1px solid rgba(197, 160, 101, 0.4); backdrop-filter: blur(4px); }
+    .btn-x { background: rgba(255,255,255,0.2); width: 40px; height: 40px; border-radius: 50%; border: none; color: #fff; cursor: pointer; font-size: 18px; backdrop-filter: blur(4px); display:flex; align-items:center; justify-content:center; }
+
+    /* VİZÖR */
+    .scan-guide { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 70vw; height: 70vw; max-width: 300px; max-height: 300px; box-shadow: 0 0 0 4000px rgba(0,0,0,0.85); border: 2px solid rgba(255,255,255,0.3); border-radius: 24px; pointer-events: none; z-index: 210; }
+    .scan-guide::before { content:''; position:absolute; top:-2px; left:-2px; width:40px; height:40px; border-top:5px solid #C5A065; border-left:5px solid #C5A065; border-radius:20px 0 0 0; }
+    .scan-guide::after { content:''; position:absolute; bottom:-2px; right:-2px; width:40px; height:40px; border-bottom:5px solid #C5A065; border-right:5px solid #C5A065; border-radius:0 0 20px 0; }
+    .laser { width: 100%; height: 2px; background: #C5A065; position: absolute; top: 50%; box-shadow: 0 0 15px #C5A065; animation: scanAnim 2s infinite ease-in-out; }
+    @keyframes scanAnim { 0% { top: 10%; opacity: 0; } 50% { opacity: 1; } 100% { top: 90%; opacity: 0; } }
+
+    .scan-hint { position: absolute; bottom: 60px; width: 100%; text-align: center; color: #fff; font-size: 13px; opacity: 0.8; z-index: 220; letter-spacing: 0.5px; }
+
+    /* SONUÇ */
+    .res-modal { position: fixed; bottom: 0; left: 0; width: 100%; background: #1a1a1a; border-radius: 30px 30px 0 0; padding: 40px 20px; text-align: center; transform: translateY(110%); transition: transform 0.3s; z-index: 600; box-sizing: border-box; border-top: 1px solid #333; }
+    .res-modal.active { transform: translateY(0); }
+    .icon-big { font-size: 60px; margin-bottom: 15px; }
+    .res-title { color: #fff; font-size: 24px; font-weight: 700; margin-bottom: 10px; }
+    .res-msg { color: #aaa; font-size: 15px; margin-bottom: 30px; }
+    .btn-new { background: #fff; color: #000; width: 100%; padding: 18px; border-radius: 16px; font-size: 16px; font-weight: 700; border: none; cursor: pointer; }
+
+    /* GEÇMİŞ - GELİŞMİŞ */
+    .hist-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #0a0a0a; z-index: 700; display: none; flex-direction: column; font-family: 'Poppins', sans-serif; }
+    .hist-head { padding: 16px 20px; background: linear-gradient(180deg, #151515, #1a1a1a); color: #fff; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #222; }
+    .hist-head-title { font-weight: 700; letter-spacing: 1px; font-size: 16px; }
+    
+    /* İSTATİSTİK KARTLARI */
+    .hist-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 16px 20px; background: #0f0f0f; border-bottom: 1px solid #1a1a1a; }
+    .stat-card { background: linear-gradient(145deg, #1a1a1a, #141414); border-radius: 14px; padding: 14px 12px; text-align: center; border: 1px solid #222; }
+    .stat-value { font-size: 24px; font-weight: 700; color: #C5A065; margin-bottom: 4px; }
+    .stat-label { font-size: 11px; color: #777; text-transform: uppercase; letter-spacing: 0.5px; }
+    
+    /* FİLTRELER */
+    .hist-filters { padding: 14px 20px; background: #0d0d0d; border-bottom: 1px solid #1a1a1a; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
+    .filter-group { display: flex; flex-direction: column; gap: 4px; }
+    .filter-group label { font-size: 10px; color: #666; text-transform: uppercase; letter-spacing: 0.5px; }
+    .filter-input { background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 10px; padding: 10px 14px; color: #fff; font-size: 13px; min-width: 130px; }
+    .filter-input:focus { outline: none; border-color: #C5A065; }
+    .filter-input::placeholder { color: #555; }
+    
+    .filter-select { background: #1a1a1a; border: 1px solid #2a2a2a; border-radius: 10px; padding: 10px 14px; color: #fff; font-size: 13px; min-width: 140px; cursor: pointer; }
+    .filter-select:focus { outline: none; border-color: #C5A065; }
+    
+    .filter-btn { background: #C5A065; color: #000; border: none; border-radius: 10px; padding: 10px 16px; font-weight: 600; font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
+    .filter-btn:hover { filter: brightness(1.1); }
+    .filter-btn.secondary { background: #2a2a2a; color: #fff; }
+    .filter-btn.secondary:hover { background: #333; }
+    
+    /* CSV BUTONLARI */
+    .action-buttons { margin-left: auto; display: flex; gap: 8px; }
+    .btn-csv { background: linear-gradient(145deg, #2E7D32, #1B5E20); color: #fff; border: none; border-radius: 10px; padding: 10px 16px; font-weight: 600; font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 6px; }
+    .btn-csv:hover { filter: brightness(1.1); }
+    
+    /* LİSTE */
+    .hist-body { flex: 1; overflow-y: auto; padding: 10px 0; list-style: none; margin: 0; }
+    .hist-row { display: flex; align-items: center; padding: 14px 20px; margin: 8px 16px; border-radius: 14px; background: linear-gradient(145deg, #161616, #121212); border: 1px solid #1f1f1f; transition: transform 0.15s, border-color 0.15s; }
+    .hist-row:hover { transform: translateX(4px); border-color: #333; }
+    .hist-u-img { width: 48px; height: 48px; border-radius: 50%; margin-right: 14px; border: 2px solid #2a2a2a; object-fit: cover; background: #1a1a1a; }
+    .hist-info { flex: 1; }
+    .hist-u-name { display: block; font-weight: 700; font-size: 14px; color: #f0f0f0; margin-bottom: 3px; }
+    .hist-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+    .hist-time { font-size: 12px; color: #666; }
+    .hist-staff { font-size: 11px; color: #888; background: #1f1f1f; padding: 3px 8px; border-radius: 6px; }
+    .hist-reward-badge { font-size: 11px; color: #C5A065; background: rgba(197, 160, 101, 0.15); padding: 3px 8px; border-radius: 6px; border: 1px solid rgba(197, 160, 101, 0.3); }
+    .hist-val { background: rgba(198,40,40,0.15); border: 1px solid rgba(198,40,40,0.3); color: #ef5350; padding: 10px 14px; border-radius: 12px; font-size: 14px; font-weight: 700; min-width: 70px; text-align: center; }
+    
+    /* BOŞ DURUM */
+    .hist-empty { text-align: center; padding: 60px 20px; color: #555; list-style: none; }
+    .hist-empty i { font-size: 48px; margin-bottom: 16px; display: block; opacity: 0.5; }
+    
+    /* LOADING */
+    .hist-loading { text-align: center; padding: 40px; color: #666; list-style: none; }
+    .hist-loading .spinner { display: inline-block; width: 30px; height: 30px; border: 3px solid #333; border-top-color: #C5A065; border-radius: 50%; animation: spin 1s linear infinite; }
+    @keyframes spin { to { transform: rotate(360deg); } }
+
+    /* UI/UX */
+    body.niki-kasa-body { -webkit-font-smoothing: antialiased; touch-action: manipulation; }
+    #content { min-height: 100vh; }
+    .start-view, .camera-ui, .hist-modal { padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }
+    .start-view { background: radial-gradient(1200px 700px at 50% 10%, rgba(197,160,101,0.18), transparent 60%), linear-gradient(180deg, #0b0b0b, #111 55%, #0b0b0b); }
+    .btn-group { display: grid; gap: 12px; }
+    .btn-start, .btn-hist, .btn-new, .btn-x { -webkit-tap-highlight-color: transparent; }
+    .btn-start:active, .btn-hist:active, .btn-new:active, .btn-x:active { transform: scale(0.97); }
+    .btn-start { width: min(320px, 88vw); border-radius: 16px; transition: transform 120ms ease; }
+    .btn-hist { width: min(320px, 88vw); border-radius: 16px; transition: transform 120ms ease; }
+    .top-ctrl { top: calc(14px + env(safe-area-inset-top)); padding: 0 16px; }
+    .btn-x { border: 1px solid rgba(255,255,255,0.15); }
+    .scan-guide { width: min(76vw, 320px); height: min(76vw, 320px); box-shadow: 0 0 0 5000px rgba(0,0,0,0.78); }
+    .scan-hint { bottom: calc(56px + env(safe-area-inset-bottom)); }
+    .res-modal { background: linear-gradient(180deg, #1c1c1c, #121212); border-top: 1px solid rgba(255,255,255,0.1); box-shadow: 0 -20px 50px rgba(0,0,0,0.6); padding-bottom: calc(20px + env(safe-area-inset-bottom)); }
+    .res-modal::before { content: ""; display: block; width: 44px; height: 5px; background: rgba(255,255,255,0.18); border-radius: 99px; margin: -10px auto 16px; }
+    .res-close { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border-radius: 50%; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18); color: #fff; display:flex; align-items:center; justify-content:center; cursor:pointer; backdrop-filter: blur(6px); }
+    .res-close:active { transform: scale(0.95); }
+    .hist-body { padding-bottom: calc(16px + env(safe-area-inset-bottom)); }
+    @media (prefers-reduced-motion: reduce) { .laser { animation: none; } }
+    @media (max-width: 600px) {
+      .hist-stats { grid-template-columns: repeat(2, 1fr); }
+      .hist-filters { flex-direction: column; align-items: stretch; }
+      .filter-group { width: 100%; }
+      .filter-input, .filter-select { width: 100%; }
+      .action-buttons { width: 100%; justify-content: stretch; margin-left: 0; margin-top: 8px; }
+      .action-buttons .btn-csv { flex: 1; justify-content: center; }
+    }
+</style>
+
+<div id="start-view" class="start-view">
+    <div class="logo-box"><i class="fa fa-qrcode" style="font-size:45px; color:#C5A065;"></i></div>
+    <h2 style="margin:0 0 5px; font-size:24px;">NIKI POS</h2>
+    <p style="color:#888; font-size:13px; margin:0 0 40px;">Yetkili Personel Terminali</p>
+    <div class="btn-group">
+        <button class="btn-start" onclick="initSession()"><i class="fa fa-camera"></i> OTURUMU BAŞLAT</button>
+        <button class="btn-hist" onclick="openHistory()"><i class="fa fa-history"></i> İŞLEM GEÇMİŞİ</button>
+    </div>
+</div>
+
+<div id="camera-ui" class="camera-ui">
+    <div class="session-bar-bg"><div class="session-bar-fill" id="timer-bar"></div></div>
+    <div class="top-ctrl">
+        <div class="badge-live">● CANLI</div>
+        <button class="btn-x" onclick="stopSession()"><i class="fa fa-times"></i></button>
+    </div>
+    <div id="reader"></div>
+    <div class="scan-guide"><div class="laser"></div></div>
+    <div class="scan-hint">QR Kodu karenin içine tutun</div>
+</div>
+
+<div id="res-view" class="res-modal">
+    <button class="res-close" onclick="stopSession()" aria-label="Kapat"><i class="fa fa-times"></i></button>
+    <div id="res-icon" class="icon-big"></div>
+    <div id="res-title" class="res-title">...</div>
+    <div id="res-msg" class="res-msg">...</div>
+    <button class="btn-new" onclick="resumeScan()">YENİ İŞLEM</button>
+</div>
+
+<!-- GELİŞMİŞ İŞLEM GEÇMİŞİ -->
+<div id="hist-view" class="hist-modal">
+    <div class="hist-head">
+        <span class="hist-head-title"><i class="fa fa-history"></i> İŞLEM GEÇMİŞİ</span>
+        <button onclick="closeHistory()" style="background:none; border:none; color:#fff; font-size:20px; cursor:pointer;"><i class="fa fa-times"></i></button>
+    </div>
+    
+    <!-- İSTATİSTİKLER -->
+    <div class="hist-stats">
+        <div class="stat-card">
+            <div class="stat-value" id="stat-total">0</div>
+            <div class="stat-label">Toplam İşlem</div>
+        </div>
+        <div class="stat-card">
+            <div class="stat-value" id="stat-points">0</div>
+            <div class="stat-label">Toplam Puan</div>
+        </div>
+        <div class="stat-card">
+            <div class="stat-value" id="stat-today">0</div>
+            <div class="stat-label">Bugün</div>
+        </div>
+    </div>
+    
+    <!-- FİLTRELER -->
+    <div class="hist-filters">
+        <div class="filter-group">
+            <label>Başlangıç</label>
+            <input type="date" class="filter-input" id="filter-start">
+        </div>
+        <div class="filter-group">
+            <label>Bitiş</label>
+            <input type="date" class="filter-input" id="filter-end">
+        </div>
+        <div class="filter-group">
+            <label>Ara</label>
+            <input type="text" class="filter-input" id="filter-search" placeholder="Kullanıcı adı...">
+        </div>
+        <div class="filter-group">
+            <label>Ödül Tipi</label>
+            <select class="filter-select" id="filter-reward">
+                <option value="all">Tümü</option>
+            </select>
+        </div>
+        <button class="filter-btn" onclick="applyFilters()"><i class="fa fa-filter"></i> Filtrele</button>
+        <button class="filter-btn secondary" onclick="clearFilters()"><i class="fa fa-refresh"></i> Sıfırla</button>
+        
+        <div class="action-buttons">
+            <button class="btn-csv" onclick="exportCSV()"><i class="fa fa-download"></i> CSV İndir</button>
+        </div>
+    </div>
+    
+    <!-- LİSTE -->
+    <ul id="hist-list" class="hist-body"></ul>
+</div>
+
+<div id="denied" style="display:none; text-align:center; padding:100px; color:#fff;"><h3>Yetkisiz Giriş</h3></div>
+
+<script>
+    let html5QrCode;
+    let isProcessing = false;
+    let sessionTimer;
+    let currentHistoryData = [];
+    moment.locale('tr');
+
+    async function initSession() {
+        $('#start-view').fadeOut(200);
+        $('#camera-ui').fadeIn(300);
+        startTimer(600);
+        html5QrCode = new Html5Qrcode("reader");
+        try {
+            const devices = await Html5Qrcode.getCameras();
+            if (devices && devices.length) {
+                let cameraId = devices[devices.length - 1].id;
+                for (let i = 0; i < devices.length; i++) {
+                    let label = devices[i].label.toLowerCase();
+                    if (label.includes("back") || label.includes("arka") || label.includes("environment")) {
+                        cameraId = devices[i].id;
+                        break;
+                    }
+                }
+                await html5QrCode.start(cameraId, { fps: 15, aspectRatio: window.innerWidth / window.innerHeight }, onScanSuccess);
+            } else {
+                alert("Kamera bulunamadı!");
+                stopSession();
+            }
+        } catch (err) {
+            alert("Kamera Başlatılamadı: " + err);
+            stopSession();
+        }
+    }
+
+    function startTimer(duration) {
+        let timeLeft = duration;
+        $('#timer-bar').css('width', '100%');
+        clearInterval(sessionTimer);
+        sessionTimer = setInterval(() => {
+            timeLeft--;
+            let pct = (timeLeft / duration) * 100;
+            $('#timer-bar').css('width', pct + '%');
+            if(timeLeft <= 0) { alert("Oturum doldu."); stopSession(); }
+        }, 1000);
+    }
+
+    function onScanSuccess(decodedText) {
+        if (isProcessing) return;
+        isProcessing = true;
+        const audio = new Audio('https://freesound.org/data/previews/171/171671_2437358-lq.mp3');
+        audio.play().catch(e=>{});
+        if(navigator.vibrate) navigator.vibrate(200);
+        html5QrCode.pause();
+        $.post('/api/niki-loyalty/scan-qr', { token: decodedText, _csrf: config.csrf_token }, function(res) {
+            if(res.success) {
+                $('#res-icon').html('<i class="fa fa-check-circle" style="color:#2E7D32"></i>');
+                $('#res-title').text('ÖDEME ALINDI');
+                $('#res-msg').html('<img src="'+(res.customer.picture||'')+'" style="width:60px;height:60px;border-radius:50%;border:2px solid #fff;margin-bottom:10px;"><br><b>'+res.customer.username+'</b><br>'+res.cost+' Puan Tahsil Edildi.<br><small style="color:#C5A065">'+res.rewardName+'</small>');
+            } else {
+                new Audio('https://freesound.org/data/previews/142/142608_1840739-lq.mp3').play().catch(e=>{});
+                if(navigator.vibrate) navigator.vibrate([100,50,100]);
+                $('#res-icon').html('<i class="fa fa-times-circle" style="color:#C62828"></i>');
+                $('#res-title').text('HATA');
+                $('#res-msg').text(res.message);
+            }
+            $('#res-view').addClass('active');
+        }).fail(function() { alert("Sunucu Hatası!"); resumeScan(); });
+    }
+
+    function resumeScan() {
+        $('#res-view').removeClass('active');
+        setTimeout(() => { isProcessing = false; html5QrCode.resume(); }, 300);
+    }
+
+    function stopSession() {
+        clearInterval(sessionTimer);
+        if(html5QrCode) html5QrCode.stop().then(() => html5QrCode.clear()).catch(()=>{});
+        $('#camera-ui').hide();
+        $('#res-view').removeClass('active');
+        $('#start-view').fadeIn(200);
+        isProcessing = false;
+    }
+
+    // =============================
+    // GELİŞMİŞ İŞLEM GEÇMİŞİ
+    // =============================
+    
+    function openHistory() {
+        document.getElementById('hist-view').style.display = 'flex';
+        loadHistory();
+    }
+    
+    function closeHistory() {
+        document.getElementById('hist-view').style.display = 'none';
+    }
+    
+    function loadHistory(filters) {
+        filters = filters || {};
+        var list = document.getElementById('hist-list');
+        if (!list) { console.error('hist-list not found'); return; }
+        
+        list.innerHTML = '<li class="hist-loading"><div class="spinner"></div><br>Yükleniyor...</li>';
+        
+        var params = [];
+        if (filters.startDate) params.push('startDate=' + encodeURIComponent(filters.startDate));
+        if (filters.endDate) params.push('endDate=' + encodeURIComponent(filters.endDate));
+        if (filters.search) params.push('search=' + encodeURIComponent(filters.search));
+        if (filters.rewardType && filters.rewardType !== 'all') params.push('rewardType=' + encodeURIComponent(filters.rewardType));
+        
+        var url = '/api/niki-loyalty/kasa-history' + (params.length ? '?' + params.join('&') : '');
+        console.log('[NIKI POS] Loading:', url);
+        
+        $.get(url, function(response) {
+            console.log('[NIKI POS] Response:', response);
+            
+            var dataToRender = [];
+            var stats = {};
+            var rewardTypes = [];
+            
+            // Hem eski hem yeni format desteği
+            if (Array.isArray(response)) {
+                dataToRender = response;
+                stats = { totalTransactions: response.length, totalPoints: 0, byDate: {} };
+            } else if (response && response.data) {
+                dataToRender = response.data;
+                stats = response.stats || {};
+                rewardTypes = response.rewardTypes || [];
+            } else if (response && response.error) {
+                list.innerHTML = '<li class="hist-empty"><i class="fa fa-exclamation-circle"></i> Hata: ' + response.error + '</li>';
+                return;
+            }
+            
+            currentHistoryData = dataToRender;
+            
+            // İstatistikleri güncelle
+            var statTotal = document.getElementById('stat-total');
+            var statPoints = document.getElementById('stat-points');
+            var statToday = document.getElementById('stat-today');
+            
+            if (statTotal) statTotal.textContent = stats.totalTransactions || dataToRender.length;
+            if (statPoints) statPoints.textContent = (stats.totalPoints || 0).toLocaleString('tr-TR');
+            if (statToday) {
+                var today = new Date().toISOString().slice(0, 10);
+                var byDate = stats.byDate || {};
+                statToday.textContent = byDate[today] || 0;
+            }
+            
+            // Ödül tipi dropdown
+            var rewardSelect = document.getElementById('filter-reward');
+            if (rewardSelect && rewardTypes.length > 0) {
+                var currentVal = rewardSelect.value;
+                rewardSelect.innerHTML = '<option value="all">Tümü</option>';
+                rewardTypes.forEach(function(type) {
+                    var opt = document.createElement('option');
+                    opt.value = type;
+                    opt.textContent = type;
+                    rewardSelect.appendChild(opt);
+                });
+                if (currentVal) rewardSelect.value = currentVal;
+            }
+            
+            // Liste render
+            renderHistoryList(dataToRender);
+            
+        }).fail(function(xhr, status, error) {
+            console.error('[NIKI POS] Error:', error);
+            list.innerHTML = '<li class="hist-empty"><i class="fa fa-wifi"></i> Bağlantı hatası</li>';
+        });
+    }
+    
+    function renderHistoryList(data) {
+        var list = document.getElementById('hist-list');
+        if (!list) return;
+        
+        list.innerHTML = '';
+        console.log('[NIKI POS] Rendering', data.length, 'items');
+        
+        if (!data || data.length === 0) {
+            list.innerHTML = '<li class="hist-empty"><i class="fa fa-inbox"></i> İşlem bulunamadı</li>';
+            return;
+        }
+        
+        for (var i = 0; i < data.length; i++) {
+            var item = data[i];
+            var timeAgo = moment(item.ts).fromNow();
+            var exactTime = moment(item.ts).format('DD MMM YYYY, HH:mm');
+            var customerName = item.cust || 'Bilinmeyen';
+            var staffName = item.staffName || '';
+            var rewardName = item.reward || 'İşlem';
+            var amount = item.amt || 250;
+            var picture = item.picture || 'https://via.placeholder.com/50';
+            
+            var staffBadge = staffName ? '<span class="hist-staff"><i class="fa fa-user-circle"></i> ' + escapeHtml(staffName) + '</span>' : '';
+            
+            var li = document.createElement('li');
+            li.className = 'hist-row';
+            li.innerHTML = '<img src="' + picture + '" class="hist-u-img" onerror="this.src=\'https://via.placeholder.com/50\'">' +
+                '<div class="hist-info">' +
+                    '<span class="hist-u-name">' + escapeHtml(customerName) + '</span>' +
+                    '<div class="hist-meta">' +
+                        '<span class="hist-time" title="' + exactTime + '">' + timeAgo + '</span>' +
+                        staffBadge +
+                        '<span class="hist-reward-badge">' + escapeHtml(rewardName) + '</span>' +
+                    '</div>' +
+                '</div>' +
+                '<div class="hist-val">-' + amount + '</div>';
+            list.appendChild(li);
+        }
+        console.log('[NIKI POS] Render complete');
+    }
+    
+    function applyFilters() {
+        loadHistory({
+            startDate: document.getElementById('filter-start').value,
+            endDate: document.getElementById('filter-end').value,
+            search: document.getElementById('filter-search').value,
+            rewardType: document.getElementById('filter-reward').value
+        });
+    }
+    
+    function clearFilters() {
+        document.getElementById('filter-start').value = '';
+        document.getElementById('filter-end').value = '';
+        document.getElementById('filter-search').value = '';
+        document.getElementById('filter-reward').value = 'all';
+        loadHistory();
+    }
+    
+    function exportCSV() {
+        var params = [];
+        var startDate = document.getElementById('filter-start').value;
+        var endDate = document.getElementById('filter-end').value;
+        var search = document.getElementById('filter-search').value;
+        var rewardType = document.getElementById('filter-reward').value;
+        
+        if (startDate) params.push('startDate=' + encodeURIComponent(startDate));
+        if (endDate) params.push('endDate=' + encodeURIComponent(endDate));
+        if (search) params.push('search=' + encodeURIComponent(search));
+        if (rewardType && rewardType !== 'all') params.push('rewardType=' + encodeURIComponent(rewardType));
+        params.push('exportAll=true');
+        
+        $.get('/api/niki-loyalty/kasa-history?' + params.join('&'), function(response) {
+            var data = response.data || response || [];
+            if (!data.length) { alert('Veri bulunamadı'); return; }
+            
+            var headers = ['Tarih', 'Saat', 'Müşteri', 'Personel', 'Ödül', 'Puan'];
+            var rows = [];
+            for (var i = 0; i < data.length; i++) {
+                var item = data[i];
+                var date = moment(item.ts);
+                rows.push([
+                    date.format('DD.MM.YYYY'),
+                    date.format('HH:mm:ss'),
+                    '"' + (item.cust || '').replace(/"/g, '""') + '"',
+                    '"' + (item.staffName || '').replace(/"/g, '""') + '"',
+                    '"' + (item.reward || '').replace(/"/g, '""') + '"',
+                    item.amt || 0
+                ].join(';'));
+            }
+            
+            var csv = '\uFEFF' + headers.join(';') + '\n' + rows.join('\n');
+            var blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+            var url = URL.createObjectURL(blob);
+            var link = document.createElement('a');
+            link.href = url;
+            link.download = 'niki-kasa-' + moment().format('YYYY-MM-DD') + '.csv';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }).fail(function() { alert('CSV indirilemedi'); });
+    }
+    
+    function escapeHtml(text) {
+        if (!text) return '';
+        var div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+
+    $(document).ready(function() {
+        if (!app.user.isAdmin && !app.user.isGlobalMod) {
+            $('.start-view').remove(); 
+            $('body').html('<div style="text-align:center; padding:50px; color:#fff;"><h3>⛔ Yetkisiz Giriş</h3></div>');
+        }
+        var today = new Date().toISOString().slice(0, 10);
+        var monthAgo = new Date(Date.now() - 30*24*60*60*1000).toISOString().slice(0, 10);
+        document.getElementById('filter-end').value = today;
+        document.getElementById('filter-start').value = monthAgo;
+    });
+    
+    $(window).on('action:ajaxify.start', function() { stopSession(); closeHistory(); });
+</script>