work session list changed to table

app/views/task/view.pug

@@ -51,16 +51,32 @@ block view-content
                 small.uk-text-muted Week of #{dayjs(weekStartDate).format('MMMM DD')}
 
               if Array.isArray(sessions) && (sessions.length > 0)
-                ul.uk-list.uk-list-divider
+                -
-                  each session in sessions
+                  var totalTimeWorked = 0;
-                    li
+                  var totalBillable = 0;
-                      a(href=`/task/${task._id}/session/${session._id}`,
+
-                        onclick="return dtp.app.performSessionNavigation(event);",
+                table.uk-table.uk-table-small.uk-table-divider
-                      ).uk-link-reset.uk-display-block
+                  thead
-                        div(uk-grid)
+                    tr.uk-background-secondary
-                          .uk-width-expand= dayjs(session.created).format('dddd [at] h:mm a')
+                      th.uk-table-expand Start Time
-                          .uk-width-auto= numeral(session.duration).format('HH:MM:SS')
+                      th.uk-text-nowrap.uk-table-shrink Tracked Time
-                          .uk-width-auto= numeral(session.hourlyRate * (session.duration / 60 / 60)).format('$0,00.00')
+                      th.uk-text-nowrap.uk-table-shrink Billable
+                  tbody
+                    each session in sessions
+                      -
+                        totalTimeWorked += session.duration;
+                        totalBillable += session.hourlyRate * (session.duration / 3600);
+                      tr
+                        td.uk-table-expand
+                          a(href=`/task/${task._id}/session/${session._id}`,
+                            onclick="return dtp.app.performSessionNavigation(event);",
+                          ).uk-link-reset.uk-display-block= dayjs(session.created).format('dddd [at] h:mm a')
+                        td.uk-text-right.uk-text-nowrap.uk-table-shrink= numeral(session.duration).format('HH:MM:SS')
+                        td.uk-text-right.uk-text-nowrap.uk-table-shrink= numeral(session.hourlyRate * (session.duration / 3600)).format('$0,00.00')
+                    tr.uk-background-secondary
+                      td.uk-table-expand TOTALS
+                      td.uk-text-right.uk-text-nowrap.uk-table-shrink= numeral(totalTimeWorked).format('HH:MM:SS')
+                      td.uk-text-right.uk-text-nowrap.uk-table-shrink #{numeral(totalBillable).format('$0,0.00')}
               else
                 div No work sessions