250 lines
11 KiB
TypeScript
250 lines
11 KiB
TypeScript
import {
|
|
BarChart3,
|
|
Calendar,
|
|
ChevronDown,
|
|
ChevronUp,
|
|
ExternalLink,
|
|
Globe,
|
|
Link2,
|
|
UserCheck,
|
|
Users,
|
|
} from 'lucide-react';
|
|
import { generatePath, Link } from 'react-router-dom';
|
|
|
|
import { formatAttendanceDate } from '@/business/campus-attendance/selectors';
|
|
import { AttendanceSummaryCard } from '@/components/campus-attendance/AttendanceSummaryCard';
|
|
import {
|
|
percentageBackgroundClass,
|
|
percentageBorderClass,
|
|
percentageTextClass,
|
|
} from '@/components/campus-attendance/styles';
|
|
import type {
|
|
CampusAttendancePageActions,
|
|
CampusAttendancePageState,
|
|
} from '@/components/campus-attendance/types';
|
|
import { useScopeContext } from '@/contexts/scope-context';
|
|
import { APP_ROUTE_PATHS } from '@/shared/constants/routes';
|
|
|
|
type SuperintendentAttendanceViewProps = {
|
|
state: CampusAttendancePageState;
|
|
actions: CampusAttendancePageActions;
|
|
};
|
|
|
|
export function SuperintendentAttendanceView({ state, actions }: SuperintendentAttendanceViewProps) {
|
|
const { selectedTenant } = useScopeContext();
|
|
const {
|
|
today,
|
|
weekStart,
|
|
overallStats,
|
|
combinedStats,
|
|
staffSummary,
|
|
campusStats,
|
|
attendanceChildStats,
|
|
expandedCampus,
|
|
scopeModel,
|
|
} = state;
|
|
const staffRecordTotal = staffSummary.summary
|
|
? Math.max(
|
|
staffSummary.summary.staffCount,
|
|
staffSummary.summary.present + staffSummary.summary.late + staffSummary.summary.absent,
|
|
)
|
|
: null;
|
|
const staffPresentOrLate = staffSummary.summary
|
|
? staffSummary.summary.present + staffSummary.summary.late
|
|
: null;
|
|
const staffAttendanceHelper = staffRecordTotal && staffPresentOrLate !== null
|
|
? `${staffPresentOrLate}/${staffRecordTotal} present or late`
|
|
: scopeModel.aggregateHelper;
|
|
const scopeRouteState = { __scope: selectedTenant };
|
|
|
|
return (
|
|
<>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<AttendanceSummaryCard
|
|
label="Combined Attendance"
|
|
value={combinedStats.combinedTodayPct !== null ? `${combinedStats.combinedTodayPct}%` : 'N/A'}
|
|
helper={formatAttendanceDate(today)}
|
|
icon={Calendar}
|
|
percentage={combinedStats.combinedTodayPct}
|
|
/>
|
|
<AttendanceSummaryCard
|
|
label="Student Attendance"
|
|
value={combinedStats.studentTodayPct !== null ? `${combinedStats.studentTodayPct}%` : 'N/A'}
|
|
helper={scopeModel.aggregateHelper}
|
|
icon={Users}
|
|
percentage={combinedStats.studentTodayPct}
|
|
/>
|
|
<AttendanceSummaryCard
|
|
label="Staff Attendance"
|
|
value={combinedStats.staffTodayPct !== null ? `${combinedStats.staffTodayPct}%` : 'N/A'}
|
|
helper={staffAttendanceHelper}
|
|
icon={UserCheck}
|
|
percentage={combinedStats.staffTodayPct}
|
|
/>
|
|
<AttendanceSummaryCard
|
|
label="Weekly Student Average"
|
|
value={combinedStats.studentWeekPct !== null ? `${combinedStats.studentWeekPct}%` : 'N/A'}
|
|
helper={`Week of ${formatAttendanceDate(weekStart)}`}
|
|
icon={BarChart3}
|
|
percentage={combinedStats.studentWeekPct}
|
|
/>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
|
|
<AttendanceSummaryCard
|
|
label="Students Enrolled Today"
|
|
value={overallStats.todayEnrolled || 'N/A'}
|
|
helper={scopeModel.aggregateHelper}
|
|
icon={Users}
|
|
color="blue"
|
|
/>
|
|
<AttendanceSummaryCard
|
|
label="Students Present Today"
|
|
value={overallStats.todayPresent || 'N/A'}
|
|
helper={scopeModel.aggregateHelper}
|
|
icon={UserCheck}
|
|
color="violet"
|
|
/>
|
|
<AttendanceSummaryCard
|
|
label="Staff Records Today"
|
|
value={staffSummary.summary?.recordsCount ?? 'N/A'}
|
|
helper={scopeModel.aggregateHelper}
|
|
icon={UserCheck}
|
|
color="blue"
|
|
/>
|
|
<AttendanceSummaryCard
|
|
label="Active Staff"
|
|
value={staffSummary.summary?.staffCount || 'N/A'}
|
|
helper={scopeModel.aggregateHelper}
|
|
icon={Users}
|
|
color="violet"
|
|
/>
|
|
</div>
|
|
|
|
{attendanceChildStats.length > 0 ? (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
|
{attendanceChildStats.map((child) => (
|
|
<div key={`${child.level}:${child.id}`} className="bg-slate-800/60 backdrop-blur-sm rounded-2xl border border-slate-700/40 overflow-hidden hover:border-slate-600/50 transition-all">
|
|
<Link
|
|
to={generatePath(APP_ROUTE_PATHS.attendanceDetails, { level: child.level, tenantId: child.id })}
|
|
state={scopeRouteState}
|
|
className={`block bg-gradient-to-r ${child.bgGradient} p-4 focus:outline-none focus:ring-2 focus:ring-white/60`}
|
|
>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<h3 className="font-bold text-white text-lg hover:text-white/90">{child.mascot}</h3>
|
|
<p className="text-white/70 text-xs hover:text-white">{child.fullName}</p>
|
|
</div>
|
|
{child.isOnline && (
|
|
<span className="px-2 py-0.5 bg-white/20 text-white text-[10px] rounded-full font-medium">Online</span>
|
|
)}
|
|
</div>
|
|
</Link>
|
|
<div className="p-4 space-y-3">
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<div className={`rounded-xl p-3 text-center ${percentageBackgroundClass(child.todayPct)} border ${percentageBorderClass(child.todayPct)}`}>
|
|
<p className="text-[10px] text-slate-400 mb-1">Today</p>
|
|
<p className={`text-xl font-bold ${percentageTextClass(child.todayPct)}`}>
|
|
{child.todayPct !== null ? `${child.todayPct}%` : 'N/A'}
|
|
</p>
|
|
</div>
|
|
<div className={`rounded-xl p-3 text-center ${percentageBackgroundClass(child.weekAvg)} border ${percentageBorderClass(child.weekAvg)}`}>
|
|
<p className="text-[10px] text-slate-400 mb-1">Week Avg</p>
|
|
<p className={`text-xl font-bold ${percentageTextClass(child.weekAvg)}`}>
|
|
{child.weekAvg !== null ? `${child.weekAvg}%` : 'N/A'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{child.todayRecord && (
|
|
<div className="grid grid-cols-3 gap-2 text-center">
|
|
<div className="bg-slate-700/30 rounded-lg p-2">
|
|
<p className="text-xs text-slate-400">Enrolled</p>
|
|
<p className="text-sm font-bold text-white">{child.todayRecord.total_enrolled}</p>
|
|
</div>
|
|
<div className="bg-slate-700/30 rounded-lg p-2">
|
|
<p className="text-xs text-slate-400">Present</p>
|
|
<p className="text-sm font-bold text-emerald-400">{child.todayRecord.total_present}</p>
|
|
</div>
|
|
<div className="bg-slate-700/30 rounded-lg p-2">
|
|
<p className="text-xs text-slate-400">Absent</p>
|
|
<p className="text-sm font-bold text-red-400">{child.todayRecord.total_absent}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
<button
|
|
type="button"
|
|
onClick={() => actions.setExpandedCampus(expandedCampus === child.id ? null : child.id)}
|
|
className="w-full flex items-center justify-center gap-1 text-xs text-slate-400 hover:text-white py-1 transition-colors"
|
|
>
|
|
{expandedCampus === child.id ? <ChevronUp size={14} /> : <ChevronDown size={14} />}
|
|
{expandedCampus === child.id ? 'Hide History' : 'View History'}
|
|
</button>
|
|
{expandedCampus === child.id && child.recentData.length > 0 && (
|
|
<div className="space-y-1.5 max-h-48 overflow-y-auto">
|
|
{child.recentData.map((record) => (
|
|
<div key={record.id} className="flex items-center justify-between px-3 py-2 bg-slate-700/20 rounded-lg text-xs">
|
|
<span className="text-slate-400">{formatAttendanceDate(record.date)}</span>
|
|
<div className="flex items-center gap-3">
|
|
<span className="text-slate-500">{record.total_present}/{record.total_enrolled}</span>
|
|
<span className={`font-bold ${percentageTextClass(record.attendance_percentage)}`}>
|
|
{record.attendance_percentage.toFixed(1)}%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="bg-slate-800/60 backdrop-blur-sm rounded-2xl border border-slate-700/40 p-10 text-center">
|
|
<Users size={40} className="text-slate-600 mx-auto mb-3" />
|
|
<p className="text-slate-400 text-sm">{scopeModel.emptyHistoryMessage}</p>
|
|
</div>
|
|
)}
|
|
|
|
{campusStats.length > 0 && (
|
|
<div className="bg-slate-800/60 backdrop-blur-sm rounded-2xl border border-slate-700/40 p-6">
|
|
<h3 className="font-semibold text-white flex items-center gap-2 mb-4">
|
|
<Link2 size={18} className="text-orange-400" />
|
|
Campus Attendance System Links
|
|
</h3>
|
|
<div className="space-y-2">
|
|
{campusStats.map((campus) => (
|
|
<div key={campus.id} className="flex items-center justify-between p-3 bg-slate-700/20 rounded-xl">
|
|
<div className="flex items-center gap-3">
|
|
<div className={`w-8 h-8 rounded-lg bg-gradient-to-br ${campus.bgGradient} flex items-center justify-center`}>
|
|
<span className="text-white text-xs font-bold">{campus.mascot[0]}</span>
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-medium text-white">{campus.fullName}</p>
|
|
{campus.config?.updated_by && (
|
|
<p className="text-[10px] text-slate-500">Updated by {campus.config.updated_by}</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{campus.config?.attendance_link ? (
|
|
<a
|
|
href={campus.config.attendance_link}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="flex items-center gap-2 px-3 py-1.5 bg-orange-500/10 text-orange-400 border border-orange-500/20 rounded-lg text-xs hover:bg-orange-500/20 transition-all"
|
|
>
|
|
<Globe size={12} />
|
|
Open Link
|
|
<ExternalLink size={10} />
|
|
</a>
|
|
) : (
|
|
<span className="text-xs text-slate-500 italic px-3 py-1.5">Not configured</span>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
);
|
|
}
|