Update app/templates/dashboard.html

app/templates/dashboard.html

@@ -1,34 +1,264 @@
 {% extends "base.html" %}
-{% block title %}Dashboard{% endblock %}
+{% block title %}Dashboard – Resume Ranker API{% endblock %}
+
+{% block extra_head %}
+{#
+    No extra head elements are strictly needed here if base.html links
+    to your main CSS (e.g., login.css, which will be expanded with dashboard styles).
+    If you prefer to keep dashboard-specific CSS separate, you'd link it here:
+    <link rel="stylesheet" href="{{ url_for('static', filename='css/dashboard.css') }}">
+#}
+{% endblock %}
+
 {% block content %}
-<h2>Welcome, {{ user.username }}!</h2>
-<p>This is your protected dashboard.</p>
-<h5>Your API Key</h5>
-<div class="input-group mb-3">
-  <input type="text" class="form-control" id="apiKey" value="{{ user.api_key }}" readonly>
-  <button class="btn btn-outline-secondary" type="button" onclick="copyApiKey()">Copy</button>
-</div>
+<div class="dashboard-wrapper">
+    <aside class="sidebar" id="sidebar">
+        <div class="sidebar-header">
+            <div class="logo">ResumeRanker<span style="color:var(--accent)">.API</span></div>
+            <button class="close-sidebar" id="closeSidebar" aria-label="Close menu">
+                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
+            </button>
+        </div>
+        <nav class="sidebar-nav">
+            <a href="{{ url_for('auth.dashboard') }}" class="nav-item active">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-grid"><rect x="3" y="3" width="7" height="7"></rect><rect x="14" y="3" width="7" height="7"></rect><rect x="14" y="14" width="7" height="7"></rect><rect x="3" y="14" width="7" height="7"></rect></svg>
+                <span>Dashboard</span>
+            </a>
+            <a href="{{ url_for('auth.api_keys') }}" class="nav-item">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-key"><path d="M19 10H5a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2z"></path><circle cx="12" cy="16" r="2"></circle><path d="M15 10V4.5a2.5 2.5 0 0 0-5 0V10"></path></svg>
+                <span>My API Keys</span>
+            </a>
+            <a href="{{ url_for('auth.resume_rankings') }}" class="nav-item">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-award"><circle cx="12" cy="8" r="7"></circle><polyline points="8.21 13.89 7 23 12 20 17 23 15.79 13.89"></polyline></svg>
+                <span>Resume Rankings</span>
+            </a>
+            <a href="{{ url_for('auth.upload_resumes') }}" class="nav-item">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-upload-cloud"><polyline points="16 16 12 12 8 16"></polyline><line x1="12" y1="12" x2="12" y2="21"></line><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"></path><polyline points="16 16 12 12 8 16"></polyline></svg>
+                <span>Upload Resumes</span>
+            </a>
+            <a href="{{ url_for('auth.settings') }}" class="nav-item">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-settings"><circle cx="12" cy="12" r="3"></circle><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path></svg>
+                <span>Settings</span>
+            </a>
+            <a href="{{ url_for('auth.logout') }}" class="nav-item logout-item">
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-log-out"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path><polyline points="17 16 22 12 17 8"></polyline><line x1="22" y1="12" x2="10" y2="12"></line></svg>
+                <span>Logout</span>
+            </a>
+        </nav>
+    </aside>
 
-<form method="POST" action="{{ url_for('auth.regenerate_api_key') }}">
-  <button class="btn btn-warning">Regenerate API Key</button>
-</form>
-<div>
-    <p><a href="{{ url_for('auth.docs') }}">📘 View API Documentation</a></p>
+    <div class="main-content-area" id="mainContentArea">
+        <header class="dashboard-header">
+            <button class="hamburger-dashboard" id="hamburgerDashboard" aria-label="Open sidebar menu">
+                <span></span><span></span><span></span>
+            </button>
+            <div class="user-settings">
+                <span class="user-name">{{ user.username }}</span>
+                <div class="user-avatar">
+                    <img src="https://ui-avatars.com/api/?name={{ user.username | urlencode }}&background=2563eb&color=fff&size=30" alt="User Avatar">
+                </div>
+                <button class="theme-toggle" id="themeToggleDashboard" aria-label="Toggle dark mode">🌙</button>
+            </div>
+        </header>
 
-</div>
-<!-- <p><a href="{{ url_for('auth.docs') }}">📘 View API Documentation</a></p> -->
+        <div class="content-padding">
+            <h1 class="welcome-title">Welcome, {{ user.username }}!</h1>
+            <p class="subtitle">Here's an overview of your ResumeRanker API activity.</p>
 
-<a href="{{ url_for('auth.logout') }}" class="btn btn-danger">Logout</a>
+            {% if error %}
+            <div class="error-message">{{ error }}</div>
+            {% endif %}
 
-<script>
-function copyApiKey() {
-  const input = document.getElementById("apiKey");
-  input.select();
-  input.setSelectionRange(0, 99999); // For mobile
-  document.execCommand("copy");
-  alert("API key copied to clipboard!");
-}
-</script>
+            {% if success %}
+            <div class="success-message">{{ success }}</div>
+            {% endif %}
 
+            <div class="analytics-grid">
+                <div class="analytics-card">
+                    <p class="card-label">Average Score</p>
+                    <h2 class="card-value">{{ analytics.average_score | default('N/A') }}</h2>
+                </div>
+                <div class="analytics-card">
+                    <p class="card-label">Top Resume</p>
+                    <h2 class="card-value">{{ analytics.top_resume | default('N/A') }}</h2>
+                </div>
+                <div class="analytics-card">
+                    <p class="card-label">Last Upload</p>
+                    <h2 class="card-value">{{ analytics.last_upload_date | default('N/A') }}</h2>
+                </div>
+            </div>
+
+            <div class="section-card api-key-section">
+                <h3 class="section-title">Your API Key</h3>
+                <p class="section-description">Use this key to authenticate your requests to the ResumeRanker API.</p>
+                <div class="input-group">
+                    <input type="text" class="form-input" id="apiKey" value="{{ user.api_key }}" readonly>
+                    <button class="btn primary-btn copy-btn" type="button" onclick="copyApiKey()">Copy</button>
+                </div>
+                <form method="POST" action="{{ url_for('auth.regenerate_api_key') }}" class="api-key-form">
+                    <button class="btn secondary-btn">Regenerate API Key</button>
+                </form>
+                <p class="docs-link"><a href="{{ url_for('auth.docs') }}">📘 View API Documentation</a></p>
+            </div>
+
+            <div class="section-card upload-section">
+                <h3 class="section-title">Upload Resumes</h3>
+                <p class="section-description">Drag and drop your resume files here, or click to browse.</p>
+                <div class="drop-area" id="dropArea">
+                    <input type="file" id="fileInput" multiple accept=".pdf,.doc,.docx" style="display: none;">
+                    <p>Drag & Drop files or <span class="browse-link">Click to browse</span></p>
+                    <ul id="fileList" class="uploaded-files-list"></ul>
+                </div>
+                <button class="btn primary-btn upload-now-btn" id="uploadNowBtn" style="display: none;">Upload Now</button>
+            </div>
+
+            <div class="section-card recent-uploads-section">
+                <h3 class="section-title">Recent Uploads</h3>
+                {% if recent_uploads %}
+                <div class="table-responsive">
+                    <table class="data-table">
+                        <thead>
+                            <tr>
+                                <th>Resume Name</th>
+                                <th>Score</th>
+                                <th>Uploaded Date</th>
+                                <th>Action</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {% for resume in recent_uploads %}
+                            <tr>
+                                <td data-label="Resume Name">{{ resume.name }}</td>
+                                <td data-label="Score">{{ resume.score }}</td>
+                                <td data-label="Uploaded Date">{{ resume.uploaded_date }}</td>
+                                <td data-label="Action"><a href="{{ url_for('auth.view_result', resume_id=resume.id) }}" class="btn small-btn view-btn">View Result</a></td>
+                            </tr>
+                            {% endfor %}
+                        </tbody>
+                    </table>
+                </div>
+                {% else %}
+                <p class="no-data-message">No recent uploads yet. Start by uploading a resume!</p>
+                {% endif %}
+            </div>
+        </div>
+    </div>
+</div>
 {% endblock %}
 
+{% block extra_scripts %}
+<script>
+    // Theme toggle (specific to dashboard header)
+    const themeToggleDashboard = document.getElementById('themeToggleDashboard');
+    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+    function setTheme(theme) {
+        document.documentElement.setAttribute('data-theme', theme);
+        localStorage.setItem('theme', theme);
+        themeToggleDashboard.textContent = theme === 'dark' ? '☀️' : '🌙';
+    }
+    const savedTheme = localStorage.getItem('theme');
+    setTheme(savedTheme || (prefersDark ? 'dark' : 'light'));
+    themeToggleDashboard.onclick = () => {
+        const current = document.documentElement.getAttribute('data-theme');
+        setTheme(current === 'dark' ? 'light' : 'dark');
+    };
+
+    // Sidebar toggle for mobile
+    const hamburgerDashboard = document.getElementById('hamburgerDashboard');
+    const sidebar = document.getElementById('sidebar');
+    const mainContentArea = document.getElementById('mainContentArea');
+    const closeSidebarBtn = document.getElementById('closeSidebar');
+
+    hamburgerDashboard.onclick = () => {
+        sidebar.classList.add('open');
+        mainContentArea.classList.add('shifted');
+    };
+    closeSidebarBtn.onclick = () => {
+        sidebar.classList.remove('open');
+        mainContentArea.classList.remove('shifted');
+    };
+    // Close sidebar if click outside on mobile
+    mainContentArea.onclick = (event) => {
+        if (sidebar.classList.contains('open') && !sidebar.contains(event.target) && !hamburgerDashboard.contains(event.target)) {
+            sidebar.classList.remove('open');
+            mainContentArea.classList.remove('shifted');
+        }
+    };
+    // Close sidebar when clicking a nav item on mobile
+    Array.from(sidebar.getElementsByClassName('nav-item')).forEach(item => {
+        item.onclick = () => {
+            if (window.innerWidth <= 900) { // Assuming 900px is your mobile breakpoint
+                sidebar.classList.remove('open');
+                mainContentArea.classList.remove('shifted');
+            }
+        };
+    });
+
+
+    // API Key Copy function
+    function copyApiKey() {
+        const input = document.getElementById("apiKey");
+        input.select();
+        input.setSelectionRange(0, 99999); // For mobile
+        document.execCommand("copy");
+        // Add a more subtle visual feedback like a tooltip or temporary text change
+        const originalText = document.querySelector('.copy-btn').textContent;
+        document.querySelector('.copy-btn').textContent = 'Copied!';
+        setTimeout(() => {
+            document.querySelector('.copy-btn').textContent = originalText;
+        }, 1500);
+    }
+
+    // Drag and Drop / File Upload Logic
+    const dropArea = document.getElementById('dropArea');
+    const fileInput = document.getElementById('fileInput');
+    const fileList = document.getElementById('fileList');
+    const uploadNowBtn = document.getElementById('uploadNowBtn');
+    let filesToUpload = [];
+
+    dropArea.addEventListener('click', () => fileInput.click());
+
+    dropArea.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        dropArea.classList.add('drag-over');
+    });
+
+    dropArea.addEventListener('dragleave', () => {
+        dropArea.classList.remove('drag-over');
+    });
+
+    dropArea.addEventListener('drop', (e) => {
+        e.preventDefault();
+        dropArea.classList.remove('drag-over');
+        handleFiles(e.dataTransfer.files);
+    });
+
+    fileInput.addEventListener('change', (e) => {
+        handleFiles(e.target.files);
+    });
+
+    function handleFiles(files) {
+        filesToUpload = [...filesToUpload, ...Array.from(files)];
+        fileList.innerHTML = ''; // Clear current list before repopulating
+        filesToUpload.forEach(file => {
+            const listItem = document.createElement('li');
+            listItem.textContent = file.name;
+            fileList.appendChild(listItem);
+        });
+        if (filesToUpload.length > 0) {
+            uploadNowBtn.style.display = 'block';
+        }
+    }
+
+    uploadNowBtn.addEventListener('click', () => {
+        // Here you would implement your actual file upload logic using Fetch API or XMLHttpRequest
+        console.log('Uploading files:', filesToUpload);
+        alert('Files are ready to be uploaded! (Implement actual upload via AJAX/Fetch)');
+        // Example: Clear after simulated upload
+        filesToUpload = [];
+        fileList.innerHTML = '';
+        uploadNowBtn.style.display = 'none';
+    });
+
+</script>
+{% endblock %}