fix: re-add groups module registration to states.coffee and angularjs

src/app/doubtfire-angular.module.ts

@@ -229,6 +229,7 @@ import {TaskDefinitionResourcesComponent} from './units/states/edit/directives/u
 import {TaskDefinitionOverseerComponent} from './units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-overseer/task-definition-overseer.component';
 import {TaskDefinitionScormComponent} from './units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-scorm/task-definition-scorm.component';
 import {UnitAnalyticsComponent} from './units/states/analytics/unit-analytics-route.component';
+import {UnitGroupsStateComponent} from './units/states/groups/groups.component';
 import {FileDropComponent} from './common/file-drop/file-drop.component';
 import {UnitTaskEditorComponent} from './units/states/edit/directives/unit-tasks-editor/unit-task-editor.component';
 import {FUsersComponent} from './admin/states/f-users/f-users.component';
@@ -408,6 +409,7 @@ const GANTT_CHART_CONFIG = {
     TaskDefinitionOverseerComponent,
     TaskDefinitionScormComponent,
     UnitAnalyticsComponent,
+    UnitGroupsStateComponent,
     StudentTutorialSelectComponent,
     StudentCampusSelectComponent,
     TaskListItemComponent,

src/app/doubtfire-angularjs.module.ts

@@ -205,6 +205,7 @@ import {TaskSubmissionCardComponent} from './projects/states/dashboard/directive
 import {InboxComponent} from './units/states/tasks/inbox/inbox.component';
 import {TaskDefinitionEditorComponent} from './units/states/edit/directives/unit-tasks-editor/task-definition-editor/task-definition-editor.component';
 import {UnitAnalyticsComponent} from './units/states/analytics/unit-analytics-route.component';
+import {UnitGroupsStateComponent} from './units/states/groups/groups.component';
 import {UnitTaskEditorComponent} from './units/states/edit/directives/unit-tasks-editor/unit-task-editor.component';
 import {CreateNewUnitModal} from './admin/modals/create-new-unit-modal/create-new-unit-modal.component';
 import {FUsersComponent} from './admin/states/f-users/f-users.component';
@@ -380,6 +381,10 @@ DoubtfireAngularJSModule.directive(
   'fUnitAnalytics',
   downgradeComponent({component: UnitAnalyticsComponent}),
 );
+DoubtfireAngularJSModule.directive(
+  'fUnitGroups',
+  downgradeComponent({component: UnitGroupsStateComponent}),
+);
 DoubtfireAngularJSModule.directive(
   'extensionComment',
   downgradeComponent({component: ExtensionCommentComponent}),

src/app/units/states/groups/groups.coffee

@@ -6,15 +6,10 @@ angular.module('doubtfire.units.states.groups', [])
   $stateProvider.state 'units/students/groups', {
     parent: 'units/index'
     url: '/students/groups'
-    templateUrl: "units/states/groups/groups.tpl.html"
-    controller: "UnitGroupsStateCtrl"
+    template: "<f-unit-groups [unit]='unit' [unit-role]='unitRole'></f-unit-groups>"
     data:
       task: "Student Groups"
       pageTitle: "_Home_"
       roleWhitelist: ['Tutor', 'Convenor', 'Admin', 'Auditor']
    }
 )
-.controller("UnitGroupsStateCtrl", ($scope) ->
-  # No controller needed if there is no groupwork
-  return unless $scope.unit.hasGroupwork()
-)

src/app/units/states/groups/groups.component.html

@@ -0,0 +1,22 @@
+@if (unit.hasGroupwork()) {
+  <group-set-manager
+    class="row"
+    [unit]="unit"
+    [unitRole]="unitRole"
+    [selectedGroupSet]="selectedGroupSet">
+  </group-set-manager>
+} @else {
+  <div class="flex flex-col items-center justify-center gap-4 mt-8">
+    <mat-icon class="text-6xl text-gray-400" style="font-size: 64px; width: 64px; height: 64px;" aria-hidden="true">group</mat-icon>
+    <p class="text-xl font-medium text-gray-600">No Groupwork Enabled</p>
+    <p class="text-center text-gray-500 max-w-md">
+      There is no group work enabled for this unit. Convenors should create at
+      least one group set first for groups to be created. This can be found under
+      the groups tab in the unit administration settings.
+    </p>
+    <a mat-stroked-button [uiSref]="'units/admin'" [uiParams]="{unitId: unit.id}">
+      <mat-icon aria-hidden="true">settings</mat-icon>
+      Unit Administration
+    </a>
+  </div>
+}

src/app/units/states/groups/groups.component.scss

@@ -0,0 +1 @@
+// No custom styles needed — layout handled via Tailwind/Angular Material utilities

src/app/units/states/groups/groups.component.ts

@@ -0,0 +1,13 @@
+import {Component, Input} from '@angular/core';
+import {Unit} from 'src/app/api/models/unit';
+import {UnitRole} from 'src/app/api/models/unit-role';
+
+@Component({
+  selector: 'f-unit-groups',
+  templateUrl: 'groups.component.html',
+  styleUrls: ['groups.component.scss'],
+})
+export class UnitGroupsStateComponent {
+  @Input() unit: Unit;
+  @Input() unitRole: UnitRole;
+}