From 19515e13936ee11023abee95b084eb990b22b150 Mon Sep 17 00:00:00 2001
From: Ryan Maffit <rmaffit@sancsoft.com>
Date: Fri, 21 Jun 2024 21:36:44 +0000
Subject: [PATCH 01/25] WIP staff dashboard

---
 src/angular/hq/src/app/layout.component.html  |  4 +-
 .../staff-dashboard/get-dashboard-time-v1.ts  | 11 ++-
 .../staff-dashboard.component.html            | 98 ++++++++++++++++++-
 .../staff-dashboard.component.ts              |  6 +-
 .../staff-dashboard.service.ts                | 22 ++++-
 .../HQ.Abstractions/DateOnlyExtensions.cs     | 22 +++++
 .../Times/GetDashboardTimeV1.cs               | 13 ++-
 .../HQ.Server/Services/TimeEntryServiceV1.cs  | 61 ++++++++----
 8 files changed, 203 insertions(+), 34 deletions(-)

diff --git a/src/angular/hq/src/app/layout.component.html b/src/angular/hq/src/app/layout.component.html
index 2d2c54da..0302ea66 100644
--- a/src/angular/hq/src/app/layout.component.html
+++ b/src/angular/hq/src/app/layout.component.html
@@ -85,9 +85,9 @@
     </div>
     <div *ngIf="HQRole.Staff | inRole | async" class="min-w-[100px]">
       <a
-        routerLink="/my-dashboard"
+        routerLink="/dashboard"
         routerLinkActive="text-gray-100 border-b border-b-orange-500/100"
-        class="block text-center whitespace-nowrap text-nav-disabled border-b border-b-orange-500/0 px-3 py-1 cursor-not-allowed"
+        class="block text-center whitespace-nowrap text-gray-100 border-b border-b-orange-500/0 px-3 py-1 hover:text-gray-200"
         >My Dashboard</a
       >
     </div>
diff --git a/src/angular/hq/src/app/models/staff-dashboard/get-dashboard-time-v1.ts b/src/angular/hq/src/app/models/staff-dashboard/get-dashboard-time-v1.ts
index e7e47452..2ea7f384 100644
--- a/src/angular/hq/src/app/models/staff-dashboard/get-dashboard-time-v1.ts
+++ b/src/angular/hq/src/app/models/staff-dashboard/get-dashboard-time-v1.ts
@@ -3,11 +3,17 @@ import { Period } from '../../projects/project-create/project-create.component';
 export interface GetDashboardTimeV1Request {
   staffId: string;
   period: Period;
-  fromDate?: string | null;
-  toDate?: string | null;
+  date?: string;
+  search?: string | null;
 }
 
 export interface GetDashboardTimeV1Response {
+  totalHours: number;
+  billableHours: number;
+  startDate: string;
+  endDate: string;
+  previousDate: string;
+  nextDate: string;
   dates: GetDashboardTimeV1TimeForDate[];
   chargeCodes: GetDashboardTimeV1ChargeCode[];
   clients: GetDashboardTimeV1Client[];
@@ -20,6 +26,7 @@ export interface GetDashboardTimeV1TimeForDate {
 }
 
 export interface GetDashboardTimeV1TimeForDateTimes {
+  id: string;
   date: string;
   hours: number;
   notes: string | null;
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
index b6200847..b528137e 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
@@ -1,4 +1,94 @@
-<p>staff-dashboard works!</p>
-<pre>
-    {{ staffDashboardService.time$ | async | json }}
-</pre>
+<label class="block"
+  >Search
+  <input [formControl]="staffDashboardService.search" class="text-black" />
+</label>
+<label class="block"
+  >Period
+  <select [formControl]="staffDashboardService.period" class="text-black">
+    <option [ngValue]="Period.Today">Day</option>
+    <option [ngValue]="Period.Week">Week</option>
+  </select>
+</label>
+<label class="block"
+  >Date
+  <input
+    [formControl]="staffDashboardService.date"
+    type="date"
+    class="text-black"
+  />
+</label>
+
+@if (staffDashboardService.time$ | async; as dashboard) {
+  <label class="block"
+    >Date
+    <input
+      [value]="dashboard.endDate"
+      type="date"
+      class="text-black"
+      readonly
+    />
+  </label>
+  <button
+    type="button"
+    (click)="staffDashboardService.date.setValue(dashboard.previousDate)"
+  >
+    Previous
+  </button>
+  <button
+    type="button"
+    (click)="staffDashboardService.date.setValue(dashboard.nextDate)"
+  >
+    Next
+  </button>
+  <div>Total Hours: {{ dashboard.totalHours }}</div>
+  <div>Billable Hours: {{ dashboard.billableHours }}</div>
+  @for (date of dashboard.dates; track date.date) {
+    <h1 class="text-xl">{{ date.date }}</h1>
+    <table class="min-w-full border-spacing-0 border-separate">
+      <thead>
+        <tr class="text-left">
+          <th class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5">
+            Hrs
+          </th>
+          <th class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5">
+            Date
+          </th>
+          <th class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5">
+            Chrg Code
+          </th>
+          <th class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5">
+            Client
+          </th>
+          <th class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5">
+            Project
+          </th>
+          <th class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5">
+            Activity / Task
+          </th>
+          <th class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5">
+            Description
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        @for (time of date.times; track time.id) {
+          <tr class="even:bg-gray-850 odd:bg-black-alt">
+            <td class="border-b border-black py-2 pl-5">{{ time.hours }}</td>
+            <td class="border-b border-black py-2 pl-5">{{ time.date }}</td>
+            <td class="border-b border-black py-2 pl-5">
+              {{ time.chargeCodeId }}
+            </td>
+            <td class="border-b border-black py-2 pl-5">{{ time.clientId }}</td>
+            <td class="border-b border-black py-2 pl-5">
+              {{ time.projectId }}
+            </td>
+            <td class="border-b border-black py-2 pl-5">
+              {{ time.activityId ?? "" + time.task ?? "" }}
+            </td>
+            <td class="border-b border-black py-2 pl-5">{{ time.notes }}</td>
+          </tr>
+        }
+      </tbody>
+    </table>
+  }
+}
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts
index 88f27724..ac202e23 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts
@@ -1,14 +1,18 @@
 import { Component } from '@angular/core';
 import { StaffDashboardService } from './staff-dashboard.service';
 import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule } from '@angular/forms';
+import { Period } from '../models/times/get-time-v1';
 
 @Component({
   selector: 'hq-staff-dashboard',
   standalone: true,
-  imports: [CommonModule],
+  imports: [CommonModule, ReactiveFormsModule],
   providers: [StaffDashboardService],
   templateUrl: './staff-dashboard.component.html',
 })
 export class StaffDashboardComponent {
   constructor(public staffDashboardService: StaffDashboardService) {}
+
+  Period = Period;
 }
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.service.ts b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.service.ts
index 2af39fde..457388fe 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.service.ts
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.service.ts
@@ -3,7 +3,15 @@ import { FormControl } from '@angular/forms';
 import { Period } from '../projects/project-create/project-create.component';
 import { HQService } from '../services/hq.service';
 import { OidcSecurityService } from 'angular-auth-oidc-client';
-import { Observable, combineLatest, map, startWith, switchMap } from 'rxjs';
+import {
+  Observable,
+  combineLatest,
+  debounceTime,
+  map,
+  startWith,
+  switchMap,
+  tap,
+} from 'rxjs';
 import { GetDashboardTimeV1Response } from '../models/staff-dashboard/get-dashboard-time-v1';
 
 @Injectable({
@@ -12,7 +20,9 @@ import { GetDashboardTimeV1Response } from '../models/staff-dashboard/get-dashbo
 export class StaffDashboardService {
   search = new FormControl<string | null>(null);
   period = new FormControl<Period>(Period.Week, { nonNullable: true });
-  startDate = new FormControl<string | null>(null);
+  date = new FormControl<string>(new Date().toISOString().split('T')[0], {
+    nonNullable: true,
+  });
 
   time$: Observable<GetDashboardTimeV1Response>;
 
@@ -25,15 +35,23 @@ export class StaffDashboardService {
       map((t) => t.staff_id as string),
     );
 
+    const search$ = this.search.valueChanges.pipe(startWith(this.search.value));
     const period$ = this.period.valueChanges.pipe(startWith(this.period.value));
+    const date$ = this.date.valueChanges.pipe(startWith(this.date.value));
 
     const request$ = combineLatest({
       staffId: staffId$,
       period: period$,
+      search: search$,
+      date: date$,
     });
 
     this.time$ = request$.pipe(
+      debounceTime(250),
       switchMap((request) => this.hqService.getDashboardTimeV1(request)),
+      tap((response) =>
+        this.date.setValue(response.startDate, { emitEvent: false }),
+      ),
     );
   }
 }
diff --git a/src/dotnet/HQ.Abstractions/DateOnlyExtensions.cs b/src/dotnet/HQ.Abstractions/DateOnlyExtensions.cs
index df664a20..5844ca43 100644
--- a/src/dotnet/HQ.Abstractions/DateOnlyExtensions.cs
+++ b/src/dotnet/HQ.Abstractions/DateOnlyExtensions.cs
@@ -12,6 +12,28 @@ namespace HQ.Abstractions
 {
     public static class DateOnlyExtension
     {
+        public static DateOnly AddPeriod(this DateOnly forDate, Period period, int value)
+        {
+            switch (period)
+            {
+                case Period.Year:
+                    return forDate.AddYears(value);
+                case Period.Quarter:
+                    return forDate.AddMonths(value * 3);
+                case Period.Month:
+                    return forDate.AddMonths(value);
+                case Period.Today:
+                    return forDate.AddDays(value);
+                case Period.LastWeek:
+                    return forDate.AddDays(-7 + value * 7);
+                case Period.LastMonth:
+                    return forDate.AddMonths(-1 + value);
+                case Period.Week:
+                default:
+                    return forDate.AddDays(value * 7);
+            }
+        }
+
         public static DateOnly GetPeriodStartDate(this DateOnly forDate, Period period)
         {
             switch (period)
diff --git a/src/dotnet/HQ.Abstractions/Times/GetDashboardTimeV1.cs b/src/dotnet/HQ.Abstractions/Times/GetDashboardTimeV1.cs
index 1539b705..750954bb 100644
--- a/src/dotnet/HQ.Abstractions/Times/GetDashboardTimeV1.cs
+++ b/src/dotnet/HQ.Abstractions/Times/GetDashboardTimeV1.cs
@@ -7,13 +7,19 @@ public class GetDashboardTimeV1
     public class Request
     {
         public Guid StaffId { get; set; }
+        public DateOnly Date { get; set; }
         public Period Period { get; set; }
-        public DateOnly? FromDate { get; set; }
-        public DateOnly? ToDate { get; set; }
+        public string? Search { get; set; }
     }
 
     public class Response
     {
+        public decimal TotalHours { get; set; }
+        public decimal BillableHours { get; set; }
+        public DateOnly StartDate { get; set; }
+        public DateOnly EndDate { get; set; }
+        public DateOnly PreviousDate { get; set; }
+        public DateOnly NextDate { get; set; }
         public List<TimeForDate> Dates { get; set; } = new();
         public List<ChargeCode> ChargeCodes { get; set; } = new();
         public List<Client> Clients { get; set; } = new();
@@ -39,12 +45,12 @@ public class Project
         public Guid Id { get; set; }
         public Guid ClientId { get; set; }
         public string Name { get; set; } = null!;
+        public List<Activities> Activities { get; set; } = new();
     }
 
     public class Activities
     {
         public Guid Id { get; set; }
-        public Guid ProjectId { get; set; }
         public string Name { get; set; } = null!;
     }
 
@@ -56,6 +62,7 @@ public class TimeForDate
 
     public class TimeEntry
     {
+        public Guid Id { get; set; }
         public DateOnly Date { get; set; }
         public decimal Hours { get; set; }
         public string? Notes { get; set; }
diff --git a/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs b/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs
index c2a7aa71..aafc688f 100644
--- a/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs
+++ b/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs
@@ -451,25 +451,32 @@ public TimeEntryServiceV1(HQDbContext context)
 
         public async Task<Result<GetDashboardTimeV1.Response>> GetDashboardTimeV1(GetDashboardTimeV1.Request request, CancellationToken ct = default)
         {
-            if (request.Period == Period.Custom)
-            {
-                if (!request.FromDate.HasValue || !request.ToDate.HasValue || request.FromDate.Value > request.ToDate.Value)
-                {
-                    return Result.Fail("Invalid date range.");
-                }
-            }
-            else
+            var startDate = request.Date.GetPeriodStartDate(request.Period);
+            var endDate = request.Date.GetPeriodEndDate(request.Period);
+            var previousDate = startDate.AddPeriod(request.Period, -1);
+            var nextDate = startDate.AddPeriod(request.Period, 1);
+
+            var timesQuery = _context.Times
+                .AsNoTracking()
+                .Where(t => t.StaffId == request.StaffId && t.Date >= startDate && t.Date <= endDate)
+                .AsQueryable();
+
+            if (!String.IsNullOrEmpty(request.Search))
             {
-                request.FromDate = DateOnly.FromDateTime(DateTime.Today).GetPeriodStartDate(request.Period);
-                request.ToDate = DateOnly.FromDateTime(DateTime.Today).GetPeriodEndDate(request.Period);
+                timesQuery = timesQuery.Where(t =>
+                    t.ChargeCode.Code.ToLower().Contains(request.Search.ToLower()) ||
+                    t.ChargeCode.Project!.Client.Name.ToLower().Contains(request.Search.ToLower()) ||
+                    t.ChargeCode.Project!.Name.ToLower().Contains(request.Search.ToLower()) ||
+                    t.Activity!.Name.ToLower().Contains(request.Search.ToLower()) ||
+                    t.Task!.ToLower().Contains(request.Search.ToLower()) ||
+                    t.Notes!.ToLower().Contains(request.Search.ToLower())
+                );
             }
 
-
-            var times = await _context.Times
-                .Where(t => t.StaffId == request.StaffId && t.Date >= request.FromDate && t.Date <= request.ToDate)
-                .OrderByDescending(t => t.CreatedAt)
+            var times = await timesQuery.OrderByDescending(t => t.CreatedAt)
                 .Select(t => new GetDashboardTimeV1.TimeEntry()
                 {
+                    Id = t.Id,
                     Date = t.Date,
                     ChargeCodeId = t.ChargeCodeId,
                     ActivityId = t.ActivityId,
@@ -482,8 +489,8 @@ public TimeEntryServiceV1(HQDbContext context)
                 .GroupBy(t => t.Date)
                 .ToDictionaryAsync(t => t.Key, t => t.ToList());
 
-
             var chargeCodes = await _context.ChargeCodes
+                .AsNoTracking()
                 .OrderBy(t => t.Code)
                 .Select(t => new GetDashboardTimeV1.ChargeCode()
                 {
@@ -496,6 +503,7 @@ public TimeEntryServiceV1(HQDbContext context)
 
 
             var clients = await _context.Clients
+                .AsNoTracking()
                 .OrderBy(t => t.Name)
                 .Select(t => new GetDashboardTimeV1.Client()
                 {
@@ -506,12 +514,19 @@ public TimeEntryServiceV1(HQDbContext context)
 
 
             var projects = await _context.Projects
+                .AsNoTracking()
                 .OrderBy(t => t.Name)
+                .Include(t => t.Activities)
                 .Select(t => new GetDashboardTimeV1.Project()
                 {
                     Id = t.Id,
                     Name = t.Name,
-                    ClientId = t.ClientId
+                    ClientId = t.ClientId,
+                    Activities = t.Activities.Select(x => new Abstractions.Times.GetDashboardTimeV1.Activities()
+                    {
+                        Id = x.Id,
+                        Name = x.Name
+                    }).ToList()
                 })
                 .ToListAsync(ct);
 
@@ -520,8 +535,14 @@ public TimeEntryServiceV1(HQDbContext context)
             response.ChargeCodes = chargeCodes;
             response.Clients = clients;
             response.Projects = projects;
-
-            DateOnly date = request.ToDate.Value;
+            response.StartDate = startDate;
+            response.EndDate = endDate;
+            response.TotalHours = await timesQuery.SumAsync(t => t.Hours);
+            response.BillableHours = await timesQuery.Where(t => t.ChargeCode.Billable).SumAsync(t => t.Hours);
+            response.NextDate = nextDate;
+            response.PreviousDate = previousDate;
+
+            DateOnly date = endDate;
             do
             {
                 var timeForDate = new GetDashboardTimeV1.TimeForDate();
@@ -531,14 +552,14 @@ public TimeEntryServiceV1(HQDbContext context)
                     timeForDate.Times = times[date];
                 }
 
-
                 response.Dates.Add(timeForDate);
                 date = date.AddDays(-1);
             }
-            while (date >= request.FromDate.Value);
+            while (date >= startDate);
 
             return response;
         }
+
         public GetTimesV1.Request MapToGetTimesV1Request(ExportTimesV1.Request exportRequest)
         {
             return new GetTimesV1.Request

From 75ec1a73fc29162712801261b96ce4ff1c4ea5d3 Mon Sep 17 00:00:00 2001
From: Ryan Maffit <rmaffit@sancsoft.com>
Date: Mon, 24 Jun 2024 17:38:05 +0000
Subject: [PATCH 02/25] Got events working with <tr> component

---
 src/angular/hq/.eslintrc.json                 |   2 +-
 .../common/functions/round-to-next-quarter.ts |   3 +
 .../staff-dashboard/get-dashboard-time-v1.ts  |  12 +-
 .../psrtime-list/psrtime-list.component.ts    |   6 +-
 .../staff-dashboard-time-entry.component.html |  99 +++++++++
 .../staff-dashboard-time-entry.component.ts   | 190 ++++++++++++++++++
 .../staff-dashboard.component.html            |  61 ++++--
 .../staff-dashboard.component.ts              |  18 +-
 .../staff-dashboard.service.ts                |  22 +-
 .../times/time-edit/time-edit.component.ts    |   6 +-
 .../Times/GetDashboardTimeV1.cs               |   6 +-
 .../HQ.Server/Services/TimeEntryServiceV1.cs  |  29 ++-
 12 files changed, 397 insertions(+), 57 deletions(-)
 create mode 100644 src/angular/hq/src/app/common/functions/round-to-next-quarter.ts
 create mode 100644 src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.html
 create mode 100644 src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.ts

diff --git a/src/angular/hq/.eslintrc.json b/src/angular/hq/.eslintrc.json
index 9a597f81..22ff546a 100644
--- a/src/angular/hq/.eslintrc.json
+++ b/src/angular/hq/.eslintrc.json
@@ -22,7 +22,7 @@
         "@angular-eslint/component-selector": [
           "error",
           {
-            "type": "element",
+            "type": ["element", "attribute"],
             "prefix": "hq",
             "style": "kebab-case"
           }
diff --git a/src/angular/hq/src/app/common/functions/round-to-next-quarter.ts b/src/angular/hq/src/app/common/functions/round-to-next-quarter.ts
new file mode 100644
index 00000000..334ef77f
--- /dev/null
+++ b/src/angular/hq/src/app/common/functions/round-to-next-quarter.ts
@@ -0,0 +1,3 @@
+export function roundToNextQuarter(value: number | string) {
+  return Math.ceil(Number(value) * 4) / 4;
+}
diff --git a/src/angular/hq/src/app/models/staff-dashboard/get-dashboard-time-v1.ts b/src/angular/hq/src/app/models/staff-dashboard/get-dashboard-time-v1.ts
index 2ea7f384..1c630b6a 100644
--- a/src/angular/hq/src/app/models/staff-dashboard/get-dashboard-time-v1.ts
+++ b/src/angular/hq/src/app/models/staff-dashboard/get-dashboard-time-v1.ts
@@ -17,7 +17,6 @@ export interface GetDashboardTimeV1Response {
   dates: GetDashboardTimeV1TimeForDate[];
   chargeCodes: GetDashboardTimeV1ChargeCode[];
   clients: GetDashboardTimeV1Client[];
-  projects: GetDashboardTimeV1Project[];
 }
 
 export interface GetDashboardTimeV1TimeForDate {
@@ -32,6 +31,7 @@ export interface GetDashboardTimeV1TimeForDateTimes {
   notes: string | null;
   task: string | null;
   chargeCodeId: string | null;
+  chargeCode: string;
   clientId: string | null;
   projectId: string | null;
   activityId: string | null;
@@ -47,10 +47,18 @@ export interface GetDashboardTimeV1ChargeCode {
 export interface GetDashboardTimeV1Client {
   id: string;
   name: string;
+  projects: GetDashboardTimeV1Project[];
 }
 
 export interface GetDashboardTimeV1Project {
   id: string;
-  clientId: string;
+  chargeCodeId: string | null;
+  chargeCode: string | null;
+  name: string;
+  activities: GetDashboardTimeV1ProjectActivity[];
+}
+
+export interface GetDashboardTimeV1ProjectActivity {
+  id: string;
   name: string;
 }
diff --git a/src/angular/hq/src/app/psr/psrtime-list/psrtime-list.component.ts b/src/angular/hq/src/app/psr/psrtime-list/psrtime-list.component.ts
index 5b8f0d6a..b556ef67 100644
--- a/src/angular/hq/src/app/psr/psrtime-list/psrtime-list.component.ts
+++ b/src/angular/hq/src/app/psr/psrtime-list/psrtime-list.component.ts
@@ -54,6 +54,7 @@ import { ToastService } from '../../services/toast.service';
 import { InRolePipe } from '../../pipes/in-role.pipe';
 import { HQRole } from '../../enums/hqrole';
 import { OidcSecurityService } from 'angular-auth-oidc-client';
+import { roundToNextQuarter } from '../../common/functions/round-to-next-quarter';
 
 export interface ChargeCodeViewModel {
   id: string;
@@ -548,7 +549,7 @@ export class PSRTimeListComponent implements OnInit {
 
   async updateBillableHours(timeId: string, event: Event) {
     const billableHours = (event.target as HTMLInputElement).value;
-    const roundedBillableHours = this.roundToNextQuarter(billableHours);
+    const roundedBillableHours = roundToNextQuarter(billableHours);
     const psrId = await firstValueFrom(this.psrId$);
     const time = await firstValueFrom(
       this.time$.pipe(map((times) => times.find((x) => x.id == timeId))),
@@ -639,7 +640,4 @@ export class PSRTimeListComponent implements OnInit {
       this.sortDirection$.next(SortDirection.Asc);
     }
   }
-  roundToNextQuarter(num: string | number) {
-    return Math.ceil(Number(num) * 4) / 4;
-  }
 }
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.html b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.html
new file mode 100644
index 00000000..92292bf5
--- /dev/null
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.html
@@ -0,0 +1,99 @@
+<ng-container [formGroup]="form">
+  <td class="border-b border-black py-2 pl-5">
+    <input
+      class="w-[100%] block text-right text-[14px] px-2 py-1 border border-black appearance-none focus:outline-none placeholder:text-gray-100 bg-blue-900 rounded h-[30px]"
+      type="number"
+      formControlName="hours"
+    />
+  </td>
+  <td class="border-b border-black py-2 pl-2">
+    <input
+      class="w-[100%] block text-[14px] px-2 py-1 border border-black appearance-none focus:outline-none placeholder:text-gray-100 bg-blue-900 rounded h-[30px]"
+      type="date"
+      formControlName="date"
+    />
+  </td>
+  <td class="border-b border-black py-2 pl-2">
+    {{ form.controls.chargeCode.value }}
+  </td>
+  <td class="border-b border-black py-2 pl-2">
+    <div class="grid relative w-full max-w-[220px]">
+      <select
+        class="w-full pl-2 pr-[43px] appearance-none focus:outline-none hover:cursor-pointer font-medium row-start-1 col-start-1 border border-steel-blue-600 text-gray-100 bg-blue-900 rounded h-[30px]"
+        formControlName="clientId"
+      >
+        <option [ngValue]="null" class="text-gray-50">Client</option>
+        <!-- <option [ngValue]="form.controls.clientId.value">
+        {{ form.controls.clientId.value }}
+      </option> -->
+        @for (
+          client of staffDashboardService.clients$ | async;
+          track client.id
+        ) {
+          <option [ngValue]="client.id">{{ client.name }}</option>
+        }
+      </select>
+      <span
+        class="flex items-center justify-center h-full pointer-events-none z-10 right-0 relative col-start-1 row-start-1 self-center justify-self-end w-[36px] after:block after:w-[1px] after:absolute after:left-[1px] after:top-[7px] after:bottom-[7px] after:bg-gray-100"
+      >
+        <i class="bi bi-arrow-down-short text-[24px]"></i>
+      </span>
+    </div>
+  </td>
+  <td class="border-b border-black py-2 pl-2">
+    <div class="grid relative w-full max-w-[220px]">
+      <select
+        class="w-full pl-2 pr-[43px] appearance-none focus:outline-none hover:cursor-pointer font-medium row-start-1 col-start-1 border border-steel-blue-600 text-gray-100 bg-blue-900 rounded h-[30px]"
+        formControlName="projectId"
+      >
+        <option [ngValue]="null" class="text-gray-50">Project</option>
+        <!-- <option [ngValue]="form.controls.projectId.value">
+        {{ form.controls.projectId.value }}
+      </option> -->
+        @for (project of projects$ | async; track project.id) {
+          <option [ngValue]="project.id">{{ project.name }}</option>
+        }
+      </select>
+      <span
+        class="flex items-center justify-center h-full pointer-events-none z-10 right-0 relative col-start-1 row-start-1 self-center justify-self-end w-[36px] after:block after:w-[1px] after:absolute after:left-[1px] after:top-[7px] after:bottom-[7px] after:bg-gray-100"
+      >
+        <i class="bi bi-arrow-down-short text-[24px]"></i>
+      </span>
+    </div>
+  </td>
+  <td class="border-b border-black py-2 pl-2">
+    @if (activities$ | async; as activities) {
+      @if (activities.length > 0) {
+        <div class="grid relative w-full max-w-[220px]">
+          <select
+            class="w-full pl-2 pr-[43px] appearance-none focus:outline-none hover:cursor-pointer font-medium row-start-1 col-start-1 border border-steel-blue-600 text-gray-100 bg-blue-900 rounded h-[30px]"
+            formControlName="activityId"
+          >
+            <option [ngValue]="null" class="text-gray-50">Activity</option>
+            @for (activity of activities$ | async; track activity.id) {
+              <option [ngValue]="activity.id">{{ activity.name }}</option>
+            }
+          </select>
+          <span
+            class="flex items-center justify-center h-full pointer-events-none z-10 right-0 relative col-start-1 row-start-1 self-center justify-self-end w-[36px] after:block after:w-[1px] after:absolute after:left-[1px] after:top-[7px] after:bottom-[7px] after:bg-gray-100"
+          >
+            <i class="bi bi-arrow-down-short text-[24px]"></i>
+          </span>
+        </div>
+      } @else {
+        <input
+          class="w-[100%] block text-[14px] px-2 py-1 border border-black appearance-none focus:outline-none placeholder:text-gray-100 bg-blue-900 rounded h-[30px]"
+          type="text"
+          formControlName="task"
+        />
+      }
+    }
+  </td>
+  <td class="border-b border-black py-2 pl-2 pr-5">
+    <input
+      class="w-[100%] block text-[14px] px-2 py-1 border border-black appearance-none focus:outline-none placeholder:text-gray-100 bg-blue-900 rounded h-[30px]"
+      type="text"
+      formControlName="notes"
+    />
+  </td>
+</ng-container>
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.ts b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.ts
new file mode 100644
index 00000000..bfd6783f
--- /dev/null
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.ts
@@ -0,0 +1,190 @@
+import {
+  Component,
+  EventEmitter,
+  HostBinding,
+  Input,
+  OnChanges,
+  OnDestroy,
+  Output,
+  SimpleChanges,
+} from '@angular/core';
+import {
+  GetDashboardTimeV1Project,
+  GetDashboardTimeV1ProjectActivity,
+  GetDashboardTimeV1TimeForDateTimes,
+} from '../../models/staff-dashboard/get-dashboard-time-v1';
+import { StaffDashboardService } from '../staff-dashboard.service';
+import {
+  FormControl,
+  FormGroup,
+  ReactiveFormsModule,
+  Validators,
+} from '@angular/forms';
+import { CommonModule } from '@angular/common';
+import {
+  Observable,
+  Subject,
+  combineLatest,
+  debounceTime,
+  distinctUntilChanged,
+  filter,
+  map,
+  pairwise,
+  shareReplay,
+  skip,
+  startWith,
+  takeUntil,
+  tap,
+} from 'rxjs';
+import { roundToNextQuarter } from '../../common/functions/round-to-next-quarter';
+
+export interface HQTimeChangeEvent {
+  id?: string | null;
+  date?: string | null;
+  hours?: number | null;
+  notes?: string | null;
+  task?: string | null;
+  chargeCode?: string | null;
+  chargeCodeId?: string | null;
+  clientId?: string | null;
+  projectId?: string | null;
+  activityId?: string | null;
+}
+
+interface Form {
+  id: FormControl<string | null>;
+  date: FormControl<string | null>;
+  hours: FormControl<number | null>;
+  notes: FormControl<string | null>;
+  task: FormControl<string | null>;
+  chargeCode: FormControl<string | null>;
+  chargeCodeId: FormControl<string | null>;
+  clientId: FormControl<string | null>;
+  projectId: FormControl<string | null>;
+  activityId: FormControl<string | null>;
+}
+
+@Component({
+  selector: 'tr[hq-staff-dashboard-time-entry]',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule],
+  templateUrl: './staff-dashboard-time-entry.component.html',
+})
+export class StaffDashboardTimeEntryComponent implements OnChanges, OnDestroy {
+  @Input()
+  time?: Partial<GetDashboardTimeV1TimeForDateTimes>;
+
+  @Output()
+  hqTimeChange = new EventEmitter<HQTimeChangeEvent>();
+
+  @HostBinding('class')
+  class = 'even:bg-gray-850 odd:bg-black-alt';
+
+  private destroyed$ = new Subject<void>();
+
+  form = new FormGroup<Form>({
+    id: new FormControl<string | null>(null),
+    date: new FormControl<string | null>(null, [Validators.required]),
+    hours: new FormControl<number | null>(null, [Validators.required]),
+    notes: new FormControl<string | null>(null, [Validators.required]),
+    task: new FormControl<string | null>(null),
+    chargeCode: new FormControl<string | null>(null),
+    chargeCodeId: new FormControl<string | null>(null, [Validators.required]),
+    clientId: new FormControl<string | null>(null),
+    projectId: new FormControl<string | null>(null),
+    activityId: new FormControl<string | null>(null),
+  });
+
+  projects$: Observable<GetDashboardTimeV1Project[]>;
+  activities$: Observable<GetDashboardTimeV1ProjectActivity[]>;
+
+  constructor(public staffDashboardService: StaffDashboardService) {
+    const form$ = this.form.valueChanges.pipe(shareReplay(1));
+
+    const clientId$ = form$.pipe(
+      map((t) => t.clientId),
+      distinctUntilChanged(),
+    );
+
+    const projectId$ = form$.pipe(
+      map((t) => t.projectId),
+      distinctUntilChanged(),
+    );
+
+    const hours$ = form$.pipe(
+      map((t) => t.hours),
+      distinctUntilChanged(),
+    );
+
+    const client$ = combineLatest({
+      clientId: clientId$,
+      clients: staffDashboardService.clients$,
+    }).pipe(map((t) => t.clients.find((x) => x.id == t.clientId)));
+
+    this.projects$ = client$.pipe(map((t) => t?.projects ?? []));
+
+    const project$ = combineLatest({
+      projectId: projectId$,
+      client: client$,
+    }).pipe(map((t) => t.client?.projects?.find((x) => x.id == t.projectId)));
+
+    this.activities$ = project$.pipe(
+      map((t) => t?.activities ?? []),
+      startWith([]),
+    );
+
+    clientId$
+      .pipe(pairwise(), takeUntil(this.destroyed$))
+      .subscribe(([previousClientId, currentClientId]) => {
+        if (currentClientId != previousClientId) {
+          this.form.patchValue({
+            chargeCodeId: null,
+            chargeCode: null,
+            projectId: null,
+          });
+        }
+      });
+
+    project$.pipe(takeUntil(this.destroyed$)).subscribe((project) => {
+      if (project) {
+        this.form.patchValue({
+          chargeCodeId: project.chargeCodeId,
+          chargeCode: project.chargeCode,
+        });
+      }
+    });
+
+    hours$
+      .pipe(debounceTime(500), takeUntil(this.destroyed$))
+      .subscribe((hours) => {
+        if (hours != null) {
+          this.form.patchValue({ hours: roundToNextQuarter(hours) });
+        }
+      });
+
+    form$
+      .pipe(takeUntil(this.destroyed$), debounceTime(750))
+      .subscribe((time) => {
+        if (this.form.touched) {
+          this.class = this.form.invalid
+            ? 'bg-red-850'
+            : 'even:bg-gray-850 odd:bg-black-alt';
+
+          if (this.form.valid) {
+            this.hqTimeChange.emit(time);
+          }
+        }
+      });
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['time'].currentValue) {
+      this.form.patchValue(changes['time'].currentValue);
+    }
+  }
+
+  ngOnDestroy() {
+    this.destroyed$.next();
+    this.destroyed$.complete();
+  }
+}
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
index b528137e..b6e5924f 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
@@ -43,26 +43,48 @@
   <div>Total Hours: {{ dashboard.totalHours }}</div>
   <div>Billable Hours: {{ dashboard.billableHours }}</div>
   @for (date of dashboard.dates; track date.date) {
-    <h1 class="text-xl">{{ date.date }}</h1>
+    <div
+      class="px-5 pb-1 pt-4 font-open-sans text-nav-disabled text-xs font-bold uppercase"
+    >
+      {{ date.date | date: "EEEE" }} | {{ date.date }}
+    </div>
     <table class="min-w-full border-spacing-0 border-separate">
       <thead>
         <tr class="text-left">
-          <th class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5">
+          <th
+            class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5"
+            width="90"
+          >
             Hrs
           </th>
-          <th class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5">
+          <th
+            class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5"
+            width="120"
+          >
             Date
           </th>
-          <th class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5">
+          <th
+            class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5"
+            width="120"
+          >
             Chrg Code
           </th>
-          <th class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5">
+          <th
+            class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5"
+            width="180"
+          >
             Client
           </th>
-          <th class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5">
+          <th
+            class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5"
+            width="180"
+          >
             Project
           </th>
-          <th class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5">
+          <th
+            class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5"
+            width="180"
+          >
             Activity / Task
           </th>
           <th class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5">
@@ -71,22 +93,17 @@ <h1 class="text-xl">{{ date.date }}</h1>
         </tr>
       </thead>
       <tbody>
+        <tr
+          hq-staff-dashboard-time-entry
+          (hqTimeChange)="createTime($event)"
+          [time]="{ date: date.date }"
+        ></tr>
         @for (time of date.times; track time.id) {
-          <tr class="even:bg-gray-850 odd:bg-black-alt">
-            <td class="border-b border-black py-2 pl-5">{{ time.hours }}</td>
-            <td class="border-b border-black py-2 pl-5">{{ time.date }}</td>
-            <td class="border-b border-black py-2 pl-5">
-              {{ time.chargeCodeId }}
-            </td>
-            <td class="border-b border-black py-2 pl-5">{{ time.clientId }}</td>
-            <td class="border-b border-black py-2 pl-5">
-              {{ time.projectId }}
-            </td>
-            <td class="border-b border-black py-2 pl-5">
-              {{ time.activityId ?? "" + time.task ?? "" }}
-            </td>
-            <td class="border-b border-black py-2 pl-5">{{ time.notes }}</td>
-          </tr>
+          <tr
+            hq-staff-dashboard-time-entry
+            (hqTimeChange)="updateTime($event)"
+            [time]="time"
+          ></tr>
         }
       </tbody>
     </table>
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts
index ac202e23..74ecbe58 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts
@@ -3,11 +3,19 @@ import { StaffDashboardService } from './staff-dashboard.service';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
 import { Period } from '../models/times/get-time-v1';
+import {
+  HQTimeChangeEvent,
+  StaffDashboardTimeEntryComponent,
+} from './staff-dashboard-time-entry/staff-dashboard-time-entry.component';
 
 @Component({
   selector: 'hq-staff-dashboard',
   standalone: true,
-  imports: [CommonModule, ReactiveFormsModule],
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    StaffDashboardTimeEntryComponent,
+  ],
   providers: [StaffDashboardService],
   templateUrl: './staff-dashboard.component.html',
 })
@@ -15,4 +23,12 @@ export class StaffDashboardComponent {
   constructor(public staffDashboardService: StaffDashboardService) {}
 
   Period = Period;
+
+  updateTime(time: HQTimeChangeEvent) {
+    console.log(time);
+  }
+
+  createTime(time: HQTimeChangeEvent) {
+    console.log(time);
+  }
 }
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.service.ts b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.service.ts
index 457388fe..f129b3c3 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.service.ts
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.service.ts
@@ -8,11 +8,16 @@ import {
   combineLatest,
   debounceTime,
   map,
+  shareReplay,
   startWith,
   switchMap,
   tap,
 } from 'rxjs';
-import { GetDashboardTimeV1Response } from '../models/staff-dashboard/get-dashboard-time-v1';
+import {
+  GetDashboardTimeV1ChargeCode,
+  GetDashboardTimeV1Client,
+  GetDashboardTimeV1Response,
+} from '../models/staff-dashboard/get-dashboard-time-v1';
 
 @Injectable({
   providedIn: 'root',
@@ -20,11 +25,16 @@ import { GetDashboardTimeV1Response } from '../models/staff-dashboard/get-dashbo
 export class StaffDashboardService {
   search = new FormControl<string | null>(null);
   period = new FormControl<Period>(Period.Week, { nonNullable: true });
-  date = new FormControl<string>(new Date().toISOString().split('T')[0], {
-    nonNullable: true,
-  });
+  date = new FormControl<string>(
+    /*new Date().toISOString().split('T')[0]*/ '2024-06-21',
+    {
+      nonNullable: true,
+    },
+  );
 
   time$: Observable<GetDashboardTimeV1Response>;
+  chargeCodes$: Observable<GetDashboardTimeV1ChargeCode[]>;
+  clients$: Observable<GetDashboardTimeV1Client[]>;
 
   constructor(
     private hqService: HQService,
@@ -52,6 +62,10 @@ export class StaffDashboardService {
       tap((response) =>
         this.date.setValue(response.startDate, { emitEvent: false }),
       ),
+      shareReplay(1),
     );
+
+    this.chargeCodes$ = this.time$.pipe(map((t) => t.chargeCodes));
+    this.clients$ = this.time$.pipe(map((t) => t.clients));
   }
 }
diff --git a/src/angular/hq/src/app/times/time-edit/time-edit.component.ts b/src/angular/hq/src/app/times/time-edit/time-edit.component.ts
index bb3f02f9..f9e87e64 100644
--- a/src/angular/hq/src/app/times/time-edit/time-edit.component.ts
+++ b/src/angular/hq/src/app/times/time-edit/time-edit.component.ts
@@ -29,6 +29,7 @@ import {
   GetTimeRecordProjectsV1,
 } from '../../models/times/get-time-v1';
 import { OidcSecurityService } from 'angular-auth-oidc-client';
+import { roundToNextQuarter } from '../../common/functions/round-to-next-quarter';
 
 interface Form {
   ProjectId: FormControl<string | null>;
@@ -160,7 +161,7 @@ export class TimeEditComponent implements OnInit {
   }
   updateHours(event: Event) {
     const hours = (event.target as HTMLInputElement).value;
-    const roundedHours = this.roundToNextQuarter(hours);
+    const roundedHours = roundToNextQuarter(hours);
     this.form.get('Hours')?.setValue(roundedHours);
   }
   private async getTime() {
@@ -186,7 +187,4 @@ export class TimeEditComponent implements OnInit {
       }
     }
   }
-  roundToNextQuarter(num: string | number) {
-    return Math.ceil(Number(num) * 4) / 4;
-  }
 }
diff --git a/src/dotnet/HQ.Abstractions/Times/GetDashboardTimeV1.cs b/src/dotnet/HQ.Abstractions/Times/GetDashboardTimeV1.cs
index 750954bb..f5e0b0da 100644
--- a/src/dotnet/HQ.Abstractions/Times/GetDashboardTimeV1.cs
+++ b/src/dotnet/HQ.Abstractions/Times/GetDashboardTimeV1.cs
@@ -23,7 +23,6 @@ public class Response
         public List<TimeForDate> Dates { get; set; } = new();
         public List<ChargeCode> ChargeCodes { get; set; } = new();
         public List<Client> Clients { get; set; } = new();
-        public List<Project> Projects { get; set; } = new();
     }
 
     public class ChargeCode
@@ -38,14 +37,16 @@ public class Client
     {
         public Guid Id { get; set; }
         public string Name { get; set; } = null!;
+        public List<Project> Projects { get; set; } = null!;
     }
 
     public class Project
     {
         public Guid Id { get; set; }
-        public Guid ClientId { get; set; }
         public string Name { get; set; } = null!;
         public List<Activities> Activities { get; set; } = new();
+        public Guid? ChargeCodeId { get; set; }
+        public string? ChargeCode { get; set; }
     }
 
     public class Activities
@@ -71,5 +72,6 @@ public class TimeEntry
         public Guid? ClientId { get; set; }
         public Guid? ProjectId { get; set; }
         public Guid? ActivityId { get; set; }
+        public string ChargeCode { get; set; } = null!;
     }
 }
\ No newline at end of file
diff --git a/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs b/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs
index aafc688f..58779ea2 100644
--- a/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs
+++ b/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs
@@ -479,6 +479,7 @@ public TimeEntryServiceV1(HQDbContext context)
                     Id = t.Id,
                     Date = t.Date,
                     ChargeCodeId = t.ChargeCodeId,
+                    ChargeCode = t.ChargeCode.Code,
                     ActivityId = t.ActivityId,
                     Hours = t.Hours,
                     Notes = t.Notes,
@@ -505,36 +506,30 @@ public TimeEntryServiceV1(HQDbContext context)
             var clients = await _context.Clients
                 .AsNoTracking()
                 .OrderBy(t => t.Name)
+                .Include(t => t.Projects)
+                .ThenInclude(t => t.Activities)
                 .Select(t => new GetDashboardTimeV1.Client()
-                {
-                    Id = t.Id,
-                    Name = t.Name
-                })
-                .ToListAsync(ct);
-
-
-            var projects = await _context.Projects
-                .AsNoTracking()
-                .OrderBy(t => t.Name)
-                .Include(t => t.Activities)
-                .Select(t => new GetDashboardTimeV1.Project()
                 {
                     Id = t.Id,
                     Name = t.Name,
-                    ClientId = t.ClientId,
-                    Activities = t.Activities.Select(x => new Abstractions.Times.GetDashboardTimeV1.Activities()
+                    Projects = t.Projects.Select(x => new Abstractions.Times.GetDashboardTimeV1.Project()
                     {
                         Id = x.Id,
-                        Name = x.Name
+                        ChargeCodeId = x.ChargeCode != null ? x.ChargeCode.Id : null,
+                        ChargeCode = x.ChargeCode != null ? x.ChargeCode.Code : null,
+                        Name = x.Name,
+                        Activities = x.Activities.Select(y => new Abstractions.Times.GetDashboardTimeV1.Activities()
+                        {
+                            Id = y.Id,
+                            Name = y.Name
+                        }).ToList()
                     }).ToList()
                 })
                 .ToListAsync(ct);
 
-
             var response = new GetDashboardTimeV1.Response();
             response.ChargeCodes = chargeCodes;
             response.Clients = clients;
-            response.Projects = projects;
             response.StartDate = startDate;
             response.EndDate = endDate;
             response.TotalHours = await timesQuery.SumAsync(t => t.Hours);

From 0dce9f36f88c56853abeb433f7ac62eb451d6a62 Mon Sep 17 00:00:00 2001
From: Ryan Maffit <rmaffit@sancsoft.com>
Date: Mon, 24 Jun 2024 17:43:25 +0000
Subject: [PATCH 03/25] Switched CLI BillableHours to Hours

---
 src/dotnet/HQ.Abstractions/Times/UpsertTimeV1.cs              | 1 -
 .../HQ.CLI/Commands/TimeEntries/CreateTimeEntryCommand.cs     | 4 ++--
 src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs           | 2 +-
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/dotnet/HQ.Abstractions/Times/UpsertTimeV1.cs b/src/dotnet/HQ.Abstractions/Times/UpsertTimeV1.cs
index 1c5b5f4d..ea5a7fab 100644
--- a/src/dotnet/HQ.Abstractions/Times/UpsertTimeV1.cs
+++ b/src/dotnet/HQ.Abstractions/Times/UpsertTimeV1.cs
@@ -11,7 +11,6 @@ public class Request
         {
             public Guid? Id { get; set; }
             public DateOnly Date { get; set; }
-            public decimal? BillableHours { get; set; }
             public decimal? Hours { get; set; }
             public string? Task { get; set; }
             public Guid? ActivityId { get; set; }
diff --git a/src/dotnet/HQ.CLI/Commands/TimeEntries/CreateTimeEntryCommand.cs b/src/dotnet/HQ.CLI/Commands/TimeEntries/CreateTimeEntryCommand.cs
index 2fe76e91..7e57751f 100644
--- a/src/dotnet/HQ.CLI/Commands/TimeEntries/CreateTimeEntryCommand.cs
+++ b/src/dotnet/HQ.CLI/Commands/TimeEntries/CreateTimeEntryCommand.cs
@@ -16,7 +16,7 @@ internal class CreateTimeEntrySettings : HQCommandSettings
         public required string ChargeCode { get; set; }
 
         [CommandArgument(1, "<hours>")]
-        public decimal BillableHours { get; set; }
+        public decimal Hours { get; set; }
 
         [CommandArgument(2, "<notes>")]
         public required string Notes { get; set; }
@@ -50,7 +50,7 @@ public override async Task<int> ExecuteAsync(CommandContext context, CreateTimeE
                 Notes = settings.Notes,
                 Task = settings.Task,
                 Date = settings.Date ?? DateOnly.FromDateTime(DateTime.Now),
-                BillableHours = settings.BillableHours
+                Hours = settings.Hours
 
             };
             var result = await _hqService.UpsertTimeEntryV1(timeEntryRequest);
diff --git a/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs b/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs
index 58779ea2..21254ee4 100644
--- a/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs
+++ b/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs
@@ -31,7 +31,7 @@ public TimeEntryServiceV1(HQDbContext context)
             var validationResult = Result.Merge(
                 Result.FailIf(string.IsNullOrEmpty(request.Notes), "Notes are required."),
                 Result.FailIf(!request.Id.HasValue && request.StaffId == null, "Staff is required."),
-                Result.FailIf(request.BillableHours <= 0, "Billable Hours must be greater than 0.")
+                Result.FailIf(request.Hours <= 0, "Hours must be greater than 0.")
             );
 
 

From 83262951fcc703c0c571c8657bf4a0bf2d63301f Mon Sep 17 00:00:00 2001
From: Ryan Maffit <rmaffit@sancsoft.com>
Date: Mon, 24 Jun 2024 19:06:10 +0000
Subject: [PATCH 04/25] Integrated create/update/delete events with API

---
 .../common/functions/charge-code-to-color.ts  | 32 ++++++++
 .../hq/src/app/models/times/delete-time-v1.ts |  5 ++
 .../hq/src/app/models/times/update-time-v1.ts | 10 ++-
 src/angular/hq/src/app/services/hq.service.ts | 21 +++++
 .../staff-dashboard-time-entry.component.html | 41 +++++++---
 .../staff-dashboard-time-entry.component.ts   | 26 +++++++
 .../staff-dashboard.component.html            | 11 ++-
 .../staff-dashboard.component.ts              | 76 +++++++++++++++++--
 .../staff-dashboard.service.ts                | 17 ++++-
 .../Times/GetDashboardTimeV1.cs               |  1 +
 .../HQ.Server/Services/TimeEntryServiceV1.cs  |  5 +-
 11 files changed, 219 insertions(+), 26 deletions(-)
 create mode 100644 src/angular/hq/src/app/common/functions/charge-code-to-color.ts
 create mode 100644 src/angular/hq/src/app/models/times/delete-time-v1.ts

diff --git a/src/angular/hq/src/app/common/functions/charge-code-to-color.ts b/src/angular/hq/src/app/common/functions/charge-code-to-color.ts
new file mode 100644
index 00000000..30cb25a8
--- /dev/null
+++ b/src/angular/hq/src/app/common/functions/charge-code-to-color.ts
@@ -0,0 +1,32 @@
+const colors = [
+  '#7FB5B5',
+  '#646B63',
+  '#317F43',
+  '#E7EBDA',
+  '#A5A5A5',
+  '#82898F',
+  '#E4A010',
+  '#E1CC4F',
+];
+
+function hexToRgb(hex: string) {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  return result
+    ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16),
+      }
+    : null;
+}
+
+export function chargeCodeToColor(code: string, opacity = 0.4) {
+  const value = code.charCodeAt(0) * 10000 + parseInt(code.substring(1));
+  const hexColor = colors[value % colors.length];
+  const rgb = hexToRgb(hexColor);
+  if (!rgb) {
+    return colors[0];
+  }
+
+  return `rgba(${rgb.r},${rgb.g},${rgb.b},${opacity})`;
+}
diff --git a/src/angular/hq/src/app/models/times/delete-time-v1.ts b/src/angular/hq/src/app/models/times/delete-time-v1.ts
new file mode 100644
index 00000000..e9b34a0c
--- /dev/null
+++ b/src/angular/hq/src/app/models/times/delete-time-v1.ts
@@ -0,0 +1,5 @@
+export interface DeleteTimeV1Request {
+  id: string;
+}
+
+export interface DeleteTimeV1Response {}
diff --git a/src/angular/hq/src/app/models/times/update-time-v1.ts b/src/angular/hq/src/app/models/times/update-time-v1.ts
index 49fa0f3f..4f5860ed 100644
--- a/src/angular/hq/src/app/models/times/update-time-v1.ts
+++ b/src/angular/hq/src/app/models/times/update-time-v1.ts
@@ -1,12 +1,14 @@
 export interface updateTimeRequestV1 {
-  id: string;
+  id?: string | null;
+  date: string;
   activityId?: string | null;
   task?: string | null;
-  notes: string;
-  hours: number;
+  notes?: string | null;
+  chargeCodeId?: string | null;
+  hours?: number | null;
   chargeCode: string;
 }
 
 export interface UpdateTimeResponseV1 {
-  message: string;
+  id: string;
 }
diff --git a/src/angular/hq/src/app/services/hq.service.ts b/src/angular/hq/src/app/services/hq.service.ts
index 55d9742a..be31b70e 100644
--- a/src/angular/hq/src/app/services/hq.service.ts
+++ b/src/angular/hq/src/app/services/hq.service.ts
@@ -114,6 +114,10 @@ import {
   GetDashboardTimeV1Request,
   GetDashboardTimeV1Response,
 } from '../models/staff-dashboard/get-dashboard-time-v1';
+import {
+  DeleteTimeV1Request,
+  DeleteTimeV1Response,
+} from '../models/times/delete-time-v1';
 
 @Injectable({
   providedIn: 'root',
@@ -442,6 +446,23 @@ export class HQService {
       }),
     );
   }
+  deleteTimeV1(request: Partial<DeleteTimeV1Request>) {
+    return this.appSettings.apiUrl$.pipe(
+      switchMap((apiUrl) =>
+        this.http.post<DeleteTimeV1Response>(
+          `${apiUrl}/v1/TimeEntries/DeleteTimeV1`,
+          request,
+        ),
+      ),
+      catchError((err: HttpErrorResponse) => {
+        if (err.status == 400) {
+          return throwError(() => new APIError(err.error));
+        }
+
+        throw err;
+      }),
+    );
+  }
 
   getClientInvoiceSummaryV1(
     request: Partial<GetClientInvoiceSummaryV1Request>,
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.html b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.html
index 92292bf5..88a229b1 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.html
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.html
@@ -1,25 +1,35 @@
 <ng-container [formGroup]="form">
   <td class="border-b border-black py-2 pl-5">
     <input
-      class="w-[100%] block text-right text-[14px] px-2 py-1 border border-black appearance-none focus:outline-none placeholder:text-gray-100 bg-blue-900 rounded h-[30px]"
+      class="w-[100%] block text-right text-[14px] px-2 py-1 border border-black appearance-none focus:outline-none focus:border-white placeholder:text-gray-100 bg-blue-900 rounded h-[30px]"
       type="number"
       formControlName="hours"
     />
   </td>
   <td class="border-b border-black py-2 pl-2">
     <input
-      class="w-[100%] block text-[14px] px-2 py-1 border border-black appearance-none focus:outline-none placeholder:text-gray-100 bg-blue-900 rounded h-[30px]"
+      class="w-[100%] block text-[14px] px-2 py-1 border border-black appearance-none focus:outline-none focus:border-white placeholder:text-gray-100 bg-blue-900 rounded h-[30px]"
       type="date"
       formControlName="date"
+      readonly
     />
   </td>
-  <td class="border-b border-black py-2 pl-2">
-    {{ form.controls.chargeCode.value }}
+  <td class="border-b border-black py-2 pl-2 text-center">
+    @if (form.controls.chargeCode.value) {
+      <span
+        class="px-3 py-1 font-semibold rounded-full bg-opacity-25"
+        [style.background-color]="
+          chargeCodeToColor(form.controls.chargeCode.value)
+        "
+      >
+        {{ form.controls.chargeCode.value }}
+      </span>
+    }
   </td>
   <td class="border-b border-black py-2 pl-2">
     <div class="grid relative w-full max-w-[220px]">
       <select
-        class="w-full pl-2 pr-[43px] appearance-none focus:outline-none hover:cursor-pointer font-medium row-start-1 col-start-1 border border-steel-blue-600 text-gray-100 bg-blue-900 rounded h-[30px]"
+        class="w-full pl-2 pr-[43px] appearance-none focus:outline-none hover:cursor-pointer font-medium row-start-1 col-start-1 border focus:border-white border-steel-blue-600 text-gray-100 bg-blue-900 rounded h-[30px]"
         formControlName="clientId"
       >
         <option [ngValue]="null" class="text-gray-50">Client</option>
@@ -43,7 +53,7 @@
   <td class="border-b border-black py-2 pl-2">
     <div class="grid relative w-full max-w-[220px]">
       <select
-        class="w-full pl-2 pr-[43px] appearance-none focus:outline-none hover:cursor-pointer font-medium row-start-1 col-start-1 border border-steel-blue-600 text-gray-100 bg-blue-900 rounded h-[30px]"
+        class="w-full pl-2 pr-[43px] appearance-none focus:outline-none hover:cursor-pointer font-medium row-start-1 col-start-1 border focus:border-white border-steel-blue-600 text-gray-100 bg-blue-900 rounded h-[30px]"
         formControlName="projectId"
       >
         <option [ngValue]="null" class="text-gray-50">Project</option>
@@ -66,7 +76,7 @@
       @if (activities.length > 0) {
         <div class="grid relative w-full max-w-[220px]">
           <select
-            class="w-full pl-2 pr-[43px] appearance-none focus:outline-none hover:cursor-pointer font-medium row-start-1 col-start-1 border border-steel-blue-600 text-gray-100 bg-blue-900 rounded h-[30px]"
+            class="w-full pl-2 pr-[43px] appearance-none focus:outline-none hover:cursor-pointer font-medium row-start-1 col-start-1 border focus:border-white border-steel-blue-600 text-gray-100 bg-blue-900 rounded h-[30px]"
             formControlName="activityId"
           >
             <option [ngValue]="null" class="text-gray-50">Activity</option>
@@ -82,18 +92,29 @@
         </div>
       } @else {
         <input
-          class="w-[100%] block text-[14px] px-2 py-1 border border-black appearance-none focus:outline-none placeholder:text-gray-100 bg-blue-900 rounded h-[30px]"
+          class="w-[100%] block text-[14px] px-2 py-1 border border-black appearance-none focus:outline-none focus:border-white placeholder:text-gray-100 bg-blue-900 rounded h-[30px]"
           type="text"
           formControlName="task"
         />
       }
     }
   </td>
-  <td class="border-b border-black py-2 pl-2 pr-5">
+  <td class="border-b border-black py-2 pl-2">
     <input
-      class="w-[100%] block text-[14px] px-2 py-1 border border-black appearance-none focus:outline-none placeholder:text-gray-100 bg-blue-900 rounded h-[30px]"
+      class="w-[100%] block text-[14px] px-2 py-1 border border-black appearance-none focus:outline-none focus:border-white placeholder:text-gray-100 bg-blue-900 rounded h-[30px]"
       type="text"
       formControlName="notes"
     />
   </td>
+  <td class="border-b border-black py-2 pl-2 pr-5">
+    @if (form.controls.id.value) {
+      <button
+        type="submit"
+        (click)="deleteTime()"
+        class="h-[30px] px-2 py-2 border border-red-950 bg-red-950 hover:bg-red-600 hover:red-orange-600 text-white rounded w-full"
+      >
+        <i class="bi bi-trash"></i>
+      </button>
+    }
+  </td>
 </ng-container>
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.ts b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.ts
index bfd6783f..39931868 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.ts
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.ts
@@ -37,6 +37,7 @@ import {
   tap,
 } from 'rxjs';
 import { roundToNextQuarter } from '../../common/functions/round-to-next-quarter';
+import { chargeCodeToColor } from '../../common/functions/charge-code-to-color';
 
 export interface HQTimeChangeEvent {
   id?: string | null;
@@ -51,6 +52,10 @@ export interface HQTimeChangeEvent {
   activityId?: string | null;
 }
 
+export interface HQTimeDeleteEvent {
+  id: string;
+}
+
 interface Form {
   id: FormControl<string | null>;
   date: FormControl<string | null>;
@@ -77,11 +82,16 @@ export class StaffDashboardTimeEntryComponent implements OnChanges, OnDestroy {
   @Output()
   hqTimeChange = new EventEmitter<HQTimeChangeEvent>();
 
+  @Output()
+  hqTimeDelete = new EventEmitter<HQTimeDeleteEvent>();
+
   @HostBinding('class')
   class = 'even:bg-gray-850 odd:bg-black-alt';
 
   private destroyed$ = new Subject<void>();
 
+  chargeCodeToColor = chargeCodeToColor;
+
   form = new FormGroup<Form>({
     id: new FormControl<string | null>(null),
     date: new FormControl<string | null>(null, [Validators.required]),
@@ -175,6 +185,15 @@ export class StaffDashboardTimeEntryComponent implements OnChanges, OnDestroy {
           }
         }
       });
+
+    this.staffDashboardService.refresh$.subscribe(() => {
+      if (!this.time?.id) {
+        this.form.reset();
+        this.form.patchValue({
+          date: this.time?.date,
+        });
+      }
+    });
   }
 
   ngOnChanges(changes: SimpleChanges) {
@@ -187,4 +206,11 @@ export class StaffDashboardTimeEntryComponent implements OnChanges, OnDestroy {
     this.destroyed$.next();
     this.destroyed$.complete();
   }
+
+  deleteTime() {
+    const id = this.form.controls.id.value;
+    if (id) {
+      this.hqTimeDelete.emit({ id });
+    }
+  }
 }
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
index b6e5924f..19ffef12 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
@@ -83,25 +83,30 @@
           </th>
           <th
             class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5"
-            width="180"
+            width="140"
           >
             Activity / Task
           </th>
           <th class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5">
             Description
           </th>
+          <th
+            class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5"
+            width="20"
+          ></th>
         </tr>
       </thead>
       <tbody>
         <tr
           hq-staff-dashboard-time-entry
-          (hqTimeChange)="createTime($event)"
+          (hqTimeChange)="upsertTime($event)"
           [time]="{ date: date.date }"
         ></tr>
         @for (time of date.times; track time.id) {
           <tr
             hq-staff-dashboard-time-entry
-            (hqTimeChange)="updateTime($event)"
+            (hqTimeChange)="upsertTime($event)"
+            (hqTimeDelete)="deleteTime($event)"
             [time]="time"
           ></tr>
         }
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts
index 74ecbe58..0a54db89 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts
@@ -5,8 +5,15 @@ import { ReactiveFormsModule } from '@angular/forms';
 import { Period } from '../models/times/get-time-v1';
 import {
   HQTimeChangeEvent,
+  HQTimeDeleteEvent,
   StaffDashboardTimeEntryComponent,
 } from './staff-dashboard-time-entry/staff-dashboard-time-entry.component';
+import { updateTimeRequestV1 } from '../models/times/update-time-v1';
+import { firstValueFrom } from 'rxjs';
+import { HQService } from '../services/hq.service';
+import { APIError } from '../errors/apierror';
+import { ToastService } from '../services/toast.service';
+import { ModalService } from '../services/modal.service';
 
 @Component({
   selector: 'hq-staff-dashboard',
@@ -20,15 +27,74 @@ import {
   templateUrl: './staff-dashboard.component.html',
 })
 export class StaffDashboardComponent {
-  constructor(public staffDashboardService: StaffDashboardService) {}
+  constructor(
+    public staffDashboardService: StaffDashboardService,
+    private hqService: HQService,
+    private toastService: ToastService,
+    private modalService: ModalService,
+  ) {}
 
   Period = Period;
 
-  updateTime(time: HQTimeChangeEvent) {
-    console.log(time);
+  async deleteTime(event: HQTimeDeleteEvent) {
+    const request = {
+      id: event.id,
+    };
+
+    const confirm = await firstValueFrom(
+      this.modalService.confirm(
+        'Delete',
+        'Are you sure you want to delete this time entry?',
+      ),
+    );
+
+    if (!confirm) {
+      return;
+    }
+
+    try {
+      await firstValueFrom(this.hqService.deleteTimeV1(request));
+      this.toastService.show('Success', 'Time entry successfully deleted.');
+      this.staffDashboardService.refresh();
+    } catch (err) {
+      if (err instanceof APIError) {
+        this.toastService.show('Error', err.errors.join('\n'));
+      } else {
+        this.toastService.show('Error', 'An unexpected error has occurred.');
+      }
+    }
   }
 
-  createTime(time: HQTimeChangeEvent) {
-    console.log(time);
+  async upsertTime(event: HQTimeChangeEvent) {
+    if (!event.date) {
+      return;
+    }
+
+    const request: Partial<updateTimeRequestV1> = {
+      id: event.id,
+      hours: event.hours,
+      chargeCodeId: event.chargeCodeId,
+      task: event.task,
+      activityId: event.activityId,
+      notes: event.notes,
+      date: event.date,
+    };
+
+    try {
+      await firstValueFrom(this.hqService.upsertTimeV1(request));
+      if (event.id) {
+        this.toastService.show('Success', 'Time entry successfully updated.');
+      } else {
+        this.toastService.show('Success', 'Time entry successfully created.');
+        this.staffDashboardService.search.reset();
+        this.staffDashboardService.refresh();
+      }
+    } catch (err) {
+      if (err instanceof APIError) {
+        this.toastService.show('Error', err.errors.join('\n'));
+      } else {
+        this.toastService.show('Error', 'An unexpected error has occurred.');
+      }
+    }
   }
 }
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.service.ts b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.service.ts
index f129b3c3..b7f98157 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.service.ts
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.service.ts
@@ -5,9 +5,11 @@ import { HQService } from '../services/hq.service';
 import { OidcSecurityService } from 'angular-auth-oidc-client';
 import {
   Observable,
+  Subject,
   combineLatest,
   debounceTime,
   map,
+  merge,
   shareReplay,
   startWith,
   switchMap,
@@ -36,6 +38,8 @@ export class StaffDashboardService {
   chargeCodes$: Observable<GetDashboardTimeV1ChargeCode[]>;
   clients$: Observable<GetDashboardTimeV1Client[]>;
 
+  refresh$ = new Subject<void>();
+
   constructor(
     private hqService: HQService,
     private oidcSecurityService: OidcSecurityService,
@@ -56,16 +60,25 @@ export class StaffDashboardService {
       date: date$,
     });
 
-    this.time$ = request$.pipe(
-      debounceTime(250),
+    const time$ = request$.pipe(
       switchMap((request) => this.hqService.getDashboardTimeV1(request)),
       tap((response) =>
         this.date.setValue(response.startDate, { emitEvent: false }),
       ),
+    );
+
+    const refreshTime$ = this.refresh$.pipe(switchMap(() => time$));
+
+    this.time$ = merge(time$, refreshTime$).pipe(
+      debounceTime(250),
       shareReplay(1),
     );
 
     this.chargeCodes$ = this.time$.pipe(map((t) => t.chargeCodes));
     this.clients$ = this.time$.pipe(map((t) => t.clients));
   }
+
+  refresh() {
+    this.refresh$.next();
+  }
 }
diff --git a/src/dotnet/HQ.Abstractions/Times/GetDashboardTimeV1.cs b/src/dotnet/HQ.Abstractions/Times/GetDashboardTimeV1.cs
index f5e0b0da..daee4f85 100644
--- a/src/dotnet/HQ.Abstractions/Times/GetDashboardTimeV1.cs
+++ b/src/dotnet/HQ.Abstractions/Times/GetDashboardTimeV1.cs
@@ -64,6 +64,7 @@ public class TimeForDate
     public class TimeEntry
     {
         public Guid Id { get; set; }
+        public DateTime CreatedAt { get; set; }
         public DateOnly Date { get; set; }
         public decimal Hours { get; set; }
         public string? Notes { get; set; }
diff --git a/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs b/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs
index 21254ee4..1b3cc5ba 100644
--- a/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs
+++ b/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs
@@ -473,10 +473,11 @@ public TimeEntryServiceV1(HQDbContext context)
                 );
             }
 
-            var times = await timesQuery.OrderByDescending(t => t.CreatedAt)
+            var times = await timesQuery
                 .Select(t => new GetDashboardTimeV1.TimeEntry()
                 {
                     Id = t.Id,
+                    CreatedAt = t.CreatedAt,
                     Date = t.Date,
                     ChargeCodeId = t.ChargeCodeId,
                     ChargeCode = t.ChargeCode.Code,
@@ -488,7 +489,7 @@ public TimeEntryServiceV1(HQDbContext context)
                     ClientId = t.ChargeCode.Project != null ? t.ChargeCode.Project.ClientId : null
                 })
                 .GroupBy(t => t.Date)
-                .ToDictionaryAsync(t => t.Key, t => t.ToList());
+                .ToDictionaryAsync(t => t.Key, t => t.OrderByDescending(x => x.CreatedAt).ToList());
 
             var chargeCodes = await _context.ChargeCodes
                 .AsNoTracking()

From 0364eb13359f0796e49a45f20a322c8fce5843a8 Mon Sep 17 00:00:00 2001
From: amahdysancsoft <amahdy@sancsoft.com>
Date: Mon, 24 Jun 2024 16:15:31 -0400
Subject: [PATCH 05/25] Created a separate search filter component for staff
 dashboard

---
 .../{ => service}/staff-dashboard.service.ts  |  7 +-
 ...aff-dashboard-search-filter.component.html | 99 +++++++++++++++++++
 ...staff-dashboard-search-filter.component.ts | 15 +++
 .../staff-dashboard-time-entry.component.ts   |  2 +-
 .../staff-dashboard.component.html            | 20 ++--
 .../staff-dashboard.component.ts              |  4 +-
 6 files changed, 131 insertions(+), 16 deletions(-)
 rename src/angular/hq/src/app/staff-dashboard/{ => service}/staff-dashboard.service.ts (90%)
 create mode 100644 src/angular/hq/src/app/staff-dashboard/staff-dashboard-search-filter/staff-dashboard-search-filter.component.html
 create mode 100644 src/angular/hq/src/app/staff-dashboard/staff-dashboard-search-filter/staff-dashboard-search-filter.component.ts

diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.service.ts b/src/angular/hq/src/app/staff-dashboard/service/staff-dashboard.service.ts
similarity index 90%
rename from src/angular/hq/src/app/staff-dashboard/staff-dashboard.service.ts
rename to src/angular/hq/src/app/staff-dashboard/service/staff-dashboard.service.ts
index b7f98157..b3cba015 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.service.ts
+++ b/src/angular/hq/src/app/staff-dashboard/service/staff-dashboard.service.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 import { FormControl } from '@angular/forms';
-import { Period } from '../projects/project-create/project-create.component';
-import { HQService } from '../services/hq.service';
+import { Period } from '../../projects/project-create/project-create.component';
+import { HQService } from '../../services/hq.service';
 import { OidcSecurityService } from 'angular-auth-oidc-client';
 import {
   Observable,
@@ -19,7 +19,7 @@ import {
   GetDashboardTimeV1ChargeCode,
   GetDashboardTimeV1Client,
   GetDashboardTimeV1Response,
-} from '../models/staff-dashboard/get-dashboard-time-v1';
+} from '../../models/staff-dashboard/get-dashboard-time-v1';
 
 @Injectable({
   providedIn: 'root',
@@ -34,6 +34,7 @@ export class StaffDashboardService {
     },
   );
 
+  Period = Period;
   time$: Observable<GetDashboardTimeV1Response>;
   chargeCodes$: Observable<GetDashboardTimeV1ChargeCode[]>;
   clients$: Observable<GetDashboardTimeV1Client[]>;
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-search-filter/staff-dashboard-search-filter.component.html b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-search-filter/staff-dashboard-search-filter.component.html
new file mode 100644
index 00000000..933765d4
--- /dev/null
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-search-filter/staff-dashboard-search-filter.component.html
@@ -0,0 +1,99 @@
+<div class="flex w-full flex-1 items-center gap-[20px] mb-[8px] xl:mb-0">
+  <div class="w-full">
+    <label
+      for=""
+      class="font-open-sans text-nav-disabled text-xs font-bold uppercase"
+      >Search</label
+    >
+    <!-- search bar -->
+    <div
+      class="relative flex items-stretch border border-steel-blue-600 text-gray-100 bg-blue-900 rounded h-[36px] w-full max-w-[395px]"
+    >
+      <span
+        class="relative flex items-center justify-center text-center whitespace-nowrap w-[36px] hover:cursor-pointer after:block after:w-[1px] after:absolute after:right-[1px] after:top-[6px] after:bottom-[6px] after:bg-gray-100"
+      >
+        <i class="bi bi-search text-[14px]"></i>
+      </span>
+      <input
+        type="text"
+        [formControl]="staffDashboardService.search"
+        class="w-[100%] block text-[14px] px-2 py-1 appearance-none focus:outline-none hover:cursor-pointer font-medium bg-inherit rounded"
+        name=""
+      />
+    </div>
+  </div>
+  <div class="w-full">
+    <label
+      for=""
+      class="font-open-sans text-nav-disabled text-xs font-bold uppercase"
+      >Period</label
+    >
+    <div class="grid relative w-full max-w-[220px]">
+      <select
+        [formControl]="staffDashboardService.period"
+        class="w-full pl-2 pr-[43px] appearance-none focus:outline-none hover:cursor-pointer font-medium row-start-1 col-start-1 border border-steel-blue-600 text-gray-100 bg-blue-900 rounded h-[36px]"
+      >
+        <option [ngValue]="staffDashboardService.Period.Today">Today</option>
+        <option [ngValue]="staffDashboardService.Period.Week">Week</option>
+      </select>
+      <span
+        class="flex items-center justify-center h-full pointer-events-none z-10 right-0 relative col-start-1 row-start-1 self-center justify-self-end w-[36px] after:block after:w-[1px] after:absolute after:left-[1px] after:top-[7px] after:bottom-[7px] after:bg-gray-100"
+      >
+        <i class="bi bi-arrow-down-short text-[24px]"></i>
+      </span>
+    </div>
+  </div>
+
+  <div class="grid gap-[20px] grid-flow-row pr-5">
+    <!-- column -->
+    <div class="grid grid-flow-col grid-cols-[220px_5px_220px] gap-[15px]">
+      <div>
+        <label
+          for="startDate"
+          class="font-open-sans text-nav-disabled text-xs font-bold uppercase"
+          >Start Date</label
+        >
+
+        <!-- input date -->
+        <div class="grid relative w-full max-w-[220px]">
+          <input
+          [formControl]="staffDashboardService.date"
+            type="date"
+            id="startDate"
+            class="w-full block text-[14px] px-2 py-1 border row-start-1 col-start-1 self-center justify-self-end border-black appearance-none focus:outline-none placeholder:text-gray-100 bg-blue-900 rounded h-[36px] uppercase"
+          />
+          <span
+            class="flex items-center justify-center h-full pointer-events-none z-10 right-0 relative col-start-1 row-start-1 self-center justify-self-end w-[36px] after:block after:w-[1px] after:absolute after:left-[1px] after:top-[7px] after:bottom-[7px] after:bg-gray-100"
+          >
+            <i class="bi bi-arrow-down-short text-[24px] bg-blue-900"></i>
+          </span>
+        </div>
+      </div>
+
+      <div class="flex align-middle justify-center items-center mt-3">-</div>
+      <div>
+        <label
+          for="endDate"
+          class="font-open-sans text-nav-disabled text-xs font-bold uppercase"
+          >End Date</label
+        >
+
+        <!-- input date -->
+        <div class="grid relative w-full max-w-[220px]">
+          <input
+            readonly
+            [value]="endDate"
+            type="date"
+            id="endDate"
+            class="w-full block text-[14px] px-2 py-1 border row-start-1 col-start-1 self-center justify-self-end border-black appearance-none focus:outline-none placeholder:text-gray-100 bg-blue-900 rounded h-[36px] uppercase"
+          />
+          <span
+            class="flex items-center justify-center h-full pointer-events-none z-10 right-0 relative col-start-1 row-start-1 self-center justify-self-end w-[36px] after:block after:w-[1px] after:absolute after:left-[1px] after:top-[7px] after:bottom-[7px] after:bg-gray-100"
+          >
+            <i class="bi bi-arrow-down-short text-[24px] bg-blue-900"></i>
+          </span>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-search-filter/staff-dashboard-search-filter.component.ts b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-search-filter/staff-dashboard-search-filter.component.ts
new file mode 100644
index 00000000..08479bdc
--- /dev/null
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-search-filter/staff-dashboard-search-filter.component.ts
@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input, input } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { StaffDashboardService } from '../service/staff-dashboard.service';
+
+@Component({
+  selector: 'hq-staff-dashboard-search-filter',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, FormsModule],
+  templateUrl: './staff-dashboard-search-filter.component.html',
+})
+export class StaffDashboardSearchFilterComponent {
+  @Input() endDate?: string;
+  constructor(public staffDashboardService: StaffDashboardService) {}
+}
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.ts b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.ts
index 39931868..941d3ec0 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.ts
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.ts
@@ -13,7 +13,7 @@ import {
   GetDashboardTimeV1ProjectActivity,
   GetDashboardTimeV1TimeForDateTimes,
 } from '../../models/staff-dashboard/get-dashboard-time-v1';
-import { StaffDashboardService } from '../staff-dashboard.service';
+import { StaffDashboardService } from '../service/staff-dashboard.service';
 import {
   FormControl,
   FormGroup,
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
index 19ffef12..ffbcf86b 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
@@ -1,14 +1,12 @@
-<label class="block"
-  >Search
-  <input [formControl]="staffDashboardService.search" class="text-black" />
-</label>
-<label class="block"
-  >Period
-  <select [formControl]="staffDashboardService.period" class="text-black">
-    <option [ngValue]="Period.Today">Day</option>
-    <option [ngValue]="Period.Week">Week</option>
-  </select>
-</label>
+<div class="px-5 pt-4 mb-[8px]">
+  <div class="flex flex-col lg:flex-row justify-between items-start">
+    <div class="flex items-center order-2 lg:order-1 gap-[20px]">
+@if (staffDashboardService.time$ | async; as dashboard) {
+      <hq-staff-dashboard-search-filter [endDate] = "dashboard.endDate" />
+}
+    </div>
+  </div>
+</div>
 <label class="block"
   >Date
   <input
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts
index 0a54db89..3472545f 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts
@@ -1,5 +1,5 @@
 import { Component } from '@angular/core';
-import { StaffDashboardService } from './staff-dashboard.service';
+import { StaffDashboardService } from './service/staff-dashboard.service';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
 import { Period } from '../models/times/get-time-v1';
@@ -14,6 +14,7 @@ import { HQService } from '../services/hq.service';
 import { APIError } from '../errors/apierror';
 import { ToastService } from '../services/toast.service';
 import { ModalService } from '../services/modal.service';
+import { StaffDashboardSearchFilterComponent } from './staff-dashboard-search-filter/staff-dashboard-search-filter.component';
 
 @Component({
   selector: 'hq-staff-dashboard',
@@ -22,6 +23,7 @@ import { ModalService } from '../services/modal.service';
     CommonModule,
     ReactiveFormsModule,
     StaffDashboardTimeEntryComponent,
+    StaffDashboardSearchFilterComponent,
   ],
   providers: [StaffDashboardService],
   templateUrl: './staff-dashboard.component.html',

From 46dd42440710c3c05edff1206dd470e4bdbf06bc Mon Sep 17 00:00:00 2001
From: Ryan Maffit <rmaffit@sancsoft.com>
Date: Mon, 24 Jun 2024 20:32:58 +0000
Subject: [PATCH 06/25] Added more colors, update on blur for time entry form

---
 .../common/functions/charge-code-to-color.ts  | 42 +++++++++++++++----
 .../staff-dashboard-time-entry.component.ts   | 14 +++++--
 .../staff-dashboard.component.html            | 18 ++++----
 3 files changed, 53 insertions(+), 21 deletions(-)

diff --git a/src/angular/hq/src/app/common/functions/charge-code-to-color.ts b/src/angular/hq/src/app/common/functions/charge-code-to-color.ts
index 30cb25a8..a70d1e0c 100644
--- a/src/angular/hq/src/app/common/functions/charge-code-to-color.ts
+++ b/src/angular/hq/src/app/common/functions/charge-code-to-color.ts
@@ -1,12 +1,36 @@
 const colors = [
-  '#7FB5B5',
-  '#646B63',
-  '#317F43',
-  '#E7EBDA',
-  '#A5A5A5',
-  '#82898F',
-  '#E4A010',
-  '#E1CC4F',
+  '#EDFF21',
+  '#287233',
+  '#4C514A',
+  '#EDFF21',
+  '#252850',
+  '#F4F4F4',
+  '#B8B799',
+  '#763C28',
+  '#5E2129',
+  '#8E402A',
+  '#E55137',
+  '#5E2129',
+  '#4C514A',
+  '#686C5E',
+  '#606E8C',
+  '#D84B20',
+  '#705335',
+  '#9D9101',
+  '#F44611',
+  '#1E213D',
+  '#E55137',
+  '#382C1E',
+  '#1D334A',
+  '#403A3A',
+  '#008F39',
+  '#5D9B9B',
+  '#2F4538',
+  '#1E2460',
+  '#F4F4F4',
+  '#4E3B31',
+  '#C6A664',
+  '#8A6642',
 ];
 
 function hexToRgb(hex: string) {
@@ -20,7 +44,7 @@ function hexToRgb(hex: string) {
     : null;
 }
 
-export function chargeCodeToColor(code: string, opacity = 0.4) {
+export function chargeCodeToColor(code: string, opacity = 0.5) {
   const value = code.charCodeAt(0) * 10000 + parseInt(code.substring(1));
   const hexColor = colors[value % colors.length];
   const rgb = hexToRgb(hexColor);
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.ts b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.ts
index 941d3ec0..4a53147e 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.ts
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.ts
@@ -94,10 +94,16 @@ export class StaffDashboardTimeEntryComponent implements OnChanges, OnDestroy {
 
   form = new FormGroup<Form>({
     id: new FormControl<string | null>(null),
-    date: new FormControl<string | null>(null, [Validators.required]),
-    hours: new FormControl<number | null>(null, [Validators.required]),
-    notes: new FormControl<string | null>(null, [Validators.required]),
-    task: new FormControl<string | null>(null),
+    date: new FormControl<string | null>(null),
+    hours: new FormControl<number | null>(null, {
+      updateOn: 'blur',
+      validators: [Validators.required],
+    }),
+    notes: new FormControl<string | null>(null, {
+      updateOn: 'blur',
+      validators: [Validators.required],
+    }),
+    task: new FormControl<string | null>(null, { updateOn: 'blur' }),
     chargeCode: new FormControl<string | null>(null),
     chargeCodeId: new FormControl<string | null>(null, [Validators.required]),
     clientId: new FormControl<string | null>(null),
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
index ffbcf86b..2be90e61 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
@@ -1,9 +1,9 @@
 <div class="px-5 pt-4 mb-[8px]">
   <div class="flex flex-col lg:flex-row justify-between items-start">
     <div class="flex items-center order-2 lg:order-1 gap-[20px]">
-@if (staffDashboardService.time$ | async; as dashboard) {
-      <hq-staff-dashboard-search-filter [endDate] = "dashboard.endDate" />
-}
+      @if (staffDashboardService.time$ | async; as dashboard) {
+        <hq-staff-dashboard-search-filter [endDate]="dashboard.endDate" />
+      }
     </div>
   </div>
 </div>
@@ -41,11 +41,13 @@
   <div>Total Hours: {{ dashboard.totalHours }}</div>
   <div>Billable Hours: {{ dashboard.billableHours }}</div>
   @for (date of dashboard.dates; track date.date) {
-    <div
-      class="px-5 pb-1 pt-4 font-open-sans text-nav-disabled text-xs font-bold uppercase"
-    >
-      {{ date.date | date: "EEEE" }} | {{ date.date }}
-    </div>
+    @if (dashboard.dates.length > 1) {
+      <div
+        class="px-5 pb-1 pt-4 font-open-sans text-nav-disabled text-xs font-bold uppercase"
+      >
+        {{ date.date | date: "EEEE" }} | {{ date.date }}
+      </div>
+    }
     <table class="min-w-full border-spacing-0 border-separate">
       <thead>
         <tr class="text-left">

From 961012f6769f34591719f6d196da548bd0d3e3fe Mon Sep 17 00:00:00 2001
From: Ryan Maffit <rmaffit@sancsoft.com>
Date: Mon, 24 Jun 2024 20:35:06 +0000
Subject: [PATCH 07/25] CSS class adjustment

---
 .../staff-dashboard-time-entry.component.html                   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.html b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.html
index 88a229b1..8bd7a0ca 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.html
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.html
@@ -17,7 +17,7 @@
   <td class="border-b border-black py-2 pl-2 text-center">
     @if (form.controls.chargeCode.value) {
       <span
-        class="px-3 py-1 font-semibold rounded-full bg-opacity-25"
+        class="px-3 py-1 font-semibold rounded-full"
         [style.background-color]="
           chargeCodeToColor(form.controls.chargeCode.value)
         "

From b1a463a29b158d1294b69ef949ff4991734420eb Mon Sep 17 00:00:00 2001
From: amrmahdyy <amrmahdy2@gmail.com>
Date: Tue, 25 Jun 2024 11:39:21 -0400
Subject: [PATCH 08/25] added headers components to dashboard staff UI

---
 src/angular/hq/.husky/pre-commit              |   1 +
 src/angular/hq/package-lock.json              | 644 +++++++++++++++++-
 src/angular/hq/package.json                   |   8 +-
 .../staff-dashboard-date-range.component.html |  74 ++
 .../staff-dashboard-date-range.component.ts   |  16 +
 ...aff-dashboard-search-filter.component.html |  58 +-
 ...staff-dashboard-search-filter.component.ts |   1 -
 .../staff-dashboard.component.html            |  64 +-
 .../staff-dashboard.component.ts              |   2 +
 9 files changed, 765 insertions(+), 103 deletions(-)
 create mode 100644 src/angular/hq/.husky/pre-commit
 create mode 100644 src/angular/hq/src/app/staff-dashboard/staff-dashboard-date-range/staff-dashboard-date-range.component.html
 create mode 100644 src/angular/hq/src/app/staff-dashboard/staff-dashboard-date-range/staff-dashboard-date-range.component.ts

diff --git a/src/angular/hq/.husky/pre-commit b/src/angular/hq/.husky/pre-commit
new file mode 100644
index 00000000..2312dc58
--- /dev/null
+++ b/src/angular/hq/.husky/pre-commit
@@ -0,0 +1 @@
+npx lint-staged
diff --git a/src/angular/hq/package-lock.json b/src/angular/hq/package-lock.json
index 74a83d63..b6771bf3 100644
--- a/src/angular/hq/package-lock.json
+++ b/src/angular/hq/package-lock.json
@@ -44,12 +44,14 @@
         "autoprefixer": "^10.4.19",
         "eslint": "^8.57.0",
         "eslint-config-prettier": "^9.1.0",
+        "husky": "^9.0.11",
         "jasmine-core": "~5.1.0",
         "karma": "~6.4.0",
         "karma-chrome-launcher": "~3.2.0",
         "karma-coverage": "~2.2.0",
         "karma-jasmine": "~5.1.0",
         "karma-jasmine-html-reporter": "~2.1.0",
+        "lint-staged": "^15.2.7",
         "postcss": "^8.4.38",
         "prettier": "^3.3.2",
         "tailwindcss": "^3.4.3",
@@ -5958,6 +5960,72 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/cli-truncate": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/cli-truncate/-/cli-truncate-4.0.0.tgz",
+      "integrity": "sha512-nPdaFdQ0h/GEigbPClz11D0v/ZJEwxmeVZGeMo3Z5StPtUTkA9o1lD6QwoirYiSDzbcwn2XcjwmCp68W1IS4TA==",
+      "dev": true,
+      "dependencies": {
+        "slice-ansi": "^5.0.0",
+        "string-width": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cli-truncate/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/cli-truncate/node_modules/emoji-regex": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.3.0.tgz",
+      "integrity": "sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==",
+      "dev": true
+    },
+    "node_modules/cli-truncate/node_modules/string-width": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.1.0.tgz",
+      "integrity": "sha512-SEIJCWiX7Kg4c129n48aDRwLbFb2LJmXXFrWBG4NGaRtMQ3myKPKbwrD1BKqQn74oCoNMBVrfDEr5M9YxCsrkw==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^10.3.0",
+        "get-east-asian-width": "^1.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/cli-truncate/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
     "node_modules/cli-width": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/cli-width/-/cli-width-4.1.0.tgz",
@@ -8809,6 +8877,18 @@
         "node": "6.* || 8.* || >= 10.*"
       }
     },
+    "node_modules/get-east-asian-width": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/get-east-asian-width/-/get-east-asian-width-1.2.0.tgz",
+      "integrity": "sha512-2nk+7SIVb14QrgXFHcm84tD4bKQz0RxPuMT8Ag5KPOq7J5fEmAg0UbXdTOSHqNuHSU28k55qnceesxXRZGzKWA==",
+      "dev": true,
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/get-intrinsic": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
@@ -9237,6 +9317,21 @@
         "node": ">=10.17.0"
       }
     },
+    "node_modules/husky": {
+      "version": "9.0.11",
+      "resolved": "https://registry.npmjs.org/husky/-/husky-9.0.11.tgz",
+      "integrity": "sha512-AB6lFlbwwyIqMdHYhwPe+kjOC3Oc5P3nThEoW/AaO2BX3vJDjWPFxYLxokUZOo6RNX20He3AaT8sESs9NJcmEw==",
+      "dev": true,
+      "bin": {
+        "husky": "bin.mjs"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/typicode"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -10585,6 +10680,302 @@
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
       "dev": true
     },
+    "node_modules/lint-staged": {
+      "version": "15.2.7",
+      "resolved": "https://registry.npmjs.org/lint-staged/-/lint-staged-15.2.7.tgz",
+      "integrity": "sha512-+FdVbbCZ+yoh7E/RosSdqKJyUM2OEjTciH0TFNkawKgvFp1zbGlEC39RADg+xKBG1R4mhoH2j85myBQZ5wR+lw==",
+      "dev": true,
+      "dependencies": {
+        "chalk": "~5.3.0",
+        "commander": "~12.1.0",
+        "debug": "~4.3.4",
+        "execa": "~8.0.1",
+        "lilconfig": "~3.1.1",
+        "listr2": "~8.2.1",
+        "micromatch": "~4.0.7",
+        "pidtree": "~0.6.0",
+        "string-argv": "~0.3.2",
+        "yaml": "~2.4.2"
+      },
+      "bin": {
+        "lint-staged": "bin/lint-staged.js"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/lint-staged"
+      }
+    },
+    "node_modules/lint-staged/node_modules/chalk": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz",
+      "integrity": "sha512-dLitG79d+GV1Nb/VYcCDFivJeK1hiukt9QjRNVOsUtTy1rR1YJsmpGGTZ3qJos+uw7WmWF4wUwBd9jxjocFC2w==",
+      "dev": true,
+      "engines": {
+        "node": "^12.17.0 || ^14.13 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/lint-staged/node_modules/commander": {
+      "version": "12.1.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-12.1.0.tgz",
+      "integrity": "sha512-Vw8qHK3bZM9y/P10u3Vib8o/DdkvA2OtPtZvD871QKjy74Wj1WSKFILMPRPSdUSx5RFK1arlJzEtA4PkFgnbuA==",
+      "dev": true,
+      "engines": {
+        "node": ">=18"
+      }
+    },
+    "node_modules/lint-staged/node_modules/execa": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz",
+      "integrity": "sha512-VyhnebXciFV2DESc+p6B+y0LjSm0krU4OgJN44qFAhBY0TJ+1V61tYD2+wHusZ6F9n5K+vl8k0sTy7PEfV4qpg==",
+      "dev": true,
+      "dependencies": {
+        "cross-spawn": "^7.0.3",
+        "get-stream": "^8.0.1",
+        "human-signals": "^5.0.0",
+        "is-stream": "^3.0.0",
+        "merge-stream": "^2.0.0",
+        "npm-run-path": "^5.1.0",
+        "onetime": "^6.0.0",
+        "signal-exit": "^4.1.0",
+        "strip-final-newline": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=16.17"
+      },
+      "funding": {
+        "url": "https://github.com/sindresorhus/execa?sponsor=1"
+      }
+    },
+    "node_modules/lint-staged/node_modules/get-stream": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-8.0.1.tgz",
+      "integrity": "sha512-VaUJspBffn/LMCJVoMvSAdmscJyS1auj5Zulnn5UoYcY531UWmdwhRWkcGKnGU93m5HSXP9LP2usOryrBtQowA==",
+      "dev": true,
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lint-staged/node_modules/human-signals": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz",
+      "integrity": "sha512-AXcZb6vzzrFAUE61HnN4mpLqd/cSIwNQjtNWR0euPm6y0iqx3G4gOXaIDdtdDwZmhwe82LA6+zinmW4UBWVePQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=16.17.0"
+      }
+    },
+    "node_modules/lint-staged/node_modules/is-stream": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz",
+      "integrity": "sha512-LnQR4bZ9IADDRSkvpqMGvt/tEJWclzklNgSw48V5EAaAeDd6qGvN8ei6k5p0tvxSR171VmGyHuTiAOfxAbr8kA==",
+      "dev": true,
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lint-staged/node_modules/lilconfig": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.2.tgz",
+      "integrity": "sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/lint-staged/node_modules/mimic-fn": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
+      "integrity": "sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lint-staged/node_modules/npm-run-path": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-5.3.0.tgz",
+      "integrity": "sha512-ppwTtiJZq0O/ai0z7yfudtBpWIoxM8yE6nHi1X47eFR2EWORqfbu6CnPlNsjeN683eT0qG6H/Pyf9fCcvjnnnQ==",
+      "dev": true,
+      "dependencies": {
+        "path-key": "^4.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lint-staged/node_modules/onetime": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/onetime/-/onetime-6.0.0.tgz",
+      "integrity": "sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==",
+      "dev": true,
+      "dependencies": {
+        "mimic-fn": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lint-staged/node_modules/path-key": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-key/-/path-key-4.0.0.tgz",
+      "integrity": "sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/lint-staged/node_modules/signal-exit": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-4.1.0.tgz",
+      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/lint-staged/node_modules/strip-final-newline": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-final-newline/-/strip-final-newline-3.0.0.tgz",
+      "integrity": "sha512-dOESqjYr96iWYylGObzd39EuNTa5VJxyvVAEm5Jnh7KGo75V43Hk1odPQkNDyXNmUR6k+gEiDVXnjB8HJ3crXw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/listr2": {
+      "version": "8.2.3",
+      "resolved": "https://registry.npmjs.org/listr2/-/listr2-8.2.3.tgz",
+      "integrity": "sha512-Lllokma2mtoniUOS94CcOErHWAug5iu7HOmDrvWgpw8jyQH2fomgB+7lZS4HWZxytUuQwkGOwe49FvwVaA85Xw==",
+      "dev": true,
+      "dependencies": {
+        "cli-truncate": "^4.0.0",
+        "colorette": "^2.0.20",
+        "eventemitter3": "^5.0.1",
+        "log-update": "^6.0.0",
+        "rfdc": "^1.4.1",
+        "wrap-ansi": "^9.0.0"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      }
+    },
+    "node_modules/listr2/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/listr2/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/listr2/node_modules/emoji-regex": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.3.0.tgz",
+      "integrity": "sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==",
+      "dev": true
+    },
+    "node_modules/listr2/node_modules/eventemitter3": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.1.tgz",
+      "integrity": "sha512-GWkBvjiSZK87ELrYOSESUYeVIc9mvLLf/nXalMOS5dYrgZq9o5OVkbZAVM06CVxYsCwH9BDZFPlQTlPA1j4ahA==",
+      "dev": true
+    },
+    "node_modules/listr2/node_modules/string-width": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.1.0.tgz",
+      "integrity": "sha512-SEIJCWiX7Kg4c129n48aDRwLbFb2LJmXXFrWBG4NGaRtMQ3myKPKbwrD1BKqQn74oCoNMBVrfDEr5M9YxCsrkw==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^10.3.0",
+        "get-east-asian-width": "^1.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/listr2/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/listr2/node_modules/wrap-ansi": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.0.tgz",
+      "integrity": "sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "string-width": "^7.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/loader-runner": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.0.tgz",
@@ -10725,6 +11116,178 @@
         "node": ">=8"
       }
     },
+    "node_modules/log-update": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/log-update/-/log-update-6.0.0.tgz",
+      "integrity": "sha512-niTvB4gqvtof056rRIrTZvjNYE4rCUzO6X/X+kYjd7WFxXeJ0NwEFnRxX6ehkvv3jTwrXnNdtAak5XYZuIyPFw==",
+      "dev": true,
+      "dependencies": {
+        "ansi-escapes": "^6.2.0",
+        "cli-cursor": "^4.0.0",
+        "slice-ansi": "^7.0.0",
+        "strip-ansi": "^7.1.0",
+        "wrap-ansi": "^9.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-update/node_modules/ansi-escapes": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-6.2.1.tgz",
+      "integrity": "sha512-4nJ3yixlEthEJ9Rk4vPcdBRkZvQZlYyu8j4/Mqz5sgIkddmEnH2Yj2ZrnP9S3tQOvSNRUIgVNF/1yPpRAGNRig==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.16"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-update/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/log-update/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/log-update/node_modules/cli-cursor": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/cli-cursor/-/cli-cursor-4.0.0.tgz",
+      "integrity": "sha512-VGtlMu3x/4DOtIUwEkRezxUZ2lBacNJCHash0N0WeZDBS+7Ux1dm3XWAgWYxLJFMMdOeXMHXorshEFhbMSGelg==",
+      "dev": true,
+      "dependencies": {
+        "restore-cursor": "^4.0.0"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-update/node_modules/emoji-regex": {
+      "version": "10.3.0",
+      "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-10.3.0.tgz",
+      "integrity": "sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==",
+      "dev": true
+    },
+    "node_modules/log-update/node_modules/is-fullwidth-code-point": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-5.0.0.tgz",
+      "integrity": "sha512-OVa3u9kkBbw7b8Xw5F9P+D/T9X+Z4+JruYVNapTjPYZYUznQ5YfWeFkOj606XYYW8yugTfC8Pj0hYqvi4ryAhA==",
+      "dev": true,
+      "dependencies": {
+        "get-east-asian-width": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-update/node_modules/restore-cursor": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-4.0.0.tgz",
+      "integrity": "sha512-I9fPXU9geO9bHOt9pHHOhOkYerIMsmVaWB0rA2AI9ERh/+x/i7MV5HKBNrg+ljO5eoPVgCcnFuRjJ9uH6I/3eg==",
+      "dev": true,
+      "dependencies": {
+        "onetime": "^5.1.0",
+        "signal-exit": "^3.0.2"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-update/node_modules/slice-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-7.1.0.tgz",
+      "integrity": "sha512-bSiSngZ/jWeX93BqeIAbImyTbEihizcwNjFoRUIY/T1wWQsfsm2Vw1agPKylXvQTU7iASGdHhyqRlqQzfz+Htg==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "is-fullwidth-code-point": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
+      }
+    },
+    "node_modules/log-update/node_modules/string-width": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-7.1.0.tgz",
+      "integrity": "sha512-SEIJCWiX7Kg4c129n48aDRwLbFb2LJmXXFrWBG4NGaRtMQ3myKPKbwrD1BKqQn74oCoNMBVrfDEr5M9YxCsrkw==",
+      "dev": true,
+      "dependencies": {
+        "emoji-regex": "^10.3.0",
+        "get-east-asian-width": "^1.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/log-update/node_modules/strip-ansi": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.1.0.tgz",
+      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/log-update/node_modules/wrap-ansi": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-9.0.0.tgz",
+      "integrity": "sha512-G8ura3S+3Z2G+mkgNRq8dqaFZAuxfsxpBB8OCTGRTCtp+l/v9nbFNmCUP1BZMts3G1142MsZfn6eeUKrr4PD1Q==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^6.2.1",
+        "string-width": "^7.0.0",
+        "strip-ansi": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
+      }
+    },
     "node_modules/log4js": {
       "version": "6.9.1",
       "resolved": "https://registry.npmjs.org/log4js/-/log4js-6.9.1.tgz",
@@ -11382,12 +11945,12 @@
       "optional": true
     },
     "node_modules/micromatch": {
-      "version": "4.0.5",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
-      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.7.tgz",
+      "integrity": "sha512-LPP/3KorzCwBxfeUuZmaR6bG2kdeHSbe0P2tY3FLRU4vYrjYz5hI4QZwV0njUx3jeuKe67YukQ1LSPZBKDqO/Q==",
       "dev": true,
       "dependencies": {
-        "braces": "^3.0.2",
+        "braces": "^3.0.3",
         "picomatch": "^2.3.1"
       },
       "engines": {
@@ -13022,6 +13585,18 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pidtree": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/pidtree/-/pidtree-0.6.0.tgz",
+      "integrity": "sha512-eG2dWTVw5bzqGRztnHExczNxt5VGsE6OwTeCG3fdUf9KBsZzO3R5OIIIzWR+iZA0NtZ+RDVdaoE2dK1cn6jH4g==",
+      "dev": true,
+      "bin": {
+        "pidtree": "bin/pidtree.js"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/pify": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz",
@@ -13931,9 +14506,9 @@
       "integrity": "sha512-MjOWxM065+WswwnmNONOT+bD1nXzY9Km6u3kzvnx8F8/HXGZdz3T6e6vZJ8Q/RIMUSp/nxqjH3GwvJDy8ijeQQ=="
     },
     "node_modules/rfdc": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.3.1.tgz",
-      "integrity": "sha512-r5a3l5HzYlIC68TpmYKlxWjmOP6wiPJ1vWv2HeLhNsRZMrCkxeqxiHlQ21oXmQ4F3SiryXBHhAD7JZqvOJjFmg==",
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/rfdc/-/rfdc-1.4.1.tgz",
+      "integrity": "sha512-q1b3N5QkRUWUl7iyylaaj3kOpIT0N2i9MqIEQXP73GVsN9cw3fdx8X63cEmWhJGi2PPCF23Ijp7ktmd39rawIA==",
       "dev": true
     },
     "node_modules/rimraf": {
@@ -14530,6 +15105,46 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/slice-ansi": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-5.0.0.tgz",
+      "integrity": "sha512-FC+lgizVPfie0kkhqUScwRu1O/lF6NOgJmlCgK+/LYxDCTk8sGelYaHDhFcDN+Sn3Cv+3VSa4Byeo+IMCzpMgQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^6.0.0",
+        "is-fullwidth-code-point": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/slice-ansi?sponsor=1"
+      }
+    },
+    "node_modules/slice-ansi/node_modules/ansi-styles": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-6.2.1.tgz",
+      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/slice-ansi/node_modules/is-fullwidth-code-point": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-4.0.0.tgz",
+      "integrity": "sha512-O4L094N2/dZ7xqVdrXhh9r1KODPJpFms8B5sGdJLPy664AgvXsreZUyCQQNItZRDlYug4xStLjNp/sz3HvBowQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/smart-buffer": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/smart-buffer/-/smart-buffer-4.2.0.tgz",
@@ -14801,6 +15416,15 @@
         "safe-buffer": "~5.2.0"
       }
     },
+    "node_modules/string-argv": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/string-argv/-/string-argv-0.3.2.tgz",
+      "integrity": "sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.6.19"
+      }
+    },
     "node_modules/string-width": {
       "version": "4.2.3",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
@@ -16738,9 +17362,9 @@
       "dev": true
     },
     "node_modules/yaml": {
-      "version": "2.4.1",
-      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.1.tgz",
-      "integrity": "sha512-pIXzoImaqmfOrL7teGUBt/T7ZDnyeGBWyXQBvOVhLkWLN37GXv8NMLK406UY6dS51JfcQHsmcW5cJ441bHg6Lg==",
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.4.5.tgz",
+      "integrity": "sha512-aBx2bnqDzVOyNKfsysjA2ms5ZlnjSAW2eG3/L5G/CSujfjLJTJsEw1bGw8kCf04KodQWk1pxlGnZ56CRxiawmg==",
       "dev": true,
       "bin": {
         "yaml": "bin.mjs"
diff --git a/src/angular/hq/package.json b/src/angular/hq/package.json
index f30cc44a..b6c8fc2e 100644
--- a/src/angular/hq/package.json
+++ b/src/angular/hq/package.json
@@ -1,6 +1,9 @@
 {
   "name": "hq",
   "version": "0.0.0",
+  "lint-staged": {
+    "**/*": "prettier --write --ignore-unknown"
+  },
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
@@ -10,7 +13,8 @@
     "lint": "ng lint",
     "prettier": "prettier",
     "prettier-check": "prettier --check .",
-    "prettier-write": "prettier --write ."
+    "prettier-write": "prettier --write .",
+    "prepare": "husky"
   },
   "private": true,
   "dependencies": {
@@ -50,12 +54,14 @@
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
+    "husky": "^9.0.11",
     "jasmine-core": "~5.1.0",
     "karma": "~6.4.0",
     "karma-chrome-launcher": "~3.2.0",
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
+    "lint-staged": "^15.2.7",
     "postcss": "^8.4.38",
     "prettier": "^3.3.2",
     "tailwindcss": "^3.4.3",
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-date-range/staff-dashboard-date-range.component.html b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-date-range/staff-dashboard-date-range.component.html
new file mode 100644
index 00000000..a6a8560c
--- /dev/null
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-date-range/staff-dashboard-date-range.component.html
@@ -0,0 +1,74 @@
+@if (staffDashboardService.time$ | async; as dashboard) {
+  <div class="flex w-full flex-1 items-center gap-[20px] mb-[8px] xl:mb-0">
+    <div class="grid gap-[20px] grid-flow-row pr-5">
+      <!-- column -->
+      <div class="grid grid-flow-col gap-[15px]">
+        <div
+          class="flex align-middle justify-center items-center mt-4"
+          (click)="staffDashboardService.date.setValue(dashboard.previousDate)"
+        >
+          <i class="bi bi-arrow-left-short text-[28px] cursor-pointer"></i>
+        </div>
+        <div>
+          <label
+            for="startDate"
+            class="font-open-sans text-nav-disabled text-xs font-bold uppercase"
+            >Start Date</label
+          >
+          <!-- input date -->
+          <div class="grid relative w-full max-w-[220px]">
+            <input
+              [formControl]="staffDashboardService.date"
+              type="date"
+              id="startDate"
+              class="w-full block text-[14px] px-2 py-1 border row-start-1 col-start-1 self-center justify-self-end border-black appearance-none focus:outline-none placeholder:text-gray-100 bg-blue-900 rounded h-[36px] uppercase"
+            />
+            <span
+              class="flex items-center justify-center h-full pointer-events-none z-10 right-0 relative col-start-1 row-start-1 self-center justify-self-end w-[36px] after:block after:w-[1px] after:absolute after:left-[1px] after:top-[7px] after:bottom-[7px] after:bg-gray-100"
+            >
+              <i class="bi bi-arrow-down-short text-[24px] bg-blue-900"></i>
+            </span>
+          </div>
+        </div>
+        @if (
+          staffDashboardService.period.value !=
+          staffDashboardService.Period.Today
+        ) {
+          <div class="flex align-middle justify-center items-center mt-4">
+            <span class="w-3 h-1 bg-white"></span>
+          </div>
+          <div>
+            <label
+              for="endDate"
+              class="font-open-sans text-nav-disabled text-xs font-bold uppercase"
+              >End Date</label
+            >
+
+            <!-- input date -->
+            <div class="grid relative w-full max-w-[220px]">
+              <input
+                readonly
+                [value]="(staffDashboardService.time$ | async)?.endDate"
+                type="date"
+                id="endDate"
+                class="w-full block text-[14px] px-2 py-1 border row-start-1 col-start-1 self-center justify-self-end border-black appearance-none focus:outline-none placeholder:text-gray-100 bg-blue-900 rounded h-[36px] uppercase"
+              />
+              <span
+                class="flex items-center justify-center h-full pointer-events-none z-10 right-0 relative col-start-1 row-start-1 self-center justify-self-end w-[36px] after:block after:w-[1px] after:absolute after:left-[1px] after:top-[7px] after:bottom-[7px] after:bg-gray-100"
+              >
+                <i class="bi bi-arrow-down-short text-[24px] bg-blue-900"></i>
+              </span>
+            </div>
+          </div>
+        }
+
+        <div
+          class="flex align-middle justify-center items-center mt-4"
+          (click)="staffDashboardService.date.setValue(dashboard.nextDate)"
+        >
+          <i class="bi bi-arrow-right-short text-[28px] cursor-pointer"></i>
+        </div>
+      </div>
+    </div>
+  </div>
+}
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-date-range/staff-dashboard-date-range.component.ts b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-date-range/staff-dashboard-date-range.component.ts
new file mode 100644
index 00000000..a8450e60
--- /dev/null
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-date-range/staff-dashboard-date-range.component.ts
@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { StaffDashboardService } from '../service/staff-dashboard.service';
+import { CommonModule } from '@angular/common';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+
+@Component({
+  selector: 'hq-staff-dashboard-date-range',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, FormsModule],
+  templateUrl: './staff-dashboard-date-range.component.html'
+})
+export class StaffDashboardDateRangeComponent {
+constructor(public staffDashboardService: StaffDashboardService) {
+
+}
+}
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-search-filter/staff-dashboard-search-filter.component.html b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-search-filter/staff-dashboard-search-filter.component.html
index 933765d4..483f5c03 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-search-filter/staff-dashboard-search-filter.component.html
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-search-filter/staff-dashboard-search-filter.component.html
@@ -7,7 +7,7 @@
     >
     <!-- search bar -->
     <div
-      class="relative flex items-stretch border border-steel-blue-600 text-gray-100 bg-blue-900 rounded h-[36px] w-full max-w-[395px]"
+      class="relative flex items-stretch border border-steel-blue-600 text-gray-100 bg-blue-900 rounded h-[36px] w-full"
     >
       <span
         class="relative flex items-center justify-center text-center whitespace-nowrap w-[36px] hover:cursor-pointer after:block after:w-[1px] after:absolute after:right-[1px] after:top-[6px] after:bottom-[6px] after:bg-gray-100"
@@ -17,7 +17,7 @@
       <input
         type="text"
         [formControl]="staffDashboardService.search"
-        class="w-[100%] block text-[14px] px-2 py-1 appearance-none focus:outline-none hover:cursor-pointer font-medium bg-inherit rounded"
+        class="w-full block text-[14px] px-2 py-1 appearance-none focus:outline-none hover:cursor-pointer font-medium bg-inherit rounded"
         name=""
       />
     </div>
@@ -43,57 +43,5 @@
       </span>
     </div>
   </div>
-
-  <div class="grid gap-[20px] grid-flow-row pr-5">
-    <!-- column -->
-    <div class="grid grid-flow-col grid-cols-[220px_5px_220px] gap-[15px]">
-      <div>
-        <label
-          for="startDate"
-          class="font-open-sans text-nav-disabled text-xs font-bold uppercase"
-          >Start Date</label
-        >
-
-        <!-- input date -->
-        <div class="grid relative w-full max-w-[220px]">
-          <input
-          [formControl]="staffDashboardService.date"
-            type="date"
-            id="startDate"
-            class="w-full block text-[14px] px-2 py-1 border row-start-1 col-start-1 self-center justify-self-end border-black appearance-none focus:outline-none placeholder:text-gray-100 bg-blue-900 rounded h-[36px] uppercase"
-          />
-          <span
-            class="flex items-center justify-center h-full pointer-events-none z-10 right-0 relative col-start-1 row-start-1 self-center justify-self-end w-[36px] after:block after:w-[1px] after:absolute after:left-[1px] after:top-[7px] after:bottom-[7px] after:bg-gray-100"
-          >
-            <i class="bi bi-arrow-down-short text-[24px] bg-blue-900"></i>
-          </span>
-        </div>
-      </div>
-
-      <div class="flex align-middle justify-center items-center mt-3">-</div>
-      <div>
-        <label
-          for="endDate"
-          class="font-open-sans text-nav-disabled text-xs font-bold uppercase"
-          >End Date</label
-        >
-
-        <!-- input date -->
-        <div class="grid relative w-full max-w-[220px]">
-          <input
-            readonly
-            [value]="endDate"
-            type="date"
-            id="endDate"
-            class="w-full block text-[14px] px-2 py-1 border row-start-1 col-start-1 self-center justify-self-end border-black appearance-none focus:outline-none placeholder:text-gray-100 bg-blue-900 rounded h-[36px] uppercase"
-          />
-          <span
-            class="flex items-center justify-center h-full pointer-events-none z-10 right-0 relative col-start-1 row-start-1 self-center justify-self-end w-[36px] after:block after:w-[1px] after:absolute after:left-[1px] after:top-[7px] after:bottom-[7px] after:bg-gray-100"
-          >
-            <i class="bi bi-arrow-down-short text-[24px] bg-blue-900"></i>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
 </div>
+
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-search-filter/staff-dashboard-search-filter.component.ts b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-search-filter/staff-dashboard-search-filter.component.ts
index 08479bdc..d35c284d 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-search-filter/staff-dashboard-search-filter.component.ts
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-search-filter/staff-dashboard-search-filter.component.ts
@@ -10,6 +10,5 @@ import { StaffDashboardService } from '../service/staff-dashboard.service';
   templateUrl: './staff-dashboard-search-filter.component.html',
 })
 export class StaffDashboardSearchFilterComponent {
-  @Input() endDate?: string;
   constructor(public staffDashboardService: StaffDashboardService) {}
 }
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
index 2be90e61..5b2c2ed3 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
@@ -1,45 +1,37 @@
 <div class="px-5 pt-4 mb-[8px]">
-  <div class="flex flex-col lg:flex-row justify-between items-start">
-    <div class="flex items-center order-2 lg:order-1 gap-[20px]">
-      @if (staffDashboardService.time$ | async; as dashboard) {
-        <hq-staff-dashboard-search-filter [endDate]="dashboard.endDate" />
-      }
+  <div class="flex items-end gap-[20px]">
+    <hq-staff-dashboard-search-filter />
+    <div class="inline-flex gap-20 ml-20">
+      <div class="text-white">
+        <label class="uppercase font-bold text-xs">Total Hours</label>
+        <div class="text-4xl">
+          {{ (staffDashboardService.time$ | async)?.totalHours?.toFixed(2) }}
+        </div>
+      </div>
+      <!-- Billable Hours Display -->
+      <div class="text-white">
+        <label class="uppercase font-bold text-xs">Billable Hours</label>
+        <div class="text-4xl">
+          {{ (staffDashboardService.time$ | async)?.billableHours?.toFixed(2) }}
+        </div>
+      </div>
     </div>
   </div>
 </div>
-<label class="block"
-  >Date
-  <input
-    [formControl]="staffDashboardService.date"
-    type="date"
-    class="text-black"
-  />
-</label>
+
+<div class="px-5 py-2 mb-[8px] bg-black-alt">
+  <div class="flex items-end gap-[20px] justify-between">
+    <hq-staff-dashboard-date-range />
+    <button
+      class="inline-block text-center px-2 py-2 border border-orange-500 bg-orange-500 hover:bg-orange-600 hover:border-orange-600 text-white rounded min-w-[120px] font-normal"
+      type="button"
+    >
+      Submit
+    </button>
+  </div>
+</div>
 
 @if (staffDashboardService.time$ | async; as dashboard) {
-  <label class="block"
-    >Date
-    <input
-      [value]="dashboard.endDate"
-      type="date"
-      class="text-black"
-      readonly
-    />
-  </label>
-  <button
-    type="button"
-    (click)="staffDashboardService.date.setValue(dashboard.previousDate)"
-  >
-    Previous
-  </button>
-  <button
-    type="button"
-    (click)="staffDashboardService.date.setValue(dashboard.nextDate)"
-  >
-    Next
-  </button>
-  <div>Total Hours: {{ dashboard.totalHours }}</div>
-  <div>Billable Hours: {{ dashboard.billableHours }}</div>
   @for (date of dashboard.dates; track date.date) {
     @if (dashboard.dates.length > 1) {
       <div
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts
index 3472545f..19c8f6f1 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts
@@ -15,6 +15,7 @@ import { APIError } from '../errors/apierror';
 import { ToastService } from '../services/toast.service';
 import { ModalService } from '../services/modal.service';
 import { StaffDashboardSearchFilterComponent } from './staff-dashboard-search-filter/staff-dashboard-search-filter.component';
+import { StaffDashboardDateRangeComponent } from './staff-dashboard-date-range/staff-dashboard-date-range.component';
 
 @Component({
   selector: 'hq-staff-dashboard',
@@ -24,6 +25,7 @@ import { StaffDashboardSearchFilterComponent } from './staff-dashboard-search-fi
     ReactiveFormsModule,
     StaffDashboardTimeEntryComponent,
     StaffDashboardSearchFilterComponent,
+    StaffDashboardDateRangeComponent
   ],
   providers: [StaffDashboardService],
   templateUrl: './staff-dashboard.component.html',

From c3e7dc32bd4a1a7d66d85f4d1c346a4da3aefaa4 Mon Sep 17 00:00:00 2001
From: amrmahdyy <amrmahdy2@gmail.com>
Date: Tue, 25 Jun 2024 13:07:01 -0400
Subject: [PATCH 09/25] Added TimeStatus Submitted

---
 .../hq/src/app/models/common/time-status.ts   |  1 +
 .../staff-dashboard/get-dashboard-time-v1.ts  |  2 ++
 .../src/app/models/times/submit-times-v1.ts   |  5 +++++
 src/angular/hq/src/app/services/hq.service.ts | 21 ++++++++++++++++++
 .../staff-dashboard.component.html            |  1 +
 .../staff-dashboard.component.ts              | 22 +++++++++++++++++--
 .../Enumerations/TimeStatus.cs                |  3 ++-
 .../Times/GetDashboardTimeV1.cs               |  1 +
 .../HQ.Abstractions/Times/UpsertTimeV1.cs     | 13 +++++++++++
 .../Controllers/TimeEntriesControllerV1.cs    | 12 ++++++++++
 .../HQ.Server/Services/TimeEntryServiceV1.cs  | 18 +++++++++++++++
 11 files changed, 96 insertions(+), 3 deletions(-)
 create mode 100644 src/angular/hq/src/app/models/times/submit-times-v1.ts

diff --git a/src/angular/hq/src/app/models/common/time-status.ts b/src/angular/hq/src/app/models/common/time-status.ts
index 27e60de2..43111610 100644
--- a/src/angular/hq/src/app/models/common/time-status.ts
+++ b/src/angular/hq/src/app/models/common/time-status.ts
@@ -3,4 +3,5 @@ export enum TimeStatus {
   Accepted = 1,
   Rejected = 2,
   RejectedPendingReview = 3,
+  Submitted = 4,
 }
diff --git a/src/angular/hq/src/app/models/staff-dashboard/get-dashboard-time-v1.ts b/src/angular/hq/src/app/models/staff-dashboard/get-dashboard-time-v1.ts
index 1c630b6a..32284f16 100644
--- a/src/angular/hq/src/app/models/staff-dashboard/get-dashboard-time-v1.ts
+++ b/src/angular/hq/src/app/models/staff-dashboard/get-dashboard-time-v1.ts
@@ -1,4 +1,5 @@
 import { Period } from '../../projects/project-create/project-create.component';
+import { TimeStatus } from '../common/time-status';
 
 export interface GetDashboardTimeV1Request {
   staffId: string;
@@ -35,6 +36,7 @@ export interface GetDashboardTimeV1TimeForDateTimes {
   clientId: string | null;
   projectId: string | null;
   activityId: string | null;
+  status: TimeStatus | null;
 }
 
 export interface GetDashboardTimeV1ChargeCode {
diff --git a/src/angular/hq/src/app/models/times/submit-times-v1.ts b/src/angular/hq/src/app/models/times/submit-times-v1.ts
new file mode 100644
index 00000000..480340bd
--- /dev/null
+++ b/src/angular/hq/src/app/models/times/submit-times-v1.ts
@@ -0,0 +1,5 @@
+export interface SubmitTimesRequestV1 {
+  ids: string[] | null;
+}
+
+export interface SubmitTimeResponseV1 {}
diff --git a/src/angular/hq/src/app/services/hq.service.ts b/src/angular/hq/src/app/services/hq.service.ts
index be31b70e..a46eebbf 100644
--- a/src/angular/hq/src/app/services/hq.service.ts
+++ b/src/angular/hq/src/app/services/hq.service.ts
@@ -118,6 +118,10 @@ import {
   DeleteTimeV1Request,
   DeleteTimeV1Response,
 } from '../models/times/delete-time-v1';
+import {
+  SubmitTimeResponseV1,
+  SubmitTimesRequestV1,
+} from '../models/times/submit-times-v1';
 
 @Injectable({
   providedIn: 'root',
@@ -446,6 +450,23 @@ export class HQService {
       }),
     );
   }
+  submitTimesV1(request: Partial<SubmitTimesRequestV1>) {
+    return this.appSettings.apiUrl$.pipe(
+      switchMap((apiUrl) =>
+        this.http.post<SubmitTimeResponseV1>(
+          `${apiUrl}/v1/TimeEntries/SubmitTimesV1`,
+          request,
+        ),
+      ),
+      catchError((err: HttpErrorResponse) => {
+        if (err.status == 400) {
+          return throwError(() => new APIError(err.error));
+        }
+
+        throw err;
+      }),
+    );
+  }
   deleteTimeV1(request: Partial<DeleteTimeV1Request>) {
     return this.appSettings.apiUrl$.pipe(
       switchMap((apiUrl) =>
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
index 5b2c2ed3..2ea5bcda 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
@@ -25,6 +25,7 @@
     <button
       class="inline-block text-center px-2 py-2 border border-orange-500 bg-orange-500 hover:bg-orange-600 hover:border-orange-600 text-white rounded min-w-[120px] font-normal"
       type="button"
+      (click)="submitTimes()"
     >
       Submit
     </button>
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts
index 19c8f6f1..6554acbd 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts
@@ -9,7 +9,7 @@ import {
   StaffDashboardTimeEntryComponent,
 } from './staff-dashboard-time-entry/staff-dashboard-time-entry.component';
 import { updateTimeRequestV1 } from '../models/times/update-time-v1';
-import { firstValueFrom } from 'rxjs';
+import { firstValueFrom, map } from 'rxjs';
 import { HQService } from '../services/hq.service';
 import { APIError } from '../errors/apierror';
 import { ToastService } from '../services/toast.service';
@@ -25,7 +25,7 @@ import { StaffDashboardDateRangeComponent } from './staff-dashboard-date-range/s
     ReactiveFormsModule,
     StaffDashboardTimeEntryComponent,
     StaffDashboardSearchFilterComponent,
-    StaffDashboardDateRangeComponent
+    StaffDashboardDateRangeComponent,
   ],
   providers: [StaffDashboardService],
   templateUrl: './staff-dashboard.component.html',
@@ -101,4 +101,22 @@ export class StaffDashboardComponent {
       }
     }
   }
+  async submitTimes() {
+    try {
+      var timesIds = await firstValueFrom(
+        this.staffDashboardService.time$.pipe(
+          map((t) => t.dates.flatMap((d) => d.times.map((time) => time.id))),
+        ),
+      );
+      let submitTimesRequest = { ids: timesIds };
+      await firstValueFrom(this.hqService.submitTimesV1(submitTimesRequest));
+      this.toastService.show('Success', 'Time entries successfully submitted.');
+    } catch (err) {
+      if (err instanceof APIError) {
+        this.toastService.show('Error', err.errors.join('\n'));
+      } else {
+        this.toastService.show('Error', 'An unexpected error has occurred.');
+      }
+    }
+  }
 }
diff --git a/src/dotnet/HQ.Abstractions/Enumerations/TimeStatus.cs b/src/dotnet/HQ.Abstractions/Enumerations/TimeStatus.cs
index 8e4170a6..99e3aca4 100644
--- a/src/dotnet/HQ.Abstractions/Enumerations/TimeStatus.cs
+++ b/src/dotnet/HQ.Abstractions/Enumerations/TimeStatus.cs
@@ -5,5 +5,6 @@ public enum TimeStatus
     Pending = 0,
     Accepted = 1,
     Rejected = 2,
-    RejectedPendingReview = 3
+    RejectedPendingReview = 3,
+    Submitted = 4
 }
\ No newline at end of file
diff --git a/src/dotnet/HQ.Abstractions/Times/GetDashboardTimeV1.cs b/src/dotnet/HQ.Abstractions/Times/GetDashboardTimeV1.cs
index daee4f85..dde4c40a 100644
--- a/src/dotnet/HQ.Abstractions/Times/GetDashboardTimeV1.cs
+++ b/src/dotnet/HQ.Abstractions/Times/GetDashboardTimeV1.cs
@@ -73,6 +73,7 @@ public class TimeEntry
         public Guid? ClientId { get; set; }
         public Guid? ProjectId { get; set; }
         public Guid? ActivityId { get; set; }
+        public TimeStatus TimeStatus { get; set; }
         public string ChargeCode { get; set; } = null!;
     }
 }
\ No newline at end of file
diff --git a/src/dotnet/HQ.Abstractions/Times/UpsertTimeV1.cs b/src/dotnet/HQ.Abstractions/Times/UpsertTimeV1.cs
index ea5a7fab..c0519a86 100644
--- a/src/dotnet/HQ.Abstractions/Times/UpsertTimeV1.cs
+++ b/src/dotnet/HQ.Abstractions/Times/UpsertTimeV1.cs
@@ -120,5 +120,18 @@ public class Response
         }
     }
 
+    public class SubmitTimesV1
+    {
+        public class Request
+        {
+            public required List<Guid> Ids { get; set; }
+
+        }
+
+        public class Response
+        {
+
+        }
+    }
 
 }
\ No newline at end of file
diff --git a/src/dotnet/HQ.Server/Controllers/TimeEntriesControllerV1.cs b/src/dotnet/HQ.Server/Controllers/TimeEntriesControllerV1.cs
index 1cf8d3ff..715cb5d0 100644
--- a/src/dotnet/HQ.Server/Controllers/TimeEntriesControllerV1.cs
+++ b/src/dotnet/HQ.Server/Controllers/TimeEntriesControllerV1.cs
@@ -176,6 +176,7 @@ public async Task<ActionResult> GetTimesV1([FromBody] GetTimesV1.Request request
 
 
 
+
         [Authorize(HQAuthorizationPolicies.Staff)]
         [HttpPost(nameof(DeleteTimeV1))]
         [ProducesResponseType<DeleteTimeV1.Response>(StatusCodes.Status204NoContent)]
@@ -216,6 +217,17 @@ public async Task<ActionResult> GetDashboardTimeV1([FromBody] GetDashboardTimeV1
                 .ToActionResult(new HQResultEndpointProfile());
         }
 
+        [Authorize(HQAuthorizationPolicies.Staff)]
+        [HttpPost(nameof(SubmitTimesV1))]
+        [ProducesResponseType<GetDashboardTimeV1.Response>(StatusCodes.Status200OK)]
+        [ProducesResponseType(StatusCodes.Status404NotFound)]
+        [ProducesResponseType(StatusCodes.Status403Forbidden)]
+        public async Task<ActionResult> SubmitTimesV1([FromBody] SubmitTimesV1.Request request, CancellationToken ct = default)
+        {
+            return await _TimeEntryServiceV1.SubmitTimesV1(request, ct)
+                .ToActionResult(new HQResultEndpointProfile());
+        }
+
 
         [Authorize(HQAuthorizationPolicies.Staff)]
         [HttpPost(nameof(ExportTimesV1))]
diff --git a/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs b/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs
index 1b3cc5ba..9190db8a 100644
--- a/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs
+++ b/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs
@@ -182,6 +182,23 @@ public TimeEntryServiceV1(HQDbContext context)
             await _context.SaveChangesAsync(ct);
             return Result.Ok(new UpsertTimeTaskV1.Response() { Id = timeEntry.Id });
         }
+        public async Task<Result<SubmitTimesV1.Response>> SubmitTimesV1(SubmitTimesV1.Request request, CancellationToken ct = default)
+        {
+            var timeEntries = _context.Times.Where(t => request.Ids.Contains(t.Id));
+            if (timeEntries == null)
+            {
+                return Result.Fail("Time Id is required.");
+            }
+            foreach (var time in timeEntries)
+            {
+                if (time.Status == TimeStatus.Pending)
+                {
+                    time.Status = TimeStatus.Submitted;
+                }
+            }
+            await _context.SaveChangesAsync(ct);
+            return Result.Ok(new SubmitTimesV1.Response() { });
+        }
         public async Task<Result<UpsertTimeActivityV1.Response>> UpsertTimeActivityV1(UpsertTimeActivityV1.Request request, CancellationToken ct = default)
         {
             if (string.IsNullOrEmpty(request.ActivityName))
@@ -485,6 +502,7 @@ public TimeEntryServiceV1(HQDbContext context)
                     Hours = t.Hours,
                     Notes = t.Notes,
                     Task = t.Task,
+                    TimeStatus = t.Status,
                     ProjectId = t.ChargeCode.ProjectId,
                     ClientId = t.ChargeCode.Project != null ? t.ChargeCode.Project.ClientId : null
                 })

From 5af5521f6a03a6296d63c2b0fa5298bf62e2cf5b Mon Sep 17 00:00:00 2001
From: amrmahdyy <amrmahdy2@gmail.com>
Date: Tue, 25 Jun 2024 16:32:44 -0400
Subject: [PATCH 10/25] fixed refresh bug and added timestatus

---
 .../staff-dashboard/get-dashboard-time-v1.ts  |   5 +-
 .../service/staff-dashboard.service.ts        |   5 +-
 .../staff-dashboard-time-entry.component.html | 229 ++++++++++--------
 .../staff-dashboard-time-entry.component.ts   |   3 +
 .../staff-dashboard.component.html            | 147 ++++++-----
 .../staff-dashboard.component.ts              |   3 +
 .../Times/GetDashboardTimeV1.cs               |   3 +
 .../HQ.Server/Services/TimeEntryServiceV1.cs  |   3 +
 8 files changed, 236 insertions(+), 162 deletions(-)

diff --git a/src/angular/hq/src/app/models/staff-dashboard/get-dashboard-time-v1.ts b/src/angular/hq/src/app/models/staff-dashboard/get-dashboard-time-v1.ts
index 32284f16..09c94bea 100644
--- a/src/angular/hq/src/app/models/staff-dashboard/get-dashboard-time-v1.ts
+++ b/src/angular/hq/src/app/models/staff-dashboard/get-dashboard-time-v1.ts
@@ -35,8 +35,11 @@ export interface GetDashboardTimeV1TimeForDateTimes {
   chargeCode: string;
   clientId: string | null;
   projectId: string | null;
+  activityName: string | null;
+  clientName: string | null;
+  projectName: string | null;
   activityId: string | null;
-  status: TimeStatus | null;
+  timeStatus: TimeStatus | null;
 }
 
 export interface GetDashboardTimeV1ChargeCode {
diff --git a/src/angular/hq/src/app/staff-dashboard/service/staff-dashboard.service.ts b/src/angular/hq/src/app/staff-dashboard/service/staff-dashboard.service.ts
index b3cba015..3b242244 100644
--- a/src/angular/hq/src/app/staff-dashboard/service/staff-dashboard.service.ts
+++ b/src/angular/hq/src/app/staff-dashboard/service/staff-dashboard.service.ts
@@ -66,11 +66,10 @@ export class StaffDashboardService {
       tap((response) =>
         this.date.setValue(response.startDate, { emitEvent: false }),
       ),
+      shareReplay(1),
     );
 
-    const refreshTime$ = this.refresh$.pipe(switchMap(() => time$));
-
-    this.time$ = merge(time$, refreshTime$).pipe(
+    this.time$ = merge(time$, this.refresh$.pipe(switchMap(() => time$))).pipe(
       debounceTime(250),
       shareReplay(1),
     );
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.html b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.html
index 8bd7a0ca..1786c8e0 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.html
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.html
@@ -1,87 +1,71 @@
 <ng-container [formGroup]="form">
-  <td class="border-b border-black py-2 pl-5">
-    <input
-      class="w-[100%] block text-right text-[14px] px-2 py-1 border border-black appearance-none focus:outline-none focus:border-white placeholder:text-gray-100 bg-blue-900 rounded h-[30px]"
-      type="number"
-      formControlName="hours"
-    />
-  </td>
-  <td class="border-b border-black py-2 pl-2">
-    <input
-      class="w-[100%] block text-[14px] px-2 py-1 border border-black appearance-none focus:outline-none focus:border-white placeholder:text-gray-100 bg-blue-900 rounded h-[30px]"
-      type="date"
-      formControlName="date"
-      readonly
-    />
-  </td>
-  <td class="border-b border-black py-2 pl-2 text-center">
-    @if (form.controls.chargeCode.value) {
-      <span
-        class="px-3 py-1 font-semibold rounded-full"
-        [style.background-color]="
-          chargeCodeToColor(form.controls.chargeCode.value)
-        "
-      >
-        {{ form.controls.chargeCode.value }}
-      </span>
-    }
-  </td>
-  <td class="border-b border-black py-2 pl-2">
-    <div class="grid relative w-full max-w-[220px]">
-      <select
-        class="w-full pl-2 pr-[43px] appearance-none focus:outline-none hover:cursor-pointer font-medium row-start-1 col-start-1 border focus:border-white border-steel-blue-600 text-gray-100 bg-blue-900 rounded h-[30px]"
-        formControlName="clientId"
-      >
-        <option [ngValue]="null" class="text-gray-50">Client</option>
-        <!-- <option [ngValue]="form.controls.clientId.value">
-        {{ form.controls.clientId.value }}
-      </option> -->
-        @for (
-          client of staffDashboardService.clients$ | async;
-          track client.id
-        ) {
-          <option [ngValue]="client.id">{{ client.name }}</option>
+  @switch (time?.timeStatus) {
+    @case (timeStatus.Pending) {
+      <td class="border-b border-black py-2 bg-gray-300 w-3"></td>
+      <td class="border-b border-black py-2 pl-3 pr-2">
+        <input
+          class="w-10 bg-blue-900 border border-black rounded py-1 px-2 mr-2 text-right appearance-none"
+          type="number"
+          formControlName="hours"
+          step="0.25"
+        />
+      </td>
+      <td class="border-b border-black py-2 pl-2">
+        <input
+          class="w-full block text-[14px] px-2 py-1 border border-black appearance-none focus:outline-none focus:border-white placeholder:text-gray-100 bg-blue-900 rounded h-[30px]"
+          type="date"
+          formControlName="date"
+          readonly
+        />
+      </td>
+      <td class="border-b border-black py-2 pl-2 text-center">
+        @if (form.controls.chargeCode.value) {
+          <span
+            class="px-3 py-1 font-semibold rounded-full"
+            [style.background-color]="
+              chargeCodeToColor(form.controls.chargeCode.value)
+            "
+          >
+            {{ form.controls.chargeCode.value }}
+          </span>
         }
-      </select>
-      <span
-        class="flex items-center justify-center h-full pointer-events-none z-10 right-0 relative col-start-1 row-start-1 self-center justify-self-end w-[36px] after:block after:w-[1px] after:absolute after:left-[1px] after:top-[7px] after:bottom-[7px] after:bg-gray-100"
-      >
-        <i class="bi bi-arrow-down-short text-[24px]"></i>
-      </span>
-    </div>
-  </td>
-  <td class="border-b border-black py-2 pl-2">
-    <div class="grid relative w-full max-w-[220px]">
-      <select
-        class="w-full pl-2 pr-[43px] appearance-none focus:outline-none hover:cursor-pointer font-medium row-start-1 col-start-1 border focus:border-white border-steel-blue-600 text-gray-100 bg-blue-900 rounded h-[30px]"
-        formControlName="projectId"
-      >
-        <option [ngValue]="null" class="text-gray-50">Project</option>
-        <!-- <option [ngValue]="form.controls.projectId.value">
-        {{ form.controls.projectId.value }}
+      </td>
+      <td class="border-b border-black py-2 pl-2">
+        <div class="grid relative w-full max-w-[220px]">
+          <select
+            class="w-full pl-2 pr-[43px] appearance-none focus:outline-none hover:cursor-pointer font-medium row-start-1 col-start-1 border focus:border-white border-steel-blue-600 text-gray-100 bg-blue-900 rounded h-[30px]"
+            formControlName="clientId"
+          >
+            <option [ngValue]="null" class="text-gray-50">Client</option>
+            <!-- <option [ngValue]="form.controls.clientId.value">
+        {{ form.controls.clientId.value }}
       </option> -->
-        @for (project of projects$ | async; track project.id) {
-          <option [ngValue]="project.id">{{ project.name }}</option>
-        }
-      </select>
-      <span
-        class="flex items-center justify-center h-full pointer-events-none z-10 right-0 relative col-start-1 row-start-1 self-center justify-self-end w-[36px] after:block after:w-[1px] after:absolute after:left-[1px] after:top-[7px] after:bottom-[7px] after:bg-gray-100"
-      >
-        <i class="bi bi-arrow-down-short text-[24px]"></i>
-      </span>
-    </div>
-  </td>
-  <td class="border-b border-black py-2 pl-2">
-    @if (activities$ | async; as activities) {
-      @if (activities.length > 0) {
+            @for (
+              client of staffDashboardService.clients$ | async;
+              track client.id
+            ) {
+              <option [ngValue]="client.id">{{ client.name }}</option>
+            }
+          </select>
+          <span
+            class="flex items-center justify-center h-full pointer-events-none z-10 right-0 relative col-start-1 row-start-1 self-center justify-self-end w-[36px] after:block after:w-[1px] after:absolute after:left-[1px] after:top-[7px] after:bottom-[7px] after:bg-gray-100"
+          >
+            <i class="bi bi-arrow-down-short text-[24px]"></i>
+          </span>
+        </div>
+      </td>
+      <td class="border-b border-black py-2 pl-2">
         <div class="grid relative w-full max-w-[220px]">
           <select
             class="w-full pl-2 pr-[43px] appearance-none focus:outline-none hover:cursor-pointer font-medium row-start-1 col-start-1 border focus:border-white border-steel-blue-600 text-gray-100 bg-blue-900 rounded h-[30px]"
-            formControlName="activityId"
+            formControlName="projectId"
           >
-            <option [ngValue]="null" class="text-gray-50">Activity</option>
-            @for (activity of activities$ | async; track activity.id) {
-              <option [ngValue]="activity.id">{{ activity.name }}</option>
+            <option [ngValue]="null" class="text-gray-50">Project</option>
+            <!-- <option [ngValue]="form.controls.projectId.value">
+        {{ form.controls.projectId.value }}
+      </option> -->
+            @for (project of projects$ | async; track project.id) {
+              <option [ngValue]="project.id">{{ project.name }}</option>
             }
           </select>
           <span
@@ -90,31 +74,80 @@
             <i class="bi bi-arrow-down-short text-[24px]"></i>
           </span>
         </div>
-      } @else {
+      </td>
+      <td class="border-b border-black py-2 pl-2">
+        @if (activities$ | async; as activities) {
+          @if (activities.length > 0) {
+            <div class="grid relative w-full max-w-[220px]">
+              <select
+                class="w-full pl-2 pr-[43px] appearance-none focus:outline-none hover:cursor-pointer font-medium row-start-1 col-start-1 border focus:border-white border-steel-blue-600 text-gray-100 bg-blue-900 rounded h-[30px]"
+                formControlName="activityId"
+              >
+                <option [ngValue]="null" class="text-gray-50">Activity</option>
+                @for (activity of activities$ | async; track activity.id) {
+                  <option [ngValue]="activity.id">{{ activity.name }}</option>
+                }
+              </select>
+              <span
+                class="flex items-center justify-center h-full pointer-events-none z-10 right-0 relative col-start-1 row-start-1 self-center justify-self-end w-[36px] after:block after:w-[1px] after:absolute after:left-[1px] after:top-[7px] after:bottom-[7px] after:bg-gray-100"
+              >
+                <i class="bi bi-arrow-down-short text-[24px]"></i>
+              </span>
+            </div>
+          } @else {
+            <input
+              class="w-[100%] block text-[14px] px-2 py-1 border border-black appearance-none focus:outline-none focus:border-white placeholder:text-gray-100 bg-blue-900 rounded h-[30px]"
+              type="text"
+              formControlName="task"
+            />
+          }
+        }
+      </td>
+      <td class="border-b border-black py-2 pl-2">
         <input
           class="w-[100%] block text-[14px] px-2 py-1 border border-black appearance-none focus:outline-none focus:border-white placeholder:text-gray-100 bg-blue-900 rounded h-[30px]"
           type="text"
-          formControlName="task"
+          formControlName="notes"
         />
-      }
+      </td>
+      <td class="border-b border-black py-2 pl-2 pr-5">
+        @if (form.controls.id.value) {
+          <button
+            type="submit"
+            (click)="deleteTime()"
+            class="h-[30px] px-2 py-2 border border-red-950 bg-red-950 hover:bg-red-600 hover:red-orange-600 text-white rounded w-full"
+          >
+            <i class="bi bi-trash"></i>
+          </button>
+        }
+      </td>
     }
-  </td>
-  <td class="border-b border-black py-2 pl-2">
-    <input
-      class="w-[100%] block text-[14px] px-2 py-1 border border-black appearance-none focus:outline-none focus:border-white placeholder:text-gray-100 bg-blue-900 rounded h-[30px]"
-      type="text"
-      formControlName="notes"
-    />
-  </td>
-  <td class="border-b border-black py-2 pl-2 pr-5">
-    @if (form.controls.id.value) {
-      <button
-        type="submit"
-        (click)="deleteTime()"
-        class="h-[30px] px-2 py-2 border border-red-950 bg-red-950 hover:bg-red-600 hover:red-orange-600 text-white rounded w-full"
-      >
-        <i class="bi bi-trash"></i>
-      </button>
+    @case (timeStatus.Submitted) {
+      <td class="border-b border-black py-2 bg-green-300 w-3"></td>
+      <td class="border-b border-black py-2 pl-5">
+        {{ time?.hours }}
+      </td>
+      <td class="border-b border-black py-2 pl-2">
+        {{ time?.date }}
+      </td>
+      <td class="border-b border-black py-2 pl-2 text-center">
+        <span class="px-3 py-1 font-semibold rounded-full">
+          {{ time?.chargeCode }}
+        </span>
+      </td>
+      <td class="border-b border-black py-2 pl-2">
+        {{ time?.clientName }}
+      </td>
+      <td class="border-b border-black py-2 pl-2">
+        {{ time?.projectName }}
+      </td>
+      <td class="border-b border-black py-2 pl-2">
+        {{ time?.activityName || time?.task }}
+      </td>
+      <td class="border-b border-black py-2 pl-2">
+        {{ time?.notes }}
+      </td>
+      <td class="border-b border-black py-2 pl-2 pr-5"></td>
     }
-  </td>
+  }
 </ng-container>
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.ts b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.ts
index 4a53147e..3b1c2f66 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.ts
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.ts
@@ -38,6 +38,7 @@ import {
 } from 'rxjs';
 import { roundToNextQuarter } from '../../common/functions/round-to-next-quarter';
 import { chargeCodeToColor } from '../../common/functions/charge-code-to-color';
+import { TimeStatus } from '../../models/common/time-status';
 
 export interface HQTimeChangeEvent {
   id?: string | null;
@@ -114,6 +115,8 @@ export class StaffDashboardTimeEntryComponent implements OnChanges, OnDestroy {
   projects$: Observable<GetDashboardTimeV1Project[]>;
   activities$: Observable<GetDashboardTimeV1ProjectActivity[]>;
 
+  timeStatus = TimeStatus;
+
   constructor(public staffDashboardService: StaffDashboardService) {
     const form$ = this.form.valueChanges.pipe(shareReplay(1));
 
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
index 2ea5bcda..8cf6457c 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
@@ -41,69 +41,96 @@
         {{ date.date | date: "EEEE" }} | {{ date.date }}
       </div>
     }
-    <table class="min-w-full border-spacing-0 border-separate">
-      <thead>
-        <tr class="text-left">
-          <th
-            class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5"
-            width="90"
-          >
-            Hrs
-          </th>
-          <th
-            class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5"
-            width="120"
-          >
-            Date
-          </th>
-          <th
-            class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5"
-            width="120"
-          >
-            Chrg Code
-          </th>
-          <th
-            class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5"
-            width="180"
-          >
-            Client
-          </th>
-          <th
-            class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5"
-            width="180"
-          >
-            Project
-          </th>
-          <th
-            class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5"
-            width="140"
-          >
-            Activity / Task
-          </th>
-          <th class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5">
-            Description
-          </th>
-          <th
-            class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5"
-            width="20"
-          ></th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr
-          hq-staff-dashboard-time-entry
-          (hqTimeChange)="upsertTime($event)"
-          [time]="{ date: date.date }"
-        ></tr>
-        @for (time of date.times; track time.id) {
+    @if (date.times.length > 0) {
+      <table class="min-w-full border-spacing-0 border-separate">
+        <thead>
+          <tr class="sticky top-0 text-left">
+            <th
+              scope="col"
+              colspan="2"
+              width="120"
+              class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5 pr-2 text-nowrap"
+            >
+              Hrs
+            </th>
+            <th
+              class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5"
+              width="120"
+            >
+              Date
+            </th>
+            <th
+              class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5"
+              width="120"
+            >
+              Chrg Code
+            </th>
+            <th
+              class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5"
+              width="180"
+            >
+              Client
+            </th>
+            <th
+              class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5"
+              width="180"
+            >
+              Project
+            </th>
+            <th
+              class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5"
+              width="140"
+            >
+              Activity / Task
+            </th>
+            <th class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5">
+              Description
+            </th>
+            <th
+              class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5"
+              width="20"
+            ></th>
+          </tr>
+        </thead>
+        <tbody>
           <tr
             hq-staff-dashboard-time-entry
             (hqTimeChange)="upsertTime($event)"
-            (hqTimeDelete)="deleteTime($event)"
-            [time]="time"
+            [time]="{ date: date.date }"
           ></tr>
-        }
-      </tbody>
-    </table>
+          @for (time of date.times; track time.id) {
+            @switch (time.timeStatus) {
+              @case (timeStatus.Submitted) {
+                <tr
+                  hq-staff-dashboard-time-entry
+                  (hqTimeChange)="upsertTime($event)"
+                  (hqTimeDelete)="deleteTime($event)"
+                  [time]="time"
+                  class="even:bg-gray-850 odd:bg-black-alt text-gray-450"
+                ></tr>
+              }
+              @default {
+                <tr
+                  hq-staff-dashboard-time-entry
+                  (hqTimeChange)="upsertTime($event)"
+                  (hqTimeDelete)="deleteTime($event)"
+                  [time]="time"
+                ></tr>
+              }
+            }
+          }
+        </tbody>
+      </table>
+    } @else {
+      <div class="text-center text-white">
+        <p>No records found for this date.</p>
+        <button
+          class="inline-block text-center my-2 px-2 py-2 border border-orange-500 bg-orange-500 hover:bg-orange-600 hover:border-orange-600 text-white rounded min-w-[120px] font-normal"
+          type="button"
+        >
+          Add New Entry
+        </button>
+      </div>
+    }
   }
 }
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts
index 6554acbd..1e3792a1 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts
@@ -16,6 +16,7 @@ import { ToastService } from '../services/toast.service';
 import { ModalService } from '../services/modal.service';
 import { StaffDashboardSearchFilterComponent } from './staff-dashboard-search-filter/staff-dashboard-search-filter.component';
 import { StaffDashboardDateRangeComponent } from './staff-dashboard-date-range/staff-dashboard-date-range.component';
+import { TimeStatus } from '../models/common/time-status';
 
 @Component({
   selector: 'hq-staff-dashboard',
@@ -39,6 +40,7 @@ export class StaffDashboardComponent {
   ) {}
 
   Period = Period;
+  timeStatus = TimeStatus;
 
   async deleteTime(event: HQTimeDeleteEvent) {
     const request = {
@@ -111,6 +113,7 @@ export class StaffDashboardComponent {
       let submitTimesRequest = { ids: timesIds };
       await firstValueFrom(this.hqService.submitTimesV1(submitTimesRequest));
       this.toastService.show('Success', 'Time entries successfully submitted.');
+      this.staffDashboardService.refresh();
     } catch (err) {
       if (err instanceof APIError) {
         this.toastService.show('Error', err.errors.join('\n'));
diff --git a/src/dotnet/HQ.Abstractions/Times/GetDashboardTimeV1.cs b/src/dotnet/HQ.Abstractions/Times/GetDashboardTimeV1.cs
index dde4c40a..282528c4 100644
--- a/src/dotnet/HQ.Abstractions/Times/GetDashboardTimeV1.cs
+++ b/src/dotnet/HQ.Abstractions/Times/GetDashboardTimeV1.cs
@@ -73,6 +73,9 @@ public class TimeEntry
         public Guid? ClientId { get; set; }
         public Guid? ProjectId { get; set; }
         public Guid? ActivityId { get; set; }
+        public string? ActivityName { get; set; }
+        public string? ProjectName { get; set; }
+        public string? ClientName { get; set; }
         public TimeStatus TimeStatus { get; set; }
         public string ChargeCode { get; set; } = null!;
     }
diff --git a/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs b/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs
index 9190db8a..c7d4c034 100644
--- a/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs
+++ b/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs
@@ -502,6 +502,9 @@ public TimeEntryServiceV1(HQDbContext context)
                     Hours = t.Hours,
                     Notes = t.Notes,
                     Task = t.Task,
+                    ActivityName = t.Activity != null ? t.Activity.Name : null,
+                    ProjectName = t.ChargeCode.Project != null ? t.ChargeCode.Project.Name : null,
+                    ClientName = t.ChargeCode.Project != null ? t.ChargeCode.Project.Client.Name : null,
                     TimeStatus = t.Status,
                     ProjectId = t.ChargeCode.ProjectId,
                     ClientId = t.ChargeCode.Project != null ? t.ChargeCode.Project.ClientId : null

From 797b5a11343df5856630d9cc3dd3823551062ade Mon Sep 17 00:00:00 2001
From: amrmahdyy <amrmahdy2@gmail.com>
Date: Tue, 25 Jun 2024 16:47:11 -0400
Subject: [PATCH 11/25] Passed to time a property for status as pending

---
 .../staff-dashboard.component.html            | 166 ++++++++----------
 1 file changed, 77 insertions(+), 89 deletions(-)

diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
index 8cf6457c..0b799a54 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
@@ -41,96 +41,84 @@
         {{ date.date | date: "EEEE" }} | {{ date.date }}
       </div>
     }
-    @if (date.times.length > 0) {
-      <table class="min-w-full border-spacing-0 border-separate">
-        <thead>
-          <tr class="sticky top-0 text-left">
-            <th
-              scope="col"
-              colspan="2"
-              width="120"
-              class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5 pr-2 text-nowrap"
-            >
-              Hrs
-            </th>
-            <th
-              class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5"
-              width="120"
-            >
-              Date
-            </th>
-            <th
-              class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5"
-              width="120"
-            >
-              Chrg Code
-            </th>
-            <th
-              class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5"
-              width="180"
-            >
-              Client
-            </th>
-            <th
-              class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5"
-              width="180"
-            >
-              Project
-            </th>
-            <th
-              class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5"
-              width="140"
-            >
-              Activity / Task
-            </th>
-            <th class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5">
-              Description
-            </th>
-            <th
-              class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5"
-              width="20"
-            ></th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr
-            hq-staff-dashboard-time-entry
-            (hqTimeChange)="upsertTime($event)"
-            [time]="{ date: date.date }"
-          ></tr>
-          @for (time of date.times; track time.id) {
-            @switch (time.timeStatus) {
-              @case (timeStatus.Submitted) {
-                <tr
-                  hq-staff-dashboard-time-entry
-                  (hqTimeChange)="upsertTime($event)"
-                  (hqTimeDelete)="deleteTime($event)"
-                  [time]="time"
-                  class="even:bg-gray-850 odd:bg-black-alt text-gray-450"
-                ></tr>
-              }
-              @default {
-                <tr
-                  hq-staff-dashboard-time-entry
-                  (hqTimeChange)="upsertTime($event)"
-                  (hqTimeDelete)="deleteTime($event)"
-                  [time]="time"
-                ></tr>
-              }
+    <table class="min-w-full border-spacing-0 border-separate">
+      <thead>
+        <tr class="sticky top-0 text-left">
+          <th
+            scope="col"
+            colspan="2"
+            width="120"
+            class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5 pr-2 text-nowrap"
+          >
+            Hrs
+          </th>
+          <th
+            class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5"
+            width="120"
+          >
+            Date
+          </th>
+          <th
+            class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5"
+            width="120"
+          >
+            Chrg Code
+          </th>
+          <th
+            class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5"
+            width="180"
+          >
+            Client
+          </th>
+          <th
+            class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5"
+            width="180"
+          >
+            Project
+          </th>
+          <th
+            class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5"
+            width="140"
+          >
+            Activity / Task
+          </th>
+          <th class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5">
+            Description
+          </th>
+          <th
+            class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5"
+            width="20"
+          ></th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          hq-staff-dashboard-time-entry
+          (hqTimeChange)="upsertTime($event)"
+          [time]="{ date: date.date, timeStatus: timeStatus.Pending}"
+        ></tr>
+        @for (time of date.times; track time.id) {
+          @switch (time.timeStatus) {
+            @case (timeStatus.Submitted) {
+              <tr
+                hq-staff-dashboard-time-entry
+                (hqTimeChange)="upsertTime($event)"
+                (hqTimeDelete)="deleteTime($event)"
+                [time]="time"
+                class="even:bg-gray-850 odd:bg-black-alt text-gray-450"
+              ></tr>
+            }
+            @default {
+              <tr
+                hq-staff-dashboard-time-entry
+                (hqTimeChange)="upsertTime($event)"
+                (hqTimeDelete)="deleteTime($event)"
+                [time]="time"
+              ></tr>
             }
           }
-        </tbody>
-      </table>
-    } @else {
-      <div class="text-center text-white">
-        <p>No records found for this date.</p>
-        <button
-          class="inline-block text-center my-2 px-2 py-2 border border-orange-500 bg-orange-500 hover:bg-orange-600 hover:border-orange-600 text-white rounded min-w-[120px] font-normal"
-          type="button"
-        >
-          Add New Entry
-        </button>
-      </div>
-    }
+        }
+      </tbody>
+    </table>
   }
 }

From dee9691289e277aaa7d13313a001d52b9e01f0b7 Mon Sep 17 00:00:00 2001
From: amrmahdyy <amrmahdy2@gmail.com>
Date: Tue, 25 Jun 2024 16:53:16 -0400
Subject: [PATCH 12/25] applied formatting

---
 .../staff-dashboard-date-range.component.ts                 | 6 ++----
 .../staff-dashboard-search-filter.component.html            | 1 -
 .../src/app/staff-dashboard/staff-dashboard.component.html  | 2 +-
 3 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-date-range/staff-dashboard-date-range.component.ts b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-date-range/staff-dashboard-date-range.component.ts
index a8450e60..d81a0d8f 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-date-range/staff-dashboard-date-range.component.ts
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-date-range/staff-dashboard-date-range.component.ts
@@ -7,10 +7,8 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
   selector: 'hq-staff-dashboard-date-range',
   standalone: true,
   imports: [CommonModule, ReactiveFormsModule, FormsModule],
-  templateUrl: './staff-dashboard-date-range.component.html'
+  templateUrl: './staff-dashboard-date-range.component.html',
 })
 export class StaffDashboardDateRangeComponent {
-constructor(public staffDashboardService: StaffDashboardService) {
-
-}
+  constructor(public staffDashboardService: StaffDashboardService) {}
 }
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-search-filter/staff-dashboard-search-filter.component.html b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-search-filter/staff-dashboard-search-filter.component.html
index 483f5c03..4fa0cb84 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-search-filter/staff-dashboard-search-filter.component.html
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-search-filter/staff-dashboard-search-filter.component.html
@@ -44,4 +44,3 @@
     </div>
   </div>
 </div>
-
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
index 0b799a54..2ed8bd77 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
@@ -95,7 +95,7 @@
         <tr
           hq-staff-dashboard-time-entry
           (hqTimeChange)="upsertTime($event)"
-          [time]="{ date: date.date, timeStatus: timeStatus.Pending}"
+          [time]="{ date: date.date, timeStatus: timeStatus.Pending }"
         ></tr>
         @for (time of date.times; track time.id) {
           @switch (time.timeStatus) {

From e23f4fa335e969dddbc46a70c561516ad8cb568a Mon Sep 17 00:00:00 2001
From: amrmahdyy <amrmahdy2@gmail.com>
Date: Tue, 25 Jun 2024 17:02:42 -0400
Subject: [PATCH 13/25] Fix angular linter errors

---
 .../staff-dashboard-date-range.component.html             | 2 +-
 .../app/staff-dashboard/staff-dashboard.component.html    | 8 ++++++--
 .../src/app/staff-dashboard/staff-dashboard.component.ts  | 4 ++--
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-date-range/staff-dashboard-date-range.component.html b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-date-range/staff-dashboard-date-range.component.html
index a6a8560c..e4b1d2cb 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-date-range/staff-dashboard-date-range.component.html
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-date-range/staff-dashboard-date-range.component.html
@@ -31,7 +31,7 @@
           </div>
         </div>
         @if (
-          staffDashboardService.period.value !=
+          staffDashboardService.period.value !==
           staffDashboardService.Period.Today
         ) {
           <div class="flex align-middle justify-center items-center mt-4">
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
index 2ed8bd77..b85ea37b 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
@@ -3,14 +3,18 @@
     <hq-staff-dashboard-search-filter />
     <div class="inline-flex gap-20 ml-20">
       <div class="text-white">
-        <label class="uppercase font-bold text-xs">Total Hours</label>
+        <label for="Total hours" class="uppercase font-bold text-xs"
+          >Total Hours</label
+        >
         <div class="text-4xl">
           {{ (staffDashboardService.time$ | async)?.totalHours?.toFixed(2) }}
         </div>
       </div>
       <!-- Billable Hours Display -->
       <div class="text-white">
-        <label class="uppercase font-bold text-xs">Billable Hours</label>
+        <label for="BillableHours" class="uppercase font-bold text-xs"
+          >Billable Hours</label
+        >
         <div class="text-4xl">
           {{ (staffDashboardService.time$ | async)?.billableHours?.toFixed(2) }}
         </div>
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts
index 1e3792a1..358ad8a5 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts
@@ -105,12 +105,12 @@ export class StaffDashboardComponent {
   }
   async submitTimes() {
     try {
-      var timesIds = await firstValueFrom(
+      const timesIds = await firstValueFrom(
         this.staffDashboardService.time$.pipe(
           map((t) => t.dates.flatMap((d) => d.times.map((time) => time.id))),
         ),
       );
-      let submitTimesRequest = { ids: timesIds };
+      const submitTimesRequest = { ids: timesIds };
       await firstValueFrom(this.hqService.submitTimesV1(submitTimesRequest));
       this.toastService.show('Success', 'Time entries successfully submitted.');
       this.staffDashboardService.refresh();

From b67facdbc1c242d5c42329b7cd5bb8489c4b6bf6 Mon Sep 17 00:00:00 2001
From: Ryan Maffit <rmaffit@sancsoft.com>
Date: Tue, 25 Jun 2024 21:38:19 +0000
Subject: [PATCH 14/25] Fixed width on hours column

---
 .../staff-dashboard-time-entry.component.html               | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.html b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.html
index 1786c8e0..0ac781c9 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.html
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.html
@@ -2,9 +2,9 @@
   @switch (time?.timeStatus) {
     @case (timeStatus.Pending) {
       <td class="border-b border-black py-2 bg-gray-300 w-3"></td>
-      <td class="border-b border-black py-2 pl-3 pr-2">
+      <td class="border-b border-black py-2 pl-3 pr-2" width="105">
         <input
-          class="w-10 bg-blue-900 border border-black rounded py-1 px-2 mr-2 text-right appearance-none"
+          class="w-full bg-blue-900 border border-black rounded py-1 px-2 mr-2 text-right appearance-none"
           type="number"
           formControlName="hours"
           step="0.25"
@@ -124,7 +124,7 @@
     }
     @case (timeStatus.Submitted) {
       <td class="border-b border-black py-2 bg-green-300 w-3"></td>
-      <td class="border-b border-black py-2 pl-5">
+      <td class="border-b border-black py-2 pl-5" width="105">
         {{ time?.hours }}
       </td>
       <td class="border-b border-black py-2 pl-2">

From 84135d4a2ebd8ad6a006526c71b68fdad10516a0 Mon Sep 17 00:00:00 2001
From: amrmahdyy <amrmahdy2@gmail.com>
Date: Tue, 25 Jun 2024 19:05:14 -0400
Subject: [PATCH 15/25] Added Staff work hours calculations and worked on
 fixing after the feedback

---
 .../src/app/models/times/submit-times-v1.ts   |  1 +
 .../service/staff-dashboard.service.ts        |  9 ++---
 .../staff-dashboard-date-range.component.html |  4 +--
 .../staff-dashboard-time-entry.component.html |  9 +++--
 .../staff-dashboard.component.html            |  4 +--
 .../staff-dashboard.component.ts              | 33 ++++++++++++++++---
 .../Times/GetDashboardTimeV1.cs               |  5 +++
 .../HQ.Abstractions/Times/SubmitTimes.cs      | 14 ++++++++
 .../HQ.Abstractions/Times/UpsertTimeV1.cs     | 12 -------
 .../TimeEntryAuthorizationHandler.cs          |  2 ++
 .../Authorization/TimeEntryOperation.cs       |  2 ++
 .../Controllers/TimeEntriesControllerV1.cs    | 13 ++++++++
 .../HQ.Server/Services/TimeEntryServiceV1.cs  | 17 ++++++++++
 13 files changed, 96 insertions(+), 29 deletions(-)
 create mode 100644 src/dotnet/HQ.Abstractions/Times/SubmitTimes.cs

diff --git a/src/angular/hq/src/app/models/times/submit-times-v1.ts b/src/angular/hq/src/app/models/times/submit-times-v1.ts
index 480340bd..cee2e769 100644
--- a/src/angular/hq/src/app/models/times/submit-times-v1.ts
+++ b/src/angular/hq/src/app/models/times/submit-times-v1.ts
@@ -1,5 +1,6 @@
 export interface SubmitTimesRequestV1 {
   ids: string[] | null;
+  staffId: string;
 }
 
 export interface SubmitTimeResponseV1 {}
diff --git a/src/angular/hq/src/app/staff-dashboard/service/staff-dashboard.service.ts b/src/angular/hq/src/app/staff-dashboard/service/staff-dashboard.service.ts
index 3b242244..2a3de1cd 100644
--- a/src/angular/hq/src/app/staff-dashboard/service/staff-dashboard.service.ts
+++ b/src/angular/hq/src/app/staff-dashboard/service/staff-dashboard.service.ts
@@ -61,7 +61,8 @@ export class StaffDashboardService {
       date: date$,
     });
 
-    const time$ = request$.pipe(
+    this.time$ = request$.pipe(
+      debounceTime(250),
       switchMap((request) => this.hqService.getDashboardTimeV1(request)),
       tap((response) =>
         this.date.setValue(response.startDate, { emitEvent: false }),
@@ -69,15 +70,9 @@ export class StaffDashboardService {
       shareReplay(1),
     );
 
-    this.time$ = merge(time$, this.refresh$.pipe(switchMap(() => time$))).pipe(
-      debounceTime(250),
-      shareReplay(1),
-    );
-
     this.chargeCodes$ = this.time$.pipe(map((t) => t.chargeCodes));
     this.clients$ = this.time$.pipe(map((t) => t.clients));
   }
-
   refresh() {
     this.refresh$.next();
   }
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-date-range/staff-dashboard-date-range.component.html b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-date-range/staff-dashboard-date-range.component.html
index e4b1d2cb..5ee4c554 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-date-range/staff-dashboard-date-range.component.html
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-date-range/staff-dashboard-date-range.component.html
@@ -21,7 +21,7 @@
               [formControl]="staffDashboardService.date"
               type="date"
               id="startDate"
-              class="w-full block text-[14px] px-2 py-1 border row-start-1 col-start-1 self-center justify-self-end border-black appearance-none focus:outline-none placeholder:text-gray-100 bg-blue-900 rounded h-[36px] uppercase"
+              class="w-full block text-[14px] px-4 py-1 border row-start-1 col-start-1 self-center justify-self-end border-black appearance-none focus:outline-none placeholder:text-gray-100 bg-blue-900 rounded h-[36px] uppercase"
             />
             <span
               class="flex items-center justify-center h-full pointer-events-none z-10 right-0 relative col-start-1 row-start-1 self-center justify-self-end w-[36px] after:block after:w-[1px] after:absolute after:left-[1px] after:top-[7px] after:bottom-[7px] after:bg-gray-100"
@@ -51,7 +51,7 @@
                 [value]="(staffDashboardService.time$ | async)?.endDate"
                 type="date"
                 id="endDate"
-                class="w-full block text-[14px] px-2 py-1 border row-start-1 col-start-1 self-center justify-self-end border-black appearance-none focus:outline-none placeholder:text-gray-100 bg-blue-900 rounded h-[36px] uppercase"
+                class="w-full block text-[14px] px-4 py-1 border row-start-1 col-start-1 self-center justify-self-end border-black appearance-none focus:outline-none placeholder:text-gray-100 bg-blue-900 rounded h-[36px] uppercase"
               />
               <span
                 class="flex items-center justify-center h-full pointer-events-none z-10 right-0 relative col-start-1 row-start-1 self-center justify-self-end w-[36px] after:block after:w-[1px] after:absolute after:left-[1px] after:top-[7px] after:bottom-[7px] after:bg-gray-100"
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.html b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.html
index 0ac781c9..299177fb 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.html
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.html
@@ -131,7 +131,10 @@
         {{ time?.date }}
       </td>
       <td class="border-b border-black py-2 pl-2 text-center">
-        <span class="px-3 py-1 font-semibold rounded-full">
+        <span
+          class="px-3 py-1 font-semibold rounded-full"
+          [style.background-color]="chargeCodeToColor(time?.chargeCode ?? '')"
+        >
           {{ time?.chargeCode }}
         </span>
       </td>
@@ -145,7 +148,9 @@
         {{ time?.activityName || time?.task }}
       </td>
       <td class="border-b border-black py-2 pl-2">
-        {{ time?.notes }}
+        @if (time?.notes; as notes) {
+          {{ notes.length > 70 ? notes.substring(0, 70) + "..." : notes }}
+        }
       </td>
       <td class="border-b border-black py-2 pl-2 pr-5"></td>
     }
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
index b85ea37b..ef6d5919 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
@@ -6,7 +6,7 @@
         <label for="Total hours" class="uppercase font-bold text-xs"
           >Total Hours</label
         >
-        <div class="text-4xl">
+        <div class="text-xl">
           {{ (staffDashboardService.time$ | async)?.totalHours?.toFixed(2) }}
         </div>
       </div>
@@ -15,7 +15,7 @@
         <label for="BillableHours" class="uppercase font-bold text-xs"
           >Billable Hours</label
         >
-        <div class="text-4xl">
+        <div class="text-xl">
           {{ (staffDashboardService.time$ | async)?.billableHours?.toFixed(2) }}
         </div>
       </div>
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts
index 358ad8a5..345aa629 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts
@@ -17,6 +17,7 @@ import { ModalService } from '../services/modal.service';
 import { StaffDashboardSearchFilterComponent } from './staff-dashboard-search-filter/staff-dashboard-search-filter.component';
 import { StaffDashboardDateRangeComponent } from './staff-dashboard-date-range/staff-dashboard-date-range.component';
 import { TimeStatus } from '../models/common/time-status';
+import { OidcSecurityService } from 'angular-auth-oidc-client';
 
 @Component({
   selector: 'hq-staff-dashboard',
@@ -37,6 +38,7 @@ export class StaffDashboardComponent {
     private hqService: HQService,
     private toastService: ToastService,
     private modalService: ModalService,
+    private oidcSecurityService: OidcSecurityService,
   ) {}
 
   Period = Period;
@@ -104,16 +106,39 @@ export class StaffDashboardComponent {
     }
   }
   async submitTimes() {
+    const confirm = await firstValueFrom(
+      this.modalService.confirm(
+        'Submit',
+        'Are you sure you want to submit time entries?',
+      ),
+    );
+
+    if (!confirm) {
+      return;
+    }
     try {
       const timesIds = await firstValueFrom(
         this.staffDashboardService.time$.pipe(
           map((t) => t.dates.flatMap((d) => d.times.map((time) => time.id))),
         ),
       );
-      const submitTimesRequest = { ids: timesIds };
-      await firstValueFrom(this.hqService.submitTimesV1(submitTimesRequest));
-      this.toastService.show('Success', 'Time entries successfully submitted.');
-      this.staffDashboardService.refresh();
+      const staffId = await firstValueFrom(
+        this.oidcSecurityService.userData$.pipe(
+          map((t) => t.userData?.staff_id),
+        ),
+      );
+      if (staffId) {
+        const submitTimesRequest = { ids: timesIds, staffId: staffId };
+        await firstValueFrom(this.hqService.submitTimesV1(submitTimesRequest));
+        this.toastService.show(
+          'Success',
+          'Time entries successfully submitted.',
+        );
+        this.staffDashboardService.search.reset();
+        this.staffDashboardService.refresh();
+      } else {
+        console.log('ERROR: Could not find staff');
+      }
     } catch (err) {
       if (err instanceof APIError) {
         this.toastService.show('Error', err.errors.join('\n'));
diff --git a/src/dotnet/HQ.Abstractions/Times/GetDashboardTimeV1.cs b/src/dotnet/HQ.Abstractions/Times/GetDashboardTimeV1.cs
index 282528c4..8a9ee050 100644
--- a/src/dotnet/HQ.Abstractions/Times/GetDashboardTimeV1.cs
+++ b/src/dotnet/HQ.Abstractions/Times/GetDashboardTimeV1.cs
@@ -23,6 +23,11 @@ public class Response
         public List<TimeForDate> Dates { get; set; } = new();
         public List<ChargeCode> ChargeCodes { get; set; } = new();
         public List<Client> Clients { get; set; } = new();
+        public decimal HoursThisWeek { get; set; }
+        public decimal HoursThisMonth { get; set; }
+        public decimal HoursLastWeek { get; set; }
+        public int Vacation { get; set; }
+
     }
 
     public class ChargeCode
diff --git a/src/dotnet/HQ.Abstractions/Times/SubmitTimes.cs b/src/dotnet/HQ.Abstractions/Times/SubmitTimes.cs
new file mode 100644
index 00000000..79e7bd6a
--- /dev/null
+++ b/src/dotnet/HQ.Abstractions/Times/SubmitTimes.cs
@@ -0,0 +1,14 @@
+public class SubmitTimesV1
+{
+    public class Request
+    {
+        public required List<Guid> Ids { get; set; }
+        public Guid? StaffId { get; set; }
+
+    }
+
+    public class Response
+    {
+
+    }
+}
\ No newline at end of file
diff --git a/src/dotnet/HQ.Abstractions/Times/UpsertTimeV1.cs b/src/dotnet/HQ.Abstractions/Times/UpsertTimeV1.cs
index c0519a86..95dd2f75 100644
--- a/src/dotnet/HQ.Abstractions/Times/UpsertTimeV1.cs
+++ b/src/dotnet/HQ.Abstractions/Times/UpsertTimeV1.cs
@@ -120,18 +120,6 @@ public class Response
         }
     }
 
-    public class SubmitTimesV1
-    {
-        public class Request
-        {
-            public required List<Guid> Ids { get; set; }
-
-        }
 
-        public class Response
-        {
-
-        }
-    }
 
 }
\ No newline at end of file
diff --git a/src/dotnet/HQ.Server/Authorization/TimeEntryAuthorizationHandler.cs b/src/dotnet/HQ.Server/Authorization/TimeEntryAuthorizationHandler.cs
index c3180fe7..1320fa13 100644
--- a/src/dotnet/HQ.Server/Authorization/TimeEntryAuthorizationHandler.cs
+++ b/src/dotnet/HQ.Server/Authorization/TimeEntryAuthorizationHandler.cs
@@ -32,6 +32,8 @@ protected override Task HandleRequirementAsync(AuthorizationHandlerContext conte
             case nameof(TimeEntryOperation.GetTimes):
             case nameof(TimeEntryOperation.DeleteTime):
             case nameof(TimeEntryOperation.UpsertTime):
+            case nameof(TimeEntryOperation.SubmitTimes):
+
                 {
                     if ((isStaff && staffId.HasValue && staffId.Value == resource.StaffId) || isPartner || isExecutive || isAdmin)
                     {
diff --git a/src/dotnet/HQ.Server/Authorization/TimeEntryOperation.cs b/src/dotnet/HQ.Server/Authorization/TimeEntryOperation.cs
index 50f5173e..8fd0592f 100644
--- a/src/dotnet/HQ.Server/Authorization/TimeEntryOperation.cs
+++ b/src/dotnet/HQ.Server/Authorization/TimeEntryOperation.cs
@@ -7,5 +7,7 @@ public class TimeEntryOperation
     public static OperationAuthorizationRequirement UpsertTime = new OperationAuthorizationRequirement { Name = nameof(UpsertTime) };
     public static OperationAuthorizationRequirement GetTimes = new OperationAuthorizationRequirement { Name = nameof(GetTimes) };
     public static OperationAuthorizationRequirement DeleteTime = new OperationAuthorizationRequirement { Name = nameof(DeleteTime) };
+    public static OperationAuthorizationRequirement SubmitTimes = new OperationAuthorizationRequirement { Name = nameof(SubmitTimes) };
+
 
 }
\ No newline at end of file
diff --git a/src/dotnet/HQ.Server/Controllers/TimeEntriesControllerV1.cs b/src/dotnet/HQ.Server/Controllers/TimeEntriesControllerV1.cs
index 715cb5d0..f4aef2fa 100644
--- a/src/dotnet/HQ.Server/Controllers/TimeEntriesControllerV1.cs
+++ b/src/dotnet/HQ.Server/Controllers/TimeEntriesControllerV1.cs
@@ -224,6 +224,19 @@ public async Task<ActionResult> GetDashboardTimeV1([FromBody] GetDashboardTimeV1
         [ProducesResponseType(StatusCodes.Status403Forbidden)]
         public async Task<ActionResult> SubmitTimesV1([FromBody] SubmitTimesV1.Request request, CancellationToken ct = default)
         {
+            var times = _context.Times.Where(t => request.Ids.Contains(t.Id));
+            if (times == null)
+            {
+                return NotFound();
+            }
+
+            var authorizationResult = await _authorizationService
+                    .AuthorizeAsync(User, times.FirstOrDefault(), TimeEntryOperation.SubmitTimes);
+
+            if (!authorizationResult.Succeeded)
+            {
+                return Forbid();
+            }
             return await _TimeEntryServiceV1.SubmitTimesV1(request, ct)
                 .ToActionResult(new HQResultEndpointProfile());
         }
diff --git a/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs b/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs
index c7d4c034..af1f2a5c 100644
--- a/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs
+++ b/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs
@@ -477,6 +477,19 @@ public TimeEntryServiceV1(HQDbContext context)
                 .AsNoTracking()
                 .Where(t => t.StaffId == request.StaffId && t.Date >= startDate && t.Date <= endDate)
                 .AsQueryable();
+            var hrsThisWeekQuery = _context.Times
+                .AsNoTracking()
+                .Where(t => t.StaffId == request.StaffId && t.Date >= request.Date.GetPeriodStartDate(Period.Week) && t.Date <= request.Date.GetPeriodEndDate(Period.Week))
+                .AsQueryable();
+            var hrsLastWeekQuery = _context.Times
+                .AsNoTracking()
+                .Where(t => t.StaffId == request.StaffId && t.Date >= request.Date.GetPeriodStartDate(Period.LastWeek) && t.Date <= request.Date.GetPeriodEndDate(Period.LastWeek))
+                .AsQueryable();
+            var hrsThisMonthQuery = _context.Times
+            .AsNoTracking()
+            .Where(t => t.StaffId == request.StaffId && t.Date >= request.Date.GetPeriodStartDate(Period.Month) && t.Date <= request.Date.GetPeriodEndDate(Period.Month))
+            .AsQueryable();
+            var vacationHours = (await _context.Staff.FirstOrDefaultAsync(t => t.Id == request.StaffId))?.VacationHours;
 
             if (!String.IsNullOrEmpty(request.Search))
             {
@@ -556,6 +569,10 @@ public TimeEntryServiceV1(HQDbContext context)
             response.EndDate = endDate;
             response.TotalHours = await timesQuery.SumAsync(t => t.Hours);
             response.BillableHours = await timesQuery.Where(t => t.ChargeCode.Billable).SumAsync(t => t.Hours);
+            response.HoursThisWeek = await hrsThisWeekQuery.SumAsync(t => t.Hours);
+            response.HoursLastWeek = await hrsLastWeekQuery.SumAsync(t => t.Hours);
+            response.HoursThisMonth = await hrsThisMonthQuery.SumAsync(t => t.Hours);
+            response.Vacation = vacationHours ?? 0;
             response.NextDate = nextDate;
             response.PreviousDate = previousDate;
 

From cb1a153651347feaa04bdb623775cf801a238017 Mon Sep 17 00:00:00 2001
From: amrmahdyy <amrmahdy2@gmail.com>
Date: Tue, 25 Jun 2024 20:37:30 -0400
Subject: [PATCH 16/25] Added staff name and hours computation UI

---
 .../staff-dashboard/get-dashboard-time-v1.ts  |  5 +++
 .../staff-dashboard-time-entry.component.html |  2 +-
 .../staff-dashboard.component.html            | 35 +++++++++++++++++++
 .../Times/GetDashboardTimeV1.cs               |  1 +
 .../HQ.Server/Services/TimeEntryServiceV1.cs  |  1 +
 5 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/src/angular/hq/src/app/models/staff-dashboard/get-dashboard-time-v1.ts b/src/angular/hq/src/app/models/staff-dashboard/get-dashboard-time-v1.ts
index 09c94bea..df8464be 100644
--- a/src/angular/hq/src/app/models/staff-dashboard/get-dashboard-time-v1.ts
+++ b/src/angular/hq/src/app/models/staff-dashboard/get-dashboard-time-v1.ts
@@ -11,6 +11,11 @@ export interface GetDashboardTimeV1Request {
 export interface GetDashboardTimeV1Response {
   totalHours: number;
   billableHours: number;
+  hoursThisWeek: number;
+  hoursThisMonth: number;
+  hoursLastWeek: number;
+  staffName: string;
+  vacation: number;
   startDate: string;
   endDate: string;
   previousDate: string;
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.html b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.html
index 299177fb..9648d385 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.html
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.html
@@ -124,7 +124,7 @@
     }
     @case (timeStatus.Submitted) {
       <td class="border-b border-black py-2 bg-green-300 w-3"></td>
-      <td class="border-b border-black py-2 pl-5" width="105">
+      <td class="border-b border-black py-2 pl-5 text-right pr-2" width="105">
         {{ time?.hours }}
       </td>
       <td class="border-b border-black py-2 pl-2">
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
index ef6d5919..6ea3e75e 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
@@ -1,3 +1,38 @@
+<div class="px-5">
+  <div class="flex items-center justify-between gap-[20px]">
+    <div class="text-4xl text-white">
+      {{ (staffDashboardService.time$ | async)?.staffName }}
+    </div>
+    <div class="flex space-x-8 p-4">
+      <div class="text-center text-white">
+        <h2 class="text-sm">HRS THIS WEEK</h2>
+        <p class="text-sm mt-2">
+          {{ (staffDashboardService.time$ | async)?.hoursThisWeek?.toFixed(2) }}
+        </p>
+      </div>
+      <div class="text-center text-white">
+        <h2 class="text-sm">HRS LAST WEEK</h2>
+        <p class="text-sm mt-2">
+          {{ (staffDashboardService.time$ | async)?.hoursLastWeek?.toFixed(2) }}
+        </p>
+      </div>
+      <div class="text-center text-white">
+        <h2 class="text-sm">HRS THIS MONTH</h2>
+        <p class="text-sm mt-2">
+          {{
+            (staffDashboardService.time$ | async)?.hoursThisMonth?.toFixed(2)
+          }}
+        </p>
+      </div>
+      <div class="text-center text-white">
+        <h2 class="text-sm">VACATION</h2>
+        <p class="text-sm mt-2">
+          {{ (staffDashboardService.time$ | async)?.vacation?.toFixed(2) }}
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
 <div class="px-5 pt-4 mb-[8px]">
   <div class="flex items-end gap-[20px]">
     <hq-staff-dashboard-search-filter />
diff --git a/src/dotnet/HQ.Abstractions/Times/GetDashboardTimeV1.cs b/src/dotnet/HQ.Abstractions/Times/GetDashboardTimeV1.cs
index 8a9ee050..8884e495 100644
--- a/src/dotnet/HQ.Abstractions/Times/GetDashboardTimeV1.cs
+++ b/src/dotnet/HQ.Abstractions/Times/GetDashboardTimeV1.cs
@@ -26,6 +26,7 @@ public class Response
         public decimal HoursThisWeek { get; set; }
         public decimal HoursThisMonth { get; set; }
         public decimal HoursLastWeek { get; set; }
+        public string? StaffName { get; set; }
         public int Vacation { get; set; }
 
     }
diff --git a/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs b/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs
index af1f2a5c..51f3430d 100644
--- a/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs
+++ b/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs
@@ -575,6 +575,7 @@ public TimeEntryServiceV1(HQDbContext context)
             response.Vacation = vacationHours ?? 0;
             response.NextDate = nextDate;
             response.PreviousDate = previousDate;
+            response.StaffName = (await _context.Staff.FirstOrDefaultAsync(t => t.Id == request.StaffId))?.Name;
 
             DateOnly date = endDate;
             do

From 1b0618881c0c3e8c7f5ec57e5f1d4369be039c27 Mon Sep 17 00:00:00 2001
From: amrmahdyy <amrmahdy2@gmail.com>
Date: Tue, 25 Jun 2024 21:26:09 -0400
Subject: [PATCH 17/25] Fixed date issue with firefox

---
 .../staff-dashboard-date-range.component.html      | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-date-range/staff-dashboard-date-range.component.html b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-date-range/staff-dashboard-date-range.component.html
index 5ee4c554..76026450 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-date-range/staff-dashboard-date-range.component.html
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-date-range/staff-dashboard-date-range.component.html
@@ -21,11 +21,14 @@
               [formControl]="staffDashboardService.date"
               type="date"
               id="startDate"
-              class="w-full block text-[14px] px-4 py-1 border row-start-1 col-start-1 self-center justify-self-end border-black appearance-none focus:outline-none placeholder:text-gray-100 bg-blue-900 rounded h-[36px] uppercase"
+              class="w-full block text-[14px] px-4 py-1 border row-start-1 col-start-1 self-center justify-self-end border-black appearance-none focus:outline-none bg-blue-900 rounded h-[36px] uppercase pr-[36px]"
             />
             <span
-              class="flex items-center justify-center h-full pointer-events-none z-10 right-0 relative col-start-1 row-start-1 self-center justify-self-end w-[36px] after:block after:w-[1px] after:absolute after:left-[1px] after:top-[7px] after:bottom-[7px] after:bg-gray-100"
+              class="flex items-center justify-center h-full pointer-events-none z-10 absolute right-0 top-0 col-start-1 row-start-1 self-center justify-self-end w-[36px]"
             >
+              <span
+                class="absolute left-0 top-[7px] bottom-[7px] w-[1px] bg-gray-100"
+              ></span>
               <i class="bi bi-arrow-down-short text-[24px] bg-blue-900"></i>
             </span>
           </div>
@@ -51,11 +54,14 @@
                 [value]="(staffDashboardService.time$ | async)?.endDate"
                 type="date"
                 id="endDate"
-                class="w-full block text-[14px] px-4 py-1 border row-start-1 col-start-1 self-center justify-self-end border-black appearance-none focus:outline-none placeholder:text-gray-100 bg-blue-900 rounded h-[36px] uppercase"
+                class="w-full block text-[14px] px-4 py-1 border row-start-1 col-start-1 self-center justify-self-end border-black appearance-none focus:outline-none bg-blue-900 rounded h-[36px] uppercase pr-[36px]"
               />
               <span
-                class="flex items-center justify-center h-full pointer-events-none z-10 right-0 relative col-start-1 row-start-1 self-center justify-self-end w-[36px] after:block after:w-[1px] after:absolute after:left-[1px] after:top-[7px] after:bottom-[7px] after:bg-gray-100"
+                class="flex items-center justify-center h-full pointer-events-none z-10 absolute right-0 top-0 col-start-1 row-start-1 self-center justify-self-end w-[36px]"
               >
+                <span
+                  class="absolute left-0 top-[7px] bottom-[7px] w-[1px] bg-gray-100"
+                ></span>
                 <i class="bi bi-arrow-down-short text-[24px] bg-blue-900"></i>
               </span>
             </div>

From f100ece6745d0c83e785cf11d526790afe03f641 Mon Sep 17 00:00:00 2001
From: Ryan Maffit <rmaffit@sancsoft.com>
Date: Wed, 26 Jun 2024 03:14:48 +0000
Subject: [PATCH 18/25] Added cancellation tokens

---
 src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs b/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs
index 51f3430d..37cb1143 100644
--- a/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs
+++ b/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs
@@ -567,15 +567,15 @@ public TimeEntryServiceV1(HQDbContext context)
             response.Clients = clients;
             response.StartDate = startDate;
             response.EndDate = endDate;
-            response.TotalHours = await timesQuery.SumAsync(t => t.Hours);
-            response.BillableHours = await timesQuery.Where(t => t.ChargeCode.Billable).SumAsync(t => t.Hours);
-            response.HoursThisWeek = await hrsThisWeekQuery.SumAsync(t => t.Hours);
-            response.HoursLastWeek = await hrsLastWeekQuery.SumAsync(t => t.Hours);
-            response.HoursThisMonth = await hrsThisMonthQuery.SumAsync(t => t.Hours);
+            response.TotalHours = await timesQuery.SumAsync(t => t.Hours, ct);
+            response.BillableHours = await timesQuery.Where(t => t.ChargeCode.Billable).SumAsync(t => t.Hours, ct);
+            response.HoursThisWeek = await hrsThisWeekQuery.SumAsync(t => t.Hours, ct);
+            response.HoursLastWeek = await hrsLastWeekQuery.SumAsync(t => t.Hours, ct);
+            response.HoursThisMonth = await hrsThisMonthQuery.SumAsync(t => t.Hours, ct);
             response.Vacation = vacationHours ?? 0;
             response.NextDate = nextDate;
             response.PreviousDate = previousDate;
-            response.StaffName = (await _context.Staff.FirstOrDefaultAsync(t => t.Id == request.StaffId))?.Name;
+            response.StaffName = (await _context.Staff.FirstOrDefaultAsync(t => t.Id == request.StaffId, ct))?.Name;
 
             DateOnly date = endDate;
             do

From d5eb0c18421bb61b4889b0791686abbad09200d0 Mon Sep 17 00:00:00 2001
From: Ryan Maffit <rmaffit@sancsoft.com>
Date: Wed, 26 Jun 2024 03:21:07 +0000
Subject: [PATCH 19/25] Fixed linter errors

---
 .../staff-dashboard-date-range.component.html | 10 ++++----
 .../staff-dashboard-time-entry.component.html |  2 +-
 .../staff-dashboard.component.html            | 24 ++++++++++++-------
 3 files changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-date-range/staff-dashboard-date-range.component.html b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-date-range/staff-dashboard-date-range.component.html
index 76026450..3d2ab3cb 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-date-range/staff-dashboard-date-range.component.html
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-date-range/staff-dashboard-date-range.component.html
@@ -3,12 +3,13 @@
     <div class="grid gap-[20px] grid-flow-row pr-5">
       <!-- column -->
       <div class="grid grid-flow-col gap-[15px]">
-        <div
+        <button
+          type="button"
           class="flex align-middle justify-center items-center mt-4"
           (click)="staffDashboardService.date.setValue(dashboard.previousDate)"
         >
           <i class="bi bi-arrow-left-short text-[28px] cursor-pointer"></i>
-        </div>
+        </button>
         <div>
           <label
             for="startDate"
@@ -68,12 +69,13 @@
           </div>
         }
 
-        <div
+        <button
+          type="button"
           class="flex align-middle justify-center items-center mt-4"
           (click)="staffDashboardService.date.setValue(dashboard.nextDate)"
         >
           <i class="bi bi-arrow-right-short text-[28px] cursor-pointer"></i>
-        </div>
+        </button>
       </div>
     </div>
   </div>
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.html b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.html
index 9648d385..c9e0f5e7 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.html
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.html
@@ -132,7 +132,7 @@
       </td>
       <td class="border-b border-black py-2 pl-2 text-center">
         <span
-          class="px-3 py-1 font-semibold rounded-full"
+          class="px-3 py-1 font-semibold rounded-full text-white"
           [style.background-color]="chargeCodeToColor(time?.chargeCode ?? '')"
         >
           {{ time?.chargeCode }}
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
index 6ea3e75e..9da488fe 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
@@ -5,28 +5,36 @@
     </div>
     <div class="flex space-x-8 p-4">
       <div class="text-center text-white">
-        <h2 class="text-sm">HRS THIS WEEK</h2>
-        <p class="text-sm mt-2">
+        <div class="text-xs text-right uppercase font-bold tracking-[.06em]">
+          HRS THIS WEEK
+        </div>
+        <p class="text-right">
           {{ (staffDashboardService.time$ | async)?.hoursThisWeek?.toFixed(2) }}
         </p>
       </div>
       <div class="text-center text-white">
-        <h2 class="text-sm">HRS LAST WEEK</h2>
-        <p class="text-sm mt-2">
+        <div class="text-xs text-right uppercase font-bold tracking-[.06em]">
+          HRS LAST WEEK
+        </div>
+        <p class="text-right">
           {{ (staffDashboardService.time$ | async)?.hoursLastWeek?.toFixed(2) }}
         </p>
       </div>
       <div class="text-center text-white">
-        <h2 class="text-sm">HRS THIS MONTH</h2>
-        <p class="text-sm mt-2">
+        <div class="text-xs text-right uppercase font-bold tracking-[.06em]">
+          HRS THIS MONTH
+        </div>
+        <p class="text-right">
           {{
             (staffDashboardService.time$ | async)?.hoursThisMonth?.toFixed(2)
           }}
         </p>
       </div>
       <div class="text-center text-white">
-        <h2 class="text-sm">VACATION</h2>
-        <p class="text-sm mt-2">
+        <div class="text-xs text-right uppercase font-bold tracking-[.06em]">
+          VACATION
+        </div>
+        <p class="text-right">
           {{ (staffDashboardService.time$ | async)?.vacation?.toFixed(2) }}
         </p>
       </div>

From 7b2a456206f912824049987cbeffed451e2fee93 Mon Sep 17 00:00:00 2001
From: Ryan Maffit <rmaffit@sancsoft.com>
Date: Wed, 26 Jun 2024 03:25:18 +0000
Subject: [PATCH 20/25] Default to today

---
 .../app/staff-dashboard/service/staff-dashboard.service.ts  | 6 ++++--
 .../staff-dashboard-search-filter.component.html            | 2 +-
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/angular/hq/src/app/staff-dashboard/service/staff-dashboard.service.ts b/src/angular/hq/src/app/staff-dashboard/service/staff-dashboard.service.ts
index 2a3de1cd..02870ed0 100644
--- a/src/angular/hq/src/app/staff-dashboard/service/staff-dashboard.service.ts
+++ b/src/angular/hq/src/app/staff-dashboard/service/staff-dashboard.service.ts
@@ -26,9 +26,11 @@ import {
 })
 export class StaffDashboardService {
   search = new FormControl<string | null>(null);
-  period = new FormControl<Period>(Period.Week, { nonNullable: true });
+  period = new FormControl<Period>(Period.Today, { nonNullable: true });
   date = new FormControl<string>(
-    /*new Date().toISOString().split('T')[0]*/ '2024-06-21',
+    new Date(new Date().getTime() - new Date().getTimezoneOffset() * 60000)
+      .toISOString()
+      .split('T')[0],
     {
       nonNullable: true,
     },
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-search-filter/staff-dashboard-search-filter.component.html b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-search-filter/staff-dashboard-search-filter.component.html
index 4fa0cb84..2c7eaed9 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-search-filter/staff-dashboard-search-filter.component.html
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-search-filter/staff-dashboard-search-filter.component.html
@@ -33,7 +33,7 @@
         [formControl]="staffDashboardService.period"
         class="w-full pl-2 pr-[43px] appearance-none focus:outline-none hover:cursor-pointer font-medium row-start-1 col-start-1 border border-steel-blue-600 text-gray-100 bg-blue-900 rounded h-[36px]"
       >
-        <option [ngValue]="staffDashboardService.Period.Today">Today</option>
+        <option [ngValue]="staffDashboardService.Period.Today">Day</option>
         <option [ngValue]="staffDashboardService.Period.Week">Week</option>
       </select>
       <span

From 76cb7c004d814c044888a8040e0c049f73470ff9 Mon Sep 17 00:00:00 2001
From: Ryan Maffit <rmaffit@sancsoft.com>
Date: Wed, 26 Jun 2024 03:51:12 +0000
Subject: [PATCH 21/25] Fixed extra update events after component is disposed

---
 .../staff-dashboard-time-entry.component.ts   | 30 +++++++++++++------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.ts b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.ts
index 3b1c2f66..34ce7ea1 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.ts
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.ts
@@ -182,7 +182,7 @@ export class StaffDashboardTimeEntryComponent implements OnChanges, OnDestroy {
       });
 
     form$
-      .pipe(takeUntil(this.destroyed$), debounceTime(750))
+      .pipe(debounceTime(750), takeUntil(this.destroyed$))
       .subscribe((time) => {
         if (this.form.touched) {
           this.class = this.form.invalid
@@ -195,14 +195,16 @@ export class StaffDashboardTimeEntryComponent implements OnChanges, OnDestroy {
         }
       });
 
-    this.staffDashboardService.refresh$.subscribe(() => {
-      if (!this.time?.id) {
-        this.form.reset();
-        this.form.patchValue({
-          date: this.time?.date,
-        });
-      }
-    });
+    this.staffDashboardService.refresh$
+      .pipe(takeUntil(this.destroyed$))
+      .subscribe(() => {
+        if (!this.time?.id) {
+          this.form.reset();
+          this.form.patchValue({
+            date: this.time?.date,
+          });
+        }
+      });
   }
 
   ngOnChanges(changes: SimpleChanges) {
@@ -212,6 +214,7 @@ export class StaffDashboardTimeEntryComponent implements OnChanges, OnDestroy {
   }
 
   ngOnDestroy() {
+    console.log('destroying');
     this.destroyed$.next();
     this.destroyed$.complete();
   }
@@ -222,4 +225,13 @@ export class StaffDashboardTimeEntryComponent implements OnChanges, OnDestroy {
       this.hqTimeDelete.emit({ id });
     }
   }
+
+  blurInput(target: EventTarget | null) {
+    if (
+      target instanceof HTMLInputElement ||
+      target instanceof HTMLSelectElement
+    ) {
+      target.blur();
+    }
+  }
 }

From 8684347ee78b7765929228bcd7fece69f53fe1df Mon Sep 17 00:00:00 2001
From: Ryan Maffit <rmaffit@sancsoft.com>
Date: Wed, 26 Jun 2024 03:51:25 +0000
Subject: [PATCH 22/25] Blur input on enter

---
 .../staff-dashboard-time-entry.component.html                  | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.html b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.html
index c9e0f5e7..6ce307ee 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.html
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-time-entry/staff-dashboard-time-entry.component.html
@@ -8,6 +8,7 @@
           type="number"
           formControlName="hours"
           step="0.25"
+          (keydown.enter)="blurInput($event.target)"
         />
       </td>
       <td class="border-b border-black py-2 pl-2">
@@ -99,6 +100,7 @@
               class="w-[100%] block text-[14px] px-2 py-1 border border-black appearance-none focus:outline-none focus:border-white placeholder:text-gray-100 bg-blue-900 rounded h-[30px]"
               type="text"
               formControlName="task"
+              (keydown.enter)="blurInput($event.target)"
             />
           }
         }
@@ -108,6 +110,7 @@
           class="w-[100%] block text-[14px] px-2 py-1 border border-black appearance-none focus:outline-none focus:border-white placeholder:text-gray-100 bg-blue-900 rounded h-[30px]"
           type="text"
           formControlName="notes"
+          (keydown.enter)="blurInput($event.target)"
         />
       </td>
       <td class="border-b border-black py-2 pl-2 pr-5">

From fb32637ea59946a220ba3fa6dc03f286170e1fa2 Mon Sep 17 00:00:00 2001
From: Ryan Maffit <rmaffit@sancsoft.com>
Date: Wed, 26 Jun 2024 04:16:51 +0000
Subject: [PATCH 23/25] QoL updates to dashboard

---
 CHANGELOG.md                                  | 15 +++++
 src/angular/hq/src/app/app.routes.ts          |  2 +-
 .../staff-dashboard/get-dashboard-time-v1.ts  |  1 +
 .../staff-dashboard-date-range.component.html | 17 +-----
 .../staff-dashboard.component.html            | 59 ++++++++++++-------
 .../staff-dashboard.component.ts              |  2 +-
 .../Times/GetDashboardTimeV1.cs               |  1 +
 .../HQ.Server/Services/TimeEntryServiceV1.cs  |  1 +
 8 files changed, 60 insertions(+), 38 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b906dfa1..e4a23067 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,21 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.3.5] - 2024-06-20
+
+### Fixed
+- CLI null reference exception if notes are empty
+- Newlines in CLI output messages
+- Client feedback
+
+### Added
+- StaffId to CLI state object for querying time
+- Labels to all form inputs, search fields
+- `AcceptedBy` staff to time entries to track who accepted the time entry
+- Authorization checks to Angular project
+  - Staff can view mostly everything and executive/admin users can create/edit everything
+- No records found on client table lists
+
 ## [0.3.4] - 2024-06-17
 
 ### Fixed
diff --git a/src/angular/hq/src/app/app.routes.ts b/src/angular/hq/src/app/app.routes.ts
index 393e79a6..4a3a990e 100644
--- a/src/angular/hq/src/app/app.routes.ts
+++ b/src/angular/hq/src/app/app.routes.ts
@@ -7,7 +7,7 @@ import { HQRole } from './enums/hqrole';
 export const routes: Routes = [
   {
     path: '',
-    redirectTo: 'psr',
+    redirectTo: 'dashboard',
     pathMatch: 'full',
   },
   {
diff --git a/src/angular/hq/src/app/models/staff-dashboard/get-dashboard-time-v1.ts b/src/angular/hq/src/app/models/staff-dashboard/get-dashboard-time-v1.ts
index df8464be..b4bb5a09 100644
--- a/src/angular/hq/src/app/models/staff-dashboard/get-dashboard-time-v1.ts
+++ b/src/angular/hq/src/app/models/staff-dashboard/get-dashboard-time-v1.ts
@@ -28,6 +28,7 @@ export interface GetDashboardTimeV1Response {
 export interface GetDashboardTimeV1TimeForDate {
   date: string;
   times: GetDashboardTimeV1TimeForDateTimes[];
+  totalHours: number;
 }
 
 export interface GetDashboardTimeV1TimeForDateTimes {
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-date-range/staff-dashboard-date-range.component.html b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-date-range/staff-dashboard-date-range.component.html
index 3d2ab3cb..d87e1515 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-date-range/staff-dashboard-date-range.component.html
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-date-range/staff-dashboard-date-range.component.html
@@ -5,17 +5,12 @@
       <div class="grid grid-flow-col gap-[15px]">
         <button
           type="button"
-          class="flex align-middle justify-center items-center mt-4"
+          class="flex align-middle justify-center items-center mt-1"
           (click)="staffDashboardService.date.setValue(dashboard.previousDate)"
         >
           <i class="bi bi-arrow-left-short text-[28px] cursor-pointer"></i>
         </button>
         <div>
-          <label
-            for="startDate"
-            class="font-open-sans text-nav-disabled text-xs font-bold uppercase"
-            >Start Date</label
-          >
           <!-- input date -->
           <div class="grid relative w-full max-w-[220px]">
             <input
@@ -38,16 +33,10 @@
           staffDashboardService.period.value !==
           staffDashboardService.Period.Today
         ) {
-          <div class="flex align-middle justify-center items-center mt-4">
+          <div class="flex align-middle justify-center items-center mt-1">
             <span class="w-3 h-1 bg-white"></span>
           </div>
           <div>
-            <label
-              for="endDate"
-              class="font-open-sans text-nav-disabled text-xs font-bold uppercase"
-              >End Date</label
-            >
-
             <!-- input date -->
             <div class="grid relative w-full max-w-[220px]">
               <input
@@ -71,7 +60,7 @@
 
         <button
           type="button"
-          class="flex align-middle justify-center items-center mt-4"
+          class="flex align-middle justify-center items-center mt-1"
           (click)="staffDashboardService.date.setValue(dashboard.nextDate)"
         >
           <i class="bi bi-arrow-right-short text-[28px] cursor-pointer"></i>
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
index 9da488fe..74ebd395 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.html
@@ -1,7 +1,7 @@
 <div class="px-5">
   <div class="flex items-center justify-between gap-[20px]">
     <div class="text-4xl text-white">
-      {{ (staffDashboardService.time$ | async)?.staffName }}
+      {{ (staffDashboardService.time$ | async)?.staffName || "-" }}
     </div>
     <div class="flex space-x-8 p-4">
       <div class="text-center text-white">
@@ -9,7 +9,10 @@
           HRS THIS WEEK
         </div>
         <p class="text-right">
-          {{ (staffDashboardService.time$ | async)?.hoursThisWeek?.toFixed(2) }}
+          {{
+            (staffDashboardService.time$ | async)?.hoursThisWeek?.toFixed(2) ||
+              "-"
+          }}
         </p>
       </div>
       <div class="text-center text-white">
@@ -17,7 +20,10 @@
           HRS LAST WEEK
         </div>
         <p class="text-right">
-          {{ (staffDashboardService.time$ | async)?.hoursLastWeek?.toFixed(2) }}
+          {{
+            (staffDashboardService.time$ | async)?.hoursLastWeek?.toFixed(2) ||
+              "-"
+          }}
         </p>
       </div>
       <div class="text-center text-white">
@@ -26,7 +32,8 @@
         </div>
         <p class="text-right">
           {{
-            (staffDashboardService.time$ | async)?.hoursThisMonth?.toFixed(2)
+            (staffDashboardService.time$ | async)?.hoursThisMonth?.toFixed(2) ||
+              "-"
           }}
         </p>
       </div>
@@ -35,13 +42,15 @@
           VACATION
         </div>
         <p class="text-right">
-          {{ (staffDashboardService.time$ | async)?.vacation?.toFixed(2) }}
+          {{
+            (staffDashboardService.time$ | async)?.vacation?.toFixed(2) || "-"
+          }}
         </p>
       </div>
     </div>
   </div>
 </div>
-<div class="px-5 pt-4 mb-[8px]">
+<div class="px-5 pt-2 mb-[8px]">
   <div class="flex items-end gap-[20px]">
     <hq-staff-dashboard-search-filter />
     <div class="inline-flex gap-20 ml-20">
@@ -49,8 +58,10 @@
         <label for="Total hours" class="uppercase font-bold text-xs"
           >Total Hours</label
         >
-        <div class="text-xl">
-          {{ (staffDashboardService.time$ | async)?.totalHours?.toFixed(2) }}
+        <div class="text-right font-rajdhani font-semibold text-3xl">
+          {{
+            (staffDashboardService.time$ | async)?.totalHours?.toFixed(2) || "-"
+          }}
         </div>
       </div>
       <!-- Billable Hours Display -->
@@ -58,16 +69,19 @@
         <label for="BillableHours" class="uppercase font-bold text-xs"
           >Billable Hours</label
         >
-        <div class="text-xl">
-          {{ (staffDashboardService.time$ | async)?.billableHours?.toFixed(2) }}
+        <div class="text-right font-rajdhani font-semibold text-3xl">
+          {{
+            (staffDashboardService.time$ | async)?.billableHours?.toFixed(2) ||
+              "-"
+          }}
         </div>
       </div>
     </div>
   </div>
 </div>
 
-<div class="px-5 py-2 mb-[8px] bg-black-alt">
-  <div class="flex items-end gap-[20px] justify-between">
+<div class="px-5 py-2 bg-black-alt">
+  <div class="flex items-end gap-[20px] justify-between items-center">
     <hq-staff-dashboard-date-range />
     <button
       class="inline-block text-center px-2 py-2 border border-orange-500 bg-orange-500 hover:bg-orange-600 hover:border-orange-600 text-white rounded min-w-[120px] font-normal"
@@ -83,9 +97,10 @@
   @for (date of dashboard.dates; track date.date) {
     @if (dashboard.dates.length > 1) {
       <div
-        class="px-5 pb-1 pt-4 font-open-sans text-nav-disabled text-xs font-bold uppercase"
+        class="px-5 pb-1 pt-4 font-open-sans text-nav-disabled text-xs font-bold uppercase flex justify-between"
       >
-        {{ date.date | date: "EEEE" }} | {{ date.date }}
+        <div>{{ date.date | date: "EEEE" }} | {{ date.date }}</div>
+        <div>{{ date.totalHours | number: "1.2-2" }} hours</div>
       </div>
     }
     <table class="min-w-full border-spacing-0 border-separate">
@@ -100,40 +115,40 @@
             Hrs
           </th>
           <th
-            class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5"
+            class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-2"
             width="120"
           >
             Date
           </th>
           <th
-            class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5"
+            class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-2"
             width="120"
           >
             Chrg Code
           </th>
           <th
-            class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5"
+            class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-2"
             width="180"
           >
             Client
           </th>
           <th
-            class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5"
+            class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-2"
             width="180"
           >
             Project
           </th>
           <th
-            class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5"
-            width="140"
+            class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-2"
+            width="160"
           >
             Activity / Task
           </th>
-          <th class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5">
+          <th class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-2">
             Description
           </th>
           <th
-            class="bg-blue-900 border-steel-blue-600 border-y py-3 pl-5"
+            class="bg-blue-900 border-steel-blue-600 border-y"
             width="20"
           ></th>
         </tr>
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts
index 345aa629..51bf7864 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts
@@ -109,7 +109,7 @@ export class StaffDashboardComponent {
     const confirm = await firstValueFrom(
       this.modalService.confirm(
         'Submit',
-        'Are you sure you want to submit time entries?',
+        'Are you sure you want to submit time entries? Once submitted time entries cannot be modified.',
       ),
     );
 
diff --git a/src/dotnet/HQ.Abstractions/Times/GetDashboardTimeV1.cs b/src/dotnet/HQ.Abstractions/Times/GetDashboardTimeV1.cs
index 8884e495..78f9ca8a 100644
--- a/src/dotnet/HQ.Abstractions/Times/GetDashboardTimeV1.cs
+++ b/src/dotnet/HQ.Abstractions/Times/GetDashboardTimeV1.cs
@@ -65,6 +65,7 @@ public class TimeForDate
     {
         public DateOnly Date { get; set; }
         public List<TimeEntry> Times { get; set; } = new List<TimeEntry>();
+        public decimal TotalHours { get; set; }
     }
 
     public class TimeEntry
diff --git a/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs b/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs
index 37cb1143..987cf6cd 100644
--- a/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs
+++ b/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs
@@ -585,6 +585,7 @@ public TimeEntryServiceV1(HQDbContext context)
                 if (times.ContainsKey(date))
                 {
                     timeForDate.Times = times[date];
+                    timeForDate.TotalHours = timeForDate.Times.Sum(t => t.Hours);
                 }
 
                 response.Dates.Add(timeForDate);

From c062edafeadc44c163ebd39246f5e1b7841aadfd Mon Sep 17 00:00:00 2001
From: Ryan Maffit <rmaffit@sancsoft.com>
Date: Wed, 26 Jun 2024 04:22:59 +0000
Subject: [PATCH 24/25] Fixed time search

---
 src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs b/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs
index 987cf6cd..ae577fa1 100644
--- a/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs
+++ b/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs
@@ -293,12 +293,14 @@ public TimeEntryServiceV1(HQDbContext context)
             if (!string.IsNullOrEmpty(request.Search))
             {
                 records = records.Where(t =>
+
+                    t.Staff.Name.ToLower().Contains(request.Search.ToLower()) ||
+                    t.ChargeCode.Project!.Client.Name.ToLower().Contains(request.Search.ToLower()) ||
+                    t.ChargeCode.Project!.Name.ToLower().Contains(request.Search.ToLower()) ||
                     t.Notes!.ToLower().Contains(request.Search.ToLower()) ||
-                    t.ChargeCode != null && t.ChargeCode.Code.ToLower().Contains(request.Search.ToLower()) ||
-                    t.Activity != null && t.Activity.Name.ToLower().Contains(request.Search.ToLower()) ||
-                    t.Task != null && t.Task.ToLower().Contains(request.Search.ToLower()) ||
-                    t.ChargeCode!.Project!.Name.ToLower().Contains(request.Search.ToLower()) ||
-                    t.ChargeCode.Project.Client.Name != null && t.ChargeCode.Project.Client.Name.ToLower().Contains(request.Search.ToLower())
+                    t.ChargeCode.Code.ToLower().Contains(request.Search.ToLower()) ||
+                    t.Activity!.Name.ToLower().Contains(request.Search.ToLower()) ||
+                    t.Task!.ToLower().Contains(request.Search.ToLower())
                 );
             }
 

From 51321aedb7d376cd4455b1e79aa1cae9c2eadceb Mon Sep 17 00:00:00 2001
From: Ryan Maffit <rmaffit@sancsoft.com>
Date: Wed, 26 Jun 2024 04:53:30 +0000
Subject: [PATCH 25/25] Testing, QoL updates, vacation calculation

---
 .../service/staff-dashboard.service.ts        |  9 +++++---
 ...aff-dashboard-search-filter.component.html |  1 +
 .../staff-dashboard.component.ts              |  3 +--
 .../Times/GetDashboardTimeV1.cs               |  2 +-
 .../HQ.Server/Services/TimeEntryServiceV1.cs  | 23 ++++++++++++++-----
 5 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/angular/hq/src/app/staff-dashboard/service/staff-dashboard.service.ts b/src/angular/hq/src/app/staff-dashboard/service/staff-dashboard.service.ts
index 02870ed0..61fea92e 100644
--- a/src/angular/hq/src/app/staff-dashboard/service/staff-dashboard.service.ts
+++ b/src/angular/hq/src/app/staff-dashboard/service/staff-dashboard.service.ts
@@ -61,17 +61,20 @@ export class StaffDashboardService {
       period: period$,
       search: search$,
       date: date$,
-    });
+    }).pipe(shareReplay(1));
 
-    this.time$ = request$.pipe(
+    const time$ = request$.pipe(
       debounceTime(250),
       switchMap((request) => this.hqService.getDashboardTimeV1(request)),
       tap((response) =>
         this.date.setValue(response.startDate, { emitEvent: false }),
       ),
-      shareReplay(1),
     );
 
+    const refreshTime$ = this.refresh$.pipe(switchMap((t) => time$));
+
+    this.time$ = merge(time$, refreshTime$).pipe(shareReplay(1));
+
     this.chargeCodes$ = this.time$.pipe(map((t) => t.chargeCodes));
     this.clients$ = this.time$.pipe(map((t) => t.clients));
   }
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-search-filter/staff-dashboard-search-filter.component.html b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-search-filter/staff-dashboard-search-filter.component.html
index 2c7eaed9..52124da7 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard-search-filter/staff-dashboard-search-filter.component.html
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard-search-filter/staff-dashboard-search-filter.component.html
@@ -35,6 +35,7 @@
       >
         <option [ngValue]="staffDashboardService.Period.Today">Day</option>
         <option [ngValue]="staffDashboardService.Period.Week">Week</option>
+        <!-- <option [ngValue]="staffDashboardService.Period.Month">Month</option> -->
       </select>
       <span
         class="flex items-center justify-center h-full pointer-events-none z-10 right-0 relative col-start-1 row-start-1 self-center justify-self-end w-[36px] after:block after:w-[1px] after:absolute after:left-[1px] after:top-[7px] after:bottom-[7px] after:bg-gray-100"
diff --git a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts
index 51bf7864..b9671ffc 100644
--- a/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts
+++ b/src/angular/hq/src/app/staff-dashboard/staff-dashboard.component.ts
@@ -92,9 +92,9 @@ export class StaffDashboardComponent {
       await firstValueFrom(this.hqService.upsertTimeV1(request));
       if (event.id) {
         this.toastService.show('Success', 'Time entry successfully updated.');
+        this.staffDashboardService.refresh();
       } else {
         this.toastService.show('Success', 'Time entry successfully created.');
-        this.staffDashboardService.search.reset();
         this.staffDashboardService.refresh();
       }
     } catch (err) {
@@ -134,7 +134,6 @@ export class StaffDashboardComponent {
           'Success',
           'Time entries successfully submitted.',
         );
-        this.staffDashboardService.search.reset();
         this.staffDashboardService.refresh();
       } else {
         console.log('ERROR: Could not find staff');
diff --git a/src/dotnet/HQ.Abstractions/Times/GetDashboardTimeV1.cs b/src/dotnet/HQ.Abstractions/Times/GetDashboardTimeV1.cs
index 78f9ca8a..bc847c0e 100644
--- a/src/dotnet/HQ.Abstractions/Times/GetDashboardTimeV1.cs
+++ b/src/dotnet/HQ.Abstractions/Times/GetDashboardTimeV1.cs
@@ -27,7 +27,7 @@ public class Response
         public decimal HoursThisMonth { get; set; }
         public decimal HoursLastWeek { get; set; }
         public string? StaffName { get; set; }
-        public int Vacation { get; set; }
+        public decimal Vacation { get; set; }
 
     }
 
diff --git a/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs b/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs
index ae577fa1..087af77f 100644
--- a/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs
+++ b/src/dotnet/HQ.Server/Services/TimeEntryServiceV1.cs
@@ -488,10 +488,21 @@ public TimeEntryServiceV1(HQDbContext context)
                 .Where(t => t.StaffId == request.StaffId && t.Date >= request.Date.GetPeriodStartDate(Period.LastWeek) && t.Date <= request.Date.GetPeriodEndDate(Period.LastWeek))
                 .AsQueryable();
             var hrsThisMonthQuery = _context.Times
-            .AsNoTracking()
-            .Where(t => t.StaffId == request.StaffId && t.Date >= request.Date.GetPeriodStartDate(Period.Month) && t.Date <= request.Date.GetPeriodEndDate(Period.Month))
-            .AsQueryable();
-            var vacationHours = (await _context.Staff.FirstOrDefaultAsync(t => t.Id == request.StaffId))?.VacationHours;
+                .AsNoTracking()
+                .Where(t => t.StaffId == request.StaffId && t.Date >= request.Date.GetPeriodStartDate(Period.Month) && t.Date <= request.Date.GetPeriodEndDate(Period.Month))
+                .AsQueryable();
+
+            var staff = await _context.Staff.FindAsync(request.StaffId);
+            if (staff == null)
+            {
+                return Result.Fail("Unable to find staff.");
+            }
+
+            var currentYearStart = DateOnly.FromDateTime(DateTime.Today).GetPeriodStartDate(Period.Year);
+            var totalVacationHours = staff.VacationHours;
+
+            var usedVacationHours = await _context.Times.Where(t => t.StaffId == request.StaffId && t.Date >= currentYearStart && t.ChargeCode.Project!.Name.ToLower().Contains("vacation")).SumAsync(t => t.Hours);
+            var vacationHours = totalVacationHours - usedVacationHours;
 
             if (!String.IsNullOrEmpty(request.Search))
             {
@@ -574,10 +585,10 @@ public TimeEntryServiceV1(HQDbContext context)
             response.HoursThisWeek = await hrsThisWeekQuery.SumAsync(t => t.Hours, ct);
             response.HoursLastWeek = await hrsLastWeekQuery.SumAsync(t => t.Hours, ct);
             response.HoursThisMonth = await hrsThisMonthQuery.SumAsync(t => t.Hours, ct);
-            response.Vacation = vacationHours ?? 0;
+            response.Vacation = vacationHours;
             response.NextDate = nextDate;
             response.PreviousDate = previousDate;
-            response.StaffName = (await _context.Staff.FirstOrDefaultAsync(t => t.Id == request.StaffId, ct))?.Name;
+            response.StaffName = staff.Name;
 
             DateOnly date = endDate;
             do