1 of 14

Employee Time Capture Portal

Company : Rule4

2 of 14

Table of Contents

Problem Statement
Proposed Solution
Tech Stack
Frontend: WorkFlow
Frontend: Integration
Backend: Architecture
Backend: Services, Pipeline
Demo
Challenges

3 of 14

Problem Statement

Current Challenges:

Outdated Timesheet Grid: The existing timesheet grid is based on legacy code, lacking in modern features and efficiency, which impedes user experience and productivity.
Inefficient Time Entry: There is no integration of smart features to leverage data from existing communication channels, resulting in slow and cumbersome time entry processes.

Employee Timecapture: Modernizing Timesheet Management

4 of 14

Proposed Solution

Migration to Modern Frontend Framework: Utilize Quasar for responsive UI and AG Grid for efficient data management, integrated within the existing Django interface.
Smart Suggestions for Time Entry: Backend service in Go, Node and Python to analyze communication data and provide smart, actionable suggestions directly to the frontend.

5 of 14

Tech Stack

Frontend

Backend

Testing

Project Planning

Deployment

6 of 14

Frontend: WorkFlow

Janushi’s Part:

So Akhil and I worked on the frontend part of the project together. This is the workflow and framework that we finalized for the implementation. As mentioned earlier the problem statement had two components. First was to migrate the old legacy timesheet table to modern frameworks and thus we decided to use Quasar which gives a solid set of UI components to start with and uses Vue 3 under the hood. To create the new table we decided to use AG Grid which is a very well know grid lib. We needed to use Pinia for managing global states for the variables to handle table events. . Finally we used webpack to bundle and generate the static files.

The main ask for the project was to inject Vue code in Django so that it render some components from Django and other components from Vue codebase.

Akhil’s Part:

A more detailed explanation.

Why we are using Pinia, Ag grid out of box is good to interact with (like sorting searching filters and all those features)but adding data to the table from the frontend is not that straight forward and requires using Custom Vue components thus we decide to use Pinia to manage the context between various components as its not created similar to conventional Vue components.
We decided to use .env for passing the api endpoint and giving the option to disable the suggestion feature and just use the new grid.

7 of 14

Frontend: Integration

8 of 14

Backend: High Level Architecture Diagram

9 of 14

Infra and Data Processing Service

Performs time capture request validation through the use of gRPC
Uses the concept of pub/sub to make the backend asynchronous
Regex based validation for creating consumer groups in Kafka
Transactional based publishing in kafka
Backend is containerized and hosted on AWS with both gRPC and HTTP Server running concurrently through the use goroutines.

10 of 14

Slack Service

Pulls data from internal channels for each employee
If # messages > 3, half an hour is added to the time spent in the channel
Number of messages configurable
Set up as a cron job on AWS to run everyday at 11.59 PM
Makes a gRPC request to data processing service

Slack Service

Slack API

gRP call

Data Processing Service

11 of 14

GCal Service

Gprc Request

GCal Service

Gcal API

Data Processing Service

Authentication using service account credentials and using Google Calendar API to retrieve events for each user in the domain.
Number of days (starting from today) is configurable, default being 1 day
Fetching Client Name from the subject line.
For each event a grpc request will be created and sent to Data Processing Service.
Dockerized the service -> provide environment variable file , and run the Docker image.

12 of 14

Demo

13 of 14

Challenges

01

02

03

04

05

Navigating the Integration

AG Grid flow

Searching how to navigate these process was a task.

Managing context between various Custom Vue components.

Non Standard Data

Accuracy Of Notification

User identifiers in channels and GCal meetings were not uniform.

Handling various edge cases to ensure old notifications are deleted and not repeated

Frontend

Backend

Communication

Lost access to Rule 4 Slack channel and had trouble establishing contact again for a month.

14 of 14

Thanks!

Any questions?

CREDITS: This presentation template was created by Slidesgo, and includes icons by Flaticon, and infographics & images by Freepik