Update public/app.js

public/app.js

@@ -1,11 +1,6 @@
 // ==========================================
-// PIXELDRIVE v4.6 - APP.JS (rename/move + quotas UI)
+// PIXELDRIVE v4.7 - APP.JS (admin panel + quotas live)
 // ==========================================
-if (window.I18N) {
-    Object.assign(window.I18N.fr, { up_elapsed: 'Temps', up_speed: 'Vitesse', up_eta: 'Restant', up_done_in: 'Terminé en', up_phase_upload: 'Envoi au serveur', up_phase_process: 'Traitement' });
-    Object.assign(window.I18N.en, { up_elapsed: 'Time', up_speed: 'Speed', up_eta: 'Left', up_done_in: 'Done in', up_phase_upload: 'Uploading to server', up_phase_process: 'Processing' });
-}
-
 const app = {
     user: null, currentFolder: null, currentSection: 'files', sortMode: 'name-asc',
     files: [], folders: [], uploadController: null, _uploadCancelled: false, _moveTarget: null,
@@ -35,6 +30,8 @@ const app = {
         });
         document.getElementById('login-pass').addEventListener('keydown', (e) => { if (e.key === 'Enter') this.login(); });
         document.getElementById('reg-pass2').addEventListener('keydown', (e) => { if (e.key === 'Enter') this.register(); });
+        // ✅ QUOTAS EN DIRECT : refresh auto toutes les 30s
+        setInterval(() => { if (this.user) this.refreshQuota(); }, 30000);
     },
 
     esc(s) { return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;'); },
@@ -50,6 +47,15 @@ const app = {
         setTimeout(() => { el.style.opacity = '0'; el.style.transition = 'opacity 0.3s'; setTimeout(() => el.remove(), 300); }, 3500);
     },
 
+    // ✅ Refresh quota (après download / périodique)
+    async refreshQuota() {
+        try {
+            const me = await fetch('/api/me');
+            if (me.ok) { this.user = Object.assign(this.user || {}, await me.json()); this.updateQuotaUI(); }
+        } catch (e) {}
+    },
+    scheduleQuotaRefresh() { setTimeout(() => this.refreshQuota(), 3000); },
+
     _switchHTML(key, onclick) {
         const s = t(key);
         const i = s.indexOf('?');
@@ -130,6 +136,8 @@ const app = {
         document.getElementById('app-screen').style.display = 'flex';
         document.getElementById('user-display').textContent = this.user.username;
         document.getElementById('footer-username').textContent = this.user.username;
+        // ✅ Item admin visible seulement si isAdmin
+        document.getElementById('nav-admin').style.display = this.user.isAdmin ? 'flex' : 'none';
         this.loadAvatar();
         this.updateQuotaUI();
     },
@@ -177,8 +185,7 @@ const app = {
         document.getElementById('set-lang').value = getLang();
         document.getElementById('set-theme').value = localStorage.getItem('pd_theme') || 'dark';
         document.getElementById('set-sort').value = this.sortMode;
-        try { const me = await fetch('/api/me'); if (me.ok) this.user = Object.assign(this.user || {}, await me.json()); } catch (e) {}
-        this.updateQuotaUI();
+        await this.refreshQuota();
         this.loadAvatar();
     },
     closeSettings() { document.getElementById('settings-modal').style.display = 'none'; },
@@ -221,6 +228,7 @@ const app = {
 
     toggleSidebar() { document.getElementById('sidebar').classList.toggle('open'); document.querySelector('.sidebar-overlay').classList.toggle('active'); },
     navTo(section) {
+        if (section === 'admin' && (!this.user || !this.user.isAdmin)) return;
         this.currentSection = section;
         this.currentFolder = null;
         document.querySelectorAll('.nav-item').forEach(el => el.classList.remove('active'));
@@ -237,6 +245,7 @@ const app = {
     refresh() {
         if (this.currentSection === 'files') this.loadContent();
         else if (this.currentSection === 'shared') this.currentFolder ? this.loadContent() : this.loadSharedPage();
+        else if (this.currentSection === 'admin') this.loadAdmin();
         else this.loadRecent();
     },
     setSort(m) { this.sortMode = m; this.refresh(); },
@@ -283,6 +292,74 @@ const app = {
         } catch (e) { area.innerHTML = '<div style="padding:2rem;color:var(--danger);text-align:center;">Erreur</div>'; }
     },
 
+    // ✅ PANEL ADMIN
+    async loadAdmin() {
+        const area = document.getElementById('file-area');
+        area.innerHTML = '<div style="padding:2rem;text-align:center;color:var(--text-muted);">' + t('loading') + '</div>';
+        document.getElementById('breadcrumb').innerHTML = '<span>' + t('nav_admin') + '</span>';
+        if (!this.user || !this.user.isAdmin) { area.innerHTML = '<div class="empty-state"><p>403</p></div>'; return; }
+        try {
+            const [stRes, usRes] = await Promise.all([fetch('/api/admin/stats'), fetch('/api/admin/users')]);
+            if (!stRes.ok || !usRes.ok) throw new Error();
+            const stats = await stRes.json();
+            const users = await usRes.json();
+            area.innerHTML = '';
+
+            const t1 = document.createElement('div'); t1.className = 'section-title'; t1.textContent = t('admin_stats'); area.appendChild(t1);
+            const grid = document.createElement('div'); grid.className = 'admin-stats';
+            [
+                [stats.users, t('stat_users')],
+                [stats.filesCount, t('stat_files')],
+                [this.formatSize(stats.storage), t('stat_storage')],
+                [this.formatSize(stats.transferToday), t('stat_transfer')],
+                [stats.shares, t('stat_shares')],
+                [stats.links, t('stat_links')],
+            ].forEach(([v, l]) => {
+                const c = document.createElement('div'); c.className = 'stat-card';
+                c.innerHTML = '<div class="stat-value">' + v + '</div><div class="stat-label">' + l + '</div>';
+                grid.appendChild(c);
+            });
+            area.appendChild(grid);
+
+            const t2 = document.createElement('div'); t2.className = 'section-title'; t2.textContent = t('admin_users'); area.appendChild(t2);
+            const wrap = document.createElement('div'); wrap.className = 'admin-table-wrap';
+            let rows = '';
+            users.forEach(u => {
+                const self = u.id === this.user.id;
+                rows += '<tr>' +
+                    '<td><strong>' + this.esc(u.username) + '</strong> ' + (self ? '<span style="color:var(--text-muted);font-size:0.7rem;">' + t('admin_you') + '</span>' : '') + '</td>' +
+                    '<td>' + u.filesCount + '</td>' +
+                    '<td>' + this.formatSize(u.storageUsed) + '</td>' +
+                    '<td>' + this.formatSize(u.transferToday) + ' / ' + this.formatSize(this.user.transferMax) + '</td>' +
+                    '<td><span class="role-badge' + (u.is_admin ? ' admin' : '') + '">' + (u.is_admin ? t('admin_role_admin') : t('admin_role_user')) + '</span></td>' +
+                    '<td style="white-space:nowrap;">' + (!self ?
+                        '<button class="btn-icon" style="width:32px;height:32px;" title="' + t('admin_toggle') + '" onclick="app.toggleAdminRole(' + u.id + ')"><svg class="icon icon-sm"><use href="#icon-shield"></use></svg></button> ' +
+                        '<button class="btn-icon" style="width:32px;height:32px;color:var(--danger);" title="' + t('admin_delete') + '" onclick="app.adminDeleteUser(' + u.id + ')"><svg class="icon icon-sm"><use href="#icon-trash"></use></svg></button>'
+                    : '—') + '</td></tr>';
+            });
+            wrap.innerHTML = '<table class="admin-table"><thead><tr><th>' + t('admin_col_user') + '</th><th>' + t('admin_col_files') + '</th><th>' + t('admin_col_storage') + '</th><th>' + t('admin_col_transfer') + '</th><th>' + t('admin_col_role') + '</th><th>' + t('admin_col_actions') + '</th></tr></thead><tbody>' + rows + '</tbody></table>';
+            area.appendChild(wrap);
+        } catch (e) { area.innerHTML = '<div style="padding:2rem;color:var(--danger);text-align:center;">Erreur</div>'; }
+    },
+
+    async toggleAdminRole(id) {
+        const ok = await this.confirm({ title: t('admin_toggle'), message: t('admin_toggle') + ' ?', confirmText: 'OK' });
+        if (!ok) return;
+        const res = await fetch('/api/admin/users/' + id + '/toggle-admin', { method: 'POST' });
+        const d = await res.json();
+        this.toast(d.ok ? t('t_admin_toggled') : (d.error || 'Erreur'), d.ok ? 'success' : 'error');
+        if (d.ok) this.loadAdmin();
+    },
+
+    async adminDeleteUser(id) {
+        const ok = await this.confirm({ title: t('admin_delete'), message: t('dlg_admin_del_msg'), confirmText: t('ctx_delete'), danger: true });
+        if (!ok) return;
+        const res = await fetch('/api/admin/users/' + id, { method: 'DELETE' });
+        const d = await res.json();
+        this.toast(d.ok ? t('t_admin_deleted') : (d.error || 'Erreur'), d.ok ? 'success' : 'error');
+        if (d.ok) this.loadAdmin();
+    },
+
     renderGrid(folders, files, mode) {
         const area = document.getElementById('file-area');
         area.innerHTML = '';
@@ -441,7 +518,7 @@ const app = {
             if (result) okCount++; else errCount++;
             if (this._uploadCancelled) { this._uploadCancelled = false; break; }
         }
-        try { const me = await fetch('/api/me'); if (me.ok) { this.user = Object.assign(this.user, await me.json()); this.updateQuotaUI(); } } catch (e) {}
+        await this.refreshQuota();
         document.getElementById('upload-overlay').style.display = 'none';
         if (this.currentSection === 'files') this.loadContent();
         if (okCount) this.toast(okCount + ' ✓' + (errCount ? ', ' + errCount + ' ✗' : ''), okCount && !errCount ? 'success' : 'error');
@@ -551,7 +628,6 @@ const app = {
         else this.toast('Erreur', 'error');
     },
 
-    // ✅ RENOMMER
     async renameItem(type, item) {
         const name = await this.prompt({ title: t('ctx_rename'), placeholder: t('ctx_rename'), value: item.name || '', confirmText: t('ctx_rename') });
         if (!name || name === item.name) return;
@@ -562,7 +638,6 @@ const app = {
         else this.toast(d.error || 'Erreur', 'error');
     },
 
-    // ✅ DÉPLACER
     async openMove(type, item) {
         this._moveTarget = { type, item };
         const sel = document.getElementById('move-select');
@@ -603,7 +678,10 @@ const app = {
         container.innerHTML = '';
         document.getElementById('preview-modal').style.display = 'flex';
         const url = '/api/files/' + file.id + '/download';
-        document.getElementById('preview-download-btn').onclick = () => { const a = document.createElement('a'); a.href = url; a.download = file.name; a.click(); };
+        document.getElementById('preview-download-btn').onclick = () => {
+            const a = document.createElement('a'); a.href = url; a.download = file.name; a.click();
+            this.scheduleQuotaRefresh(); // ✅ le download compte dans le quota → refresh UI
+        };
         if (file.mime && file.mime.startsWith('image/')) { const i = document.createElement('img'); i.src = url; i.id = 'preview-content'; container.appendChild(i); }
         else if (file.mime && file.mime.startsWith('video/')) { const v = document.createElement('video'); v.src = url; v.controls = true; v.autoplay = true; v.playsInline = true; v.id = 'preview-content'; container.appendChild(v); }
         else if (file.mime && file.mime.startsWith('audio/')) { const a = document.createElement('audio'); a.src = url; a.controls = true; container.appendChild(a); }
@@ -679,7 +757,11 @@ const app = {
         document.getElementById('ctx-delete').style.display = (isMineFile || isMineFolder) ? 'flex' : 'none';
 
         document.getElementById('ctx-preview').onclick = () => { this.closeMenu(); this.previewFile(item); };
-        document.getElementById('ctx-download').onclick = () => { this.closeMenu(); const a = document.createElement('a'); a.href = '/api/files/' + item.id + '/download'; a.download = item.name; a.click(); };
+        document.getElementById('ctx-download').onclick = () => {
+            this.closeMenu();
+            const a = document.createElement('a'); a.href = '/api/files/' + item.id + '/download'; a.download = item.name; a.click();
+            this.scheduleQuotaRefresh(); // ✅ download compté → refresh UI
+        };
         document.getElementById('ctx-share').onclick = () => { this.closeMenu(); this.showShareModal(item); };
         document.getElementById('ctx-share-user').onclick = () => { this.closeMenu(); this.shareWithUser(isMineFile ? 'file' : 'folder', item); };
         document.getElementById('ctx-rename').onclick = () => { this.closeMenu(); this.renameItem(isMineFile ? 'file' : 'folder', item); };
@@ -698,6 +780,7 @@ const app = {
             if (!ok) return;
             await fetch('/api/' + (isMineFile ? 'files' : 'folders') + '/' + item.id, {method:'DELETE'});
             this.toast(t('t_deleted'), 'success');
+            this.refreshQuota();
             this.refresh();
         };
     },