💄 Update bottom bar styling

Author: karlosos

src/app/features/TimeEntries/TimeEntriesList/TimeEntriesList.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { EmptyState } from "./EmptyState";
 import { useAppSelector } from "../../../hooks";
-import { formatElapsedTime } from "../../../utils";
+import { formatElapsedTime, hoursToMs } from "../../../utils";
 import { GroupedTimeEntryRow } from "./GroupedTimeEntryRow";
 import {
   selectTimeEntriesGroupedByDate,
@@ -88,15 +88,11 @@ function DayHeader({
         <span className="mr-2 text-lg font-semibold text-neutral-700 opacity-50">
           {formatElapsedTime(elapsedTimePerDay)}
         </span>
-
-        <div className="flex items-center text-xs font-semibold">
-          <span className="rounded rounded-r-none border border-neutral-500 bg-neutral-500 pl-2 pr-1 text-white">
-            Logged
-          </span>
-          <span className="flex  items-center rounded rounded-l-none  border bg-neutral-100 pl-1 pr-2  text-neutral-700 opacity-50">
-            {formatElapsedTime(reportedTimePerDay)}
-          </span>
-        </div>
+        <LoggedTimeBadge
+          label="Logged"
+          reportedTimePerDay={reportedTimePerDay}
+          targetHours={6}
+        />
       </div>
     );
   } else {
@@ -144,3 +140,51 @@ const PaginationButtons = ({
     </div>
   );
 };
+
+// TODO: move to separate file
+export const LoggedTimeBadge = ({
+  label,
+  reportedTimePerDay,
+  targetHours,
+}: {
+  label: string;
+  targetHours: number;
+  reportedTimePerDay: number;
+}) => {
+  const percentage = (reportedTimePerDay / hoursToMs(targetHours)) * 100;
+
+  const colors = {
+    low: "#ba4244",
+    medium: "#d2812c",
+    high: "#59b173",
+    beyond: "#546cc0",
+  };
+
+  return (
+    <div className="relative" title={`${percentage.toFixed(0)}% of target`}>
+      <div className="flex items-center text-xs font-semibold">
+        <span className="rounded rounded-r-none rounded-b-none border border-neutral-500 bg-neutral-500 pl-2 pr-1 text-white">
+          {label}
+        </span>
+        <span className="flex  items-center rounded rounded-l-none  rounded-b-none border bg-neutral-100 pl-1 pr-2  text-neutral-700 opacity-50">
+          {formatElapsedTime(reportedTimePerDay)}
+        </span>
+      </div>
+      <div className="absolute w-[100%] h-1 rounded-t-none rounded border-0 border-neutral-200 bg-neutral-100">
+        <div
+          className={`h-full rounded rounded-t-none`}
+          style={{
+            width: `${Math.min(percentage, 100)}%`,
+            backgroundColor:
+              percentage < 50
+                ? colors.low
+                : percentage < 80
+                  ? colors.medium
+                  : colors.high,
+            borderBottomRightRadius: percentage < 100 ? "0px" : "4px",
+          }}
+        />
+      </div>
+    </div>
+  );
+};

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

@@ -1,11 +1,12 @@
-import { CircleSlash2, Frown, Laugh, Meh, Smile } from "lucide-react";
+import { Frown, Laugh, Meh, Smile } from "lucide-react";
 import { useAppSelector } from "../../../../hooks";
 import {
   selectLast7DaysReportedTime,
   selectTodayReportedTime,
 } from "../../store";
-import { formatElapsedTimeHM, msToHours } from "../../../../utils";
+import { msToHours } from "../../../../utils";
 import { RootState } from "../../../../store/store";
+import { LoggedTimeBadge } from "../../TimeEntriesList";
 
 const WORKING_DAYS = 5;
 
@@ -27,24 +28,20 @@ export const TimeReportedStats = () => {
   return (
     <div className="flex gap-3 mobile:flex-col ml-auto">
       <div className="flex gap-1 items-center">
-        <div className="text-[9px] bg-neutral-300 text-neutral-600 rounded px-1 leading-none py-0.5 font-semibold">
-          TODAY
-        </div>
-        <div>
-          <span className="font-medium text-neutral-600">
-            {formatElapsedTimeHM(todayReportedTime)}
-          </span>
-          /<span className="text-[11px] text-neutral-600">06:00</span>
-        </div>
+        <LoggedTimeBadge
+          label="Today"
+          reportedTimePerDay={todayReportedTime}
+          // TODO: move constant to settings
+          targetHours={6}
+        />
       </div>
       <div className="flex gap-1 items-center">
-        <div className="text-[9px] bg-neutral-300 text-neutral-600 rounded px-1 leading-none py-0.5 font-semibold">
-          WEEK
-        </div>
-        <CircleSlash2 className="w-2 h-2 text-neutral-600" />
-        <span className="text-neutral-600 font-medium">
-          {formatElapsedTimeHM(last7DaysReportedTime / WORKING_DAYS)}
-        </span>
+        <LoggedTimeBadge
+          label="Week"
+          reportedTimePerDay={last7DaysReportedTime}
+          targetHours={6 * 5}
+        />
+        {/* // TODO: refactor this icon logic */}
         {last7DaysStatus === "BAD" && (
           <Frown className="w-3 h-3 text-red-600" />
         )}

src/app/utils.ts

@@ -28,6 +28,10 @@ export const msToHours = (ms: number) => {
   return ms / (1000 * 60 * 60);
 };
 
+export const hoursToMs = (hours: number) => {
+  return hours * 60 * 60 * 1000;
+};
+
 export const parseElapsedTime = (timeString: string): number => {
   const [hours, minutes, seconds] = timeString.split(":").map(Number);
   const totalMilliseconds = (hours * 60 * 60 + minutes * 60 + seconds) * 1000;