catchup-library-web 1.12.14 → 1.12.16

package/package.json

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

package/src/components/bars/ProgressBar.tsx

@@ -0,0 +1,85 @@
+import { IProgressBarProperties } from "../../properties/BarProperties";
+
+const ProgressBar = ({
+  title,
+  showRemainingTime,
+  totalTimeInSeconds,
+  remainingTimeInSeconds,
+  color,
+  borderColor,
+  height,
+}: IProgressBarProperties) => {
+  const retrieveMinutes = () => {
+    return Math.floor(remainingTimeInSeconds / 60);
+  };
+
+  const retrieveSeconds = (minutes: number) => {
+    const minuteInSeconds = minutes * 60;
+    return Math.floor(remainingTimeInSeconds - minuteInSeconds);
+  };
+
+  const calculatePercentage = () => {
+    if (remainingTimeInSeconds < 0) {
+      return (totalTimeInSeconds / totalTimeInSeconds) * 100;
+    } else {
+      return (
+        ((totalTimeInSeconds - remainingTimeInSeconds) / totalTimeInSeconds) *
+        100
+      );
+    }
+  };
+
+  const currentMinutes = retrieveMinutes();
+  const currentSeconds = retrieveSeconds(currentMinutes);
+
+  return (
+    <div className="relative w-full ">
+      <div className="">
+        {title ? (
+          <div className="absolute top-2 left-6">
+            <span className="text-xl">{title}</span>
+          </div>
+        ) : null}
+
+        {showRemainingTime ? (
+          <div className="absolute top-2 right-6">
+            <span className="flex flex-row text-xl">
+              <p className="mx-1">
+                {currentMinutes < 0
+                  ? `00`
+                  : currentMinutes < 10
+                  ? `0${currentMinutes}`
+                  : currentMinutes}{" "}
+              </p>
+              :
+              <p className="mx-1">
+                {currentSeconds < 0
+                  ? `00`
+                  : currentSeconds < 10
+                  ? `0${currentSeconds}`
+                  : currentSeconds}{" "}
+              </p>
+            </span>
+          </div>
+        ) : null}
+
+        <div
+          className={`${
+            borderColor ? borderColor : "border-catchup-red"
+          } border rounded-catchup-full`}
+        >
+          <div className={`w-full  ${height ? height : ""} `}>
+            <div
+              className={`rounded-catchup-full ${
+                color ? color : "bg-catchup-red"
+              } ${height ? height : "h-catchup-quicktivity"}`}
+              style={{ width: `${calculatePercentage()}%` }}
+            ></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProgressBar;

package/src/components/bars/ScoreBar.tsx

@@ -0,0 +1,37 @@
+import { IScoreBarProperties } from "../../properties/BarProperties";
+
+const ScoreBar = ({ score, className }: IScoreBarProperties) => {
+  const getProgressBarColor = (score: number) => {
+    if (score >= 70) return "bg-catchup-green";
+    if (score >= 30) return "bg-catchup-orange";
+    return "bg-catchup-red";
+  };
+
+  const getTextColor = (score: number) => {
+    if (score >= 70) return "text-catchup-hover-green";
+    if (score >= 30) return "text-catchup-orange";
+    return "text-catchup-red";
+  };
+
+  return (
+    <div className={`flex items-center gap-2 ${className}`}>
+      <div className="flex-1 h-5 bg-catchup-gray-100 rounded-catchup-full overflow-hidden">
+        <div
+          className={`h-full rounded-catchup-full transition-all duration-300 ${getProgressBarColor(
+            score
+          )}`}
+          style={{ width: `${score}%` }}
+        />
+      </div>
+      <span
+        className={`min-w-[35px] font-semibold text-right ${getTextColor(
+          score
+        )}`}
+      >
+        {score}%
+      </span>
+    </div>
+  );
+};
+
+export default ScoreBar;

package/src/components/bars/TimedProgressBar.tsx

@@ -0,0 +1,58 @@
+import { useEffect, useState } from "react";
+import ProgressBar from "./ProgressBar";
+import { ITimedProgressBarProperties } from "../../properties/BarProperties";
+
+const TimedProgressBar = ({
+  title,
+  startTimer,
+  showRemainingTime,
+  totalTimeInSeconds,
+  remainingTimeInSeconds,
+  handleOnTimerEnds,
+}: ITimedProgressBarProperties) => {
+  const [timerRemainingTimeInSeconds, setTimerRemainingTimeInSeconds] =
+    useState(remainingTimeInSeconds);
+  const [timerIntervalId, setTimerIntervalId] = useState<number | null>(null);
+  let timerRemainingTimeInSecondsValue: number = 999999999999999;
+
+  useEffect(() => {
+    timerRemainingTimeInSecondsValue = remainingTimeInSeconds;
+    setTimerRemainingTimeInSeconds(timerRemainingTimeInSeconds);
+    if (timerIntervalId) {
+      clearInterval(timerIntervalId);
+    }
+    if (startTimer) {
+      const currentTimerIntervalId = setInterval(() => {
+        timerRemainingTimeInSecondsValue =
+          timerRemainingTimeInSecondsValue - 0.05;
+        setTimerRemainingTimeInSeconds(timerRemainingTimeInSecondsValue);
+      }, 50);
+      setTimerIntervalId(currentTimerIntervalId);
+    } else {
+      if (timerIntervalId) {
+        clearInterval(timerIntervalId);
+        setTimerIntervalId(null);
+      }
+    }
+  }, [remainingTimeInSeconds, startTimer]);
+
+  useEffect(() => {
+    if (timerRemainingTimeInSeconds < 0) {
+      if (timerIntervalId) {
+        clearInterval(timerIntervalId);
+      }
+      handleOnTimerEnds(startTimer);
+    }
+  }, [timerRemainingTimeInSeconds]);
+
+  return (
+    <ProgressBar
+      title={title}
+      showRemainingTime={showRemainingTime}
+      remainingTimeInSeconds={timerRemainingTimeInSeconds}
+      totalTimeInSeconds={totalTimeInSeconds}
+    />
+  );
+};
+
+export default TimedProgressBar;

package/src/index.ts

@@ -1,3 +1,7 @@
+export { default as ProgressBar } from "./components/bars/ProgressBar";
+export { default as TimedProgressBar } from "./components/bars/TimedProgressBar";
+export { default as ScoreBar } from "./components/bars/ScoreBar";
+
 export { default as PrimaryButton } from "./components/buttons/PrimaryButton";
 export { default as SecondaryButton } from "./components/buttons/SecondaryButton";
 export { default as CreateButton } from "./components/buttons/CreateButton";

package/src/properties/BarProperties.ts

@@ -0,0 +1,23 @@
+export interface IProgressBarProperties {
+  title: string;
+  showRemainingTime: boolean;
+  totalTimeInSeconds: number;
+  remainingTimeInSeconds: number;
+  color?: string;
+  borderColor?: string;
+  height?: string;
+}
+
+export interface ITimedProgressBarProperties {
+  title: string;
+  startTimer: boolean;
+  showRemainingTime: boolean;
+  totalTimeInSeconds: number;
+  remainingTimeInSeconds: number;
+  handleOnTimerEnds: (startTimer: boolean) => void;
+}
+
+export interface IScoreBarProperties {
+  score: number;
+  className?: string;
+}

package/src/utilization/DateUtilization.ts

@@ -123,3 +123,48 @@ export const constructWeekName = (
     }
   }
 };
+
+export const retrieveTimeFilterOptionList = () => {
+  return [
+    {
+      text: i18n.t("all_time"),
+      value: "all",
+    },
+    {
+      text: i18n.t("today"),
+      value: "today",
+    },
+    {
+      text: i18n.t("yesterday"),
+      value: "yesterday",
+    },
+    {
+      text: i18n.t("this_week"),
+      value: "this_week",
+    },
+    {
+      text: i18n.t("last_week"),
+      value: "last_week",
+    },
+    {
+      text: i18n.t("this_month"),
+      value: "this_month",
+    },
+    {
+      text: i18n.t("last_month"),
+      value: "last_month",
+    },
+    {
+      text: i18n.t("last_7_days"),
+      value: "last_7_days",
+    },
+    {
+      text: i18n.t("last_30_days"),
+      value: "last_30_days",
+    },
+    {
+      text: i18n.t("last_90_days"),
+      value: "last_90_days",
+    },
+  ];
+};