Sriram TimeLogger for BMdashboard

[sri0606]

Description

Implementing "Time Logger" Function for bmdashboard.
http://localhost:3000/bmdashboard/timelog

Related PRS (if any):

Updated PR from #2494

This PR should be tested along with Backend 1283

Main changes explained:

This PR is for implementing the followings:

URL: “/bmdashboard/timelog”

By selecting a specific project, the manager can view the users assigned to the project.
The top bar shows the name of the user. The color may change according to the user’s role. For example, light blue for volunteers, orange for core team, light green for managers and mentors, and red for owner.
The “start”, “stop” or “clear” buttons are the same as the buttons used for time log in the phase one system.
A select dropdown for the manager to monitor. The value here will be the default/pre-select value passed to the time log form to save.

How to test:

1. check into current branch
2. do npm install and ... to run this PR locally
3. Clear site data/cache
4. log as any user
5. go to http://localhost:3000/bmdashboard/timelog, you may need to login again.
6. select a project to test
7. test start/pause/stop/clear time log for each member

Screenshots or videos of changes:

HGN.APP.-.Google.Chrome.2024-07-22.12-52-31.mp4

Note:

Function implemented by now:

1. retrieve project and member information from server to display member card
2. Stop/Pause/Stop/Clear time log
3. Set card color according to member role

Functions to be implemented further

1. retrieve task name to display on the member's card
   --> may need to think about separate signaling to retrieve task information because of database fetch latency
2. update time log information to the database
3. some cosmetic improvement

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	121b924
🔍 Latest deploy log	https://app.netlify.com/sites/highestgoodnetwork-dev/deploys/67e5d336ed05800008987512
😎 Deploy Preview	https://deploy-preview-3299--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[Amalesh-A]

I followed your steps, and I was able to replicate the features. I logged as an admin, and was able to observe the following,

However, there's a cosmetic improvement that could be made — I noticed that the timer's orientation remains unchanged even when zooming in or out. For example,

[Amalesh-A]

I followed your steps, and I was able to replicate the features. I logged as an admin, and was able to observe the following,

However, there's a cosmetic improvement that could be made — I noticed that the timer's orientation remains unchanged even when zooming in or out. For example,

[vishavk1992]

I have tested this PR and everything working as expected.