catchup-library-web 2.6.9 → 2.6.11

package/dist/index.d.mts

@@ -393,11 +393,20 @@ interface ISelectionTabProps {
     borderColor: string;
     selectedBorderColor: string;
 }
+interface ISelectionTabPillProps {
+    optionList: any;
+    selectedId: any;
+    handleSelectOnClick: (e: any) => void;
+    selectedClassName?: string;
+    unselectedClassName?: string;
+}
 
 declare const SelectionTab: ({ optionList, selectedId, handleSelectOnClick, selectedTextColor, selectedBorderColor, textColor, borderColor, }: ISelectionTabProps) => react_jsx_runtime.JSX.Element;
 
 declare const SelectionTabFill: ({ optionList, selectedId, handleSelectOnClick, }: ISelectionTabProps) => react_jsx_runtime.JSX.Element;
 
+declare const SelectionTabPill: ({ optionList, selectedId, handleSelectOnClick, selectedClassName, unselectedClassName, }: ISelectionTabPillProps) => react_jsx_runtime.JSX.Element;
+
 interface IFixedLabelProps {
     title: string;
     icon?: any;
@@ -943,4 +952,4 @@ declare const retrieveActivityMethodologyOptionList: () => {
     text: string;
 }[];
 
-export { ActivityBodyContent, ActivityEmptyContent, ActivityEvaluationRubricContent, ActivityPreviewByData, ActivitySolutionContent, AmberLabel, ApproveButton, BaseCard, BaseImage, BaseLoading, BaseLoadingWithText, BaseModal, BasePDF, BaseTitle, BlueLabel, BlueVerticalDividerLine, CancelButton, CoralLabel, CreateButton, CyanLabel, DeleteButton, DividerLine, DropdownActivityContent, FillInTheBlanksActivityContent, FullCard, GrayLabel, GreenLabel, GroupingActivityContent, InfoWithText, InputGroup, InputWithSpecialExpression, LeftTextRightInputGroup, LimeLabel, MCMAActivityContent, MCSAActivityContent, MatchingActivityContent, ONE_DAY, ONE_HOUR, ONE_MONTH, ONE_WEEK, OpenEndedActivityContent, OrangeLabel, OrderingActivityContent, PageTravelGroup, PrimaryButton, ProgressBar, PurpleLabel, RedLabel, ScoreBar, SecondaryButton, SelectionBox, SelectionCheckbox, SelectionTab, SelectionTabFill, StatusError, SubTitle, THREE_MONTHS, TealLabel, TimedProgressBar, TrueFalseActivityContent, VerticalDividerLine, base64ToFile, calculateEndDateOfWeek, calculateLevenshteinDistance, calculateStartDateOfWeek, checkActivityAnswerState, constructActivityAnswerMap, constructActivityAnswerStateList, constructActivityData, constructActivityItemListBodyOnly, constructActivityItemListForSolution, constructActivityItemListMaterialOnly, constructActivityItemListSolutionOnly, constructActivityItemListWithAnswersForAI, constructActivityItemListWithSolutionForAI, constructAnswerBasedOnData, constructBaseNumericIndividualModel, constructBaseVerbalIndvidualModel, constructCategoryTreeFromParentCode, constructCombinedCorporateAssessmentAssignmentReportMap, constructCombinedOutcomeActivityScoreMapFromCombinedReport, constructInputWithSpecialExpressionList, constructMonthName, constructOutcomeActivityScoreList, constructUserProfileQueryParams, constructWeekName, convertDataURLtoFile, convertToBase64, convertToBodyMapString, convertToEvaluationRubricMapString, convertToSolutionMapString, convertTurkishCharactersToEnglish, decodeJWT, encodeJWT, filterCategoryVersionCodeOptionList, filterCategoryVersionCodeOptionListByGradeDTO, filterCategoryVersionCodeOptionListByInstitutionDTO, filterCoterieTypeByDistinctOptionList, filterCoterieTypeOptionList, filterCurriculumTypeOptionList, filterGradeLevelOptionList, filterSkillVersionCodeOptionList, filterUserRoleOptionList, findAISettingsFromCurrentProfile, findBestFitActivity, formatPriceWithCommas, getColorByIndex, getCurrentDateTime, getLanguageFromCode, getLanguageFromCurriculumType, getOneWeekLater, getSystemLanguageFromCurriculumType, ignoreMathematicalExpression, mergeObjects, parseBodyMapFromData, parseContentMapFromData, parseMaterialMapFromData, retrieveAcceptedFormats, retrieveActivityAnswerFromAnswerList, retrieveActivityCountOptionList, retrieveActivityMethodologyOptionList, retrieveActivityTemplateDTOOptionList, retrieveAllEarnedBadgeDTOListByCoterieType, retrieveAllEarnedBadgeDTOListByCoterieTypeList, retrieveAnnouncementAudienceOptionList, retrieveAnnouncementTypeOptionList, retrieveBadgeRuleListByParams, retrieveBadgeRuleTextByParams, retrieveBranchDTOByUserProfileOptionList, retrieveBranchDTOOptionList, retrieveBrandDTOByUserProfileOptionList, retrieveBrandDTOOptionList, retrieveCampusDTOByUserProfileOptionList, retrieveCampusDTOOptionList, retrieveCategoryVersionCodeOptionList, retrieveClockTimeLeft, retrieveColorByScore, retrieveContentTypeOptionList, retrieveContestTypeOptionList, retrieveCoterieTypeFromStandardExamCoterieType, retrieveCoterieTypeOptionList, retrieveCountryCodeOptionList, retrieveCountryNameOptionList, retrieveCurrencyTypeOptionList, retrieveCurrentDefaultDataMap, retrieveCurriculumTypeOptionList, retrieveDateIntervalOptionList, retrieveDefaultUserRoleOptionList, retrieveDelayTypeOptionList, retrieveDifficultyByActivityTypeFromData, retrieveDifficultyOptionList, retrieveDiscountAmountTypeOptionList, retrieveDistinctCoterieTypeFromCorporatePersonalizedAssignmentApplicationDTO, retrieveDurationInMinutesOptionList, retrieveDurationInSecondsOptionList, retrieveDurationTypeOptionList, retrieveEachTimeSpentInSeconds, retrieveEnableOptionList, retrieveExternalRegistrationDTOOptionList, retrieveFileTypeFromAcceptedFormat, retrieveFileTypeFromExtension, retrieveFileTypeOptionList, retrieveFrequencyTypeOptionList, retrieveGenderOptionList, retrieveGradeDTOByUserProfileOptionList, retrieveGradeDTOOptionList, retrieveGradeLevelOptionList, retrieveInstitutionDTOByUserProfileOptionList, retrieveInstitutionDTOOptionList, retrieveInstitutionTypeByLevel, retrieveInstitutionTypeOptionList, retrieveLanguageOptionList, retrieveLastNOptionList, retrieveLeagueThresholdByLeagueType, retrieveLeagueThresholds, retrieveLeagueTypeOptionList, retrieveMonthNameByIndex, retrieveOpticalExamPartTypeOptionList, retrieveOpticalExamTypeOptionList, retrieveOtherBadgeDTOList, retrieveOutcomePlanTypeOptionList, retrievePhoneNumberAreaCodeList, retrieveProvinceNameOptionList, retrieveReportTypeOptionList, retrieveSeasonDTOByUserProfileOptionList, retrieveSeasonDTOOptionList, retrieveSkillVersionCodeOptionList, retrieveStandardExamCoterieTypeOptionListByStandardExamType, retrieveStandardExamTypeIcon, retrieveStandardExamTypeOptionList, retrieveStatusOptionList, retrieveTeachingMethodologyOptionList, retrieveTimeFilterOptionList, retrieveTimeFilterWithLastNOptionList, retrieveTokenUsageSubTypeOptionList, retrieveTokenUsageTypeOptionList, retrieveTotalTimeSpentInMinutes, retrieveTotalTimeSpentInSeconds, retrieveUserAuthorityGeneralOptionList, retrieveUserRoleOptionList, retrieveValidationRequirementList, shuffleArray, useScreenSize };
+export { ActivityBodyContent, ActivityEmptyContent, ActivityEvaluationRubricContent, ActivityPreviewByData, ActivitySolutionContent, AmberLabel, ApproveButton, BaseCard, BaseImage, BaseLoading, BaseLoadingWithText, BaseModal, BasePDF, BaseTitle, BlueLabel, BlueVerticalDividerLine, CancelButton, CoralLabel, CreateButton, CyanLabel, DeleteButton, DividerLine, DropdownActivityContent, FillInTheBlanksActivityContent, FullCard, GrayLabel, GreenLabel, GroupingActivityContent, InfoWithText, InputGroup, InputWithSpecialExpression, LeftTextRightInputGroup, LimeLabel, MCMAActivityContent, MCSAActivityContent, MatchingActivityContent, ONE_DAY, ONE_HOUR, ONE_MONTH, ONE_WEEK, OpenEndedActivityContent, OrangeLabel, OrderingActivityContent, PageTravelGroup, PrimaryButton, ProgressBar, PurpleLabel, RedLabel, ScoreBar, SecondaryButton, SelectionBox, SelectionCheckbox, SelectionTab, SelectionTabFill, SelectionTabPill, StatusError, SubTitle, THREE_MONTHS, TealLabel, TimedProgressBar, TrueFalseActivityContent, VerticalDividerLine, base64ToFile, calculateEndDateOfWeek, calculateLevenshteinDistance, calculateStartDateOfWeek, checkActivityAnswerState, constructActivityAnswerMap, constructActivityAnswerStateList, constructActivityData, constructActivityItemListBodyOnly, constructActivityItemListForSolution, constructActivityItemListMaterialOnly, constructActivityItemListSolutionOnly, constructActivityItemListWithAnswersForAI, constructActivityItemListWithSolutionForAI, constructAnswerBasedOnData, constructBaseNumericIndividualModel, constructBaseVerbalIndvidualModel, constructCategoryTreeFromParentCode, constructCombinedCorporateAssessmentAssignmentReportMap, constructCombinedOutcomeActivityScoreMapFromCombinedReport, constructInputWithSpecialExpressionList, constructMonthName, constructOutcomeActivityScoreList, constructUserProfileQueryParams, constructWeekName, convertDataURLtoFile, convertToBase64, convertToBodyMapString, convertToEvaluationRubricMapString, convertToSolutionMapString, convertTurkishCharactersToEnglish, decodeJWT, encodeJWT, filterCategoryVersionCodeOptionList, filterCategoryVersionCodeOptionListByGradeDTO, filterCategoryVersionCodeOptionListByInstitutionDTO, filterCoterieTypeByDistinctOptionList, filterCoterieTypeOptionList, filterCurriculumTypeOptionList, filterGradeLevelOptionList, filterSkillVersionCodeOptionList, filterUserRoleOptionList, findAISettingsFromCurrentProfile, findBestFitActivity, formatPriceWithCommas, getColorByIndex, getCurrentDateTime, getLanguageFromCode, getLanguageFromCurriculumType, getOneWeekLater, getSystemLanguageFromCurriculumType, ignoreMathematicalExpression, mergeObjects, parseBodyMapFromData, parseContentMapFromData, parseMaterialMapFromData, retrieveAcceptedFormats, retrieveActivityAnswerFromAnswerList, retrieveActivityCountOptionList, retrieveActivityMethodologyOptionList, retrieveActivityTemplateDTOOptionList, retrieveAllEarnedBadgeDTOListByCoterieType, retrieveAllEarnedBadgeDTOListByCoterieTypeList, retrieveAnnouncementAudienceOptionList, retrieveAnnouncementTypeOptionList, retrieveBadgeRuleListByParams, retrieveBadgeRuleTextByParams, retrieveBranchDTOByUserProfileOptionList, retrieveBranchDTOOptionList, retrieveBrandDTOByUserProfileOptionList, retrieveBrandDTOOptionList, retrieveCampusDTOByUserProfileOptionList, retrieveCampusDTOOptionList, retrieveCategoryVersionCodeOptionList, retrieveClockTimeLeft, retrieveColorByScore, retrieveContentTypeOptionList, retrieveContestTypeOptionList, retrieveCoterieTypeFromStandardExamCoterieType, retrieveCoterieTypeOptionList, retrieveCountryCodeOptionList, retrieveCountryNameOptionList, retrieveCurrencyTypeOptionList, retrieveCurrentDefaultDataMap, retrieveCurriculumTypeOptionList, retrieveDateIntervalOptionList, retrieveDefaultUserRoleOptionList, retrieveDelayTypeOptionList, retrieveDifficultyByActivityTypeFromData, retrieveDifficultyOptionList, retrieveDiscountAmountTypeOptionList, retrieveDistinctCoterieTypeFromCorporatePersonalizedAssignmentApplicationDTO, retrieveDurationInMinutesOptionList, retrieveDurationInSecondsOptionList, retrieveDurationTypeOptionList, retrieveEachTimeSpentInSeconds, retrieveEnableOptionList, retrieveExternalRegistrationDTOOptionList, retrieveFileTypeFromAcceptedFormat, retrieveFileTypeFromExtension, retrieveFileTypeOptionList, retrieveFrequencyTypeOptionList, retrieveGenderOptionList, retrieveGradeDTOByUserProfileOptionList, retrieveGradeDTOOptionList, retrieveGradeLevelOptionList, retrieveInstitutionDTOByUserProfileOptionList, retrieveInstitutionDTOOptionList, retrieveInstitutionTypeByLevel, retrieveInstitutionTypeOptionList, retrieveLanguageOptionList, retrieveLastNOptionList, retrieveLeagueThresholdByLeagueType, retrieveLeagueThresholds, retrieveLeagueTypeOptionList, retrieveMonthNameByIndex, retrieveOpticalExamPartTypeOptionList, retrieveOpticalExamTypeOptionList, retrieveOtherBadgeDTOList, retrieveOutcomePlanTypeOptionList, retrievePhoneNumberAreaCodeList, retrieveProvinceNameOptionList, retrieveReportTypeOptionList, retrieveSeasonDTOByUserProfileOptionList, retrieveSeasonDTOOptionList, retrieveSkillVersionCodeOptionList, retrieveStandardExamCoterieTypeOptionListByStandardExamType, retrieveStandardExamTypeIcon, retrieveStandardExamTypeOptionList, retrieveStatusOptionList, retrieveTeachingMethodologyOptionList, retrieveTimeFilterOptionList, retrieveTimeFilterWithLastNOptionList, retrieveTokenUsageSubTypeOptionList, retrieveTokenUsageTypeOptionList, retrieveTotalTimeSpentInMinutes, retrieveTotalTimeSpentInSeconds, retrieveUserAuthorityGeneralOptionList, retrieveUserRoleOptionList, retrieveValidationRequirementList, shuffleArray, useScreenSize };

package/dist/index.d.ts

@@ -393,11 +393,20 @@ interface ISelectionTabProps {
     borderColor: string;
     selectedBorderColor: string;
 }
+interface ISelectionTabPillProps {
+    optionList: any;
+    selectedId: any;
+    handleSelectOnClick: (e: any) => void;
+    selectedClassName?: string;
+    unselectedClassName?: string;
+}
 
 declare const SelectionTab: ({ optionList, selectedId, handleSelectOnClick, selectedTextColor, selectedBorderColor, textColor, borderColor, }: ISelectionTabProps) => react_jsx_runtime.JSX.Element;
 
 declare const SelectionTabFill: ({ optionList, selectedId, handleSelectOnClick, }: ISelectionTabProps) => react_jsx_runtime.JSX.Element;
 
+declare const SelectionTabPill: ({ optionList, selectedId, handleSelectOnClick, selectedClassName, unselectedClassName, }: ISelectionTabPillProps) => react_jsx_runtime.JSX.Element;
+
 interface IFixedLabelProps {
     title: string;
     icon?: any;
@@ -943,4 +952,4 @@ declare const retrieveActivityMethodologyOptionList: () => {
     text: string;
 }[];
 
-export { ActivityBodyContent, ActivityEmptyContent, ActivityEvaluationRubricContent, ActivityPreviewByData, ActivitySolutionContent, AmberLabel, ApproveButton, BaseCard, BaseImage, BaseLoading, BaseLoadingWithText, BaseModal, BasePDF, BaseTitle, BlueLabel, BlueVerticalDividerLine, CancelButton, CoralLabel, CreateButton, CyanLabel, DeleteButton, DividerLine, DropdownActivityContent, FillInTheBlanksActivityContent, FullCard, GrayLabel, GreenLabel, GroupingActivityContent, InfoWithText, InputGroup, InputWithSpecialExpression, LeftTextRightInputGroup, LimeLabel, MCMAActivityContent, MCSAActivityContent, MatchingActivityContent, ONE_DAY, ONE_HOUR, ONE_MONTH, ONE_WEEK, OpenEndedActivityContent, OrangeLabel, OrderingActivityContent, PageTravelGroup, PrimaryButton, ProgressBar, PurpleLabel, RedLabel, ScoreBar, SecondaryButton, SelectionBox, SelectionCheckbox, SelectionTab, SelectionTabFill, StatusError, SubTitle, THREE_MONTHS, TealLabel, TimedProgressBar, TrueFalseActivityContent, VerticalDividerLine, base64ToFile, calculateEndDateOfWeek, calculateLevenshteinDistance, calculateStartDateOfWeek, checkActivityAnswerState, constructActivityAnswerMap, constructActivityAnswerStateList, constructActivityData, constructActivityItemListBodyOnly, constructActivityItemListForSolution, constructActivityItemListMaterialOnly, constructActivityItemListSolutionOnly, constructActivityItemListWithAnswersForAI, constructActivityItemListWithSolutionForAI, constructAnswerBasedOnData, constructBaseNumericIndividualModel, constructBaseVerbalIndvidualModel, constructCategoryTreeFromParentCode, constructCombinedCorporateAssessmentAssignmentReportMap, constructCombinedOutcomeActivityScoreMapFromCombinedReport, constructInputWithSpecialExpressionList, constructMonthName, constructOutcomeActivityScoreList, constructUserProfileQueryParams, constructWeekName, convertDataURLtoFile, convertToBase64, convertToBodyMapString, convertToEvaluationRubricMapString, convertToSolutionMapString, convertTurkishCharactersToEnglish, decodeJWT, encodeJWT, filterCategoryVersionCodeOptionList, filterCategoryVersionCodeOptionListByGradeDTO, filterCategoryVersionCodeOptionListByInstitutionDTO, filterCoterieTypeByDistinctOptionList, filterCoterieTypeOptionList, filterCurriculumTypeOptionList, filterGradeLevelOptionList, filterSkillVersionCodeOptionList, filterUserRoleOptionList, findAISettingsFromCurrentProfile, findBestFitActivity, formatPriceWithCommas, getColorByIndex, getCurrentDateTime, getLanguageFromCode, getLanguageFromCurriculumType, getOneWeekLater, getSystemLanguageFromCurriculumType, ignoreMathematicalExpression, mergeObjects, parseBodyMapFromData, parseContentMapFromData, parseMaterialMapFromData, retrieveAcceptedFormats, retrieveActivityAnswerFromAnswerList, retrieveActivityCountOptionList, retrieveActivityMethodologyOptionList, retrieveActivityTemplateDTOOptionList, retrieveAllEarnedBadgeDTOListByCoterieType, retrieveAllEarnedBadgeDTOListByCoterieTypeList, retrieveAnnouncementAudienceOptionList, retrieveAnnouncementTypeOptionList, retrieveBadgeRuleListByParams, retrieveBadgeRuleTextByParams, retrieveBranchDTOByUserProfileOptionList, retrieveBranchDTOOptionList, retrieveBrandDTOByUserProfileOptionList, retrieveBrandDTOOptionList, retrieveCampusDTOByUserProfileOptionList, retrieveCampusDTOOptionList, retrieveCategoryVersionCodeOptionList, retrieveClockTimeLeft, retrieveColorByScore, retrieveContentTypeOptionList, retrieveContestTypeOptionList, retrieveCoterieTypeFromStandardExamCoterieType, retrieveCoterieTypeOptionList, retrieveCountryCodeOptionList, retrieveCountryNameOptionList, retrieveCurrencyTypeOptionList, retrieveCurrentDefaultDataMap, retrieveCurriculumTypeOptionList, retrieveDateIntervalOptionList, retrieveDefaultUserRoleOptionList, retrieveDelayTypeOptionList, retrieveDifficultyByActivityTypeFromData, retrieveDifficultyOptionList, retrieveDiscountAmountTypeOptionList, retrieveDistinctCoterieTypeFromCorporatePersonalizedAssignmentApplicationDTO, retrieveDurationInMinutesOptionList, retrieveDurationInSecondsOptionList, retrieveDurationTypeOptionList, retrieveEachTimeSpentInSeconds, retrieveEnableOptionList, retrieveExternalRegistrationDTOOptionList, retrieveFileTypeFromAcceptedFormat, retrieveFileTypeFromExtension, retrieveFileTypeOptionList, retrieveFrequencyTypeOptionList, retrieveGenderOptionList, retrieveGradeDTOByUserProfileOptionList, retrieveGradeDTOOptionList, retrieveGradeLevelOptionList, retrieveInstitutionDTOByUserProfileOptionList, retrieveInstitutionDTOOptionList, retrieveInstitutionTypeByLevel, retrieveInstitutionTypeOptionList, retrieveLanguageOptionList, retrieveLastNOptionList, retrieveLeagueThresholdByLeagueType, retrieveLeagueThresholds, retrieveLeagueTypeOptionList, retrieveMonthNameByIndex, retrieveOpticalExamPartTypeOptionList, retrieveOpticalExamTypeOptionList, retrieveOtherBadgeDTOList, retrieveOutcomePlanTypeOptionList, retrievePhoneNumberAreaCodeList, retrieveProvinceNameOptionList, retrieveReportTypeOptionList, retrieveSeasonDTOByUserProfileOptionList, retrieveSeasonDTOOptionList, retrieveSkillVersionCodeOptionList, retrieveStandardExamCoterieTypeOptionListByStandardExamType, retrieveStandardExamTypeIcon, retrieveStandardExamTypeOptionList, retrieveStatusOptionList, retrieveTeachingMethodologyOptionList, retrieveTimeFilterOptionList, retrieveTimeFilterWithLastNOptionList, retrieveTokenUsageSubTypeOptionList, retrieveTokenUsageTypeOptionList, retrieveTotalTimeSpentInMinutes, retrieveTotalTimeSpentInSeconds, retrieveUserAuthorityGeneralOptionList, retrieveUserRoleOptionList, retrieveValidationRequirementList, shuffleArray, useScreenSize };
+export { ActivityBodyContent, ActivityEmptyContent, ActivityEvaluationRubricContent, ActivityPreviewByData, ActivitySolutionContent, AmberLabel, ApproveButton, BaseCard, BaseImage, BaseLoading, BaseLoadingWithText, BaseModal, BasePDF, BaseTitle, BlueLabel, BlueVerticalDividerLine, CancelButton, CoralLabel, CreateButton, CyanLabel, DeleteButton, DividerLine, DropdownActivityContent, FillInTheBlanksActivityContent, FullCard, GrayLabel, GreenLabel, GroupingActivityContent, InfoWithText, InputGroup, InputWithSpecialExpression, LeftTextRightInputGroup, LimeLabel, MCMAActivityContent, MCSAActivityContent, MatchingActivityContent, ONE_DAY, ONE_HOUR, ONE_MONTH, ONE_WEEK, OpenEndedActivityContent, OrangeLabel, OrderingActivityContent, PageTravelGroup, PrimaryButton, ProgressBar, PurpleLabel, RedLabel, ScoreBar, SecondaryButton, SelectionBox, SelectionCheckbox, SelectionTab, SelectionTabFill, SelectionTabPill, StatusError, SubTitle, THREE_MONTHS, TealLabel, TimedProgressBar, TrueFalseActivityContent, VerticalDividerLine, base64ToFile, calculateEndDateOfWeek, calculateLevenshteinDistance, calculateStartDateOfWeek, checkActivityAnswerState, constructActivityAnswerMap, constructActivityAnswerStateList, constructActivityData, constructActivityItemListBodyOnly, constructActivityItemListForSolution, constructActivityItemListMaterialOnly, constructActivityItemListSolutionOnly, constructActivityItemListWithAnswersForAI, constructActivityItemListWithSolutionForAI, constructAnswerBasedOnData, constructBaseNumericIndividualModel, constructBaseVerbalIndvidualModel, constructCategoryTreeFromParentCode, constructCombinedCorporateAssessmentAssignmentReportMap, constructCombinedOutcomeActivityScoreMapFromCombinedReport, constructInputWithSpecialExpressionList, constructMonthName, constructOutcomeActivityScoreList, constructUserProfileQueryParams, constructWeekName, convertDataURLtoFile, convertToBase64, convertToBodyMapString, convertToEvaluationRubricMapString, convertToSolutionMapString, convertTurkishCharactersToEnglish, decodeJWT, encodeJWT, filterCategoryVersionCodeOptionList, filterCategoryVersionCodeOptionListByGradeDTO, filterCategoryVersionCodeOptionListByInstitutionDTO, filterCoterieTypeByDistinctOptionList, filterCoterieTypeOptionList, filterCurriculumTypeOptionList, filterGradeLevelOptionList, filterSkillVersionCodeOptionList, filterUserRoleOptionList, findAISettingsFromCurrentProfile, findBestFitActivity, formatPriceWithCommas, getColorByIndex, getCurrentDateTime, getLanguageFromCode, getLanguageFromCurriculumType, getOneWeekLater, getSystemLanguageFromCurriculumType, ignoreMathematicalExpression, mergeObjects, parseBodyMapFromData, parseContentMapFromData, parseMaterialMapFromData, retrieveAcceptedFormats, retrieveActivityAnswerFromAnswerList, retrieveActivityCountOptionList, retrieveActivityMethodologyOptionList, retrieveActivityTemplateDTOOptionList, retrieveAllEarnedBadgeDTOListByCoterieType, retrieveAllEarnedBadgeDTOListByCoterieTypeList, retrieveAnnouncementAudienceOptionList, retrieveAnnouncementTypeOptionList, retrieveBadgeRuleListByParams, retrieveBadgeRuleTextByParams, retrieveBranchDTOByUserProfileOptionList, retrieveBranchDTOOptionList, retrieveBrandDTOByUserProfileOptionList, retrieveBrandDTOOptionList, retrieveCampusDTOByUserProfileOptionList, retrieveCampusDTOOptionList, retrieveCategoryVersionCodeOptionList, retrieveClockTimeLeft, retrieveColorByScore, retrieveContentTypeOptionList, retrieveContestTypeOptionList, retrieveCoterieTypeFromStandardExamCoterieType, retrieveCoterieTypeOptionList, retrieveCountryCodeOptionList, retrieveCountryNameOptionList, retrieveCurrencyTypeOptionList, retrieveCurrentDefaultDataMap, retrieveCurriculumTypeOptionList, retrieveDateIntervalOptionList, retrieveDefaultUserRoleOptionList, retrieveDelayTypeOptionList, retrieveDifficultyByActivityTypeFromData, retrieveDifficultyOptionList, retrieveDiscountAmountTypeOptionList, retrieveDistinctCoterieTypeFromCorporatePersonalizedAssignmentApplicationDTO, retrieveDurationInMinutesOptionList, retrieveDurationInSecondsOptionList, retrieveDurationTypeOptionList, retrieveEachTimeSpentInSeconds, retrieveEnableOptionList, retrieveExternalRegistrationDTOOptionList, retrieveFileTypeFromAcceptedFormat, retrieveFileTypeFromExtension, retrieveFileTypeOptionList, retrieveFrequencyTypeOptionList, retrieveGenderOptionList, retrieveGradeDTOByUserProfileOptionList, retrieveGradeDTOOptionList, retrieveGradeLevelOptionList, retrieveInstitutionDTOByUserProfileOptionList, retrieveInstitutionDTOOptionList, retrieveInstitutionTypeByLevel, retrieveInstitutionTypeOptionList, retrieveLanguageOptionList, retrieveLastNOptionList, retrieveLeagueThresholdByLeagueType, retrieveLeagueThresholds, retrieveLeagueTypeOptionList, retrieveMonthNameByIndex, retrieveOpticalExamPartTypeOptionList, retrieveOpticalExamTypeOptionList, retrieveOtherBadgeDTOList, retrieveOutcomePlanTypeOptionList, retrievePhoneNumberAreaCodeList, retrieveProvinceNameOptionList, retrieveReportTypeOptionList, retrieveSeasonDTOByUserProfileOptionList, retrieveSeasonDTOOptionList, retrieveSkillVersionCodeOptionList, retrieveStandardExamCoterieTypeOptionListByStandardExamType, retrieveStandardExamTypeIcon, retrieveStandardExamTypeOptionList, retrieveStatusOptionList, retrieveTeachingMethodologyOptionList, retrieveTimeFilterOptionList, retrieveTimeFilterWithLastNOptionList, retrieveTokenUsageSubTypeOptionList, retrieveTokenUsageTypeOptionList, retrieveTotalTimeSpentInMinutes, retrieveTotalTimeSpentInSeconds, retrieveUserAuthorityGeneralOptionList, retrieveUserRoleOptionList, retrieveValidationRequirementList, shuffleArray, useScreenSize };

package/dist/index.js

@@ -121,6 +121,7 @@ __export(index_exports, {
   SelectionCheckbox: () => SelectionCheckbox_default,
   SelectionTab: () => SelectionTab_default,
   SelectionTabFill: () => SelectionTabFill_default,
+  SelectionTabPill: () => SelectionTabPill_default,
   StatusError: () => StatusError_default,
   SubTitle: () => SubTitle_default,
   THREE_MONTHS: () => THREE_MONTHS,
@@ -7850,7 +7851,7 @@ var SelectionTab = ({
   return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap mb-2 text-center", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
     "div",
     {
-      className: `${selectedId === option.id ? selectedTextColor ? selectedTextColor : "text-catchup-blue-500" : textColor ? textColor : "text-catchup-gray-300"} ${selectedId === option.id ? selectedBorderColor ? selectedBorderColor : "border-catchup-blue-500" : borderColor ? borderColor : "border-catchup-gray-50"} border-b-2 transition-all duration-300 p-3 cursor-pointer`,
+      className: `${selectedId === option.id ? selectedTextColor ? selectedTextColor : "text-catchup-blue-500" : textColor ? textColor : "text-catchup-gray-300"} ${selectedId === option.id ? selectedBorderColor ? selectedBorderColor : "border-catchup-blue-500" : borderColor ? borderColor : "border-catchup-gray-50"} border-b-2 transition-all duration-300 px-4 py-2 cursor-pointer`,
       onClick: () => {
         handleSelectOnClick(option.id);
       },
@@ -7891,8 +7892,29 @@ var SelectionTabFill = ({
 };
 var SelectionTabFill_default = SelectionTabFill;
 
-// src/components/labels/Label.tsx
+// src/components/tabs/SelectionTabPill.tsx
 var import_jsx_runtime56 = require("react/jsx-runtime");
+var SelectionTabPill = ({
+  optionList,
+  selectedId,
+  handleSelectOnClick,
+  selectedClassName,
+  unselectedClassName
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "flex flex-wrap items-center gap-3 my-2", children: optionList.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    "button",
+    {
+      onClick: () => handleSelectOnClick(option.id),
+      className: `px-4 py-2 rounded-catchup-full transition-all duration-200 cursor-pointer ${selectedId === option.id ? selectedClassName || "bg-catchup-blue text-catchup-white shadow-card" : unselectedClassName || "bg-catchup-blue-100 text-catchup-blue-800 hover:bg-catchup-blue-200"}`,
+      children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "text-base font-semibold", children: option.title })
+    },
+    index
+  )) });
+};
+var SelectionTabPill_default = SelectionTabPill;
+
+// src/components/labels/Label.tsx
+var import_jsx_runtime57 = require("react/jsx-runtime");
 var Label = ({
   title,
   icon,
@@ -7902,7 +7924,7 @@ var Label = ({
   backgroundColor,
   textColor
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
     "div",
     {
       className: "px-3 py-1 gap-x-3 border rounded-catchup-2xlarge text-center",
@@ -7912,9 +7934,9 @@ var Label = ({
         background: backgroundColor,
         color: textColor
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "flex flex-row items-center gap-x-2", children: [
         icon,
-        /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("p", { className: font, children: title })
+        /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: font, children: title })
       ] })
     }
   );
@@ -7922,9 +7944,9 @@ var Label = ({
 var Label_default = Label;
 
 // src/components/labels/AmberLabel.tsx
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_jsx_runtime58 = require("react/jsx-runtime");
 var AmberLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
     Label_default,
     {
       title,
@@ -7939,9 +7961,9 @@ var AmberLabel = ({ title, icon, font }) => {
 var AmberLabel_default = AmberLabel;
 
 // src/components/labels/TealLabel.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime59 = require("react/jsx-runtime");
 var TealLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
     Label_default,
     {
       title,
@@ -7956,9 +7978,9 @@ var TealLabel = ({ title, icon, font }) => {
 var TealLabel_default = TealLabel;
 
 // src/components/labels/PurpleLabel.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var PurpleLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     Label_default,
     {
       title,
@@ -7973,9 +7995,9 @@ var PurpleLabel = ({ title, icon, font }) => {
 var PurpleLabel_default = PurpleLabel;
 
 // src/components/labels/GreenLabel.tsx
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 var GreenLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
     Label_default,
     {
       title,
@@ -7990,9 +8012,9 @@ var GreenLabel = ({ title, icon, font }) => {
 var GreenLabel_default = GreenLabel;
 
 // src/components/labels/BlueLabel.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 var BlueLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
     Label_default,
     {
       title,
@@ -8007,9 +8029,9 @@ var BlueLabel = ({ title, icon, font }) => {
 var BlueLabel_default = BlueLabel;
 
 // src/components/labels/OrangeLabel.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var OrangeLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     Label_default,
     {
       title,
@@ -8024,9 +8046,9 @@ var OrangeLabel = ({ title, icon, font }) => {
 var OrangeLabel_default = OrangeLabel;
 
 // src/components/labels/RedLabel.tsx
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var RedLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     Label_default,
     {
       title,
@@ -8041,9 +8063,9 @@ var RedLabel = ({ title, icon, font }) => {
 var RedLabel_default = RedLabel;
 
 // src/components/labels/LimeLabel.tsx
-var import_jsx_runtime64 = require("react/jsx-runtime");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 var LimeLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
     Label_default,
     {
       title,
@@ -8058,9 +8080,9 @@ var LimeLabel = ({ title, icon, font }) => {
 var LimeLabel_default = LimeLabel;
 
 // src/components/labels/CoralLabel.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 var CoralLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
     Label_default,
     {
       title,
@@ -8075,9 +8097,9 @@ var CoralLabel = ({ title, icon, font }) => {
 var CoralLabel_default = CoralLabel;
 
 // src/components/labels/CyanLabel.tsx
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 var CyanLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
     Label_default,
     {
       title,
@@ -8092,9 +8114,9 @@ var CyanLabel = ({ title, icon, font }) => {
 var CyanLabel_default = CyanLabel;
 
 // src/components/labels/GrayLabel.tsx
-var import_jsx_runtime67 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 var GrayLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
     Label_default,
     {
       title,
@@ -8109,20 +8131,20 @@ var GrayLabel = ({ title, icon, font }) => {
 var GrayLabel_default = GrayLabel;
 
 // src/components/infos/InfoWithText.tsx
-var import_jsx_runtime68 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 var InfoWithText = (props) => {
   const { value } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "w-full flex flex-row items-center gap-x-2 my-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(BaseImage_default, { src: "/icons/info.webp", alt: "info", size: "small" }),
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("p", { className: "", children: value }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "w-full flex flex-row items-center gap-x-2 my-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(BaseImage_default, { src: "/icons/info.webp", alt: "info", size: "small" }),
+    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("p", { className: "", children: value }) })
   ] });
 };
 var InfoWithText_default = InfoWithText;
 
 // src/components/titles/SubTitle.tsx
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 var SubTitle = ({ title }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("p", { className: "text-xl font-medium text-catchup-darker-blue", children: title });
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("p", { className: "text-xl font-medium text-catchup-darker-blue", children: title });
 };
 var SubTitle_default = SubTitle;
 
@@ -10684,14 +10706,15 @@ var constructOutcomeActivityScoreList = (data) => {
   const traverseCategories = (categoryData, parentPath = "") => {
     const currentPath = parentPath ? `${parentPath} > ${categoryData.categoryDTO.name}` : categoryData.categoryDTO.name;
     if (categoryData.subCategoryActivityAnswerDTOList.length === 0) {
+      const scores = categoryData.activityScoreList || (categoryData.activityScoreDTOSet ? Array.from(categoryData.activityScoreDTOSet) : []);
       const outcomeActivityScore = {
         code: categoryData.categoryDTO.code,
         name: categoryData.categoryDTO.name,
-        count: categoryData.activityScoreDTOSet.length,
+        count: scores.length,
         score: 0,
         timeSpent: 0
       };
-      categoryData.activityScoreDTOSet.forEach((activity) => {
+      scores.forEach((activity) => {
         outcomeActivityScore.score += activity.score;
         outcomeActivityScore.timeSpent += activity.timeSpent;
       });
@@ -11004,6 +11027,7 @@ var retrieveActivityMethodologyOptionList = () => {
   SelectionCheckbox,
   SelectionTab,
   SelectionTabFill,
+  SelectionTabPill,
   StatusError,
   SubTitle,
   THREE_MONTHS,

package/dist/index.mjs

@@ -7614,7 +7614,7 @@ var SelectionTab = ({
   return /* @__PURE__ */ jsx54("div", { className: "flex flex-row items-center gap-x-4 gap-y-2 flex-wrap mb-2 text-center", children: optionList.map((option, index) => /* @__PURE__ */ jsxs43(
     "div",
     {
-      className: `${selectedId === option.id ? selectedTextColor ? selectedTextColor : "text-catchup-blue-500" : textColor ? textColor : "text-catchup-gray-300"} ${selectedId === option.id ? selectedBorderColor ? selectedBorderColor : "border-catchup-blue-500" : borderColor ? borderColor : "border-catchup-gray-50"} border-b-2 transition-all duration-300 p-3 cursor-pointer`,
+      className: `${selectedId === option.id ? selectedTextColor ? selectedTextColor : "text-catchup-blue-500" : textColor ? textColor : "text-catchup-gray-300"} ${selectedId === option.id ? selectedBorderColor ? selectedBorderColor : "border-catchup-blue-500" : borderColor ? borderColor : "border-catchup-gray-50"} border-b-2 transition-all duration-300 px-4 py-2 cursor-pointer`,
       onClick: () => {
         handleSelectOnClick(option.id);
       },
@@ -7655,8 +7655,29 @@ var SelectionTabFill = ({
 };
 var SelectionTabFill_default = SelectionTabFill;
 
+// src/components/tabs/SelectionTabPill.tsx
+import { jsx as jsx56 } from "react/jsx-runtime";
+var SelectionTabPill = ({
+  optionList,
+  selectedId,
+  handleSelectOnClick,
+  selectedClassName,
+  unselectedClassName
+}) => {
+  return /* @__PURE__ */ jsx56("div", { className: "flex flex-wrap items-center gap-3 my-2", children: optionList.map((option, index) => /* @__PURE__ */ jsx56(
+    "button",
+    {
+      onClick: () => handleSelectOnClick(option.id),
+      className: `px-4 py-2 rounded-catchup-full transition-all duration-200 cursor-pointer ${selectedId === option.id ? selectedClassName || "bg-catchup-blue text-catchup-white shadow-card" : unselectedClassName || "bg-catchup-blue-100 text-catchup-blue-800 hover:bg-catchup-blue-200"}`,
+      children: /* @__PURE__ */ jsx56("span", { className: "text-base font-semibold", children: option.title })
+    },
+    index
+  )) });
+};
+var SelectionTabPill_default = SelectionTabPill;
+
 // src/components/labels/Label.tsx
-import { jsx as jsx56, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs44 } from "react/jsx-runtime";
 var Label = ({
   title,
   icon,
@@ -7666,7 +7687,7 @@ var Label = ({
   backgroundColor,
   textColor
 }) => {
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx57(
     "div",
     {
       className: "px-3 py-1 gap-x-3 border rounded-catchup-2xlarge text-center",
@@ -7678,7 +7699,7 @@ var Label = ({
       },
       children: /* @__PURE__ */ jsxs44("div", { className: "flex flex-row items-center gap-x-2", children: [
         icon,
-        /* @__PURE__ */ jsx56("p", { className: font, children: title })
+        /* @__PURE__ */ jsx57("p", { className: font, children: title })
       ] })
     }
   );
@@ -7686,9 +7707,9 @@ var Label = ({
 var Label_default = Label;
 
 // src/components/labels/AmberLabel.tsx
-import { jsx as jsx57 } from "react/jsx-runtime";
+import { jsx as jsx58 } from "react/jsx-runtime";
 var AmberLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx57(
+  return /* @__PURE__ */ jsx58(
     Label_default,
     {
       title,
@@ -7703,9 +7724,9 @@ var AmberLabel = ({ title, icon, font }) => {
 var AmberLabel_default = AmberLabel;
 
 // src/components/labels/TealLabel.tsx
-import { jsx as jsx58 } from "react/jsx-runtime";
+import { jsx as jsx59 } from "react/jsx-runtime";
 var TealLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx58(
+  return /* @__PURE__ */ jsx59(
     Label_default,
     {
       title,
@@ -7720,9 +7741,9 @@ var TealLabel = ({ title, icon, font }) => {
 var TealLabel_default = TealLabel;
 
 // src/components/labels/PurpleLabel.tsx
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx60 } from "react/jsx-runtime";
 var PurpleLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx60(
     Label_default,
     {
       title,
@@ -7737,9 +7758,9 @@ var PurpleLabel = ({ title, icon, font }) => {
 var PurpleLabel_default = PurpleLabel;
 
 // src/components/labels/GreenLabel.tsx
-import { jsx as jsx60 } from "react/jsx-runtime";
+import { jsx as jsx61 } from "react/jsx-runtime";
 var GreenLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx60(
+  return /* @__PURE__ */ jsx61(
     Label_default,
     {
       title,
@@ -7754,9 +7775,9 @@ var GreenLabel = ({ title, icon, font }) => {
 var GreenLabel_default = GreenLabel;
 
 // src/components/labels/BlueLabel.tsx
-import { jsx as jsx61 } from "react/jsx-runtime";
+import { jsx as jsx62 } from "react/jsx-runtime";
 var BlueLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx61(
+  return /* @__PURE__ */ jsx62(
     Label_default,
     {
       title,
@@ -7771,9 +7792,9 @@ var BlueLabel = ({ title, icon, font }) => {
 var BlueLabel_default = BlueLabel;
 
 // src/components/labels/OrangeLabel.tsx
-import { jsx as jsx62 } from "react/jsx-runtime";
+import { jsx as jsx63 } from "react/jsx-runtime";
 var OrangeLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx62(
+  return /* @__PURE__ */ jsx63(
     Label_default,
     {
       title,
@@ -7788,9 +7809,9 @@ var OrangeLabel = ({ title, icon, font }) => {
 var OrangeLabel_default = OrangeLabel;
 
 // src/components/labels/RedLabel.tsx
-import { jsx as jsx63 } from "react/jsx-runtime";
+import { jsx as jsx64 } from "react/jsx-runtime";
 var RedLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx63(
+  return /* @__PURE__ */ jsx64(
     Label_default,
     {
       title,
@@ -7805,9 +7826,9 @@ var RedLabel = ({ title, icon, font }) => {
 var RedLabel_default = RedLabel;
 
 // src/components/labels/LimeLabel.tsx
-import { jsx as jsx64 } from "react/jsx-runtime";
+import { jsx as jsx65 } from "react/jsx-runtime";
 var LimeLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsx65(
     Label_default,
     {
       title,
@@ -7822,9 +7843,9 @@ var LimeLabel = ({ title, icon, font }) => {
 var LimeLabel_default = LimeLabel;
 
 // src/components/labels/CoralLabel.tsx
-import { jsx as jsx65 } from "react/jsx-runtime";
+import { jsx as jsx66 } from "react/jsx-runtime";
 var CoralLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsx66(
     Label_default,
     {
       title,
@@ -7839,9 +7860,9 @@ var CoralLabel = ({ title, icon, font }) => {
 var CoralLabel_default = CoralLabel;
 
 // src/components/labels/CyanLabel.tsx
-import { jsx as jsx66 } from "react/jsx-runtime";
+import { jsx as jsx67 } from "react/jsx-runtime";
 var CyanLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsx67(
     Label_default,
     {
       title,
@@ -7856,9 +7877,9 @@ var CyanLabel = ({ title, icon, font }) => {
 var CyanLabel_default = CyanLabel;
 
 // src/components/labels/GrayLabel.tsx
-import { jsx as jsx67 } from "react/jsx-runtime";
+import { jsx as jsx68 } from "react/jsx-runtime";
 var GrayLabel = ({ title, icon, font }) => {
-  return /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsx68(
     Label_default,
     {
       title,
@@ -7873,20 +7894,20 @@ var GrayLabel = ({ title, icon, font }) => {
 var GrayLabel_default = GrayLabel;
 
 // src/components/infos/InfoWithText.tsx
-import { jsx as jsx68, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx69, jsxs as jsxs45 } from "react/jsx-runtime";
 var InfoWithText = (props) => {
   const { value } = props;
   return /* @__PURE__ */ jsxs45("div", { className: "w-full flex flex-row items-center gap-x-2 my-2", children: [
-    /* @__PURE__ */ jsx68(BaseImage_default, { src: "/icons/info.webp", alt: "info", size: "small" }),
-    /* @__PURE__ */ jsx68("div", { className: "flex-1", children: /* @__PURE__ */ jsx68("p", { className: "", children: value }) })
+    /* @__PURE__ */ jsx69(BaseImage_default, { src: "/icons/info.webp", alt: "info", size: "small" }),
+    /* @__PURE__ */ jsx69("div", { className: "flex-1", children: /* @__PURE__ */ jsx69("p", { className: "", children: value }) })
   ] });
 };
 var InfoWithText_default = InfoWithText;
 
 // src/components/titles/SubTitle.tsx
-import { jsx as jsx69 } from "react/jsx-runtime";
+import { jsx as jsx70 } from "react/jsx-runtime";
 var SubTitle = ({ title }) => {
-  return /* @__PURE__ */ jsx69("p", { className: "text-xl font-medium text-catchup-darker-blue", children: title });
+  return /* @__PURE__ */ jsx70("p", { className: "text-xl font-medium text-catchup-darker-blue", children: title });
 };
 var SubTitle_default = SubTitle;
 
@@ -10448,14 +10469,15 @@ var constructOutcomeActivityScoreList = (data) => {
   const traverseCategories = (categoryData, parentPath = "") => {
     const currentPath = parentPath ? `${parentPath} > ${categoryData.categoryDTO.name}` : categoryData.categoryDTO.name;
     if (categoryData.subCategoryActivityAnswerDTOList.length === 0) {
+      const scores = categoryData.activityScoreList || (categoryData.activityScoreDTOSet ? Array.from(categoryData.activityScoreDTOSet) : []);
       const outcomeActivityScore = {
         code: categoryData.categoryDTO.code,
         name: categoryData.categoryDTO.name,
-        count: categoryData.activityScoreDTOSet.length,
+        count: scores.length,
         score: 0,
         timeSpent: 0
       };
-      categoryData.activityScoreDTOSet.forEach((activity) => {
+      scores.forEach((activity) => {
         outcomeActivityScore.score += activity.score;
         outcomeActivityScore.timeSpent += activity.timeSpent;
       });
@@ -10767,6 +10789,7 @@ export {
   SelectionCheckbox_default as SelectionCheckbox,
   SelectionTab_default as SelectionTab,
   SelectionTabFill_default as SelectionTabFill,
+  SelectionTabPill_default as SelectionTabPill,
   StatusError_default as StatusError,
   SubTitle_default as SubTitle,
   THREE_MONTHS,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "catchup-library-web",
-  "version": "2.6.9",
+  "version": "2.6.11",
   "description": "",
   "main": "dist/index.js",
   "scripts": {

package/src/components/tabs/SelectionTab.tsx

@@ -20,17 +20,17 @@ const SelectionTab = ({
                 ? selectedTextColor
                 : "text-catchup-blue-500"
               : textColor
-              ? textColor
-              : "text-catchup-gray-300"
+                ? textColor
+                : "text-catchup-gray-300"
           } ${
             selectedId === option.id
               ? selectedBorderColor
                 ? selectedBorderColor
                 : "border-catchup-blue-500"
               : borderColor
-              ? borderColor
-              : "border-catchup-gray-50"
-          } border-b-2 transition-all duration-300 p-3 cursor-pointer`}
+                ? borderColor
+                : "border-catchup-gray-50"
+          } border-b-2 transition-all duration-300 px-4 py-2 cursor-pointer`}
           onClick={() => {
             handleSelectOnClick(option.id);
           }}

package/src/components/tabs/SelectionTabPill.tsx

@@ -0,0 +1,31 @@
+import { ISelectionTabPillProps } from "../../properties/TabProperties";
+
+const SelectionTabPill = ({
+  optionList,
+  selectedId,
+  handleSelectOnClick,
+  selectedClassName,
+  unselectedClassName,
+}: ISelectionTabPillProps) => {
+  return (
+    <div className="flex flex-wrap items-center gap-3 my-2">
+      {optionList.map((option: any, index: number) => (
+        <button
+          key={index}
+          onClick={() => handleSelectOnClick(option.id)}
+          className={`px-4 py-2 rounded-catchup-full transition-all duration-200 cursor-pointer ${
+            selectedId === option.id
+              ? selectedClassName ||
+                "bg-catchup-blue text-catchup-white shadow-card"
+              : unselectedClassName ||
+                "bg-catchup-blue-100 text-catchup-blue-800 hover:bg-catchup-blue-200"
+          }`}
+        >
+          <span className="text-base font-semibold">{option.title}</span>
+        </button>
+      ))}
+    </div>
+  );
+};
+
+export default SelectionTabPill;

package/src/index.ts

@@ -53,6 +53,7 @@ export { default as SelectionCheckbox } from "./components/boxes/SelectionCheckb
 
 export { default as SelectionTab } from "./components/tabs/SelectionTab";
 export { default as SelectionTabFill } from "./components/tabs/SelectionTabFill";
+export { default as SelectionTabPill } from "./components/tabs/SelectionTabPill";
 
 export { default as AmberLabel } from "./components/labels/AmberLabel";
 export { default as TealLabel } from "./components/labels/TealLabel";

package/src/properties/TabProperties.ts

@@ -13,3 +13,11 @@ export interface ISelectedTabFillProps {
   selectedId: any;
   handleSelectOnClick: (e: any) => void;
 }
+
+export interface ISelectionTabPillProps {
+  optionList: any;
+  selectedId: any;
+  handleSelectOnClick: (e: any) => void;
+  selectedClassName?: string;
+  unselectedClassName?: string;
+}

package/src/utilization/ReportUtilization.ts

@@ -135,15 +135,17 @@ export const constructOutcomeActivityScoreList = (data: any) => {
       : categoryData.categoryDTO.name;
 
     if (categoryData.subCategoryActivityAnswerDTOList.length === 0) {
+      const scores = categoryData.activityScoreList ||
+        (categoryData.activityScoreDTOSet ? Array.from(categoryData.activityScoreDTOSet) : []);
       const outcomeActivityScore = {
         code: categoryData.categoryDTO.code,
         name: categoryData.categoryDTO.name,
-        count: categoryData.activityScoreDTOSet.length,
+        count: scores.length,
         score: 0,
         timeSpent: 0,
       };
 
-      categoryData.activityScoreDTOSet.forEach((activity: any) => {
+      scores.forEach((activity: any) => {
         outcomeActivityScore.score += activity.score;
         outcomeActivityScore.timeSpent += activity.timeSpent;
       });