✨ Add current target bar on LoggedTimeBadge

Author: karlosos

src/app/features/TimeEntries/components/LoggedStats/LoggedStats.tsx

@@ -17,12 +17,16 @@ export const TimeReportedStats = () => {
   // TODO: this should calculate average reported time but only for days which has entries
   const thisWeekReportedTime = useAppSelector(selectThisWeekReportedTime);
 
+  const dayOfWeek = (new Date().getDay() + 6) % 7;
+  const weekTargetHoursToDate = 6 * (dayOfWeek + 1);
+
   // TODO: use constant from settings
   const todayPercentage = (todayReportedTime / hoursToMs(6)) * 100;
   const todayGrade = calculateGrade(todayPercentage);
 
   // TODO: use constant from settings
-  const weekPercentage = (thisWeekReportedTime / hoursToMs(6 * 5)) * 100;
+  const weekPercentage =
+    (thisWeekReportedTime / hoursToMs(weekTargetHoursToDate)) * 100;
   const weekGrade = calculateGrade(weekPercentage);
 
   const isAdjustableTimeReportingEnabled = useAppSelector(
@@ -51,6 +55,7 @@ export const TimeReportedStats = () => {
           reportedTimePerDay={thisWeekReportedTime}
           // TODO: use constant from settings
           targetHours={6 * 5}
+          targetHoursToDate={weekTargetHoursToDate}
         />
         <GradeIcon grade={weekGrade} />
       </div>

src/app/features/TimeEntries/components/LoggedTimeBadge/LoggedTimeBadge.tsx

@@ -4,13 +4,18 @@ export const LoggedTimeBadge = ({
   label,
   reportedTimePerDay,
   targetHours,
+  targetHoursToDate,
 }: {
   label: string;
   targetHours: number;
   reportedTimePerDay: number;
+  targetHoursToDate?: number; // used for showing target as a marker on the progress bar
 }) => {
   const percentage = (reportedTimePerDay / hoursToMs(targetHours)) * 100;
-  const grade = calculateGrade(percentage);
+  const percentageToDate = targetHoursToDate
+    ? (reportedTimePerDay / hoursToMs(targetHoursToDate)) * 100
+    : undefined;
+  const grade = calculateGrade(percentageToDate ?? percentage);
 
   const colors = {
     bad: "#ba4244",
@@ -31,6 +36,9 @@ export const LoggedTimeBadge = ({
     case "GOOD":
       backgroundColor = colors.good;
       break;
+    case "GREAT":
+      backgroundColor = colors.good;
+      break;
   }
 
   return (
@@ -53,6 +61,14 @@ export const LoggedTimeBadge = ({
           }}
         />
       </div>
+      {targetHoursToDate && (
+        <div
+          className="w-[2px] h-1 bg-black absolute"
+          style={{
+            left: `${(targetHoursToDate / targetHours) * 100}%`,
+          }}
+        />
+      )}
     </div>
   );
 };