added real-time billable display and removed unnecessary things

app/views/client/project/view.pug

@@ -11,7 +11,8 @@ block view-content
           .uk-width-expand
             h1.uk-margin-remove= project.name
           .uk-width-auto
-            .uk-text-bold= client.name
+            .uk-text-bold
+              a(href=`/client/${client._id}`).uk-link-reset= client.name
             .uk-text-small #{numeral(project.hourlyRate).format('$0,0.00')}/hr
 
         if project.description

app/views/task/view.pug

@@ -28,7 +28,7 @@ block view-content
                       .uk-text-success Finished task
 
                 if task.status === 'active'
-                  .uk-width-auto
+                  .uk-width-auto.uk-text-right
                     .pretty.p-switch.p-slim
                       input(
                         id="active-toggle",
@@ -39,9 +39,8 @@ block view-content
                       .state.p-success
                         label(for="active-toggle")
                           span.sr-only Active
-                    #current-session-duration(
+                    #current-session-duration.uk-text-small.no-select= numeral(0).format('HH:MM:SS')
-                      uk-tooltip="Current session duration (estimated)",
+                    #current-session-billable.uk-text-small.no-select $0.00
-                    ).uk-text-small= numeral(0).format('HH:MM:SS')
 
             .uk-margin-medium
               h3 Work Sessions

client/js/time-tracker-client.js

@@ -36,6 +36,7 @@ export class TimeTrackerApp extends DtpApp {
 
     this.currentSessionStartTime = null;
     this.currentSessionDuration = document.querySelector('#current-session-duration');
+    this.currentSessionBillable = document.querySelector('#current-session-billable');
 
     window.addEventListener('dtp-load', this.onDtpLoad.bind(this));
     window.addEventListener('focus', this.onWindowFocus.bind(this));
@@ -412,6 +413,9 @@ export class TimeTrackerApp extends DtpApp {
       await this.stopScreenCapture();
       this.closeTaskSession();
     } catch (error) {
+      if (target.checked) {
+        target.checked = false;
+      }
       this.log.error('taskActivityToggle', 'failed to start task work session', { error });
       UIkit.modal.alert(`Failed to start work session: ${error.message}`);
     }
@@ -468,7 +472,6 @@ export class TimeTrackerApp extends DtpApp {
   }
 
   async startScreenCapture ( ) {
-    try {
     this.captureStream = await navigator.mediaDevices.getDisplayMedia({ video: true, audio: false });
     this.capturePreview.srcObject = this.captureStream;
     this.capturePreview.play();
@@ -484,11 +487,6 @@ export class TimeTrackerApp extends DtpApp {
     this.captureCanvas.width = constraints.width;
     this.captureCanvas.height = constraints.height;
     this.captureContext = this.captureCanvas.getContext('2d');
-    } catch (error) {
-      this.log.error('startTaskSession', 'failed to start task work session', { error });
-      UIkit.modal.alert(`Failed to start task work session: ${error.message}`);
-      throw new Error('failed to start screen capture', { cause: error });
-    }    
   }
 
   async stopScreenCapture ( ) {
@@ -514,6 +512,7 @@ export class TimeTrackerApp extends DtpApp {
     const NOW = new Date();
     const duration = dayjs(NOW).diff(this.currentSessionStartTime, 'second');
     this.currentSessionDuration.textContent = numeral(duration).format('HH:MM:SS');
+    this.currentSessionBillable.textContent = numeral(this.taskSession.hourlyRate * (duration / 60 / 60)).format('$0,0.00');
   }
 
   async captureScreenshot ( ) {