**As** a user
**I want to** be able to track my time on the go
**so that** I don't need to grab a train backwards to the office or get fired

### **Acceptance criteria**

* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion A new module is added in the bottom bar centre position: `Time tracking`

#### Module view

* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion A widget with the progress of logged time this week indicating the total amount of hours logged in and a graphic [FL Chart Bar Chart Sample 1 (Mingguan)](https://github.com/imaNNeo/fl_chart/blob/main/example/lib/presentation/samples/bar/bar_chart_sample1.dart). 
* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion This will display the logged time per day, having the day with more time logged in as the maximum of the bars for all the days.
* [ ] The header oof the widget allows the user to navigate back and forward on the weeks. No further than the current week. By default, the current week is loaded.
* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion The amount of days displayed in the graph depends on the administration setting of the instance about `Work week`.
* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion The graph should always centre and divide the padding between bars to allocate from 1 to 7 days in it.
* [ ] Tapping on a day of the graph displays that day on the list below expanded, hiding all the other days. The action to collapse the list should change to a close "x".
* [ ] When the user taps the same day again, the week view is restored.
* [ ] The widget is collapsable.
* [ ] All the days of the week in collapsable sections with the information of how much time has been logged for each day.
* [ ] By default, Today will be expanded and the rest of the days collapsed.
* [ ] For previous weeks, all days are collapsed by default.
* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion When expanded, the sections containing logged time will have a BorderBox list with all the logged times in it, including the following information:
* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion Time logged.
* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion Activity (if any).
* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion Project.
* [ ] Work package type and name (ensure to use the truncation implemented in <mention class="mention" data-id="66240" data-type="work_package" data-text="#66240">#66240</mention>).
* [ ] Comment (if any).
* [ ] More icon with the actions to edit the log time and delete.
* [ ] A button will be available at the bottom of each list to log time without specific timing or starting a timer.
* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion A rectangular FAB button allows the user to start a timer. If a timer is running already, this button must be hidden.

#### Timer running view

* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion When a timer is started, a full screen modal is open with a running timer and a spinner indicator.
* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion The spinner indicator re-runs every 60m completed of timer.
* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion Below the spinner, a link allows the user to quickly add a related work package to the timer. This opens the bottom sheet for selecting work packages.
* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion At the bottom, two buttons are centred to pause and stop the timer.
* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion When a timer is running, a card with blue background is added on top of the week progress snippet with the running time and the linked work package (if any). When tapped, it opens the full screen modal of the timer.
* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion Pausing a timer doesn&#39;t log anytime and allow the user to always come back to it through the card on the top of the time tracking module page.
* [ ] If the user has a timer running or paused and log out of the application and log in again, they should still see the timer running (or paused).

#### Log time modal

* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion Once the user stops a timer, the log time full screen modal appears.
* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion Here the user can edit the information for the related work package, the hours, the date, start, and finish time (if active), the activity and add a comment.
* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion The user can select to add exact times to the log or not. This is only available if the administration settings to be able to log specific times is enabled. There is also the possibility that this is enforced by the administrator of the instance through a setting, in that case the checkbox should not be visible, and the time field should take the full width.
* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion The list of activities available depends on the work package selected, so the field needs to be inactive until the user selects a work package to log time on.
* [ ] Ensure that the options displayed as activities are the correct ones for the work package selected, as in the web app.
* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion At the bottom bar of the modal, there are the options to resume the tracking, cancel it or save it.
* [ ] The time logged is expressed always in hours in the Hours field. This should behave similar to the web app, where any entry is transformed to “1.5h” format.

#### Work packages

* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion Ensure the full screen log time modal used thought the work packages details view (using the three dots menu in the top bar) for login time also opens this modal now and not the previous non-full screen modal.
* Begin of the insertion[x]End of the insertion Begin of the deletion [ ]End of the deletion Add a new option in the more menu of the work packages view to start a timer for that work package that will open the timer running modal (with the spinner).
* [ ] Only one timer can be running at the same time. The option on the dropdown menu needs to be hidden if there is a timer running. Begin of the insertion
* [ ] If timer is running for the workpackage, the item in dropdown menu should be changed to &quot;Edit timer&quot;. By clicking on it, user will see the timer running modal (with the spinner).End of the insertion

### **Technical notes**

* All the time logged needs to be sent to the web app, and we should be able to receive all the data of the logged time from the app also. Begin of the insertion

* User can create timer in one instance, then change instance and run another timer on another instance. in other words: one timer per instance per user.End of the insertion


### **Permissions and visibility considerations**

* Tracking time with specific times (start and finish) is a setting that can be activated or deactivated at an administration level. This control both the visibility of the checkbox on the modal and the input fields of start and finish time.

* This setting can also be marked as mandatory. In that case, the checkbox to not use specific times to log time should not be visible.

* Users should have the permission to log time in order to see the time tracking tab.


### **Visual reference**

<figure class="table op-uc-figure_align-center op-uc-figure"><table class="op-uc-table"><tbody><tr class="op-uc-table--row"><td class="op-uc-table--cell"><p class="op-uc-p"><img class="image_resized op-uc-image op-uc-image_inline" style="width:320px;" src="/api/v3/attachments/777686/content"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><img class="image_resized op-uc-image op-uc-image_inline" style="width:320px;" src="/api/v3/attachments/774775/content"></p></td><td class="op-uc-table--cell"><p class="op-uc-p"><img class="image_resized op-uc-image op-uc-image_inline" style="width:320px;" src="/api/v3/attachments/774776/content"></p></td></tr></tbody></table></figure>

### **Out of scope**

* ###