@cuemath/leap 3.5.30-link.4 → 3.5.31-as1

package/dist/features/timeline/daily-timeline-styled.js

@@ -1,21 +1,25 @@
-import i from "styled-components";
-import o from "../ui/layout/flex-view.js";
-const r = i(o)`
+import t from "styled-components";
+import e from "../ui/layout/flex-view.js";
+import o from "../ui/text/text.js";
+const n = t(e)`
   overflow-y: auto;
   width: 100%;
   scroll-behavior: smooth;
   will-change: height;
-`, h = i(o)`
+`, a = t(e)`
   max-width: 512px;
   width: 100%;
   will-change: height;
-`, a = i(o)`
-  margin-top: ${({ $addedMonthBreak: t }) => t ? "-108px" : "0"};
+`, m = t(e)`
+  margin-top: ${({ $addedMonthBreak: i }) => i ? "-108px" : "0"};
   z-index: 1;
+`, p = t(o)`
+  line-height: 8px;
 `;
 export {
-  a as DailyItems,
-  h as DailyTimelineContainer,
-  r as ScrollWrapper
+  m as DailyItems,
+  a as DailyTimelineContainer,
+  p as DateText,
+  n as ScrollWrapper
 };
 //# sourceMappingURL=daily-timeline-styled.js.map

package/dist/features/timeline/daily-timeline-styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"daily-timeline-styled.js","sources":["../../../src/features/timeline/daily-timeline-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../ui/layout/flex-view';\n\nconst ScrollWrapper = styled(FlexView)`\n  overflow-y: auto;\n  width: 100%;\n  scroll-behavior: smooth;\n  will-change: height;\n`;\n\nconst DailyTimelineContainer = styled(FlexView)`\n  max-width: 512px;\n  width: 100%;\n  will-change: height;\n`;\n\nconst DailyItems = styled(FlexView)<{ $addedMonthBreak?: boolean }>`\n  margin-top: ${({ $addedMonthBreak }) =>\n    $addedMonthBreak\n      ? '-108px' // 64px card height + 16px(separator) + 16(date text) + 12(separator)\n      : '0'};\n  z-index: 1;\n`;\n\nexport { DailyTimelineContainer, DailyItems, ScrollWrapper };\n"],"names":["ScrollWrapper","styled","FlexView","DailyTimelineContainer","DailyItems","$addedMonthBreak"],"mappings":";;AAIM,MAAAA,IAAgBC,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,GAO/BC,IAAyBF,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,GAMxCE,IAAaH,EAAOC,CAAQ;AAAA,gBAClB,CAAC,EAAE,kBAAAG,EAAA,MACfA,IACI,WACA,GAAG;AAAA;AAAA;"}
+{"version":3,"file":"daily-timeline-styled.js","sources":["../../../src/features/timeline/daily-timeline-styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../ui/layout/flex-view';\nimport Text from '../ui/text/text';\n\nconst ScrollWrapper = styled(FlexView)`\n  overflow-y: auto;\n  width: 100%;\n  scroll-behavior: smooth;\n  will-change: height;\n`;\n\nconst DailyTimelineContainer = styled(FlexView)`\n  max-width: 512px;\n  width: 100%;\n  will-change: height;\n`;\n\nconst DailyItems = styled(FlexView)<{ $addedMonthBreak?: boolean }>`\n  margin-top: ${({ $addedMonthBreak }) =>\n    $addedMonthBreak\n      ? '-108px' // 64px card height + 16px(separator) + 16(date text) + 12(separator)\n      : '0'};\n  z-index: 1;\n`;\n\nconst DateText = styled(Text)`\n  line-height: 8px;\n`;\n\nexport { DailyTimelineContainer, DailyItems, ScrollWrapper, DateText };\n"],"names":["ScrollWrapper","styled","FlexView","DailyTimelineContainer","DailyItems","$addedMonthBreak","DateText","Text"],"mappings":";;;AAKM,MAAAA,IAAgBC,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA,GAO/BC,IAAyBF,EAAOC,CAAQ;AAAA;AAAA;AAAA;AAAA,GAMxCE,IAAaH,EAAOC,CAAQ;AAAA,gBAClB,CAAC,EAAE,kBAAAG,EAAA,MACfA,IACI,WACA,GAAG;AAAA;AAAA,GAILC,IAAWL,EAAOM,CAAI;AAAA;AAAA;"}

package/dist/features/timeline/daily-timeline-types.js

@@ -1,7 +1,7 @@
-var N = /* @__PURE__ */ ((r) => (r.COMPLETED = "COMPLETED", r.IN_PROGRESS = "IN_PROGRESS", r.PENDING = "PENDING", r.NOT_STARTED = "NOT_STARTED", r))(N || {}), C = /* @__PURE__ */ ((r) => (r.TEACHER = "TEACHER", r.STUDENT = "STUDENT", r.PARENT = "PARENT", r))(C || {}), E = /* @__PURE__ */ ((r) => (r.CW = "CW", r.HW = "HW", r.CIRCLE = "CIRCLE", r))(E || {});
+var r = /* @__PURE__ */ ((R) => (R.COMPLETED = "COMPLETED", R.IN_PROGRESS = "IN_PROGRESS", R.PENDING = "PENDING", R.NOT_STARTED = "NOT_STARTED", R.WAIT_FOR_REVIEW = "WAIT_FOR_REVIEW", R))(r || {}), E = /* @__PURE__ */ ((R) => (R.TEACHER = "TEACHER", R.STUDENT = "STUDENT", R.PARENT = "PARENT", R))(E || {}), I = /* @__PURE__ */ ((R) => (R.CW = "CW", R.HW = "HW", R.CIRCLE = "CIRCLE", R))(I || {});
 export {
-  E as CARD_TYPE,
-  N as NODE_STATE,
-  C as USER_TYPE
+  I as CARD_TYPE,
+  r as NODE_STATE,
+  E as USER_TYPE
 };
 //# sourceMappingURL=daily-timeline-types.js.map

package/dist/features/timeline/daily-timeline-types.js.map

@@ -1 +1 @@
-{"version":3,"file":"daily-timeline-types.js","sources":["../../../src/features/timeline/daily-timeline-types.ts"],"sourcesContent":["import { type TCourseStream } from '../milestone/create/milestone-create-types';\nimport { type ITimeLineItem, type ITimelineData } from './api/use-daily-timeline-get';\n\nexport enum NODE_STATE {\n  COMPLETED = 'COMPLETED',\n  IN_PROGRESS = 'IN_PROGRESS',\n  PENDING = 'PENDING',\n  NOT_STARTED = 'NOT_STARTED',\n}\n\nexport enum USER_TYPE {\n  TEACHER = 'TEACHER',\n  STUDENT = 'STUDENT',\n  PARENT = 'PARENT',\n}\n\nexport enum CARD_TYPE {\n  CW = 'CW',\n  HW = 'HW',\n  CIRCLE = 'CIRCLE',\n}\n\nexport interface IDailyTimelineProps {\n  userType: USER_TYPE;\n  studentId: string;\n  courseStreams?: TCourseStream[];\n  onPuzzleClick?: (card: ITimeLineItem) => void;\n  onReviewClick?: (\n    userNodeId: string | null,\n    isSatMockTestBlock: boolean,\n    userBlockId: string | null,\n  ) => void;\n  scrollAreaHeight?: string | number;\n}\n\nexport interface IDailyTimelineItemsProps extends IDailyTimelineProps {\n  entry: ITimelineData;\n  isFirstElement: boolean;\n  shouldShowTag: boolean;\n}\n"],"names":["NODE_STATE","USER_TYPE","CARD_TYPE"],"mappings":"AAGY,IAAAA,sBAAAA,OACVA,EAAA,YAAY,aACZA,EAAA,cAAc,eACdA,EAAA,UAAU,WACVA,EAAA,cAAc,eAJJA,IAAAA,KAAA,CAAA,CAAA,GAOAC,sBAAAA,OACVA,EAAA,UAAU,WACVA,EAAA,UAAU,WACVA,EAAA,SAAS,UAHCA,IAAAA,KAAA,CAAA,CAAA,GAMAC,sBAAAA,OACVA,EAAA,KAAK,MACLA,EAAA,KAAK,MACLA,EAAA,SAAS,UAHCA,IAAAA,KAAA,CAAA,CAAA;"}
+{"version":3,"file":"daily-timeline-types.js","sources":["../../../src/features/timeline/daily-timeline-types.ts"],"sourcesContent":["import { type TCourseStream } from '../milestone/create/milestone-create-types';\nimport { type ITimeLineItem, type ITimelineData } from './api/use-daily-timeline-get';\n\nexport enum NODE_STATE {\n  COMPLETED = 'COMPLETED',\n  IN_PROGRESS = 'IN_PROGRESS',\n  PENDING = 'PENDING',\n  NOT_STARTED = 'NOT_STARTED',\n  WAIT_FOR_REVIEW = 'WAIT_FOR_REVIEW',\n}\n\nexport enum USER_TYPE {\n  TEACHER = 'TEACHER',\n  STUDENT = 'STUDENT',\n  PARENT = 'PARENT',\n}\n\nexport enum CARD_TYPE {\n  CW = 'CW',\n  HW = 'HW',\n  CIRCLE = 'CIRCLE',\n}\n\nexport interface IDailyTimelineProps {\n  userType: USER_TYPE;\n  studentId: string;\n  courseStreams?: TCourseStream[];\n  onPuzzleClick?: (card: ITimeLineItem) => void;\n  onReviewClick?: (\n    userNodeId: string | null,\n    isSatMockTestBlock: boolean,\n    userBlockId: string | null,\n  ) => void;\n  scrollAreaHeight?: string | number;\n}\n\nexport interface IDailyTimelineItemsProps extends IDailyTimelineProps {\n  entry: ITimelineData;\n  isFirstElement: boolean;\n  shouldShowTag: boolean;\n}\n"],"names":["NODE_STATE","USER_TYPE","CARD_TYPE"],"mappings":"AAGY,IAAAA,sBAAAA,OACVA,EAAA,YAAY,aACZA,EAAA,cAAc,eACdA,EAAA,UAAU,WACVA,EAAA,cAAc,eACdA,EAAA,kBAAkB,mBALRA,IAAAA,KAAA,CAAA,CAAA,GAQAC,sBAAAA,OACVA,EAAA,UAAU,WACVA,EAAA,UAAU,WACVA,EAAA,SAAS,UAHCA,IAAAA,KAAA,CAAA,CAAA,GAMAC,sBAAAA,OACVA,EAAA,KAAK,MACLA,EAAA,KAAK,MACLA,EAAA,SAAS,UAHCA,IAAAA,KAAA,CAAA,CAAA;"}

package/dist/features/timeline/daily-timeline-view.js

@@ -2,10 +2,9 @@ import { jsxs as s, Fragment as j, jsx as t } from "react/jsx-runtime";
 import { getDayMonthYear as D } from "./comps/utils.js";
 import w from "../ui/layout/flex-view.js";
 import x from "./comps/year-break/year-break.js";
-import m from "../ui/separator/separator.js";
+import a from "../ui/separator/separator.js";
 import A from "./comps/month-break/month-break.js";
-import { DailyItems as B } from "./daily-timeline-styled.js";
-import C from "../ui/text/text.js";
+import { DailyItems as B, DateText as C } from "./daily-timeline-styled.js";
 import I from "./comps/daily-timeline-items/daily-timeline-items.js";
 import S from "./comps/no-activity.js";
 import { CARD_TYPE as k } from "./daily-timeline-types.js";
@@ -20,7 +19,7 @@ const b = ({
   studentId: L,
   userType: T
 }) => {
-  const { daily_logs: r, from_date: a, to_date: h } = $, N = u(a), f = u(h), { day: y, month: c, monthName: O } = D(N), {
+  const { daily_logs: r, from_date: m, to_date: h } = $, N = u(m), f = u(h), { day: y, month: c, monthName: O } = D(N), {
     day: p,
     month: d,
     year: X,
@@ -29,7 +28,7 @@ const b = ({
   return r ? /* @__PURE__ */ s(w, { children: [
     !n && /* @__PURE__ */ s(j, { children: [
       /* @__PURE__ */ t(x, { toYear: X, isLastDayOfYear: e }),
-      !e && c && e && /* @__PURE__ */ t(m, { heightX: 1 }),
+      !e && c && e && /* @__PURE__ */ t(a, { heightX: 1 }),
       /* @__PURE__ */ t(
         A,
         {
@@ -45,9 +44,9 @@ const b = ({
         $gutterX: 1,
         $addedMonthBreak: !!(i && d && !n),
         children: [
-          /* @__PURE__ */ t(m, { heightX: 1 }),
-          /* @__PURE__ */ t(C, { $renderAs: "ac4", $color: "BLACK_T_60", children: a === h ? `${y} ${O}` : `${y} - ${p} ${Y}` }),
-          /* @__PURE__ */ t(m, { heightX: 0.75 }),
+          /* @__PURE__ */ t(a, { heightX: 1 }),
+          /* @__PURE__ */ t(C, { $renderAs: "ac4", $color: "BLACK_T_60", children: m === h ? `${y} ${O}` : `${y} - ${p} ${Y}` }),
+          /* @__PURE__ */ t(a, { heightX: 0.75 }),
           r.length > 0 ? r.map((o, l) => /* @__PURE__ */ t(
             I,
             {
@@ -60,12 +59,12 @@ const b = ({
               userType: T,
               shouldShowTag: g && o.course_stream !== k.CIRCLE,
               isLastItem: l === r.length - 1,
-              fromDate: a,
+              fromDate: m,
               studentId: L
             },
             `timeline-${l}`
           )) : /* @__PURE__ */ t(S, {}),
-          /* @__PURE__ */ t(m, { heightX: 1 })
+          /* @__PURE__ */ t(a, { heightX: 1 })
         ]
       }
     )

package/dist/features/timeline/daily-timeline-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"daily-timeline-view.js","sources":["../../../src/features/timeline/daily-timeline-view.tsx"],"sourcesContent":["import { isLastDayOfMonth, parseISO } from 'date-fns';\nimport { type FC } from 'react';\n\nimport { getDayMonthYear } from './comps/utils';\nimport FlexView from '../ui/layout/flex-view';\nimport YearBreak from './comps/year-break/year-break';\nimport Separator from '../ui/separator/separator';\nimport MonthBreak from './comps/month-break/month-break';\nimport * as Styled from './daily-timeline-styled';\nimport Text from '../ui/text/text';\nimport DailyTimelineItems from './comps/daily-timeline-items/daily-timeline-items';\nimport NoActivity from './comps/no-activity';\nimport { CARD_TYPE, type IDailyTimelineItemsProps } from './daily-timeline-types';\n\nconst DailyTimelineView: FC<IDailyTimelineItemsProps> = ({\n  entry,\n  isFirstElement,\n  onPuzzleClick,\n  onReviewClick,\n  shouldShowTag,\n  studentId,\n  userType,\n}) => {\n  const { daily_logs: dailyLogs, from_date: fromDate, to_date: toDate } = entry;\n  const fromDateObj = parseISO(fromDate);\n  const toDateObj = parseISO(toDate);\n\n  const { day: fromDay, month: fromMonth, monthName: fromMonthName } = getDayMonthYear(fromDateObj);\n\n  const {\n    day: toDay,\n    month: toMonth,\n    year: toYear,\n    monthName: toMonthName,\n  } = getDayMonthYear(toDateObj);\n\n  const isLastDayOfMth = isLastDayOfMonth(toDateObj);\n  const isLastDayOfYear = isLastDayOfMth && toMonth === 12 && toDay === 31;\n\n  if (!dailyLogs) {\n    return null;\n  }\n\n  return (\n    <FlexView>\n      {!isFirstElement && (\n        <>\n          <YearBreak toYear={toYear} isLastDayOfYear={isLastDayOfYear} />\n          {!isLastDayOfYear && fromMonth && isLastDayOfYear && <Separator heightX={1} />}\n          <MonthBreak\n            fromMonth={fromMonth}\n            isLastDayOfMth={isLastDayOfMth}\n            isLastDayOfYear={isLastDayOfYear}\n          />\n        </>\n      )}\n      <Styled.DailyItems\n        $gutterX={1}\n        $addedMonthBreak={!!(isLastDayOfMth && toMonth && !isFirstElement)}\n      >\n        <Separator heightX={1} />\n        <Text $renderAs=\"ac4\" $color=\"BLACK_T_60\">\n          {fromDate === toDate\n            ? `${fromDay} ${fromMonthName}`\n            : `${fromDay} - ${toDay} ${toMonthName}`}\n        </Text>\n        <Separator heightX={0.75} />\n        {dailyLogs.length > 0 ? (\n          dailyLogs.map((log, logIndex) => (\n            <DailyTimelineItems\n              key={`timeline-${logIndex}`}\n              type={log.type}\n              summary={log.summary ?? ''}\n              courseStream={log.course_stream}\n              cards={log.cards}\n              onPuzzleClick={onPuzzleClick}\n              onReviewClick={onReviewClick}\n              userType={userType}\n              shouldShowTag={shouldShowTag && log.course_stream !== CARD_TYPE.CIRCLE}\n              isLastItem={logIndex === dailyLogs.length - 1}\n              fromDate={fromDate}\n              studentId={studentId}\n            />\n          ))\n        ) : (\n          <NoActivity />\n        )}\n        <Separator heightX={1} />\n      </Styled.DailyItems>\n    </FlexView>\n  );\n};\n\nDailyTimelineView.displayName = 'DailyTimelineView';\n\nexport default DailyTimelineView;\n"],"names":["DailyTimelineView","entry","isFirstElement","onPuzzleClick","onReviewClick","shouldShowTag","studentId","userType","dailyLogs","fromDate","toDate","fromDateObj","parseISO","toDateObj","fromDay","fromMonth","fromMonthName","getDayMonthYear","toDay","toMonth","toYear","toMonthName","isLastDayOfMth","isLastDayOfMonth","isLastDayOfYear","FlexView","jsxs","Fragment","jsx","YearBreak","Separator","MonthBreak","Styled.DailyItems","Text","log","logIndex","DailyTimelineItems","CARD_TYPE","NoActivity"],"mappings":";;;;;;;;;;;;;AAcA,MAAMA,IAAkD,CAAC;AAAA,EACvD,OAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,eAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AACF,MAAM;AACJ,QAAM,EAAE,YAAYC,GAAW,WAAWC,GAAU,SAASC,EAAW,IAAAT,GAClEU,IAAcC,EAASH,CAAQ,GAC/BI,IAAYD,EAASF,CAAM,GAE3B,EAAE,KAAKI,GAAS,OAAOC,GAAW,WAAWC,EAAkB,IAAAC,EAAgBN,CAAW,GAE1F;AAAA,IACJ,KAAKO;AAAA,IACL,OAAOC;AAAA,IACP,MAAMC;AAAA,IACN,WAAWC;AAAA,EAAA,IACTJ,EAAgBJ,CAAS,GAEvBS,IAAiBC,EAAiBV,CAAS,GAC3CW,IAAkBF,KAAkBH,MAAY,MAAMD,MAAU;AAEtE,SAAKV,sBAKFiB,GACE,EAAA,UAAA;AAAA,IAAA,CAACvB,KAEE,gBAAAwB,EAAAC,GAAA,EAAA,UAAA;AAAA,MAAC,gBAAAC,EAAAC,GAAA,EAAU,QAAAT,GAAgB,iBAAAI,EAAkC,CAAA;AAAA,MAC5D,CAACA,KAAmBT,KAAaS,KAAoB,gBAAAI,EAAAE,GAAA,EAAU,SAAS,GAAG;AAAA,MAC5E,gBAAAF;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,WAAAhB;AAAA,UACA,gBAAAO;AAAA,UACA,iBAAAE;AAAA,QAAA;AAAA,MACF;AAAA,IAAA,GACF;AAAA,IAEF,gBAAAE;AAAA,MAACM;AAAAA,MAAA;AAAA,QACC,UAAU;AAAA,QACV,kBAAkB,CAAC,EAAEV,KAAkBH,KAAW,CAACjB;AAAA,QAEnD,UAAA;AAAA,UAAC,gBAAA0B,EAAAE,GAAA,EAAU,SAAS,EAAG,CAAA;AAAA,4BACtBG,GAAK,EAAA,WAAU,OAAM,QAAO,cAC1B,gBAAavB,IACV,GAAGI,CAAO,IAAIE,CAAa,KAC3B,GAAGF,CAAO,MAAMI,CAAK,IAAIG,CAAW,IAC1C;AAAA,UACA,gBAAAO,EAACE,GAAU,EAAA,SAAS,KAAM,CAAA;AAAA,UACzBtB,EAAU,SAAS,IAClBA,EAAU,IAAI,CAAC0B,GAAKC,MAClB,gBAAAP;AAAA,YAACQ;AAAA,YAAA;AAAA,cAEC,MAAMF,EAAI;AAAA,cACV,SAASA,EAAI,WAAW;AAAA,cACxB,cAAcA,EAAI;AAAA,cAClB,OAAOA,EAAI;AAAA,cACX,eAAA/B;AAAA,cACA,eAAAC;AAAA,cACA,UAAAG;AAAA,cACA,eAAeF,KAAiB6B,EAAI,kBAAkBG,EAAU;AAAA,cAChE,YAAYF,MAAa3B,EAAU,SAAS;AAAA,cAC5C,UAAAC;AAAA,cACA,WAAAH;AAAA,YAAA;AAAA,YAXK,YAAY6B,CAAQ;AAAA,UAAA,CAa5B,IAED,gBAAAP,EAACU,GAAW,EAAA;AAAA,UAEd,gBAAAV,EAACE,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACzB;AAAA,EACF,EAAA,CAAA,IAjDO;AAmDX;AAEA9B,EAAkB,cAAc;"}
+{"version":3,"file":"daily-timeline-view.js","sources":["../../../src/features/timeline/daily-timeline-view.tsx"],"sourcesContent":["import { isLastDayOfMonth, parseISO } from 'date-fns';\nimport { type FC } from 'react';\n\nimport { getDayMonthYear } from './comps/utils';\nimport FlexView from '../ui/layout/flex-view';\nimport YearBreak from './comps/year-break/year-break';\nimport Separator from '../ui/separator/separator';\nimport MonthBreak from './comps/month-break/month-break';\nimport * as Styled from './daily-timeline-styled';\nimport DailyTimelineItems from './comps/daily-timeline-items/daily-timeline-items';\nimport NoActivity from './comps/no-activity';\nimport { CARD_TYPE, type IDailyTimelineItemsProps } from './daily-timeline-types';\n\nconst DailyTimelineView: FC<IDailyTimelineItemsProps> = ({\n  entry,\n  isFirstElement,\n  onPuzzleClick,\n  onReviewClick,\n  shouldShowTag,\n  studentId,\n  userType,\n}) => {\n  const { daily_logs: dailyLogs, from_date: fromDate, to_date: toDate } = entry;\n  const fromDateObj = parseISO(fromDate);\n  const toDateObj = parseISO(toDate);\n\n  const { day: fromDay, month: fromMonth, monthName: fromMonthName } = getDayMonthYear(fromDateObj);\n\n  const {\n    day: toDay,\n    month: toMonth,\n    year: toYear,\n    monthName: toMonthName,\n  } = getDayMonthYear(toDateObj);\n\n  const isLastDayOfMth = isLastDayOfMonth(toDateObj);\n  const isLastDayOfYear = isLastDayOfMth && toMonth === 12 && toDay === 31;\n\n  if (!dailyLogs) {\n    return null;\n  }\n\n  return (\n    <FlexView>\n      {!isFirstElement && (\n        <>\n          <YearBreak toYear={toYear} isLastDayOfYear={isLastDayOfYear} />\n          {!isLastDayOfYear && fromMonth && isLastDayOfYear && <Separator heightX={1} />}\n          <MonthBreak\n            fromMonth={fromMonth}\n            isLastDayOfMth={isLastDayOfMth}\n            isLastDayOfYear={isLastDayOfYear}\n          />\n        </>\n      )}\n      <Styled.DailyItems\n        $gutterX={1}\n        $addedMonthBreak={!!(isLastDayOfMth && toMonth && !isFirstElement)}\n      >\n        <Separator heightX={1} />\n        <Styled.DateText $renderAs=\"ac4\" $color=\"BLACK_T_60\">\n          {fromDate === toDate\n            ? `${fromDay} ${fromMonthName}`\n            : `${fromDay} - ${toDay} ${toMonthName}`}\n        </Styled.DateText>\n        <Separator heightX={0.75} />\n        {dailyLogs.length > 0 ? (\n          dailyLogs.map((log, logIndex) => (\n            <DailyTimelineItems\n              key={`timeline-${logIndex}`}\n              type={log.type}\n              summary={log.summary ?? ''}\n              courseStream={log.course_stream}\n              cards={log.cards}\n              onPuzzleClick={onPuzzleClick}\n              onReviewClick={onReviewClick}\n              userType={userType}\n              shouldShowTag={shouldShowTag && log.course_stream !== CARD_TYPE.CIRCLE}\n              isLastItem={logIndex === dailyLogs.length - 1}\n              fromDate={fromDate}\n              studentId={studentId}\n            />\n          ))\n        ) : (\n          <NoActivity />\n        )}\n        <Separator heightX={1} />\n      </Styled.DailyItems>\n    </FlexView>\n  );\n};\n\nDailyTimelineView.displayName = 'DailyTimelineView';\n\nexport default DailyTimelineView;\n"],"names":["DailyTimelineView","entry","isFirstElement","onPuzzleClick","onReviewClick","shouldShowTag","studentId","userType","dailyLogs","fromDate","toDate","fromDateObj","parseISO","toDateObj","fromDay","fromMonth","fromMonthName","getDayMonthYear","toDay","toMonth","toYear","toMonthName","isLastDayOfMth","isLastDayOfMonth","isLastDayOfYear","FlexView","jsxs","Fragment","jsx","YearBreak","Separator","MonthBreak","Styled.DailyItems","Styled.DateText","log","logIndex","DailyTimelineItems","CARD_TYPE","NoActivity"],"mappings":";;;;;;;;;;;;AAaA,MAAMA,IAAkD,CAAC;AAAA,EACvD,OAAAC;AAAA,EACA,gBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,eAAAC;AAAA,EACA,eAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AACF,MAAM;AACJ,QAAM,EAAE,YAAYC,GAAW,WAAWC,GAAU,SAASC,EAAW,IAAAT,GAClEU,IAAcC,EAASH,CAAQ,GAC/BI,IAAYD,EAASF,CAAM,GAE3B,EAAE,KAAKI,GAAS,OAAOC,GAAW,WAAWC,EAAkB,IAAAC,EAAgBN,CAAW,GAE1F;AAAA,IACJ,KAAKO;AAAA,IACL,OAAOC;AAAA,IACP,MAAMC;AAAA,IACN,WAAWC;AAAA,EAAA,IACTJ,EAAgBJ,CAAS,GAEvBS,IAAiBC,EAAiBV,CAAS,GAC3CW,IAAkBF,KAAkBH,MAAY,MAAMD,MAAU;AAEtE,SAAKV,sBAKFiB,GACE,EAAA,UAAA;AAAA,IAAA,CAACvB,KAEE,gBAAAwB,EAAAC,GAAA,EAAA,UAAA;AAAA,MAAC,gBAAAC,EAAAC,GAAA,EAAU,QAAAT,GAAgB,iBAAAI,EAAkC,CAAA;AAAA,MAC5D,CAACA,KAAmBT,KAAaS,KAAoB,gBAAAI,EAAAE,GAAA,EAAU,SAAS,GAAG;AAAA,MAC5E,gBAAAF;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,WAAAhB;AAAA,UACA,gBAAAO;AAAA,UACA,iBAAAE;AAAA,QAAA;AAAA,MACF;AAAA,IAAA,GACF;AAAA,IAEF,gBAAAE;AAAA,MAACM;AAAAA,MAAA;AAAA,QACC,UAAU;AAAA,QACV,kBAAkB,CAAC,EAAEV,KAAkBH,KAAW,CAACjB;AAAA,QAEnD,UAAA;AAAA,UAAC,gBAAA0B,EAAAE,GAAA,EAAU,SAAS,EAAG,CAAA;AAAA,UACvB,gBAAAF,EAACK,GAAA,EAAgB,WAAU,OAAM,QAAO,cACrC,UAAaxB,MAAAC,IACV,GAAGI,CAAO,IAAIE,CAAa,KAC3B,GAAGF,CAAO,MAAMI,CAAK,IAAIG,CAAW,IAC1C;AAAA,UACA,gBAAAO,EAACE,GAAU,EAAA,SAAS,KAAM,CAAA;AAAA,UACzBtB,EAAU,SAAS,IAClBA,EAAU,IAAI,CAAC0B,GAAKC,MAClB,gBAAAP;AAAA,YAACQ;AAAA,YAAA;AAAA,cAEC,MAAMF,EAAI;AAAA,cACV,SAASA,EAAI,WAAW;AAAA,cACxB,cAAcA,EAAI;AAAA,cAClB,OAAOA,EAAI;AAAA,cACX,eAAA/B;AAAA,cACA,eAAAC;AAAA,cACA,UAAAG;AAAA,cACA,eAAeF,KAAiB6B,EAAI,kBAAkBG,EAAU;AAAA,cAChE,YAAYF,MAAa3B,EAAU,SAAS;AAAA,cAC5C,UAAAC;AAAA,cACA,WAAAH;AAAA,YAAA;AAAA,YAXK,YAAY6B,CAAQ;AAAA,UAAA,CAa5B,IAED,gBAAAP,EAACU,GAAW,EAAA;AAAA,UAEd,gBAAAV,EAACE,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACzB;AAAA,EACF,EAAA,CAAA,IAjDO;AAmDX;AAEA9B,EAAkB,cAAc;"}

package/dist/features/timeline/monthly-report/api/use-monthly-report-get.js

@@ -0,0 +1,13 @@
+import { createGetAPI as r, createPatchAPI as o } from "@cuemath/rest-api";
+import { BASE_URL_V1 as e } from "../../../../constants/api.js";
+const { useGet: p, invalidate: a } = r({
+  getURL: (t) => `${e}/monthly-progress-reports/${t}`
+}), { usePatch: h } = o({
+  getURL: (t) => `${e}/monthly-progress-reports/${t}`
+});
+export {
+  a as invalidateMonthlyReport,
+  p as useMonthlyReportGet,
+  h as useMonthlyReportPatch
+};
+//# sourceMappingURL=use-monthly-report-get.js.map

package/dist/features/timeline/monthly-report/api/use-monthly-report-get.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-monthly-report-get.js","sources":["../../../../../src/features/timeline/monthly-report/api/use-monthly-report-get.ts"],"sourcesContent":["import { createGetAPI, createPatchAPI } from '@cuemath/rest-api';\n\nimport { BASE_URL_V1 } from '../../../../constants/api';\nimport { type IMonthlyReportResponse } from '../monthly-report-types';\n\nconst { useGet: useMonthlyReportGet, invalidate: invalidateMonthlyReport } =\n  createGetAPI<IMonthlyReportResponse>({\n    getURL: (reportId: string) => {\n      return `${BASE_URL_V1}/monthly-progress-reports/${reportId}`;\n    },\n  });\n\nconst { usePatch: useMonthlyReportPatch } = createPatchAPI<\n  IMonthlyReportResponse,\n  { feedback: string }\n>({\n  getURL: (reportId: string) => {\n    return `${BASE_URL_V1}/monthly-progress-reports/${reportId}`;\n  },\n});\n\nexport { useMonthlyReportGet, useMonthlyReportPatch, invalidateMonthlyReport };\n"],"names":["useMonthlyReportGet","invalidateMonthlyReport","createGetAPI","reportId","BASE_URL_V1","useMonthlyReportPatch","createPatchAPI"],"mappings":";;AAKA,MAAM,EAAE,QAAQA,GAAqB,YAAYC,EAAA,IAC/CC,EAAqC;AAAA,EACnC,QAAQ,CAACC,MACA,GAAGC,CAAW,6BAA6BD,CAAQ;AAE9D,CAAC,GAEG,EAAE,UAAUE,EAAsB,IAAIC,EAG1C;AAAA,EACA,QAAQ,CAACH,MACA,GAAGC,CAAW,6BAA6BD,CAAQ;AAE9D,CAAC;"}

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

@@ -0,0 +1,59 @@
+import { jsx as r, jsxs as g } from "react/jsx-runtime";
+import { useRef as f, useMemo as l } from "react";
+import { CarousalItem as u, CarouselWrapper as x } from "./achievements.styled.js";
+import a from "../../../../ui/text/text.js";
+import n from "../../../../ui/separator/separator.js";
+import h from "../../../../ui/layout/flex-view.js";
+import c from "../../../../ui/swipeable-carousel/swipeable-carousel.js";
+import { IS_APP_RUNNING_IN_RN as t } from "../../../../../constants/app-config.js";
+import { dotsConfig as w, navigationConfig as _ } from "./constant.js";
+const L = ({ achievements: o, studentName: e }) => {
+  const m = f(null), s = l(
+    () => o.map((i) => /* @__PURE__ */ r(
+      u,
+      {
+        src: i.url,
+        alt: `Achievement ${i.asset_id}`,
+        withLoader: !0,
+        height: t ? "343px" : "480px",
+        width: t ? "343px" : "480px"
+      },
+      i.asset_id
+    )),
+    [o]
+  ), p = l(
+    () => o.length >= 2 ? `Outstanding month! ${e} earned several achievements showing excellent progress across different areas.` : `Great work! ${e} earned new achievements this month, demonstrating growth in their skills.`,
+    [o.length, e]
+  ), d = !t && s.length > 1;
+  return o != null && o.length ? /* @__PURE__ */ g(h, { children: [
+    /* @__PURE__ */ r(a, { $renderAs: "ab1-bold", color: "BLACK_1", children: "Achievements" }),
+    /* @__PURE__ */ r(n, { heightX: 0.125 }),
+    /* @__PURE__ */ r(h, { $marginBottom: -24, children: /* @__PURE__ */ r(a, { $renderAs: "ub2", color: "BLUE_6", children: p }) }),
+    t && /* @__PURE__ */ r(n, { heightX: 1 }),
+    /* @__PURE__ */ r(
+      x,
+      {
+        $height: t ? "380px" : "580px",
+        $marginBottomX: t ? -0.5 : -1,
+        children: /* @__PURE__ */ r(
+          c,
+          {
+            ref: m,
+            items: s,
+            defaultIndex: 0,
+            transitionDuration: 300,
+            showIndicators: !0,
+            dotsConfig: w,
+            showNavigationButtons: d,
+            navigationConfig: _
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ r(n, { heightX: 0.75 })
+  ] }) : null;
+};
+export {
+  L as default
+};
+//# sourceMappingURL=achievements.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"achievements.js","sources":["../../../../../../src/features/timeline/monthly-report/comps/achievements/achievements.tsx"],"sourcesContent":["import { useMemo, useRef, type FC } from 'react';\n\nimport { type IAchievementsProps } from './achievements-types';\nimport * as Styled from './achievements.styled';\nimport Text from '../../../../ui/text/text';\nimport Separator from '../../../../ui/separator/separator';\nimport FlexView from '../../../../ui/layout/flex-view';\nimport SwipeableCarousel from '../../../../ui/swipeable-carousel/swipeable-carousel';\nimport { IS_APP_RUNNING_IN_RN } from '../../../../../constants/app-config';\nimport type { ISwipeableCarouselRefs } from '../../../../ui/swipeable-carousel/swipeable-carousel-types';\nimport { dotsConfig, navigationConfig } from './constant';\n\nconst Achievements: FC<IAchievementsProps> = ({ achievements, studentName }) => {\n  const carouselRef = useRef<ISwipeableCarouselRefs>(null);\n\n  const carouselItems = useMemo(\n    () =>\n      achievements.map(achievement => (\n        <Styled.CarousalItem\n          key={achievement.asset_id}\n          src={achievement.url}\n          alt={`Achievement ${achievement.asset_id}`}\n          withLoader\n          height={IS_APP_RUNNING_IN_RN ? '343px' : '480px'}\n          width={IS_APP_RUNNING_IN_RN ? '343px' : '480px'}\n        />\n      )),\n    [achievements],\n  );\n\n  const tipText = useMemo(\n    () =>\n      achievements.length >= 2\n        ? `Outstanding month! ${studentName} earned several achievements showing excellent progress across different areas.`\n        : `Great work! ${studentName} earned new achievements this month, demonstrating growth in their skills.`,\n    [achievements.length, studentName],\n  );\n\n  const showNavigationButtons = !IS_APP_RUNNING_IN_RN && carouselItems.length > 1;\n\n  if (!achievements?.length) {\n    return null;\n  }\n\n  return (\n    <FlexView>\n      <Text $renderAs=\"ab1-bold\" color=\"BLACK_1\">\n        Achievements\n      </Text>\n      <Separator heightX={0.125} />\n      <FlexView $marginBottom={-24}>\n        <Text $renderAs=\"ub2\" color=\"BLUE_6\">\n          {tipText}\n        </Text>\n      </FlexView>\n      {IS_APP_RUNNING_IN_RN && <Separator heightX={1} />}\n      <Styled.CarouselWrapper\n        $height={IS_APP_RUNNING_IN_RN ? '380px' : '580px'}\n        $marginBottomX={IS_APP_RUNNING_IN_RN ? -0.5 : -1}\n      >\n        <SwipeableCarousel\n          ref={carouselRef}\n          items={carouselItems}\n          defaultIndex={0}\n          transitionDuration={300}\n          showIndicators={true}\n          dotsConfig={dotsConfig}\n          showNavigationButtons={showNavigationButtons}\n          navigationConfig={navigationConfig}\n        />\n      </Styled.CarouselWrapper>\n      <Separator heightX={0.75} />\n    </FlexView>\n  );\n};\n\nexport default Achievements;\n"],"names":["Achievements","achievements","studentName","carouselRef","useRef","carouselItems","useMemo","achievement","jsx","Styled.CarousalItem","IS_APP_RUNNING_IN_RN","tipText","showNavigationButtons","FlexView","Text","Separator","Styled.CarouselWrapper","SwipeableCarousel","dotsConfig","navigationConfig"],"mappings":";;;;;;;;;AAYA,MAAMA,IAAuC,CAAC,EAAE,cAAAC,GAAc,aAAAC,QAAkB;AACxE,QAAAC,IAAcC,EAA+B,IAAI,GAEjDC,IAAgBC;AAAA,IACpB,MACEL,EAAa,IAAI,CACfM,MAAA,gBAAAC;AAAA,MAACC;AAAAA,MAAA;AAAA,QAEC,KAAKF,EAAY;AAAA,QACjB,KAAK,eAAeA,EAAY,QAAQ;AAAA,QACxC,YAAU;AAAA,QACV,QAAQG,IAAuB,UAAU;AAAA,QACzC,OAAOA,IAAuB,UAAU;AAAA,MAAA;AAAA,MALnCH,EAAY;AAAA,IAAA,CAOpB;AAAA,IACH,CAACN,CAAY;AAAA,EAAA,GAGTU,IAAUL;AAAA,IACd,MACEL,EAAa,UAAU,IACnB,sBAAsBC,CAAW,oFACjC,eAAeA,CAAW;AAAA,IAChC,CAACD,EAAa,QAAQC,CAAW;AAAA,EAAA,GAG7BU,IAAwB,CAACF,KAAwBL,EAAc,SAAS;AAE1E,SAACJ,KAAA,QAAAA,EAAc,2BAKhBY,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAL,EAACM,GAAK,EAAA,WAAU,YAAW,OAAM,WAAU,UAE3C,gBAAA;AAAA,IACA,gBAAAN,EAACO,GAAU,EAAA,SAAS,MAAO,CAAA;AAAA,IAC3B,gBAAAP,EAACK,GAAS,EAAA,eAAe,KACvB,UAAA,gBAAAL,EAACM,GAAK,EAAA,WAAU,OAAM,OAAM,UACzB,UAAAH,EACH,CAAA,GACF;AAAA,IACCD,KAAwB,gBAAAF,EAACO,GAAU,EAAA,SAAS,EAAG,CAAA;AAAA,IAChD,gBAAAP;AAAA,MAACQ;AAAAA,MAAA;AAAA,QACC,SAASN,IAAuB,UAAU;AAAA,QAC1C,gBAAgBA,IAAuB,OAAO;AAAA,QAE9C,UAAA,gBAAAF;AAAA,UAACS;AAAA,UAAA;AAAA,YACC,KAAKd;AAAA,YACL,OAAOE;AAAA,YACP,cAAc;AAAA,YACd,oBAAoB;AAAA,YACpB,gBAAgB;AAAA,YAChB,YAAAa;AAAA,YACA,uBAAAN;AAAA,YACA,kBAAAO;AAAA,UAAA;AAAA,QACF;AAAA,MAAA;AAAA,IACF;AAAA,IACA,gBAAAX,EAACO,GAAU,EAAA,SAAS,KAAM,CAAA;AAAA,EAC5B,EAAA,CAAA,IA/BO;AAiCX;"}

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

@@ -0,0 +1,15 @@
+import o from "styled-components";
+import t from "../../../../ui/image/image.js";
+import e from "../../../../ui/layout/flex-view.js";
+const m = o(e)`
+  overflow: hidden;
+  position: relative;
+`, p = o(t)`
+  position: relative;
+  touch-action: auto;
+`;
+export {
+  p as CarousalItem,
+  m as CarouselWrapper
+};
+//# sourceMappingURL=achievements.styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"achievements.styled.js","sources":["../../../../../../src/features/timeline/monthly-report/comps/achievements/achievements.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport Image from '../../../../ui/image/image';\nimport FlexView from '../../../../ui/layout/flex-view';\n\nexport const CarouselWrapper = styled(FlexView)`\n  overflow: hidden;\n  position: relative;\n`;\n\nexport const CarousalItem = styled(Image)`\n  position: relative;\n  touch-action: auto;\n`;\n"],"names":["CarouselWrapper","styled","FlexView","CarousalItem","Image"],"mappings":";;;AAKa,MAAAA,IAAkBC,EAAOC,CAAQ;AAAA;AAAA;AAAA,GAKjCC,IAAeF,EAAOG,CAAK;AAAA;AAAA;AAAA;"}

package/dist/features/timeline/monthly-report/comps/achievements/constant.js

@@ -0,0 +1,16 @@
+const o = {
+  dotColor: "BLACK_1",
+  inactiveDotColor: "WHITE_1",
+  activeIndicatorSize: "8px",
+  inactiveIndicatorSize: "8px",
+  spacing: "8px"
+}, i = {
+  buttonVariant: "secondary",
+  buttonSize: "xsmall",
+  spacing: 8
+};
+export {
+  o as dotsConfig,
+  i as navigationConfig
+};
+//# sourceMappingURL=constant.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constant.js","sources":["../../../../../../src/features/timeline/monthly-report/comps/achievements/constant.ts"],"sourcesContent":["const dotsConfig = {\n  dotColor: 'BLACK_1',\n  inactiveDotColor: 'WHITE_1',\n  activeIndicatorSize: '8px',\n  inactiveIndicatorSize: '8px',\n  spacing: '8px',\n} as const;\n\nconst navigationConfig = {\n  buttonVariant: 'secondary',\n  buttonSize: 'xsmall',\n  spacing: 8,\n} as const;\n\nexport { dotsConfig, navigationConfig };\n"],"names":["dotsConfig","navigationConfig"],"mappings":"AAAA,MAAMA,IAAa;AAAA,EACjB,UAAU;AAAA,EACV,kBAAkB;AAAA,EAClB,qBAAqB;AAAA,EACrB,uBAAuB;AAAA,EACvB,SAAS;AACX,GAEMC,IAAmB;AAAA,EACvB,eAAe;AAAA,EACf,YAAY;AAAA,EACZ,SAAS;AACX;"}

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

@@ -0,0 +1,128 @@
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { memo as R, useRef as z, useState as I, useMemo as d, useCallback as u } from "react";
+import { getCardTypeIconMap as m, stateIcon as p } from "../constants.js";
+import { CARD_TYPE as f } from "../../../monthly-report-types.js";
+import { ActivityCardContainerWrapper as B, ActivityCardContainer as M } from "./activities-card.styled.js";
+import n from "../../../../../ui/layout/flex-view.js";
+import S from "../../../../../ui/lottie-animation/lottie-animation.js";
+import $ from "../../../../../ui/text/text.js";
+import T from "../../../../../homework/card-title.js";
+import j from "../activities-card-puzzles/activities-card-puzzles.js";
+import { NODE_STATE as h } from "../../../../daily-timeline-types.js";
+import k from "../../../../../ui/buttons/text-button/text-button.js";
+import { countActivitiesByState as G } from "../utils.js";
+const K = {
+  autoplay: !1,
+  loop: !0,
+  renderer: "canvas"
+}, O = ({
+  cardType: t,
+  nodeType: A,
+  activitiesList: o = [],
+  onPuzzleClick: C
+}) => {
+  const a = z(null), [s, x] = I(!1), b = d(() => {
+    const { totalDone: e, totalPending: i, totalOverdue: c } = G(o);
+    return [
+      e > 0 && `${e} Done`,
+      i > 0 && `${i} In-progress`,
+      c > 0 && `${c} Overdue`
+    ].filter(Boolean).join(", ");
+  }, [o]), X = d(() => t ? t.split("_").join(" ") : "", [t]), { displayedActivities: E, remainingCount: g } = d(() => {
+    if (t === f.puzzle)
+      return { displayedActivities: o, remainingCount: 0 };
+    const e = 3, i = o.length > e;
+    return s || !i ? { displayedActivities: o, remainingCount: 0 } : {
+      displayedActivities: o.slice(0, e),
+      remainingCount: o.length - e
+    };
+  }, [o, s, t]), _ = u(() => {
+    var e;
+    (e = a.current) == null || e.play();
+  }, []), w = u(() => {
+    var e;
+    (e = a.current) == null || e.stop();
+  }, []), v = u(() => {
+    x((e) => !e);
+  }, []);
+  return /* @__PURE__ */ l(n, { onMouseEnter: _, onMouseLeave: w, children: [
+    /* @__PURE__ */ r(
+      B,
+      {
+        $background: m(t).color,
+        children: /* @__PURE__ */ l(
+          M,
+          {
+            $flexDirection: "row",
+            $alignItems: "center",
+            $height: "56px",
+            $bgImage: m(t).background,
+            $gutterX: 0.78125,
+            $flexGap: 8.5,
+            children: [
+              /* @__PURE__ */ r(
+                n,
+                {
+                  $widthX: 2,
+                  $heightX: 2,
+                  $borderRadiusX: 2,
+                  $background: "WHITE_1",
+                  $position: "relative",
+                  $alignItems: "center",
+                  $justifyContent: "center",
+                  children: /* @__PURE__ */ r(
+                    S,
+                    {
+                      ref: a,
+                      src: m(t).lottie,
+                      width: 32,
+                      height: 32,
+                      settings: K
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ l(n, { children: [
+                /* @__PURE__ */ r(T, { cardHeader: X, nodeType: A }),
+                /* @__PURE__ */ r($, { $renderAs: "ub3", $color: "BLACK_1", children: b })
+              ] })
+            ]
+          }
+        )
+      }
+    ),
+    o.length > 0 && (t === f.puzzle ? /* @__PURE__ */ r(j, { puzzles: o, onPuzzleClick: C }) : /* @__PURE__ */ l(n, { $flexRowGapX: 1.25, $gutterX: 1, $gapX: 1, $borderColor: "GREY_2", children: [
+      E.map(({ state: e, title: i, subtext: c, id: D }) => /* @__PURE__ */ l(n, { $flexDirection: "row", $flexGapX: 1.05, children: [
+        /* @__PURE__ */ r(n, { $gapX: 0.25, children: /* @__PURE__ */ r(
+          n,
+          {
+            $borderRadiusX: 1,
+            $background: e === h.PENDING || e === h.NOT_STARTED ? "RED" : "BLACK_1",
+            $widthX: 1,
+            $heightX: 1,
+            $alignItems: "center",
+            $justifyContent: "center",
+            children: !!e && (p[e] || p[h.COMPLETED])
+          }
+        ) }),
+        /* @__PURE__ */ l(n, { $flexRowGap: 4, children: [
+          /* @__PURE__ */ r($, { $renderAs: "ub2", $color: "BLACK_1", children: i || "" }),
+          /* @__PURE__ */ r($, { $renderAs: "ub3", $color: "BLACK_T_60", children: c || "" })
+        ] })
+      ] }, D)),
+      (g > 0 || s) && o.length > 3 && /* @__PURE__ */ r(n, { $gutterX: 2, children: /* @__PURE__ */ r(
+        k,
+        {
+          label: s ? "Show less" : `+${g} activities`,
+          size: "regular",
+          color: "BLACK_1",
+          onClick: v
+        }
+      ) })
+    ] }))
+  ] });
+}, L = R(O);
+export {
+  L as default
+};
+//# sourceMappingURL=activities-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"activities-card.js","sources":["../../../../../../../src/features/timeline/monthly-report/comps/activities/activities-card/activities-card.tsx"],"sourcesContent":["import { memo, type FC, useRef, useCallback, useMemo, useState } from 'react';\n\nimport { type IActivitiesCardProps } from './activities-card-types';\nimport { getCardTypeIconMap, stateIcon } from '../constants';\nimport { CARD_TYPE } from '../../../monthly-report-types';\nimport * as Styled from './activities-card.styled';\nimport FlexView from '../../../../../ui/layout/flex-view';\nimport LottieAnimation from '../../../../../ui/lottie-animation/lottie-animation';\nimport { type ILottieAnimationRef } from '../../../../../ui/lottie-animation/types';\nimport Text from '../../../../../ui/text/text';\nimport CardTitle from '../../../../../homework/card-title';\nimport { type TColorNames } from '../../../../../ui/types';\nimport ActivitiesCardPuzzles from '../activities-card-puzzles/activities-card-puzzles';\nimport { NODE_STATE } from '../../../../daily-timeline-types';\nimport TextButton from '../../../../../ui/buttons/text-button/text-button';\nimport { countActivitiesByState } from '../utils';\n\nconst lottieSettings = {\n  autoplay: false,\n  loop: true,\n  renderer: 'canvas',\n};\n\nconst ActivitiesCard: FC<IActivitiesCardProps> = ({\n  cardType,\n  nodeType,\n  activitiesList = [],\n  onPuzzleClick,\n}) => {\n  const lottieRef = useRef<ILottieAnimationRef>(null);\n  const [showAllActivities, setShowAllActivities] = useState(false);\n\n  const progressStatus = useMemo(() => {\n    const { totalDone, totalPending, totalOverdue } = countActivitiesByState(activitiesList);\n\n    return [\n      totalDone > 0 && `${totalDone} Done`,\n      totalPending > 0 && `${totalPending} In-progress`,\n      totalOverdue > 0 && `${totalOverdue} Overdue`,\n    ]\n      .filter(Boolean)\n      .join(', ');\n  }, [activitiesList]);\n  const cardHeaderText = useMemo(() => (cardType ? cardType.split('_').join(' ') : ''), [cardType]);\n  const { displayedActivities, remainingCount } = useMemo(() => {\n    if (cardType === CARD_TYPE.puzzle) {\n      return { displayedActivities: activitiesList, remainingCount: 0 };\n    }\n\n    const maxVisible = 3;\n    const hasMore = activitiesList.length > maxVisible;\n\n    if (showAllActivities || !hasMore) {\n      return { displayedActivities: activitiesList, remainingCount: 0 };\n    }\n\n    return {\n      displayedActivities: activitiesList.slice(0, maxVisible),\n      remainingCount: activitiesList.length - maxVisible,\n    };\n  }, [activitiesList, showAllActivities, cardType]);\n\n  const handleMouseEnter = useCallback(() => {\n    lottieRef.current?.play();\n  }, []);\n\n  const handleMouseLeave = useCallback(() => {\n    lottieRef.current?.stop();\n  }, []);\n\n  const handleToggleActivities = useCallback(() => {\n    setShowAllActivities(prev => !prev);\n  }, []);\n\n  return (\n    <FlexView onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>\n      <Styled.ActivityCardContainerWrapper\n        $background={getCardTypeIconMap(cardType).color as TColorNames}\n      >\n        <Styled.ActivityCardContainer\n          $flexDirection=\"row\"\n          $alignItems=\"center\"\n          $height=\"56px\"\n          $bgImage={getCardTypeIconMap(cardType).background}\n          $gutterX={0.78125}\n          $flexGap={8.5}\n        >\n          <FlexView\n            $widthX={2}\n            $heightX={2}\n            $borderRadiusX={2}\n            $background=\"WHITE_1\"\n            $position=\"relative\"\n            $alignItems=\"center\"\n            $justifyContent=\"center\"\n          >\n            <LottieAnimation\n              ref={lottieRef}\n              src={getCardTypeIconMap(cardType).lottie}\n              width={32}\n              height={32}\n              settings={lottieSettings}\n            />\n          </FlexView>\n          <FlexView>\n            <CardTitle cardHeader={cardHeaderText} nodeType={nodeType} />\n            <Text $renderAs=\"ub3\" $color=\"BLACK_1\">\n              {progressStatus}\n            </Text>\n          </FlexView>\n        </Styled.ActivityCardContainer>\n      </Styled.ActivityCardContainerWrapper>\n      {activitiesList.length > 0 &&\n        (cardType === CARD_TYPE.puzzle ? (\n          <ActivitiesCardPuzzles puzzles={activitiesList} onPuzzleClick={onPuzzleClick} />\n        ) : (\n          <FlexView $flexRowGapX={1.25} $gutterX={1} $gapX={1} $borderColor=\"GREY_2\">\n            {displayedActivities.map(({ state, title, subtext, id }) => (\n              <FlexView $flexDirection=\"row\" $flexGapX={1.05} key={id}>\n                <FlexView $gapX={0.25}>\n                  <FlexView\n                    $borderRadiusX={1}\n                    $background={\n                      state === NODE_STATE.PENDING || state === NODE_STATE.NOT_STARTED\n                        ? 'RED'\n                        : 'BLACK_1'\n                    }\n                    $widthX={1}\n                    $heightX={1}\n                    $alignItems=\"center\"\n                    $justifyContent=\"center\"\n                  >\n                    {!!state && (stateIcon[state as NODE_STATE] || stateIcon[NODE_STATE.COMPLETED])}\n                  </FlexView>\n                </FlexView>\n                <FlexView $flexRowGap={4}>\n                  <Text $renderAs=\"ub2\" $color=\"BLACK_1\">\n                    {title || ''}\n                  </Text>\n                  <Text $renderAs=\"ub3\" $color=\"BLACK_T_60\">\n                    {subtext || ''}\n                  </Text>\n                </FlexView>\n              </FlexView>\n            ))}\n            {(remainingCount > 0 || showAllActivities) && activitiesList.length > 3 && (\n              <FlexView $gutterX={2}>\n                <TextButton\n                  label={showAllActivities ? 'Show less' : `+${remainingCount} activities`}\n                  size=\"regular\"\n                  color=\"BLACK_1\"\n                  onClick={handleToggleActivities}\n                />\n              </FlexView>\n            )}\n          </FlexView>\n        ))}\n    </FlexView>\n  );\n};\n\nexport default memo(ActivitiesCard);\n"],"names":["lottieSettings","ActivitiesCard","cardType","nodeType","activitiesList","onPuzzleClick","lottieRef","useRef","showAllActivities","setShowAllActivities","useState","progressStatus","useMemo","totalDone","totalPending","totalOverdue","countActivitiesByState","cardHeaderText","displayedActivities","remainingCount","CARD_TYPE","maxVisible","hasMore","handleMouseEnter","useCallback","_a","handleMouseLeave","handleToggleActivities","prev","jsxs","FlexView","jsx","Styled.ActivityCardContainerWrapper","getCardTypeIconMap","Styled.ActivityCardContainer","LottieAnimation","CardTitle","Text","ActivitiesCardPuzzles","state","title","subtext","id","NODE_STATE","stateIcon","TextButton","ActivitiesCard$1","memo"],"mappings":"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"}

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

@@ -0,0 +1,53 @@
+import r from "styled-components";
+import e from "../../../../../ui/layout/flex-view.js";
+const n = r(e)`
+  background-image: url(${({ $bgImage: o }) => o});
+  background-size: cover;
+  background-position: center left;
+  background-repeat: no-repeat;
+  max-width: 512px;
+  position: relative;
+  overflow: hidden;
+`, d = r(e)`
+  position: relative;
+  outline: 1px solid ${({ theme: o }) => o.colors.WHITE_5};
+`;
+r(e)`
+  border: 2px dashed ${({ theme: o }) => o.colors.ORANGE_2};
+  border-radius: 8px;
+  padding: 12px;
+  margin-top: 8px;
+  position: relative;
+`;
+r(e)`
+  background-color: ${({ theme: o }) => o.colors.ORANGE_2};
+  color: white;
+  border-radius: 4px;
+  padding: 4px 8px;
+  font-size: 12px;
+  font-weight: 600;
+  min-width: 24px;
+  height: 20px;
+  align-items: center;
+  justify-content: center;
+`;
+r.button`
+  background: none;
+  border: none;
+  color: ${({ theme: o }) => o.colors.BLACK_1};
+  text-decoration: underline;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  padding: 0;
+  margin: 0;
+
+  &:hover {
+    color: ${({ theme: o }) => o.colors.ORANGE_2};
+  }
+`;
+export {
+  n as ActivityCardContainer,
+  d as ActivityCardContainerWrapper
+};
+//# sourceMappingURL=activities-card.styled.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"activities-card.styled.js","sources":["../../../../../../../src/features/timeline/monthly-report/comps/activities/activities-card/activities-card.styled.tsx"],"sourcesContent":["import styled from 'styled-components';\n\nimport FlexView from '../../../../../ui/layout/flex-view';\n\nexport const ActivityCardContainer = styled(FlexView)<{ $bgImage: string }>`\n  background-image: url(${({ $bgImage }) => $bgImage});\n  background-size: cover;\n  background-position: center left;\n  background-repeat: no-repeat;\n  max-width: 512px;\n  position: relative;\n  overflow: hidden;\n`;\n\nexport const ActivityCardContainerWrapper = styled(FlexView)`\n  position: relative;\n  outline: 1px solid ${({ theme }) => theme.colors.WHITE_5};\n`;\n\nexport const MoreActivitiesContainer = styled(FlexView)`\n  border: 2px dashed ${({ theme }) => theme.colors.ORANGE_2};\n  border-radius: 8px;\n  padding: 12px;\n  margin-top: 8px;\n  position: relative;\n`;\n\nexport const CountBadge = styled(FlexView)`\n  background-color: ${({ theme }) => theme.colors.ORANGE_2};\n  color: white;\n  border-radius: 4px;\n  padding: 4px 8px;\n  font-size: 12px;\n  font-weight: 600;\n  min-width: 24px;\n  height: 20px;\n  align-items: center;\n  justify-content: center;\n`;\n\nexport const MoreActivitiesLink = styled.button`\n  background: none;\n  border: none;\n  color: ${({ theme }) => theme.colors.BLACK_1};\n  text-decoration: underline;\n  cursor: pointer;\n  font-size: 14px;\n  font-weight: 500;\n  padding: 0;\n  margin: 0;\n\n  &:hover {\n    color: ${({ theme }) => theme.colors.ORANGE_2};\n  }\n`;\n"],"names":["ActivityCardContainer","styled","FlexView","$bgImage","ActivityCardContainerWrapper","theme"],"mappings":";;AAIa,MAAAA,IAAwBC,EAAOC,CAAQ;AAAA,0BAC1B,CAAC,EAAE,UAAAC,EAAS,MAAMA,CAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GASvCC,IAA+BH,EAAOC,CAAQ;AAAA;AAAA,uBAEpC,CAAC,EAAE,OAAAG,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAGnBJ,EAAOC,CAAQ;AAAA,uBAC/B,CAAC,EAAE,OAAAG,EAAA,MAAYA,EAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAOjCJ,EAAOC,CAAQ;AAAA,sBACnB,CAAC,EAAE,OAAAG,EAAA,MAAYA,EAAM,OAAO,QAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAYxBJ,EAAO;AAAA;AAAA;AAAA,WAG9B,CAAC,EAAE,OAAAI,EAAA,MAAYA,EAAM,OAAO,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aASjC,CAAC,EAAE,OAAAA,EAAA,MAAYA,EAAM,OAAO,QAAQ;AAAA;AAAA;"}

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

@@ -0,0 +1,121 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { memo as L, useRef as I, useState as h, useCallback as l, useEffect as v } from "react";
+import X from "../../../../../../assets/line-icons/icons/chevron-left.js";
+import w from "../../../../../../assets/line-icons/icons/chevron-right.js";
+import { PuzzleContainer as A, StatusIcon as N, ContentWrapper as T, ScrollButton as m, ScrollContainer as x } from "./activities-card-puzzles.styled.js";
+import i from "../../../../../ui/layout/flex-view.js";
+import B from "../../../../../ui/image/image.js";
+import k from "../../../../../ui/separator/separator.js";
+import D from "../../../../../ui/text/text.js";
+import { NODE_STATE as a } from "../../../../daily-timeline-types.js";
+import { stateIcon as d } from "../constants.js";
+import { IS_APP_RUNNING_IN_RN as f } from "../../../../../../constants/app-config.js";
+const j = ({
+  puzzles: $,
+  onPuzzleClick: o
+}) => {
+  const n = $ || [], r = I(null), [g, u] = h(!1), [_, C] = h(!1), b = l(() => {
+    r.current && r.current.scrollBy({ left: -180, behavior: "smooth" });
+  }, []), p = l(() => {
+    r.current && r.current.scrollBy({ left: 180, behavior: "smooth" });
+  }, []), c = l(() => {
+    if (r.current) {
+      const { scrollLeft: t, scrollWidth: E, clientWidth: R } = r.current;
+      u(t > 0), C(t < E - R - 10);
+    }
+  }, []);
+  v(() => {
+    const t = r.current;
+    if (t)
+      return c(), t.addEventListener("scroll", c), () => {
+        t.removeEventListener("scroll", c);
+      };
+  }, [c, n.length]);
+  const S = l(
+    (t) => /* @__PURE__ */ s(
+      A,
+      {
+        $gapX: 1,
+        $imageHue: t.image_hue || "BLUE",
+        $width: 146,
+        $height: 162,
+        $background: `${t.image_hue || "BLUE"}_2`,
+        onClick: () => o == null ? void 0 : o({
+          item_ref: t.item_ref,
+          feedback_comments: t.feedback_comments,
+          image_hue: t.image_hue,
+          title: t.title,
+          tip: t.tip
+        }),
+        children: [
+          /* @__PURE__ */ e(
+            N,
+            {
+              $borderRadiusX: 1,
+              $background: t.state === a.PENDING || t.state === a.NOT_STARTED ? "RED" : "BLACK_1",
+              $widthX: 1,
+              $heightX: 1,
+              $alignItems: "center",
+              $justifyContent: "center",
+              children: t.state && (d[t.state] || d[a.COMPLETED])
+            }
+          ),
+          /* @__PURE__ */ s(i, { $background: "TRANSPARENT", $alignItems: "center", children: [
+            t.image_url && /* @__PURE__ */ e(
+              B,
+              {
+                src: t.image_url ?? "",
+                alt: "Puzzle illustration",
+                width: 68,
+                height: 68,
+                withLoader: !0
+              }
+            ),
+            /* @__PURE__ */ e(k, { heightX: 1 }),
+            /* @__PURE__ */ e(i, { $gutterX: 0.25, children: /* @__PURE__ */ e(D, { $renderAs: "ab3", $align: "center", children: t.title }) })
+          ] })
+        ]
+      },
+      t.id
+    ),
+    [o]
+  );
+  return !n || n.length === 0 ? null : /* @__PURE__ */ e(T, { $flexRowGapX: 1, children: /* @__PURE__ */ s(i, { $position: "relative", $borderColor: "GREY_2", children: [
+    /* @__PURE__ */ e(
+      m,
+      {
+        $background: "BLACK_T_60",
+        $justifyContent: "center",
+        $alignItems: "center",
+        $widthX: 2,
+        $height: "100%",
+        onClick: b,
+        $visible: !f && g,
+        $left: "0px",
+        $right: "auto",
+        children: /* @__PURE__ */ e(X, { width: 24, height: 24 })
+      }
+    ),
+    /* @__PURE__ */ e(i, { $gutterX: 1, $gapX: 1, children: /* @__PURE__ */ e(x, { ref: r, children: /* @__PURE__ */ e(i, { $flexDirection: "row", $flexGapX: 1, children: n.map(S) }) }) }),
+    /* @__PURE__ */ e(
+      m,
+      {
+        $position: "absolute",
+        $widthX: 2,
+        $height: "100%",
+        $background: "BLACK_T_60",
+        $justifyContent: "center",
+        $alignItems: "center",
+        onClick: p,
+        $visible: !f && _,
+        $left: "auto",
+        $right: "0px",
+        children: /* @__PURE__ */ e(w, { width: 24, height: 24 })
+      }
+    )
+  ] }) });
+}, q = L(j);
+export {
+  q as default
+};
+//# sourceMappingURL=activities-card-puzzles.js.map