feat: added lesson events to the dashboard

apps/dashboard/src/App.tsx

@@ -3,6 +3,7 @@ import { ErrorPage } from "@litespace/ui/ErrorPage";
 import { lazy } from "react";
 import { Dashboard } from "@litespace/utils/routes";
 import Page from "@/components/Layout/Page";
+import { LessonEvents } from "@/pages/LessonEvents";
 
 const Root = lazy(() => import("@/pages/Root"));
 const Invoices = lazy(() => import("@/pages/Invoices"));
@@ -65,6 +66,10 @@ const router = createBrowserRouter([
         path: Dashboard.PlanInvites,
         element: <Page page={<PlanInvites />} />,
       },
+      {
+        path: Dashboard.LessonEvents,
+        element: <Page page={<LessonEvents />} />,
+      },
     ],
   },
 ]);

apps/dashboard/src/components/Common/DateTimeField.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { dayjs } from "@/lib/dayjs";
+import { Tooltip } from "@litespace/ui/Tooltip";
+import { Typography } from "@litespace/ui/Typography";
+
+const DateTimeField: React.FC<{ date: string }> = ({ date }) => {
+  return (
+    <Tooltip
+      content={
+        <div className="text-center leading-relaxed">
+          <Typography tag="span" className="text-caption">
+            {dayjs(date).format("dddd D MMMM YYYY hh:mm a")}
+            <br />({dayjs(date).fromNow()})
+          </Typography>
+        </div>
+      }
+    >
+      <div>
+        <Typography
+          tag="p"
+          className="text-body font-semibold text-natural-800"
+        >
+          {dayjs(date).format("YYYY/MM/D hh:mm A")}
+        </Typography>
+      </div>
+    </Tooltip>
+  );
+};
+
+export default DateTimeField;

apps/dashboard/src/components/LessonEvents/EventsTable.tsx

@@ -0,0 +1,116 @@
+import { ISessionEvent } from "@litespace/types";
+import { useFormatMessage } from "@litespace/ui/hooks/intl";
+import dayjs from "@/lib/dayjs";
+import DateTimeField from "@/components/Common/DateTimeField";
+import { createColumnHelper } from "@tanstack/react-table";
+import { useCallback, useMemo } from "react";
+import { Table } from "@litespace/ui/Table";
+
+interface EventsTableProps {
+  title: string;
+  events: ISessionEvent.MetaSelf[];
+}
+
+const EventsTable: React.FC<EventsTableProps> = ({ title, events }) => {
+  const intl = useFormatMessage();
+
+  const getEventType = useCallback(
+    (type: number) => {
+      if (type === 1) return intl("dashboard.lesson-events.joined");
+      if (type === 2) return intl("dashboard.lesson-events.left");
+      return intl("dashboard.lesson-events.unknown");
+    },
+    [intl]
+  );
+
+  const columnHelper = createColumnHelper<ISessionEvent.MetaSelf>();
+
+  const columns = useMemo(
+    () => [
+      columnHelper.accessor("type", {
+        header: intl("global.labels.type"),
+        cell: (info) => (
+          <span
+            className={`px-2 py-1 rounded ${
+              info.getValue() === 1
+                ? "bg-green-100 text-green-800"
+                : "bg-red-100 text-red-800"
+            }`}
+          >
+            {getEventType(info.getValue())}
+          </span>
+        ),
+      }),
+      columnHelper.accessor("createdAt", {
+        header: intl("global.labels.time"),
+        cell: (info) => (
+          <div className="flex flex-col">
+            <DateTimeField date={info.getValue()} />
+            <span className="text-xs text-gray-500">
+              ({dayjs(info.getValue()).fromNow()})
+            </span>
+          </div>
+        ),
+      }),
+      columnHelper.accessor("createdAt", {
+        id: "timeRelativeToSession",
+        header: intl("dashboard.lesson-events.time-relative-to-session"),
+        cell: (info) => {
+          const eventTime = dayjs(info.getValue());
+          const sessionStart = dayjs(info.row.original.sessionStart);
+          const minutesDiff = eventTime.diff(sessionStart, "minutes");
+
+          const sign = minutesDiff === 0 ? "" : minutesDiff > 0 ? "+" : "";
+          const formattedValue = `${sign}${Math.abs(minutesDiff)}`;
+
+          const textColor =
+            minutesDiff < 0
+              ? "text-blue-600"
+              : minutesDiff === 0
+                ? "text-gray-500"
+                : "text-green-600";
+
+          return (
+            <div className={`font-medium ${textColor}`}>
+              {formattedValue} {intl("global.labels.minutes")}
+              <div className="text-xs text-gray-500 mt-1">
+                {minutesDiff < 0
+                  ? intl("dashboard.lesson-events.before-session")
+                  : minutesDiff > 0
+                    ? intl("dashboard.lesson-events.after-session")
+                    : intl("dashboard.lesson-events.at-session")}
+              </div>
+            </div>
+          );
+        },
+      }),
+    ],
+    [columnHelper, getEventType, intl]
+  );
+
+  if (events.length === 0) {
+    return (
+      <div className="rounded-lg shadow p-6 mb-6">
+        <h3 className="text-lg font-semibold mb-3">
+          {intl("dashboard.lesson-events.events")} {title}
+        </h3>
+        <p className="text-gray-500 text-center">
+          {intl("dashboard.lesson-events.no-events")}
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="rounded-lg shadow overflow-hidden mb-6">
+      <div className="p-4 border-b">
+        <h3 className="text-lg font-semibold">
+          {intl("dashboard.lesson-events.events")} {title}
+        </h3>
+      </div>
+      <Table columns={columns} data={events} fetching={false} loading={false} />
+    </div>
+  );
+};
+
+export default EventsTable;

apps/dashboard/src/components/LessonEvents/LessonEventsSummary.tsx

@@ -0,0 +1,190 @@
+import { ILesson, ISessionEvent, IUser } from "@litespace/types";
+import { useFormatMessage } from "@litespace/ui/hooks/intl";
+import dayjs from "@/lib/dayjs";
+import { createColumnHelper } from "@tanstack/react-table";
+import { useMemo, useCallback } from "react";
+import { Table } from "@litespace/ui/Table";
+import UserPopover from "@/components/Common/UserPopover";
+import { LocalId } from "@litespace/ui/locales";
+import {
+  calculateAttendanceTime,
+  calculatePunctuality,
+  getFirstJoinEvent,
+  getLastLeaveEvent,
+} from "@/lib/lessonEvents";
+
+interface LessonEventsSummaryProps {
+  lesson: {
+    lesson: ILesson.Self;
+    members: ILesson.PopulatedMember[];
+  };
+  events: {
+    tutor: ISessionEvent.MetaSelf[];
+    student: ISessionEvent.MetaSelf[];
+  };
+}
+
+const LessonEventsSummary: React.FC<LessonEventsSummaryProps> = ({
+  lesson,
+  events,
+}) => {
+  const intl = useFormatMessage();
+  const { lesson: lessonDetails, members } = lesson;
+  const sessionStart = dayjs(lessonDetails.start);
+  const sessionEnd = sessionStart.add(lessonDetails.duration, "minutes");
+
+  const participants = useMemo(
+    () => [
+      {
+        role: "tutor",
+        events: events.tutor,
+        member: members.find(
+          (m) =>
+            m.role === IUser.Role.TutorManager || m.role === IUser.Role.Tutor
+        ),
+      },
+      {
+        role: "student",
+        events: events.student,
+        member: members.find((m) => m.role === IUser.Role.Student),
+      },
+    ],
+    [events, members]
+  );
+
+  const getAttendanceTime = useCallback(
+    (
+      firstJoin: ISessionEvent.MetaSelf | null,
+      lastLeave: ISessionEvent.MetaSelf | null
+    ) => {
+      return calculateAttendanceTime(
+        firstJoin,
+        lastLeave,
+        lessonDetails.duration
+      );
+    },
+    [lessonDetails.duration]
+  );
+
+  const getCombinedStatusText = useCallback(
+    (
+      joinStatus: string,
+      leaveStatus: string,
+      hasJoined: boolean,
+      hasLeft: boolean
+    ) => {
+      const joinStatusMap: Record<string, LocalId> = {
+        "on-time": "dashboard.lesson-events.punctuality.join.on-time",
+        early: "dashboard.lesson-events.punctuality.join.early",
+        late: "dashboard.lesson-events.punctuality.join.late",
+        absent: "dashboard.lesson-events.punctuality.join.absent",
+      };
+
+      const leaveStatusMap: Record<string, LocalId> = {
+        "on-time": "dashboard.lesson-events.punctuality.leave.on-time",
+        early: "dashboard.lesson-events.punctuality.leave.early",
+        late: "dashboard.lesson-events.punctuality.leave.late",
+        absent: "dashboard.lesson-events.punctuality.leave.absent",
+      };
+
+      if (!hasJoined) return intl(joinStatusMap["absent"]);
+      if (!hasLeft)
+        return `${joinStatusMap[joinStatus]} - ${intl("dashboard.lesson-events.punctuality.leave.absent")}`;
+
+      return `${intl(joinStatusMap[joinStatus])} - ${intl(leaveStatusMap[leaveStatus])}`;
+    },
+    [intl]
+  );
+
+  const columnHelper = createColumnHelper<(typeof participants)[0]>();
+
+  const columns = useMemo(
+    () => [
+      columnHelper.accessor("member", {
+        header: intl("dashboard.lesson-events.participant"),
+        cell: (info) => <UserPopover id={info.row.original.member!.userId} />,
+      }),
+      columnHelper.display({
+        id: "combined-status",
+        header: intl("dashboard.lesson-events.combined-status"),
+        cell: (info) => {
+          const events = info.row.original.events as ISessionEvent.MetaSelf[];
+          const first = getFirstJoinEvent(events);
+          const last = getLastLeaveEvent(events);
+
+          const hasJoined = !!first;
+          const hasLeft = !!last;
+
+          const joinStatus = calculatePunctuality(
+            first?.createdAt || null,
+            sessionStart,
+            true
+          );
+
+          const leaveStatus = calculatePunctuality(
+            last?.createdAt || null,
+            sessionEnd,
+            false
+          );
+
+          const statusText = getCombinedStatusText(
+            joinStatus,
+            leaveStatus,
+            hasJoined,
+            hasLeft
+          );
+
+          return (
+            <span
+              className={`px-3 py-1 rounded-full text-xs font-medium whitespace-normal break-words`}
+            >
+              {statusText}
+            </span>
+          );
+        },
+      }),
+      columnHelper.accessor("events", {
+        header: intl("dashboard.lesson-events.total-attendance"),
+        cell: (info) => {
+          const events = info.getValue() as ISessionEvent.MetaSelf[];
+          const first = getFirstJoinEvent(events);
+          const last = getLastLeaveEvent(events);
+          const { minutes, percentage } = getAttendanceTime(first, last);
+
+          return (
+            <div className="text-sm font-medium text-gray-900">
+              {minutes} {intl("global.labels.minutes")} ({percentage}%)
+            </div>
+          );
+        },
+      }),
+    ],
+    [
+      columnHelper,
+      getAttendanceTime,
+      getCombinedStatusText,
+      sessionStart,
+      intl,
+      sessionEnd,
+    ]
+  );
+
+  return (
+    <div className="rounded-lg shadow overflow-hidden mb-8">
+      <div className="p-4 border-b">
+        <h3 className="text-lg font-semibold">
+          {intl("dashboard.lesson-events.attendance-summary")}
+        </h3>
+      </div>
+
+      <Table
+        columns={columns}
+        data={participants}
+        fetching={false}
+        loading={false}
+      />
+    </div>
+  );
+};
+
+export default LessonEventsSummary;