analytics.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Analytics - TaskFlash</title>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet">
  <link rel="stylesheet" href="hcss.css">
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <style>
    .analytics-container {
      max-width: 1200px;
      margin: 3rem auto;
      padding: 1rem;
    }

    .analytics-container h2 {
      text-align: center;
      margin-bottom: 2rem;
      color: var(--primary-dark);
    }

    .stats-bar {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 1.5rem;
      margin-bottom: 3rem;
    }

    .stat-box {
      background: var(--surface);
      padding: 2rem;
      border-radius: 1rem;
      text-align: center;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .stat-number {
      font-size: 2rem;
      font-weight: bold;
      color: var(--primary);
    }

    .charts {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
      gap: 2rem;
      margin-bottom: 3rem;
    }

    .chart-card {
      background: var(--surface);
      padding: 1.5rem;
      border-radius: 1rem;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    }

    .progress-section {
      background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
      padding: 2rem;
      border-radius: 1rem;
      text-align: center;
    }

    .progress-bar {
      height: 20px;
      background: #ddd;
      border-radius: 10px;
      overflow: hidden;
      margin-top: 1rem;
    }

    .progress-fill {
      height: 100%;
      background: var(--primary);
      width: 0;
      transition: width 0.5s ease-in-out;
    }

    .quote-section {
      margin-top: 2rem;
      text-align: center;
      font-style: italic;
      color: var(--primary-dark);
    }

    .nav-links a {
      text-decoration: none;
      margin: 0 0.8rem;
      color: var(--text-primary);
      font-weight: 500;
    }

    .nav-links a:hover {
      color: var(--primary);
    }
  </style>
</head>

<body>
  <!-- Navbar -->
  <nav class="navbar">
    <div class="nav-content">
      <a href="index.html" class="logo">
        <i class="fas fa-tasks"></i> TaskFlash
      </a>
      <div class="nav-links">
        <a href="index.html">Home</a>
        <a href="tasks.html">My Tasks</a>
        <a href="profile.html">Profile</a>
        <a href="analytics.html" class="active">Analytics</a>
        <button type="button" class="btn btn-primary" onclick="logout()">Logout</button>

      </div>
    </div>
  </nav>

  <!-- Analytics -->
  <div class="analytics-container">
    <h2>Task Analytics Dashboard</h2>

    <!-- Stats Summary -->
    <div class="stats-bar">
      <div class="stat-box">
        <div class="stat-number" id="totalTasks">0</div>
        <div>Total Tasks</div>
      </div>
      <div class="stat-box">
        <div class="stat-number" id="completedTasks">0</div>
        <div>Completed</div>
      </div>
      <div class="stat-box">
        <div class="stat-number" id="pendingTasks">0</div>
        <div>Pending</div>
      </div>
      <div class="stat-box">
        <div class="stat-number" id="completionRate">0%</div>
        <div>Completion Rate</div>
      </div>
    </div>

    <!-- Charts -->
    <div class="charts">
      <div class="chart-card">
        <h3>Completed vs Pending</h3>
        <canvas id="pieChart"></canvas>
      </div>
      <div class="chart-card">
        <h3>Tasks by Urgency</h3>
        <canvas id="barChart"></canvas>
      </div>
      <div class="chart-card">
        <h3>Tasks Completed Over Time</h3>
        <canvas id="lineChart"></canvas>
      </div>
    </div>

    <!-- Progress -->
    <div class="progress-section">
      <h3>Weekly Productivity</h3>
      <div class="progress-bar">
        <div class="progress-fill" id="progressFill"></div>
      </div>
    </div>

    <!-- Quote -->
    <div class="quote-section" id="quote">
      “Data turns into insights, and insights drive productivity.”
    </div>
  </div>

  <script>
    function loadAnalytics() {
      const tasks = JSON.parse(localStorage.getItem("tasks")) || [];

      const total = tasks.length;
      const completed = tasks.filter(t => t.completed).length;
      const pending = total - completed;

      // Stats
      document.getElementById("totalTasks").innerText = total;
      document.getElementById("completedTasks").innerText = completed;
      document.getElementById("pendingTasks").innerText = pending;
      document.getElementById("completionRate").innerText = total > 0 ? Math.round((completed / total) * 100) + "%" : "0%";

      // Pie Chart
      new Chart(document.getElementById("pieChart"), {
        type: "pie",
        data: {
          labels: ["Completed", "Pending"],
          datasets: [{
            data: [completed, pending],
            backgroundColor: ["#4CAF50", "#FF5252"]
          }]
        }
      });

      // Bar Chart (Urgency)
      const urgencyCounts = { High: 0, Medium: 0, Low: 0 };
      tasks.forEach(t => { urgencyCounts[t.urgency] = (urgencyCounts[t.urgency] || 0) + 1; });

      new Chart(document.getElementById("barChart"), {
        type: "bar",
        data: {
          labels: ["High", "Medium", "Low"],
          datasets: [{
            label: "Tasks",
            data: [urgencyCounts.High, urgencyCounts.Medium, urgencyCounts.Low],
            backgroundColor: ["#FF3B30", "#FF9500", "#34C759"]
          }]
        }
      });

      // Line Chart (Tasks Completed Over Time)
      const dateMap = {};
      tasks.forEach(t => {
        if (t.completed && t.dueDatetime) {
          const date = new Date(t.dueDatetime).toLocaleDateString();
          dateMap[date] = (dateMap[date] || 0) + 1;
        }
      });
      const labels = Object.keys(dateMap);
      const values = Object.values(dateMap);

      new Chart(document.getElementById("lineChart"), {
        type: "line",
        data: {
          labels,
          datasets: [{
            label: "Completed Tasks",
            data: values,
            borderColor: "#007AFF",
            fill: false,
            tension: 0.3
          }]
        }
      });

      // Weekly Productivity (progress bar)
      const weeklyCompleted = tasks.filter(t => {
        if (!t.completed || !t.dueDatetime) return false;
        const d = new Date(t.dueDatetime);
        const now = new Date();
        const oneWeekAgo = new Date();
        oneWeekAgo.setDate(now.getDate() - 7);
        return d >= oneWeekAgo && d <= now;
      }).length;

      const weeklyTarget = 10; // Example target
      const progress = Math.min((weeklyCompleted / weeklyTarget) * 100, 100);
      document.getElementById("progressFill").style.width = progress + "%";

      // Random quote
      const quotes = [
        "Data turns into insights, and insights drive productivity.",
        "Analyze your tasks, optimize your results.",
        "Every chart tells the story of your work ethic.",
        "Productivity is measurable — let’s improve it!"
      ];
      document.getElementById("quote").innerText = quotes[Math.floor(Math.random() * quotes.length)];
    }

    document.addEventListener("DOMContentLoaded", loadAnalytics);
    function logout() {
      localStorage.removeItem("loggedInUser");
      alert("Logged out successfully!");
      window.location.href = "login.html";
    }

  </script>
</body>

</html>