-
-
- Class Details
-
-
-
-
-
-
- Class
-
-
- {className}
-
- {programName && (
-
- {programName}
-
- )}
-
-
-
-
-
-
- Time
-
-
- {formatClassTimeRange(classTime)}
-
-
-
-
-
-
-
- Room
-
-
- {originalRoom ?? room}
-
-
-
- {(originalInstructorName ?? instructorName) && (
-
-
-
-
- Instructor
-
-
- {originalInstructorName ?? instructorName}
-
-
-
- )}
-
-
- {(isCancelled ||
- isCancelledReschedule ||
- isRescheduledFrom ||
- isRescheduledTo ||
- hasAttendance ||
- (!isCancelled && (originalInstructorName ?? originalRoom))) && (
-
-
- Status
-
-
-
- {!isCancelled && originalInstructorName && instructorName && (
-
-
-
-
Instructor Change
-
- Session Instructor: {instructorName}
-
-
-
- )}
-
- {!isCancelled && originalRoom && (
-
-
-
-
Room Change
-
- Session Room: {room}
-
-
-
- )}
-
- {isCancelledReschedule && (
-
-
-
-
-
-
- Class Cancelled
-
- {cancellationReason && (
-
- {cancellationReason}
-
- )}
-
-
-
-
- {rescheduledDate && (
-
-
-
-
-
- Rescheduled Class
-
-
- Originally scheduled for{' '}
- {new Date(rescheduledDate + 'T00:00:00').toLocaleDateString('en-US', {
- weekday: 'long',
- month: 'long',
- day: 'numeric'
- })}
-
-
-
-
-
- )}
-
- )}
-
- {isRescheduledFrom && !isRescheduledTo && rescheduledDate && (
-
-
-
-
-
- Class Rescheduled
-
-
- Moved to{' '}
- {new Date(rescheduledDate + 'T00:00:00').toLocaleDateString('en-US', {
- weekday: 'long',
- month: 'long',
- day: 'numeric'
- })}
-
-
-
-
-
- )}
-
- {isRescheduledTo && (
-
-
-
-
-
- Rescheduled Class
-
- {rescheduledDate && (
-
- Originally scheduled for{' '}
- {new Date(rescheduledDate + 'T00:00:00').toLocaleDateString('en-US', {
- weekday: 'long',
- month: 'long',
- day: 'numeric'
- })}
-
- )}
-
-
-
-
- )}
-
- {isCancelled && (
-
-
-
-
-
- Class Cancelled
-
- {cancellationReason && (
-
- {cancellationReason}
-
- )}
-
-
-
-
- )}
-
- {hasAttendance && (
-
-
-
-
-
- Attendance Taken
-
-
- This class cannot be
- modified because attendance
- has been recorded.
-
-
-
-
- )}
-
-
- )}
-
- {(canModify || showTakeAttendance) && (
-
-
- Actions
-
-
- {showTakeAttendance && onTakeAttendance && (
-
- )}
- {canModify && (
- <>
-
-
-
-
-
- )}
-
-
- )}
-
- {onViewClassDetails && !isCancelled && (
-
-
-
- )}
+
+
+
+
+
+ {
+ if (onReschedule) onReschedule();
+ else setShowRescheduleModal(true);
+ }}
+ onCancelClick={() => setShowCancelModal(true)}
+ onChangeInstructorClick={() =>
+ setShowChangeInstructor(true)
+ }
+ onChangeRoomClick={() => setShowChangeRoom(true)}
+ onViewClassDetails={onViewClassDetails}
+ />
diff --git a/frontend/src/components/schedule/SessionDetailStatusSection.tsx b/frontend/src/components/schedule/SessionDetailStatusSection.tsx
new file mode 100644
index 000000000..4b9231955
--- /dev/null
+++ b/frontend/src/components/schedule/SessionDetailStatusSection.tsx
@@ -0,0 +1,252 @@
+import { CalendarOff, CalendarClock, CheckCircle, MapPin, Users } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+interface SessionDetailStatusSectionProps {
+ isCancelled: boolean;
+ isCancelledReschedule: boolean;
+ isRescheduledFrom: boolean;
+ isRescheduledTo: boolean;
+ hasAttendance: boolean;
+
+ originalInstructorName?: string;
+ instructorName?: string;
+ originalRoom?: string;
+ room: string;
+ cancellationReason?: string;
+ rescheduledDate?: string;
+ cancellationActionLabel: string;
+
+ onUndo: () => void;
+ onUndoCancel?: () => void;
+ onUndoReschedule?: () => void;
+ onClose: () => void;
+}
+
+export function SessionDetailStatusSection({
+ isCancelled,
+ isCancelledReschedule,
+ isRescheduledFrom,
+ isRescheduledTo,
+ hasAttendance,
+ originalInstructorName,
+ instructorName,
+ originalRoom,
+ room,
+ cancellationReason,
+ rescheduledDate,
+ cancellationActionLabel,
+ onUndo,
+ onUndoCancel,
+ onUndoReschedule,
+ onClose
+}: SessionDetailStatusSectionProps) {
+ const visible =
+ isCancelled ||
+ isCancelledReschedule ||
+ isRescheduledFrom ||
+ isRescheduledTo ||
+ hasAttendance ||
+ (!isCancelled && (originalInstructorName ?? originalRoom));
+
+ if (!visible) return null;
+
+ return (
+
+
+ Status
+
+
+
+ {!isCancelled && originalInstructorName && instructorName && (
+
+
+
+
Instructor Change
+
+ Session Instructor: {instructorName}
+
+
+
+ )}
+
+ {!isCancelled && originalRoom && (
+
+
+
+
Room Change
+
+ Session Room: {room}
+
+
+
+ )}
+
+ {isCancelledReschedule && (
+
+
+
+
+
+
+ Class Cancelled
+
+ {cancellationReason && (
+
+ {cancellationReason}
+
+ )}
+
+
+
+
+ {rescheduledDate && (
+
+
+
+
+
+ Rescheduled Class
+
+
+ Originally scheduled for{' '}
+ {new Date(rescheduledDate + 'T00:00:00').toLocaleDateString('en-US', {
+ weekday: 'long',
+ month: 'long',
+ day: 'numeric'
+ })}
+
+
+
+
+
+ )}
+
+ )}
+
+ {isRescheduledFrom && !isRescheduledTo && rescheduledDate && (
+
+
+
+
+
+ Class Rescheduled
+
+
+ Moved to{' '}
+ {new Date(rescheduledDate + 'T00:00:00').toLocaleDateString('en-US', {
+ weekday: 'long',
+ month: 'long',
+ day: 'numeric'
+ })}
+
+
+
+
+
+ )}
+
+ {isRescheduledTo && (
+
+
+
+
+
+ Rescheduled Class
+
+ {rescheduledDate && (
+
+ Originally scheduled for{' '}
+ {new Date(rescheduledDate + 'T00:00:00').toLocaleDateString('en-US', {
+ weekday: 'long',
+ month: 'long',
+ day: 'numeric'
+ })}
+
+ )}
+
+
+
+
+ )}
+
+ {isCancelled && (
+
+
+
+
+
+ Class Cancelled
+
+ {cancellationReason && (
+
+ {cancellationReason}
+
+ )}
+
+
+
+
+ )}
+
+ {hasAttendance && (
+
+
+
+
+
+ Attendance Taken
+
+
+ This class cannot be
+ modified because attendance
+ has been recorded.
+
+
+
+
+ )}
+
+
+ );
+}
diff --git a/frontend/src/components/shared/StatusBadge.tsx b/frontend/src/components/shared/StatusBadge.tsx
index 872e0fe5f..d3ec48f51 100644
--- a/frontend/src/components/shared/StatusBadge.tsx
+++ b/frontend/src/components/shared/StatusBadge.tsx
@@ -59,36 +59,26 @@ interface StatusBadgeProps {
className?: string;
}
+const STYLE_REGISTRY: {
+ variant: StatusBadgeProps['variant'];
+ styles: Record
;
+}[] = [
+ { variant: 'class', styles: classStatusStyles as Record },
+ { variant: 'progClass', styles: progClassStatusStyles as Record },
+ { variant: 'program', styles: programStatusStyles as Record },
+ { variant: 'enrollment', styles: enrollmentStatusStyles },
+ { variant: 'resident', styles: residentStatusStyles }
+];
+
function getStyleForStatus(
status: StatusType,
variant: StatusBadgeProps['variant']
): string {
- if (variant === 'class' && status in classStatusStyles) {
- return classStatusStyles[status as SelectedClassStatus];
- }
- if (variant === 'progClass' && status in progClassStatusStyles) {
- return progClassStatusStyles[status as ProgClassStatus];
- }
- if (variant === 'program' && status in programStatusStyles) {
- return programStatusStyles[status as ProgramEffectiveStatus];
- }
- if (variant === 'enrollment' && status in enrollmentStatusStyles) {
- return enrollmentStatusStyles[status];
- }
- if (variant === 'resident' && status in residentStatusStyles) {
- return residentStatusStyles[status];
- }
- if (variant === 'auto') {
- if (status in classStatusStyles)
- return classStatusStyles[status as SelectedClassStatus];
- if (status in progClassStatusStyles)
- return progClassStatusStyles[status as ProgClassStatus];
- if (status in programStatusStyles)
- return programStatusStyles[status as ProgramEffectiveStatus];
- if (status in enrollmentStatusStyles)
- return enrollmentStatusStyles[status];
- if (status in residentStatusStyles)
- return residentStatusStyles[status];
+ const key = String(status);
+ for (const entry of STYLE_REGISTRY) {
+ if ((entry.variant === variant || variant === 'auto') && key in entry.styles) {
+ return entry.styles[key];
+ }
}
return 'bg-muted text-foreground border-border';
}
diff --git a/frontend/src/hooks/useUrlPagination.ts b/frontend/src/hooks/useUrlPagination.ts
index ef2dad34a..579fdb5d1 100644
--- a/frontend/src/hooks/useUrlPagination.ts
+++ b/frontend/src/hooks/useUrlPagination.ts
@@ -1,8 +1,10 @@
-import { useCallback } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { useCallback, useRef } from 'react';
+import { useLocation, useNavigate, useSearchParams } from 'react-router-dom';
export function useUrlPagination(defaultPage = 1, defaultPerPage = 20, prefix = '') {
- const [searchParams, setSearchParams] = useSearchParams();
+ const [searchParams] = useSearchParams();
+ const navigate = useNavigate();
+ const location = useLocation();
const pageKey = prefix ? `${prefix}_page` : 'page';
const perPageKey = prefix ? `${prefix}_per_page` : 'per_page';
@@ -13,23 +15,29 @@ export function useUrlPagination(defaultPage = 1, defaultPerPage = 20, prefix =
const parsedPerPage = parseInt(searchParams.get(perPageKey) ?? '', 10);
const perPage = Number.isFinite(parsedPerPage) && parsedPerPage >= 1 ? parsedPerPage : defaultPerPage;
+ const searchRef = useRef(location.search);
+ searchRef.current = location.search;
+
const setPage = useCallback(
(newPage: number, options?: { replace?: boolean }) => {
- const params = new URLSearchParams(searchParams);
+ const params = new URLSearchParams(searchRef.current);
params.set(pageKey, newPage.toString());
- setSearchParams(params, { replace: options?.replace ?? false });
+ navigate(
+ { search: params.toString() },
+ { replace: options?.replace ?? false }
+ );
},
- [searchParams, setSearchParams, pageKey]
+ [navigate, pageKey]
);
const setPerPage = useCallback(
(newPerPage: number) => {
- const params = new URLSearchParams(searchParams);
+ const params = new URLSearchParams(searchRef.current);
params.set(perPageKey, newPerPage.toString());
params.set(pageKey, '1');
- setSearchParams(params, { replace: false });
+ navigate({ search: params.toString() }, { replace: false });
},
- [searchParams, setSearchParams, pageKey, perPageKey]
+ [navigate, pageKey, perPageKey]
);
return { page, perPage, setPage, setPerPage };
diff --git a/frontend/src/layouts/AuthenticatedLayout.tsx b/frontend/src/layouts/AuthenticatedLayout.tsx
index 3349fadc5..58f0dbb36 100644
--- a/frontend/src/layouts/AuthenticatedLayout.tsx
+++ b/frontend/src/layouts/AuthenticatedLayout.tsx
@@ -46,7 +46,6 @@ export default function AuthenticatedLayout() {
const isSchedule = location.pathname === '/schedule';
const isAdmins = location.pathname === '/admins';
const isKnowledgeCenter = location.pathname === '/knowledge-center-management' || location.pathname === '/knowledge-center';
- const isResidentKnowledgeCenter = location.pathname === '/knowledge-center';
const isContentViewer = location.pathname.startsWith('/viewer/');
const isResidentPage = ['/resident-programs', '/home'].includes(location.pathname);
const isFullBleed =
@@ -103,7 +102,7 @@ export default function AuthenticatedLayout() {
const needsGrayBg = isResidentProfile || isResidentsPage || isClassesPage || isFacilities || isAdmins || isKnowledgeCenter || (isProgramDetail && canSwitchFacility(user));
const rootClass = 'h-screen bg-background flex overflow-hidden';
- const contentClass = `flex-1 min-h-full ${isResidentKnowledgeCenter ? 'overflow-hidden' : 'overflow-y-auto'} overflow-x-hidden ${needsGrayBg ? 'bg-[#E2E7EA]' : ''}`;
+ const contentClass = `flex-1 min-h-full overflow-y-auto overflow-x-hidden ${needsGrayBg ? 'bg-[#E2E7EA]' : ''}`;
return (
diff --git a/frontend/src/lib/formatters.ts b/frontend/src/lib/formatters.ts
index ff0cddf40..a185f449c 100644
--- a/frontend/src/lib/formatters.ts
+++ b/frontend/src/lib/formatters.ts
@@ -231,6 +231,25 @@ export function formatMonthYear(monthString: string): string {
});
}
+export function toDateInput(d: Date): string {
+ return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+}
+
+export function toTimeInput(d: Date): string {
+ return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
+}
+
+export function formatDurationStr(startTime: string, endTime: string): string {
+ const startMin = timeToMinutes(startTime);
+ const endMin = timeToMinutes(endTime);
+ if (!Number.isFinite(startMin) || !Number.isFinite(endMin)) return '0h0m0s';
+ const totalMin = endMin - startMin;
+ if (totalMin <= 0) return '0h0m0s';
+ const hours = Math.floor(totalMin / 60);
+ const minutes = totalMin % 60;
+ return `${hours}h${minutes}m0s`;
+}
+
const WEEKDAY_NAMES: Record
= {
0: 'Monday',
1: 'Tuesday',
diff --git a/frontend/src/pages/class-detail/ClassNotFoundCard.tsx b/frontend/src/pages/class-detail/ClassNotFoundCard.tsx
new file mode 100644
index 000000000..8f1b82706
--- /dev/null
+++ b/frontend/src/pages/class-detail/ClassNotFoundCard.tsx
@@ -0,0 +1,27 @@
+import { Button } from '@/components/ui/button';
+
+interface ClassNotFoundCardProps {
+ onBack: () => void;
+}
+
+export function ClassNotFoundCard({ onBack }: ClassNotFoundCardProps) {
+ return (
+
+
+
+ Class Not Found
+
+
+ The class you are looking for does not exist or you do
+ not have access to it.
+
+
+
+
+
+
+
+
+
+
+ {Array.from({ length: 5 }).map((_, i) => (
+
+ ))}
+
+
+
+
+
+ {Array.from({ length: 3 }).map((_, i) => (
+
+ ))}
+
+
+
+
+ {showCheckbox && (
+
onToggle()}
+ onClick={(e) => e.stopPropagation()}
+ />
+ )}
+ {getIcon()}
+
+
+
+ {session.dayName}, {dateLabel}
+
+ {isToday && (
+
+ Today
+
+ )}
+ {isCancelled && (
+
+ Cancelled
+
+ )}
+ {treatAsFrom && (
+
+ Rescheduled
+
+ )}
+ {treatAsTo && (
+
+ Rescheduled Class
+
+ )}
+ {isCancelledReschedule && (
+ <>
+
+ Cancelled
+
+
+ Rescheduled Class
+
+
+ )}
+
+ {treatAsFrom && rescheduledDate ? (
+
+ → Moved to {formatShortDate(rescheduledDate)}
+ {rescheduledClassTime &&
+ ` at ${formatClassTimeRange(rescheduledClassTime)}`}
+
+ ) : (treatAsTo || isCancelledReschedule) ? (
+
+ {formatClassTimeRange(session.instance.class_time)}
+
+ ) : (
+
+ {formatClassTimeRange(session.instance.class_time)}
+
+ )}
+
+
e.stopPropagation()}
+ >
+ {hasAttendance && !treatAsFrom && (
+
+ {session.attendedCount} / {session.totalEnrolled}{' '}
+ attended (
+ {session.totalEnrolled > 0
+ ? Math.round(
+ (session.attendedCount /
+ session.totalEnrolled) *
+ 100
+ )
+ : 0}
+ %)
+
+ )}
+ {isPast &&
+ !hasAttendance &&
+ !isCancelled &&
+ !treatAsFrom && (
+
+ Missing
+
+ )}
+ {!isCancelled &&
+ !isUpcoming &&
+ !treatAsFrom && (
+
+ )}
+ {isCancelled && isUpcoming && (
+
+ )}
+ {isRescheduledFrom && isUpcoming && (
+
+ )}
+ {isCancelledReschedule && isUpcoming && (
+
+ )}
+ {isRescheduledTo && isUpcoming && !isSameDateReschedule && (
+ <>
+
+
+
+ )}
+ {isUpcoming &&
+ !isCancelled &&
+ !treatAsFrom &&
+ !treatAsTo &&
+ !isCancelledReschedule && (
+ <>
+
+
+
+ )}
+
+
-
-
-
-
Session Management
-
- View, cancel, or reschedule individual sessions
-
-
-
-
- handleStatusChange(
- statusFilter === 'completed'
- ? 'all'
- : 'completed'
- )
- }
- colorClass="bg-green-100 text-[#556830]"
- >
- {stats.completed} Completed
-
-
- handleStatusChange(
- statusFilter === 'missing'
- ? 'all'
- : 'missing'
- )
- }
- colorClass="bg-amber-100 text-amber-700"
- >
- {stats.missing} Missing
-
-
- handleStatusChange(
- statusFilter === 'upcoming'
- ? 'all'
- : 'upcoming'
- )
- }
- colorClass="bg-blue-100 text-blue-700"
- >
- {stats.upcoming} Upcoming
-
-
- handleStatusChange(
- statusFilter === 'cancelled'
- ? 'all'
- : 'cancelled'
- )
- }
- colorClass="bg-gray-100 text-gray-700"
- >
- {stats.cancelled} Cancelled
-
-
-
-
-
-
-
- handleStatusChange('all')}
- >
- All Sessions
-
- handleStatusChange('completed')}
- >
- Completed
-
- handleStatusChange('missing')}
- >
- Missing
-
- handleStatusChange('upcoming')}
- >
- Upcoming
-
-
-
-
- handleTimeChange('week')}
- disabled={hideTimeFilter}
- >
- Last Week
-
- handleTimeChange('2weeks')}
- disabled={hideTimeFilter}
- >
- Last 2 Weeks
-
- handleTimeChange('month')}
- disabled={hideTimeFilter}
- >
- Last Month
-
- handleTimeChange('all')}
- disabled={hideTimeFilter}
- >
- All Time
-
-
-
-
+
{stats.missing > 0 && (
@@ -706,527 +387,84 @@ export function SessionsTab({ cls, onClassMutate }: SessionsTabProps) {
)}
- {rescheduleTarget && (
-
setRescheduleTarget(null)}
- classId={cls.id}
- eventId={
- rescheduleTarget.instance.event_id ??
- rescheduleTarget.instance.id
- }
- originalDate={rescheduleTarget.instance.date}
- dateLabel={rescheduleTarget.dateObj.toLocaleDateString(
- 'en-US',
- {
- weekday: 'long',
- month: 'long',
- day: 'numeric'
- }
- )}
- currentRoom={cls.events?.[0]?.room_ref?.name}
- classTime={rescheduleTarget.instance.class_time}
- onRescheduled={() => void refreshData()}
- />
- )}
-
- {showQuickCancel && quickCancelSession && (
- {
- setShowQuickCancel(open);
- if (!open) setQuickCancelSession(null);
- }}
- event={buildFacilityEvent(quickCancelSession, cls.id, cls.events ?? [])}
- onSuccess={() => {
- setShowQuickCancel(false);
- setQuickCancelSession(null);
- void refreshData();
- }}
- showApplyToFuture={false}
- />
- )}
-
- {
+ setRescheduleTarget(null)}
+ quickCancelSession={quickCancelSession}
+ showQuickCancel={showQuickCancel}
+ onQuickCancelOpenChange={(open) => {
+ setShowQuickCancel(open);
+ if (!open) setQuickCancelSession(null);
+ }}
+ onQuickCancelSuccess={() => {
+ setShowQuickCancel(false);
+ setQuickCancelSession(null);
+ void refreshData();
+ }}
+ showBulkCancelModal={showBulkCancelModal}
+ onBulkCancelOpenChange={setShowBulkCancelModal}
+ cancelSessions={cancelSessions}
+ onBulkCancelled={() => {
setSelectedDates(new Set());
setCancelSessions([]);
void refreshData();
}}
+ showChangeInstructor={showChangeInstructor}
+ onCloseChangeInstructor={() => setShowChangeInstructor(false)}
+ changeInstructorSessions={changeInstructorSessions}
+ onInstructorChanged={() => {
+ setSelectedDates(new Set());
+ void refreshData();
+ }}
+ showChangeRoom={showChangeRoom}
+ onCloseChangeRoom={() => setShowChangeRoom(false)}
+ changeRoomSessions={changeRoomSessions}
+ onRoomChanged={() => {
+ setSelectedDates(new Set());
+ void refreshData();
+ }}
+ selectedSession={selectedSession}
+ onCloseDetailSheet={() => setSelectedSession(null)}
+ onMutate={() => void refreshData()}
+ onSelectedSessionUndo={() => {
+ if (selectedSession) void handleUndo(selectedSession);
+ }}
+ onSelectedSessionUndoCancel={() => {
+ if (selectedSession) void handleUndoCancel(selectedSession);
+ }}
+ onSelectedSessionUndoReschedule={() => {
+ if (selectedSession) void handleUndo(selectedSession);
+ }}
/>
- {showChangeInstructor && (
- setShowChangeInstructor(false)}
- classId={cls.id}
- sessions={changeInstructorSessions}
- onChanged={() => {
- setSelectedDates(new Set());
- void refreshData();
- }}
- showSessionsList
- />
- )}
-
- {showChangeRoom && (
- setShowChangeRoom(false)}
- classId={cls.id}
- sessions={changeRoomSessions}
- onChanged={() => {
- setSelectedDates(new Set());
- void refreshData();
- }}
- showSessionsList
- />
- )}
-
- {(() => {
- const changeInfo = selectedSession
- ? getSessionChangeInfo(cls.events ?? [], selectedSession.instance.date)
- : {};
- const baseRoom =
- (selectedSession
- ? roomOverrides.get(
- `${selectedSession.instance.date}|${selectedSession.instance.class_time?.split('-')[0]}`
- ) ?? roomOverrides.get(selectedSession.instance.date)
- : undefined) ??
- cls.events?.[0]?.room_ref?.name ??
- 'TBD';
- const baseInstructor = getInstructorName(cls.events ?? []);
- return (
- setSelectedSession(null)}
- className={cls.name}
- facilityId={String(cls.facility_id)}
- classEvents={cls.events ?? []}
- classTime={
- selectedSession?.instance.class_time ??
- cls.events?.[0]?.duration ??
- ''
- }
- room={changeInfo.newRoom ?? baseRoom}
- originalRoom={changeInfo.originalRoom}
- instructorName={changeInfo.newInstructor ?? baseInstructor}
- originalInstructorName={changeInfo.originalInstructor}
- classId={cls.id}
- onMutate={() => void refreshData()}
- onUndo={() => {
- if (selectedSession) void handleUndo(selectedSession);
- }}
- onUndoCancel={() => {
- if (selectedSession) void handleUndoCancel(selectedSession);
- }}
- onUndoReschedule={() => {
- if (selectedSession) void handleUndo(selectedSession);
- }}
- allSessions={allSessions}
- />
- );
- })()}
-
- {selectedDates.size > 0 && (
-
-
-
-
- {selectedDates.size}
-
-
- {selectedDates.size === 1
- ? 'session'
- : 'sessions'}{' '}
- selected
-
-
-
-
-
-
-
-
-
-
-
- {showCheckbox && (
-
onToggle()}
- onClick={(e) => e.stopPropagation()}
- />
- )}
- {getIcon()}
-
-
-
- {session.dayName}, {dateLabel}
-
- {isToday && (
-
- Today
-
- )}
- {isCancelled && (
-
- Cancelled
-
- )}
- {isRescheduledFrom && (
-
- Rescheduled
-
- )}
- {isRescheduledTo && (
-
- Rescheduled Class
-
- )}
- {isCancelledReschedule && (
- <>
-
- Cancelled
-
-
- Rescheduled Class
-
-
- )}
-
- {isRescheduledFrom && rescheduledDate ? (
-
- → Moved to {formatShortDate(rescheduledDate)}
- {rescheduledClassTime &&
- ` at ${formatClassTimeRange(rescheduledClassTime)}`}
-
- ) : (isRescheduledTo || isCancelledReschedule) ? (
-
- {formatClassTimeRange(session.instance.class_time)}
-
- ) : (
-
- {formatClassTimeRange(session.instance.class_time)}
-
- )}
-
-
e.stopPropagation()}
- >
- {hasAttendance && !isRescheduledFrom && (
-
- {session.attendedCount} / {session.totalEnrolled}{' '}
- attended (
- {session.totalEnrolled > 0
- ? Math.round(
- (session.attendedCount /
- session.totalEnrolled) *
- 100
- )
- : 0}
- %)
-
- )}
- {isPast &&
- !hasAttendance &&
- !isCancelled &&
- !isRescheduledFrom && (
-
- Missing
-
- )}
- {!isCancelled &&
- !isUpcoming &&
- !isRescheduledFrom && (
-
- )}
- {isCancelled && isUpcoming && (
-
- )}
- {isRescheduledFrom && isUpcoming && (
-
- )}
- {isCancelledReschedule && isUpcoming && (
-
- )}
- {isRescheduledTo && isUpcoming && !isSameDateReschedule && (
- <>
-
-
-
- )}
- {isUpcoming &&
- !isCancelled &&
- !isRescheduledFrom &&
- !isRescheduledTo &&
- !isCancelledReschedule && (
- <>
-
-
-
- )}
-
-
+
+
+
+ {selectedCount}
+
+
+ {selectedCount === 1 ? 'session' : 'sessions'}{' '}
+ selected
+
+
+
+
+
+
+
+
+
+
+
+
+
Session Management
+
+ View, cancel, or reschedule individual sessions
+
+
+
+
+ onStatusChange(
+ statusFilter === 'completed'
+ ? 'all'
+ : 'completed'
+ )
+ }
+ colorClass="bg-green-100 text-[#556830]"
+ >
+ {stats.completed} Completed
+
+
+ onStatusChange(
+ statusFilter === 'missing'
+ ? 'all'
+ : 'missing'
+ )
+ }
+ colorClass="bg-amber-100 text-amber-700"
+ >
+ {stats.missing} Missing
+
+
+ onStatusChange(
+ statusFilter === 'upcoming'
+ ? 'all'
+ : 'upcoming'
+ )
+ }
+ colorClass="bg-blue-100 text-blue-700"
+ >
+ {stats.upcoming} Upcoming
+
+
+ onStatusChange(
+ statusFilter === 'cancelled'
+ ? 'all'
+ : 'cancelled'
+ )
+ }
+ colorClass="bg-gray-100 text-gray-700"
+ >
+ {stats.cancelled} Cancelled
+
+
+
+
+
+
+
+ onStatusChange('all')}
+ >
+ All Sessions
+
+ onStatusChange('completed')}
+ >
+ Completed
+
+ onStatusChange('missing')}
+ >
+ Missing
+
+ onStatusChange('upcoming')}
+ >
+ Upcoming
+
+
+
+
+ onTimeChange('week')}
+ disabled={hideTimeFilter}
+ >
+ Last Week
+
+ onTimeChange('2weeks')}
+ disabled={hideTimeFilter}
+ >
+ Last 2 Weeks
+
+ onTimeChange('month')}
+ disabled={hideTimeFilter}
+ >
+ Last Month
+
+ onTimeChange('all')}
+ disabled={hideTimeFilter}
+ >
+ All Time
+
+
+
+
-
-
-
-
-
-
- {Array.from({ length: 5 }).map((_, i) => (
-
- ))}
-
-
-
-
-
- {Array.from({ length: 3 }).map((_, i) => (
-
- ))}
-
-
-
-
-
- Class Not Found
-
-
- The class you are looking for does not exist or you do
- not have access to it.
-
-
-
-
-
-
- )}
+ {isAdminPreview
+ ? item.featured && (
+
+
+
+ )
+ : (
+
+ )}
{item.type === 'library' && (
@@ -335,12 +416,8 @@ export default function ResidentKnowledgeCenter() {
};
return (
-
-
-
+
+
Knowledge Center
@@ -480,8 +557,7 @@ export default function ResidentKnowledgeCenter() {
/>
)}
-
-
+
);
}
diff --git a/frontend/src/pages/knowledge-center/VideoViewer.tsx b/frontend/src/pages/knowledge-center/VideoViewer.tsx
index 54d5603f6..bfc42bad7 100644
--- a/frontend/src/pages/knowledge-center/VideoViewer.tsx
+++ b/frontend/src/pages/knowledge-center/VideoViewer.tsx
@@ -1,7 +1,7 @@
import { useEffect, useState } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { ArrowLeft } from 'lucide-react';
-import { Video, ServerResponseOne } from '@/types';
+import { Video } from '@/types';
import { useAuth, isAdministrator } from '@/auth/useAuth';
import Breadcrumbs from '@/components/navigation/Breadcrumbs';
import { Badge } from '@/components/ui/badge';
@@ -25,10 +25,8 @@ export default function VideoViewer() {
useEffect(() => {
const fetchVideoData = async () => {
- const resp = (await API.get(
- `videos/${videoId}`
- )) as ServerResponseOne