feat(dashboard): create skeleton dashboard page

src/app/dashboard/f-cross-dashboard.component.html

@@ -0,0 +1,19 @@
+<div class="panel-full-screen flex flex-row gap-8 px-16 overflow-x-auto">
+  <div *ngFor="let unit of units">
+    <div class="flex flex-col w-[34rem] shadow">
+      <div class="flex flex-row items-center gap-4 w-full bg-formatif-blue p-4 rounded-md">
+        <h3 class="m-0 flex-grow text-white truncate min-w-0">{{ unit.code }}</h3>
+        <input
+          type="text"
+          class="h-full w-64 p-2 px-4 text-md rounded-md"
+          placeholder="Search tasks..."
+        />
+        <mat-icon style="color: white">sort</mat-icon>
+        <mat-icon style="color: white">filter_list_alt</mat-icon>
+      </div>
+
+      <!-- <div *ngFor="let task of unit.tasks">
+      </div> -->
+    </div>
+  </div>
+</div>

src/app/dashboard/f-cross-dashboard.component.ts

@@ -0,0 +1,41 @@
+import {Component, OnInit} from '@angular/core';
+import {Unit} from 'src/app/api/models/unit';
+import {GlobalStateService} from 'src/app/projects/states/index/global-state.service';
+
+type IUnits = {
+  id: number;
+  code: string;
+  name: string;
+  // tasks: ITask[];
+};
+
+@Component({
+  selector: 'f-cross-dashboard',
+  templateUrl: './f-cross-dashboard.component.html',
+  styleUrls: ['./f-cross-dashboard.component.scss'],
+})
+export class CrossDashboardComponent implements OnInit {
+  constructor(private globalStateService: GlobalStateService) {}
+
+  units: IUnits[] = [];
+
+  ngOnInit(): void {
+    this.globalStateService.onLoad(() => {
+      this.globalStateService.loadedUnits.values.subscribe((units) => {
+        this.units = this.mapUnits(units);
+      });
+    });
+  }
+
+  mapUnit(unit: Unit): IUnits {
+    return {
+      id: unit.id,
+      code: unit.code,
+      name: unit.name,
+    };
+  }
+
+  mapUnits(units: readonly Unit[]) {
+    return units.map((unit) => this.mapUnit(unit));
+  }
+}

src/app/doubtfire-angular.module.ts

@@ -324,6 +324,7 @@ import {TutorNotesModalComponent} from './common/modals/tutor-notes-modal/tutor-
 import {FeedbackAppealModalComponent} from './tasks/modals/feedback-appeal-modal/feedback-appeal-modal.component';
 import {ConfirmModerationModalComponent} from './units/states/tasks/inbox/directives/moderation/confirm-moderation-modal/confirm-moderation-modal.component';
 import {TaskClaimComponent} from './units/states/tasks/inbox/directives/task-claim/task-claim.component';
+import {CrossDashboardComponent} from './dashboard/f-cross-dashboard.component';
 
 // See https://stackoverflow.com/questions/55721254/how-to-change-mat-datepicker-date-format-to-dd-mm-yyyy-in-simplest-way/58189036#58189036
 const MY_DATE_FORMAT = {
@@ -394,6 +395,7 @@ const GANTT_CHART_CONFIG = {
     ProjectPlanComponent,
     SuccessCloseComponent,
     HomeComponent,
+    CrossDashboardComponent,
     CommentBubbleActionComponent,
     UnitTutorialsListComponent,
     UnitTutorialsManagerComponent,

src/app/doubtfire.states.ts

@@ -15,6 +15,7 @@ import {ProjectPlanComponent} from './projects/states/plan/project-plan.componen
 import {JplagReportViewerComponent} from './projects/states/jplag/jplag-report-viewer.component';
 import {LtiDashboardComponent} from './home/states/lti-dashboard/lti-dashboard.component';
 import {LtiUnitLinkComponent} from './home/states/lti-unit-link/lti-unit-link.component';
+import {CrossDashboardComponent} from './dashboard/f-cross-dashboard.component';
 /*
  * Use this file to store any states that are sourced by angular components.
  */
@@ -69,6 +70,23 @@ const HomeState: NgHybridStateDeclaration = {
   },
 };
 
+/**
+ * Define the state for the cross-unit dashboard.
+ */
+const CrossDashboard: NgHybridStateDeclaration = {
+  name: 'crossdashboard',
+  url: '/dashboard',
+  views: {
+    main: {
+      component: CrossDashboardComponent,
+    },
+  },
+  data: {
+    pageTitle: 'Dashboard',
+    roleWhitelist: ['Student'],
+  },
+};
+
 // const unitParentState: NgHybridStateDeclaration = {
 //   name: 'units',
 //   url: '/units/:unit_id',
@@ -581,6 +599,7 @@ export const doubtfireStates = [
   institutionSettingsState,
   TeachingPeriodsState,
   HomeState,
+  CrossDashboard,
   WelcomeState,
   SignInState,
   EditProfileState,

src/app/home/states/home/home.component.html

@@ -119,7 +119,7 @@ <h2>Enrolled units</h2>
         </div>
         <!--Start for two buttons All for dashboard and All for all prev Units-->
         <div class="flex flex-col justify-around items-start h-60">
-          <a uiSref="view-all-projects">
+          <a uiSref="crossdashboard">
             <button
               matTooltip="View current units"
               matTooltipPosition="above"