add core progress indicator

src/app/common/header/task-dropdown/task-dropdown.component.html

@@ -63,6 +63,14 @@
         >
           <mat-icon aria-label="Dashboard icon" fontIcon="dashboard"></mat-icon> Dashboard
         </button>
+        <button
+          uiSref="projects/core-progress-indicator"
+          [uiParams]="{projectId: currentProject.id, taskAbbr: ''}"
+          mat-menu-item
+        >
+          <mat-icon fontIcon="trending_up"></mat-icon> Peer Progress
+        </button>
+
         <mat-divider></mat-divider>
         <button
           uiSref="projects/outcomes"

src/app/doubtfire-angularjs.module.ts

@@ -68,6 +68,8 @@ import 'build/src/app/projects/states/groups/groups.js';
 import 'build/src/app/projects/states/feedback/feedback.js';
 import 'build/src/app/projects/states/states.js';
 import 'build/src/app/projects/states/dashboard/directives/progress-dashboard/progress-dashboard.js';
+import 'build/src/app/projects/states/dashboard/directives/core-progress-indicator/core-progress-indicator.js';
+import 'build/src/app/projects/states/core-progress-indicator/core-progress-indicator.js';
 import 'build/src/app/projects/states/dashboard/directives/student-task-list/student-task-list.js';
 import 'build/src/app/projects/states/dashboard/directives/directives.js';
 import 'build/src/app/projects/states/dashboard/directives/task-dashboard/task-dashboard.js';

src/app/projects/states/core-progress-indicator/core-progress-indicator.coffee

@@ -0,0 +1,14 @@
+angular.module('doubtfire.projects.states.core-progress-indicator', [])
+
+.config ($stateProvider) ->
+  $stateProvider.state 'projects/core-progress-indicator',
+    parent: 'projects/index'
+    url: '/peer-progress'
+    controller: 'CoreProgressIndicatorStateCtrl'
+    templateUrl: 'projects/states/core-progress-indicator/core-progress-indicator.tpl.html'
+    data:
+      task: "Peer Progress"
+      pageTitle: "_Home_"
+      roleWhitelist: ['Student']
+
+.controller 'CoreProgressIndicatorStateCtrl', ($scope) ->

src/app/projects/states/core-progress-indicator/core-progress-indicator.tpl.html

@@ -0,0 +1,19 @@
+<div class="peer-progress-page">
+  <h1>Peer Progress</h1>
+  <p class="peer-progress-subtitle">
+    {{project.unit.code}} — {{project.unit.name}}
+  </p>
+
+  <div class="card card-default peer-progress-card">
+    <div class="card-heading">
+      <h4>Progress Summary</h4>
+      <div class="text-muted">
+        Track your progress toward your selected target grade based on completed tasks.
+      </div>
+    </div>
+
+    <div class="card-body">
+      <core-progress-indicator project="project"></core-progress-indicator>
+    </div>
+  </div>
+</div>

src/app/projects/states/dashboard/directives/core-progress-indicator/core-progress-indicator.coffee

@@ -0,0 +1,28 @@
+angular.module('doubtfire.projects.states.dashboard.directives.core-progress-indicator', [])
+
+.directive 'coreProgressIndicator', ['$http', 'DoubtfireConstants', ($http, DoubtfireConstants) ->
+  restrict: 'E'
+  scope:
+    project: '='
+  templateUrl: 'projects/states/dashboard/directives/core-progress-indicator/core-progress-indicator.tpl.html'
+
+  link: (scope) ->
+    scope.progress = null
+    scope.error = null
+
+    scope.$watch 'project', (project) ->
+      return unless project?
+
+      unitId = project.unit_id || project.unit?.id
+      studentId = project.user_id || project.user?.id || project.student?.id
+
+
+      return unless unitId? && studentId?
+
+      $http.get("#{DoubtfireConstants.API_URL}/peer_progress/#{unitId}/#{studentId}")
+        .then (res) ->
+          scope.progress = res.data
+          scope.error = null
+        .catch ->
+          scope.error = 'Unable to load progress data.'
+]

src/app/projects/states/dashboard/directives/core-progress-indicator/core-progress-indicator.tpl.html

@@ -0,0 +1,34 @@
+<div ng-if="error" class="peer-progress-error">
+  {{error}}
+</div>
+
+<div ng-if="!progress && !error">
+  Loading progress...
+</div>
+
+<div ng-if="progress" class="peer-progress-summary">
+  <div class="peer-progress-stat">
+    <div class="peer-progress-stat-value">{{progress.target_grade}}</div>
+    <div class="peer-progress-stat-label">Target grade</div>
+  </div>
+
+  <div class="peer-progress-stat">
+    <div class="peer-progress-stat-value">{{progress.tasks_completed}}</div>
+    <div class="peer-progress-stat-label">Tasks completed</div>
+  </div>
+
+  <div class="peer-progress-stat">
+    <div class="peer-progress-stat-value">{{progress.progress_percentage}}%</div>
+    <div class="peer-progress-stat-label">Progress</div>
+  </div>
+
+  <div class="peer-progress-bar-row">
+    <div class="peer-progress-bar">
+      <div
+        class="peer-progress-bar-fill"
+        ng-style="{ width: progress.progress_percentage + '%' }">
+      </div>
+    </div>
+    <strong>{{progress.tasks_completed}} / {{progress.tasks_required}}</strong>
+  </div>
+</div>

src/app/projects/states/dashboard/directives/directives.coffee

@@ -2,4 +2,5 @@ angular.module('doubtfire.projects.states.dashboard.directives', [
   'doubtfire.projects.states.dashboard.directives.student-task-list'
   'doubtfire.projects.states.dashboard.directives.progress-dashboard'
   'doubtfire.projects.states.dashboard.directives.task-dashboard'
+  'doubtfire.projects.states.dashboard.directives.core-progress-indicator'
 ])

src/app/projects/states/dashboard/directives/progress-dashboard/progress-dashboard.scss

@@ -0,0 +1,109 @@
+.card-core-progress-indicator {
+  margin-bottom: 16px;
+  min-height: unset;
+}
+
+.card-core-progress-indicator .card-body {
+  min-height: unset;
+}
+
+.core-progress-body {
+  padding: 14px 20px;
+}
+
+.core-progress-line {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-bottom: 8px;
+}
+
+.core-progress-line strong {
+  width: 150px;
+}
+
+.core-progress-bar {
+  display: inline-block;
+  width: 220px;
+  height: 18px;
+  background: #e5e5e5;
+  border: 1px solid #aaa;
+  overflow: hidden;
+}
+
+.core-progress-fill {
+  display: block;
+  height: 100%;
+  background: #3b6dbb;
+}
+
+.peer-progress-page {
+  max-width: 1200px;
+  margin: 32px auto;
+  padding: 0 24px;
+}
+
+.peer-progress-page h1 {
+  font-size: 28px;
+  font-weight: 600;
+  margin-bottom: 8px;
+}
+
+.peer-progress-subtitle {
+  font-size: 18px;
+  color: #444;
+  margin-bottom: 24px;
+}
+
+.peer-progress-card {
+  margin-bottom: 24px;
+}
+
+.peer-progress-summary {
+  display: grid;
+  gap: 18px;
+}
+
+.peer-progress-stat {
+  display: inline-block;
+  width: 31%;
+  margin-right: 2%;
+  padding: 18px 20px;
+  background: #f5f7ff;
+  border-radius: 4px;
+  vertical-align: top;
+}
+
+.peer-progress-stat-value {
+  font-size: 28px;
+  font-weight: 600;
+  color: #333;
+}
+
+.peer-progress-stat-label {
+  color: #666;
+  margin-top: 4px;
+}
+
+.peer-progress-bar-row {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+.peer-progress-bar {
+  flex: 1;
+  height: 18px;
+  background: #e5e5e5;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.peer-progress-bar-fill {
+  height: 100%;
+  background: #3b45f5;
+}
+
+.peer-progress-error {
+  color: #a94442;
+}

src/app/projects/states/dashboard/directives/progress-dashboard/progress-dashboard.tpl.html

@@ -4,7 +4,14 @@ <h4 class="panel-title">
       Progress Dashboard <span ng-show="tutor">for {{project.student.name}}</span>
     </h4>
   </div><!--/panel-heading-->
+
   <div class="panel-body">
+    <div class="col-sm-12 col-xl-12">
+      <div class="card">
+        <f-task-planner-card [project]="project"></f-task-planner-card>
+      </div>
+    </div>
+
     <div class="col-sm-12 col-xl-6">
       <div class="card card-default card-sm card-target-grade">
         <div class="card-heading">
@@ -19,13 +26,14 @@ <h4>Target Grade</h4>
             ng-change="updateTargetGrade(project.targetGrade)"></select>
         </div><!--/target-grade-body-->
       </div><!--/target-grade-card-->
+
       <div class="card card-default card-lg card-burndown">
         <div class="card-heading">
           <h4>Progress Burndown</h4>
           <div class="text-muted">
             The burndown chart shows how much work remains for you to achieve your target grade.
-          </div>
-        </div><!--/burndown-heading-->
+          </div><!--/burndown-heading-->
+        </div>
         <div class="card-body">
           <progress-burndown-chart project="project" unit="project.unit"></progress-burndown-chart>
         </div><!--/burndown-body-->
@@ -38,14 +46,15 @@ <h4>Progress Burndown</h4>
         </div><!--/burndown-footer-->
       </div><!--/burndown-card-->
     </div><!--/burndown-column-->
+
     <div class="col-sm-12 col-xl-6">
       <div class="card card-default card-lg card-pie-chart">
         <div class="card-heading">
           <h4>Task Statuses</h4>
           <div class="text-muted">
             Breakdown summary of each of your task statuses.
-          </div>
-        </div><!--/pie-chart-heading-->
+          </div><!--/pie-chart-heading-->
+        </div>
         <div class="card-body">
           <student-task-status-pie-chart
             project="project"

src/app/projects/states/states.coffee

@@ -5,4 +5,5 @@ angular.module('doubtfire.projects.states', [
   'doubtfire.projects.states.portfolio'
   'doubtfire.projects.states.groups'
   'doubtfire.projects.states.outcomes'
+  'doubtfire.projects.states.core-progress-indicator'
 ])