feat: add dev tools page and update sidebar toggle and team mood dashboard UI

This commit is contained in:
root
2026-03-29 15:04:44 +07:00
parent 2a670d80d1
commit f4f842d658
6 changed files with 201 additions and 39 deletions

View File

@@ -268,11 +268,11 @@ if (empty($_SESSION['dash_logged_today'])) {
<div class="db-stat-link">Open Vault →</div>
</a>
<!-- Projects -->
<!-- Files -->
<a href="?action=projects" class="db-stat-card" style="border-top:3px solid #F59E0B;">
<div class="db-stat-label">
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"></path></svg>
Projects & Files
Files
</div>
<div class="db-stat-value" style="color:#F59E0B;"><?= $projects_count ?></div>
<div class="db-stat-sub">
@@ -295,36 +295,45 @@ if (empty($_SESSION['dash_logged_today'])) {
</a>
</div>
<!-- ── Team Moods + Activity Log ───────────────────────────────────────────── -->
<div class="two-col">
<!-- Team Moods -->
<div class="card">
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;">
<h3 style="font-size:1rem; font-weight:700;">👥 Team Mood</h3>
<span style="font-size:0.75rem; color:var(--text-light); font-style:italic;">Live from colleagues</span>
</div>
<?php if(empty($team_moods)): ?>
<p style="color:var(--text-light); font-size:0.85rem;">No one else has set a mood yet.</p>
<?php else: ?>
<div class="team-mood-row">
<?php foreach($team_moods as $tm): ?>
<div class="team-mood-chip" title="Updated: <?= date('M j, H:i', strtotime($tm['mood_updated_at'])) ?>">
<span class="em"><?= $tm['mood'] ?></span>
<span><?= htmlspecialchars($tm['username']) ?></span>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
<?php if($my_mood): ?>
<div style="margin-top:1rem; padding-top:0.75rem; border-top:1px dashed var(--border); font-size:0.8rem; color:var(--text-light);">
Your mood is visible to your team: <strong style="color:var(--text);"><?= $my_mood ?></strong>
</div>
<?php endif; ?>
<!-- ── Team Moods ───────────────────────────────────────────── -->
<div class="card" style="margin-bottom:1.5rem;">
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;">
<h3 style="font-size:1rem; font-weight:700;">👥 Team Mood</h3>
<span style="font-size:0.75rem; color:var(--text-light); font-style:italic;">Live from colleagues</span>
</div>
<?php if(empty($team_moods)): ?>
<p style="color:var(--text-light); font-size:0.85rem;">No one else has set a mood yet.</p>
<?php else: ?>
<div class="team-mood-row" style="display:flex; flex-wrap:nowrap; overflow-x:auto; gap:1rem; padding-bottom:0.5rem;">
<?php
$avatar_colors_tm = ['#4F46E5','#10B981','#F59E0B','#EF4444','#8B5CF6','#06B6D4','#EC4899','#84CC16'];
foreach($team_moods as $tm):
$initial = strtoupper(mb_substr($tm['username'], 0, 1));
$color = $avatar_colors_tm[crc32($tm['username']) % count($avatar_colors_tm)];
?>
<div style="position:relative; flex-shrink:0; cursor:pointer;" title="<?= htmlspecialchars($tm['username']) ?> (Updated: <?= date('M j, H:i', strtotime($tm['mood_updated_at'])) ?>)">
<div style="width:40px; height:40px; border-radius:50%; background:<?= $color ?>; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1rem;">
<?= $initial ?>
</div>
<div style="position:absolute; top:-4px; right:-4px; background:var(--surface); border-radius:50%; width:20px; height:20px; display:flex; align-items:center; justify-content:center; font-size:0.8rem; box-shadow:0 2px 4px rgba(0,0,0,0.1);">
<?= $tm['mood'] ?>
</div>
<div style="font-size:0.65rem; color:var(--text-light); text-align:center; margin-top:4px; max-width:40px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
<?= htmlspecialchars($tm['username']) ?>
</div>
</div>
<?php endforeach; ?>
</div>
<?php endif; ?>
<?php if($my_mood): ?>
<div style="margin-top:0.5rem; font-size:0.8rem; color:var(--text-light);">
Your mood is visible to your team: <strong style="color:var(--text);"><?= $my_mood ?></strong>
</div>
<?php endif; ?>
</div>
<!-- Activity Log -->
<div class="card">
<!-- ── Activity Log ───────────────────────────────────────────── -->
<div class="card" style="flex:1; display:flex; flex-direction:column; min-height:0;">
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;">
<div style="display:flex; align-items:center; gap:0.65rem;">
<h3 style="font-size:1rem; font-weight:700;">🕓 Recent Activity</h3>
@@ -393,7 +402,6 @@ if (empty($_SESSION['dash_logged_today'])) {
<?php endif; ?>
</div>
</div>
</div><!-- .db-wrapper -->
<script>
@@ -401,7 +409,7 @@ if (empty($_SESSION['dash_logged_today'])) {
function updateTime() {
const now = new Date();
const el = document.getElementById('current-datetime');
if (el) el.textContent = now.toLocaleString('id-ID', {
if (el) el.textContent = now.toLocaleString('en-US', {
weekday:'long', year:'numeric', month:'long', day:'numeric',
hour:'2-digit', minute:'2-digit', second:'2-digit'
});