@cuemath/leap 3.5.30-gg4 → 3.5.30-j1

package/dist/features/timeline/monthly-report/comps/attendance/attendance-utils.js

@@ -0,0 +1,92 @@
+import { jsx as u } from "react/jsx-runtime";
+import S from "../../../../../assets/line-icons/icons/check2.js";
+import f from "../../../../../assets/line-icons/icons/cross.js";
+import _ from "../../../../../assets/line-icons/icons/dots-icon.js";
+import D from "../../../../../assets/line-icons/icons/pause-icon.js";
+import { ATTENDANCE_STATUS as n } from "./attendance-constants.js";
+import { StatusSymbol as C } from "./attendance.styled.js";
+import T from "../../../../ui/theme/clrs.js";
+const l = T(), w = (t, e) => [e, ...(t == null ? void 0 : t.map((o) => A(o))) || []].join("/n"), b = (t) => t.is_present ? n.ATTENDED : t.is_paused ? n.PAUSED : n.MISSED, x = (t) => {
+  let e = 0, o = 0, r = 0;
+  Object.values(t).forEach((i) => {
+    i.forEach((a) => {
+      switch (b(a)) {
+        case n.ATTENDED:
+          e++;
+          break;
+        case n.PAUSED:
+          r++;
+          break;
+        default:
+          o++;
+          break;
+      }
+    });
+  });
+  const s = [];
+  return e > 0 && s.push(`${e} attended`), o > 0 && s.push(`${o} missed`), r > 0 && s.push(`${r} paused`), `${s.join(", ")}.`;
+}, y = (t) => {
+  if (t.length === 0)
+    return {
+      status: null,
+      themeColor: null,
+      statusSymbol: ""
+    };
+  const e = t.every((s) => s.is_present), o = t.every((s) => s.is_paused), r = t.every((s) => !s.is_present && !s.is_paused);
+  return e ? {
+    status: n.ATTENDED,
+    themeColor: "GREEN_1",
+    statusSymbol: /* @__PURE__ */ u(S, { color: "GREEN_6", width: 14, height: 14 }),
+    tooltipBgColor: "GREEN_2",
+    snackbarBg: l.GREEN_2
+  } : o ? {
+    status: n.PAUSED,
+    themeColor: "WHITE_4",
+    statusSymbol: /* @__PURE__ */ u(D, { color: "BLACK_T_60", width: 8, height: 8 }),
+    tooltipBgColor: "WHITE_5",
+    snackbarBg: l.WHITE_5
+  } : r ? {
+    status: n.MISSED,
+    themeColor: "ORANGE_1",
+    statusSymbol: /* @__PURE__ */ u(f, { color: "RED", width: 12, height: 12 }),
+    tooltipBgColor: "ORANGE_2",
+    snackbarBg: l.ORANGE_2
+  } : {
+    status: n.PAUSED,
+    themeColor: "WHITE_4",
+    statusSymbol: /* @__PURE__ */ u(C, { $top: "2px", $right: "2px", children: /* @__PURE__ */ u(_, { color: "GREEN_6", width: 8, height: 8 }) }),
+    tooltipBgColor: "WHITE_5",
+    snackbarBg: l.WHITE_5
+  };
+}, P = (t, e, o) => {
+  const r = new Date(o, e - 1, 1).getDay(), s = new Date(o, e, 0).getDate(), i = [];
+  for (let a = 0; a < r; a++)
+    i.push(null);
+  for (let a = 1; a <= s; a++) {
+    const m = `${o}-${e.toString().padStart(2, "0")}-${a.toString().padStart(2, "0")}`, c = t[m] || [], { status: p, themeColor: d, statusSymbol: E, tooltipBgColor: h, snackbarBg: g } = y(c);
+    i.push({
+      date: a,
+      status: p,
+      hasClasses: c.length > 0,
+      classes: c,
+      themeColor: d,
+      statusSymbol: E,
+      tooltipBgColor: h,
+      snackbarBg: g
+    });
+  }
+  return i;
+}, A = (t) => {
+  if (!t.status) return "";
+  const o = new Date(t.time * 1e3).getHours(), r = o >= 12 ? "PM" : "AM";
+  return `${`${o % 12 || 12} ${r}`}: ${t.status}`;
+};
+export {
+  x as attendanceStatsText,
+  P as generateCalendarGrid,
+  b as getClassStatus,
+  y as getDayStatusInfo,
+  w as getSnackbarMsg,
+  A as getStatusText
+};
+//# sourceMappingURL=attendance-utils.js.map

package/dist/features/timeline/monthly-report/comps/attendance/attendance-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attendance-utils.js","sources":["../../../../../../src/features/timeline/monthly-report/comps/attendance/attendance-utils.tsx"],"sourcesContent":["import type { JSX } from 'react';\n\nimport Check2Icon from '../../../../../assets/line-icons/icons/check2';\nimport CrossIcon from '../../../../../assets/line-icons/icons/cross';\nimport DotIcon from '../../../../../assets/line-icons/icons/dots-icon';\nimport PauseIcon from '../../../../../assets/line-icons/icons/pause-icon';\nimport type { TColorNames } from '../../../../ui/types';\nimport type { IClassEvent, TCalendarData } from '../../monthly-report-types';\nimport { ATTENDANCE_STATUS } from './attendance-constants';\nimport type { ICalendarDay, TAttendanceStatus } from './attendance-types';\nimport * as Styled from './attendance.styled';\nimport getColors from '../../../../ui/theme/clrs';\n\nconst colors = getColors();\n\nexport const getSnackbarMsg = (classes: IClassEvent[] | undefined, date: string) => {\n  return [date, ...(classes?.map(item => getStatusText(item)) || [])].join('/n');\n};\n\nexport const getClassStatus = (classEvent: IClassEvent): TAttendanceStatus => {\n  if (classEvent.is_present) {\n    return ATTENDANCE_STATUS.ATTENDED;\n  }\n\n  if (classEvent.is_paused) {\n    return ATTENDANCE_STATUS.PAUSED;\n  }\n\n  return ATTENDANCE_STATUS.MISSED;\n};\n\nexport const attendanceStatsText = (calendarData: TCalendarData) => {\n  let attended = 0;\n  let missed = 0;\n  let paused = 0;\n\n  Object.values(calendarData).forEach(dayClasses => {\n    dayClasses.forEach(classEvent => {\n      const status = getClassStatus(classEvent);\n\n      switch (status) {\n        case ATTENDANCE_STATUS.ATTENDED:\n          attended++;\n          break;\n        case ATTENDANCE_STATUS.PAUSED:\n          paused++;\n          break;\n        default:\n          missed++;\n          break;\n      }\n    });\n  });\n\n  const parts: string[] = [];\n\n  if (attended > 0) parts.push(`${attended} attended`);\n\n  if (missed > 0) parts.push(`${missed} missed`);\n\n  if (paused > 0) parts.push(`${paused} paused`);\n\n  return `${parts.join(', ')}.`;\n};\n\nexport const getDayStatusInfo = (dayClasses: IClassEvent[]) => {\n  if (dayClasses.length === 0) {\n    return {\n      status: null,\n      themeColor: null,\n      statusSymbol: '',\n    };\n  }\n\n  const attendedClass = dayClasses.every(cls => cls.is_present);\n  const pausedClass = dayClasses.every(cls => cls.is_paused);\n  const missedClass = dayClasses.every(cls => !cls.is_present && !cls.is_paused);\n\n  if (attendedClass) {\n    return {\n      status: ATTENDANCE_STATUS.ATTENDED,\n      themeColor: 'GREEN_1',\n      statusSymbol: <Check2Icon color=\"GREEN_6\" width={14} height={14} />,\n      tooltipBgColor: 'GREEN_2',\n      snackbarBg: colors.GREEN_2,\n    };\n  }\n\n  if (pausedClass) {\n    return {\n      status: ATTENDANCE_STATUS.PAUSED,\n      themeColor: 'WHITE_4',\n      statusSymbol: <PauseIcon color=\"BLACK_T_60\" width={8} height={8} />,\n      tooltipBgColor: 'WHITE_5',\n      snackbarBg: colors.WHITE_5,\n    };\n  }\n\n  if (missedClass) {\n    return {\n      status: ATTENDANCE_STATUS.MISSED,\n      themeColor: 'ORANGE_1',\n      statusSymbol: <CrossIcon color=\"RED\" width={12} height={12} />,\n      tooltipBgColor: 'ORANGE_2',\n      snackbarBg: colors.ORANGE_2,\n    };\n  }\n\n  return {\n    status: ATTENDANCE_STATUS.PAUSED,\n    themeColor: 'WHITE_4',\n    statusSymbol: (\n      <Styled.StatusSymbol $top=\"2px\" $right=\"2px\">\n        <DotIcon color=\"GREEN_6\" width={8} height={8} />\n      </Styled.StatusSymbol>\n    ),\n    tooltipBgColor: 'WHITE_5',\n    snackbarBg: colors.WHITE_5,\n  };\n};\n\nexport const generateCalendarGrid = (\n  calendarData: TCalendarData,\n  reportMonth: number,\n  reportYear: number,\n): (ICalendarDay | null)[] => {\n  const firstDay = new Date(reportYear, reportMonth - 1, 1).getDay();\n  const daysInMonth = new Date(reportYear, reportMonth, 0).getDate();\n  const grid: (ICalendarDay | null)[] = [];\n\n  // Add empty cells for days before the first day of the month\n  for (let i = 0; i < firstDay; i++) {\n    grid.push(null);\n  }\n\n  // Add all days of the month\n  for (let day = 1; day <= daysInMonth; day++) {\n    const dateString = `${reportYear}-${reportMonth.toString().padStart(2, '0')}-${day\n      .toString()\n      .padStart(2, '0')}`;\n    const dayClasses = calendarData[dateString] || [];\n    const { status, themeColor, statusSymbol, tooltipBgColor, snackbarBg } =\n      getDayStatusInfo(dayClasses);\n\n    grid.push({\n      date: day,\n      status,\n      hasClasses: dayClasses.length > 0,\n      classes: dayClasses,\n      themeColor: themeColor as TColorNames | null,\n      statusSymbol: statusSymbol as JSX.Element,\n      tooltipBgColor: tooltipBgColor as TColorNames | null,\n      snackbarBg,\n    });\n  }\n\n  return grid;\n};\n\nexport const getStatusText = (classEvent: IClassEvent) => {\n  if (!classEvent.status) return '';\n\n  const date = new Date(classEvent.time * 1000);\n  const hours = date.getHours();\n  const ampm = hours >= 12 ? 'PM' : 'AM';\n  const displayHours = hours % 12 || 12;\n\n  const timeStr = `${displayHours} ${ampm}`;\n\n  return `${timeStr}: ${classEvent.status}`;\n};\n"],"names":["colors","getColors","getSnackbarMsg","classes","date","item","getStatusText","getClassStatus","classEvent","ATTENDANCE_STATUS","attendanceStatsText","calendarData","attended","missed","paused","dayClasses","parts","getDayStatusInfo","attendedClass","cls","pausedClass","missedClass","Check2Icon","PauseIcon","CrossIcon","jsx","Styled.StatusSymbol","DotIcon","generateCalendarGrid","reportMonth","reportYear","firstDay","daysInMonth","grid","i","day","dateString","status","themeColor","statusSymbol","tooltipBgColor","snackbarBg","hours","ampm"],"mappings":"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"}

package/dist/features/timeline/monthly-report/comps/attendance/attendance.js

@@ -0,0 +1,44 @@
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import { memo as $, useMemo as n } from "react";
+import l from "../../../../ui/layout/flex-view.js";
+import h from "../../../../ui/separator/separator.js";
+import m from "../../../../ui/text/text.js";
+import { CALENDAR_CONFIG as u } from "./attendance-constants.js";
+import { attendanceStatsText as C, generateCalendarGrid as b } from "./attendance-utils.js";
+import { CalendarHeader as _, CalendarBody as x } from "./attendance.styled.js";
+import g from "./attendence-view.js";
+const T = ({
+  calendarData: e,
+  reportMonth: t,
+  reportYear: i,
+  onDateClick: c
+}) => {
+  const A = n(
+    () => !!e && C(e),
+    [e]
+  ), s = n(
+    () => !!e && b(e, t, i),
+    [e, t, i]
+  ), f = n(() => e ? Object.values(e).some((r) => r.length > 0) : !1, [e]);
+  return !e || Object.keys(e).length === 0 || !f || !s ? null : /* @__PURE__ */ d(l, { children: [
+    /* @__PURE__ */ o(m, { $renderAs: "ab1-bold", $color: "BLACK_1", children: "Attendance" }),
+    /* @__PURE__ */ o(m, { $renderAs: "ub2-bold", $color: "BLACK_T_60", children: A }),
+    /* @__PURE__ */ o(h, { heightX: 1 }),
+    /* @__PURE__ */ d(l, { $borderColor: "WHITE_5", children: [
+      /* @__PURE__ */ o(_, { children: u.DAY_HEADERS.map((r) => /* @__PURE__ */ o(m, { $align: "center", $renderAs: "ub3", $color: "BLACK_T_60", children: r }, r)) }),
+      /* @__PURE__ */ o(x, { children: s.map((r, p) => /* @__PURE__ */ o(
+        g,
+        {
+          day: r,
+          reportMonth: t,
+          onDateClick: c
+        },
+        r ? `day-${r.date}` : `empty-${p}`
+      )) })
+    ] })
+  ] });
+}, w = $(T);
+export {
+  w as default
+};
+//# sourceMappingURL=attendance.js.map

package/dist/features/timeline/monthly-report/comps/attendance/attendance.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attendance.js","sources":["../../../../../../src/features/timeline/monthly-report/comps/attendance/attendance.tsx"],"sourcesContent":["import { memo, useMemo, type FC } from 'react';\n\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Separator from '../../../../ui/separator/separator';\nimport Text from '../../../../ui/text/text';\nimport { CALENDAR_CONFIG } from './attendance-constants';\nimport type { IAttendanceProps } from './attendance-types';\nimport { attendanceStatsText, generateCalendarGrid } from './attendance-utils';\nimport * as Styled from './attendance.styled';\nimport AttendenceView from './attendence-view';\n\nconst Attendance: FC<IAttendanceProps> = ({\n  calendarData,\n  reportMonth,\n  reportYear,\n  onDateClick,\n}) => {\n  const attendanceStats = useMemo(\n    () => !!calendarData && attendanceStatsText(calendarData),\n    [calendarData],\n  );\n  const calendarGrid = useMemo(\n    () => !!calendarData && generateCalendarGrid(calendarData, reportMonth, reportYear),\n    [calendarData, reportMonth, reportYear],\n  );\n\n  const hasClasses = useMemo(() => {\n    if (!calendarData) return false;\n\n    return Object.values(calendarData).some(dayClasses => dayClasses.length > 0);\n  }, [calendarData]);\n\n  if (!calendarData || Object.keys(calendarData).length === 0 || !hasClasses || !calendarGrid) {\n    return null;\n  }\n\n  return (\n    <FlexView>\n      <Text $renderAs=\"ab1-bold\" $color=\"BLACK_1\">\n        Attendance\n      </Text>\n      <Text $renderAs=\"ub2-bold\" $color=\"BLACK_T_60\">\n        {attendanceStats}\n      </Text>\n      <Separator heightX={1} />\n      <FlexView $borderColor=\"WHITE_5\">\n        <Styled.CalendarHeader>\n          {CALENDAR_CONFIG.DAY_HEADERS.map(dayLetter => (\n            <Text $align=\"center\" $renderAs=\"ub3\" $color=\"BLACK_T_60\" key={dayLetter}>\n              {dayLetter}\n            </Text>\n          ))}\n        </Styled.CalendarHeader>\n        <Styled.CalendarBody>\n          {calendarGrid.map((day, index) => (\n            <AttendenceView\n              day={day}\n              key={day ? `day-${day.date}` : `empty-${index}`}\n              reportMonth={reportMonth}\n              onDateClick={onDateClick}\n            />\n          ))}\n        </Styled.CalendarBody>\n      </FlexView>\n    </FlexView>\n  );\n};\n\nexport default memo(Attendance);\n"],"names":["Attendance","calendarData","reportMonth","reportYear","onDateClick","attendanceStats","useMemo","attendanceStatsText","calendarGrid","generateCalendarGrid","hasClasses","dayClasses","FlexView","jsx","Text","Separator","jsxs","Styled.CalendarHeader","dayLetter","Styled.CalendarBody","day","index","AttendenceView","Attendance$1","memo"],"mappings":";;;;;;;;;AAWA,MAAMA,IAAmC,CAAC;AAAA,EACxC,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AACF,MAAM;AACJ,QAAMC,IAAkBC;AAAA,IACtB,MAAM,CAAC,CAACL,KAAgBM,EAAoBN,CAAY;AAAA,IACxD,CAACA,CAAY;AAAA,EAAA,GAETO,IAAeF;AAAA,IACnB,MAAM,CAAC,CAACL,KAAgBQ,EAAqBR,GAAcC,GAAaC,CAAU;AAAA,IAClF,CAACF,GAAcC,GAAaC,CAAU;AAAA,EAAA,GAGlCO,IAAaJ,EAAQ,MACpBL,IAEE,OAAO,OAAOA,CAAY,EAAE,KAAK,CAAcU,MAAAA,EAAW,SAAS,CAAC,IAFjD,IAGzB,CAACV,CAAY,CAAC;AAEb,SAAA,CAACA,KAAgB,OAAO,KAAKA,CAAY,EAAE,WAAW,KAAK,CAACS,KAAc,CAACF,IACtE,yBAINI,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAC,EAACC,GAAK,EAAA,WAAU,YAAW,QAAO,WAAU,UAE5C,cAAA;AAAA,sBACCA,GAAK,EAAA,WAAU,YAAW,QAAO,cAC/B,UACHT,GAAA;AAAA,IACA,gBAAAQ,EAACE,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,IACvB,gBAAAC,EAACJ,GAAS,EAAA,cAAa,WACrB,UAAA;AAAA,MAAA,gBAAAC,EAACI,GAAA,EACE,YAAgB,YAAY,IAAI,OAC9B,gBAAAJ,EAAAC,GAAA,EAAK,QAAO,UAAS,WAAU,OAAM,QAAO,cAC1C,UAD4DI,EAAA,GAAAA,CAE/D,CACD,GACH;AAAA,MACA,gBAAAL,EAACM,GAAA,EACE,YAAa,IAAI,CAACC,GAAKC,MACtB,gBAAAR;AAAA,QAACS;AAAA,QAAA;AAAA,UACC,KAAAF;AAAA,UAEA,aAAAlB;AAAA,UACA,aAAAE;AAAA,QAAA;AAAA,QAFKgB,IAAM,OAAOA,EAAI,IAAI,KAAK,SAASC,CAAK;AAAA,MAIhD,CAAA,GACH;AAAA,IAAA,GACF;AAAA,EACF,EAAA,CAAA;AAEJ,GAEeE,IAAAC,EAAKxB,CAAU;"}

package/dist/features/timeline/monthly-report/comps/attendance/attendance.styled.js

@@ -0,0 +1,39 @@
+import r from "styled-components";
+import t from "../../../../ui/layout/flex-view.js";
+const e = r.div`
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  padding: 4px 0;
+  background-color: ${({ theme: o }) => o.colors.WHITE_2};
+  border-bottom: 1px solid ${({ theme: o }) => o.colors.WHITE_5};
+`, l = r.div`
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0;
+`, p = r(t)`
+  position: relative;
+  aspect-ratio: 3/2;
+  border-right: 1px solid ${({ theme: o }) => o.colors.WHITE_5};
+  border-bottom: 1px solid ${({ theme: o }) => o.colors.WHITE_5};
+
+  &:nth-child(7n) {
+    border-right: none;
+  }
+`, a = r.div`
+  position: absolute;
+  top: ${({ $top: o }) => o || "2px"};
+  right: ${({ $right: o }) => o || "2px"};
+`, s = r.div`
+  > div {
+    width: 100%;
+    height: 100%;
+  }
+`;
+export {
+  l as CalendarBody,
+  p as CalendarDay,
+  e as CalendarHeader,
+  a as StatusSymbol,
+  s as TooltipWrapper
+};
+//# sourceMappingURL=attendance.styled.js.map

package/dist/features/timeline/monthly-report/comps/attendance/attendance.styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attendance.styled.js","sources":["../../../../../../src/features/timeline/monthly-report/comps/attendance/attendance.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../../ui/layout/flex-view';\n\nexport const CalendarHeader = styled.div`\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  padding: 4px 0;\n  background-color: ${({ theme }) => theme.colors.WHITE_2};\n  border-bottom: 1px solid ${({ theme }) => theme.colors.WHITE_5};\n`;\n\nexport const CalendarBody = styled.div`\n  display: grid;\n  grid-template-columns: repeat(7, 1fr);\n  gap: 0;\n`;\n\nexport const CalendarDay = styled(FlexView)`\n  position: relative;\n  aspect-ratio: 3/2;\n  border-right: 1px solid ${({ theme }) => theme.colors.WHITE_5};\n  border-bottom: 1px solid ${({ theme }) => theme.colors.WHITE_5};\n\n  &:nth-child(7n) {\n    border-right: none;\n  }\n`;\n\nexport const StatusSymbol = styled.div<{ $top?: string; $right?: string }>`\n  position: absolute;\n  top: ${({ $top }) => $top || '2px'};\n  right: ${({ $right }) => $right || '2px'};\n`;\n\nexport const TooltipWrapper = styled.div`\n  > div {\n    width: 100%;\n    height: 100%;\n  }\n`;\n"],"names":["CalendarHeader","styled","theme","CalendarBody","CalendarDay","FlexView","StatusSymbol","$top","$right","TooltipWrapper"],"mappings":";;AAIO,MAAMA,IAAiBC,EAAO;AAAA;AAAA;AAAA;AAAA,sBAIf,CAAC,EAAE,OAAAC,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA,6BAC5B,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA,GAGnDC,IAAeF,EAAO;AAAA;AAAA;AAAA;AAAA,GAMtBG,IAAcH,EAAOI,CAAQ;AAAA;AAAA;AAAA,4BAGd,CAAC,EAAE,OAAAH,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA,6BAClC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,GAOnDI,IAAeL,EAAO;AAAA;AAAA,SAE1B,CAAC,EAAE,MAAAM,QAAWA,KAAQ,KAAK;AAAA,WACzB,CAAC,EAAE,QAAAC,QAAaA,KAAU,KAAK;AAAA,GAG7BC,IAAiBR,EAAO;AAAA;AAAA;AAAA;AAAA;AAAA;"}

package/dist/features/timeline/monthly-report/comps/attendance/attendence-view.js

@@ -0,0 +1,52 @@
+import { jsx as r, jsxs as s, Fragment as c } from "react/jsx-runtime";
+import { memo as p, useCallback as g } from "react";
+import { IS_APP_RUNNING_IN_RN as b } from "../../../../../constants/app-config.js";
+import f from "../../../../ui/arrow-tooltip/arrow-tooltip.js";
+import $ from "../../../../ui/layout/flex-view.js";
+import n from "../../../../ui/text/text.js";
+import { MONTH_NAMES as l } from "./attendance-constants.js";
+import { getSnackbarMsg as h, getStatusText as u } from "./attendance-utils.js";
+import { TooltipWrapper as A, CalendarDay as _, StatusSymbol as T } from "./attendance.styled.js";
+function I({ day: e, reportMonth: t, onDateClick: o }) {
+  const m = g(() => {
+    o == null || o({
+      type: "info",
+      message: h((e == null ? void 0 : e.classes) || [], `${l[t]} ${(e == null ? void 0 : e.date) ?? ""}`) ?? "",
+      bgColor: (e == null ? void 0 : e.snackbarBg) || "WHITE_5"
+    });
+  }, [e == null ? void 0 : e.classes, e == null ? void 0 : e.date, e == null ? void 0 : e.snackbarBg, o, t]);
+  return /* @__PURE__ */ r(A, { onClick: m, children: /* @__PURE__ */ r(
+    f,
+    {
+      renderAs: "primary",
+      position: "top",
+      hidden: b || !(e != null && e.hasClasses),
+      backgroundColor: (e == null ? void 0 : e.tooltipBgColor) || "WHITE_5",
+      tooltipItem: e != null && e.classes ? /* @__PURE__ */ s($, { children: [
+        /* @__PURE__ */ s(n, { $align: "center", $renderAs: "ab3", $color: "BLACK_1", children: [
+          l[t - 1],
+          " ",
+          e.date
+        ] }),
+        e.classes.map((i) => /* @__PURE__ */ r(n, { $align: "center", $renderAs: "ab3", children: u(i) }, i.time))
+      ] }) : "",
+      children: /* @__PURE__ */ r(
+        _,
+        {
+          $background: (e == null ? void 0 : e.themeColor) || "WHITE_1",
+          $justifyContent: "center",
+          $alignItems: "center",
+          children: e && /* @__PURE__ */ s(c, { children: [
+            /* @__PURE__ */ r(n, { $renderAs: "ab2", $color: "BLACK_T_38", children: e.date }),
+            /* @__PURE__ */ r(T, { children: !!e.statusSymbol && e.statusSymbol })
+          ] })
+        }
+      )
+    }
+  ) });
+}
+const k = p(I);
+export {
+  k as default
+};
+//# sourceMappingURL=attendence-view.js.map

package/dist/features/timeline/monthly-report/comps/attendance/attendence-view.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attendence-view.js","sources":["../../../../../../src/features/timeline/monthly-report/comps/attendance/attendence-view.tsx"],"sourcesContent":["import { memo, useCallback } from 'react';\n\nimport { IS_APP_RUNNING_IN_RN } from '../../../../../constants/app-config';\nimport ArrowTooltip from '../../../../ui/arrow-tooltip/arrow-tooltip';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport Text from '../../../../ui/text/text';\nimport { MONTH_NAMES } from './attendance-constants';\nimport { getSnackbarMsg, getStatusText } from './attendance-utils';\nimport * as Styled from './attendance.styled';\nimport type { ICalenderViewProps } from './attendance-types';\n\nfunction AttendanceView({ day, reportMonth, onDateClick }: ICalenderViewProps) {\n  const handleClick = useCallback(() => {\n    onDateClick?.({\n      type: 'info',\n      message:\n        getSnackbarMsg(day?.classes || [], `${MONTH_NAMES[reportMonth]} ${day?.date ?? ''}`) ?? '',\n      bgColor: day?.snackbarBg || 'WHITE_5',\n    });\n  }, [day?.classes, day?.date, day?.snackbarBg, onDateClick, reportMonth]);\n\n  return (\n    <Styled.TooltipWrapper onClick={handleClick}>\n      <ArrowTooltip\n        renderAs=\"primary\"\n        position=\"top\"\n        hidden={IS_APP_RUNNING_IN_RN || !day?.hasClasses}\n        backgroundColor={day?.tooltipBgColor || 'WHITE_5'}\n        tooltipItem={\n          day?.classes ? (\n            <FlexView>\n              <Text $align=\"center\" $renderAs=\"ab3\" $color=\"BLACK_1\">\n                {MONTH_NAMES[reportMonth - 1]} {day.date}\n              </Text>\n              {day.classes.map(classEvent => (\n                <Text $align=\"center\" $renderAs=\"ab3\" key={classEvent.time}>\n                  {getStatusText(classEvent)}\n                </Text>\n              ))}\n            </FlexView>\n          ) : (\n            ''\n          )\n        }\n      >\n        <Styled.CalendarDay\n          $background={day?.themeColor || 'WHITE_1'}\n          $justifyContent=\"center\"\n          $alignItems=\"center\"\n        >\n          {day && (\n            <>\n              <Text $renderAs=\"ab2\" $color=\"BLACK_T_38\">\n                {day.date}\n              </Text>\n              <Styled.StatusSymbol>{!!day.statusSymbol && day.statusSymbol}</Styled.StatusSymbol>\n            </>\n          )}\n        </Styled.CalendarDay>\n      </ArrowTooltip>\n    </Styled.TooltipWrapper>\n  );\n}\n\nexport default memo(AttendanceView);\n"],"names":["AttendanceView","day","reportMonth","onDateClick","handleClick","useCallback","getSnackbarMsg","MONTH_NAMES","jsx","Styled.TooltipWrapper","ArrowTooltip","IS_APP_RUNNING_IN_RN","jsxs","FlexView","Text","classEvent","getStatusText","Styled.CalendarDay","Fragment","Styled.StatusSymbol","AttendenceView","memo"],"mappings":";;;;;;;;;AAWA,SAASA,EAAe,EAAE,KAAAC,GAAK,aAAAC,GAAa,aAAAC,KAAmC;AACvE,QAAAC,IAAcC,EAAY,MAAM;AACtB,IAAAF,KAAA,QAAAA,EAAA;AAAA,MACZ,MAAM;AAAA,MACN,SACEG,GAAeL,KAAA,gBAAAA,EAAK,YAAW,CAAI,GAAA,GAAGM,EAAYL,CAAW,CAAC,KAAID,KAAA,gBAAAA,EAAK,SAAQ,EAAE,EAAE,KAAK;AAAA,MAC1F,UAASA,KAAA,gBAAAA,EAAK,eAAc;AAAA,IAAA;AAAA,EAC7B,GACA,CAACA,KAAA,gBAAAA,EAAK,SAASA,KAAA,gBAAAA,EAAK,MAAMA,KAAA,gBAAAA,EAAK,YAAYE,GAAaD,CAAW,CAAC;AAEvE,SACG,gBAAAM,EAAAC,GAAA,EAAsB,SAASL,GAC9B,UAAA,gBAAAI;AAAA,IAACE;AAAA,IAAA;AAAA,MACC,UAAS;AAAA,MACT,UAAS;AAAA,MACT,QAAQC,KAAwB,EAACV,KAAA,QAAAA,EAAK;AAAA,MACtC,kBAAiBA,KAAA,gBAAAA,EAAK,mBAAkB;AAAA,MACxC,aACEA,KAAA,QAAAA,EAAK,UACH,gBAAAW,EAACC,GACC,EAAA,UAAA;AAAA,QAAA,gBAAAD,EAACE,KAAK,QAAO,UAAS,WAAU,OAAM,QAAO,WAC1C,UAAA;AAAA,UAAAP,EAAYL,IAAc,CAAC;AAAA,UAAE;AAAA,UAAED,EAAI;AAAA,QAAA,GACtC;AAAA,QACCA,EAAI,QAAQ,IAAI,CAAAc,wBACdD,GAAK,EAAA,QAAO,UAAS,WAAU,OAC7B,UAAcE,EAAAD,CAAU,KADgBA,EAAW,IAEtD,CACD;AAAA,MAAA,EAAA,CACH,IAEA;AAAA,MAIJ,UAAA,gBAAAP;AAAA,QAACS;AAAAA,QAAA;AAAA,UACC,cAAahB,KAAA,gBAAAA,EAAK,eAAc;AAAA,UAChC,iBAAgB;AAAA,UAChB,aAAY;AAAA,UAEX,eAEG,gBAAAW,EAAAM,GAAA,EAAA,UAAA;AAAA,YAAA,gBAAAV,EAACM,KAAK,WAAU,OAAM,QAAO,cAC1B,YAAI,MACP;AAAA,YACA,gBAAAN,EAACW,GAAA,EAAqB,WAAC,CAAClB,EAAI,gBAAgBA,EAAI,cAAa;AAAA,UAAA,GAC/D;AAAA,QAAA;AAAA,MAEJ;AAAA,IAAA;AAAA,EAEJ,EAAA,CAAA;AAEJ;AAEA,MAAemB,IAAAC,EAAKrB,CAAc;"}

package/dist/features/timeline/monthly-report/comps/feedback/feedback-styled.js

@@ -0,0 +1,9 @@
+import e from "styled-components";
+import o from "../../../../ui/layout/flex-view.js";
+const i = e(o)`
+  margin: 0 -16px;
+`;
+export {
+  i as FeedbackContainer
+};
+//# sourceMappingURL=feedback-styled.js.map

package/dist/features/timeline/monthly-report/comps/feedback/feedback-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"feedback-styled.js","sources":["../../../../../../src/features/timeline/monthly-report/comps/feedback/feedback-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../../ui/layout/flex-view';\n\nexport const FeedbackContainer = styled(FlexView)`\n  margin: 0 -16px;\n`;\n"],"names":["FeedbackContainer","styled","FlexView"],"mappings":";;AAIa,MAAAA,IAAoBC,EAAOC,CAAQ;AAAA;AAAA;"}

package/dist/features/timeline/monthly-report/comps/feedback/feedback.js

@@ -0,0 +1,94 @@
+import { jsxs as h, jsx as e } from "react/jsx-runtime";
+import { memo as X, useCallback as i } from "react";
+import n from "../../../../ui/layout/flex-view.js";
+import { ILLUSTRATIONS as p } from "../../../../../assets/illustrations/illustrations.js";
+import g from "../../../../ui/image/image.js";
+import { invalidateMonthlyReport as w, useMonthlyReportPatch as y } from "../../api/use-monthly-report-get.js";
+import $ from "../../../../ui/separator/separator.js";
+import P from "../../../../ui/text/text.js";
+import f from "../../../../ui/buttons/clickable/clickable.js";
+import { FeedbackContainer as x } from "./feedback-styled.js";
+const R = ({
+  reportId: l,
+  studentName: b,
+  onFeedback: c,
+  studentCourseId: s,
+  showSnackbar: a
+}) => {
+  const u = i(
+    (r, o) => {
+      r && a && a({
+        type: "error",
+        message: "Something went wrong. Please try again.",
+        bgColor: "red"
+      }), !r && c && (o != null && o.feedback) && (w(l), c(o.feedback, s));
+    },
+    [c, s]
+  ), { patch: m, isProcessing: d } = y({
+    onComplete: u
+  }), t = i(
+    (r) => {
+      m(l, { feedback: r });
+    },
+    [l, m]
+  ), C = i(() => {
+    t("positive");
+  }, [t]), k = i(() => {
+    t("negative");
+  }, [t]);
+  return /* @__PURE__ */ h(x, { $gapX: 1.25, $background: "WHITE_3", children: [
+    /* @__PURE__ */ e(n, { $gutterX: 1, children: /* @__PURE__ */ h(P, { $renderAs: "ab2-black", $color: "BLACK_1", $align: "center", children: [
+      "Are you happy with ",
+      b ?? "her",
+      " progress?"
+    ] }) }),
+    /* @__PURE__ */ e($, { heightX: 1.5 }),
+    /* @__PURE__ */ h(n, { $flexDirection: "row", $flexGapX: 3, $alignItems: "center", $justifyContent: "center", children: [
+      /* @__PURE__ */ e(
+        f,
+        {
+          label: "Report thumps up",
+          disabled: d,
+          onClick: C,
+          children: /* @__PURE__ */ e(
+            n,
+            {
+              $widthX: 5,
+              $heightX: 5,
+              $alignItems: "center",
+              $justifyContent: "center",
+              $borderRadiusX: 2.5,
+              $borderColor: "BLACK_5",
+              children: /* @__PURE__ */ e(g, { src: p.THUMPS_UP, alt: "UP", width: 32, height: 32 })
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ e(
+        f,
+        {
+          label: "Report thumps down",
+          disabled: d,
+          onClick: k,
+          children: /* @__PURE__ */ e(
+            n,
+            {
+              $widthX: 5,
+              $heightX: 5,
+              $alignItems: "center",
+              $justifyContent: "center",
+              $borderColor: "BLACK_5",
+              $borderRadiusX: 2.5,
+              children: /* @__PURE__ */ e(g, { src: p.THUMPS_DOWN, alt: "DOWN", width: 32, height: 32 })
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e($, { heightX: 1.5 })
+  ] });
+}, I = X(R);
+export {
+  I as default
+};
+//# sourceMappingURL=feedback.js.map

package/dist/features/timeline/monthly-report/comps/feedback/feedback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"feedback.js","sources":["../../../../../../src/features/timeline/monthly-report/comps/feedback/feedback.tsx"],"sourcesContent":["import { memo, useCallback } from 'react';\n\nimport type { IMonthlyReportResponse, TFeedback } from '../../monthly-report-types';\nimport type { IFeedbackTypesProps } from './feedback-types';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport { ILLUSTRATIONS } from '../../../../../assets/illustrations/illustrations';\nimport Image from '../../../../ui/image/image';\nimport { invalidateMonthlyReport, useMonthlyReportPatch } from '../../api/use-monthly-report-get';\nimport Separator from '../../../../ui/separator/separator';\nimport Text from '../../../../ui/text/text';\nimport Clickable from '../../../../ui/buttons/clickable/clickable';\nimport * as Styled from './feedback-styled';\n\nconst Feedback = ({\n  reportId,\n  studentName,\n  onFeedback,\n  studentCourseId,\n  showSnackbar,\n}: IFeedbackTypesProps) => {\n  const onComplete = useCallback(\n    (err: string | null, data?: IMonthlyReportResponse) => {\n      if (err && showSnackbar) {\n        showSnackbar({\n          type: 'error',\n          message: 'Something went wrong. Please try again.',\n          bgColor: 'red',\n        });\n      }\n\n      if (!err && onFeedback && data?.feedback) {\n        invalidateMonthlyReport(reportId);\n        onFeedback(data.feedback, studentCourseId);\n      }\n    },\n    [onFeedback, studentCourseId],\n  );\n\n  const { patch: updateMilestone, isProcessing } = useMonthlyReportPatch({\n    onComplete,\n  });\n\n  const handleFeedback = useCallback(\n    (feedback: TFeedback) => {\n      updateMilestone(reportId, { feedback });\n    },\n    [reportId, updateMilestone],\n  );\n\n  const handlePositiveFeedback = useCallback(() => {\n    handleFeedback('positive');\n  }, [handleFeedback]);\n\n  const handleNegativeFeedback = useCallback(() => {\n    handleFeedback('negative');\n  }, [handleFeedback]);\n\n  return (\n    <Styled.FeedbackContainer $gapX={1.25} $background=\"WHITE_3\">\n      <FlexView $gutterX={1}>\n        <Text $renderAs=\"ab2-black\" $color=\"BLACK_1\" $align=\"center\">\n          Are you happy with {studentName ?? 'her'} progress?\n        </Text>\n      </FlexView>\n      <Separator heightX={1.5} />\n      <FlexView $flexDirection=\"row\" $flexGapX={3} $alignItems=\"center\" $justifyContent=\"center\">\n        <Clickable\n          label=\"Report thumps up\"\n          disabled={isProcessing}\n          onClick={handlePositiveFeedback}\n        >\n          <FlexView\n            $widthX={5}\n            $heightX={5}\n            $alignItems=\"center\"\n            $justifyContent=\"center\"\n            $borderRadiusX={2.5}\n            $borderColor=\"BLACK_5\"\n          >\n            <Image src={ILLUSTRATIONS.THUMPS_UP} alt=\"UP\" width={32} height={32} />\n          </FlexView>\n        </Clickable>\n        <Clickable\n          label=\"Report thumps down\"\n          disabled={isProcessing}\n          onClick={handleNegativeFeedback}\n        >\n          <FlexView\n            $widthX={5}\n            $heightX={5}\n            $alignItems=\"center\"\n            $justifyContent=\"center\"\n            $borderColor=\"BLACK_5\"\n            $borderRadiusX={2.5}\n          >\n            <Image src={ILLUSTRATIONS.THUMPS_DOWN} alt=\"DOWN\" width={32} height={32} />\n          </FlexView>\n        </Clickable>\n      </FlexView>\n      <Separator heightX={1.5} />\n    </Styled.FeedbackContainer>\n  );\n};\n\nexport default memo(Feedback);\n"],"names":["Feedback","reportId","studentName","onFeedback","studentCourseId","showSnackbar","onComplete","useCallback","err","data","invalidateMonthlyReport","updateMilestone","isProcessing","useMonthlyReportPatch","handleFeedback","feedback","handlePositiveFeedback","handleNegativeFeedback","Styled.FeedbackContainer","jsx","FlexView","jsxs","Text","Separator","Clickable","Image","ILLUSTRATIONS","Feedback$1","memo"],"mappings":";;;;;;;;;;AAaA,MAAMA,IAAW,CAAC;AAAA,EAChB,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,cAAAC;AACF,MAA2B;AACzB,QAAMC,IAAaC;AAAA,IACjB,CAACC,GAAoBC,MAAkC;AACrD,MAAID,KAAOH,KACIA,EAAA;AAAA,QACX,MAAM;AAAA,QACN,SAAS;AAAA,QACT,SAAS;AAAA,MAAA,CACV,GAGC,CAACG,KAAOL,MAAcM,KAAA,QAAAA,EAAM,cAC9BC,EAAwBT,CAAQ,GACrBE,EAAAM,EAAK,UAAUL,CAAe;AAAA,IAE7C;AAAA,IACA,CAACD,GAAYC,CAAe;AAAA,EAAA,GAGxB,EAAE,OAAOO,GAAiB,cAAAC,EAAA,IAAiBC,EAAsB;AAAA,IACrE,YAAAP;AAAA,EAAA,CACD,GAEKQ,IAAiBP;AAAA,IACrB,CAACQ,MAAwB;AACP,MAAAJ,EAAAV,GAAU,EAAE,UAAAc,EAAA,CAAU;AAAA,IACxC;AAAA,IACA,CAACd,GAAUU,CAAe;AAAA,EAAA,GAGtBK,IAAyBT,EAAY,MAAM;AAC/C,IAAAO,EAAe,UAAU;AAAA,EAAA,GACxB,CAACA,CAAc,CAAC,GAEbG,IAAyBV,EAAY,MAAM;AAC/C,IAAAO,EAAe,UAAU;AAAA,EAAA,GACxB,CAACA,CAAc,CAAC;AAEnB,2BACGI,GAAA,EAAyB,OAAO,MAAM,aAAY,WACjD,UAAA;AAAA,IAAC,gBAAAC,EAAAC,GAAA,EAAS,UAAU,GAClB,UAAC,gBAAAC,EAAAC,GAAA,EAAK,WAAU,aAAY,QAAO,WAAU,QAAO,UAAS,UAAA;AAAA,MAAA;AAAA,MACvCpB,KAAe;AAAA,MAAM;AAAA,IAAA,EAAA,CAC3C,EACF,CAAA;AAAA,IACA,gBAAAiB,EAACI,GAAU,EAAA,SAAS,IAAK,CAAA;AAAA,IACzB,gBAAAF,EAACD,KAAS,gBAAe,OAAM,WAAW,GAAG,aAAY,UAAS,iBAAgB,UAChF,UAAA;AAAA,MAAA,gBAAAD;AAAA,QAACK;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,UAAUZ;AAAA,UACV,SAASI;AAAA,UAET,UAAA,gBAAAG;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,SAAS;AAAA,cACT,UAAU;AAAA,cACV,aAAY;AAAA,cACZ,iBAAgB;AAAA,cAChB,gBAAgB;AAAA,cAChB,cAAa;AAAA,cAEb,UAAA,gBAAAD,EAACM,GAAM,EAAA,KAAKC,EAAc,WAAW,KAAI,MAAK,OAAO,IAAI,QAAQ,GAAI,CAAA;AAAA,YAAA;AAAA,UACvE;AAAA,QAAA;AAAA,MACF;AAAA,MACA,gBAAAP;AAAA,QAACK;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,UAAUZ;AAAA,UACV,SAASK;AAAA,UAET,UAAA,gBAAAE;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,SAAS;AAAA,cACT,UAAU;AAAA,cACV,aAAY;AAAA,cACZ,iBAAgB;AAAA,cAChB,cAAa;AAAA,cACb,gBAAgB;AAAA,cAEhB,UAAA,gBAAAD,EAACM,GAAM,EAAA,KAAKC,EAAc,aAAa,KAAI,QAAO,OAAO,IAAI,QAAQ,GAAI,CAAA;AAAA,YAAA;AAAA,UAC3E;AAAA,QAAA;AAAA,MACF;AAAA,IAAA,GACF;AAAA,IACA,gBAAAP,EAACI,GAAU,EAAA,SAAS,IAAK,CAAA;AAAA,EAC3B,EAAA,CAAA;AAEJ,GAEeI,IAAAC,EAAK5B,CAAQ;"}

package/dist/features/timeline/monthly-report/comps/goals/goals-card/goal-chapter-card.js

@@ -0,0 +1,48 @@
+import { jsxs as e, jsx as n } from "react/jsx-runtime";
+import i from "../../../../../ui/text/text.js";
+import c from "../../../../../ui/layout/flex-view.js";
+import C from "../../../../../chapters/chapters-list/chapter-item/chapter-circular-progress/chapter-circular-progress.js";
+import { calculateProgress as g } from "../goals-constants.js";
+const E = ({ chapters: t }) => !t || t.length === 0 ? null : t.map((o, u) => {
+  const { completed: _, total: a } = o.progress_stat, { completed: $, total: m } = o.previous_progress_stat || {}, r = g(_, a), d = g($ || 0, m || 0), s = r - d, l = o.previous_progress_stat && s > 0 && a === m, f = l ? s : 0, p = r === 100;
+  return /* @__PURE__ */ e(
+    c,
+    {
+      $flexDirection: "row",
+      $flexGapX: 1,
+      $gutterX: 1,
+      children: [
+        o.image_url && /* @__PURE__ */ n(
+          C,
+          {
+            completionPercentage: l ? d : r,
+            imageUrl: o.image_url,
+            delta: f,
+            imageWidth: 42,
+            iconWidth: 16,
+            deltaProgressColor: "GREEN_5",
+            iconColor: "WHITE",
+            iconBackgroundColor: "BLACK_1",
+            iconPosition: { top: 0, right: 0 }
+          }
+        ),
+        /* @__PURE__ */ e(c, { children: [
+          /* @__PURE__ */ n(i, { $renderAs: "ub2", $color: "BLACK_1", children: o.chapter_name }),
+          /* @__PURE__ */ e(c, { $flexDirection: "row", $alignItems: "center", $flexGapX: 0.25, children: [
+            /* @__PURE__ */ n(i, { $renderAs: "ub3", $color: "BLACK_T_60", children: p ? "Completed" : `${r}% completed` }),
+            l && !p && /* @__PURE__ */ e(i, { $renderAs: "ab3", $color: "GREEN_6", children: [
+              "(+",
+              Math.round(s),
+              "%)"
+            ] })
+          ] })
+        ] })
+      ]
+    },
+    `${o.chapter_name}-${u}`
+  );
+});
+export {
+  E as default
+};
+//# sourceMappingURL=goal-chapter-card.js.map

package/dist/features/timeline/monthly-report/comps/goals/goals-card/goal-chapter-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"goal-chapter-card.js","sources":["../../../../../../../src/features/timeline/monthly-report/comps/goals/goals-card/goal-chapter-card.tsx"],"sourcesContent":["import { type FC } from 'react';\n\nimport { type IGoalsCardChaptersProps } from './goals-card-types';\nimport Text from '../../../../../ui/text/text';\nimport FlexView from '../../../../../ui/layout/flex-view';\nimport ChapterCircularProgress from '../../../../../chapters/chapters-list/chapter-item/chapter-circular-progress/chapter-circular-progress';\nimport { calculateProgress } from '../goals-constants';\n\nconst GoalsCardChapters: FC<IGoalsCardChaptersProps> = ({ chapters }) => {\n  if (!chapters || chapters.length === 0) {\n    return null;\n  }\n\n  return chapters.map((chapter, i) => {\n    const { completed, total } = chapter.progress_stat;\n    const { completed: prevCompleted, total: prevTotal } = chapter.previous_progress_stat || {};\n    const progress = calculateProgress(completed, total);\n    const previousProgress = calculateProgress(prevCompleted || 0, prevTotal || 0);\n    const progressDifference = progress - previousProgress;\n    const showDelta =\n      chapter.previous_progress_stat && progressDifference > 0 && total === prevTotal;\n    const delta = showDelta ? progressDifference : 0;\n    const isCompoleted = progress === 100;\n\n    return (\n      <FlexView\n        $flexDirection=\"row\"\n        $flexGapX={1}\n        $gutterX={1}\n        key={`${chapter.chapter_name}-${i}`}\n      >\n        {chapter.image_url && (\n          <ChapterCircularProgress\n            completionPercentage={showDelta ? previousProgress : progress}\n            imageUrl={chapter.image_url}\n            delta={delta}\n            imageWidth={42}\n            iconWidth={16}\n            deltaProgressColor=\"GREEN_5\"\n            iconColor=\"WHITE\"\n            iconBackgroundColor=\"BLACK_1\"\n            iconPosition={{ top: 0, right: 0 }}\n          />\n        )}\n        <FlexView>\n          <Text $renderAs=\"ub2\" $color=\"BLACK_1\">\n            {chapter.chapter_name}\n          </Text>\n          <FlexView $flexDirection=\"row\" $alignItems=\"center\" $flexGapX={0.25}>\n            <Text $renderAs=\"ub3\" $color=\"BLACK_T_60\">\n              {isCompoleted ? 'Completed' : `${progress}% completed`}\n            </Text>\n            {showDelta && !isCompoleted && (\n              <Text $renderAs=\"ab3\" $color=\"GREEN_6\">\n                (+{Math.round(progressDifference)}%)\n              </Text>\n            )}\n          </FlexView>\n        </FlexView>\n      </FlexView>\n    );\n  });\n};\n\nexport default GoalsCardChapters;\n"],"names":["GoalsCardChapters","chapters","chapter","i","completed","total","prevCompleted","prevTotal","progress","calculateProgress","previousProgress","progressDifference","showDelta","delta","isCompoleted","jsxs","FlexView","jsx","ChapterCircularProgress","Text"],"mappings":";;;;;AAQA,MAAMA,IAAiD,CAAC,EAAE,UAAAC,QACpD,CAACA,KAAYA,EAAS,WAAW,IAC5B,OAGFA,EAAS,IAAI,CAACC,GAASC,MAAM;AAClC,QAAM,EAAE,WAAAC,GAAW,OAAAC,MAAUH,EAAQ,eAC/B,EAAE,WAAWI,GAAe,OAAOC,MAAcL,EAAQ,0BAA0B,IACnFM,IAAWC,EAAkBL,GAAWC,CAAK,GAC7CK,IAAmBD,EAAkBH,KAAiB,GAAGC,KAAa,CAAC,GACvEI,IAAqBH,IAAWE,GAChCE,IACJV,EAAQ,0BAA0BS,IAAqB,KAAKN,MAAUE,GAClEM,IAAQD,IAAYD,IAAqB,GACzCG,IAAeN,MAAa;AAGhC,SAAA,gBAAAO;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,gBAAe;AAAA,MACf,WAAW;AAAA,MACX,UAAU;AAAA,MAGT,UAAA;AAAA,QAAAd,EAAQ,aACP,gBAAAe;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,sBAAsBN,IAAYF,IAAmBF;AAAA,YACrD,UAAUN,EAAQ;AAAA,YAClB,OAAAW;AAAA,YACA,YAAY;AAAA,YACZ,WAAW;AAAA,YACX,oBAAmB;AAAA,YACnB,WAAU;AAAA,YACV,qBAAoB;AAAA,YACpB,cAAc,EAAE,KAAK,GAAG,OAAO,EAAE;AAAA,UAAA;AAAA,QACnC;AAAA,0BAEDG,GACC,EAAA,UAAA;AAAA,UAAA,gBAAAC,EAACE,KAAK,WAAU,OAAM,QAAO,WAC1B,YAAQ,cACX;AAAA,4BACCH,GAAS,EAAA,gBAAe,OAAM,aAAY,UAAS,WAAW,MAC7D,UAAA;AAAA,YAAC,gBAAAC,EAAAE,GAAA,EAAK,WAAU,OAAM,QAAO,cAC1B,UAAeL,IAAA,cAAc,GAAGN,CAAQ,cAC3C,CAAA;AAAA,YACCI,KAAa,CAACE,KACb,gBAAAC,EAACI,KAAK,WAAU,OAAM,QAAO,WAAU,UAAA;AAAA,cAAA;AAAA,cAClC,KAAK,MAAMR,CAAkB;AAAA,cAAE;AAAA,YAAA,GACpC;AAAA,UAAA,GAEJ;AAAA,QAAA,GACF;AAAA,MAAA;AAAA,IAAA;AAAA,IA7BK,GAAGT,EAAQ,YAAY,IAAIC,CAAC;AAAA,EAAA;AA8BnC,CAEH;"}

package/dist/features/timeline/monthly-report/comps/goals/goals-card/goals-card-styled.js

@@ -0,0 +1,28 @@
+import o from "styled-components";
+import t from "../../../../../ui/layout/flex-view.js";
+const p = o(t)`
+  position: absolute;
+  bottom: 0px;
+  left: 0;
+  right: 0;
+`, s = o(t)`
+  border-top: none;
+`, a = o(t)`
+  position: relative;
+  &::after {
+    content: '';
+    position: absolute;
+    height: 12px;
+    width: 20px;
+    left: 10px;
+    top: -8px;
+    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
+    background-color: ${({ theme: e, $background: r }) => e.colors[r ?? "WHITE_1"]};
+  }
+`;
+export {
+  s as ChaptersContainer,
+  p as ProgressBarContainer,
+  a as TagContainer
+};
+//# sourceMappingURL=goals-card-styled.js.map

package/dist/features/timeline/monthly-report/comps/goals/goals-card/goals-card-styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"goals-card-styled.js","sources":["../../../../../../../src/features/timeline/monthly-report/comps/goals/goals-card/goals-card-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../../../ui/layout/flex-view';\n\nexport const ProgressBarContainer = styled(FlexView)`\n  position: absolute;\n  bottom: 0px;\n  left: 0;\n  right: 0;\n`;\n\nexport const ChaptersContainer = styled(FlexView)`\n  border-top: none;\n`;\n\nexport const TagContainer = styled(FlexView)`\n  position: relative;\n  &::after {\n    content: '';\n    position: absolute;\n    height: 12px;\n    width: 20px;\n    left: 10px;\n    top: -8px;\n    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);\n    background-color: ${({ theme, $background }) => theme.colors[$background ?? 'WHITE_1']};\n  }\n`;\n"],"names":["ProgressBarContainer","styled","FlexView","ChaptersContainer","TagContainer","theme","$background"],"mappings":";;AAIa,MAAAA,IAAuBC,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,GAOtCC,IAAoBF,EAAOC,CAAQ;AAAA;AAAA,GAInCE,IAAeH,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAUnB,CAAC,EAAE,OAAAG,GAAO,aAAAC,QAAkBD,EAAM,OAAOC,KAAe,SAAS,CAAC;AAAA;AAAA;"}

package/dist/features/timeline/monthly-report/comps/goals/goals-card/goals-card.js

@@ -0,0 +1,113 @@
+import { jsxs as e, jsx as r, Fragment as h } from "react/jsx-runtime";
+import { memo as F, useState as H, useMemo as O, useCallback as W } from "react";
+import { GOAL_CATEGORY_CONFIG as j, calculateProgress as w } from "../goals-constants.js";
+import { ProgressBarContainer as y, TagContainer as E, ChaptersContainer as V } from "./goals-card-styled.js";
+import t from "../../../../../ui/text/text.js";
+import l from "../../../../../ui/layout/flex-view.js";
+import C from "../../../../../ui/separator/separator.js";
+import Y from "../../../../../ui/image/image.js";
+import G from "../../../../../ui/buttons/clickable/clickable.js";
+import B from "./goal-chapter-card.js";
+import q from "../../../../../ui/linear-progress-bar/linear-progress-bar.js";
+const z = ({ category: L, milestone: T, isExpended: o = !1 }) => {
+  const [d, k] = H(!1), {
+    milestone_name: v,
+    user_chapters: p,
+    progress_stat: P,
+    previous_progress_stat: n
+  } = T, { completed: I, total: a } = P, { completed: $, total: u } = n ?? {}, c = w(I, a), f = n && $ && u ? w($, u) : 0, i = c - f, g = !!(n && i > 0 && a === a), S = !!(n && i <= 0 && a !== a), b = c === 100, K = Math.round(c), x = Math.round(i), _ = p.length, D = p.slice(0, 2), m = Math.max(0, _ - 2), M = d ? p.slice(2) : [], N = m > 0, s = O(() => j[L], []), A = s.icon, X = W(() => {
+    k((R) => !R);
+  }, []);
+  return /* @__PURE__ */ e(l, { children: [
+    /* @__PURE__ */ e(
+      l,
+      {
+        $position: "relative",
+        $background: s.backgroundColor,
+        $borderColor: o ? "WHITE_5" : void 0,
+        $gutterX: 1,
+        $gapX: 1,
+        $height: o ? "auto" : 72,
+        children: [
+          /* @__PURE__ */ e(l, { $flexDirection: "row", $flexGapX: o ? 1 : 0.5, children: [
+            A && /* @__PURE__ */ r(
+              Y,
+              {
+                src: A,
+                withLoader: !0,
+                width: o ? 40 : 32,
+                height: o ? 40 : 32,
+                alt: s.label
+              }
+            ),
+            /* @__PURE__ */ e(l, { children: [
+              o && /* @__PURE__ */ e(h, { children: [
+                /* @__PURE__ */ r(t, { $renderAs: "ac5", $color: s.labelColor, children: s.label }),
+                /* @__PURE__ */ r(C, { heightX: 0.25 })
+              ] }),
+              /* @__PURE__ */ r(t, { $renderAs: "ab2", $color: "BLACK_1", children: v }),
+              /* @__PURE__ */ r(C, { heightX: o ? 0.5 : 0.125 }),
+              /* @__PURE__ */ e(l, { $flexDirection: "row", $alignItems: "center", $flexGapX: 0.25, children: [
+                /* @__PURE__ */ r(t, { $renderAs: "ab3", $color: "BLACK_T_60", children: b ? "Completed" : `${K}% complete` }),
+                g && !b && /* @__PURE__ */ e(t, { $renderAs: "ab3", $color: "GREEN_6", children: [
+                  "(+",
+                  x,
+                  "%)"
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ r(y, { children: /* @__PURE__ */ r(
+              q,
+              {
+                percentage: g ? f : c,
+                delta: g ? i : 0,
+                height: 4,
+                backgroundColor: "WHITE_5",
+                fillColor: "BLACK_1",
+                deltaProgressColor: "GREEN_5"
+              }
+            ) })
+          ] }),
+          S && /* @__PURE__ */ e(h, { children: [
+            /* @__PURE__ */ r(C, { heightX: 0.875 }),
+            /* @__PURE__ */ r(E, { $gapX: 0.5, $gutterX: 1, $background: s.tagColor, children: /* @__PURE__ */ r(t, { $renderAs: "ub3", $color: "BLACK_1", children: "Learning plan was modified — progress updated accordingly." }) })
+          ] })
+        ]
+      }
+    ),
+    o && _ > 0 && /* @__PURE__ */ e(
+      V,
+      {
+        $gapX: 1,
+        $flexDirection: "column",
+        $flexGapX: 1.25,
+        $borderColor: "WHITE_5",
+        children: [
+          /* @__PURE__ */ r(B, { chapters: D }),
+          N && /* @__PURE__ */ e(h, { children: [
+            !d && /* @__PURE__ */ r(l, { $gutterX: 4.5, children: /* @__PURE__ */ r(
+              G,
+              {
+                onClick: X,
+                label: `+${m} chapters`,
+                children: /* @__PURE__ */ e(t, { $renderAs: "ub3-bold", $color: "BLACK_1", children: [
+                  "+",
+                  m,
+                  " chapters"
+                ] })
+              }
+            ) }),
+            d && /* @__PURE__ */ e(h, { children: [
+              /* @__PURE__ */ r(B, { chapters: M }),
+              /* @__PURE__ */ r(l, { $gutterX: 4.5, children: /* @__PURE__ */ r(G, { onClick: X, label: "Show less", children: /* @__PURE__ */ r(t, { $renderAs: "ub3-bold", $color: "BLACK_1", children: "Show less" }) }) })
+            ] })
+          ] })
+        ]
+      }
+    )
+  ] });
+}, nr = F(z);
+export {
+  nr as default
+};
+//# sourceMappingURL=goals-card.js.map