fix: update focus rings modal layouts

Author: CK-7vn

backend/src/database/class_enrollments.go

@@ -353,7 +353,7 @@ type EnrollmentDetails struct {
 func (db *DB) GetProgramClassEnrollmentsForProgram(args *models.QueryContext, classId int, status string) ([]EnrollmentDetails, error) {
 	content := make([]EnrollmentDetails, 0, args.PerPage)
 	search := args.SearchQuery()
-	tx := db.WithContext(args.Ctx).Table("program_class_enrollments pse").Select("pse.*, u.name_last || ', ' || u.name_first as name_full, u.doc_id, c.name as class_name, c.start_dt, pc.created_at as completion_dt").
+	tx := db.WithContext(args.Ctx).Table("program_class_enrollments pse").Select("pse.*, u.name_first || ' ' || u.name_last as name_full, u.doc_id, c.name as class_name, c.start_dt, pc.created_at as completion_dt").
 		Joins("JOIN program_classes c ON pse.class_id = c.id AND c.deleted_at IS NULL").
 		Joins("JOIN users u ON pse.user_id = u.id AND u.deleted_at IS NULL").
 		Joins("LEFT JOIN program_completions pc ON pc.user_id = pse.user_id AND pc.program_class_id = ?", classId).

frontend-v2/src/pages/class-detail/ChangeClassStatusModal.tsx

@@ -30,20 +30,30 @@ interface ChangeClassStatusModalProps {
     onStatusChanged: () => void;
 }
 
-const STATUS_TRANSITIONS: Record<string, SelectedClassStatus[]> = {
-    [SelectedClassStatus.Scheduled]: [
-        SelectedClassStatus.Active,
-        SelectedClassStatus.Cancelled
-    ],
-    [SelectedClassStatus.Active]: [
-        SelectedClassStatus.Paused,
-        SelectedClassStatus.Completed
-    ],
-    [SelectedClassStatus.Paused]: [
-        SelectedClassStatus.Active,
-        SelectedClassStatus.Cancelled
-    ]
-};
+const ALL_STATUSES: SelectedClassStatus[] = [
+    SelectedClassStatus.Active,
+    SelectedClassStatus.Scheduled,
+    SelectedClassStatus.Paused,
+    SelectedClassStatus.Completed,
+    SelectedClassStatus.Cancelled
+];
+
+function getStatusDescription(status: SelectedClassStatus): string {
+    switch (status) {
+        case SelectedClassStatus.Active:
+            return 'Class is currently running and accepting attendance.';
+        case SelectedClassStatus.Scheduled:
+            return 'Class is scheduled to begin in the future.';
+        case SelectedClassStatus.Paused:
+            return 'Class is temporarily paused and hidden from daily attendance.';
+        case SelectedClassStatus.Completed:
+            return 'Class has finished and is now archived.';
+        case SelectedClassStatus.Cancelled:
+            return 'Class has been cancelled and will not take place.';
+        default:
+            return '';
+    }
+}
 
 export function ChangeClassStatusModal({
     open,
@@ -58,8 +68,6 @@ export function ChangeClassStatusModal({
     const [newStatus, setNewStatus] = useState<SelectedClassStatus>(currentStatus);
     const [isSubmitting, setIsSubmitting] = useState(false);
 
-    const allowedStatuses = STATUS_TRANSITIONS[currentStatus] ?? [];
-
     useEffect(() => {
         if (open) {
             setNewStatus(currentStatus);
@@ -109,16 +117,16 @@ export function ChangeClassStatusModal({
                                 <SelectValue />
                             </SelectTrigger>
                             <SelectContent>
-                                <SelectItem value={currentStatus}>
-                                    {currentStatus} (current)
-                                </SelectItem>
-                                {allowedStatuses.map((s) => (
+                                {ALL_STATUSES.map((s) => (
                                     <SelectItem key={s} value={s}>
                                         {s}
                                     </SelectItem>
                                 ))}
                             </SelectContent>
                         </Select>
+                        <p className="text-xs text-gray-500 mt-2">
+                            {getStatusDescription(newStatus)}
+                        </p>
                     </div>
                     <div className="flex gap-2 justify-end pt-4">
                         <Button

frontend-v2/src/pages/class-detail/ChangeEnrollmentStatusModal.tsx

@@ -28,14 +28,14 @@ interface ChangeEnrollmentStatusModalProps {
     onStatusChange: (newStatus: EnrollmentStatus, reason: string) => void;
 }
 
-const NEEDS_REASON_STATUSES = new Set([
+const STATUSES_IN_ORDER: EnrollmentStatus[] = [
+    EnrollmentStatus.Enrolled,
+    EnrollmentStatus.Completed,
     EnrollmentStatus.Withdrawn,
     EnrollmentStatus.Dropped,
     EnrollmentStatus.Segregated,
-    EnrollmentStatus['Failed To Complete'],
-    EnrollmentStatus.Transfered,
-    EnrollmentStatus.Cancelled
-]);
+    EnrollmentStatus['Failed To Complete']
+];
 
 export function ChangeEnrollmentStatusModal({
     open,
@@ -56,7 +56,9 @@ export function ChangeEnrollmentStatusModal({
         }
     }, [open, currentStatus]);
 
-    const needsReason = NEEDS_REASON_STATUSES.has(newStatus);
+    const needsReason =
+        newStatus !== EnrollmentStatus.Enrolled &&
+        newStatus !== EnrollmentStatus.Completed;
     const canSubmit =
         newStatus !== currentStatus && (!needsReason || reason.trim().length > 0);
 
@@ -65,6 +67,10 @@ export function ChangeEnrollmentStatusModal({
         onClose();
     };
 
+    const displayStatuses = STATUSES_IN_ORDER.filter(
+        (s) => s === currentStatus || allowedStatuses.includes(s)
+    );
+
     return (
         <Dialog open={open} onOpenChange={(isOpen) => !isOpen && onClose()}>
             <DialogContent className="max-w-md">
@@ -88,10 +94,7 @@ export function ChangeEnrollmentStatusModal({
                                 <SelectValue />
                             </SelectTrigger>
                             <SelectContent>
-                                <SelectItem value={currentStatus}>
-                                    {currentStatus}
-                                </SelectItem>
-                                {allowedStatuses.map((status) => (
+                                {displayStatuses.map((status) => (
                                     <SelectItem key={status} value={status}>
                                         {status}
                                     </SelectItem>
@@ -102,11 +105,11 @@ export function ChangeEnrollmentStatusModal({
                     {needsReason && (
                         <div>
                             <Label htmlFor="reason">
-                                Reason for Status Change *
+                                Reason for Incompletion *
                             </Label>
                             <Textarea
                                 id="reason"
-                                placeholder="Explain why this resident's status is being changed..."
+                                placeholder="Explain why this resident did not complete the class..."
                                 value={reason}
                                 onChange={(e) => setReason(e.target.value)}
                                 rows={4}