Implement multi-color progress bar component

The build and test passed with no errors. The multi-color progress
bar c

**Implementation summary:** -
**[Omni/Jr/Web.hs](file:///home/ben/omni/Omni/Jr/Web.hs#L234-L275)**: -
**[Omni/Jr/Web/Style.hs](file:///home/ben/omni/Omni/Jr/Web/Style.hs#L3

The progress bar is used on the dashboard (line 324 in Web.hs)
to visual

Task-Id: t-155.3

1 files changed, 45 insertions, 0 deletions

diff --git a/Omni/Jr/Web.hs b/Omni/Jr/Web.hs
index 72de7db..d3130ce 100644
--- a/Omni/Jr/Web.hs
+++ b/Omni/Jr/Web.hs
@@ -231,6 +231,49 @@ statusBadge status =
         TaskCore.Done -> ("badge badge-done", "Done")
    in Lucid.span_ [Lucid.class_ cls] label
 
+multiColorProgressBar :: (Monad m) => TaskCore.TaskStats -> Lucid.HtmlT m ()
+multiColorProgressBar stats =
+  let total = TaskCore.totalTasks stats
+      doneCount = TaskCore.doneTasks stats
+      inProgressCount = TaskCore.inProgressTasks stats
+      openCount = TaskCore.openTasks stats + TaskCore.reviewTasks stats + TaskCore.approvedTasks stats
+      donePct = if total == 0 then 0 else (doneCount * 100) `div` total
+      inProgressPct = if total == 0 then 0 else (inProgressCount * 100) `div` total
+      openPct = if total == 0 then 0 else (openCount * 100) `div` total
+   in Lucid.div_ [Lucid.class_ "multi-progress-container"] <| do
+        Lucid.div_ [Lucid.class_ "multi-progress-bar"] <| do
+          when (donePct > 0)
+            <| Lucid.div_
+              [ Lucid.class_ "multi-progress-segment progress-done",
+                Lucid.style_ ("width: " <> tshow donePct <> "%"),
+                Lucid.title_ (tshow doneCount <> " done")
+              ]
+              ""
+          when (inProgressPct > 0)
+            <| Lucid.div_
+              [ Lucid.class_ "multi-progress-segment progress-inprogress",
+                Lucid.style_ ("width: " <> tshow inProgressPct <> "%"),
+                Lucid.title_ (tshow inProgressCount <> " in progress")
+              ]
+              ""
+          when (openPct > 0)
+            <| Lucid.div_
+              [ Lucid.class_ "multi-progress-segment progress-open",
+                Lucid.style_ ("width: " <> tshow openPct <> "%"),
+                Lucid.title_ (tshow openCount <> " open")
+              ]
+              ""
+        Lucid.div_ [Lucid.class_ "progress-legend"] <| do
+          Lucid.span_ [Lucid.class_ "legend-item"] <| do
+            Lucid.span_ [Lucid.class_ "legend-dot legend-done"] ""
+            Lucid.toHtml ("Done " <> tshow doneCount)
+          Lucid.span_ [Lucid.class_ "legend-item"] <| do
+            Lucid.span_ [Lucid.class_ "legend-dot legend-inprogress"] ""
+            Lucid.toHtml ("In Progress " <> tshow inProgressCount)
+          Lucid.span_ [Lucid.class_ "legend-item"] <| do
+            Lucid.span_ [Lucid.class_ "legend-dot legend-open"] ""
+            Lucid.toHtml ("Open " <> tshow openCount)
+
 statusBadgeWithForm :: (Monad m) => TaskCore.Status -> Text -> Lucid.HtmlT m ()
 statusBadgeWithForm status tid =
   Lucid.div_ [Lucid.id_ "status-badge-container", Lucid.class_ "status-badge-container"] <| do
@@ -278,6 +321,7 @@ instance Lucid.ToHtml HomePage where
           Lucid.h1_ "Jr Dashboard"
 
           Lucid.h2_ "Task Status"
+          multiColorProgressBar stats
           Lucid.div_ [Lucid.class_ "stats-grid"] <| do
             statCard "Open" (TaskCore.openTasks stats) "badge-open" "/tasks?status=Open"
             statCard "In Progress" (TaskCore.inProgressTasks stats) "badge-inprogress" "/tasks?status=InProgress"
@@ -979,6 +1023,7 @@ instance Lucid.ToHtml StatsPage where
               Lucid.a_ [Lucid.href_ "/stats", Lucid.class_ "clear-btn"] "Clear"
 
           Lucid.h2_ "By Status"
+          multiColorProgressBar stats
           Lucid.div_ [Lucid.class_ "stats-grid"] <| do
             statCard "Open" (TaskCore.openTasks stats) (TaskCore.totalTasks stats)
             statCard "In Progress" (TaskCore.inProgressTasks stats) (TaskCore.totalTasks stats)