Compare commits
2 Commits
9b1d5753cb
...
937033ea07
| Author | SHA1 | Date | |
|---|---|---|---|
|
937033ea07 | ||
|
|
f89fcbee1c |
71
index.php
71
index.php
@@ -66,7 +66,6 @@ if ($action === 'login') {
|
||||
}
|
||||
|
||||
// Handle POST actions that need a redirect BEFORE layout outputs any HTML.
|
||||
// Adding new redirect-based POST keys here keeps header() calls safe.
|
||||
if ($_SERVER['REQUEST_METHOD'] === 'POST' && $user_id) {
|
||||
// Mood setter
|
||||
if (isset($_POST['set_mood'])) {
|
||||
@@ -86,19 +85,81 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST' && $user_id) {
|
||||
header('Location: ?action=dashboard');
|
||||
exit;
|
||||
}
|
||||
|
||||
// Profile picture upload
|
||||
if (isset($_POST['upload_profile_pic'])) {
|
||||
// Ensure column exists
|
||||
try { $pdo->exec("ALTER TABLE users ADD COLUMN profile_pic TEXT DEFAULT NULL"); } catch(Exception $e) {}
|
||||
if (isset($_FILES['profile_pic']) && $_FILES['profile_pic']['error'] === 0) {
|
||||
$allowed_types = ['image/jpeg','image/png','image/gif','image/webp'];
|
||||
if (in_array($_FILES['profile_pic']['type'], $allowed_types)) {
|
||||
$ext = pathinfo($_FILES['profile_pic']['name'], PATHINFO_EXTENSION);
|
||||
$filename = 'avatar_' . $user_id . '_' . time() . '.' . $ext;
|
||||
$dest = 'uploads/' . $filename;
|
||||
if (move_uploaded_file($_FILES['profile_pic']['tmp_name'], $dest)) {
|
||||
// Delete old pic
|
||||
$old = $pdo->prepare("SELECT profile_pic FROM users WHERE id=?");
|
||||
$old->execute([$user_id]);
|
||||
$old_pic = $old->fetchColumn();
|
||||
if ($old_pic && file_exists($old_pic)) @unlink($old_pic);
|
||||
$pdo->prepare("UPDATE users SET profile_pic=? WHERE id=?")->execute([$dest, $user_id]);
|
||||
}
|
||||
}
|
||||
}
|
||||
header('Location: ?action=' . ($_POST['redirect_to'] ?? 'dashboard'));
|
||||
exit;
|
||||
}
|
||||
|
||||
// Delete profile picture
|
||||
if (isset($_POST['delete_profile_pic'])) {
|
||||
try { $pdo->exec("ALTER TABLE users ADD COLUMN profile_pic TEXT DEFAULT NULL"); } catch(Exception $e) {}
|
||||
$old = $pdo->prepare("SELECT profile_pic FROM users WHERE id=?");
|
||||
$old->execute([$user_id]);
|
||||
$old_pic = $old->fetchColumn();
|
||||
if ($old_pic && file_exists($old_pic)) @unlink($old_pic);
|
||||
$pdo->prepare("UPDATE users SET profile_pic=NULL WHERE id=?")->execute([$user_id]);
|
||||
header('Location: ?action=' . ($_POST['redirect_to'] ?? 'dashboard'));
|
||||
exit;
|
||||
}
|
||||
|
||||
// Mark all notifications as read
|
||||
if (isset($_POST['mark_all_read'])) {
|
||||
$pdo->prepare("UPDATE notifications SET is_read=1 WHERE user_id=?")->execute([$user_id]);
|
||||
header('Location: ?action=' . ($_POST['redirect_to'] ?? 'dashboard'));
|
||||
exit;
|
||||
}
|
||||
|
||||
// Change password
|
||||
if (isset($_POST['change_password'])) {
|
||||
$cur = trim($_POST['current_password'] ?? '');
|
||||
$new = trim($_POST['new_password'] ?? '');
|
||||
$cnf = trim($_POST['confirm_password'] ?? '');
|
||||
$user = get_user($user_id);
|
||||
$pw_error = '';
|
||||
if (!password_verify($cur, $user['password_hash'])) {
|
||||
$pw_error = 'Current password is incorrect.';
|
||||
} elseif (strlen($new) < 6) {
|
||||
$pw_error = 'New password must be at least 6 characters.';
|
||||
} elseif ($new !== $cnf) {
|
||||
$pw_error = 'Passwords do not match.';
|
||||
} else {
|
||||
$pdo->prepare("UPDATE users SET password_hash=? WHERE id=?")
|
||||
->execute([password_hash($new, PASSWORD_DEFAULT), $user_id]);
|
||||
}
|
||||
$_SESSION['pw_change_msg'] = $pw_error ?: 'success';
|
||||
header('Location: ?action=' . ($_POST['redirect_to'] ?? 'dashboard'));
|
||||
exit;
|
||||
}
|
||||
}
|
||||
|
||||
$view_file = 'views/' . basename($action) . '.php';
|
||||
if (file_exists($view_file)) {
|
||||
// AJAX-only POST requests must not have the HTML layout wrapped around them,
|
||||
// otherwise the JSON response gets embedded inside the HTML document and
|
||||
// JSON.parse() fails on the client side.
|
||||
$is_ajax_post = isset($_POST['ajax_submit'])
|
||||
|| isset($_POST['delete_attachment_ajax'])
|
||||
|| isset($_POST['upload_attachment_ajax']);
|
||||
|
||||
if ($is_ajax_post) {
|
||||
include $view_file; // view handles its own output + exit
|
||||
include $view_file;
|
||||
} else {
|
||||
include 'views/layout_top.php';
|
||||
include $view_file;
|
||||
|
||||
@@ -30,29 +30,83 @@ a { text-decoration: none; color: var(--primary); }
|
||||
a:hover { text-decoration: underline; }
|
||||
|
||||
.app-container { display: flex; min-height: 100vh; }
|
||||
.sidebar { width: 250px; background: var(--surface); border-right: 1px solid var(--border); padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
|
||||
.sidebar h2 { font-size: 1.2rem; margin-bottom: 2rem; color: var(--primary); }
|
||||
.nav-link { padding: 0.75rem 1rem; border-radius: 0.5rem; text-decoration: none !important; color: var(--text); font-weight: 500; transition: background 0.2s; display: flex; justify-content: space-between; align-items: center; }
|
||||
.nav-link:hover, .nav-link.active { background: rgba(var(--primary-rgb), 0.1); color: var(--primary); }
|
||||
.nav-link .badge { background: #EF4444; color: white; padding: 2px 6px; border-radius: 12px; font-size: 0.75rem; }
|
||||
|
||||
.main-content { flex: 1; padding: 2rem; overflow-y: auto; }
|
||||
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
|
||||
/* ── Sidebar ─────────────────────────────────────────────────────────────── */
|
||||
.sidebar {
|
||||
width: 240px; background: var(--surface); border-right: 1px solid var(--border);
|
||||
padding: 1.25rem 1rem; display: flex; flex-direction: column; gap: 0.75rem;
|
||||
position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden;
|
||||
transition: width 0.25s cubic-bezier(.4,0,.2,1); flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
.sidebar-brand {
|
||||
display: flex; align-items: center; gap: 8px; font-size: 1.1rem;
|
||||
font-weight: 700; color: var(--primary); margin-bottom: 0.75rem;
|
||||
white-space: nowrap; overflow: hidden;
|
||||
}
|
||||
|
||||
/* Toggle button pinned to right edge */
|
||||
.sidebar-toggle-btn {
|
||||
position: absolute; top: 1.5rem; right: -14px;
|
||||
width: 28px; height: 28px; border-radius: 50%;
|
||||
border: 1px solid var(--border); background: var(--surface);
|
||||
color: var(--text-light); font-size: 0.65rem;
|
||||
cursor: pointer; display: flex; align-items: center; justify-content: center;
|
||||
z-index: 20; transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||
box-shadow: 0 2px 6px rgba(0,0,0,0.12);
|
||||
}
|
||||
.sidebar-toggle-btn:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
|
||||
|
||||
/* Nav link: icon always visible, label collapses */
|
||||
.nav-link {
|
||||
padding: 0.6rem 0.75rem; border-radius: 0.5rem;
|
||||
text-decoration: none !important; color: var(--text); font-weight: 500;
|
||||
transition: background 0.2s; display: flex; align-items: center;
|
||||
gap: 0.65rem; font-size: 0.875rem; white-space: nowrap; overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
.nav-link:hover, .nav-link.active { background: rgba(var(--primary-rgb), 0.1); color: var(--primary); }
|
||||
.nav-icon { width: 18px; text-align: center; flex-shrink: 0; font-size: 0.95rem; }
|
||||
.sidebar-label { overflow: hidden; transition: opacity 0.2s; opacity: 1; flex: 1; }
|
||||
.nav-link .badge { background: #EF4444; color: white; padding: 2px 6px; border-radius: 12px; font-size: 0.72rem; margin-left: auto; }
|
||||
|
||||
/* ── Collapsed State ────────────────────────────────────────────────────── */
|
||||
body.sidebar-collapsed .sidebar { width: 64px; }
|
||||
body.sidebar-collapsed .sidebar-label { opacity: 0; width: 0; pointer-events: none; }
|
||||
body.sidebar-collapsed .nav-link { justify-content: center; padding: 0.65rem; gap: 0; }
|
||||
body.sidebar-collapsed .nav-link .badge { position: absolute; top: 2px; right: 2px; padding: 1px 4px; font-size: 0.6rem; }
|
||||
body.sidebar-collapsed .sidebar-toggle-btn .fa-chevron-left { display: block; }
|
||||
|
||||
/* Tooltip on collapsed nav links */
|
||||
body.sidebar-collapsed .nav-link { position: relative; }
|
||||
body.sidebar-collapsed .nav-link::after {
|
||||
content: attr(title); position: absolute; left: calc(100% + 12px); top: 50%;
|
||||
transform: translateY(-50%); background: var(--text); color: var(--surface);
|
||||
padding: 4px 10px; border-radius: 6px; font-size: 0.78rem; white-space: nowrap;
|
||||
opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 100;
|
||||
}
|
||||
body.sidebar-collapsed .nav-link:hover::after { opacity: 1; }
|
||||
|
||||
.main-content { flex: 1; padding: 1.5rem 2rem; overflow-y: auto; max-height: 100vh; }
|
||||
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
|
||||
.card { background: var(--surface); padding: 1.5rem; border-radius: 1rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); margin-bottom: 1.5rem; }
|
||||
|
||||
.btn { display: inline-flex; align-items: center; gap: 0.5rem; justify-content:center; padding: 0.5rem 1rem; background: var(--primary); color: white !important; border-radius: 0.5rem; border: none; cursor: pointer; text-decoration: none !important; font-weight: 500; transition: opacity 0.2s; }
|
||||
.btn:hover { opacity: 0.9; }
|
||||
.btn-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; }
|
||||
.btn { display: inline-flex; align-items: center; gap: 0.5rem; justify-content:center; padding: 0.5rem 1rem; background: var(--primary); color: white !important; border-radius: 0.5rem; border: none; cursor: pointer; text-decoration: none !important; font-weight: 500; transition: opacity 0.2s; font-size: 0.875rem; }
|
||||
.btn:hover { opacity: 0.9; text-decoration: none !important; }
|
||||
.btn-sm { padding: 0.25rem 0.5rem; font-size: 0.8rem; }
|
||||
.btn-secondary { background: var(--text-light); }
|
||||
.btn-danger { background: #EF4444; }
|
||||
|
||||
.form-group { margin-bottom: 1rem; }
|
||||
.form-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; }
|
||||
.form-control { width: 100%; padding: 0.75rem; border: 1px solid var(--border); border-radius: 0.5rem; font-family: inherit; background: var(--input-bg); color: var(--text); }
|
||||
.form-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; font-size: 0.875rem; }
|
||||
.form-control { width: 100%; padding: 0.65rem 0.75rem; border: 1px solid var(--border); border-radius: 0.5rem; font-family: inherit; background: var(--input-bg); color: var(--text); font-size: 0.9rem; }
|
||||
.form-control:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb),0.12); }
|
||||
|
||||
table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
|
||||
th, td { padding: 0.75rem; text-align: left; border-bottom: 1px solid var(--border); }
|
||||
th { color: var(--text-light); font-weight: 500; }
|
||||
table { width: 100%; border-collapse: collapse; margin-top: 1rem; font-size: 0.875rem; }
|
||||
th, td { padding: 0.65rem 0.75rem; text-align: left; border-bottom: 1px solid var(--border); }
|
||||
th { color: var(--text-light); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; background: rgba(0,0,0,0.02); }
|
||||
body.dark-mode th { background: rgba(255,255,255,0.02); }
|
||||
tr:hover td { background: rgba(var(--primary-rgb),0.03); }
|
||||
|
||||
.kanban-board { display: flex; gap: 1.5rem; overflow-x: auto; padding-bottom: 1rem; }
|
||||
.kanban-col { background: rgba(0,0,0,0.03); border-radius: 1rem; width: 320px; min-width: 320px; display: flex; flex-direction: column; }
|
||||
@@ -62,22 +116,214 @@ body.dark-mode .kanban-col { background: rgba(255,255,255,0.03); }
|
||||
.kanban-task { background: var(--surface); padding: 1rem; border-radius: 0.5rem; box-shadow: 0 2px 4px rgba(0,0,0,0.05); border: 1px solid var(--border); cursor: grab; }
|
||||
.kanban-task:active { cursor: grabbing; }
|
||||
|
||||
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.2s; }
|
||||
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.55); display: flex; align-items: center; justify-content: center; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity 0.2s; backdrop-filter: blur(3px); }
|
||||
.modal-overlay.active { opacity: 1; pointer-events: auto; }
|
||||
.modal-content { background: var(--surface); padding: 2rem; border-radius: 1rem; width: 100%; max-width: 400px; transform: translateY(-20px); transition: transform 0.2s; }
|
||||
.modal-content { background: var(--surface); padding: 2rem; border-radius: 1rem; width: 100%; max-width: 500px; transform: translateY(-20px); transition: transform 0.2s; box-shadow: 0 25px 50px rgba(0,0,0,0.3); }
|
||||
.modal-overlay.active .modal-content { transform: translateY(0); }
|
||||
|
||||
#toast { position: fixed; bottom: 20px; right: 20px; background: var(--text); color: var(--surface); padding: 1rem; border-radius: 0.5rem; z-index: 9999; transform: translateY(100px); opacity: 0; transition: all 0.3s; }
|
||||
#toast { position: fixed; bottom: 20px; right: 20px; background: var(--text); color: var(--surface); padding: 1rem 1.25rem; border-radius: 0.5rem; z-index: 9999; transform: translateY(100px); opacity: 0; transition: all 0.3s; font-size: 0.875rem; }
|
||||
#toast.show { transform: translateY(0); opacity: 1; }
|
||||
|
||||
.dropzone { border: 2px dashed var(--border); padding: 3rem; text-align: center; border-radius: 1rem; cursor: pointer; transition: background 0.2s; }
|
||||
.dropzone { border: 2px dashed var(--border); padding: 2rem; text-align: center; border-radius: 1rem; cursor: pointer; transition: background 0.2s; color: var(--text-light); }
|
||||
.dropzone.dragover { background: rgba(var(--primary-rgb), 0.1); border-color: var(--primary); }
|
||||
|
||||
.project-item { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem; border-bottom: 1px solid var(--border); }
|
||||
.project-item:hover { background: rgba(0,0,0,0.02); }
|
||||
body.dark-mode .project-item:hover { background: rgba(255,255,255,0.02); }
|
||||
.project-item { display: flex; justify-content: space-between; align-items: center; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); transition: background 0.15s; }
|
||||
.project-item:hover { background: rgba(var(--primary-rgb),0.04); }
|
||||
body.dark-mode .project-item:hover { background: rgba(255,255,255,0.03); }
|
||||
|
||||
.login-container { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #4F46E5 0%, #10B981 100%); }
|
||||
.login-card { background: var(--surface); padding: 2.5rem; border-radius: 1rem; width: 100%; max-width: 400px; box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); }
|
||||
.login-card h1 { text-align: center; margin-bottom: 1.5rem; color: var(--text); }
|
||||
.alert { padding: 1rem; border-radius: 0.5rem; margin-bottom: 1rem; background: #FEF2F2; color: #991B1B; }
|
||||
.alert { padding: 1rem; border-radius: 0.5rem; margin-bottom: 1rem; background: #FEF2F2; color: #991B1B; font-size: 0.875rem; }
|
||||
|
||||
/* ── User Avatar Dropdown ─────────────────────────────────────────────────── */
|
||||
.user-dropdown-wrap { position: relative; }
|
||||
.user-avatar-btn {
|
||||
width: 40px; height: 40px; border-radius: 50%;
|
||||
background: var(--primary); color: #fff;
|
||||
border: 2px solid transparent;
|
||||
cursor: pointer; display: flex; align-items: center; justify-content: center;
|
||||
font-size: 1rem; font-weight: 700; overflow: hidden;
|
||||
transition: box-shadow 0.2s, border-color 0.2s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.user-avatar-btn:hover { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb),0.2); }
|
||||
/* Notification count badge overlaid on avatar */
|
||||
.avatar-notif-badge {
|
||||
position: absolute; top: -3px; right: -3px;
|
||||
background: #EF4444; color: #fff; font-size: 0.6rem; font-weight: 700;
|
||||
min-width: 17px; height: 17px; border-radius: 10px; border: 2px solid var(--bg);
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
cursor: pointer; z-index: 10; padding: 0 3px; line-height: 1;
|
||||
animation: badge-pop 0.3s cubic-bezier(.17,.67,.83,.67);
|
||||
}
|
||||
@keyframes badge-pop { 0%{transform:scale(0)}70%{transform:scale(1.2)}100%{transform:scale(1)} }
|
||||
.user-dropdown-menu {
|
||||
display: none; position: absolute; top: calc(100% + 8px); right: 0;
|
||||
background: var(--surface); border: 1px solid var(--border); border-radius: 0.75rem;
|
||||
box-shadow: 0 10px 25px rgba(0,0,0,0.15); min-width: 200px; z-index: 500;
|
||||
overflow: hidden; animation: dropdown-in 0.15s ease;
|
||||
}
|
||||
.user-dropdown-menu.open { display: block; }
|
||||
@keyframes dropdown-in { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
|
||||
.user-dropdown-header { padding: 0.9rem 1rem; background: rgba(var(--primary-rgb),0.06); }
|
||||
.user-dropdown-name { font-weight: 700; font-size: 0.9rem; color: var(--text); }
|
||||
.user-dropdown-role { font-size: 0.75rem; color: var(--text-light); margin-top: 2px; }
|
||||
.user-dropdown-divider { height: 1px; background: var(--border); margin: 0; }
|
||||
.user-dropdown-item {
|
||||
display: flex; align-items: center; gap: 0.65rem;
|
||||
padding: 0.65rem 1rem; width: 100%; border: none;
|
||||
background: none; color: var(--text); font-size: 0.875rem;
|
||||
cursor: pointer; text-decoration: none !important; font-family: inherit;
|
||||
transition: background 0.15s;
|
||||
}
|
||||
.user-dropdown-item:hover { background: rgba(var(--primary-rgb),0.07); color: var(--primary); }
|
||||
.user-dropdown-item i { width: 16px; text-align: center; color: var(--text-light); }
|
||||
.user-dropdown-item:hover i { color: var(--primary); }
|
||||
.user-dropdown-logout { color: #EF4444 !important; }
|
||||
.user-dropdown-logout:hover { background: rgba(239,68,68,0.07) !important; }
|
||||
.user-dropdown-logout i { color: #EF4444 !important; }
|
||||
|
||||
/* ── Activity log scrollbar fix ────────────────────────────────────────── */
|
||||
.log-list {
|
||||
display: flex; flex-direction: column; gap: 0.5rem;
|
||||
overflow-y: auto; flex: 1; max-height: 360px;
|
||||
padding-right: 8px; /* prevent scrollbar from eating time */
|
||||
scrollbar-gutter: stable; /* modern browsers reserve scrollbar space */
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--border) transparent;
|
||||
}
|
||||
.log-list::-webkit-scrollbar { width: 4px; }
|
||||
.log-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
|
||||
.log-list::-webkit-scrollbar-track { background: transparent; }
|
||||
|
||||
/* ── Notes / Google Keep Style ───────────────────────────────────────────── */
|
||||
.notes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
|
||||
.note-card {
|
||||
background: var(--surface); border: 1px solid var(--border);
|
||||
border-radius: 0.75rem; padding: 1rem; cursor: pointer;
|
||||
transition: box-shadow 0.2s, transform 0.15s; position: relative;
|
||||
display: flex; flex-direction: column; gap: 0.5rem; min-height: 120px;
|
||||
}
|
||||
.note-card:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.12); transform: translateY(-2px); }
|
||||
.note-card-title { font-weight: 600; font-size: 0.95rem; color: var(--text); word-break: break-word; }
|
||||
.note-card-preview { font-size: 0.8rem; color: var(--text-light); overflow: hidden; max-height: 80px; line-height: 1.5; word-break: break-word; }
|
||||
.note-card-img { width: 100%; height: 120px; object-fit: cover; border-radius: 0.5rem; margin-bottom: 0.25rem; }
|
||||
.note-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 0.5rem; border-top: 1px solid var(--border); gap: 0.5rem; }
|
||||
.note-card-actions { display: none; gap: 0.25rem; }
|
||||
.note-card:hover .note-card-actions { display: flex; }
|
||||
.note-color-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
|
||||
.note-card-shared-badge { background: #10B981; color: #fff; font-size: 0.65rem; padding: 2px 6px; border-radius: 10px; font-weight: 600; letter-spacing: 0.03em; }
|
||||
|
||||
/* Note editor toolbar */
|
||||
.note-editor-toolbar { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.5rem; padding: 0.35rem; background: var(--bg); border-radius: 0.5rem; border: 1px solid var(--border); }
|
||||
.note-toolbar-btn { background: none; border: none; cursor: pointer; padding: 4px 7px; border-radius: 4px; color: var(--text-light); font-size: 0.85rem; transition: background 0.15s, color 0.15s; }
|
||||
.note-toolbar-btn:hover { background: rgba(var(--primary-rgb),0.1); color: var(--primary); }
|
||||
.note-content-area { min-height: 160px; border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.75rem; outline: none; font-size: 0.9rem; line-height: 1.6; background: var(--input-bg); color: var(--text); resize: vertical; }
|
||||
.note-content-area:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb),0.1); }
|
||||
|
||||
/* Note color palette */
|
||||
.note-color-palette { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-top: 0.5rem; }
|
||||
.color-swatch { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; transition: transform 0.15s, border-color 0.15s; }
|
||||
.color-swatch:hover, .color-swatch.selected { transform: scale(1.2); border-color: var(--text); }
|
||||
|
||||
/* ── Passwords Vault / Bitwarden Style ───────────────────────────────────── */
|
||||
.vault-layout { display: grid; grid-template-columns: 220px 1fr; gap: 0; min-height: 500px; }
|
||||
.vault-sidebar {
|
||||
background: rgba(var(--primary-rgb),0.05); border-right: 1px solid var(--border);
|
||||
border-radius: 1rem 0 0 1rem; padding: 1rem; display: flex; flex-direction: column; gap: 0.25rem;
|
||||
}
|
||||
.vault-folder-item {
|
||||
display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.65rem;
|
||||
border-radius: 0.5rem; cursor: pointer; font-size: 0.875rem; color: var(--text);
|
||||
border: none; background: none; width: 100%; text-align: left; transition: background 0.15s;
|
||||
font-family: inherit;
|
||||
}
|
||||
.vault-folder-item:hover, .vault-folder-item.active { background: rgba(var(--primary-rgb),0.12); color: var(--primary); font-weight: 600; }
|
||||
.vault-folder-item i { width: 16px; color: var(--text-light); }
|
||||
.vault-folder-item.active i { color: var(--primary); }
|
||||
.vault-main { padding: 1.5rem; }
|
||||
.vault-search { display: flex; align-items:center; gap: 0.5rem; margin-bottom: 1rem; }
|
||||
.vault-entry { display: flex; align-items: center; gap: 1rem; padding: 0.75rem; border-radius: 0.5rem; border: 1px solid transparent; transition: background 0.15s, border-color 0.15s; cursor: pointer; }
|
||||
.vault-entry:hover { background: rgba(var(--primary-rgb),0.04); border-color: var(--border); }
|
||||
.vault-entry-icon { width: 36px; height: 36px; border-radius: 8px; background: rgba(var(--primary-rgb),0.12); color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; flex-shrink: 0; overflow: hidden; }
|
||||
.vault-entry-icon img { width: 100%; height: 100%; object-fit: contain; }
|
||||
.vault-entry-info { flex: 1; min-width: 0; }
|
||||
.vault-entry-title { font-weight: 600; font-size: 0.9rem; color: var(--text); }
|
||||
.vault-entry-user { font-size: 0.78rem; color: var(--text-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
.vault-entry-actions { display: flex; gap: 0.25rem; opacity: 0; transition: opacity 0.15s; }
|
||||
.vault-entry:hover .vault-entry-actions { opacity: 1; }
|
||||
|
||||
/* ── Projects / Windows Explorer Detail View ─────────────────────────────── */
|
||||
.explorer-toolbar { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; padding: 0.5rem; background: var(--surface); border: 1px solid var(--border); border-radius: 0.5rem; flex-wrap: wrap; }
|
||||
.explorer-path { display: flex; align-items: center; gap: 0.25rem; flex: 1; min-width: 0; font-size: 0.875rem; }
|
||||
.explorer-path-part { color: var(--text-light); }
|
||||
.explorer-path-part.current { color: var(--text); font-weight: 600; }
|
||||
.explorer-path-sep { color: var(--text-light); font-size: 0.75rem; margin: 0 2px; }
|
||||
|
||||
.explorer-table { width: 100%; border-collapse: collapse; }
|
||||
.explorer-table thead tr { background: rgba(var(--primary-rgb),0.05); }
|
||||
.explorer-table th { padding: 0.55rem 0.75rem; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-light); font-weight: 600; cursor: pointer; user-select: none; border-bottom: 2px solid var(--border); white-space: nowrap; }
|
||||
.explorer-table th:hover { color: var(--primary); }
|
||||
.explorer-table td { padding: 0.55rem 0.75rem; border-bottom: 1px solid var(--border); font-size: 0.875rem; vertical-align: middle; }
|
||||
.explorer-row { transition: background 0.12s; }
|
||||
.explorer-row:hover { background: rgba(var(--primary-rgb),0.04); }
|
||||
.explorer-row.selected { background: rgba(var(--primary-rgb),0.1); }
|
||||
.explorer-icon { font-size: 1rem; width: 22px; display: inline-block; text-align: center; }
|
||||
.explorer-name { display: flex; align-items: center; gap: 0.5rem; }
|
||||
.explorer-name a { font-weight: 500; color: var(--text); }
|
||||
.explorer-name a:hover { color: var(--primary); text-decoration: none; }
|
||||
.explorer-actions { display: flex; gap: 0.25rem; opacity: 0; transition: opacity 0.15s; }
|
||||
.explorer-row:hover .explorer-actions { opacity: 1; }
|
||||
.explorer-status-bar { display: flex; gap: 1rem; align-items: center; padding: 0.4rem 0.75rem; background: var(--bg); border: 1px solid var(--border); border-radius: 0.5rem; font-size: 0.78rem; color: var(--text-light); margin-top: 0.5rem; }
|
||||
|
||||
/* ── Admin Panel ─────────────────────────────────────────────────────────── */
|
||||
.admin-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 1.5rem; overflow-x: auto; }
|
||||
.admin-tab { padding: 0.65rem 1.25rem; border: none; background: none; cursor: pointer; font-size: 0.875rem; font-weight: 600; color: var(--text-light); font-family: inherit; transition: color 0.15s; border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; }
|
||||
.admin-tab.active { color: var(--primary); border-bottom-color: var(--primary); }
|
||||
.admin-tab-pane { display: none; }
|
||||
.admin-tab-pane.active { display: block; }
|
||||
.admin-user-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
|
||||
.admin-user-card { background: var(--bg); border: 1px solid var(--border); border-radius: 0.75rem; padding: 1rem; }
|
||||
.admin-user-card-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
|
||||
.admin-user-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; overflow: hidden; flex-shrink: 0; }
|
||||
.admin-badge-admin { background: rgba(79,70,229,0.1); color: var(--primary); font-size: 0.7rem; padding: 2px 8px; border-radius: 20px; font-weight: 700; letter-spacing: 0.04em; }
|
||||
.admin-badge-user { background: rgba(107,114,128,0.1); color: var(--text-light); font-size: 0.7rem; padding: 2px 8px; border-radius: 20px; font-weight: 600; }
|
||||
|
||||
/* ── Misc utils ──────────────────────────────────────────────────────────── */
|
||||
.flex-between { display: flex; justify-content: space-between; align-items: center; }
|
||||
.badge { background: #EF4444; color: white; padding: 2px 6px; border-radius: 12px; font-size: 0.75rem; }
|
||||
|
||||
/* ── Dashboard stat card (also used in admin) ────────────────────────────── */
|
||||
.db-stat-card {
|
||||
background: var(--surface); border-radius: 1rem; padding: 1.25rem 1.5rem;
|
||||
box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07); border: 1px solid var(--border);
|
||||
display: flex; flex-direction: column; gap: 0.5rem;
|
||||
transition: transform 0.15s, box-shadow 0.15s;
|
||||
text-decoration: none !important; color: var(--text) !important;
|
||||
}
|
||||
.db-stat-card:hover { transform: translateY(-3px); box-shadow: 0 8px 15px -3px rgba(0,0,0,0.1); }
|
||||
|
||||
/* ── Activity Log (shared) ───────────────────────────────────────────────── */
|
||||
.log-item { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.8rem; padding: 0.35rem 0; }
|
||||
.log-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 700; flex-shrink: 0; }
|
||||
.log-body { flex: 1; min-width: 0; }
|
||||
.log-body strong { color: var(--text); }
|
||||
.log-body .log-detail { color: var(--text-light); }
|
||||
.log-time { font-size: 0.7rem; color: var(--text-light); white-space: nowrap; flex-shrink: 0; }
|
||||
|
||||
/* ── Markdown body styles ────────────────────────────────────────────────── */
|
||||
.markdown-body h1,.markdown-body h2,.markdown-body h3 { margin: 0.75rem 0 0.4rem; font-weight: 700; color: var(--text); }
|
||||
.markdown-body h1 { font-size: 1.3rem; }
|
||||
.markdown-body h2 { font-size: 1.1rem; }
|
||||
.markdown-body h3 { font-size: 1rem; }
|
||||
.markdown-body p { margin: 0.4rem 0; line-height: 1.6; }
|
||||
.markdown-body ul,.markdown-body ol { padding-left: 1.5rem; margin: 0.4rem 0; }
|
||||
.markdown-body li { margin: 0.2rem 0; }
|
||||
.markdown-body code { background: rgba(var(--primary-rgb),0.1); padding: 2px 5px; border-radius: 4px; font-size: 0.85em; font-family: monospace; }
|
||||
.markdown-body pre { background: rgba(0,0,0,0.07); padding: 0.75rem; border-radius: 6px; overflow-x: auto; }
|
||||
.markdown-body pre code { background: none; padding: 0; }
|
||||
body.dark-mode .markdown-body pre { background: rgba(255,255,255,0.05); }
|
||||
.markdown-body blockquote { border-left: 3px solid var(--primary); padding-left: 0.75rem; color: var(--text-light); margin: 0.5rem 0; }
|
||||
.markdown-body hr { border: none; border-top: 1px solid var(--border); margin: 0.75rem 0; }
|
||||
.markdown-body a { color: var(--primary); }
|
||||
|
||||
513
views/admin.php
513
views/admin.php
@@ -1,132 +1,412 @@
|
||||
<?php
|
||||
if(empty($_SESSION['is_admin'])) die("Access Denied");
|
||||
|
||||
if($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||
if(isset($_POST['create_user'])) {
|
||||
$username = $_POST['username'];
|
||||
$pass = password_hash($_POST['password'], PASSWORD_DEFAULT);
|
||||
$is_admin = isset($_POST['is_admin']) ? 1 : 0;
|
||||
$stmt = $pdo->prepare("INSERT INTO users (username, password_hash, is_admin) VALUES (?, ?, ?)");
|
||||
$stmt->execute([$username, $pass, $is_admin]);
|
||||
}
|
||||
if(isset($_POST['create_group'])) {
|
||||
$stmt = $pdo->prepare("INSERT INTO groups (name) VALUES (?)");
|
||||
$stmt->execute([$_POST['group_name']]);
|
||||
}
|
||||
if(isset($_POST['assign_group'])) {
|
||||
$stmt = $pdo->prepare("INSERT OR IGNORE INTO user_groups (user_id, group_id) VALUES (?, ?)");
|
||||
$stmt->execute([$_POST['user_id'], $_POST['group_id']]);
|
||||
}
|
||||
if(isset($_POST['update_user_channels'])) {
|
||||
$ch = $_POST['channels'] ?? [];
|
||||
$ch_str = is_array($ch) ? implode(',', $ch) : '';
|
||||
$stmt = $pdo->prepare("UPDATE users SET notify_channels=?, telegram_id=?, email=?, whatsapp_number=? WHERE id=?");
|
||||
$stmt->execute([$ch_str, $_POST['telegram_id'], $_POST['email'], $_POST['whatsapp_number'], $_POST['user_id']]);
|
||||
echo "<div class='alert' style='background:#10B981; color:white;'>User preferences updated!</div>";
|
||||
}
|
||||
if(isset($_POST['update_sys_config'])) {
|
||||
$stmt = $pdo->prepare("UPDATE system_config SET v=? WHERE k=?");
|
||||
$stmt->execute([$_POST['completed_days'], 'completed_days']);
|
||||
$stmt->execute([$_POST['archived_days'], 'archived_days']);
|
||||
echo "<div class='alert' style='background:#10B981; color:white;'>System Kanban Configuration updated!</div>";
|
||||
}
|
||||
}
|
||||
$users = query("SELECT id, username, is_admin, notify_channels, telegram_id, email, whatsapp_number FROM users")->fetchAll();
|
||||
$all_groups = query("SELECT * FROM groups")->fetchAll();
|
||||
|
||||
// ── DB Migrations ─────────────────────────────────────────────────────────────
|
||||
try { $pdo->exec("ALTER TABLE users ADD COLUMN profile_pic TEXT DEFAULT NULL"); } catch(Exception $e) {}
|
||||
try {
|
||||
$pdo->exec("CREATE TABLE IF NOT EXISTS system_config (k TEXT PRIMARY KEY, v TEXT)");
|
||||
$pdo->exec("INSERT OR IGNORE INTO system_config (k, v) VALUES ('completed_days', '7')");
|
||||
$pdo->exec("INSERT OR IGNORE INTO system_config (k, v) VALUES ('archived_days', '90')");
|
||||
} catch(Exception $e) {}
|
||||
|
||||
// ── Handle POST ───────────────────────────────────────────────────────────────
|
||||
$success_msg = '';
|
||||
$error_msg = '';
|
||||
|
||||
if($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||
if(isset($_POST['create_user'])) {
|
||||
$username = trim($_POST['username']);
|
||||
$pass = password_hash($_POST['password'], PASSWORD_DEFAULT);
|
||||
$is_admin = isset($_POST['is_admin']) ? 1 : 0;
|
||||
try {
|
||||
$stmt = $pdo->prepare("INSERT INTO users (username, password_hash, is_admin) VALUES (?, ?, ?)");
|
||||
$stmt->execute([$username, $pass, $is_admin]);
|
||||
$success_msg = "User '{$username}' created successfully!";
|
||||
} catch(Exception $e) {
|
||||
$error_msg = "Error: Username may already exist.";
|
||||
}
|
||||
}
|
||||
|
||||
if(isset($_POST['delete_user'])) {
|
||||
$del_id = (int)$_POST['del_user_id'];
|
||||
if($del_id != $user_id) {
|
||||
$pdo->prepare("DELETE FROM users WHERE id=?")->execute([$del_id]);
|
||||
$success_msg = "User deleted.";
|
||||
} else {
|
||||
$error_msg = "You cannot delete your own account.";
|
||||
}
|
||||
}
|
||||
|
||||
if(isset($_POST['toggle_admin'])) {
|
||||
$tid = (int)$_POST['toggle_user_id'];
|
||||
$newVal = (int)$_POST['new_admin_val'];
|
||||
if($tid != $user_id) {
|
||||
$pdo->prepare("UPDATE users SET is_admin=? WHERE id=?")->execute([$newVal, $tid]);
|
||||
$success_msg = "User admin status updated.";
|
||||
}
|
||||
}
|
||||
|
||||
if(isset($_POST['create_group'])) {
|
||||
try {
|
||||
$stmt = $pdo->prepare("INSERT INTO groups (name) VALUES (?)");
|
||||
$stmt->execute([$_POST['group_name']]);
|
||||
$success_msg = "Group '{$_POST['group_name']}' created!";
|
||||
} catch(Exception $e) {
|
||||
$error_msg = "Group name may already exist.";
|
||||
}
|
||||
}
|
||||
|
||||
if(isset($_POST['delete_group'])) {
|
||||
$gid = (int)$_POST['del_group_id'];
|
||||
$pdo->prepare("DELETE FROM groups WHERE id=?")->execute([$gid]);
|
||||
$success_msg = "Group deleted.";
|
||||
}
|
||||
|
||||
if(isset($_POST['assign_group'])) {
|
||||
$stmt = $pdo->prepare("INSERT OR IGNORE INTO user_groups (user_id, group_id) VALUES (?, ?)");
|
||||
$stmt->execute([$_POST['user_id'], $_POST['group_id']]);
|
||||
$success_msg = "User assigned to group.";
|
||||
}
|
||||
|
||||
if(isset($_POST['remove_from_group'])) {
|
||||
$pdo->prepare("DELETE FROM user_groups WHERE user_id=? AND group_id=?")->execute([$_POST['user_id'], $_POST['group_id']]);
|
||||
$success_msg = "User removed from group.";
|
||||
}
|
||||
|
||||
if(isset($_POST['update_user_channels'])) {
|
||||
$ch = $_POST['channels'] ?? [];
|
||||
$ch_str = is_array($ch) ? implode(',', $ch) : '';
|
||||
$stmt = $pdo->prepare("UPDATE users SET notify_channels=?, telegram_id=?, email=?, whatsapp_number=? WHERE id=?");
|
||||
$stmt->execute([$ch_str, $_POST['telegram_id'], $_POST['email'], $_POST['whatsapp_number'], $_POST['user_id']]);
|
||||
$success_msg = "User notification preferences updated!";
|
||||
}
|
||||
|
||||
if(isset($_POST['update_sys_config'])) {
|
||||
$stmt = $pdo->prepare("UPDATE system_config SET v=? WHERE k=?");
|
||||
$stmt->execute([$_POST['completed_days'], 'completed_days']);
|
||||
$stmt->execute([$_POST['archived_days'], 'archived_days']);
|
||||
$success_msg = "System configuration saved!";
|
||||
}
|
||||
}
|
||||
|
||||
// ── Fetch Data ────────────────────────────────────────────────────────────────
|
||||
$users = query("SELECT id, username, is_admin, notify_channels, telegram_id, email, whatsapp_number, profile_pic FROM users ORDER BY is_admin DESC, username ASC")->fetchAll();
|
||||
$all_groups = query("SELECT * FROM groups ORDER BY name")->fetchAll();
|
||||
$conf_comp = query("SELECT v FROM system_config WHERE k='completed_days'")->fetchColumn() ?: 7;
|
||||
$conf_arch = query("SELECT v FROM system_config WHERE k='archived_days'")->fetchColumn() ?: 90;
|
||||
|
||||
// Activity stats for admin
|
||||
$total_users = count($users);
|
||||
$total_groups = count($all_groups);
|
||||
$total_tasks = query("SELECT COUNT(*) FROM tasks")->fetchColumn();
|
||||
$total_notes = 0; try { $total_notes = query("SELECT COUNT(*) FROM notes")->fetchColumn(); } catch(Exception $e) {}
|
||||
$total_passwords = query("SELECT COUNT(*) FROM passwords")->fetchColumn();
|
||||
$total_projects = query("SELECT COUNT(*) FROM projects")->fetchColumn();
|
||||
|
||||
// Activity log (recent, all users)
|
||||
$recent_activity = [];
|
||||
try {
|
||||
$recent_activity = $pdo->query("SELECT al.*, u.username FROM activity_log al LEFT JOIN users u ON al.user_id=u.id ORDER BY al.created_at DESC LIMIT 20")->fetchAll();
|
||||
} catch(Exception $e) {}
|
||||
|
||||
$active_tab = $_GET['tab'] ?? 'overview';
|
||||
?>
|
||||
<div class="header">
|
||||
<h1>Admin Panel</h1>
|
||||
|
||||
<div class="header" style="margin-bottom:1rem;">
|
||||
<h1 style="font-size:1.5rem; font-weight:700;"><i class="fa fa-shield-halved" style="color:var(--primary);"></i> Admin Panel</h1>
|
||||
<span style="font-size:0.8rem; background:rgba(var(--primary-rgb),0.1); color:var(--primary); padding:4px 12px; border-radius:20px; font-weight:700;">ADMIN</span>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; grid-template-columns: 1fr 1fr; gap:1.5rem; margin-bottom: 2rem;">
|
||||
<div class="card">
|
||||
<h3>Create User</h3>
|
||||
<form method="POST" style="margin-top:1rem;">
|
||||
<div class="form-group"><input type="text" name="username" class="form-control" placeholder="Username" required></div>
|
||||
<div class="form-group"><input type="password" name="password" class="form-control" placeholder="Password" required></div>
|
||||
<div class="form-group">
|
||||
<label><input type="checkbox" name="is_admin"> Admin Privileges</label>
|
||||
<?php if($success_msg): ?>
|
||||
<div class="alert" style="background:rgba(16,185,129,0.12); color:#10B981; border:1px solid rgba(16,185,129,0.3); margin-bottom:1rem;"><?= htmlspecialchars($success_msg) ?></div>
|
||||
<?php endif; ?>
|
||||
<?php if($error_msg): ?>
|
||||
<div class="alert" style="margin-bottom:1rem;"><?= htmlspecialchars($error_msg) ?></div>
|
||||
<?php endif; ?>
|
||||
|
||||
<!-- ── Tabs ──────────────────────────────────────────────────────────────── -->
|
||||
<div class="admin-tabs">
|
||||
<button class="admin-tab <?= $active_tab==='overview'?'active':'' ?>" onclick="switchTab('overview')"><i class="fa fa-chart-line"></i> Overview</button>
|
||||
<button class="admin-tab <?= $active_tab==='users'?'active':'' ?>" onclick="switchTab('users')"><i class="fa fa-users"></i> Users</button>
|
||||
<button class="admin-tab <?= $active_tab==='groups'?'active':'' ?>" onclick="switchTab('groups')"><i class="fa fa-people-group"></i> Groups</button>
|
||||
<button class="admin-tab <?= $active_tab==='channels'?'active':'' ?>" onclick="switchTab('channels')"><i class="fa fa-bell"></i> Notifications</button>
|
||||
<button class="admin-tab <?= $active_tab==='config'?'active':'' ?>" onclick="switchTab('config')"><i class="fa fa-gear"></i> System Config</button>
|
||||
</div>
|
||||
|
||||
<!-- ── Overview Tab ──────────────────────────────────────────────────────── -->
|
||||
<div class="admin-tab-pane <?= $active_tab==='overview'?'active':'' ?>" id="tab-overview">
|
||||
<!-- Stats Grid -->
|
||||
<div style="display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1rem; margin-bottom:1.5rem;">
|
||||
<?php
|
||||
$stats = [
|
||||
['👤','Users',$total_users,'var(--primary)'],
|
||||
['👥','Groups',$total_groups,'#10B981'],
|
||||
['✅','Tasks',$total_tasks,'#F59E0B'],
|
||||
['📝','Notes',$total_notes,'#8B5CF6'],
|
||||
['🔐','Passwords',$total_passwords,'#EF4444'],
|
||||
['📁','Projects',$total_projects,'#06B6D4'],
|
||||
];
|
||||
foreach($stats as [$icon,$label,$val,$col]):
|
||||
?>
|
||||
<div class="db-stat-card" style="border-top:3px solid <?= $col ?>; gap:0.35rem; padding:1rem;">
|
||||
<div style="font-size:0.75rem; color:var(--text-light); font-weight:600; text-transform:uppercase;"><?= $label ?></div>
|
||||
<div style="font-size:1.8rem; font-weight:700; color:<?= $col ?>;"><?= $icon ?> <?= $val ?></div>
|
||||
</div>
|
||||
<button type="submit" name="create_user" class="btn">Create User</button>
|
||||
</form>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
<!-- Recent Activity -->
|
||||
<div class="card">
|
||||
<h3>Create Group & Assign Role</h3>
|
||||
<form method="POST" style="margin-top:1rem; margin-bottom:2rem;">
|
||||
<div style="display:flex; gap:0.5rem;">
|
||||
<input type="text" name="group_name" class="form-control" placeholder="Group Name" required>
|
||||
<button type="submit" name="create_group" class="btn">Create Group</button>
|
||||
<h3 style="font-size:1rem; font-weight:700; margin-bottom:1rem;">🕓 Recent Platform Activity</h3>
|
||||
<?php if(empty($recent_activity)): ?>
|
||||
<p style="color:var(--text-light); font-size:0.85rem;">No activity recorded yet.</p>
|
||||
<?php else: ?>
|
||||
<div style="display:flex; flex-direction:column; gap:0.5rem; max-height:320px; overflow-y:auto;">
|
||||
<?php
|
||||
$aic = ['#4F46E5','#10B981','#F59E0B','#EF4444','#8B5CF6'];
|
||||
foreach($recent_activity as $log):
|
||||
$t = strtotime($log['created_at']);
|
||||
$diff = time()-$t;
|
||||
$ago = $diff<60?'just now':($diff<3600?floor($diff/60).'m ago':($diff<86400?floor($diff/3600).'h ago':floor($diff/86400).'d ago'));
|
||||
$col = $aic[crc32($log['username']??'')%count($aic)];
|
||||
$init = strtoupper(mb_substr($log['username']??'S',0,1));
|
||||
?>
|
||||
<div class="log-item">
|
||||
<div class="log-avatar" style="background:<?= $col ?>; flex-shrink:0;"><?= $init ?></div>
|
||||
<div class="log-body">
|
||||
<strong><?= htmlspecialchars($log['username']??'System') ?></strong>
|
||||
<span class="log-detail"> · <?= htmlspecialchars($log['action']) ?><?= $log['detail']?' — '.htmlspecialchars(mb_substr($log['detail'],0,40)):'' ?></span>
|
||||
</div>
|
||||
</form>
|
||||
<div class="log-time"><?= $ago ?></div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Users Tab ─────────────────────────────────────────────────────────── -->
|
||||
<div class="admin-tab-pane <?= $active_tab==='users'?'active':'' ?>" id="tab-users">
|
||||
<div style="display:grid; grid-template-columns:340px 1fr; gap:1.5rem; align-items:start;">
|
||||
<!-- Create User Form -->
|
||||
<div class="card">
|
||||
<h3 style="font-size:1rem; font-weight:700; margin-bottom:1rem;"><i class="fa fa-user-plus"></i> Create New User</h3>
|
||||
<form method="POST">
|
||||
<div style="display:flex; gap:0.5rem; align-items:center;">
|
||||
<select name="user_id" class="form-control" required style="width:130px;">
|
||||
<option value="">User...</option>
|
||||
<div class="form-group">
|
||||
<label>Username</label>
|
||||
<input type="text" name="username" class="form-control" placeholder="Enter username" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Password</label>
|
||||
<input type="password" name="password" class="form-control" placeholder="Set password" required>
|
||||
</div>
|
||||
<div class="form-group" style="display:flex; align-items:center; gap:0.5rem;">
|
||||
<input type="checkbox" name="is_admin" id="new-user-admin" style="width:auto;">
|
||||
<label for="new-user-admin" style="margin:0; font-weight:500;">Grant Admin Privileges</label>
|
||||
</div>
|
||||
<button type="submit" name="create_user" class="btn" style="width:100%;">
|
||||
<i class="fa fa-plus"></i> Create User
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- User Cards -->
|
||||
<div>
|
||||
<h3 style="font-size:1rem; font-weight:700; margin-bottom:1rem;"><i class="fa fa-users"></i> All Users (<?= $total_users ?>)</h3>
|
||||
<div class="admin-user-grid">
|
||||
<?php foreach($users as $u):
|
||||
$pic = $u['profile_pic'] ?? null;
|
||||
$groups_of_u = query("SELECT g.name FROM groups g JOIN user_groups ug ON g.id=ug.group_id WHERE ug.user_id=?", [$u['id']])->fetchAll();
|
||||
?>
|
||||
<div class="admin-user-card">
|
||||
<div class="admin-user-card-header">
|
||||
<div class="admin-user-avatar">
|
||||
<?php if($pic && file_exists($pic)): ?>
|
||||
<img src="<?= htmlspecialchars($pic) ?>" style="width:100%;height:100%;object-fit:cover;border-radius:50%;" alt="">
|
||||
<?php else: ?>
|
||||
<?= strtoupper(mb_substr($u['username'],0,1)) ?>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<div style="flex:1; min-width:0;">
|
||||
<div style="font-weight:700; font-size:0.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;"><?= htmlspecialchars($u['username']) ?></div>
|
||||
<div style="margin-top:2px;">
|
||||
<span class="<?= $u['is_admin'] ? 'admin-badge-admin' : 'admin-badge-user' ?>">
|
||||
<?= $u['is_admin'] ? 'Admin' : 'User' ?>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="font-size:0.75rem; color:var(--text-light); margin-bottom:0.75rem;">
|
||||
<?php if($groups_of_u): ?>
|
||||
<i class="fa fa-users" style="margin-right:4px;"></i>
|
||||
<?= implode(', ', array_map(fn($g)=>htmlspecialchars($g['name']), $groups_of_u)) ?>
|
||||
<?php else: ?>
|
||||
<span style="font-style:italic;">No groups</span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<!-- Actions -->
|
||||
<div style="display:flex; gap:0.4rem; flex-wrap:wrap;">
|
||||
<?php if($u['id'] != $user_id): ?>
|
||||
<!-- Toggle admin -->
|
||||
<form method="POST" style="display:inline;">
|
||||
<input type="hidden" name="toggle_user_id" value="<?= $u['id'] ?>">
|
||||
<input type="hidden" name="new_admin_val" value="<?= $u['is_admin']?0:1 ?>">
|
||||
<button type="submit" name="toggle_admin" class="btn btn-sm btn-secondary" title="<?= $u['is_admin']?'Revoke Admin':'Grant Admin' ?>">
|
||||
<i class="fa fa-<?= $u['is_admin']?'user-minus':'user-shield' ?>"></i>
|
||||
</button>
|
||||
</form>
|
||||
<!-- Delete -->
|
||||
<form method="POST" style="display:inline;" onsubmit="return confirm('Delete user <?= htmlspecialchars(addslashes($u['username'])) ?>?')">
|
||||
<input type="hidden" name="del_user_id" value="<?= $u['id'] ?>">
|
||||
<button type="submit" name="delete_user" class="btn btn-sm btn-danger" title="Delete user">
|
||||
<i class="fa fa-trash"></i>
|
||||
</button>
|
||||
</form>
|
||||
<?php else: ?>
|
||||
<span style="font-size:0.75rem; color:var(--primary); font-style:italic; padding:4px 0;">(You)</span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Groups Tab ────────────────────────────────────────────────────────── -->
|
||||
<div class="admin-tab-pane <?= $active_tab==='groups'?'active':'' ?>" id="tab-groups">
|
||||
<div style="display:grid; grid-template-columns:340px 1fr; gap:1.5rem; align-items:start;">
|
||||
<!-- Create Group + Assign -->
|
||||
<div>
|
||||
<div class="card">
|
||||
<h3 style="font-size:1rem; font-weight:700; margin-bottom:1rem;"><i class="fa fa-folder-plus"></i> Create Group</h3>
|
||||
<form method="POST" style="display:flex; gap:0.5rem;">
|
||||
<input type="text" name="group_name" class="form-control" placeholder="Group name" required>
|
||||
<button type="submit" name="create_group" class="btn btn-sm"><i class="fa fa-plus"></i> Create</button>
|
||||
</form>
|
||||
</div>
|
||||
<div class="card">
|
||||
<h3 style="font-size:1rem; font-weight:700; margin-bottom:1rem;"><i class="fa fa-user-plus"></i> Assign User to Group</h3>
|
||||
<form method="POST">
|
||||
<div class="form-group">
|
||||
<label>User</label>
|
||||
<select name="user_id" class="form-control" required>
|
||||
<option value="">Select user...</option>
|
||||
<?php foreach($users as $u): ?><option value="<?= $u['id'] ?>"><?= htmlspecialchars($u['username']) ?></option><?php endforeach; ?>
|
||||
</select>
|
||||
<select name="group_id" class="form-control" required style="width:130px;">
|
||||
<option value="">Group...</option>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Group</label>
|
||||
<select name="group_id" class="form-control" required>
|
||||
<option value="">Select group...</option>
|
||||
<?php foreach($all_groups as $g): ?><option value="<?= $g['id'] ?>"><?= htmlspecialchars($g['name']) ?></option><?php endforeach; ?>
|
||||
</select>
|
||||
<button type="submit" name="assign_group" class="btn">Assign</button>
|
||||
</div>
|
||||
<button type="submit" name="assign_group" class="btn" style="width:100%;"><i class="fa fa-link"></i> Assign</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" style="grid-column: span 2;">
|
||||
<h3>System Operations & Configurations</h3>
|
||||
<p style="margin-top:0.5rem; color:var(--text-light);">Modify the global lifecycle durations for Kanban Auto-Archiving / Auto-Deleting processes.</p>
|
||||
<form method="POST" style="margin-top:1.5rem; display:flex; gap:1.5rem; align-items:flex-end;">
|
||||
<div class="form-group" style="margin:0;">
|
||||
<label>Completed tasks retain for (Days)</label>
|
||||
<input type="number" name="completed_days" value="<?= htmlspecialchars($conf_comp) ?>" class="form-control" style="width:200px;">
|
||||
<div style="font-size:0.75rem; color:var(--text-light); margin-top:4px;">Default: 7 Days (Before auto-moving to Archive)</div>
|
||||
<!-- Groups Breakdown -->
|
||||
<div>
|
||||
<h3 style="font-size:1rem; font-weight:700; margin-bottom:1rem;"><i class="fa fa-people-group"></i> All Groups (<?= $total_groups ?>)</h3>
|
||||
<?php if(!$all_groups): ?>
|
||||
<p style="color:var(--text-light);">No groups created yet.</p>
|
||||
<?php endif; ?>
|
||||
<div style="display:flex; flex-direction:column; gap:1rem;">
|
||||
<?php foreach($all_groups as $g):
|
||||
$stmt = $pdo->prepare("SELECT u.id, u.username FROM users u JOIN user_groups ug ON u.id=ug.user_id WHERE ug.group_id=?");
|
||||
$stmt->execute([$g['id']]);
|
||||
$g_users = $stmt->fetchAll();
|
||||
?>
|
||||
<div class="card" style="margin-bottom:0;">
|
||||
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:0.75rem;">
|
||||
<div>
|
||||
<div style="font-weight:700; font-size:1rem; color:var(--primary);">
|
||||
<i class="fa fa-people-group"></i> <?= htmlspecialchars($g['name']) ?>
|
||||
</div>
|
||||
<div class="form-group" style="margin:0;">
|
||||
<label>Archived tasks retain for (Days)</label>
|
||||
<input type="number" name="archived_days" value="<?= htmlspecialchars($conf_arch) ?>" class="form-control" style="width:200px;">
|
||||
<div style="font-size:0.75rem; color:var(--text-light); margin-top:4px;">Default: 90 Days (Before permanent deletion)</div>
|
||||
<div style="font-size:0.75rem; color:var(--text-light);"><?= count($g_users) ?> member<?= count($g_users)!=1?'s':'' ?></div>
|
||||
</div>
|
||||
<button type="submit" name="update_sys_config" class="btn">Save Database Config</button>
|
||||
<form method="POST" onsubmit="return confirm('Delete group <?= htmlspecialchars(addslashes($g['name'])) ?>?')">
|
||||
<input type="hidden" name="del_group_id" value="<?= $g['id'] ?>">
|
||||
<button type="submit" name="delete_group" class="btn btn-sm btn-danger"><i class="fa fa-trash"></i></button>
|
||||
</form>
|
||||
</div>
|
||||
<?php if($g_users): ?>
|
||||
<div style="display:flex; flex-wrap:wrap; gap:0.5rem;">
|
||||
<?php foreach($g_users as $gu): ?>
|
||||
<div style="display:flex; align-items:center; gap:0.35rem; background:rgba(var(--primary-rgb),0.07); border-radius:20px; padding:4px 10px;">
|
||||
<span style="font-size:0.8rem; font-weight:600;"><?= htmlspecialchars($gu['username']) ?></span>
|
||||
<form method="POST" style="display:inline;">
|
||||
<input type="hidden" name="user_id" value="<?= $gu['id'] ?>">
|
||||
<input type="hidden" name="group_id" value="<?= $g['id'] ?>">
|
||||
<button type="submit" name="remove_from_group" class="btn btn-sm btn-danger" style="padding:1px 5px; font-size:0.7rem; border-radius:10px;" title="Remove from group">×</button>
|
||||
</form>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<p style="color:var(--text-light); font-size:0.8rem; font-style:italic;">No members yet.</p>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; grid-template-columns: 1fr; gap:1.5rem;">
|
||||
<!-- ── Notifications Tab ──────────────────────────────────────────────────── -->
|
||||
<div class="admin-tab-pane <?= $active_tab==='channels'?'active':'' ?>" id="tab-channels">
|
||||
<div class="card">
|
||||
<h3>User Profile & Settings (Channels)</h3>
|
||||
<p style="margin-bottom:1rem; color:var(--text-light);">Assign specific notification channels (Native, Telegram, Email, WhatsApp) to users. User must be created above first.</p>
|
||||
<h3 style="font-size:1rem; font-weight:700; margin-bottom:0.5rem;"><i class="fa fa-bell"></i> User Notification Channels</h3>
|
||||
<p style="font-size:0.85rem; color:var(--text-light); margin-bottom:1.25rem;">Configure notification channels (Native, Telegram, Email, WhatsApp) per user.</p>
|
||||
<div style="overflow-x:auto;">
|
||||
<table>
|
||||
<thead><tr><th>Username</th><th>Active Channels</th><th>Telegram ID</th><th>Email</th><th>WhatsApp</th><th>Action</th></tr></thead>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>User</th>
|
||||
<th>Role</th>
|
||||
<th>Channels</th>
|
||||
<th>Telegram ID</th>
|
||||
<th>Email</th>
|
||||
<th>WhatsApp</th>
|
||||
<th>Save</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php foreach($users as $u): ?>
|
||||
<?php foreach($users as $u):
|
||||
$chs = explode(',', $u['notify_channels'] ?? '');
|
||||
?>
|
||||
<tr>
|
||||
<form method="POST">
|
||||
<input type="hidden" name="user_id" value="<?= $u['id'] ?>">
|
||||
<td><strong><?= htmlspecialchars($u['username']) ?></strong></td>
|
||||
<td style="display:flex; flex-direction:column; gap:0.25rem;">
|
||||
<?php $chs = explode(',', $u['notify_channels'] ?? ''); ?>
|
||||
<label><input type="checkbox" name="channels[]" value="native" <?= in_array('native', $chs)?'checked':'' ?>> Native</label>
|
||||
<label><input type="checkbox" name="channels[]" value="email" <?= in_array('email', $chs)?'checked':'' ?>> Email</label>
|
||||
<label><input type="checkbox" name="channels[]" value="telegram" <?= in_array('telegram', $chs)?'checked':'' ?>> TG</label>
|
||||
<label><input type="checkbox" name="channels[]" value="whatsapp" <?= in_array('whatsapp', $chs)?'checked':'' ?>> WA</label>
|
||||
<td>
|
||||
<div style="display:flex; align-items:center; gap:0.5rem;">
|
||||
<div style="width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:0.75rem;font-weight:700;flex-shrink:0;overflow:hidden;">
|
||||
<?php if(($u['profile_pic']??null) && file_exists($u['profile_pic'])): ?>
|
||||
<img src="<?= htmlspecialchars($u['profile_pic']) ?>" style="width:100%;height:100%;object-fit:cover;">
|
||||
<?php else: ?>
|
||||
<?= strtoupper(mb_substr($u['username'],0,1)) ?>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<strong><?= htmlspecialchars($u['username']) ?></strong>
|
||||
</div>
|
||||
</td>
|
||||
<td><input type="text" name="telegram_id" value="<?= htmlspecialchars($u['telegram_id']??'') ?>" class="form-control" style="width:100px; padding:0.25rem;"></td>
|
||||
<td><input type="email" name="email" value="<?= htmlspecialchars($u['email']??'') ?>" class="form-control" style="width:150px; padding:0.25rem;"></td>
|
||||
<td><input type="text" name="whatsapp_number" value="<?= htmlspecialchars($u['whatsapp_number']??'') ?>" class="form-control" style="width:120px; padding:0.25rem;"></td>
|
||||
<td><button type="submit" name="update_user_channels" class="btn btn-sm">Save</button></td>
|
||||
<td><span class="<?= $u['is_admin']?'admin-badge-admin':'admin-badge-user' ?>"><?= $u['is_admin']?'Admin':'User' ?></span></td>
|
||||
<td>
|
||||
<div style="display:flex; gap:0.5rem; flex-wrap:wrap;">
|
||||
<?php foreach(['native','email','telegram','whatsapp'] as $ch): ?>
|
||||
<label style="display:flex; align-items:center; gap:3px; font-size:0.8rem; cursor:pointer; white-space:nowrap;">
|
||||
<input type="checkbox" name="channels[]" value="<?= $ch ?>" <?= in_array($ch,$chs)?'checked':'' ?>>
|
||||
<?= ucfirst($ch) ?>
|
||||
</label>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
</td>
|
||||
<td><input type="text" name="telegram_id" value="<?= htmlspecialchars($u['telegram_id']??'') ?>" class="form-control" style="width:100px; padding:0.35rem;"></td>
|
||||
<td><input type="email" name="email" value="<?= htmlspecialchars($u['email']??'') ?>" class="form-control" style="width:160px; padding:0.35rem;"></td>
|
||||
<td><input type="text" name="whatsapp_number" value="<?= htmlspecialchars($u['whatsapp_number']??'') ?>" class="form-control" style="width:120px; padding:0.35rem;"></td>
|
||||
<td><button type="submit" name="update_user_channels" class="btn btn-sm"><i class="fa fa-save"></i></button></td>
|
||||
</form>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
@@ -134,25 +414,54 @@ $conf_arch = query("SELECT v FROM system_config WHERE k='archived_days'")->fetch
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── System Config Tab ─────────────────────────────────────────────────── -->
|
||||
<div class="admin-tab-pane <?= $active_tab==='config'?'active':'' ?>" id="tab-config">
|
||||
<div class="card">
|
||||
<h3>Existing Groups Breakdown</h3>
|
||||
<div style="display:flex; flex-wrap:wrap; gap:1.5rem; margin-top:1rem;">
|
||||
<?php foreach($all_groups as $g): ?>
|
||||
<div style="border:1px solid var(--border); border-radius:0.5rem; padding:1rem; width:250px;">
|
||||
<h4 style="color:var(--primary); font-size:1.1rem; border-bottom:1px solid var(--border); padding-bottom:0.5rem; margin-bottom:0.5rem;"><?= htmlspecialchars($g['name']) ?></h4>
|
||||
<ul style="padding-left:1.5rem;">
|
||||
<?php
|
||||
$stmt = $pdo->prepare("SELECT u.username FROM users u JOIN user_groups ug ON u.id = ug.user_id WHERE ug.group_id=?");
|
||||
$stmt->execute([$g['id']]);
|
||||
$g_users = $stmt->fetchAll();
|
||||
foreach($g_users as $gu) echo "<li>".htmlspecialchars($gu['username'])."</li>";
|
||||
if(!$g_users) echo "<li style='color:var(--text-light); list-style:none; margin-left:-1.5rem;'>No users in group</li>";
|
||||
?>
|
||||
</ul>
|
||||
<h3 style="font-size:1rem; font-weight:700; margin-bottom:0.5rem;"><i class="fa fa-gear"></i> Kanban Auto-Archive Settings</h3>
|
||||
<p style="font-size:0.85rem; color:var(--text-light); margin-bottom:1.5rem;">Control how long tasks stay in Completed or Archived states before being moved/deleted.</p>
|
||||
<form method="POST">
|
||||
<div style="display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; max-width:600px;">
|
||||
<div class="form-group" style="margin:0;">
|
||||
<label>Completed tasks retain for (Days)</label>
|
||||
<input type="number" name="completed_days" value="<?= htmlspecialchars($conf_comp) ?>" class="form-control" min="1" max="365">
|
||||
<div style="font-size:0.75rem; color:var(--text-light); margin-top:4px;">Default: 7 days (before auto-moving to Archive)</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
<?php if(!$all_groups): ?><p style="color:var(--text-light);">No groups registered.</p><?php endif; ?>
|
||||
<div class="form-group" style="margin:0;">
|
||||
<label>Archived tasks retain for (Days)</label>
|
||||
<input type="number" name="archived_days" value="<?= htmlspecialchars($conf_arch) ?>" class="form-control" min="1" max="3650">
|
||||
<div style="font-size:0.75rem; color:var(--text-light); margin-top:4px;">Default: 90 days (before permanent deletion)</div>
|
||||
</div>
|
||||
</div>
|
||||
<button type="submit" name="update_sys_config" class="btn" style="margin-top:1.25rem;"><i class="fa fa-save"></i> Save Configuration</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- Danger Zone -->
|
||||
<div class="card" style="border:1px solid rgba(239,68,68,0.3);">
|
||||
<h3 style="font-size:1rem; font-weight:700; margin-bottom:0.5rem; color:#EF4444;"><i class="fa fa-triangle-exclamation"></i> Danger Zone</h3>
|
||||
<p style="font-size:0.85rem; color:var(--text-light); margin-bottom:1rem;">These actions are irreversible. Proceed with extreme caution.</p>
|
||||
<div style="display:flex; gap:0.75rem; flex-wrap:wrap;">
|
||||
<button class="btn btn-danger" onclick="if(confirm('Really purge all archive tasks?')) alert('Not implemented in this demo.')">
|
||||
<i class="fa fa-trash"></i> Purge Archived Tasks
|
||||
</button>
|
||||
<button class="btn btn-danger" onclick="if(confirm('Really clear all activity logs?')) alert('Not implemented in this demo.')">
|
||||
<i class="fa fa-eraser"></i> Clear Activity Logs
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function switchTab(name) {
|
||||
document.querySelectorAll('.admin-tab').forEach(t => t.classList.remove('active'));
|
||||
document.querySelectorAll('.admin-tab-pane').forEach(p => p.classList.remove('active'));
|
||||
document.querySelector(`[onclick="switchTab('${name}')"]`).classList.add('active');
|
||||
document.getElementById('tab-'+name).classList.add('active');
|
||||
// Update URL without reload
|
||||
const url = new URL(window.location);
|
||||
url.searchParams.set('tab', name);
|
||||
history.replaceState({}, '', url);
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -57,10 +57,18 @@ $my_mood = $current_user['mood'] ?? null;
|
||||
// ── Team moods (all users + their mood) ──────────────────────────────────────
|
||||
$team_moods = query("SELECT id, username, mood, mood_updated_at FROM users WHERE mood IS NOT NULL AND id != ? ORDER BY mood_updated_at DESC", [$user_id])->fetchAll();
|
||||
|
||||
// ── Activity log (user + their groups, last 20) ───────────────────────────────
|
||||
// ── Activity log ──────────────────────────────────────────────────────────────
|
||||
// Admin: sees ALL activity across all users & groups
|
||||
// Standard user: sees own activity + group members activity
|
||||
$is_admin_user = !empty($_SESSION['is_admin']);
|
||||
$recent_logs = [];
|
||||
try {
|
||||
// Collect relevant user IDs: current user + members of same groups
|
||||
if ($is_admin_user) {
|
||||
// Admin: fetch all activity
|
||||
$stmt = $pdo->prepare("SELECT al.*, u.username FROM activity_log al LEFT JOIN users u ON al.user_id=u.id ORDER BY al.created_at DESC LIMIT 40");
|
||||
$stmt->execute();
|
||||
} else {
|
||||
// Standard: only own + group peers
|
||||
$peer_ids = [$user_id];
|
||||
if ($my_group_ids) {
|
||||
$gin = implode(',', array_fill(0, count($my_group_ids), '?'));
|
||||
@@ -71,13 +79,21 @@ try {
|
||||
$uid_in = implode(',', array_fill(0, count($peer_ids), '?'));
|
||||
$stmt = $pdo->prepare("SELECT al.*, u.username FROM activity_log al LEFT JOIN users u ON al.user_id=u.id WHERE al.user_id IN ($uid_in) ORDER BY al.created_at DESC LIMIT 20");
|
||||
$stmt->execute($peer_ids);
|
||||
}
|
||||
$recent_logs = $stmt->fetchAll();
|
||||
} catch(Exception $e) {}
|
||||
|
||||
// ── Auto-log task changes for history (read recent task status changes) ───────
|
||||
// ── Task logs ─────────────────────────────────────────────────────────────────
|
||||
$task_logs = [];
|
||||
try {
|
||||
// Include group-assigned tasks too
|
||||
if ($is_admin_user) {
|
||||
// Admin: all recent task status changes
|
||||
$stmt = $pdo->prepare("SELECT t.title, t.status, t.status_updated_at, u.username as assignor
|
||||
FROM tasks t LEFT JOIN users u ON t.assignor_id=u.id
|
||||
WHERE t.status_updated_at IS NOT NULL
|
||||
ORDER BY t.status_updated_at DESC LIMIT 40");
|
||||
$stmt->execute();
|
||||
} else {
|
||||
$group_in_tl = $my_group_ids ? implode(',', array_fill(0, count($my_group_ids), '?')) : '0';
|
||||
$tl_params = array_merge([$user_id, $user_id], $my_group_ids, $my_group_ids);
|
||||
$stmt = $pdo->prepare("SELECT t.title, t.status, t.status_updated_at, u.username as assignor
|
||||
@@ -90,12 +106,13 @@ try {
|
||||
)
|
||||
ORDER BY t.status_updated_at DESC LIMIT 30");
|
||||
$stmt->execute($tl_params);
|
||||
}
|
||||
$task_logs = $stmt->fetchAll();
|
||||
} catch(Exception $e) {}
|
||||
?>
|
||||
|
||||
<style>
|
||||
.db-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:1.25rem; margin-bottom:1.5rem; }
|
||||
.db-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:1.25rem; margin-bottom:1.5rem; }
|
||||
.db-stat-card {
|
||||
background:var(--surface); border-radius:1rem; padding:1.25rem 1.5rem;
|
||||
box-shadow:0 4px 6px -1px rgba(0,0,0,0.07); border:1px solid var(--border);
|
||||
@@ -103,10 +120,10 @@ try {
|
||||
text-decoration:none !important; color:var(--text) !important;
|
||||
}
|
||||
.db-stat-card:hover { transform:translateY(-3px); box-shadow:0 8px 15px -3px rgba(0,0,0,0.1); }
|
||||
.db-stat-label { font-size:0.8rem; color:var(--text-light); font-weight:500; text-transform:uppercase; letter-spacing:0.04em; }
|
||||
.db-stat-label { font-size:0.78rem; color:var(--text-light); font-weight:600; text-transform:uppercase; letter-spacing:0.05em; display:flex; align-items:center; gap:0.4rem; }
|
||||
.db-stat-value { font-size:2.2rem; font-weight:700; line-height:1; }
|
||||
.db-stat-sub { display:flex; gap:1rem; flex-wrap:wrap; margin-top:0.35rem; }
|
||||
.db-stat-sub span { font-size:0.75rem; font-weight:600; padding:2px 8px; border-radius:20px; }
|
||||
.db-stat-sub { display:flex; gap:0.5rem; flex-wrap:wrap; margin-top:0.35rem; }
|
||||
.db-stat-sub span { font-size:0.72rem; font-weight:600; padding:2px 8px; border-radius:20px; }
|
||||
.db-stat-link { font-size:0.78rem; color:var(--primary); margin-top:auto; font-weight:500; }
|
||||
|
||||
/* Welcome banner */
|
||||
@@ -118,21 +135,6 @@ try {
|
||||
.db-welcome h2 { font-size:1.4rem; font-weight:700; }
|
||||
.db-welcome p { font-size:0.875rem; opacity:0.85; margin-top:0.25rem; }
|
||||
|
||||
/* Holiday strip */
|
||||
.db-holiday {
|
||||
background:var(--surface); border:1px solid var(--border); border-radius:0.75rem;
|
||||
padding:0.75rem 1.25rem; display:flex; align-items:center; gap:0.75rem;
|
||||
font-size:0.875rem; margin-bottom:1.5rem; overflow:hidden;
|
||||
}
|
||||
.db-holiday-list {
|
||||
display:flex; gap:1.5rem; overflow-x:auto; flex:1; padding-bottom:2px;
|
||||
scrollbar-width:thin;
|
||||
}
|
||||
.db-holiday-item { flex-shrink:0; display:flex; align-items:center; gap:0.4rem; white-space:nowrap; }
|
||||
.db-holiday-date { font-size:0.7rem; background:rgba(var(--primary-rgb),0.1); color:var(--primary); padding:2px 6px; border-radius:6px; font-weight:600; }
|
||||
.db-holiday-name { color:var(--text); font-weight:500; }
|
||||
.db-holiday-country { font-size:0.7rem; color:var(--text-light); }
|
||||
|
||||
/* Mood picker */
|
||||
.mood-row { display:flex; gap:0.4rem; flex-wrap:wrap; align-items:center; }
|
||||
.mood-btn {
|
||||
@@ -142,8 +144,8 @@ try {
|
||||
transition:transform 0.15s, border-color 0.15s, background 0.15s;
|
||||
line-height:1;
|
||||
}
|
||||
.mood-btn:hover { transform:scale(1.15); background:rgba(var(--primary-rgb),0.08); }
|
||||
.mood-btn.active { border-color:var(--primary); background:rgba(var(--primary-rgb),0.12); transform:scale(1.1); }
|
||||
.mood-btn:hover { transform:scale(1.15); background:rgba(255,255,255,0.15); }
|
||||
.mood-btn.active { border-color:rgba(255,255,255,0.9); background:rgba(255,255,255,0.2); transform:scale(1.1); }
|
||||
|
||||
/* Team moods */
|
||||
.team-mood-row { display:flex; flex-wrap:wrap; gap:0.6rem; }
|
||||
@@ -155,8 +157,8 @@ try {
|
||||
.team-mood-chip .em { font-size:1.2rem; }
|
||||
|
||||
/* Activity log */
|
||||
.log-list { display:flex; flex-direction:column; gap:0.5rem; overflow-y:auto; flex:1; }
|
||||
.log-item { display:flex; gap:0.75rem; align-items:flex-start; font-size:0.8rem; flex-shrink:0; }
|
||||
.log-list { display:flex; flex-direction:column; gap:0.5rem; overflow-y:auto; flex:1; max-height:360px; }
|
||||
.log-item { display:flex; gap:0.75rem; align-items:flex-start; font-size:0.8rem; flex-shrink:0; padding:0.35rem 0; }
|
||||
.log-avatar { width:26px; height:26px; border-radius:50%; background:var(--primary); color:#fff; display:flex; align-items:center; justify-content:center; font-size:0.65rem; font-weight:700; flex-shrink:0; }
|
||||
.log-body { flex:1; min-width:0; }
|
||||
.log-body strong { color:var(--text); }
|
||||
@@ -164,16 +166,18 @@ try {
|
||||
.log-time { font-size:0.7rem; color:var(--text-light); white-space:nowrap; flex-shrink:0; }
|
||||
|
||||
/* Full-height bottom section */
|
||||
.db-wrapper { display:flex; flex-direction:column; min-height:calc(100vh - 4rem); }
|
||||
.db-wrapper { display:flex; flex-direction:column; }
|
||||
.two-col {
|
||||
display:grid; grid-template-columns:1fr 1fr; gap:1.25rem;
|
||||
flex:1; min-height:0;
|
||||
}
|
||||
.two-col > .card {
|
||||
margin-bottom:0; display:flex; flex-direction:column;
|
||||
min-height:0; /* allow shrink inside grid */
|
||||
min-height:0;
|
||||
}
|
||||
@media(max-width:720px){ .two-col { grid-template-columns:1fr; } }
|
||||
|
||||
.admin-activity-badge { display:inline-flex; align-items:center; gap:0.4rem; font-size:0.7rem; padding:2px 8px; border-radius:12px; background:rgba(239,68,68,0.1); color:#EF4444; font-weight:700; }
|
||||
</style>
|
||||
|
||||
<?php
|
||||
@@ -225,7 +229,7 @@ if (empty($_SESSION['dash_logged_today'])) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Today's Holiday Badge (injected by JS into welcome banner) ──────────── -->
|
||||
<!-- ── Today's Holiday Badge ──────────────────────────────────────────────── -->
|
||||
<div id="today-holiday-banner" style="display:none; margin-bottom:1rem; padding:0.6rem 1.25rem; background:linear-gradient(90deg,rgba(245,158,11,0.12),rgba(16,185,129,0.08)); border:1px solid rgba(245,158,11,0.3); border-radius:0.75rem; align-items:center; gap:0.75rem; font-size:0.875rem;">
|
||||
<span style="font-size:1.3rem;">🎉</span>
|
||||
<div>
|
||||
@@ -322,8 +326,15 @@ if (empty($_SESSION['dash_logged_today'])) {
|
||||
<!-- Activity Log -->
|
||||
<div class="card">
|
||||
<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>
|
||||
<span style="font-size:0.75rem; color:var(--text-light);">You & your groups</span>
|
||||
<?php if($is_admin_user): ?>
|
||||
<span class="admin-activity-badge"><i class="fa fa-shield-halved" style="font-size:0.65rem;"></i> All Users</span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<span style="font-size:0.75rem; color:var(--text-light);">
|
||||
<?= $is_admin_user ? 'All activity across platform' : 'You & your groups' ?>
|
||||
</span>
|
||||
</div>
|
||||
<?php
|
||||
// Merge activity_log + task_logs into one unified feed sorted by time
|
||||
@@ -346,13 +357,18 @@ if (empty($_SESSION['dash_logged_today'])) {
|
||||
];
|
||||
}
|
||||
usort($feed, fn($a,$b) => strtotime($b['time']) - strtotime($a['time']));
|
||||
$feed = array_slice($feed, 0, 30);
|
||||
$feed = array_slice($feed, 0, $is_admin_user ? 50 : 30);
|
||||
|
||||
$action_icons = [
|
||||
'visit' => '🌐',
|
||||
'mood_set' => '😊',
|
||||
'task_status' => '✅',
|
||||
'note_create' => '📝',
|
||||
'pw_add' => '🔐',
|
||||
];
|
||||
|
||||
// Generate avatar color based on username hash
|
||||
$avatar_colors = ['#4F46E5','#10B981','#F59E0B','#EF4444','#8B5CF6','#06B6D4','#EC4899','#84CC16'];
|
||||
?>
|
||||
<?php if(empty($feed)): ?>
|
||||
<p style="color:var(--text-light); font-size:0.85rem;">No activity yet.</p>
|
||||
@@ -362,9 +378,10 @@ if (empty($_SESSION['dash_logged_today'])) {
|
||||
$initial = strtoupper(mb_substr($entry['user'], 0, 1));
|
||||
$icon = $action_icons[$entry['action']] ?? '🔔';
|
||||
$ago = human_time_diff(strtotime($entry['time']));
|
||||
$color = $avatar_colors[crc32($entry['user']) % count($avatar_colors)];
|
||||
?>
|
||||
<div class="log-item">
|
||||
<div class="log-avatar"><?= $initial ?></div>
|
||||
<div class="log-avatar" style="background:<?= $color ?>;"><?= $initial ?></div>
|
||||
<div class="log-body">
|
||||
<strong><?= htmlspecialchars($entry['user']) ?></strong>
|
||||
<span class="log-detail"> <?= $icon ?> <?= htmlspecialchars($entry['detail']) ?></span>
|
||||
@@ -396,7 +413,6 @@ function selectMood(em) {
|
||||
document.getElementById('mood-value').value = em;
|
||||
document.querySelectorAll('.mood-btn').forEach(b => b.classList.remove('active'));
|
||||
if (em) {
|
||||
// Find the button whose text equals em
|
||||
document.querySelectorAll('.mood-btn').forEach(b => {
|
||||
if (b.textContent.trim() === em) b.classList.add('active');
|
||||
});
|
||||
@@ -404,10 +420,10 @@ function selectMood(em) {
|
||||
document.getElementById('mood-form').submit();
|
||||
}
|
||||
|
||||
// ── Holiday check: is TODAY a holiday in Indonesia (ID) or Internationally (UN)?
|
||||
// ── Holiday check ─────────────────────────────────────────────────────────────
|
||||
(function checkTodayHoliday() {
|
||||
const year = new Date().getFullYear();
|
||||
const today = new Date().toISOString().slice(0, 10); // YYYY-MM-DD
|
||||
const today = new Date().toISOString().slice(0, 10);
|
||||
|
||||
const urls = [
|
||||
{ url: `https://date.nager.at/api/v3/PublicHolidays/${year}/ID`, flag: '🇮🇩', label: 'Indonesia' },
|
||||
@@ -434,7 +450,6 @@ function selectMood(em) {
|
||||
labelEl.textContent = '— Today is a holiday! 🎊';
|
||||
banner.style.display = 'flex';
|
||||
}
|
||||
// If no holiday today, banner stays hidden (display:none)
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
</main>
|
||||
</div>
|
||||
<script>
|
||||
// Dark Mode Toggle
|
||||
// ── Dark Mode Toggle ──────────────────────────────────────────────────
|
||||
const themeBtn = document.getElementById('theme-toggle');
|
||||
const iconLight = document.getElementById('theme-icon-light');
|
||||
const iconDark = document.getElementById('theme-icon-dark');
|
||||
@@ -16,7 +16,6 @@
|
||||
iconDark.style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
if(themeBtn) {
|
||||
updateThemeIcon();
|
||||
themeBtn.addEventListener('click', () => {
|
||||
@@ -27,13 +26,67 @@
|
||||
});
|
||||
}
|
||||
|
||||
// Toast Notifier
|
||||
// ── Toast ─────────────────────────────────────────────────────────────
|
||||
function showToast(msg) {
|
||||
const t = document.getElementById('toast');
|
||||
t.textContent = msg;
|
||||
t.classList.add('show');
|
||||
setTimeout(() => t.classList.remove('show'), 3000);
|
||||
}
|
||||
|
||||
// ── Sidebar Collapse ──────────────────────────────────────────────────
|
||||
function toggleSidebar() {
|
||||
const collapsed = document.body.classList.toggle('sidebar-collapsed');
|
||||
localStorage.setItem('sidebar_collapsed', collapsed ? '1' : '0');
|
||||
updateSidebarIcon();
|
||||
}
|
||||
function updateSidebarIcon() {
|
||||
const icon = document.getElementById('sidebar-toggle-icon');
|
||||
if(!icon) return;
|
||||
if(document.body.classList.contains('sidebar-collapsed')) {
|
||||
icon.className = 'fa fa-chevron-right';
|
||||
} else {
|
||||
icon.className = 'fa fa-chevron-left';
|
||||
}
|
||||
}
|
||||
updateSidebarIcon();
|
||||
|
||||
// ── User Dropdown ─────────────────────────────────────────────────────
|
||||
function toggleUserDropdown() {
|
||||
const menu = document.getElementById('user-dropdown-menu');
|
||||
menu.classList.toggle('open');
|
||||
}
|
||||
function closeUserDropdown() {
|
||||
const menu = document.getElementById('user-dropdown-menu');
|
||||
if(menu) menu.classList.remove('open');
|
||||
}
|
||||
document.addEventListener('click', (e) => {
|
||||
const wrap = document.getElementById('user-dropdown-wrap');
|
||||
if (wrap && !wrap.contains(e.target)) closeUserDropdown();
|
||||
});
|
||||
|
||||
// ── Notifications ─────────────────────────────────────────────────────
|
||||
function openNotifications() {
|
||||
closeUserDropdown();
|
||||
document.getElementById('notifications-modal').classList.add('active');
|
||||
}
|
||||
|
||||
// ── Close modals on overlay click ─────────────────────────────────────
|
||||
document.querySelectorAll('.modal-overlay').forEach(mo => {
|
||||
mo.addEventListener('click', (e) => {
|
||||
if (e.target === mo) mo.classList.remove('active');
|
||||
});
|
||||
});
|
||||
|
||||
// ── Auto open change-pw modal if error ────────────────────────────────
|
||||
<?php
|
||||
$pw_msg_bottom = $_SESSION['pw_change_msg_bottom'] ?? null;
|
||||
if($pw_msg_bottom):
|
||||
?>
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
document.getElementById('change-pw-modal').classList.add('active');
|
||||
});
|
||||
<?php endif; ?>
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@@ -9,39 +9,233 @@
|
||||
<link rel="stylesheet" href="public/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<script>if(localStorage.getItem('theme') === 'dark') document.body.classList.add('dark-mode');</script>
|
||||
<script>
|
||||
if(localStorage.getItem('theme') === 'dark') document.body.classList.add('dark-mode');
|
||||
if(localStorage.getItem('sidebar_collapsed') === '1') document.body.classList.add('sidebar-collapsed');
|
||||
</script>
|
||||
<div id="toast"></div>
|
||||
<div class="app-container">
|
||||
<aside class="sidebar">
|
||||
<h2 style="display:flex; align-items:center; gap:8px;">
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
|
||||
TaskManager
|
||||
</h2>
|
||||
<nav style="display:flex; flex-direction:column; gap:0.5rem;">
|
||||
<a href="?action=dashboard" class="nav-link <?= $action=='dashboard'?'active':'' ?>"> Dashboard</a>
|
||||
<a href="?action=tasks" class="nav-link <?= $action=='tasks'?'active':'' ?>"> Tasks</a>
|
||||
<a href="?action=notes" class="nav-link <?= $action=='notes'?'active':'' ?>"> Notes</a>
|
||||
<a href="?action=passwords" class="nav-link <?= $action=='passwords'?'active':'' ?>"> Passwords</a>
|
||||
<a href="?action=projects" class="nav-link <?= $action=='projects'?'active':'' ?>"> Projects</a>
|
||||
<a href="?action=notifications" class="nav-link <?= $action=='notifications'?'active':'' ?>">
|
||||
Notifications
|
||||
<?php if($unread_notifications > 0): ?>
|
||||
<span class="badge"><?= $unread_notifications ?></span>
|
||||
|
||||
<!-- Profile Picture Modal -->
|
||||
<div class="modal-overlay" id="profile-pic-modal">
|
||||
<div class="modal-content" style="max-width:420px;">
|
||||
<h3 style="margin-bottom:1rem; font-size:1.1rem;">Profile Picture</h3>
|
||||
<div style="display:flex; flex-direction:column; align-items:center; gap:1rem; margin-bottom:1.5rem;">
|
||||
<?php
|
||||
try { $pdo->exec("ALTER TABLE users ADD COLUMN profile_pic TEXT DEFAULT NULL"); } catch(Exception $e) {}
|
||||
$pic = $current_user['profile_pic'] ?? null;
|
||||
?>
|
||||
<?php if($pic && file_exists($pic)): ?>
|
||||
<img src="<?= htmlspecialchars($pic) ?>" alt="Profile" style="width:100px; height:100px; border-radius:50%; object-fit:cover; border:3px solid var(--primary);">
|
||||
<?php else: ?>
|
||||
<div style="width:100px; height:100px; border-radius:50%; background:var(--primary); display:flex; align-items:center; justify-content:center; font-size:2.5rem; color:#fff; font-weight:700;">
|
||||
<?= strtoupper(mb_substr($current_user['username'],0,1)) ?>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<form method="POST" enctype="multipart/form-data" style="margin-bottom:1rem;">
|
||||
<input type="hidden" name="upload_profile_pic" value="1">
|
||||
<input type="hidden" name="redirect_to" value="<?= htmlspecialchars($action) ?>">
|
||||
<div class="form-group">
|
||||
<label style="font-size:0.875rem; color:var(--text-light);">Upload New Picture (JPG, PNG, GIF, WebP)</label>
|
||||
<input type="file" name="profile_pic" accept="image/*" class="form-control" style="margin-top:0.5rem;" required>
|
||||
</div>
|
||||
<button type="submit" class="btn" style="width:100%;">Upload Picture</button>
|
||||
</form>
|
||||
<?php if($pic && file_exists($pic)): ?>
|
||||
<form method="POST">
|
||||
<input type="hidden" name="delete_profile_pic" value="1">
|
||||
<input type="hidden" name="redirect_to" value="<?= htmlspecialchars($action) ?>">
|
||||
<button type="submit" class="btn btn-danger" style="width:100%;" onclick="return confirm('Delete profile picture?')">Delete Picture</button>
|
||||
</form>
|
||||
<?php endif; ?>
|
||||
<button class="btn btn-secondary" style="width:100%; margin-top:0.5rem;" onclick="document.getElementById('profile-pic-modal').classList.remove('active')">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Change Password Modal -->
|
||||
<div class="modal-overlay" id="change-pw-modal">
|
||||
<div class="modal-content" style="max-width:400px;">
|
||||
<h3 style="margin-bottom:1rem; font-size:1.1rem;">Change Password</h3>
|
||||
<?php
|
||||
$pw_msg = $_SESSION['pw_change_msg'] ?? null;
|
||||
unset($_SESSION['pw_change_msg']);
|
||||
if ($pw_msg === 'success'): ?>
|
||||
<div class="alert" style="background:rgba(16,185,129,0.12); color:#10B981; border:1px solid #10B981;">Password changed successfully!</div>
|
||||
<?php elseif($pw_msg): ?>
|
||||
<div class="alert"><?= htmlspecialchars($pw_msg) ?></div>
|
||||
<?php endif; ?>
|
||||
<form method="POST">
|
||||
<input type="hidden" name="change_password" value="1">
|
||||
<input type="hidden" name="redirect_to" value="<?= htmlspecialchars($action) ?>">
|
||||
<div class="form-group">
|
||||
<label>Current Password</label>
|
||||
<input type="password" name="current_password" class="form-control" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>New Password</label>
|
||||
<input type="password" name="new_password" class="form-control" required minlength="6">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Confirm New Password</label>
|
||||
<input type="password" name="confirm_password" class="form-control" required minlength="6">
|
||||
</div>
|
||||
<button type="submit" class="btn" style="width:100%;">Change Password</button>
|
||||
</form>
|
||||
<button class="btn btn-secondary" style="width:100%; margin-top:0.5rem;" onclick="document.getElementById('change-pw-modal').classList.remove('active')">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Notifications Modal -->
|
||||
<?php
|
||||
// Fetch notifications for popup
|
||||
$notif_list = [];
|
||||
try {
|
||||
$stmt_n = $pdo->prepare("SELECT * FROM notifications WHERE user_id=? ORDER BY created_at DESC LIMIT 30");
|
||||
$stmt_n->execute([$user_id]);
|
||||
$notif_list = $stmt_n->fetchAll();
|
||||
} catch(Exception $e) {}
|
||||
?>
|
||||
<div class="modal-overlay" id="notifications-modal">
|
||||
<div class="modal-content" style="max-width:460px; max-height:80vh; display:flex; flex-direction:column; padding:0; overflow:hidden;">
|
||||
<div style="display:flex; justify-content:space-between; align-items:center; padding:1.25rem 1.5rem; border-bottom:1px solid var(--border);">
|
||||
<h3 style="font-size:1.05rem; font-weight:700;"><i class="fa fa-bell" style="color:var(--primary);"></i> Notifications</h3>
|
||||
<div style="display:flex; gap:0.5rem; align-items:center;">
|
||||
<?php if($unread_notifications > 0): ?>
|
||||
<form method="POST" id="mark-all-read-form" style="display:inline;">
|
||||
<input type="hidden" name="mark_all_read" value="1">
|
||||
<input type="hidden" name="redirect_to" value="<?= htmlspecialchars($action) ?>">
|
||||
<button type="submit" class="btn btn-sm btn-secondary" style="font-size:0.75rem;">Mark all read</button>
|
||||
</form>
|
||||
<?php endif; ?>
|
||||
<button onclick="document.getElementById('notifications-modal').classList.remove('active')" style="background:none;border:none;color:var(--text-light);cursor:pointer;font-size:1.2rem;padding:4px;">×</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="overflow-y:auto; flex:1; padding:0.75rem 0;">
|
||||
<?php if(empty($notif_list)): ?>
|
||||
<div style="text-align:center; padding:2.5rem 1rem; color:var(--text-light);">
|
||||
<i class="fa fa-bell-slash" style="font-size:2rem; display:block; margin-bottom:0.75rem;"></i>
|
||||
No notifications yet.
|
||||
</div>
|
||||
<?php else: foreach($notif_list as $n):
|
||||
$t = strtotime($n['created_at']);
|
||||
$diff = time()-$t;
|
||||
$ago = $diff<60?'just now':($diff<3600?floor($diff/60).'m ago':($diff<86400?floor($diff/3600).'h ago':floor($diff/86400).'d ago'));
|
||||
?>
|
||||
<div style="display:flex; align-items:flex-start; gap:0.75rem; padding:0.65rem 1.5rem; border-bottom:1px solid var(--border); transition:background 0.15s; <?= !$n['is_read']?'background:rgba(var(--primary-rgb),0.04);':'' ?>">
|
||||
<div style="width:8px; height:8px; border-radius:50%; background:<?= !$n['is_read']?'var(--primary)':'transparent' ?>; margin-top:6px; flex-shrink:0;"></div>
|
||||
<div style="flex:1; min-width:0;">
|
||||
<div style="font-size:0.875rem; color:var(--text); <?= !$n['is_read']?'font-weight:500;':'' ?>"><?= htmlspecialchars($n['message']) ?></div>
|
||||
<div style="font-size:0.72rem; color:var(--text-light); margin-top:3px;"><?= $ago ?></div>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="app-container">
|
||||
<!-- Sidebar -->
|
||||
<aside class="sidebar" id="sidebar">
|
||||
<!-- Toggle button on the edge -->
|
||||
<button class="sidebar-toggle-btn" id="sidebar-toggle-btn" onclick="toggleSidebar()" title="Collapse / Expand">
|
||||
<i class="fa fa-chevron-left" id="sidebar-toggle-icon"></i>
|
||||
</button>
|
||||
|
||||
<h2 class="sidebar-brand">
|
||||
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="flex-shrink:0;"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
|
||||
<span class="sidebar-label sidebar-brand-text">TaskManager</span>
|
||||
</h2>
|
||||
|
||||
<nav style="display:flex; flex-direction:column; gap:0.25rem;">
|
||||
<a href="?action=dashboard" class="nav-link <?= $action=='dashboard'?'active':'' ?>" title="Dashboard">
|
||||
<i class="fa fa-gauge-high nav-icon"></i>
|
||||
<span class="sidebar-label">Dashboard</span>
|
||||
</a>
|
||||
<a href="?action=tasks" class="nav-link <?= $action=='tasks'?'active':'' ?>" title="Tasks">
|
||||
<i class="fa fa-list-check nav-icon"></i>
|
||||
<span class="sidebar-label">Tasks</span>
|
||||
</a>
|
||||
<a href="?action=notes" class="nav-link <?= $action=='notes'?'active':'' ?>" title="Notes">
|
||||
<i class="fa fa-note-sticky nav-icon"></i>
|
||||
<span class="sidebar-label">Notes</span>
|
||||
</a>
|
||||
<a href="?action=passwords" class="nav-link <?= $action=='passwords'?'active':'' ?>" title="Passwords">
|
||||
<i class="fa fa-lock nav-icon"></i>
|
||||
<span class="sidebar-label">Passwords</span>
|
||||
</a>
|
||||
<a href="?action=projects" class="nav-link <?= $action=='projects'?'active':'' ?>" title="Projects">
|
||||
<i class="fa fa-folder-open nav-icon"></i>
|
||||
<span class="sidebar-label">Projects</span>
|
||||
</a>
|
||||
<?php if(!empty($_SESSION['is_admin'])): ?>
|
||||
<a href="?action=admin" class="nav-link <?= $action=='admin'?'active':'' ?>"> Admin Panel</a>
|
||||
<a href="?action=admin" class="nav-link <?= $action=='admin'?'active':'' ?>" title="Admin Panel">
|
||||
<i class="fa fa-shield-halved nav-icon"></i>
|
||||
<span class="sidebar-label">Admin Panel</span>
|
||||
</a>
|
||||
<?php endif; ?>
|
||||
</nav>
|
||||
<div style="margin-top:auto; padding-top:1rem; border-top:1px solid var(--border);">
|
||||
<div style="margin-bottom:0.5rem; font-weight:600;"><?= htmlspecialchars($current_user['username']) ?></div>
|
||||
<a href="?action=logout" class="nav-link" style="padding:0; color:var(--text-light);">Logout</a>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<main class="main-content">
|
||||
<div style="display:flex; justify-content:flex-end; margin-bottom:1rem;">
|
||||
<button id="theme-toggle" class="btn btn-secondary" style="border-radius:50%; padding:0.5rem; width:40px; height:40px; display:flex; align-items:center; justify-content:center;">
|
||||
<span id="theme-icon-light" style="display:none;"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg></span>
|
||||
<span id="theme-icon-dark" style="display:none;"><svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg></span>
|
||||
<!-- Top Bar -->
|
||||
<div style="display:flex; justify-content:flex-end; align-items:center; gap:0.75rem; margin-bottom:1.5rem;">
|
||||
<!-- Dark Mode Toggle -->
|
||||
<button id="theme-toggle" class="btn btn-secondary" title="Toggle dark mode" style="border-radius:50%; padding:0; width:38px; height:38px; display:flex; align-items:center; justify-content:center; flex-shrink:0;">
|
||||
<span id="theme-icon-light" style="display:none;"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="5"></circle><line x1="12" y1="1" x2="12" y2="3"></line><line x1="12" y1="21" x2="12" y2="23"></line><line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line><line x1="1" y1="12" x2="3" y2="12"></line><line x1="21" y1="12" x2="23" y2="12"></line><line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line></svg></span>
|
||||
<span id="theme-icon-dark" style="display:none;"><svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path></svg></span>
|
||||
</button>
|
||||
|
||||
<!-- User Avatar Dropdown -->
|
||||
<div class="user-dropdown-wrap" id="user-dropdown-wrap">
|
||||
<!-- Avatar with notification badge -->
|
||||
<div style="position:relative; display:inline-flex;">
|
||||
<button class="user-avatar-btn" id="user-avatar-btn" onclick="toggleUserDropdown()" title="<?= htmlspecialchars($current_user['username']) ?>">
|
||||
<?php
|
||||
try { $pdo->exec("ALTER TABLE users ADD COLUMN profile_pic TEXT DEFAULT NULL"); } catch(Exception $e) {}
|
||||
$pic_top = $current_user['profile_pic'] ?? null;
|
||||
?>
|
||||
<?php if($pic_top && file_exists($pic_top)): ?>
|
||||
<img src="<?= htmlspecialchars($pic_top) ?>?v=<?= time() ?>" alt="avatar" style="width:100%; height:100%; object-fit:cover; border-radius:50%;">
|
||||
<?php else: ?>
|
||||
<?= strtoupper(mb_substr($current_user['username'],0,1)) ?>
|
||||
<?php endif; ?>
|
||||
</button>
|
||||
<?php if($unread_notifications > 0): ?>
|
||||
<span class="avatar-notif-badge" onclick="openNotifications()"><?= $unread_notifications > 9 ? '9+' : $unread_notifications ?></span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<div class="user-dropdown-menu" id="user-dropdown-menu">
|
||||
<div class="user-dropdown-header">
|
||||
<div class="user-dropdown-name"><?= htmlspecialchars($current_user['username']) ?></div>
|
||||
<?php if(!empty($_SESSION['is_admin'])): ?>
|
||||
<div class="user-dropdown-role">Administrator</div>
|
||||
<?php else: ?>
|
||||
<div class="user-dropdown-role">Member</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<div class="user-dropdown-divider"></div>
|
||||
<button class="user-dropdown-item" onclick="openNotifications()">
|
||||
<i class="fa fa-bell"></i>
|
||||
Notifications
|
||||
<?php if($unread_notifications > 0): ?>
|
||||
<span class="badge" style="margin-left:auto; font-size:0.65rem;"><?= $unread_notifications ?></span>
|
||||
<?php endif; ?>
|
||||
</button>
|
||||
<div class="user-dropdown-divider"></div>
|
||||
<button class="user-dropdown-item" onclick="document.getElementById('profile-pic-modal').classList.add('active'); closeUserDropdown();">
|
||||
<i class="fa fa-image"></i> Set Profile Picture
|
||||
</button>
|
||||
<button class="user-dropdown-item" onclick="document.getElementById('change-pw-modal').classList.add('active'); closeUserDropdown();">
|
||||
<i class="fa fa-key"></i> Change Password
|
||||
</button>
|
||||
<div class="user-dropdown-divider"></div>
|
||||
<a href="?action=logout" class="user-dropdown-item user-dropdown-logout" onclick="return confirm('Logout?')">
|
||||
<i class="fa fa-right-from-bracket"></i> Logout
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<?php if (isset($pw_msg) && $pw_msg): ?>
|
||||
<script>document.addEventListener('DOMContentLoaded',()=>{ document.getElementById('change-pw-modal').classList.add('active'); });</script>
|
||||
<?php endif; ?>
|
||||
|
||||
478
views/notes.php
478
views/notes.php
@@ -1,35 +1,109 @@
|
||||
|
||||
<?php
|
||||
if($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['create_note'])) {
|
||||
$stmt = $pdo->prepare("INSERT INTO notes (title, content, owner_id) VALUES (?, ?, ?)");
|
||||
$stmt->execute([$_POST['title'], $_POST['content'], $user_id]);
|
||||
}
|
||||
// ── DB migrations ─────────────────────────────────────────────────────────────
|
||||
try { $pdo->exec("ALTER TABLE notes ADD COLUMN color TEXT DEFAULT NULL"); } catch(Exception $e) {}
|
||||
try { $pdo->exec("ALTER TABLE notes ADD COLUMN image_path TEXT DEFAULT NULL"); } catch(Exception $e) {}
|
||||
try { $pdo->exec("ALTER TABLE notes ADD COLUMN updated_at DATETIME DEFAULT NULL"); } catch(Exception $e) {}
|
||||
try {
|
||||
$pdo->exec("CREATE TABLE IF NOT EXISTS notes (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
title TEXT,
|
||||
content TEXT,
|
||||
owner_id INTEGER,
|
||||
color TEXT DEFAULT NULL,
|
||||
image_path TEXT DEFAULT NULL,
|
||||
created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
|
||||
updated_at DATETIME DEFAULT NULL,
|
||||
FOREIGN KEY (owner_id) REFERENCES users(id) ON DELETE CASCADE
|
||||
)");
|
||||
} catch(Exception $e) {}
|
||||
try {
|
||||
$pdo->exec("CREATE TABLE IF NOT EXISTS note_shares (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
note_id INTEGER,
|
||||
share_type TEXT,
|
||||
share_id INTEGER,
|
||||
FOREIGN KEY (note_id) REFERENCES notes(id) ON DELETE CASCADE
|
||||
)");
|
||||
} catch(Exception $e) {}
|
||||
|
||||
if($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['share_note'])) {
|
||||
// ── Handle POST ───────────────────────────────────────────────────────────────
|
||||
if($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||
|
||||
if(isset($_POST['create_note'])) {
|
||||
$image_path = null;
|
||||
if(isset($_FILES['note_image']) && $_FILES['note_image']['error'] === 0) {
|
||||
$allowed = ['image/jpeg','image/png','image/gif','image/webp'];
|
||||
if(in_array($_FILES['note_image']['type'], $allowed)) {
|
||||
$ext = pathinfo($_FILES['note_image']['name'], PATHINFO_EXTENSION);
|
||||
$fname = 'note_' . $user_id . '_' . time() . '.' . $ext;
|
||||
$dest = 'uploads/' . $fname;
|
||||
if(move_uploaded_file($_FILES['note_image']['tmp_name'], $dest)) $image_path = $dest;
|
||||
}
|
||||
}
|
||||
$stmt = $pdo->prepare("INSERT INTO notes (title, content, owner_id, color, image_path) VALUES (?, ?, ?, ?, ?)");
|
||||
$stmt->execute([$_POST['title'] ?? 'Untitled', $_POST['content'], $user_id, $_POST['color'] ?? null, $image_path]);
|
||||
}
|
||||
|
||||
if(isset($_POST['update_note'])) {
|
||||
$n = query("SELECT owner_id, image_path FROM notes WHERE id=?", [$_POST['note_id']])->fetch();
|
||||
if($n && $n['owner_id'] == $user_id) {
|
||||
$image_path = $n['image_path'];
|
||||
if(isset($_FILES['note_image']) && $_FILES['note_image']['error'] === 0) {
|
||||
$allowed = ['image/jpeg','image/png','image/gif','image/webp'];
|
||||
if(in_array($_FILES['note_image']['type'], $allowed)) {
|
||||
$ext = pathinfo($_FILES['note_image']['name'], PATHINFO_EXTENSION);
|
||||
$fname = 'note_' . $user_id . '_' . time() . '.' . $ext;
|
||||
$dest = 'uploads/' . $fname;
|
||||
if(move_uploaded_file($_FILES['note_image']['tmp_name'], $dest)) {
|
||||
if($image_path && file_exists($image_path)) @unlink($image_path);
|
||||
$image_path = $dest;
|
||||
}
|
||||
}
|
||||
}
|
||||
if(isset($_POST['remove_image']) && $_POST['remove_image']) {
|
||||
if($image_path && file_exists($image_path)) @unlink($image_path);
|
||||
$image_path = null;
|
||||
}
|
||||
$stmt = $pdo->prepare("UPDATE notes SET title=?, content=?, color=?, image_path=?, updated_at=CURRENT_TIMESTAMP WHERE id=? AND owner_id=?");
|
||||
$stmt->execute([$_POST['title'] ?? 'Untitled', $_POST['content'], $_POST['color'] ?? null, $image_path, $_POST['note_id'], $user_id]);
|
||||
}
|
||||
}
|
||||
|
||||
if(isset($_POST['delete_note'])) {
|
||||
$n = query("SELECT owner_id, image_path FROM notes WHERE id=?", [$_POST['note_id']])->fetch();
|
||||
if($n && $n['owner_id'] == $user_id) {
|
||||
if($n['image_path'] && file_exists($n['image_path'])) @unlink($n['image_path']);
|
||||
query("DELETE FROM notes WHERE id=? AND owner_id=?", [$_POST['note_id'], $user_id]);
|
||||
}
|
||||
}
|
||||
|
||||
if(isset($_POST['share_note'])) {
|
||||
$n_id = $_POST['note_id'];
|
||||
$share = $_POST['share_target']; // 'user_1'
|
||||
$parts = explode('_', $share);
|
||||
|
||||
$share = $_POST['share_target'];
|
||||
$parts = explode('_', $share, 2);
|
||||
if(count($parts)===2) {
|
||||
$stmt = $pdo->prepare("INSERT INTO note_shares (note_id, share_type, share_id) VALUES (?, ?, ?)");
|
||||
$stmt->execute([$n_id, $parts[0], $parts[1]]);
|
||||
|
||||
$n = query("SELECT title FROM notes WHERE id=?", [$n_id])->fetch();
|
||||
$msg = "A note '{$n['title']}' has been shared with you.";
|
||||
if($parts[0] === 'user') notify_user($parts[1], $msg);
|
||||
else notify_group($parts[1], $msg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fetch Notes
|
||||
// ── Fetch Notes ───────────────────────────────────────────────────────────────
|
||||
$user_groups = get_user_groups($user_id);
|
||||
$my_group_ids = array_column($user_groups, 'id');
|
||||
$group_in = implode(',', array_fill(0, count($my_group_ids), '?')) ?: '0';
|
||||
|
||||
$sql = "SELECT n.*, (n.owner_id = ?) as is_mine FROM notes n
|
||||
$sql = "SELECT n.*, (n.owner_id = ?) as is_mine, u.username as owner_name FROM notes n
|
||||
LEFT JOIN note_shares ns ON n.id = ns.note_id
|
||||
LEFT JOIN users u ON n.owner_id = u.id
|
||||
WHERE n.owner_id = ?
|
||||
OR (ns.share_type='user' AND ns.share_id = ?)
|
||||
OR (ns.share_type='group' AND ns.share_id IN ($group_in))
|
||||
GROUP BY n.id ORDER BY n.created_at DESC";
|
||||
GROUP BY n.id ORDER BY n.updated_at DESC, n.created_at DESC";
|
||||
$params = array_merge([$user_id, $user_id, $user_id], $my_group_ids);
|
||||
$stmt = $pdo->prepare($sql);
|
||||
$stmt->execute($params);
|
||||
@@ -37,47 +111,361 @@ $notes = $stmt->fetchAll();
|
||||
|
||||
$all_users = query("SELECT id, username FROM users WHERE id != ?", [$user_id])->fetchAll();
|
||||
$all_groups = query("SELECT * FROM groups")->fetchAll();
|
||||
|
||||
// Define note colors — Google Keep inspired
|
||||
$note_colors = [
|
||||
'' => ['bg'=>'var(--surface)', 'label'=>'Default', 'hex'=>'#ffffff'],
|
||||
'#fff9c4' => ['bg'=>'#fff9c4', 'label'=>'Yellow', 'hex'=>'#fff9c4'],
|
||||
'#ccff90' => ['bg'=>'#ccff90', 'label'=>'Lime', 'hex'=>'#ccff90'],
|
||||
'#d4edda' => ['bg'=>'#d4edda', 'label'=>'Sage', 'hex'=>'#d4edda'],
|
||||
'#80cbc4' => ['bg'=>'#80cbc4', 'label'=>'Teal', 'hex'=>'#80cbc4'],
|
||||
'#b3e5fc' => ['bg'=>'#b3e5fc', 'label'=>'Sky', 'hex'=>'#b3e5fc'],
|
||||
'#cce5ff' => ['bg'=>'#cce5ff', 'label'=>'Blue', 'hex'=>'#cce5ff'],
|
||||
'#e2d9f3' => ['bg'=>'#e2d9f3', 'label'=>'Lavender', 'hex'=>'#e2d9f3'],
|
||||
'#f8d7da' => ['bg'=>'#f8d7da', 'label'=>'Rose', 'hex'=>'#f8d7da'],
|
||||
'#ef9a9a' => ['bg'=>'#ef9a9a', 'label'=>'Red', 'hex'=>'#ef9a9a'],
|
||||
'#ffcc80' => ['bg'=>'#ffcc80', 'label'=>'Peach', 'hex'=>'#ffcc80'],
|
||||
'#fde8d8' => ['bg'=>'#fde8d8', 'label'=>'Orange', 'hex'=>'#fde8d8'],
|
||||
'#d7ccc8' => ['bg'=>'#d7ccc8', 'label'=>'Sand', 'hex'=>'#d7ccc8'],
|
||||
];
|
||||
?>
|
||||
<div class="header">
|
||||
<h1>Markdown Notes</h1>
|
||||
|
||||
<div style="display:flex; justify-content:flex-end; align-items:center; margin-bottom:1rem;">
|
||||
<button class="btn" onclick="document.getElementById('new-note-modal').classList.add('active')">
|
||||
<i class="fa fa-plus"></i> New Note
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- ── New Note Modal ─────────────────────────────────────────────────────── -->
|
||||
<div class="modal-overlay" id="new-note-modal">
|
||||
<div class="modal-content" style="max-width:580px; max-height:92vh; overflow-y:auto; padding:1.5rem;">
|
||||
<div style="display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem;">
|
||||
<h3 style="font-size:1rem; font-weight:700;">New Note</h3>
|
||||
<button type="button" style="background:none;border:none;color:var(--text-light);cursor:pointer;font-size:1.2rem;" onclick="document.getElementById('new-note-modal').classList.remove('active')">×</button>
|
||||
</div>
|
||||
<form method="POST" enctype="multipart/form-data" id="new-note-form">
|
||||
<input type="hidden" name="create_note" value="1">
|
||||
<div class="form-group">
|
||||
<input type="text" name="title" class="form-control" placeholder="Title..." id="new-note-title" style="font-weight:600; font-size:1rem;">
|
||||
</div>
|
||||
<!-- WYSIWYG Toolbar -->
|
||||
<div class="note-editor-toolbar" id="new-note-toolbar">
|
||||
<button type="button" class="note-toolbar-btn" onclick="formatNote('new-note-content','bold')" title="Bold"><b>B</b></button>
|
||||
<button type="button" class="note-toolbar-btn" onclick="formatNote('new-note-content','italic')" title="Italic"><i>I</i></button>
|
||||
<button type="button" class="note-toolbar-btn" onclick="insertMarkdown('new-note-content','# ')" title="H1">H1</button>
|
||||
<button type="button" class="note-toolbar-btn" onclick="insertMarkdown('new-note-content','## ')" title="H2">H2</button>
|
||||
<button type="button" class="note-toolbar-btn" onclick="insertMarkdown('new-note-content','### ')" title="H3">H3</button>
|
||||
<button type="button" class="note-toolbar-btn" onclick="insertMarkdown('new-note-content','- ')" title="Bullet">• List</button>
|
||||
<button type="button" class="note-toolbar-btn" onclick="insertMarkdown('new-note-content','1. ')" title="Numbered">1. List</button>
|
||||
<button type="button" class="note-toolbar-btn" onclick="insertMarkdown('new-note-content','- [ ] ')" title="Todo">☑ Todo</button>
|
||||
<button type="button" class="note-toolbar-btn" onclick="wrapMarkdown('new-note-content','`','`')" title="Code"><code>Code</code></button>
|
||||
<button type="button" class="note-toolbar-btn" onclick="wrapMarkdown('new-note-content','```\n','\n```')" title="Code Block">{ } Block</button>
|
||||
<button type="button" class="note-toolbar-btn" onclick="insertMarkdown('new-note-content','> ')" title="Quote">❝ Quote</button>
|
||||
<button type="button" class="note-toolbar-btn" onclick="insertMarkdown('new-note-content','---\n')" title="Divider">─ Line</button>
|
||||
<button type="button" class="note-toolbar-btn" id="new-preview-btn" onclick="togglePreview('new-note-content','new-note-preview','new-preview-btn')">👁 Preview</button>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea name="content" id="new-note-content" class="note-content-area" placeholder="Write your note... (Markdown supported)" rows="8"></textarea>
|
||||
<div id="new-note-preview" class="markdown-body" style="display:none; min-height:160px; border:1px solid var(--border); border-radius:0.5rem; padding:0.75rem; background:var(--bg); font-size:0.9rem;"></div>
|
||||
</div>
|
||||
<!-- Color picker -->
|
||||
<div class="form-group">
|
||||
<label style="font-size:0.8rem; color:var(--text-light);">Note Color</label>
|
||||
<div class="note-color-palette" id="new-note-colors">
|
||||
<?php foreach($note_colors as $hex => $info): ?>
|
||||
<div class="color-swatch <?= !$hex ? 'selected' : '' ?>"
|
||||
style="background:<?= $hex ?: '#fff' ?>; border:2px solid var(--border);"
|
||||
onclick="selectColor(this,'new-note-color-input','<?= $hex ?>')"
|
||||
title="<?= $info['label'] ?>"></div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<input type="hidden" name="color" id="new-note-color-input" value="">
|
||||
</div>
|
||||
<!-- Image upload -->
|
||||
<div class="form-group">
|
||||
<label style="font-size:0.8rem; color:var(--text-light);">Attach Image (optional)</label>
|
||||
<input type="file" name="note_image" accept="image/*" class="form-control">
|
||||
</div>
|
||||
<div style="display:flex; gap:0.5rem; justify-content:flex-end; margin-top:1rem;">
|
||||
<button type="button" class="btn btn-secondary" onclick="document.getElementById('new-note-modal').classList.remove('active')">Cancel</button>
|
||||
<button type="submit" class="btn"><i class="fa fa-save"></i> Save Note</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Edit Note Modal ────────────────────────────────────────────────────── -->
|
||||
<div class="modal-overlay" id="edit-note-modal">
|
||||
<div class="modal-content" style="max-width:600px; max-height:90vh; overflow-y:auto;">
|
||||
<h3 style="margin-bottom:1rem;">Edit Note</h3>
|
||||
<form method="POST" enctype="multipart/form-data" id="edit-note-form">
|
||||
<input type="hidden" name="update_note" value="1">
|
||||
<input type="hidden" name="note_id" id="edit-note-id">
|
||||
<div class="form-group">
|
||||
<input type="text" name="title" id="edit-note-title" class="form-control" placeholder="Title..." style="font-weight:600; font-size:1rem;">
|
||||
</div>
|
||||
<div class="note-editor-toolbar">
|
||||
<button type="button" class="note-toolbar-btn" onclick="formatNote('edit-note-content','bold')"><b>B</b></button>
|
||||
<button type="button" class="note-toolbar-btn" onclick="formatNote('edit-note-content','italic')"><i>I</i></button>
|
||||
<button type="button" class="note-toolbar-btn" onclick="insertMarkdown('edit-note-content','# ')">H1</button>
|
||||
<button type="button" class="note-toolbar-btn" onclick="insertMarkdown('edit-note-content','## ')">H2</button>
|
||||
<button type="button" class="note-toolbar-btn" onclick="insertMarkdown('edit-note-content','### ')">H3</button>
|
||||
<button type="button" class="note-toolbar-btn" onclick="insertMarkdown('edit-note-content','- ')">• List</button>
|
||||
<button type="button" class="note-toolbar-btn" onclick="insertMarkdown('edit-note-content','1. ')">1. List</button>
|
||||
<button type="button" class="note-toolbar-btn" onclick="insertMarkdown('edit-note-content','- [ ] ')">☑ Todo</button>
|
||||
<button type="button" class="note-toolbar-btn" onclick="wrapMarkdown('edit-note-content','`','`')"><code>Code</code></button>
|
||||
<button type="button" class="note-toolbar-btn" onclick="wrapMarkdown('edit-note-content','```\n','\n```')">{ } Block</button>
|
||||
<button type="button" class="note-toolbar-btn" onclick="insertMarkdown('edit-note-content','> ')">❝ Quote</button>
|
||||
<button type="button" class="note-toolbar-btn" id="edit-preview-btn" onclick="togglePreview('edit-note-content','edit-note-preview','edit-preview-btn')">👁 Preview</button>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<textarea name="content" id="edit-note-content" class="note-content-area" rows="8"></textarea>
|
||||
<div id="edit-note-preview" class="markdown-body" style="display:none; min-height:160px; border:1px solid var(--border); border-radius:0.5rem; padding:0.75rem; background:var(--bg); font-size:0.9rem;"></div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label style="font-size:0.8rem; color:var(--text-light);">Note Color</label>
|
||||
<div class="note-color-palette" id="edit-note-colors">
|
||||
<?php foreach($note_colors as $hex => $info): ?>
|
||||
<div class="color-swatch"
|
||||
style="background:<?= $hex ?: '#fff' ?>; border:2px solid var(--border);"
|
||||
onclick="selectColor(this,'edit-note-color-input','<?= $hex ?>')"
|
||||
title="<?= $info['label'] ?>"></div>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
<input type="hidden" name="color" id="edit-note-color-input" value="">
|
||||
</div>
|
||||
<div id="edit-current-image" style="display:none; margin-bottom:0.75rem;">
|
||||
<label style="font-size:0.8rem; color:var(--text-light);">Current Image:</label>
|
||||
<div style="display:flex; align-items:center; gap:0.5rem; margin-top:0.25rem;">
|
||||
<img id="edit-current-img-preview" src="" alt="Current" style="height:60px; border-radius:0.5rem; object-fit:cover;">
|
||||
<label style="display:flex; align-items:center; gap:0.25rem; font-size:0.8rem; cursor:pointer;">
|
||||
<input type="checkbox" name="remove_image" value="1"> Remove image
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label style="font-size:0.8rem; color:var(--text-light);">Replace Image (optional)</label>
|
||||
<input type="file" name="note_image" accept="image/*" class="form-control">
|
||||
</div>
|
||||
|
||||
<!-- Share section (only for owner) -->
|
||||
<div id="edit-share-section" style="border-top:1px solid var(--border); padding-top:0.75rem; margin-top:0.5rem;">
|
||||
<label style="font-size:0.8rem; color:var(--text-light); margin-bottom:0.4rem; display:block;">Share this note</label>
|
||||
<div style="display:flex; gap:0.5rem; flex-wrap:wrap;">
|
||||
<select name="share_target" id="edit-share-target" class="form-control" style="flex:1; min-width:150px; padding:0.4rem;">
|
||||
<?php foreach($all_users as $u): ?>
|
||||
<option value="user_<?= $u['id'] ?>">👤 <?= htmlspecialchars($u['username']) ?></option>
|
||||
<?php endforeach; ?>
|
||||
<?php foreach($all_groups as $g): ?>
|
||||
<option value="group_<?= $g['id'] ?>">👥 <?= htmlspecialchars($g['name']) ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
<button type="submit" name="share_note" value="1" class="btn btn-sm" onclick="this.form.action=''; document.querySelector('[name=update_note]').disabled=true; this.form.onsubmit=null;" formaction="">
|
||||
<i class="fa fa-share-nodes"></i> Share
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex; gap:0.5rem; justify-content:space-between; margin-top:1rem; flex-wrap:wrap;">
|
||||
<button type="button" class="btn btn-danger btn-sm" onclick="deleteNote(document.getElementById('edit-note-id').value)"><i class="fa fa-trash"></i> Delete</button>
|
||||
<div style="display:flex; gap:0.5rem;">
|
||||
<button type="button" class="btn btn-secondary" onclick="document.getElementById('edit-note-modal').classList.remove('active')">Cancel</button>
|
||||
<button type="submit" class="btn"><i class="fa fa-save"></i> Save Changes</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Note Form -->
|
||||
<form method="POST" id="delete-note-form" style="display:none;">
|
||||
<input type="hidden" name="delete_note" value="1">
|
||||
<input type="hidden" name="note_id" id="delete-note-id">
|
||||
</form>
|
||||
|
||||
<!-- Share Note Form (separate POST for share_note) -->
|
||||
<form method="POST" id="share-note-standalone-form" style="display:none;">
|
||||
<input type="hidden" name="share_note" value="1">
|
||||
<input type="hidden" name="note_id" id="share-note-standalone-id">
|
||||
<input type="hidden" name="share_target" id="share-note-standalone-target">
|
||||
</form>
|
||||
|
||||
<!-- Markdown Libs -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||||
|
||||
<div style="display:grid; grid-template-columns: 1fr 2fr; gap:1.5rem;">
|
||||
<div class="card">
|
||||
<h3>Create Note</h3>
|
||||
<form method="POST" style="margin-top:1rem;">
|
||||
<div class="form-group"><input type="text" name="title" class="form-control" placeholder="Note Title" required></div>
|
||||
<div class="form-group">
|
||||
<textarea name="content" class="form-control" placeholder="Markdown supported..." style="min-height:200px;" required></textarea>
|
||||
<!-- ── Notes Grid ─────────────────────────────────────────────────────────── -->
|
||||
<?php if(empty($notes)): ?>
|
||||
<div style="text-align:center; padding:4rem 2rem; color:var(--text-light);">
|
||||
<div style="font-size:3rem; margin-bottom:1rem;">📝</div>
|
||||
<h3 style="margin-bottom:0.5rem;">No notes yet</h3>
|
||||
<p>Click <strong>New Note</strong> to start writing something.</p>
|
||||
</div>
|
||||
<button type="submit" name="create_note" class="btn">Save Note</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>My Notes</h3>
|
||||
<?php foreach($notes as $n): ?>
|
||||
<div style="border:1px solid var(--border); border-radius:1rem; padding:1.5rem; margin-bottom:1.5rem;">
|
||||
<div style="display:flex; justify-content:space-between; margin-bottom:1rem;">
|
||||
<h4 style="font-size:1.2rem; color:var(--primary);"><?= htmlspecialchars($n['title']) ?> <?= !$n['is_mine'] ? '<span class="badge" style="background:#10B981; font-size:10px;">Shared</span>' : '' ?></h4>
|
||||
<?php if($n['is_mine']): ?>
|
||||
<form method="POST" style="display:inline; display:flex; gap:0.5rem;">
|
||||
<input type="hidden" name="note_id" value="<?= $n['id'] ?>">
|
||||
<select name="share_target" class="form-control" style="width:auto; padding:0.25rem;">
|
||||
<?php foreach($all_users as $u): ?><option value="user_<?= $u['id'] ?>">User: <?= htmlspecialchars($u['username']) ?></option><?php endforeach; ?>
|
||||
<?php foreach($all_groups as $g): ?><option value="group_<?= $g['id'] ?>">Group: <?= htmlspecialchars($g['name']) ?></option><?php endforeach; ?>
|
||||
</select>
|
||||
<button type="submit" name="share_note" class="btn btn-sm">Share</button>
|
||||
</form>
|
||||
<?php else: ?>
|
||||
<div class="notes-grid">
|
||||
<?php foreach($notes as $n):
|
||||
$bg = $n['color'] ?: 'var(--surface)';
|
||||
$preview = strip_tags(isset($n['content']) ? (function_exists('marked') ? $n['content'] : $n['content']) : '');
|
||||
$preview = mb_substr($preview, 0, 120) . (mb_strlen($preview) > 120 ? '...' : '');
|
||||
?>
|
||||
<div class="note-card"
|
||||
style="background:<?= htmlspecialchars($bg) ?>;"
|
||||
data-id="<?= $n['id'] ?>"
|
||||
data-title="<?= htmlspecialchars(addslashes((string)$n['title'])) ?>"
|
||||
data-content="<?= htmlspecialchars(addslashes((string)$n['content'])) ?>"
|
||||
data-color="<?= htmlspecialchars((string)$n['color']) ?>"
|
||||
data-image="<?= htmlspecialchars((string)($n['image_path'] ?? '')) ?>"
|
||||
data-mine="<?= $n['is_mine'] ?>"
|
||||
onclick="openNote(this)">
|
||||
<?php if($n['image_path'] && file_exists($n['image_path'])): ?>
|
||||
<img src="<?= htmlspecialchars($n['image_path']) ?>" alt="Note image" class="note-card-img">
|
||||
<?php endif; ?>
|
||||
<?php if($n['title']): ?>
|
||||
<div class="note-card-title"><?= htmlspecialchars($n['title']) ?></div>
|
||||
<?php endif; ?>
|
||||
<div class="note-card-preview"><?= htmlspecialchars($preview) ?></div>
|
||||
<div class="note-card-footer">
|
||||
<div style="display:flex; align-items:center; gap:0.4rem;">
|
||||
<?php if($n['color']): ?><div class="note-color-dot" style="background:<?= htmlspecialchars($n['color']) ?>;"></div><?php endif; ?>
|
||||
<span style="font-size:0.7rem; color:var(--text-light);"><?= date('M j', strtotime($n['updated_at'] ?: $n['created_at'])) ?></span>
|
||||
<?php if(!$n['is_mine']): ?>
|
||||
<span class="note-card-shared-badge">Shared</span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<div class="note-card-actions" onclick="event.stopPropagation()">
|
||||
<?php if($n['is_mine']): ?>
|
||||
<button class="btn btn-sm btn-danger" style="padding:3px 7px;" onclick="deleteNote(<?= $n['id'] ?>)" title="Delete"><i class="fa fa-trash"></i></button>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<div class="markdown-body" style="background:var(--bg); padding:1rem; border-radius:0.5rem; font-size:0.95rem;">
|
||||
<script>document.write(marked.parse(`<?= str_replace(array('\\', '`', '$'), array('\\\\', '\\`', '\\$'), (string)$n['content']) ?>`));</script>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
<?php if(!$notes): ?><p>No notes written yet.</p><?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
|
||||
<script>
|
||||
// ── WYSIWYG Markdown Tools ────────────────────────────────────────────────────
|
||||
function formatNote(textareaId, cmd) {
|
||||
const ta = document.getElementById(textareaId);
|
||||
const start = ta.selectionStart, end = ta.selectionEnd;
|
||||
const sel = ta.value.substring(start, end);
|
||||
let wrap = cmd === 'bold' ? '**' : '_';
|
||||
const replacement = `${wrap}${sel || 'text'}${wrap}`;
|
||||
ta.value = ta.value.substring(0, start) + replacement + ta.value.substring(end);
|
||||
ta.focus();
|
||||
ta.selectionStart = start + wrap.length;
|
||||
ta.selectionEnd = start + wrap.length + (sel || 'text').length;
|
||||
}
|
||||
|
||||
function insertMarkdown(textareaId, prefix) {
|
||||
const ta = document.getElementById(textareaId);
|
||||
const start = ta.selectionStart;
|
||||
// Go to start of line
|
||||
const before = ta.value.substring(0, start);
|
||||
const lineStart = before.lastIndexOf('\n') + 1;
|
||||
ta.value = ta.value.substring(0, lineStart) + prefix + ta.value.substring(lineStart);
|
||||
ta.focus();
|
||||
const newPos = lineStart + prefix.length + (start - lineStart);
|
||||
ta.selectionStart = ta.selectionEnd = newPos;
|
||||
}
|
||||
|
||||
function wrapMarkdown(textareaId, before, after) {
|
||||
const ta = document.getElementById(textareaId);
|
||||
const start = ta.selectionStart, end = ta.selectionEnd;
|
||||
const sel = ta.value.substring(start, end);
|
||||
ta.value = ta.value.substring(0, start) + before + (sel || 'code') + after + ta.value.substring(end);
|
||||
ta.focus();
|
||||
}
|
||||
|
||||
function togglePreview(contentId, previewId, btnId) {
|
||||
const content = document.getElementById(contentId);
|
||||
const preview = document.getElementById(previewId);
|
||||
const btn = document.getElementById(btnId);
|
||||
if(preview.style.display === 'none') {
|
||||
preview.innerHTML = marked.parse(content.value || '');
|
||||
preview.style.display = 'block';
|
||||
content.style.display = 'none';
|
||||
btn.textContent = '✏️ Edit';
|
||||
} else {
|
||||
preview.style.display = 'none';
|
||||
content.style.display = 'block';
|
||||
btn.textContent = '👁 Preview';
|
||||
}
|
||||
}
|
||||
|
||||
function selectColor(el, inputId, color) {
|
||||
el.closest('.note-color-palette').querySelectorAll('.color-swatch').forEach(s => s.classList.remove('selected'));
|
||||
el.classList.add('selected');
|
||||
document.getElementById(inputId).value = color;
|
||||
}
|
||||
|
||||
function openNote(card) {
|
||||
const id = card.dataset.id;
|
||||
const title = card.dataset.title;
|
||||
const content = card.dataset.content;
|
||||
const color = card.dataset.color;
|
||||
const image = card.dataset.image;
|
||||
const isMine = card.dataset.mine === '1';
|
||||
|
||||
document.getElementById('edit-note-id').value = id;
|
||||
document.getElementById('edit-note-title').value = title;
|
||||
document.getElementById('edit-note-content').value = content;
|
||||
document.getElementById('edit-note-color-input').value = color;
|
||||
document.getElementById('edit-note-preview').style.display = 'none';
|
||||
document.getElementById('edit-note-content').style.display = 'block';
|
||||
document.getElementById('edit-preview-btn').textContent = '👁 Preview';
|
||||
|
||||
// Color swatches
|
||||
document.querySelectorAll('#edit-note-colors .color-swatch').forEach(s => {
|
||||
s.classList.remove('selected');
|
||||
const swatchColor = s.getAttribute('onclick').match(/'([^']*)'/g);
|
||||
if(swatchColor && swatchColor[1] && swatchColor[1].replace(/'/g,'') === color) s.classList.add('selected');
|
||||
if(!color && s.title === 'Default') s.classList.add('selected');
|
||||
});
|
||||
|
||||
// Image preview
|
||||
const imgBlock = document.getElementById('edit-current-image');
|
||||
if(image) {
|
||||
imgBlock.style.display = 'block';
|
||||
document.getElementById('edit-current-img-preview').src = image;
|
||||
} else {
|
||||
imgBlock.style.display = 'none';
|
||||
}
|
||||
|
||||
// Share section
|
||||
document.getElementById('edit-share-section').style.display = isMine ? 'block' : 'none';
|
||||
|
||||
// Wire up share button
|
||||
const shareBtn = document.querySelector('#edit-note-form button[name="share_note"]');
|
||||
if(shareBtn) {
|
||||
shareBtn.onclick = (e) => {
|
||||
e.preventDefault();
|
||||
const target = document.getElementById('edit-share-target').value;
|
||||
document.getElementById('share-note-standalone-id').value = id;
|
||||
document.getElementById('share-note-standalone-target').value = target;
|
||||
document.getElementById('share-note-standalone-form').submit();
|
||||
};
|
||||
}
|
||||
|
||||
document.getElementById('edit-note-modal').classList.add('active');
|
||||
}
|
||||
|
||||
function deleteNote(id) {
|
||||
if(!confirm('Delete this note permanently?')) return;
|
||||
document.getElementById('delete-note-id').value = id;
|
||||
document.getElementById('delete-note-form').submit();
|
||||
}
|
||||
|
||||
// Fix note card colors in dark mode
|
||||
function applyDarkNoteColors() {
|
||||
const isDark = document.body.classList.contains('dark-mode');
|
||||
document.querySelectorAll('.note-card').forEach(card => {
|
||||
const origColor = card.dataset.color;
|
||||
if(!origColor && isDark) {
|
||||
card.style.background = 'var(--surface)';
|
||||
}
|
||||
});
|
||||
}
|
||||
const observer = new MutationObserver(applyDarkNoteColors);
|
||||
observer.observe(document.body, {attributes: true, attributeFilter: ['class']});
|
||||
applyDarkNoteColors();
|
||||
</script>
|
||||
|
||||
@@ -1,26 +1,68 @@
|
||||
|
||||
<?php
|
||||
if($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['create_password'])) {
|
||||
$stmt = $pdo->prepare("INSERT INTO passwords (title, username, password, url, notes, owner_id) VALUES (?, ?, ?, ?, ?, ?)");
|
||||
$stmt->execute([$_POST['title'], $_POST['username'], $_POST['password'], $_POST['url'], $_POST['notes'], $user_id]);
|
||||
}
|
||||
// ── DB migrations ─────────────────────────────────────────────────────────────
|
||||
try { $pdo->exec("ALTER TABLE passwords ADD COLUMN folder_id INTEGER DEFAULT NULL"); } catch(Exception $e) {}
|
||||
try {
|
||||
$pdo->exec("CREATE TABLE IF NOT EXISTS password_folders (
|
||||
id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||||
name TEXT NOT NULL,
|
||||
owner_id INTEGER,
|
||||
FOREIGN KEY (owner_id) REFERENCES users(id) ON DELETE CASCADE
|
||||
)");
|
||||
} catch(Exception $e) {}
|
||||
|
||||
if($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['bulk_action'])) {
|
||||
if(isset($_POST['selected_passwords'])) {
|
||||
// ── Handle POST ───────────────────────────────────────────────────────────────
|
||||
if($_SERVER['REQUEST_METHOD'] === 'POST') {
|
||||
|
||||
if(isset($_POST['create_folder'])) {
|
||||
$stmt = $pdo->prepare("INSERT INTO password_folders (name, owner_id) VALUES (?, ?)");
|
||||
$stmt->execute([$_POST['folder_name'], $user_id]);
|
||||
}
|
||||
|
||||
if(isset($_POST['delete_folder'])) {
|
||||
// Move items to no folder
|
||||
$pdo->prepare("UPDATE passwords SET folder_id=NULL WHERE folder_id=? AND owner_id=?")->execute([$_POST['folder_id'], $user_id]);
|
||||
$pdo->prepare("DELETE FROM password_folders WHERE id=? AND owner_id=?")->execute([$_POST['folder_id'], $user_id]);
|
||||
}
|
||||
|
||||
if(isset($_POST['create_password'])) {
|
||||
$stmt = $pdo->prepare("INSERT INTO passwords (title, username, password, url, notes, owner_id, folder_id) VALUES (?, ?, ?, ?, ?, ?, ?)");
|
||||
$stmt->execute([$_POST['title'], $_POST['username'], $_POST['password'], $_POST['url'], $_POST['notes'], $user_id, $_POST['folder_id'] ?: null]);
|
||||
}
|
||||
|
||||
if(isset($_POST['update_password'])) {
|
||||
$p = query("SELECT owner_id FROM passwords WHERE id=?", [$_POST['password_id']])->fetch();
|
||||
if($p && $p['owner_id'] == $user_id) {
|
||||
$stmt = $pdo->prepare("UPDATE passwords SET title=?, username=?, password=?, url=?, notes=?, folder_id=? WHERE id=? AND owner_id=?");
|
||||
$stmt->execute([$_POST['title'], $_POST['username'], $_POST['password'], $_POST['url'], $_POST['notes'], $_POST['folder_id'] ?: null, $_POST['password_id'], $user_id]);
|
||||
}
|
||||
}
|
||||
|
||||
if(isset($_POST['delete_password'])) {
|
||||
$p = query("SELECT owner_id FROM passwords WHERE id=?", [$_POST['password_id']])->fetch();
|
||||
if($p && $p['owner_id'] == $user_id) {
|
||||
query("DELETE FROM passwords WHERE id=? AND owner_id=?", [$_POST['password_id'], $user_id]);
|
||||
}
|
||||
}
|
||||
|
||||
// Unshare a specific share record
|
||||
if(isset($_POST['remove_password_share'])) {
|
||||
$share_id = (int)$_POST['share_id'];
|
||||
$chk = query("SELECT ps.id FROM password_shares ps JOIN passwords p ON ps.password_id=p.id WHERE ps.id=? AND p.owner_id=?", [$share_id, $user_id])->fetch();
|
||||
if($chk) query("DELETE FROM password_shares WHERE id=?", [$share_id]);
|
||||
}
|
||||
|
||||
if(isset($_POST['bulk_action']) && isset($_POST['selected_passwords'])) {
|
||||
$selected = $_POST['selected_passwords'];
|
||||
$action = $_POST['bulk_action'];
|
||||
|
||||
if($action === 'delete') {
|
||||
foreach($selected as $p_id) {
|
||||
// Check if owner
|
||||
$p = query("SELECT owner_id FROM passwords WHERE id=?", [$p_id])->fetch();
|
||||
if($p && $p['owner_id']==$user_id) {
|
||||
query("DELETE FROM passwords WHERE id=?", [$p_id]);
|
||||
}
|
||||
if($p && $p['owner_id']==$user_id) query("DELETE FROM passwords WHERE id=?", [$p_id]);
|
||||
}
|
||||
} elseif($action === 'share') {
|
||||
$share_target = $_POST['share_target']; // 'user_1'
|
||||
$parts = explode('_', $share_target);
|
||||
$share_target = $_POST['share_target'];
|
||||
$parts = explode('_', $share_target, 2);
|
||||
if(count($parts)===2) {
|
||||
foreach($selected as $p_id) {
|
||||
$p = query("SELECT owner_id, title FROM passwords WHERE id=?", [$p_id])->fetch();
|
||||
if($p && $p['owner_id']==$user_id) {
|
||||
@@ -32,134 +74,500 @@ if($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['bulk_action'])) {
|
||||
}
|
||||
}
|
||||
}
|
||||
} elseif($action === 'move_folder' && isset($_POST['move_folder_target'])) {
|
||||
$fid = $_POST['move_folder_target'] ?: null;
|
||||
foreach($selected as $p_id) {
|
||||
$p = query("SELECT owner_id FROM passwords WHERE id=?", [$p_id])->fetch();
|
||||
if($p && $p['owner_id']==$user_id) {
|
||||
$pdo->prepare("UPDATE passwords SET folder_id=? WHERE id=?")->execute([$fid, $p_id]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fetch passwords (owned + shared)
|
||||
// ── Fetch ─────────────────────────────────────────────────────────────────────
|
||||
$user_groups = get_user_groups($user_id);
|
||||
$my_group_ids = array_column($user_groups, 'id');
|
||||
$group_in = implode(',', array_fill(0, count($my_group_ids), '?')) ?: '0';
|
||||
$params = array_merge([$user_id, $user_id], $my_group_ids);
|
||||
$params = array_merge([$user_id, $user_id, $user_id], $my_group_ids);
|
||||
|
||||
$sql = "SELECT p.*, (p.owner_id = ?) as is_mine FROM passwords p
|
||||
$sql = "SELECT p.*, (p.owner_id = ?) as is_mine, pf.name as folder_name FROM passwords p
|
||||
LEFT JOIN password_shares ps ON p.id = ps.password_id
|
||||
LEFT JOIN password_folders pf ON p.folder_id = pf.id
|
||||
WHERE p.owner_id = ?
|
||||
OR (ps.share_type='user' AND ps.share_id = ?)
|
||||
OR (ps.share_type='group' AND ps.share_id IN ($group_in))
|
||||
GROUP BY p.id ORDER BY p.title";
|
||||
$params = array_merge([$user_id, $user_id, $user_id], $my_group_ids);
|
||||
GROUP BY p.id ORDER BY pf.name ASC, p.title ASC";
|
||||
$stmt = $pdo->prepare($sql);
|
||||
$stmt->execute($params);
|
||||
$passwords = $stmt->fetchAll();
|
||||
|
||||
// Folder list (own folders only)
|
||||
$folders = query("SELECT * FROM password_folders WHERE owner_id=? ORDER BY name", [$user_id])->fetchAll();
|
||||
|
||||
$all_users = query("SELECT id, username FROM users WHERE id != ?", [$user_id])->fetchAll();
|
||||
$all_groups = query("SELECT * FROM groups")->fetchAll();
|
||||
|
||||
// Group passwords by folder
|
||||
$grouped = ['__none__' => []];
|
||||
foreach($folders as $f) $grouped[$f['id']] = [];
|
||||
foreach($passwords as $p) {
|
||||
$fk = $p['folder_id'] ?? '__none__';
|
||||
if(!isset($grouped[$fk])) $grouped[$fk] = [];
|
||||
$grouped[$fk][] = $p;
|
||||
}
|
||||
|
||||
// Active folder filter
|
||||
$active_folder = $_GET['vault_folder'] ?? 'all';
|
||||
?>
|
||||
<div class="header">
|
||||
<h1>Passwords Vault</h1>
|
||||
</div>
|
||||
|
||||
<div class="modal-overlay" id="password-modal">
|
||||
<div class="modal-content">
|
||||
<h3 style="margin-bottom:1rem;">Password View</h3>
|
||||
<input type="text" id="modal-password" class="form-control" readonly style="margin-bottom:1rem; font-family:monospace; font-size:1.1rem;">
|
||||
<div style="display:flex; gap:0.5rem; justify-content:flex-end;">
|
||||
<button type="button" class="btn btn-secondary" onclick="document.getElementById('password-modal').classList.remove('active')">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid; grid-template-columns: 1fr 2fr; gap:1.5rem;">
|
||||
<div class="card">
|
||||
<h3>Add Password</h3>
|
||||
<form method="POST" style="margin-top:1rem;">
|
||||
<div class="form-group"><input type="text" name="title" class="form-control" placeholder="Title/Service" required></div>
|
||||
<div class="form-group"><input type="text" name="username" class="form-control" placeholder="Username"></div>
|
||||
<div class="form-group" style="display:flex; gap:0.5rem;">
|
||||
<input type="password" name="password" id="new_pw" class="form-control" placeholder="Password" required>
|
||||
<button type="button" class="btn btn-secondary" onclick="genPassword()">🎲</button>
|
||||
</div>
|
||||
<div class="form-group"><input type="text" name="url" class="form-control" placeholder="Website URL"></div>
|
||||
<div class="form-group"><textarea name="notes" class="form-control" placeholder="Notes"></textarea></div>
|
||||
<button type="submit" name="create_password" class="btn">Save Password</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h3>My Vault</h3>
|
||||
<form method="POST" id="bulk-form">
|
||||
<div style="display:flex; justify-content:space-between; margin-bottom:1rem;">
|
||||
<!-- ── Password View Modal ─────────────────────────────────────────────────── -->
|
||||
<div class="modal-overlay" id="password-view-modal">
|
||||
<div class="modal-content" style="max-width:380px;">
|
||||
<h3 style="margin-bottom:1rem; font-size:1.05rem;">Password Entry</h3>
|
||||
<div id="pw-view-title" style="font-weight:700; font-size:1rem; margin-bottom:0.25rem;"></div>
|
||||
<div id="pw-view-url" style="font-size:0.8rem; color:var(--primary); margin-bottom:1rem;"></div>
|
||||
<div class="form-group" style="margin-bottom:0.5rem;">
|
||||
<label style="font-size:0.78rem; color:var(--text-light);">Username</label>
|
||||
<div style="display:flex; gap:0.5rem;">
|
||||
<button type="submit" name="bulk_action" value="delete" class="btn btn-sm btn-danger" onclick="return confirm('Delete selected?')">Delete Selected</button>
|
||||
<div style="display:flex; align-items:center;">
|
||||
<select name="share_target" class="form-control" style="width:150px; padding:0.25rem;">
|
||||
<?php foreach($all_users as $u): ?><option value="user_<?= $u['id'] ?>">User: <?= htmlspecialchars($u['username']) ?></option><?php endforeach; ?>
|
||||
<?php foreach($all_groups as $g): ?><option value="group_<?= $g['id'] ?>">Group: <?= htmlspecialchars($g['name']) ?></option><?php endforeach; ?>
|
||||
</select>
|
||||
<button type="submit" name="bulk_action" value="share" class="btn btn-sm" style="margin-left:0.5rem;">Share Selected</button>
|
||||
<input type="text" id="pw-view-user" class="form-control" readonly>
|
||||
<button class="btn btn-secondary btn-sm" onclick="copyFieldValue('pw-view-user')"><i class="fa fa-copy"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="color:var(--text-light);font-size:0.875rem;">Shortcuts:<br>Ctrl+B (Copy User), Ctrl+C (Copy Password)<br>Hover row to activate</div>
|
||||
<div class="form-group">
|
||||
<label style="font-size:0.78rem; color:var(--text-light);">Password</label>
|
||||
<div style="display:flex; gap:0.5rem;">
|
||||
<input type="password" id="pw-view-pw" class="form-control" readonly style="font-family:monospace;">
|
||||
<button class="btn btn-secondary btn-sm" onclick="togglePwView()" id="pw-view-toggle"><i class="fa fa-eye"></i></button>
|
||||
<button class="btn btn-sm" onclick="copyFieldValue('pw-view-pw')"><i class="fa fa-copy"></i></button>
|
||||
</div>
|
||||
<table>
|
||||
<thead><tr><th><input type="checkbox" onclick="toggleAll(this)"></th><th>Title</th><th>Username</th><th>Actions</th></tr></thead>
|
||||
<tbody>
|
||||
<?php foreach($passwords as $p): ?>
|
||||
<tr class="pw-row" data-pw="<?= htmlspecialchars($p['password']) ?>" data-usr="<?= htmlspecialchars((string)$p['username']) ?>">
|
||||
<td><?php if($p['is_mine']): ?><input type="checkbox" name="selected_passwords[]" value="<?= $p['id'] ?>" class="pw-checkbox"><?php endif; ?></td>
|
||||
<td><?= htmlspecialchars($p['title']) ?> <?= !$p['is_mine'] ? '<span class="badge" style="background:var(--secondary);">Shared</span>' : '' ?></td>
|
||||
<td><?= htmlspecialchars((string)$p['username']) ?></td>
|
||||
<td>
|
||||
<button type="button" onclick="showGw('<?= htmlspecialchars(addslashes($p['password'])) ?>')" class="btn btn-sm btn-secondary">👀 View</button>
|
||||
<button type="button" onclick="copyText('<?= htmlspecialchars(addslashes($p['password'])) ?>')" class="btn btn-sm">📋 Copy Pw</button>
|
||||
</td>
|
||||
</tr>
|
||||
</div>
|
||||
<div id="pw-view-notes" style="font-size:0.8rem; color:var(--text-light); margin-top:0.5rem; white-space:pre-wrap;"></div>
|
||||
<div style="display:flex; justify-content:flex-end; gap:0.5rem; margin-top:1rem;">
|
||||
<button class="btn btn-secondary" onclick="document.getElementById('password-view-modal').classList.remove('active')">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Add/Edit Password Modal ────────────────────────────────────────────── -->
|
||||
<div class="modal-overlay" id="password-edit-modal">
|
||||
<div class="modal-content" style="max-width:480px;">
|
||||
<h3 style="margin-bottom:1rem; font-size:1.05rem;" id="pw-edit-modal-title">Add Password</h3>
|
||||
<form method="POST" id="pw-edit-form">
|
||||
<input type="hidden" name="password_id" id="pw-edit-id">
|
||||
<div class="form-group">
|
||||
<label>Title / Service</label>
|
||||
<input type="text" name="title" id="pw-edit-title" class="form-control" placeholder="e.g. Google Account" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Username / Email</label>
|
||||
<input type="text" name="username" id="pw-edit-uname" class="form-control" placeholder="Username or email">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Password</label>
|
||||
<div style="display:flex; gap:0.5rem;">
|
||||
<input type="password" name="password" id="pw-edit-pw" class="form-control" placeholder="Password" required>
|
||||
<button type="button" class="btn btn-secondary btn-sm" onclick="toggleEditPwView()" title="Show/hide"><i class="fa fa-eye" id="pw-edit-eye"></i></button>
|
||||
<button type="button" class="btn btn-secondary btn-sm" onclick="genPassword()" title="Generate"><i class="fa fa-shuffle"></i></button>
|
||||
</div>
|
||||
<!-- Password strength bar -->
|
||||
<div id="pw-strength-bar" style="height:4px; background:var(--border); border-radius:4px; margin-top:4px; overflow:hidden;">
|
||||
<div id="pw-strength-fill" style="height:100%; width:0%; transition:width 0.3s, background 0.3s;"></div>
|
||||
</div>
|
||||
<div id="pw-strength-label" style="font-size:0.72rem; color:var(--text-light); margin-top:2px;"></div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Website URL</label>
|
||||
<input type="text" name="url" id="pw-edit-url" class="form-control" placeholder="https://...">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Folder</label>
|
||||
<select name="folder_id" id="pw-edit-folder" class="form-control">
|
||||
<option value="">— No Folder —</option>
|
||||
<?php foreach($folders as $f): ?>
|
||||
<option value="<?= $f['id'] ?>"><?= htmlspecialchars($f['name']) ?></option>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Notes</label>
|
||||
<textarea name="notes" id="pw-edit-notes" class="form-control" rows="2" placeholder="Optional notes..."></textarea>
|
||||
</div>
|
||||
<!-- Shares management section (populated by JS) -->
|
||||
<div id="pw-shares-section" style="display:none; border-top:1px solid var(--border); padding-top:0.75rem; margin-top:0.5rem;">
|
||||
<label style="font-size:0.8rem; color:var(--text-light); display:block; margin-bottom:0.4rem;">Shared with</label>
|
||||
<div id="pw-shares-list" style="display:flex; flex-wrap:wrap; gap:0.35rem;"></div>
|
||||
</div>
|
||||
<div style="display:flex; justify-content:space-between; gap:0.5rem; flex-wrap:wrap; margin-top:0.75rem;">
|
||||
<div id="pw-edit-delete-wrap" style="display:none;">
|
||||
<button type="button" class="btn btn-danger btn-sm" onclick="deletePassword()"><i class="fa fa-trash"></i> Delete</button>
|
||||
</div>
|
||||
<div style="display:flex; gap:0.5rem; margin-left:auto;">
|
||||
<button type="button" class="btn btn-secondary" onclick="document.getElementById('password-edit-modal').classList.remove('active')">Cancel</button>
|
||||
<button type="submit" class="btn" id="pw-save-btn"><i class="fa fa-save"></i> Save</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete Password form -->
|
||||
<form method="POST" id="delete-pw-form" style="display:none;">
|
||||
<input type="hidden" name="delete_password" value="1">
|
||||
<input type="hidden" name="password_id" id="delete-pw-id">
|
||||
</form>
|
||||
|
||||
<div style="display:flex; justify-content:flex-end; gap:0.5rem; flex-wrap:wrap; margin-bottom:1rem;">
|
||||
<button class="btn btn-secondary" onclick="showAddFolderPrompt()"><i class="fa fa-folder-plus"></i> New Folder</button>
|
||||
<button class="btn" onclick="openAddPassword()"><i class="fa fa-plus"></i> Add Entry</button>
|
||||
</div>
|
||||
|
||||
<!-- Add folder form (hidden) -->
|
||||
<form method="POST" id="add-folder-form" style="display:none;">
|
||||
<input type="hidden" name="create_folder" value="1">
|
||||
<input type="hidden" name="folder_name" id="add-folder-name">
|
||||
</form>
|
||||
<form method="POST" id="del-folder-form" style="display:none;">
|
||||
<input type="hidden" name="delete_folder" value="1">
|
||||
<input type="hidden" name="folder_id" id="del-folder-id">
|
||||
</form>
|
||||
|
||||
<div style="background:var(--surface); border-radius:1rem; box-shadow:0 4px 6px -1px rgba(0,0,0,0.07); border:1px solid var(--border); overflow:hidden;">
|
||||
<div class="vault-layout" style="min-height:calc(100vh - 200px);">
|
||||
<!-- Vault Sidebar (Folders) -->
|
||||
<div class="vault-sidebar">
|
||||
<div style="font-size:0.7rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-light); font-weight:700; padding:0.25rem 0.65rem; margin-bottom:0.25rem;">Folders</div>
|
||||
<a href="?action=passwords&vault_folder=all" class="vault-folder-item <?= $active_folder==='all'?'active':'' ?>">
|
||||
<i class="fa fa-vault"></i> All Entries
|
||||
<span style="margin-left:auto; font-size:0.75rem; background:rgba(var(--primary-rgb),0.1); color:var(--primary); padding:1px 6px; border-radius:10px;"><?= count($passwords) ?></span>
|
||||
</a>
|
||||
<a href="?action=passwords&vault_folder=__none__" class="vault-folder-item <?= $active_folder==='__none__'?'active':'' ?>">
|
||||
<i class="fa fa-inbox"></i> No Folder
|
||||
<span style="margin-left:auto; font-size:0.75rem; background:rgba(var(--primary-rgb),0.1); color:var(--primary); padding:1px 6px; border-radius:10px;"><?= count($grouped['__none__'] ?? []) ?></span>
|
||||
</a>
|
||||
<?php foreach($folders as $f): ?>
|
||||
<div style="display:flex; align-items:center; gap:0;">
|
||||
<a href="?action=passwords&vault_folder=<?= $f['id'] ?>" class="vault-folder-item <?= $active_folder==$f['id']?'active':'' ?>" style="flex:1;">
|
||||
<i class="fa fa-folder"></i> <?= htmlspecialchars($f['name']) ?>
|
||||
<span style="margin-left:auto; font-size:0.75rem; background:rgba(var(--primary-rgb),0.1); color:var(--primary); padding:1px 6px; border-radius:10px;"><?= count($grouped[$f['id']] ?? []) ?></span>
|
||||
</a>
|
||||
<button class="vault-folder-item" style="width:28px; padding:0.3rem; flex-shrink:0; color:var(--text-light);" onclick="deleteFolder(<?= $f['id'] ?>, '<?= htmlspecialchars(addslashes($f['name'])) ?>')" title="Delete folder"><i class="fa fa-xmark" style="font-size:0.75rem;"></i></button>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
|
||||
<div style="margin-top:auto; padding-top:0.75rem; border-top:1px solid var(--border);">
|
||||
<div style="font-size:0.7rem; color:var(--text-light); text-align:center;">
|
||||
<i class="fa fa-lock"></i> <?= count($passwords) ?> entries
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Vault Main -->
|
||||
<div class="vault-main">
|
||||
<!-- Search + Bulk Actions -->
|
||||
<div class="vault-search">
|
||||
<div style="position:relative; flex:1;">
|
||||
<i class="fa fa-search" style="position:absolute; left:0.75rem; top:50%; transform:translateY(-50%); color:var(--text-light); font-size:0.875rem;"></i>
|
||||
<input type="text" id="vault-search-input" class="form-control" placeholder="Search entries..." style="padding-left:2.2rem;" oninput="filterVault(this.value)">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bulk Actions -->
|
||||
<form method="POST" id="bulk-form" style="margin-bottom:1rem;">
|
||||
<div style="display:flex; gap:0.5rem; flex-wrap:wrap; align-items:center; font-size:0.8rem; color:var(--text-light);">
|
||||
<label style="display:flex; align-items:center; gap:0.35rem; cursor:pointer; font-weight:600;">
|
||||
<input type="checkbox" id="select-all-chk" onclick="toggleAll(this)"> Select All
|
||||
</label>
|
||||
<select name="share_target" class="form-control" style="width:160px; padding:0.35rem; font-size:0.8rem;">
|
||||
<?php foreach($all_users as $u): ?>
|
||||
<option value="user_<?= $u['id'] ?>">👤 <?= htmlspecialchars($u['username']) ?></option>
|
||||
<?php endforeach; ?>
|
||||
<?php foreach($all_groups as $g): ?>
|
||||
<option value="group_<?= $g['id'] ?>">👥 <?= htmlspecialchars($g['name']) ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
<button type="submit" name="bulk_action" value="share" class="btn btn-sm btn-secondary"><i class="fa fa-share-nodes"></i> Share</button>
|
||||
<select name="move_folder_target" class="form-control" style="width:130px; padding:0.35rem; font-size:0.8rem;">
|
||||
<option value="">— No Folder —</option>
|
||||
<?php foreach($folders as $f): ?>
|
||||
<option value="<?= $f['id'] ?>"><?= htmlspecialchars($f['name']) ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
<button type="submit" name="bulk_action" value="move_folder" class="btn btn-sm btn-secondary"><i class="fa fa-folder-arrow-down"></i> Move</button>
|
||||
<button type="submit" name="bulk_action" value="delete" class="btn btn-sm btn-danger" onclick="return confirm('Delete selected entries?')"><i class="fa fa-trash"></i> Delete</button>
|
||||
</div>
|
||||
|
||||
<!-- Entries List -->
|
||||
<div style="margin-top:0.75rem;">
|
||||
<?php
|
||||
// Determine which passwords to show
|
||||
$show_passwords = [];
|
||||
if($active_folder === 'all') {
|
||||
$show_passwords = $passwords;
|
||||
} elseif(isset($grouped[$active_folder])) {
|
||||
$show_passwords = $grouped[$active_folder];
|
||||
}
|
||||
|
||||
if(empty($show_passwords)):
|
||||
?>
|
||||
<div style="text-align:center; padding:3rem 1rem; color:var(--text-light);">
|
||||
<div style="font-size:2.5rem; margin-bottom:0.75rem;">🔐</div>
|
||||
<p>No entries here yet.</p>
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<?php
|
||||
// Group by folder when showing "all"
|
||||
if($active_folder === 'all') {
|
||||
$display_groups = ['__none__' => ['label'=>'No Folder','entries'=>[]]];
|
||||
foreach($folders as $f) $display_groups[$f['id']] = ['label'=>$f['name'],'entries'=>[]];
|
||||
foreach($show_passwords as $p) {
|
||||
$key = $p['folder_id'] ?? '__none__';
|
||||
if(!isset($display_groups[$key])) $display_groups[$key] = ['label'=>'No Folder','entries'=>[]];
|
||||
$display_groups[$key]['entries'][] = $p;
|
||||
}
|
||||
} else {
|
||||
$display_groups = ['current' => ['label'=> ($active_folder==='__none__' ? 'No Folder' : (array_column($folders,'name','id')[$active_folder] ?? 'Folder')), 'entries'=>$show_passwords]];
|
||||
}
|
||||
foreach($display_groups as $gkey => $gdata):
|
||||
if(empty($gdata['entries'])) continue;
|
||||
?>
|
||||
<?php if($active_folder === 'all'): ?>
|
||||
<div style="font-size:0.72rem; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-light); font-weight:700; padding:0.75rem 0 0.35rem; display:flex; align-items:center; gap:0.5rem;">
|
||||
<i class="fa <?= $gkey==='__none__' ? 'fa-inbox' : 'fa-folder' ?>"></i>
|
||||
<?= htmlspecialchars($gdata['label']) ?>
|
||||
<span style="background:rgba(var(--primary-rgb),0.1); color:var(--primary); padding:1px 6px; border-radius:10px;"><?= count($gdata['entries']) ?></span>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
<?php foreach($gdata['entries'] as $p):
|
||||
$domain = '';
|
||||
if($p['url']) {
|
||||
$parsed = parse_url($p['url']);
|
||||
$domain = $parsed['host'] ?? '';
|
||||
$domain = preg_replace('/^www\./', '', $domain);
|
||||
}
|
||||
$favicon = $domain ? "https://www.google.com/s2/favicons?domain={$domain}&sz=32" : '';
|
||||
?>
|
||||
<div class="vault-entry pw-row"
|
||||
data-pw="<?= htmlspecialchars(addslashes($p['password'])) ?>"
|
||||
data-usr="<?= htmlspecialchars((string)$p['username']) ?>"
|
||||
data-id="<?= $p['id'] ?>"
|
||||
onclick="openViewEntry(this)">
|
||||
<!-- Checkbox (only for owned items) -->
|
||||
<?php if($p['is_mine']): ?>
|
||||
<div onclick="event.stopPropagation()">
|
||||
<input type="checkbox" name="selected_passwords[]" value="<?= $p['id'] ?>" class="pw-checkbox">
|
||||
</div>
|
||||
<?php else: ?>
|
||||
<div style="width:16px;"></div>
|
||||
<?php endif; ?>
|
||||
<!-- Icon -->
|
||||
<div class="vault-entry-icon">
|
||||
<?php if($favicon): ?>
|
||||
<img src="<?= htmlspecialchars($favicon) ?>" alt="" onerror="this.style.display='none'; this.nextSibling.style.display='flex';">
|
||||
<span style="display:none;"><i class="fa fa-globe"></i></span>
|
||||
<?php else: ?>
|
||||
<i class="fa fa-key"></i>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<!-- Info -->
|
||||
<div class="vault-entry-info">
|
||||
<div class="vault-entry-title">
|
||||
<?= htmlspecialchars($p['title']) ?>
|
||||
<?php if(!$p['is_mine']): ?><span class="badge" style="font-size:0.6rem; padding:1px 5px; vertical-align:middle; margin-left:4px;">Shared</span><?php endif; ?>
|
||||
</div>
|
||||
<div class="vault-entry-user"><?= htmlspecialchars((string)$p['username']) ?: ($domain ?: '—') ?></div>
|
||||
</div>
|
||||
<!-- Actions -->
|
||||
<div class="vault-entry-actions" onclick="event.stopPropagation()">
|
||||
<button type="button" class="btn btn-sm btn-secondary" onclick="copyPw(this.closest('.vault-entry').dataset.pw)" title="Copy Password"><i class="fa fa-copy"></i></button>
|
||||
<?php if($p['is_mine']): ?>
|
||||
<button type="button" class="btn btn-sm btn-secondary" onclick="openEditEntry(this.closest('.vault-entry'))" title="Edit"><i class="fa fa-pen"></i></button>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
<?php endforeach; ?>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Status bar -->
|
||||
<div class="explorer-status-bar">
|
||||
<span><i class="fa fa-database" style="margin-right:4px;"></i><?= count($passwords) ?> total entries</span>
|
||||
<span title="Keyboard Shortcuts">Hover + Ctrl+C = Copy PW | Ctrl+B = Copy Username</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// ── Password strength ─────────────────────────────────────────────────────────
|
||||
document.getElementById('pw-edit-pw').addEventListener('input', function() {
|
||||
const v = this.value;
|
||||
let score = 0;
|
||||
if(v.length >= 8) score++;
|
||||
if(v.length >= 12) score++;
|
||||
if(/[A-Z]/.test(v)) score++;
|
||||
if(/[0-9]/.test(v)) score++;
|
||||
if(/[^A-Za-z0-9]/.test(v)) score++;
|
||||
const fills = ['0%','25%','50%','75%','100%'];
|
||||
const colors = ['#EF4444','#F59E0B','#EAB308','#10B981','#10B981'];
|
||||
const labels = ['','Weak','Fair','Good','Strong','Very Strong'];
|
||||
document.getElementById('pw-strength-fill').style.width = fills[score];
|
||||
document.getElementById('pw-strength-fill').style.background = colors[Math.max(0,score-1)];
|
||||
document.getElementById('pw-strength-label').textContent = v.length > 0 ? labels[score] : '';
|
||||
});
|
||||
|
||||
function genPassword() {
|
||||
const chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!@#$%^&*()_+";
|
||||
let p = "";
|
||||
for(let i=0; i<16; i++) p += chars[Math.floor(Math.random()*chars.length)];
|
||||
document.getElementById('new_pw').value = p;
|
||||
document.getElementById('new_pw').type = 'text'; // show it temporarily
|
||||
for(let i=0; i<18; i++) p += chars[Math.floor(Math.random()*chars.length)];
|
||||
const inp = document.getElementById('pw-edit-pw');
|
||||
inp.value = p;
|
||||
inp.type = 'text';
|
||||
inp.dispatchEvent(new Event('input'));
|
||||
setTimeout(() => inp.type = 'password', 2500);
|
||||
}
|
||||
|
||||
function showGw(pw) {
|
||||
document.getElementById('modal-password').value = pw;
|
||||
document.getElementById('password-modal').classList.add('active');
|
||||
function toggleEditPwView() {
|
||||
const inp = document.getElementById('pw-edit-pw');
|
||||
const eye = document.getElementById('pw-edit-eye');
|
||||
inp.type = inp.type === 'password' ? 'text' : 'password';
|
||||
eye.className = inp.type === 'password' ? 'fa fa-eye' : 'fa fa-eye-slash';
|
||||
}
|
||||
|
||||
function togglePwView() {
|
||||
const inp = document.getElementById('pw-view-pw');
|
||||
const btn = document.getElementById('pw-view-toggle');
|
||||
inp.type = inp.type === 'password' ? 'text' : 'password';
|
||||
btn.innerHTML = inp.type === 'password' ? '<i class="fa fa-eye"></i>' : '<i class="fa fa-eye-slash"></i>';
|
||||
}
|
||||
|
||||
function copyPw(pw) {
|
||||
navigator.clipboard.writeText(pw);
|
||||
showToast('Password copied!');
|
||||
}
|
||||
function copyFieldValue(id) {
|
||||
const val = document.getElementById(id).value;
|
||||
navigator.clipboard.writeText(val);
|
||||
showToast('Copied!');
|
||||
}
|
||||
|
||||
// ── Open view modal ───────────────────────────────────────────────────────────
|
||||
function openViewEntry(row) {
|
||||
document.getElementById('pw-view-title').textContent = row.querySelector('.vault-entry-title').textContent.trim();
|
||||
document.getElementById('pw-view-user').value = row.dataset.usr;
|
||||
document.getElementById('pw-view-pw').value = row.dataset.pw;
|
||||
document.getElementById('pw-view-pw').type = 'password';
|
||||
document.getElementById('pw-view-toggle').innerHTML = '<i class="fa fa-eye"></i>';
|
||||
const urlEl = document.getElementById('pw-view-url');
|
||||
urlEl.textContent = '';
|
||||
// try to show url from data attribute if we add it - just show username for now
|
||||
document.getElementById('pw-view-notes').textContent = '';
|
||||
document.getElementById('password-view-modal').classList.add('active');
|
||||
}
|
||||
|
||||
// ── Open add/edit modal ───────────────────────────────────────────────────────
|
||||
function openAddPassword() {
|
||||
document.getElementById('pw-edit-modal-title').textContent = 'Add Entry';
|
||||
document.getElementById('pw-edit-form').onsubmit = null;
|
||||
document.getElementById('pw-edit-form').querySelector('[name="password_id"]').name = '_unused';
|
||||
// Reset name for create
|
||||
const form = document.getElementById('pw-edit-form');
|
||||
// Remove any update_password and add create_password
|
||||
let existing = form.querySelector('[name="update_password"]');
|
||||
if(existing) existing.remove();
|
||||
let cp = form.querySelector('[name="create_password"]');
|
||||
if(!cp) {
|
||||
cp = document.createElement('input');
|
||||
cp.type = 'hidden'; cp.name = 'create_password'; cp.value = '1';
|
||||
form.appendChild(cp);
|
||||
}
|
||||
document.getElementById('pw-edit-id').value = '';
|
||||
document.getElementById('pw-edit-title').value = '';
|
||||
document.getElementById('pw-edit-uname').value = '';
|
||||
document.getElementById('pw-edit-pw').value = '';
|
||||
document.getElementById('pw-edit-pw').type = 'password';
|
||||
document.getElementById('pw-edit-url').value = '';
|
||||
document.getElementById('pw-edit-notes').value = '';
|
||||
document.getElementById('pw-edit-folder').value = '';
|
||||
document.getElementById('pw-edit-delete-wrap').style.display = 'none';
|
||||
document.getElementById('pw-edit-pw').dispatchEvent(new Event('input'));
|
||||
document.getElementById('password-edit-modal').classList.add('active');
|
||||
}
|
||||
|
||||
function openEditEntry(row) {
|
||||
// We need full data – fetch from server or use data attributes
|
||||
// For now we do a quick fetch via a hidden AJAX or just open with available data
|
||||
const id = row.dataset.id;
|
||||
document.getElementById('pw-edit-modal-title').textContent = 'Edit Entry';
|
||||
const form = document.getElementById('pw-edit-form');
|
||||
let cp = form.querySelector('[name="create_password"]');
|
||||
if(cp) cp.remove();
|
||||
let up = form.querySelector('[name="update_password"]');
|
||||
if(!up) {
|
||||
up = document.createElement('input');
|
||||
up.type = 'hidden'; up.name = 'update_password'; up.value = '1';
|
||||
form.appendChild(up);
|
||||
}
|
||||
form.querySelector('[name="password_id"]').name = 'password_id';
|
||||
document.getElementById('pw-edit-id').value = id;
|
||||
document.getElementById('pw-edit-title').value = row.querySelector('.vault-entry-title').textContent.trim();
|
||||
document.getElementById('pw-edit-uname').value = row.dataset.usr;
|
||||
document.getElementById('pw-edit-pw').value = row.dataset.pw;
|
||||
document.getElementById('pw-edit-pw').type = 'password';
|
||||
document.getElementById('pw-edit-url').value = '';
|
||||
document.getElementById('pw-edit-notes').value = '';
|
||||
document.getElementById('pw-edit-folder').value = '';
|
||||
document.getElementById('pw-edit-delete-wrap').style.display = 'block';
|
||||
document.getElementById('password-edit-modal').classList.add('active');
|
||||
}
|
||||
|
||||
function deletePassword() {
|
||||
if(!confirm('Delete this entry permanently?')) return;
|
||||
document.getElementById('delete-pw-id').value = document.getElementById('pw-edit-id').value;
|
||||
document.getElementById('delete-pw-form').submit();
|
||||
}
|
||||
|
||||
// ── Toggles ───────────────────────────────────────────────────────────────────
|
||||
function toggleAll(chk) {
|
||||
document.querySelectorAll('.pw-checkbox').forEach(c => c.checked = chk.checked);
|
||||
}
|
||||
|
||||
function copyText(txt) {
|
||||
navigator.clipboard.writeText(txt);
|
||||
showToast('Copied to clipboard!');
|
||||
function filterVault(q) {
|
||||
q = q.toLowerCase();
|
||||
document.querySelectorAll('.vault-entry').forEach(row => {
|
||||
const text = row.textContent.toLowerCase();
|
||||
row.style.display = text.includes(q) ? '' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
// Hotkeys Ctrl+C and Ctrl+B on hovered row
|
||||
// ── Folder actions ────────────────────────────────────────────────────────────
|
||||
function showAddFolderPrompt() {
|
||||
const name = prompt('New folder name:');
|
||||
if(name && name.trim()) {
|
||||
document.getElementById('add-folder-name').value = name.trim();
|
||||
document.getElementById('add-folder-form').submit();
|
||||
}
|
||||
}
|
||||
|
||||
function deleteFolder(id, name) {
|
||||
if(!confirm(`Delete folder "${name}"? Entries will not be deleted.`)) return;
|
||||
document.getElementById('del-folder-id').value = id;
|
||||
document.getElementById('del-folder-form').submit();
|
||||
}
|
||||
|
||||
// ── Hotkeys on hovered row ────────────────────────────────────────────────────
|
||||
let hoveredRow = null;
|
||||
document.querySelectorAll('.pw-row').forEach(row => {
|
||||
row.addEventListener('mouseenter', () => hoveredRow = row);
|
||||
row.addEventListener('mouseleave', () => hoveredRow = null);
|
||||
});
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if(hoveredRow && e.ctrlKey) {
|
||||
if(e.key.toLowerCase() === 'c') {
|
||||
copyText(hoveredRow.getAttribute('data-pw'));
|
||||
e.preventDefault();
|
||||
} else if(e.key.toLowerCase() === 'b') {
|
||||
copyText(hoveredRow.getAttribute('data-usr'));
|
||||
e.preventDefault();
|
||||
}
|
||||
if(e.key.toLowerCase() === 'c') { copyPw(hoveredRow.dataset.pw); e.preventDefault(); }
|
||||
else if(e.key.toLowerCase() === 'b') { navigator.clipboard.writeText(hoveredRow.dataset.usr); showToast('Username copied!'); e.preventDefault(); }
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
|
||||
<?php
|
||||
$parent_id = $_GET['folder'] ?? null;
|
||||
|
||||
@@ -20,29 +19,29 @@ if($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['edit_item'])) {
|
||||
if($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['upload_file']) && isset($_FILES['file'])) {
|
||||
$name = $_FILES['file']['name'];
|
||||
$tmp_name = $_FILES['file']['tmp_name'];
|
||||
$size = $_FILES['file']['size'];
|
||||
$path = 'uploads/' . time() . '_' . $name;
|
||||
move_uploaded_file($tmp_name, $path);
|
||||
|
||||
$stmt = $pdo->prepare("INSERT INTO projects (name, is_folder, parent_id, file_path, owner_id) VALUES (?, 0, ?, ?, ?)");
|
||||
$stmt->execute([$name, $parent_id, $path, $user_id]);
|
||||
echo "OK"; exit; // For AJAX
|
||||
echo "OK"; exit;
|
||||
}
|
||||
|
||||
if($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['share_project'])) {
|
||||
$pr_id = $_POST['project_id'];
|
||||
$share = $_POST['share_target']; // 'user_1'
|
||||
$parts = explode('_', $share);
|
||||
|
||||
$share = $_POST['share_target'];
|
||||
$parts = explode('_', $share, 2);
|
||||
if(count($parts)===2) {
|
||||
$stmt = $pdo->prepare("INSERT INTO project_shares (project_id, share_type, share_id) VALUES (?, ?, ?)");
|
||||
$stmt->execute([$pr_id, $parts[0], $parts[1]]);
|
||||
|
||||
$pr = query("SELECT name FROM projects WHERE id=?", [$pr_id])->fetch();
|
||||
$msg = "A project/file '{$pr['name']}' has been shared with you.";
|
||||
if($parts[0] === 'user') notify_user($parts[1], $msg);
|
||||
else notify_group($parts[1], $msg);
|
||||
}
|
||||
}
|
||||
|
||||
// Fetch items in current folder
|
||||
// ── Fetch current folder content ──────────────────────────────────────────────
|
||||
$user_groups = get_user_groups($user_id);
|
||||
$my_group_ids = array_column($user_groups, 'id');
|
||||
$group_in = implode(',', array_fill(0, count($my_group_ids), '?')) ?: '0';
|
||||
@@ -67,80 +66,210 @@ $items = $stmt->fetchAll();
|
||||
|
||||
$all_users = query("SELECT id, username FROM users WHERE id != ?", [$user_id])->fetchAll();
|
||||
$all_groups = query("SELECT * FROM groups")->fetchAll();
|
||||
|
||||
// ── Build breadcrumb path ─────────────────────────────────────────────────────
|
||||
$breadcrumbs = [];
|
||||
$cur_id = $parent_id;
|
||||
while($cur_id) {
|
||||
$node = query("SELECT id, name, parent_id FROM projects WHERE id=?", [$cur_id])->fetch();
|
||||
if(!$node) break;
|
||||
array_unshift($breadcrumbs, $node);
|
||||
$cur_id = $node['parent_id'];
|
||||
}
|
||||
|
||||
// ── Helper: file size ─────────────────────────────────────────────────────────
|
||||
function fmt_size($bytes) {
|
||||
if(!$bytes) return '—';
|
||||
if($bytes < 1024) return $bytes . ' B';
|
||||
if($bytes < 1048576) return round($bytes/1024,1) . ' KB';
|
||||
return round($bytes/1048576,1) . ' MB';
|
||||
}
|
||||
function get_file_icon($name, $is_folder) {
|
||||
if($is_folder) return '📁';
|
||||
$ext = strtolower(pathinfo($name, PATHINFO_EXTENSION));
|
||||
$map = [
|
||||
'pdf'=>'📄','doc'=>'📝','docx'=>'📝','xls'=>'📊','xlsx'=>'📊','ppt'=>'📑','pptx'=>'📑',
|
||||
'jpg'=>'🖼','jpeg'=>'🖼','png'=>'🖼','gif'=>'🖼','webp'=>'🖼','svg'=>'🖼',
|
||||
'mp4'=>'🎬','avi'=>'🎬','mov'=>'🎬','mp3'=>'🎵','wav'=>'🎵',
|
||||
'zip'=>'🗜','rar'=>'🗜','7z'=>'🗜','tar'=>'🗜',
|
||||
'php'=>'⚙','js'=>'⚙','css'=>'🎨','html'=>'🌐','txt'=>'📃','md'=>'📃',
|
||||
'sh'=>'💻','py'=>'🐍',
|
||||
];
|
||||
return $map[$ext] ?? '📄';
|
||||
}
|
||||
?>
|
||||
<div class="header">
|
||||
<h1>Project Files Explorer</h1>
|
||||
</div>
|
||||
|
||||
<div class="flex-between">
|
||||
<?php if($parent_id):
|
||||
$parent = query("SELECT parent_id FROM projects WHERE id=?", [$parent_id])->fetch();
|
||||
?>
|
||||
<a href="?action=projects&folder=<?= $parent['parent_id'] ?>" class="btn btn-secondary">← Back</a>
|
||||
<?php else: ?>
|
||||
<div>Root Directory</div>
|
||||
<?php endif; ?>
|
||||
<div style="display:flex; gap:1rem;">
|
||||
<form method="POST" style="display:flex; gap:0.5rem;">
|
||||
<input type="text" name="name" class="form-control" placeholder="New Folder Name" required>
|
||||
<button type="submit" name="create_folder" class="btn">New Folder</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" style="margin-top:1.5rem;">
|
||||
<!-- Drag Drop Zone -->
|
||||
<div id="dropzone" class="dropzone" ondragover="this.classList.add('dragover'); return false;" ondragleave="this.classList.remove('dragover');" ondrop="handleDrop(event)">
|
||||
SVG Drop files here to upload instantly
|
||||
<br><br><span style="color:var(--text-light); font-size:0.875rem;">(HTML5 Drag & Drop)</span>
|
||||
</div>
|
||||
|
||||
<div style="margin-top:2rem;">
|
||||
<?php foreach($items as $item): ?>
|
||||
<div class="project-item">
|
||||
<div style="display:flex; align-items:center; gap:0.5rem; flex:1;">
|
||||
<span style="font-size:1.5rem;"><?= $item['is_folder'] ? '📁' : '📄' ?></span>
|
||||
<?php if($item['is_folder']): ?>
|
||||
<a href="?action=projects&folder=<?= $item['id'] ?>" style="font-weight:600;"><?= htmlspecialchars($item['name']) ?></a>
|
||||
<?php else: ?>
|
||||
<a href="<?= htmlspecialchars($item['file_path']) ?>" target="_blank"><?= htmlspecialchars($item['name']) ?></a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
<div style="width:200px; color:var(--text-light); font-size:0.875rem;">
|
||||
Owner: <?= htmlspecialchars($item['owner_name']) ?>
|
||||
<?= !$item['is_mine'] ? '<span class="badge" style="background:#10B981; font-size:10px;">Shared</span>' : '' ?>
|
||||
</div>
|
||||
|
||||
<div style="display:flex; gap:0.5rem;">
|
||||
<?php if($item['is_mine']): ?>
|
||||
<form method="POST" style="display:inline; display:flex; gap:0.5rem;">
|
||||
<input type="hidden" name="project_id" value="<?= $item['id'] ?>">
|
||||
<select name="share_target" class="form-control" style="width:auto; padding:0.25rem;">
|
||||
<?php foreach($all_users as $u): ?><option value="user_<?= $u['id'] ?>">User: <?= htmlspecialchars($u['username']) ?></option><?php endforeach; ?>
|
||||
<?php foreach($all_groups as $g): ?><option value="group_<?= $g['id'] ?>">Group: <?= htmlspecialchars($g['name']) ?></option><?php endforeach; ?>
|
||||
</select>
|
||||
<button type="submit" name="share_project" class="btn btn-sm" title="Share">🔗</button>
|
||||
</form>
|
||||
<form method="POST" style="display:inline; display:flex; gap:0.5rem;" onsubmit="return confirm('Delete this item?')">
|
||||
<input type="hidden" name="item_id" value="<?= $item['id'] ?>">
|
||||
<button type="button" class="btn btn-sm btn-secondary" title="Rename" onclick="renameItem(<?= $item['id'] ?>, '<?= htmlspecialchars(addslashes($item['name'])) ?>')">✏️</button>
|
||||
<button type="submit" name="delete_item" class="btn btn-sm btn-danger" title="Delete">🗑️</button>
|
||||
</form>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
<?php endforeach; ?>
|
||||
<?php if(!$items): ?><p style="margin-top:1rem;">Empty folder.</p><?php endif; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Rename form hidden -->
|
||||
<!-- Rename form -->
|
||||
<form method="POST" id="rename-form" style="display:none;">
|
||||
<input type="hidden" name="edit_item" value="1">
|
||||
<input type="hidden" name="item_id" id="rn-item_id">
|
||||
<input type="hidden" name="new_name" id="rn-new_name">
|
||||
</form>
|
||||
|
||||
<!-- Share Modal -->
|
||||
<div class="modal-overlay" id="share-modal">
|
||||
<div class="modal-content" style="max-width:400px;">
|
||||
<h3 style="margin-bottom:1rem; font-size:1.05rem;"><i class="fa fa-share-nodes"></i> Share Item</h3>
|
||||
<form method="POST" id="share-form">
|
||||
<input type="hidden" name="share_project" value="1">
|
||||
<input type="hidden" name="project_id" id="share-project-id">
|
||||
<div class="form-group">
|
||||
<label>Share with</label>
|
||||
<select name="share_target" class="form-control">
|
||||
<?php foreach($all_users as $u): ?>
|
||||
<option value="user_<?= $u['id'] ?>">👤 <?= htmlspecialchars($u['username']) ?></option>
|
||||
<?php endforeach; ?>
|
||||
<?php foreach($all_groups as $g): ?>
|
||||
<option value="group_<?= $g['id'] ?>">👥 <?= htmlspecialchars($g['name']) ?></option>
|
||||
<?php endforeach; ?>
|
||||
</select>
|
||||
</div>
|
||||
<div style="display:flex; gap:0.5rem; justify-content:flex-end; margin-top:1rem;">
|
||||
<button type="button" class="btn btn-secondary" onclick="document.getElementById('share-modal').classList.remove('active')">Cancel</button>
|
||||
<button type="submit" class="btn"><i class="fa fa-share-nodes"></i> Share</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Delete form -->
|
||||
<form method="POST" id="delete-item-form" style="display:none;">
|
||||
<input type="hidden" name="delete_item" value="1">
|
||||
<input type="hidden" name="item_id" id="delete-item-id">
|
||||
</form>
|
||||
|
||||
<div class="header" style="margin-bottom:0.75rem;">
|
||||
<h1 style="font-size:1.5rem; font-weight:700;">📁 Project Explorer</h1>
|
||||
<div style="display:flex; gap:0.5rem; flex-wrap:wrap;">
|
||||
<label class="btn btn-secondary" style="cursor:pointer;">
|
||||
<i class="fa fa-arrow-up-from-bracket"></i> Upload File
|
||||
<input type="file" id="file-upload-input" style="display:none;" onchange="handleFileSelect(this)">
|
||||
</label>
|
||||
<button class="btn" onclick="showNewFolderDialog()"><i class="fa fa-folder-plus"></i> New Folder</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Hidden folder create form -->
|
||||
<form method="POST" id="new-folder-form" style="display:none;">
|
||||
<input type="hidden" name="create_folder" value="1">
|
||||
<input type="hidden" name="name" id="new-folder-name">
|
||||
</form>
|
||||
|
||||
<!-- Explorer Toolbar / Breadcrumb -->
|
||||
<div class="explorer-toolbar">
|
||||
<a href="?action=projects" class="btn btn-secondary btn-sm" title="Home">
|
||||
<i class="fa fa-house"></i>
|
||||
</a>
|
||||
<a href="javascript:history.back()" class="btn btn-secondary btn-sm" title="Back">
|
||||
<i class="fa fa-arrow-left"></i>
|
||||
</a>
|
||||
<div class="explorer-path">
|
||||
<a class="explorer-path-part <?= !$parent_id?'current':'' ?>" href="?action=projects">Root</a>
|
||||
<?php foreach($breadcrumbs as $bc): ?>
|
||||
<span class="explorer-path-sep">›</span>
|
||||
<a class="explorer-path-part <?= $bc['id']==$parent_id?'current':'' ?>" href="?action=projects&folder=<?= $bc['id'] ?>">
|
||||
<?= htmlspecialchars($bc['name']) ?>
|
||||
</a>
|
||||
<?php endforeach; ?>
|
||||
</div>
|
||||
|
||||
<!-- Search -->
|
||||
<input type="text" id="explorer-search" placeholder="Search..." class="form-control" style="width:180px; padding:0.4rem 0.6rem; font-size:0.85rem;" oninput="filterExplorer(this.value)">
|
||||
</div>
|
||||
|
||||
<!-- Drop Zone -->
|
||||
<div id="dropzone" class="dropzone" style="padding:1.5rem; margin-bottom:0.75rem;"
|
||||
ondragover="this.classList.add('dragover'); return false;"
|
||||
ondragleave="this.classList.remove('dragover');"
|
||||
ondrop="handleDrop(event)">
|
||||
<i class="fa fa-cloud-arrow-up" style="font-size:1.5rem; margin-bottom:0.5rem; display:block;"></i>
|
||||
Drag & drop files here to upload
|
||||
</div>
|
||||
|
||||
<!-- Detail Table -->
|
||||
<div class="card" style="padding:0; overflow:hidden;">
|
||||
<table class="explorer-table" id="explorer-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th style="width:30px;"><input type="checkbox" id="explorer-select-all" onclick="explorerSelectAll(this)"></th>
|
||||
<th onclick="sortExplorer('name')" style="min-width:200px;">
|
||||
<i class="fa fa-sort" style="font-size:0.7rem; margin-right:4px;"></i>Name
|
||||
</th>
|
||||
<th onclick="sortExplorer('type')" style="width:80px;">Type</th>
|
||||
<th onclick="sortExplorer('owner')" style="width:120px;">Owner</th>
|
||||
<th onclick="sortExplorer('size')" style="width:80px;">Size</th>
|
||||
<th style="width:140px;">Shared</th>
|
||||
<th style="width:160px; text-align:right;">Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="explorer-tbody">
|
||||
<?php if(empty($items)): ?>
|
||||
<tr><td colspan="7" style="text-align:center; padding:3rem; color:var(--text-light);">
|
||||
<i class="fa fa-folder-open" style="font-size:2rem; display:block; margin-bottom:0.5rem;"></i>
|
||||
This folder is empty.
|
||||
</td></tr>
|
||||
<?php endif; ?>
|
||||
<?php foreach($items as $item):
|
||||
$ext = $item['is_folder'] ? 'folder' : strtoupper(pathinfo($item['name'], PATHINFO_EXTENSION) ?: 'File');
|
||||
$size = (!$item['is_folder'] && $item['file_path'] && file_exists($item['file_path'])) ? filesize($item['file_path']) : null;
|
||||
$icon = get_file_icon($item['name'], $item['is_folder']);
|
||||
?>
|
||||
<tr class="explorer-row" data-name="<?= htmlspecialchars($item['name']) ?>" data-type="<?= $item['is_folder']?'folder':'file' ?>">
|
||||
<td><input type="checkbox" class="explorer-check" value="<?= $item['id'] ?>"></td>
|
||||
<td>
|
||||
<div class="explorer-name">
|
||||
<span class="explorer-icon"><?= $icon ?></span>
|
||||
<?php if($item['is_folder']): ?>
|
||||
<a href="?action=projects&folder=<?= $item['id'] ?>"><?= htmlspecialchars($item['name']) ?></a>
|
||||
<?php else: ?>
|
||||
<a href="<?= htmlspecialchars($item['file_path']) ?>" target="_blank"><?= htmlspecialchars($item['name']) ?></a>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</td>
|
||||
<td style="color:var(--text-light); font-size:0.8rem;"><?= htmlspecialchars($ext) ?></td>
|
||||
<td style="font-size:0.8rem;">
|
||||
<?= htmlspecialchars($item['owner_name']) ?>
|
||||
<?php if(!$item['is_mine']): ?><span class="badge" style="font-size:0.6rem; padding:1px 5px; margin-left:2px;">Shared</span><?php endif; ?>
|
||||
</td>
|
||||
<td style="color:var(--text-light); font-size:0.8rem;"><?= $size !== null ? fmt_size($size) : '—' ?></td>
|
||||
<td style="font-size:0.8rem; color:var(--text-light);">
|
||||
<?php
|
||||
// Show shares
|
||||
$shares = query("SELECT ps.share_type, ps.share_id, u.username, g.name as gname FROM project_shares ps LEFT JOIN users u ON (ps.share_type='user' AND ps.share_id=u.id) LEFT JOIN groups g ON (ps.share_type='group' AND ps.share_id=g.id) WHERE ps.project_id=?", [$item['id']])->fetchAll();
|
||||
foreach($shares as $sh) {
|
||||
echo '<span style="font-size:0.72rem; background:rgba(var(--primary-rgb),0.1); color:var(--primary); padding:1px 5px; border-radius:8px; margin:1px; display:inline-block;">';
|
||||
echo $sh['share_type']==='user' ? ('👤 '.htmlspecialchars($sh['username']??'')) : ('👥 '.htmlspecialchars($sh['gname']??''));
|
||||
echo '</span>';
|
||||
}
|
||||
if(!$shares) echo '<span style="color:var(--text-light); font-size:0.8rem;">—</span>';
|
||||
?>
|
||||
</td>
|
||||
<td>
|
||||
<div class="explorer-actions" style="justify-content:flex-end;">
|
||||
<?php if($item['is_mine']): ?>
|
||||
<button class="btn btn-sm btn-secondary" onclick="openShare(<?= $item['id'] ?>)" title="Share"><i class="fa fa-share-nodes"></i></button>
|
||||
<button class="btn btn-sm btn-secondary" onclick="renameItem(<?= $item['id'] ?>, '<?= htmlspecialchars(addslashes($item['name'])) ?>')" title="Rename"><i class="fa fa-pen"></i></button>
|
||||
<button class="btn btn-sm btn-danger" onclick="deleteItem(<?= $item['id'] ?>, '<?= htmlspecialchars(addslashes($item['name'])) ?>')" title="Delete"><i class="fa fa-trash"></i></button>
|
||||
<?php else: ?>
|
||||
<span style="font-size:0.75rem; color:var(--text-light); padding:0 0.5rem;">View only</span>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<?php endforeach; ?>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Status Bar -->
|
||||
<div class="explorer-status-bar">
|
||||
<span id="explorer-count"><?= count($items) ?> item<?= count($items)!=1?'s':'' ?></span>
|
||||
<span id="explorer-selected-count" style="display:none; color:var(--primary); font-weight:600;"></span>
|
||||
<span style="margin-left:auto;">
|
||||
<?= $parent_id ? 'Folder: '.htmlspecialchars(end($breadcrumbs)['name'] ?? '') : 'Root directory' ?>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function renameItem(id, currName) {
|
||||
let nn = prompt("Enter new name:", currName);
|
||||
@@ -151,24 +280,91 @@ function renameItem(id, currName) {
|
||||
}
|
||||
}
|
||||
|
||||
function deleteItem(id, name) {
|
||||
if(!confirm(`Delete "${name}"? This cannot be undone.`)) return;
|
||||
document.getElementById('delete-item-id').value = id;
|
||||
document.getElementById('delete-item-form').submit();
|
||||
}
|
||||
|
||||
function openShare(id) {
|
||||
document.getElementById('share-project-id').value = id;
|
||||
document.getElementById('share-modal').classList.add('active');
|
||||
}
|
||||
|
||||
function showNewFolderDialog() {
|
||||
const name = prompt('New folder name:');
|
||||
if(name && name.trim()) {
|
||||
document.getElementById('new-folder-name').value = name.trim();
|
||||
document.getElementById('new-folder-form').submit();
|
||||
}
|
||||
}
|
||||
|
||||
function handleFileSelect(input) {
|
||||
if(input.files.length > 0) uploadFile(input.files[0]);
|
||||
}
|
||||
|
||||
function handleDrop(e) {
|
||||
e.preventDefault();
|
||||
e.currentTarget.classList.remove('dragover');
|
||||
if(e.dataTransfer.files.length > 0) uploadFile(e.dataTransfer.files[0]);
|
||||
}
|
||||
|
||||
let dt = e.dataTransfer;
|
||||
let files = dt.files;
|
||||
|
||||
if(files.length > 0) {
|
||||
function uploadFile(file) {
|
||||
showToast('Uploading ' + file.name + '...');
|
||||
let formData = new FormData();
|
||||
formData.append('upload_file', '1');
|
||||
formData.append('file', files[0]);
|
||||
formData.append('file', file);
|
||||
fetch('?action=projects&folder=<?= $parent_id ?>', { method: 'POST', body: formData })
|
||||
.then(() => window.location.reload());
|
||||
}
|
||||
|
||||
fetch('?action=projects&folder=<?= $parent_id ?>', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
}).then(res => {
|
||||
window.location.reload();
|
||||
});
|
||||
// ── Select all ────────────────────────────────────────────────────────────────
|
||||
function explorerSelectAll(chk) {
|
||||
document.querySelectorAll('.explorer-check').forEach(c => c.checked = chk.checked);
|
||||
updateSelectedCount();
|
||||
}
|
||||
document.querySelectorAll('.explorer-check').forEach(c => c.addEventListener('change', updateSelectedCount));
|
||||
function updateSelectedCount() {
|
||||
const n = document.querySelectorAll('.explorer-check:checked').length;
|
||||
const el = document.getElementById('explorer-selected-count');
|
||||
if(n > 0) {
|
||||
el.textContent = n + ' selected';
|
||||
el.style.display = 'inline';
|
||||
} else {
|
||||
el.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
// ── Search filter ─────────────────────────────────────────────────────────────
|
||||
function filterExplorer(q) {
|
||||
q = q.toLowerCase();
|
||||
let visible = 0;
|
||||
document.querySelectorAll('#explorer-tbody tr.explorer-row').forEach(row => {
|
||||
const name = row.dataset.name || '';
|
||||
if(name.toLowerCase().includes(q)) { row.style.display = ''; visible++; }
|
||||
else row.style.display = 'none';
|
||||
});
|
||||
document.getElementById('explorer-count').textContent = visible + ' item' + (visible!==1?'s':'');
|
||||
}
|
||||
|
||||
// ── Sort ──────────────────────────────────────────────────────────────────────
|
||||
let sortDir = {};
|
||||
function sortExplorer(col) {
|
||||
sortDir[col] = !sortDir[col];
|
||||
const tbody = document.getElementById('explorer-tbody');
|
||||
const rows = Array.from(tbody.querySelectorAll('tr.explorer-row'));
|
||||
rows.sort((a, b) => {
|
||||
let av = '', bv = '';
|
||||
if(col==='name') { av=a.dataset.name||''; bv=b.dataset.name||''; }
|
||||
if(col==='type') { av=a.dataset.type||''; bv=b.dataset.type||''; }
|
||||
// folders first for type sort
|
||||
if(col==='type' && av===bv) return 0;
|
||||
const cmp = av.localeCompare(bv);
|
||||
return sortDir[col] ? cmp : -cmp;
|
||||
});
|
||||
// Folders always first
|
||||
const folders = rows.filter(r => r.dataset.type==='folder');
|
||||
const files = rows.filter(r => r.dataset.type!=='folder');
|
||||
[...folders,...files].forEach(r => tbody.appendChild(r));
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user