579 lines
43 KiB
PHP
579 lines
43 KiB
PHP
<?php
|
|
declare(strict_types=1);
|
|
|
|
require_once __DIR__ . '/../src/Database.php';
|
|
require_once __DIR__ . '/../src/FirewallManager.php';
|
|
require_once __DIR__ . '/../src/UcpAuth.php';
|
|
|
|
use App\Database;
|
|
use App\UcpAuth;
|
|
|
|
$db = Database::getConnection();
|
|
$ucpEnabled = UcpAuth::isUcpEnabled($db);
|
|
$currentUser = $ucpEnabled ? UcpAuth::getCurrentUser($db) : null;
|
|
$isAuth = ($currentUser !== null);
|
|
|
|
$branding = $db->query('SELECT company_name, company_logo, ucp_logo FROM settings WHERE id = 1 LIMIT 1')->fetch(\PDO::FETCH_ASSOC) ?: [];
|
|
$companyName = trim((string)($branding['company_name'] ?? ''));
|
|
$companyLogo = trim((string)($branding['company_logo'] ?? ''));
|
|
$ucpLogo = trim((string)($branding['ucp_logo'] ?? ''));
|
|
$ucpEffectiveLogo = $ucpLogo !== '' ? $ucpLogo : $companyLogo;
|
|
$appVerData = file_exists(__DIR__ . '/../version.json') ? json_decode((string)file_get_contents(__DIR__ . '/../version.json'), true) : [];
|
|
$appVersion = $appVerData['version'] ?? '2.5.0';
|
|
$csrfToken = UcpAuth::getCsrfToken();
|
|
?>
|
|
<!DOCTYPE html>
|
|
<html lang="fr" class="h-full bg-slate-50">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
|
|
<title><?= htmlspecialchars($companyName ?: 'NexusPBX') ?> — Portail Utilisateur (UCP)</title>
|
|
<link rel="icon" type="image/png" href="/assets/favicon.png?v=<?= file_exists(__DIR__ . '/assets/favicon.png') ? filemtime(__DIR__ . '/assets/favicon.png') : 1 ?>">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script>
|
|
tailwind.config = {
|
|
theme: {
|
|
extend: {
|
|
fontFamily: {
|
|
sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
|
|
mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<style>
|
|
html, body {
|
|
max-width: 100%;
|
|
overflow-x: hidden;
|
|
-webkit-text-size-adjust: 100%;
|
|
}
|
|
body { background-color: #f8fafc; color: #0f172a; }
|
|
.ucp-card { background: #ffffff; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04); }
|
|
@media screen and (max-width: 639px) {
|
|
input, select, textarea {
|
|
font-size: 16px !important;
|
|
}
|
|
}
|
|
.ucp-nav-scroll {
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
.ucp-nav-scroll::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
::-webkit-scrollbar { width: 7px; height: 7px; }
|
|
::-webkit-scrollbar-track { background: #f1f5f9; }
|
|
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
|
|
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
|
|
|
|
@page {
|
|
size: A4 portrait;
|
|
margin: 11mm 12mm;
|
|
}
|
|
@media print {
|
|
html, body {
|
|
background: #ffffff !important;
|
|
color: #0f172a !important;
|
|
-webkit-print-color-adjust: exact !important;
|
|
print-color-adjust: exact !important;
|
|
}
|
|
header, #ucp-toast-container, #ucp-profile-modal, .no-print {
|
|
display: none !important;
|
|
}
|
|
main {
|
|
max-width: 100% !important;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
}
|
|
.ucp-panel {
|
|
display: none !important;
|
|
}
|
|
#ucp-panel-guide {
|
|
display: block !important;
|
|
margin: 0 !important;
|
|
padding: 0 !important;
|
|
}
|
|
#ucp-guide-printable {
|
|
border: none !important;
|
|
box-shadow: none !important;
|
|
padding: 0 !important;
|
|
margin: 0 !important;
|
|
}
|
|
.ucp-print-avoid-break {
|
|
break-inside: avoid !important;
|
|
page-break-inside: avoid !important;
|
|
}
|
|
.ucp-print-3col {
|
|
display: grid !important;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
|
|
gap: 0.75rem !important;
|
|
}
|
|
.ucp-print-row {
|
|
flex-direction: row !important;
|
|
align-items: center !important;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="min-h-full font-sans antialiased text-slate-800">
|
|
|
|
<!-- Toast Container -->
|
|
<div id="ucp-toast-container" class="fixed top-4 inset-x-3 sm:inset-x-auto sm:right-4 z-50 flex flex-col gap-2 sm:max-w-sm sm:w-full pointer-events-none"></div>
|
|
|
|
<?php if (!$ucpEnabled): ?>
|
|
<div class="min-h-screen flex items-center justify-center p-6">
|
|
<div class="max-w-md w-full ucp-card rounded-2xl p-8 text-center space-y-3">
|
|
<div class="w-12 h-12 mx-auto rounded-xl bg-amber-50 border border-amber-200 flex items-center justify-center text-amber-600">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 10-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 002.25-2.25v-6.75a2.25 2.25 0 00-2.25-2.25H6.75a2.25 2.25 0 00-2.25 2.25v6.75a2.25 2.25 0 002.25 2.25z"/></svg>
|
|
</div>
|
|
<h1 class="text-lg font-bold text-slate-900">Portail Utilisateur désactivé</h1>
|
|
<p class="text-sm text-slate-500">Ce service a été temporairement désactivé par votre administrateur système.</p>
|
|
</div>
|
|
</div>
|
|
<?php elseif (!$isAuth): ?>
|
|
<!-- ÉCRAN DE CONNEXION UCP (WALLPAPER CLAIR + CARTE GLASSMORPHISM) -->
|
|
<div class="min-h-screen flex flex-col items-center justify-center p-4 relative overflow-hidden bg-slate-100">
|
|
<div class="absolute inset-0 bg-cover bg-center bg-no-repeat" style="background-image: url('/assets/login-bg.jpg?v=<?= file_exists(__DIR__ . '/assets/login-bg.jpg') ? filemtime(__DIR__ . '/assets/login-bg.jpg') : 1 ?>');"></div>
|
|
<div class="absolute inset-0 bg-white/10"></div>
|
|
<div class="relative z-10 w-full max-w-md bg-white/85 backdrop-blur-xl rounded-3xl p-8 shadow-xl shadow-indigo-900/10 border border-white/80">
|
|
<div class="flex flex-col items-center text-center mb-7">
|
|
<?php if ($ucpEffectiveLogo !== ''): ?>
|
|
<img src="<?= htmlspecialchars($ucpEffectiveLogo) ?>" alt="Logo" class="h-14 w-auto object-contain mb-3 rounded-xl">
|
|
<?php else: ?>
|
|
<img src="/assets/logo.png?v=1" alt="NexusPBX" class="h-14 w-auto object-contain mb-3">
|
|
<?php endif; ?>
|
|
<span class="inline-flex items-center gap-1.5 px-3 py-1 rounded-full bg-indigo-50 border border-indigo-100 text-indigo-700 text-[11px] font-semibold uppercase tracking-wider mb-2">
|
|
Portail Utilisateur • UCP
|
|
</span>
|
|
<h1 class="text-xl font-bold text-slate-900"><?= htmlspecialchars($companyName ?: 'NexusPBX') ?></h1>
|
|
<p class="text-xs text-slate-500 mt-1">Connectez-vous pour gérer vos postes, renvois, messagerie et annuaire</p>
|
|
</div>
|
|
|
|
<form id="ucp-login-form" class="space-y-4">
|
|
<div>
|
|
<label for="ucp-login-user" class="block text-xs font-semibold text-slate-700 mb-1.5">Identifiant utilisateur</label>
|
|
<input type="text" id="ucp-login-user" name="username" required autocomplete="username" autofocus
|
|
placeholder="Votre identifiant"
|
|
class="w-full px-3.5 py-2.5 rounded-xl bg-slate-50 border border-slate-300 text-base sm:text-sm text-slate-900 focus:bg-white focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500 focus:outline-none transition">
|
|
</div>
|
|
<div>
|
|
<label for="ucp-login-pass" class="block text-xs font-semibold text-slate-700 mb-1.5">Mot de passe</label>
|
|
<input type="password" id="ucp-login-pass" name="password" required autocomplete="current-password"
|
|
placeholder="••••••••"
|
|
class="w-full px-3.5 py-2.5 rounded-xl bg-slate-50 border border-slate-300 text-base sm:text-sm text-slate-900 focus:bg-white focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500 focus:outline-none transition">
|
|
</div>
|
|
<div id="ucp-login-error" class="hidden rounded-xl bg-rose-50 border border-rose-200 px-3.5 py-2.5 text-xs font-medium text-rose-700"></div>
|
|
<button type="submit" id="ucp-login-btn"
|
|
class="w-full py-2.5 px-4 rounded-xl bg-indigo-600 hover:bg-indigo-700 active:bg-indigo-800 text-white text-sm font-semibold shadow-sm shadow-indigo-500/20 transition">
|
|
Se connecter au portail
|
|
</button>
|
|
</form>
|
|
|
|
<div class="mt-6 pt-5 border-t border-slate-100 text-center text-[11px] text-slate-400">
|
|
Espace utilisateur isolé • Protégé par Fail2ban • NexusPBX v<?= htmlspecialchars($appVersion) ?>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<?php else: ?>
|
|
<!-- INTERFACE PRINCIPALE UCP -->
|
|
<div class="min-h-screen flex flex-col overflow-x-hidden">
|
|
<!-- Top Navbar -->
|
|
<header class="sticky top-0 z-30 bg-white/95 backdrop-blur border-b border-slate-200">
|
|
<div class="max-w-6xl mx-auto px-4 sm:px-6 h-16 flex items-center justify-between gap-4">
|
|
<div class="flex items-center gap-3 min-w-0">
|
|
<?php if ($ucpEffectiveLogo !== ''): ?>
|
|
<img src="<?= htmlspecialchars($ucpEffectiveLogo) ?>" alt="Logo" class="h-9 w-auto rounded-lg object-contain shrink-0">
|
|
<?php else: ?>
|
|
<img src="/assets/logo.png?v=1" alt="NexusPBX" class="h-9 w-auto object-contain shrink-0">
|
|
<?php endif; ?>
|
|
<div class="min-w-0">
|
|
<div class="flex items-center gap-2">
|
|
<span class="font-bold text-slate-900 text-sm sm:text-base truncate"><?= htmlspecialchars($companyName ?: 'NexusPBX') ?></span>
|
|
<span class="hidden sm:inline-flex px-2 py-0.5 rounded-full bg-indigo-50 text-indigo-700 border border-indigo-100 text-[10px] font-bold uppercase tracking-wide">UCP</span>
|
|
</div>
|
|
<p class="text-[11px] text-slate-500 truncate"><span class="hidden sm:inline">Espace personnel de </span><strong class="text-slate-700"><?= htmlspecialchars((string)($currentUser['display_name'] ?: $currentUser['username'])) ?></strong></p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2 shrink-0">
|
|
<button type="button" onclick="refreshUcpState(true)" title="Actualiser" aria-label="Actualiser"
|
|
class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl border border-slate-200 bg-white hover:bg-slate-50 text-xs font-semibold text-slate-600 transition">
|
|
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/></svg>
|
|
<span class="hidden sm:inline">Actualiser</span>
|
|
</button>
|
|
<button type="button" onclick="ucpLogout()" title="Déconnexion" aria-label="Déconnexion"
|
|
class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-xl border border-rose-200 bg-rose-50 hover:bg-rose-100 text-xs font-semibold text-rose-700 transition">
|
|
<svg class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/></svg>
|
|
<span class="hidden sm:inline">Déconnexion</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Navigation Onglets avec dégradé latéral discret sur mobile -->
|
|
<div class="relative max-w-6xl mx-auto border-t border-slate-100">
|
|
<button type="button" id="ucp-nav-hint-left" onclick="scrollUcpNav(-1)" aria-label="Onglets précédents"
|
|
class="hidden absolute left-0 top-0 bottom-0 z-10 w-9 items-center justify-start pl-1 bg-gradient-to-r from-white via-white/95 to-transparent text-slate-400 hover:text-indigo-600 transition">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2" d="M15 19l-7-7 7-7"/></svg>
|
|
</button>
|
|
<div id="ucp-nav-scroller" class="ucp-nav-scroll px-4 sm:px-6 overflow-x-auto scroll-smooth">
|
|
<nav class="flex items-center gap-1 py-2 whitespace-nowrap pr-6 sm:pr-0" id="ucp-nav">
|
|
<button type="button" data-ucp-tab="extensions" onclick="switchUcpTab('extensions')"
|
|
class="ucp-tab-btn px-3.5 py-2 rounded-xl text-xs font-semibold transition flex items-center gap-2 bg-indigo-50 text-indigo-700">
|
|
<svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M10.5 1.5H8.25A2.25 2.25 0 006 3.75v16.5a2.25 2.25 0 002.25 2.25h7.5A2.25 2.25 0 0018 20.25V3.75a2.25 2.25 0 00-2.25-2.25H13.5m-3 0V3h3V1.5m-3 0h3m-3 18.75h3"/></svg>
|
|
<span>Mes Postes & Renvois</span>
|
|
<span id="ucp-badge-exts" class="px-1.5 py-0.5 rounded-full bg-indigo-100 text-indigo-700 text-[10px] font-bold">0</span>
|
|
</button>
|
|
<button type="button" data-ucp-tab="voicemail" onclick="switchUcpTab('voicemail')"
|
|
class="ucp-tab-btn px-3.5 py-2 rounded-xl text-xs font-semibold transition flex items-center gap-2 text-slate-600 hover:bg-slate-100">
|
|
<svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M21.75 9v.906a2.25 2.25 0 01-1.183 1.981l-6.478 3.488M2.25 9v.906a2.25 2.25 0 001.183 1.981l6.478 3.488m8.839 2.51l-4.66-2.51m0 0l-1.023-.55a2.25 2.25 0 00-2.134 0l-1.022.55m0 0l-4.661 2.51m16.5 1.615a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V8.844a2.25 2.25 0 011.183-1.98l7.5-4.04a2.25 2.25 0 012.134 0l7.5 4.04a2.25 2.25 0 011.183 1.98V19.5z"/></svg>
|
|
<span>Messagerie Vocale</span>
|
|
<span id="ucp-badge-vm" class="px-1.5 py-0.5 rounded-full bg-slate-200 text-slate-700 text-[10px] font-bold">0</span>
|
|
</button>
|
|
<button type="button" data-ucp-tab="cdr" onclick="switchUcpTab('cdr')"
|
|
class="ucp-tab-btn px-3.5 py-2 rounded-xl text-xs font-semibold transition flex items-center gap-2 text-slate-600 hover:bg-slate-100">
|
|
<svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 002.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 01-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 00-1.091-.852H4.5A2.25 2.25 0 002.25 4.5v2.25z"/></svg>
|
|
<span>Mes Appels</span>
|
|
</button>
|
|
<button type="button" data-ucp-tab="phonebook" onclick="switchUcpTab('phonebook')"
|
|
class="ucp-tab-btn px-3.5 py-2 rounded-xl text-xs font-semibold transition flex items-center gap-2 text-slate-600 hover:bg-slate-100">
|
|
<svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.042A8.967 8.967 0 006 3.75c-1.052 0-2.062.18-3 .512v14.25A8.987 8.987 0 016 18c2.305 0 4.408.867 6 2.292m0-14.25a8.966 8.966 0 016-2.292c1.052 0 2.062.18 3 .512v14.25A8.987 8.987 0 0018 18a8.967 8.967 0 00-6 2.292m0-14.25v14.25"/></svg>
|
|
<span>Annuaire & Profil</span>
|
|
</button>
|
|
<button type="button" data-ucp-tab="guide" onclick="switchUcpTab('guide')"
|
|
class="ucp-tab-btn px-3.5 py-2 rounded-xl text-xs font-semibold transition flex items-center gap-2 text-slate-600 hover:bg-slate-100">
|
|
<svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12h3.75M9 15h3.75M9 18h3.75m3 .75H18a2.25 2.25 0 002.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 00-1.123-.08m-5.801 0c-.065.21-.1.433-.1.664 0 .414.336.75.75.75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m0 0H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V9.375c0-.621-.504-1.125-1.125-1.125H8.25z"/></svg>
|
|
<span>Notice & Codes</span>
|
|
</button>
|
|
<button type="button" data-ucp-tab="account" onclick="switchUcpTab('account')"
|
|
class="ucp-tab-btn px-3.5 py-2 rounded-xl text-xs font-semibold transition flex items-center gap-2 text-slate-600 hover:bg-slate-100">
|
|
<svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M15.75 5.25a3 3 0 013 3m3 0a6 6 0 01-7.029 5.912c-.563-.097-1.159.026-1.563.43L10.5 17.25H8.25v2.25H6v2.25H2.25v-2.818c0-.597.237-1.17.659-1.591l6.499-6.499c.404-.404.527-1 .43-1.563A6 6 0 1121.75 8.25z"/></svg>
|
|
<span>Mon Compte</span>
|
|
</button>
|
|
</nav>
|
|
</div>
|
|
<button type="button" id="ucp-nav-hint-right" onclick="scrollUcpNav(1)" aria-label="Onglets suivants"
|
|
class="hidden absolute right-0 top-0 bottom-0 z-10 w-10 items-center justify-end pr-1.5 bg-gradient-to-l from-white via-white/95 to-transparent text-slate-400 hover:text-indigo-600 transition">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.2" d="M9 5l7 7-7 7"/></svg>
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Contenu principal -->
|
|
<main class="flex-1 max-w-6xl w-full mx-auto px-4 sm:px-6 py-6 space-y-6">
|
|
|
|
<!-- ONGLET 1 : MES POSTES & RENVOIS -->
|
|
<section id="ucp-panel-extensions" class="ucp-panel space-y-5">
|
|
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
|
<div>
|
|
<h2 class="text-lg font-bold text-slate-900">Mes Postes & Redirections</h2>
|
|
<p class="text-xs text-slate-500">Activez le mode Ne Pas Déranger (DND) ou configurez vos renvois vers un autre poste ou votre messagerie vocale.</p>
|
|
</div>
|
|
</div>
|
|
<div id="ucp-extensions-grid" class="grid grid-cols-1 lg:grid-cols-2 gap-5">
|
|
<div class="ucp-card rounded-2xl p-8 text-center text-sm text-slate-400 col-span-full">Chargement de vos postes…</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ONGLET 2 : MESSAGERIE VOCALE -->
|
|
<section id="ucp-panel-voicemail" class="ucp-panel hidden space-y-5">
|
|
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
|
<div>
|
|
<h2 class="text-lg font-bold text-slate-900">Messagerie Vocale</h2>
|
|
<p class="text-xs text-slate-500">Écoutez, téléchargez, archivez ou supprimez vos messages vocaux et gérez votre code PIN.</p>
|
|
</div>
|
|
<div id="ucp-vm-ext-pills" class="flex flex-wrap gap-2"></div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
<!-- Liste des messages -->
|
|
<div class="lg:col-span-2 space-y-4">
|
|
<div class="flex items-center justify-between">
|
|
<div class="inline-flex rounded-xl bg-white border border-slate-200 p-1 text-xs font-semibold">
|
|
<button type="button" onclick="setVmFolderFilter('all')" id="vm-filter-all" class="px-3 py-1.5 rounded-lg bg-indigo-50 text-indigo-700">Tous</button>
|
|
<button type="button" onclick="setVmFolderFilter('INBOX')" id="vm-filter-INBOX" class="px-3 py-1.5 rounded-lg text-slate-600 hover:bg-slate-50">Nouveaux</button>
|
|
<button type="button" onclick="setVmFolderFilter('Old')" id="vm-filter-Old" class="px-3 py-1.5 rounded-lg text-slate-600 hover:bg-slate-50">Archivés</button>
|
|
</div>
|
|
</div>
|
|
<div id="ucp-vm-list" class="space-y-3">
|
|
<div class="ucp-card rounded-2xl p-8 text-center text-sm text-slate-400">Chargement des messages…</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Préférences Boîte Vocale -->
|
|
<div class="ucp-card rounded-2xl p-5 h-fit space-y-4">
|
|
<div>
|
|
<h3 class="text-sm font-bold text-slate-900">Préférences Boîte Vocale</h3>
|
|
<p id="ucp-vm-prefs-subtitle" class="text-xs text-slate-500 mt-0.5">Poste sélectionné</p>
|
|
</div>
|
|
<form id="ucp-vm-prefs-form" class="space-y-3">
|
|
<div>
|
|
<label class="block text-xs font-semibold text-slate-700 mb-1">Nouveau code PIN (4 à 12 chiffres)</label>
|
|
<input type="password" name="pin" inputmode="numeric" pattern="\d{4,12}" placeholder="Laisser vide pour conserver l'actuel"
|
|
class="w-full px-3 py-2 rounded-xl bg-slate-50 border border-slate-300 text-xs text-slate-900 font-mono focus:bg-white focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500 focus:outline-none">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-semibold text-slate-700 mb-1">E-mail de notification</label>
|
|
<input type="email" name="email" placeholder="prenom@entreprise.fr"
|
|
class="w-full px-3 py-2 rounded-xl bg-slate-50 border border-slate-300 text-xs text-slate-900 focus:bg-white focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500 focus:outline-none">
|
|
</div>
|
|
<button type="submit" id="ucp-vm-prefs-btn"
|
|
class="w-full py-2 px-4 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-semibold transition">
|
|
Enregistrer les préférences
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ONGLET 3 : MES APPELS (MINI-CDR PERSONNEL) -->
|
|
<section id="ucp-panel-cdr" class="ucp-panel hidden space-y-5">
|
|
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
|
<div>
|
|
<h2 class="text-lg font-bold text-slate-900">Mon Journal d'Appels</h2>
|
|
<p class="text-xs text-slate-500">Historique filtré sur vos postes liés uniquement.</p>
|
|
</div>
|
|
<div class="flex flex-wrap items-center gap-2 text-xs">
|
|
<span class="px-3 py-1 rounded-full bg-white border border-slate-200 font-semibold text-slate-700">Total : <strong id="ucp-cdr-total">0</strong></span>
|
|
<span class="px-3 py-1 rounded-full bg-emerald-50 border border-emerald-200 font-semibold text-emerald-700">Répondus : <strong id="ucp-cdr-answered">0</strong></span>
|
|
<span class="px-3 py-1 rounded-full bg-rose-50 border border-rose-200 font-semibold text-rose-700">Manqués : <strong id="ucp-cdr-missed">0</strong></span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ucp-card rounded-2xl p-4 grid grid-cols-1 sm:grid-cols-4 gap-3">
|
|
<select id="ucp-cdr-direction" onchange="loadPersonalCdr()" class="px-3 py-2 rounded-xl bg-slate-50 border border-slate-300 text-xs font-medium text-slate-800">
|
|
<option value="all">Toutes directions</option>
|
|
<option value="inbound">Appels entrants</option>
|
|
<option value="outbound">Appels sortants</option>
|
|
<option value="internal">Appels internes</option>
|
|
</select>
|
|
<select id="ucp-cdr-disposition" onchange="loadPersonalCdr()" class="px-3 py-2 rounded-xl bg-slate-50 border border-slate-300 text-xs font-medium text-slate-800">
|
|
<option value="all">Tous statuts</option>
|
|
<option value="ANSWERED">Répondus uniquement</option>
|
|
<option value="MISSED">Manqués / Sans réponse</option>
|
|
</select>
|
|
<select id="ucp-cdr-period" onchange="loadPersonalCdr()" class="px-3 py-2 rounded-xl bg-slate-50 border border-slate-300 text-xs font-medium text-slate-800">
|
|
<option value="all">Tout l'historique</option>
|
|
<option value="today">Aujourd'hui</option>
|
|
<option value="week">7 derniers jours</option>
|
|
<option value="month">30 derniers jours</option>
|
|
</select>
|
|
<input type="text" id="ucp-cdr-search" oninput="debounceLoadCdr()" placeholder="Rechercher un numéro ou nom…"
|
|
class="px-3 py-2 rounded-xl bg-slate-50 border border-slate-300 text-xs text-slate-900 focus:bg-white focus:outline-none focus:border-indigo-500">
|
|
</div>
|
|
|
|
<!-- Vue mobile style journal d'appels iPhone (< 768px) -->
|
|
<div id="ucp-cdr-mobile-list" class="md:hidden space-y-2.5">
|
|
<div class="ucp-card rounded-2xl p-6 text-center text-xs text-slate-400">Chargement…</div>
|
|
</div>
|
|
|
|
<!-- Vue tableau complète sur ordinateur (>= 768px) -->
|
|
<div class="hidden md:block ucp-card rounded-2xl overflow-hidden">
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left text-xs">
|
|
<thead class="bg-slate-50 border-b border-slate-200 text-slate-500 uppercase text-[11px]">
|
|
<tr>
|
|
<th class="py-3 px-4">Date & Heure</th>
|
|
<th class="py-3 px-4">Direction</th>
|
|
<th class="py-3 px-4">De</th>
|
|
<th class="py-3 px-4">Vers</th>
|
|
<th class="py-3 px-4">Durée</th>
|
|
<th class="py-3 px-4">Statut</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="ucp-cdr-tbody" class="divide-y divide-slate-100">
|
|
<tr><td colspan="6" class="py-8 text-center text-slate-400">Chargement…</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ONGLET 4 : ANNUAIRE & PROFIL -->
|
|
<section id="ucp-panel-phonebook" class="ucp-panel hidden space-y-5">
|
|
<div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
|
<div>
|
|
<h2 class="text-lg font-bold text-slate-900">Annuaire de l'Entreprise</h2>
|
|
<p class="text-xs text-slate-500">Consultez tous les contacts et mettez à jour la photo ou l'e-mail de vos propres postes.</p>
|
|
</div>
|
|
<input type="text" id="ucp-pb-search" oninput="renderPhonebookGrid()" placeholder="Rechercher un nom, poste, email…"
|
|
class="w-full sm:w-72 px-3.5 py-2 rounded-xl bg-white border border-slate-300 text-xs text-slate-900 focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500 focus:outline-none">
|
|
</div>
|
|
|
|
<div id="ucp-pb-group-tabs" class="flex flex-wrap items-center gap-2"></div>
|
|
|
|
<div id="ucp-pb-grid" class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
<div class="ucp-card rounded-2xl p-8 text-center text-sm text-slate-400 col-span-full">Chargement de l'annuaire…</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ONGLET 5 : NOTICE TÉLÉPHONIE, CODES DE FONCTION & EXPORT PDF -->
|
|
<section id="ucp-panel-guide" class="ucp-panel hidden space-y-5">
|
|
<!-- Barre d'actions écran uniquement -->
|
|
<div class="no-print flex flex-col sm:flex-row sm:items-center justify-between gap-3">
|
|
<div>
|
|
<h2 class="text-lg font-bold text-slate-900">Notice d'Utilisation & Codes de Fonction</h2>
|
|
<p class="text-xs text-slate-500">Mémo des raccourcis téléphoniques actifs et fiche pratique imprimable en PDF.</p>
|
|
</div>
|
|
<div class="flex flex-wrap items-center gap-2.5">
|
|
<input type="text" id="ucp-guide-search" oninput="renderFeatureGuide()" placeholder="Filtrer un code ou service (*97, renvoi…)"
|
|
class="w-full sm:w-64 px-3.5 py-2 rounded-xl bg-white border border-slate-300 text-xs text-slate-900 focus:ring-2 focus:ring-indigo-500/30 focus:border-indigo-500 focus:outline-none">
|
|
<button type="button" onclick="printFeatureGuide()"
|
|
class="inline-flex items-center gap-2 px-4 py-2 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-semibold shadow-sm shadow-indigo-500/20 transition">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 17h2a2 2 0 002-2v-4a2 2 0 00-2-2H5a2 2 0 00-2 2v4a2 2 0 002 2h2m2 4h6a2 2 0 002-2v-4a2 2 0 00-2-2H9a2 2 0 00-2 2v4a2 2 0 002 2zm8-12V5a2 2 0 00-2-2H9a2 2 0 00-2 2v4h10z"/></svg>
|
|
<span>Imprimer / Exporter en PDF</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Document A4 Propre & Imprimable -->
|
|
<div id="ucp-guide-printable" class="ucp-card rounded-3xl p-6 sm:p-8 space-y-6">
|
|
<!-- En-tête Corporate du document -->
|
|
<div class="ucp-print-avoid-break ucp-print-row rounded-2xl bg-gradient-to-r from-slate-900 via-indigo-950 to-slate-900 text-white p-5 sm:p-6 flex flex-col sm:flex-row sm:items-center justify-between gap-4">
|
|
<div class="flex items-center gap-4 min-w-0">
|
|
<div class="h-14 w-14 sm:h-16 sm:w-16 rounded-2xl bg-white p-2 flex items-center justify-center shrink-0 shadow-md">
|
|
<?php if ($ucpEffectiveLogo !== ''): ?>
|
|
<img src="<?= htmlspecialchars($ucpEffectiveLogo) ?>" alt="Logo" class="max-h-full max-w-full object-contain">
|
|
<?php else: ?>
|
|
<img src="/assets/logo.png?v=1" alt="NexusPBX" class="max-h-full max-w-full object-contain">
|
|
<?php endif; ?>
|
|
</div>
|
|
<div class="min-w-0">
|
|
<div class="text-[10px] font-bold uppercase tracking-widest text-indigo-300">Fiche Mémo Utilisateur • Téléphonie IP</div>
|
|
<h3 class="text-lg sm:text-xl font-extrabold tracking-tight truncate"><?= htmlspecialchars($companyName ?: 'NexusPBX') ?></h3>
|
|
<p class="text-xs text-slate-300 mt-0.5">Guide des codes de fonction, messagerie vocale et renvois d'appel</p>
|
|
</div>
|
|
</div>
|
|
<div class="sm:text-right bg-white/10 border border-white/15 rounded-xl px-4 py-2.5 text-xs space-y-1 shrink-0">
|
|
<div class="text-slate-300">Utilisateur : <strong class="text-white"><?= htmlspecialchars((string)($currentUser['display_name'] ?: $currentUser['username'])) ?></strong></div>
|
|
<div class="text-slate-300">Poste(s) : <strong id="ucp-guide-user-exts" class="font-mono text-indigo-200">—</strong></div>
|
|
<div class="text-[10px] text-slate-400">Édité le <span id="ucp-guide-print-date"><?= date('d/m/Y') ?></span> • v<?= htmlspecialchars($appVersion) ?></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Encarts Notice Pratique Rapide -->
|
|
<div id="ucp-guide-quickcards" class="ucp-print-3col grid grid-cols-1 md:grid-cols-3 gap-4"></div>
|
|
|
|
<!-- Liste complète structurée par catégorie -->
|
|
<div id="ucp-guide-categories" class="space-y-4">
|
|
<div class="text-center text-sm text-slate-400 py-8">Chargement des codes de fonction…</div>
|
|
</div>
|
|
|
|
<!-- Pied de document -->
|
|
<div class="ucp-print-avoid-break pt-4 border-t border-slate-200 flex flex-col sm:flex-row sm:items-center justify-between gap-2 text-[11px] text-slate-500">
|
|
<div class="flex items-center gap-1.5">
|
|
<svg class="w-4 h-4 text-amber-500 shrink-0" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 18v-5.25m0 0a6.01 6.01 0 001.5-.189m-1.5.189a6.01 6.01 0 01-1.5-.189m3.75 7.478a12.06 12.06 0 01-4.5 0m3.75 2.383a14.406 14.406 0 01-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 10-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"/></svg>
|
|
<span><strong>Astuce :</strong> composez ces codes directement sur votre combiné IP, ou pilotez DND / renvois / messagerie depuis le portail UCP.</span>
|
|
</div>
|
|
<div class="font-semibold text-slate-600"><?= htmlspecialchars($companyName ?: 'NexusPBX') ?> — Document interne</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- ONGLET 6 : MON COMPTE -->
|
|
<section id="ucp-panel-account" class="ucp-panel hidden space-y-5">
|
|
<div>
|
|
<h2 class="text-lg font-bold text-slate-900">Mon Compte UCP</h2>
|
|
<p class="text-xs text-slate-500">Sécurisez votre accès personnel au portail utilisateur.</p>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="ucp-card rounded-2xl p-6 space-y-4">
|
|
<h3 class="text-sm font-bold text-slate-900">Informations de session</h3>
|
|
<dl class="space-y-2.5 text-xs">
|
|
<div class="flex justify-between py-2 border-b border-slate-100">
|
|
<dt class="text-slate-500">Identifiant</dt>
|
|
<dd class="font-mono font-semibold text-slate-900"><?= htmlspecialchars((string)$currentUser['username']) ?></dd>
|
|
</div>
|
|
<div class="flex justify-between py-2 border-b border-slate-100">
|
|
<dt class="text-slate-500">Nom affiché</dt>
|
|
<dd class="font-semibold text-slate-900"><?= htmlspecialchars((string)($currentUser['display_name'] ?: $currentUser['username'])) ?></dd>
|
|
</div>
|
|
<div class="flex justify-between py-2 border-b border-slate-100">
|
|
<dt class="text-slate-500">Postes autorisés</dt>
|
|
<dd id="ucp-account-exts" class="font-mono font-semibold text-indigo-600">—</dd>
|
|
</div>
|
|
<div class="flex justify-between py-2">
|
|
<dt class="text-slate-500">Dernière connexion</dt>
|
|
<dd class="text-slate-700"><?= htmlspecialchars((string)($currentUser['last_login_at'] ?? 'Première connexion')) ?></dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
|
|
<div class="ucp-card rounded-2xl p-6 space-y-4">
|
|
<h3 class="text-sm font-bold text-slate-900">Changer mon mot de passe UCP</h3>
|
|
<form id="ucp-password-form" class="space-y-3">
|
|
<div>
|
|
<label class="block text-xs font-semibold text-slate-700 mb-1">Mot de passe actuel</label>
|
|
<input type="password" name="current_password" required autocomplete="current-password"
|
|
class="w-full px-3 py-2 rounded-xl bg-slate-50 border border-slate-300 text-xs text-slate-900 focus:bg-white focus:outline-none focus:border-indigo-500">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-semibold text-slate-700 mb-1">Nouveau mot de passe (min. 6 caractères)</label>
|
|
<input type="password" name="new_password" required minlength="6" autocomplete="new-password"
|
|
class="w-full px-3 py-2 rounded-xl bg-slate-50 border border-slate-300 text-xs text-slate-900 focus:bg-white focus:outline-none focus:border-indigo-500">
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-semibold text-slate-700 mb-1">Confirmer le nouveau mot de passe</label>
|
|
<input type="password" name="confirm_password" required minlength="6" autocomplete="new-password"
|
|
class="w-full px-3 py-2 rounded-xl bg-slate-50 border border-slate-300 text-xs text-slate-900 focus:bg-white focus:outline-none focus:border-indigo-500">
|
|
</div>
|
|
<button type="submit" class="w-full py-2.5 px-4 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-semibold transition">
|
|
Mettre à jour mon mot de passe
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<!-- MODALE ÉDITION PROFIL ANNUAIRE (PHOTO + EMAIL UNIQUEMENT) -->
|
|
<div id="ucp-profile-modal" class="hidden fixed inset-0 z-50 bg-slate-900/40 backdrop-blur-sm flex items-center justify-center p-4">
|
|
<div class="w-full max-w-md bg-white rounded-2xl border border-slate-200 shadow-2xl p-6 space-y-5">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<h3 class="text-base font-bold text-slate-900">Modifier ma fiche annuaire</h3>
|
|
<p id="ucp-profile-modal-sub" class="text-xs text-slate-500">Poste —</p>
|
|
</div>
|
|
<button type="button" onclick="closeProfileModal()" class="text-slate-400 hover:text-slate-700 text-lg font-bold">✕</button>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-4 p-3.5 rounded-xl bg-slate-50 border border-slate-200">
|
|
<img id="ucp-profile-preview" src="" alt="Avatar" class="w-14 h-14 rounded-full object-cover border border-slate-200 bg-white hidden">
|
|
<div id="ucp-profile-initials" class="w-14 h-14 rounded-full bg-indigo-100 text-indigo-700 font-bold flex items-center justify-center text-lg">?</div>
|
|
<div class="flex-1 min-w-0">
|
|
<label class="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg bg-white border border-slate-300 hover:bg-slate-100 text-xs font-semibold text-slate-700 cursor-pointer transition">
|
|
<svg class="w-4 h-4 text-slate-500 shrink-0" fill="none" stroke="currentColor" stroke-width="1.8" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M6.827 6.175A2.31 2.31 0 015.186 7.23c-.38.054-.757.112-1.134.175C2.999 7.58 2.25 8.507 2.25 9.574V18a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9.574c0-1.067-.75-1.994-1.802-2.169a47.865 47.865 0 00-1.134-.175 2.31 2.31 0 01-1.64-1.055l-.822-1.316a2.192 2.192 0 00-1.736-1.039 48.774 48.774 0 00-5.232 0 2.192 2.192 0 00-1.736 1.039l-.821 1.316z"/><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 12.75a4.5 4.5 0 11-9 0 4.5 4.5 0 019 0z"/></svg>
|
|
<span>Choisir une photo</span>
|
|
<input type="file" id="ucp-avatar-input" accept="image/jpeg,image/png,image/webp" class="hidden" onchange="uploadSelectedAvatar()">
|
|
</label>
|
|
<p class="text-[11px] text-slate-400 mt-1">JPG, PNG ou WebP • 5 Mo max.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<form id="ucp-profile-email-form" class="space-y-3">
|
|
<input type="hidden" id="ucp-profile-ext" value="">
|
|
<div>
|
|
<label class="block text-xs font-semibold text-slate-700 mb-1">Adresse e-mail affichée dans l'annuaire</label>
|
|
<input type="email" id="ucp-profile-email-input" placeholder="prenom.nom@entreprise.fr"
|
|
class="w-full px-3.5 py-2 rounded-xl bg-slate-50 border border-slate-300 text-xs text-slate-900 focus:bg-white focus:outline-none focus:border-indigo-500">
|
|
</div>
|
|
<div class="flex gap-2 pt-2">
|
|
<button type="button" onclick="closeProfileModal()" class="flex-1 py-2 px-4 rounded-xl border border-slate-200 text-xs font-semibold text-slate-600 hover:bg-slate-50">Fermer</button>
|
|
<button type="submit" class="flex-1 py-2 px-4 rounded-xl bg-indigo-600 hover:bg-indigo-700 text-white text-xs font-semibold">Enregistrer l'e-mail</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<script>
|
|
window.UCP_CSRF_TOKEN = <?= json_encode($csrfToken) ?>;
|
|
window.UCP_IS_AUTH = <?= json_encode($isAuth) ?>;
|
|
</script>
|
|
<script src="/assets/ucp.js?v=<?= file_exists(__DIR__ . '/assets/ucp.js') ? filemtime(__DIR__ . '/assets/ucp.js') : time() ?>"></script>
|
|
</body>
|
|
</html>
|
|
|