Tracking Enhancements and UI Bug Fixing

[Harman-rd]

Tracking Enhancement

• Fixed video playback status to better capture playback time on full screen.
• Sync tracking's logs with server on specific interval.
• Implement monthly auto-clear mechanism for locally stored granular tracking records.
• Used DB data as cached and Persistence data with local web storage for better client-side data handling.
• Fix tracking calculations on client side.

Add structured logs for: Ref: #36

• Tracking start/stop events, Tab status updates, Errors and failures during tracking.
• Use appropriate log levels such as info, warn, error, etc., across all tracking logs.
• Eliminate logging logic that writes directly to the database to reduce overhead and avoid duplication.
• Add detailed logging.
• Add system information.

UI Bug Fixing and Enhancement: Ref: #37

• Misalignment and inconsistent styles in the tracking dashboard, particularly in the activity timeline.
• Update user status indicator styles to clearly show whether API keys are set up.
• The color scheme of the Overall Activity has been improved and also a legend has been added for more clarification.
• Some help texts have been added to make the user understand the sections more clearly.
• A monthly section has been added in the Details page.
• The color scheme of the delete buttons have been changed to make it more clear to the users.
• The Whitelist and Blacklist sections have been overhauled. The text input box can take comma separated values.
• Validations has been added for Whitelist and Blacklist sections.
• The list has been given a fixed height and post that the overflow is made scrollable.
• Pressing enter also creates Blacklist and whitelist entries.
• There was an error where the final time was shown in negative, that has been resolved.
• Codealike logo and name on same line now along with the User status.

Other Changes

• Outdated NPM packages updated in this requirement.
• Bumped the project version accordingly.
• Fix TypeScript errors and warnings.