Report (#1469)

* create report service

* write report from runtimeState

* use in UI

* clear report

* update types

* clear all from settings menu

* rearence rightclik menu

* refactor styling

* also report roll events

* ontime/under time is same colour

* refactor reporter

* add target to ontime-refetch

* remove menu

* fectch only on message from server

* memo useGetEventReport

* refactor

* use staleTime

* dont add to menu yet

* implement review

* clear all from menu

* fix merge

* start end show

* combine test for the go button text and action

* add report to menu

* extract csv utility

* report management

* unneeded async

* small refacort of triggerReportEntry

---------

Co-authored-by: Carlos Valente <carlosvalente@pm.me>

apps/client/src/features/control/playback/playback-buttons/PlaybackButtons.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { Tooltip } from '@chakra-ui/react';
 import { IoPause } from '@react-icons/all-files/io5/IoPause';
 import { IoPlay } from '@react-icons/all-files/io5/IoPlay';
@@ -34,7 +35,7 @@ export default function PlaybackButtons(props: PlaybackButtonsProps) {
   const isLast = selectedEventIndex === numEvents - 1;
   const noEvents = numEvents === 0;
 
-  const disableGo = isRolling || noEvents || (isLast && !isArmed);
+  const disableGo = isRolling || noEvents;
   const disableNext = isRolling || noEvents || isLast;
   const disablePrev = isRolling || noEvents || isFirst;
 
@@ -45,14 +46,16 @@ export default function PlaybackButtons(props: PlaybackButtonsProps) {
   const disableStop = !playbackCan.stop;
   const disableReload = !playbackCan.reload;
 
-  const goModeText = selectedEventIndex === null || isArmed ? 'Start' : 'Next';
-  const goModeAction = () => {
+  const [goModeAction, goModeText] = useMemo(() => {
     if (isArmed) {
-      setPlayback.start();
-    } else {
-      setPlayback.startNext();
+      return [setPlayback.start, 'Start'];
+    } else if (isLast) {
+      return [setPlayback.stop, 'Finish'];
+    } else if (selectedEventIndex === null) {
+      return [setPlayback.startNext, 'Start'];
     }
-  };
+    return [setPlayback.startNext, 'Next'];
+  }, [isArmed, isLast, selectedEventIndex]);
 
   return (
     <div className={style.buttonContainer}>