@hed-hog/lms 0.0.304 → 0.0.306

package/hedhog/frontend/app/classes/[id]/_components/event-summary-popover.tsx.ejs

@@ -0,0 +1,279 @@
+'use client';
+
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { useApp } from '@hed-hog/next-app-provider';
+import { format } from 'date-fns';
+import { enUS, ptBR } from 'date-fns/locale';
+import {
+  AlertTriangle,
+  CalendarDays,
+  Clock3,
+  Loader2,
+  MapPin,
+  Pencil,
+  Video,
+  X,
+} from 'lucide-react';
+import { useLocale, useTranslations } from 'next-intl';
+import { useCallback, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+interface Aula {
+  id: number;
+  titulo: string;
+  data: string;
+  horaInicio: string;
+  horaFim: string;
+  local: string;
+  meetingUrl: string;
+  tipo: 'presencial' | 'online';
+  instructorName?: string;
+}
+
+interface AttendanceRecord {
+  student_id: number;
+  present: boolean;
+}
+
+interface EventSummaryPopoverProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  anchor: { x: number; y: number } | null;
+  classId: string;
+  event: Aula | null;
+  onOpenSheet: () => void;
+  onRecordAttendance: () => void;
+}
+
+const PANEL_W = 420;
+const PANEL_H = 300;
+
+function parseSessionDate(value: string) {
+  const match = /^(\d{4})-(\d{2})-(\d{2})/.exec(value ?? '');
+
+  if (match) {
+    const year = Number(match[1]);
+    const month = Number(match[2]);
+    const day = Number(match[3]);
+
+    if (
+      Number.isFinite(year) &&
+      Number.isFinite(month) &&
+      Number.isFinite(day)
+    ) {
+      return new Date(year, month - 1, day, 12, 0, 0, 0);
+    }
+  }
+
+  return new Date(value);
+}
+
+function computePosition(anchor: { x: number; y: number }) {
+  const GAP = 10;
+  const MARGIN = 12;
+  const vw = typeof window !== 'undefined' ? window.innerWidth : 1024;
+  const vh = typeof window !== 'undefined' ? window.innerHeight : 768;
+
+  let left = anchor.x + GAP;
+  let top = anchor.y + GAP;
+
+  if (left + PANEL_W > vw - MARGIN) {
+    left = anchor.x - PANEL_W - GAP;
+  }
+  if (top + PANEL_H > vh - MARGIN) {
+    top = anchor.y - PANEL_H - GAP;
+  }
+
+  return {
+    top: Math.max(MARGIN, top),
+    left: Math.max(MARGIN, left),
+  };
+}
+
+export function EventSummaryPopover({
+  open,
+  onOpenChange,
+  anchor,
+  classId,
+  event,
+  onOpenSheet,
+  onRecordAttendance,
+}: EventSummaryPopoverProps) {
+  const t = useTranslations('lms.ClassesPage.DetailPage.eventSummary');
+  const tClasses = useTranslations('lms.ClassesPage');
+  const locale = useLocale();
+  const { request } = useApp();
+
+  const [loadingAttendance, setLoadingAttendance] = useState(false);
+  const [attendanceSummary, setAttendanceSummary] = useState<{
+    total: number;
+    present: number;
+  } | null>(null);
+
+  const dateLocale = locale === 'pt' ? ptBR : enUS;
+
+  const handleClose = useCallback(() => {
+    onOpenChange(false);
+  }, [onOpenChange]);
+
+  useEffect(() => {
+    if (!open || !event) return;
+
+    let ignore = false;
+
+    const loadAttendance = async () => {
+      setLoadingAttendance(true);
+      try {
+        const res = await request<AttendanceRecord[]>({
+          url: `/lms/classes/${classId}/sessions/${event.id}/attendance`,
+          method: 'GET',
+        });
+
+        if (ignore) return;
+
+        const total = res.data.length;
+        const present = res.data.filter((item) => item.present).length;
+
+        setAttendanceSummary({ total, present });
+      } catch {
+        if (!ignore) {
+          setAttendanceSummary(null);
+        }
+      } finally {
+        if (!ignore) {
+          setLoadingAttendance(false);
+        }
+      }
+    };
+
+    void loadAttendance();
+
+    return () => {
+      ignore = true;
+    };
+  }, [open, event, classId, request]);
+
+  useEffect(() => {
+    if (!open) return;
+
+    const handler = (keyboardEvent: KeyboardEvent) => {
+      if (keyboardEvent.key === 'Escape') {
+        handleClose();
+      }
+    };
+
+    document.addEventListener('keydown', handler);
+
+    return () => {
+      document.removeEventListener('keydown', handler);
+    };
+  }, [open, handleClose]);
+
+  if (!open || !event || typeof document === 'undefined') {
+    return null;
+  }
+
+  const pos = anchor ? computePosition(anchor) : { top: 80, left: 80 };
+  const sessionDate = parseSessionDate(event.data);
+  const place = event.tipo === 'online' ? event.meetingUrl : event.local;
+  const hasAttendance = (attendanceSummary?.total ?? 0) > 0;
+
+  return createPortal(
+    <>
+      <div className="fixed inset-0 z-40" onClick={handleClose} />
+
+      <div
+        className="fixed z-50 w-105 max-h-[calc(100vh-24px)] overflow-y-auto rounded-lg border bg-popover p-4 shadow-lg outline-none"
+        style={{ top: pos.top, left: pos.left }}
+        onClick={(mouseEvent) => mouseEvent.stopPropagation()}
+      >
+        <div className="mb-3 flex items-center justify-between gap-2">
+          <Badge variant={event.tipo === 'online' ? 'secondary' : 'outline'}>
+            {tClasses(`type.${event.tipo}`)}
+          </Badge>
+          <button
+            type="button"
+            onClick={handleClose}
+            className="rounded p-0.5 text-muted-foreground hover:text-foreground"
+            aria-label={t('actions.close')}
+          >
+            <X className="size-4" />
+          </button>
+        </div>
+
+        <div className="space-y-3">
+          <h3 className="text-lg font-semibold leading-tight">
+            {event.titulo}
+          </h3>
+
+          <div className="space-y-2 text-sm text-muted-foreground">
+            <div className="flex items-center gap-2">
+              <CalendarDays className="size-4" />
+              <span>
+                {format(sessionDate, "EEEE, dd 'de' MMMM", {
+                  locale: dateLocale,
+                })}
+              </span>
+            </div>
+            <div className="flex items-center gap-2">
+              <Clock3 className="size-4" />
+              <span>
+                {event.horaInicio} - {event.horaFim}
+              </span>
+            </div>
+            {place ? (
+              <div className="flex items-center gap-2">
+                {event.tipo === 'online' ? (
+                  <Video className="size-4" />
+                ) : (
+                  <MapPin className="size-4" />
+                )}
+                <span className="truncate">{place}</span>
+              </div>
+            ) : null}
+          </div>
+
+          <div className="rounded-md border bg-muted/30 p-3 text-sm">
+            {loadingAttendance ? (
+              <div className="flex items-center gap-2 text-muted-foreground">
+                <Loader2 className="size-4 animate-spin" />
+                {t('attendance.loading')}
+              </div>
+            ) : hasAttendance ? (
+              <p>
+                {t('attendance.summary', {
+                  present: attendanceSummary?.present ?? 0,
+                  total: attendanceSummary?.total ?? 0,
+                })}
+              </p>
+            ) : (
+              <div className="space-y-2">
+                <div className="flex items-start gap-2 text-amber-700">
+                  <AlertTriangle className="mt-0.5 size-4" />
+                  <p className="text-sm">{t('attendance.missing')}</p>
+                </div>
+                <Button
+                  type="button"
+                  variant="outline"
+                  size="sm"
+                  onClick={onRecordAttendance}
+                >
+                  {t('actions.recordAttendance')}
+                </Button>
+              </div>
+            )}
+          </div>
+
+          <div className="flex justify-end gap-2 pt-1">
+            <Button type="button" variant="outline" onClick={onOpenSheet}>
+              <Pencil className="mr-1.5 size-4" />
+              {t('actions.editAndMore')}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </>,
+    document.body
+  );
+}