From a45516b94c9bdb265e81a8e8322185fb2d93220a Mon Sep 17 00:00:00 2001
From: Joosa Kurvinen <joosa.kurvinen@reaktor.com>
Date: Wed, 30 Oct 2024 11:45:36 +0200
Subject: [PATCH 01/16] add multiselect mode toggle

---
 .../child-attendance/ChildList.tsx            | 60 +++++++++++++++----
 .../child-attendance/ChildListItem.tsx        |  2 +
 2 files changed, 50 insertions(+), 12 deletions(-)

diff --git a/frontend/src/employee-mobile-frontend/child-attendance/ChildList.tsx b/frontend/src/employee-mobile-frontend/child-attendance/ChildList.tsx
index 6ed808a2fd..badd65b2f8 100644
--- a/frontend/src/employee-mobile-frontend/child-attendance/ChildList.tsx
+++ b/frontend/src/employee-mobile-frontend/child-attendance/ChildList.tsx
@@ -2,13 +2,15 @@
 //
 // SPDX-License-Identifier: LGPL-2.1-or-later
 
-import React from 'react'
+import React, { useState } from 'react'
 import styled from 'styled-components'
 
 import {
   AttendanceChild,
   AttendanceStatus
 } from 'lib-common/generated/api-types/attendance'
+import { UUID } from 'lib-common/types'
+import Checkbox from 'lib-components/atoms/form/Checkbox'
 import { FixedSpaceColumn } from 'lib-components/layout/flex-helpers'
 import {
   defaultMargins,
@@ -46,21 +48,47 @@ export default React.memo(function ChildList({
   const { i18n } = useTranslation()
   const unitId = unitOrGroup.unitId
 
+  const [multiSelectMode, setMultiSelectMode] = useState(false)
+  const [selectedChildren, setSelectedChildren] = useState<UUID[]>([])
+
   return (
     <FixedSpaceColumn>
       <OrderedList spacing="zero">
         {items.length > 0 ? (
-          items.map((ac) => (
-            <Li key={ac.id}>
-              <ChildListItem
-                unitOrGroup={unitOrGroup}
-                type={type}
-                key={ac.id}
-                child={ac}
-                childAttendanceUrl={routes.child(unitId, ac.id).value}
-              />
-            </Li>
-          ))
+          <>
+            {type === 'COMING' && (
+              <Li>
+                <MultiselectToggleBox>
+                  <Checkbox
+                    checked={multiSelectMode}
+                    onChange={setMultiSelectMode}
+                    label="Kirjaa useampi lapsi"
+                  />
+                </MultiselectToggleBox>
+              </Li>
+            )}
+            {items.map((ac) => (
+              <Li key={ac.id}>
+                <ChildListItem
+                  unitOrGroup={unitOrGroup}
+                  type={type}
+                  key={ac.id}
+                  child={ac}
+                  childAttendanceUrl={routes.child(unitId, ac.id).value}
+                  selected={
+                    multiSelectMode ? selectedChildren.includes(ac.id) : null
+                  }
+                  onChangeSelected={(selected) => {
+                    setSelectedChildren((prev) =>
+                      selected
+                        ? [...prev, ac.id]
+                        : prev.filter((id) => id !== ac.id)
+                    )
+                  }}
+                />
+              </Li>
+            ))}
+          </>
         ) : (
           <NoChildrenOnList data-qa="no-children-indicator">
             {i18n.mobile.emptyList(type || 'ABSENT')}
@@ -102,3 +130,11 @@ const Li = styled.li`
     left: ${defaultMargins.s};
   }
 `
+
+const MultiselectToggleBox = styled.div`
+  align-items: center;
+  display: flex;
+  padding: ${defaultMargins.s} ${defaultMargins.m};
+  border-radius: 2px;
+  background-color: ${colors.grayscale.g0};
+`
diff --git a/frontend/src/employee-mobile-frontend/child-attendance/ChildListItem.tsx b/frontend/src/employee-mobile-frontend/child-attendance/ChildListItem.tsx
index 85942fca19..80624b04f6 100644
--- a/frontend/src/employee-mobile-frontend/child-attendance/ChildListItem.tsx
+++ b/frontend/src/employee-mobile-frontend/child-attendance/ChildListItem.tsx
@@ -101,6 +101,8 @@ interface ChildListItemProps {
   onClick?: () => void
   type?: AttendanceStatus
   childAttendanceUrl: string
+  selected: boolean | null // null = not in multiselect mode
+  onChangeSelected: (selected: boolean) => void
 }
 
 export default React.memo(function ChildListItem({

From caef4b118b946cbe02ea98ea6eba67d605912db4 Mon Sep 17 00:00:00 2001
From: Joosa Kurvinen <joosa.kurvinen@reaktor.com>
Date: Wed, 30 Oct 2024 11:55:11 +0200
Subject: [PATCH 02/16] refactor layout

---
 .../child-attendance/ChildListItem.tsx        | 236 +++++++++---------
 1 file changed, 118 insertions(+), 118 deletions(-)

diff --git a/frontend/src/employee-mobile-frontend/child-attendance/ChildListItem.tsx b/frontend/src/employee-mobile-frontend/child-attendance/ChildListItem.tsx
index 80624b04f6..63274a1bfc 100644
--- a/frontend/src/employee-mobile-frontend/child-attendance/ChildListItem.tsx
+++ b/frontend/src/employee-mobile-frontend/child-attendance/ChildListItem.tsx
@@ -30,6 +30,8 @@ import { unitInfoQuery } from '../units/queries'
 import { ListItem } from './ChildList'
 import { Reservations } from './Reservations'
 
+const imageHeight = '56px'
+
 const ChildBox = styled.div`
   align-items: center;
   display: flex;
@@ -40,37 +42,47 @@ const ChildBox = styled.div`
 
 const AttendanceLinkBox = styled(Link)`
   display: flex;
+  flex-direction: row;
   align-items: center;
+  justify-content: space-between;
   width: 100%;
 `
 
-const imageHeight = '56px'
+export const IconBox = styled.div<{ type: AttendanceStatus }>`
+  background-color: ${(props) => attendanceColors[props.type]};
+  border-radius: 50%;
+  box-shadow: 0 0 0 2px ${(props) => attendanceColors[props.type]};
+  border: 2px solid ${colors.grayscale.g0};
+`
 
-const ChildBoxInfo = styled.div`
+const MainInfoColumn = styled.div`
   margin-left: 24px;
   flex-grow: 1;
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
   justify-content: space-between;
   min-height: ${imageHeight};
 `
 
-export const IconBox = styled.div<{ type: AttendanceStatus }>`
-  background-color: ${(props) => attendanceColors[props.type]};
-  border-radius: 50%;
-  box-shadow: 0 0 0 2px ${(props) => attendanceColors[props.type]};
-  border: 2px solid ${colors.grayscale.g0};
+const RightColumn = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: flex-end;
+  min-height: ${imageHeight};
+  margin-left: ${defaultMargins.xs};
 `
 
-const DetailsRow = styled.div`
+const NameRow = styled.div`
   display: flex;
-  flex-direction: row;
   justify-content: space-between;
-  align-items: center;
+  width: 100%;
+  word-break: break-word;
+`
+
+const DetailsText = styled.div`
   color: ${colors.grayscale.g70};
   font-size: 0.875em;
-  width: 100%;
 `
 
 const RoundImage = styled.img`
@@ -80,25 +92,29 @@ const RoundImage = styled.img`
   display: block;
 `
 
-const FixedSpaceRowWithLeftMargin = styled(FixedSpaceRow)`
-  margin-left: ${defaultMargins.m};
+const GroupName = styled(InformationText)`
+  text-align: right;
 `
 
-const NameRow = styled.div`
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  word-break: break-word;
+const RoundIconOnTop = styled(RoundIcon)`
+  position: absolute;
+  left: 40px;
+  top: -20px;
+  z-index: 2;
 `
 
-const GroupName = styled(InformationText)`
-  text-align: right;
+const IconPlacementBox = styled.div`
+  position: relative;
+  width: 0;
+  height: 0;
+  &.m {
+    font-size: 14px;
+  }
 `
 
 interface ChildListItemProps {
   unitOrGroup: UnitOrGroup
   child: ListItem
-  onClick?: () => void
   type?: AttendanceStatus
   childAttendanceUrl: string
   selected: boolean | null // null = not in multiselect mode
@@ -108,7 +124,6 @@ interface ChildListItemProps {
 export default React.memo(function ChildListItem({
   unitOrGroup,
   child,
-  onClick,
   type,
   childAttendanceUrl
 }: ChildListItemProps) {
@@ -137,7 +152,6 @@ export default React.memo(function ChildListItem({
   const maybeGroupName =
     type && unitOrGroup.type === 'unit' ? groupName : undefined
   const today = LocalDate.todayInSystemTz()
-  const childAge = today.differenceInYears(child.dateOfBirth)
 
   const hasActiveStickyNote = useMemo(
     () => child.stickyNotes.some((n) => n.expires.isEqualOrAfter(today)),
@@ -147,86 +161,97 @@ export default React.memo(function ChildListItem({
   return (
     <ChildBox data-qa={`child-${child.id}`}>
       <AttendanceLinkBox to={childAttendanceUrl}>
-        <IconBox type={child.status}>
-          {child.imageUrl ? (
-            <RoundImage src={child.imageUrl} />
-          ) : (
-            <RoundIcon
-              content={farUser}
-              color={type ? attendanceColors[type] : colors.main.m1}
-              size="XL"
-            />
-          )}
-          <IconPlacementBox>
-            <RoundIconOnTop
-              content={`${childAge}v`}
-              color={childAge < 3 ? colors.accents.a6turquoise : colors.main.m1}
-              size="m"
-            />
-          </IconPlacementBox>
-        </IconBox>
-        <ChildBoxInfo onClick={onClick}>
+        <ChildImage child={child} type={type} />
+        <MainInfoColumn>
           <NameRow>
             <Bold data-qa="child-name">
               {child.firstName} {child.lastName}
               {child.preferredName ? ` (${child.preferredName})` : null}
             </Bold>
-            <GroupName data-qa={`child-group-name-${child.id}`}>
-              {maybeGroupName}
-            </GroupName>
           </NameRow>
-          <DetailsRow>
-            <LeftDetailsDiv>
-              {infoText}
-              {child.backup && (
-                <RoundIcon content="V" size="m" color={colors.main.m1} />
-              )}
-            </LeftDetailsDiv>
-            <FixedSpaceRowWithLeftMargin alignItems="center">
-              {hasActiveStickyNote && (
-                <Link
-                  to={routes.childNotes(unitId, child.id).value}
-                  data-qa="link-child-daycare-daily-note"
-                >
-                  <RoundIcon
-                    content={fasExclamation}
-                    color={colors.accents.a5orangeLight}
-                    size="m"
-                  />
-                </Link>
-              )}
-              {child.dailyNote && (
-                <Link
-                  to={routes.childNotes(unitId, child.id).value}
-                  data-qa="link-child-daycare-daily-note"
-                >
-                  <RoundIcon
-                    content={farStickyNote}
-                    color={colors.accents.a9pink}
-                    size="m"
-                  />
-                </Link>
-              )}
-              {child.groupId && groupNotes.length > 0 ? (
-                <Link
-                  to={routes.childNotes(unitId, child.id).value}
-                  data-qa="link-child-daycare-daily-note"
-                >
-                  <RoundIcon
-                    content={farUsers}
-                    color={colors.main.m4}
-                    size="m"
-                  />
-                </Link>
-              ) : null}
-            </FixedSpaceRowWithLeftMargin>
-          </DetailsRow>
-        </ChildBoxInfo>
+          <FixedSpaceRow spacing="xs">
+            <DetailsText>{infoText}</DetailsText>
+            {child.backup && (
+              <RoundIcon content="V" size="m" color={colors.main.m1} />
+            )}
+          </FixedSpaceRow>
+        </MainInfoColumn>
+        <RightColumn>
+          <GroupName data-qa={`child-group-name-${child.id}`}>
+            {maybeGroupName}
+          </GroupName>
+          <FixedSpaceRow alignItems="center">
+            {hasActiveStickyNote && (
+              <Link
+                to={routes.childNotes(unitId, child.id).value}
+                data-qa="link-child-daycare-daily-note"
+              >
+                <RoundIcon
+                  content={fasExclamation}
+                  color={colors.accents.a5orangeLight}
+                  size="m"
+                />
+              </Link>
+            )}
+            {child.dailyNote && (
+              <Link
+                to={routes.childNotes(unitId, child.id).value}
+                data-qa="link-child-daycare-daily-note"
+              >
+                <RoundIcon
+                  content={farStickyNote}
+                  color={colors.accents.a9pink}
+                  size="m"
+                />
+              </Link>
+            )}
+            {child.groupId && groupNotes.length > 0 ? (
+              <Link
+                to={routes.childNotes(unitId, child.id).value}
+                data-qa="link-child-daycare-daily-note"
+              >
+                <RoundIcon content={farUsers} color={colors.main.m4} size="m" />
+              </Link>
+            ) : null}
+          </FixedSpaceRow>
+        </RightColumn>
       </AttendanceLinkBox>
     </ChildBox>
   )
 })
 
+const ChildImage = React.memo(function ChildImage({
+  child,
+  type
+}: {
+  child: ListItem
+  type?: AttendanceStatus
+}) {
+  const childAge = LocalDate.todayInHelsinkiTz().differenceInYears(
+    child.dateOfBirth
+  )
+  return (
+    <IconBox type={child.status}>
+      {child.imageUrl ? (
+        <RoundImage src={child.imageUrl} />
+      ) : (
+        <RoundIcon
+          content={farUser}
+          color={type ? attendanceColors[type] : colors.main.m1}
+          size="XL"
+        />
+      )}
+      <IconPlacementBox>
+        <RoundIconOnTop
+          content={`${childAge}v`}
+          color={childAge < 3 ? colors.accents.a6turquoise : colors.main.m1}
+          size="m"
+        />
+      </IconPlacementBox>
+    </IconBox>
+  )
+})
+
 function ChildReservationInfo(props: { child: AttendanceChild }) {
   const { reservations, dailyServiceTimes, scheduleType } = props.child
   const { i18n } = useTranslation()
@@ -262,28 +287,3 @@ function ChildReservationInfo(props: { child: AttendanceChild }) {
     </em>
   )
 }
-
-const LeftDetailsDiv = styled.div`
-  > * {
-    margin-left: ${defaultMargins.xs};
-
-    &:first-child {
-      margin-left: 0;
-    }
-  }
-`
-
-const RoundIconOnTop = styled(RoundIcon)`
-  position: absolute;
-  left: 40px;
-  top: -20px;
-  z-index: 2;
-`
-const IconPlacementBox = styled.div`
-  position: relative;
-  width: 0;
-  height: 0;
-  &.m {
-    font-size: 14px;
-  }
-`

From d68f40e5e75d0d07315a36b8a7c0ca024770067a Mon Sep 17 00:00:00 2001
From: Joosa Kurvinen <joosa.kurvinen@reaktor.com>
Date: Wed, 30 Oct 2024 12:34:24 +0200
Subject: [PATCH 03/16] handle multiselect

---
 .../child-attendance/ChildListItem.tsx        | 142 +++++++++++-------
 1 file changed, 86 insertions(+), 56 deletions(-)

diff --git a/frontend/src/employee-mobile-frontend/child-attendance/ChildListItem.tsx b/frontend/src/employee-mobile-frontend/child-attendance/ChildListItem.tsx
index 63274a1bfc..79b314656b 100644
--- a/frontend/src/employee-mobile-frontend/child-attendance/ChildListItem.tsx
+++ b/frontend/src/employee-mobile-frontend/child-attendance/ChildListItem.tsx
@@ -48,6 +48,14 @@ const AttendanceLinkBox = styled(Link)`
   width: 100%;
 `
 
+const MultiselectBox = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+`
+
 export const IconBox = styled.div<{ type: AttendanceStatus }>`
   background-color: ${(props) => attendanceColors[props.type]};
   border-radius: 50%;
@@ -125,6 +133,8 @@ export default React.memo(function ChildListItem({
   unitOrGroup,
   child,
   type,
+  selected,
+  onChangeSelected,
   childAttendanceUrl
 }: ChildListItemProps) {
   const unitId = unitOrGroup.unitId
@@ -160,62 +170,82 @@ export default React.memo(function ChildListItem({
 
   return (
     <ChildBox data-qa={`child-${child.id}`}>
-      <AttendanceLinkBox to={childAttendanceUrl}>
-        <ChildImage child={child} type={type} />
-        <MainInfoColumn>
-          <NameRow>
-            <Bold data-qa="child-name">
-              {child.firstName} {child.lastName}
-              {child.preferredName ? ` (${child.preferredName})` : null}
-            </Bold>
-          </NameRow>
-          <FixedSpaceRow spacing="xs">
-            <DetailsText>{infoText}</DetailsText>
-            {child.backup && (
-              <RoundIcon content="V" size="m" color={colors.main.m1} />
-            )}
-          </FixedSpaceRow>
-        </MainInfoColumn>
-        <RightColumn>
-          <GroupName data-qa={`child-group-name-${child.id}`}>
-            {maybeGroupName}
-          </GroupName>
-          <FixedSpaceRow alignItems="center">
-            {hasActiveStickyNote && (
-              <Link
-                to={routes.childNotes(unitId, child.id).value}
-                data-qa="link-child-daycare-daily-note"
-              >
-                <RoundIcon
-                  content={fasExclamation}
-                  color={colors.accents.a5orangeLight}
-                  size="m"
-                />
-              </Link>
-            )}
-            {child.dailyNote && (
-              <Link
-                to={routes.childNotes(unitId, child.id).value}
-                data-qa="link-child-daycare-daily-note"
-              >
-                <RoundIcon
-                  content={farStickyNote}
-                  color={colors.accents.a9pink}
-                  size="m"
-                />
-              </Link>
-            )}
-            {child.groupId && groupNotes.length > 0 ? (
-              <Link
-                to={routes.childNotes(unitId, child.id).value}
-                data-qa="link-child-daycare-daily-note"
-              >
-                <RoundIcon content={farUsers} color={colors.main.m4} size="m" />
-              </Link>
-            ) : null}
-          </FixedSpaceRow>
-        </RightColumn>
-      </AttendanceLinkBox>
+      {selected === null ? (
+        <AttendanceLinkBox to={childAttendanceUrl}>
+          <ChildImage child={child} type={type} />
+          <MainInfoColumn>
+            <NameRow>
+              <Bold data-qa="child-name">
+                {child.firstName} {child.lastName}
+                {child.preferredName ? ` (${child.preferredName})` : null}
+              </Bold>
+            </NameRow>
+            <FixedSpaceRow spacing="xs">
+              <DetailsText>{infoText}</DetailsText>
+              {child.backup && (
+                <RoundIcon content="V" size="m" color={colors.main.m1} />
+              )}
+            </FixedSpaceRow>
+          </MainInfoColumn>
+          <RightColumn>
+            <GroupName data-qa={`child-group-name-${child.id}`}>
+              {maybeGroupName}
+            </GroupName>
+            <FixedSpaceRow alignItems="center">
+              {hasActiveStickyNote && (
+                <Link
+                  to={routes.childNotes(unitId, child.id).value}
+                  data-qa="link-child-daycare-daily-note"
+                >
+                  <RoundIcon
+                    content={fasExclamation}
+                    color={colors.accents.a5orangeLight}
+                    size="m"
+                  />
+                </Link>
+              )}
+              {child.dailyNote && (
+                <Link
+                  to={routes.childNotes(unitId, child.id).value}
+                  data-qa="link-child-daycare-daily-note"
+                >
+                  <RoundIcon
+                    content={farStickyNote}
+                    color={colors.accents.a9pink}
+                    size="m"
+                  />
+                </Link>
+              )}
+              {child.groupId && groupNotes.length > 0 ? (
+                <Link
+                  to={routes.childNotes(unitId, child.id).value}
+                  data-qa="link-child-daycare-daily-note"
+                >
+                  <RoundIcon
+                    content={farUsers}
+                    color={colors.main.m4}
+                    size="m"
+                  />
+                </Link>
+              ) : null}
+            </FixedSpaceRow>
+          </RightColumn>
+        </AttendanceLinkBox>
+      ) : (
+        <MultiselectBox onClick={() => onChangeSelected(!selected)}>
+          <ChildImage child={child} type={type} />
+          <MainInfoColumn>
+            <NameRow>
+              <Bold data-qa="child-name">
+                {child.firstName} {child.lastName}
+                {child.preferredName ? ` (${child.preferredName})` : null}
+              </Bold>
+            </NameRow>
+            <DetailsText>{selected ? 'Valittu' : 'Valitse'}</DetailsText>
+          </MainInfoColumn>
+          <RightColumn>{selected ? '[x]' : '[ ]'}</RightColumn>
+        </MultiselectBox>
+      )}
     </ChildBox>
   )
 })

From acf2a9f27c34e72611f3ead7fc87806fe9c9e548 Mon Sep 17 00:00:00 2001
From: Joosa Kurvinen <joosa.kurvinen@reaktor.com>
Date: Wed, 30 Oct 2024 12:47:23 +0200
Subject: [PATCH 04/16] reseting state

---
 .../child-attendance/ChildList.tsx            | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/frontend/src/employee-mobile-frontend/child-attendance/ChildList.tsx b/frontend/src/employee-mobile-frontend/child-attendance/ChildList.tsx
index badd65b2f8..2fb3ff7bc3 100644
--- a/frontend/src/employee-mobile-frontend/child-attendance/ChildList.tsx
+++ b/frontend/src/employee-mobile-frontend/child-attendance/ChildList.tsx
@@ -2,7 +2,7 @@
 //
 // SPDX-License-Identifier: LGPL-2.1-or-later
 
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import styled from 'styled-components'
 
 import {
@@ -51,6 +51,20 @@ export default React.memo(function ChildList({
   const [multiSelectMode, setMultiSelectMode] = useState(false)
   const [selectedChildren, setSelectedChildren] = useState<UUID[]>([])
 
+  const enterMultiSelectMode = () => {
+    setMultiSelectMode(true)
+    setSelectedChildren([])
+  }
+
+  const exitMultiSelectMode = () => {
+    setMultiSelectMode(false)
+    setSelectedChildren([])
+  }
+
+  useEffect(() => {
+    if (type !== 'COMING') exitMultiSelectMode()
+  }, [type])
+
   return (
     <FixedSpaceColumn>
       <OrderedList spacing="zero">
@@ -61,7 +75,9 @@ export default React.memo(function ChildList({
                 <MultiselectToggleBox>
                   <Checkbox
                     checked={multiSelectMode}
-                    onChange={setMultiSelectMode}
+                    onChange={(checked) =>
+                      checked ? enterMultiSelectMode() : exitMultiSelectMode()
+                    }
                     label="Kirjaa useampi lapsi"
                   />
                 </MultiselectToggleBox>

From b80280f83c070719eb0f228b433deebe97a5cb4c Mon Sep 17 00:00:00 2001
From: Joosa Kurvinen <joosa.kurvinen@reaktor.com>
Date: Sat, 2 Nov 2024 12:48:18 +0200
Subject: [PATCH 05/16] preliminary support for passing multiple children to
 MarkPresent

---
 frontend/src/employee-mobile-frontend/App.tsx | 11 ++++-----
 .../child-attendance/actions/MarkPresent.tsx  | 24 +++++++++++++++----
 .../AttendanceChildComing.tsx                 |  2 +-
 .../AttendanceChildDeparted.tsx               |  2 +-
 4 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/frontend/src/employee-mobile-frontend/App.tsx b/frontend/src/employee-mobile-frontend/App.tsx
index 720045b3a7..65dd386740 100755
--- a/frontend/src/employee-mobile-frontend/App.tsx
+++ b/frontend/src/employee-mobile-frontend/App.tsx
@@ -163,6 +163,7 @@ function UnitRouter() {
         path="/children/:childId/*"
         element={<ChildRouter unitId={unitId} />}
       />
+      <Route path="/mark-present" element={<MarkPresent unitId={unitId} />} />
       <Route index element={<Navigate replace to="groups/all" />} />
     </Routes>
   )
@@ -266,10 +267,6 @@ function ChildRouter({ unitId }: { unitId: UUID }) {
         index
         element={<AttendanceChildPage unitId={unitId} childId={childId} />}
       />
-      <Route
-        path="/mark-present"
-        element={<MarkPresent unitId={unitId} childId={childId} />}
-      />
       <Route
         path="/mark-absent"
         element={<MarkAbsent unitId={unitId} childId={childId} />}
@@ -402,6 +399,9 @@ export const routes = {
   settings(unitId: UUID): Uri {
     return uri`${this.unit(unitId)}/settings`
   },
+  markPresent(unitId: UUID, childIds: UUID[]): Uri {
+    return uri`${this.unit(unitId)}/mark-present?children=${childIds.join(',')}`
+  },
   unitOrGroup(unitOrGroup: UnitOrGroup): Uri {
     const id = unitOrGroup.type === 'unit' ? 'all' : unitOrGroup.id
     return uri`${this.unit(unitOrGroup.unitId)}/groups/${id}`
@@ -427,9 +427,6 @@ export const routes = {
   childMarkAbsentBeforehand(unitId: UUID, child: UUID): Uri {
     return uri`${this.child(unitId, child)}/mark-absent-beforehand`
   },
-  markPresent(unitId: UUID, child: UUID): Uri {
-    return uri`${this.child(unitId, child)}/mark-present`
-  },
   markAbsent(unitId: UUID, child: UUID): Uri {
     return uri`${this.child(unitId, child)}/mark-absent`
   },
diff --git a/frontend/src/employee-mobile-frontend/child-attendance/actions/MarkPresent.tsx b/frontend/src/employee-mobile-frontend/child-attendance/actions/MarkPresent.tsx
index 35ff5a8c6a..f83521606a 100644
--- a/frontend/src/employee-mobile-frontend/child-attendance/actions/MarkPresent.tsx
+++ b/frontend/src/employee-mobile-frontend/child-attendance/actions/MarkPresent.tsx
@@ -4,7 +4,7 @@
 
 import { isAfter } from 'date-fns'
 import React, { useCallback, useMemo, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
+import { Navigate, useNavigate, useSearchParams } from 'react-router-dom'
 import styled from 'styled-components'
 
 import { combine } from 'lib-common/api'
@@ -28,6 +28,7 @@ import { ContentArea } from 'lib-components/layout/Container'
 import { FixedSpaceRow } from 'lib-components/layout/flex-helpers'
 import { Gap } from 'lib-components/white-space'
 
+import { routes } from '../../App'
 import { renderResult } from '../../async-rendering'
 import { groupNotesQuery } from '../../child-notes/queries'
 import ChildNameBackButton from '../../common/ChildNameBackButton'
@@ -171,13 +172,16 @@ const JustifyContainer = styled.div`
   justify-content: center;
 `
 
-export default React.memo(function MarkPresent({
+const MarkPresentWithChildIds = React.memo(function MarkPresentWithChildIds({
   unitId,
-  childId
+  childIds
 }: {
   unitId: UUID
-  childId: UUID
+  childIds: UUID[]
 }) {
+  // TODO: using first child for now, need to implement multi-child support
+  const childId = childIds[0]
+
   const child = useChild(useQueryResult(childrenQuery(unitId)), childId)
   const attendanceStatuses = useQueryResult(attendanceStatusesQuery({ unitId }))
 
@@ -192,3 +196,15 @@ export default React.memo(function MarkPresent({
     )
   )
 })
+
+export default React.memo(function MarkPresent({ unitId }: { unitId: UUID }) {
+  const [searchParams] = useSearchParams()
+  const children = searchParams.get('children')
+  if (children === null)
+    return <Navigate replace to={routes.unit(unitId).value} />
+  const childIds = children.split(',').filter((id) => id.length > 0)
+  if (childIds.length === 0)
+    return <Navigate replace to={routes.unit(unitId).value} />
+
+  return <MarkPresentWithChildIds unitId={unitId} childIds={childIds} />
+})
diff --git a/frontend/src/employee-mobile-frontend/child-info/child-state-pages/AttendanceChildComing.tsx b/frontend/src/employee-mobile-frontend/child-info/child-state-pages/AttendanceChildComing.tsx
index 1bc37a9632..2506af16f5 100644
--- a/frontend/src/employee-mobile-frontend/child-info/child-state-pages/AttendanceChildComing.tsx
+++ b/frontend/src/employee-mobile-frontend/child-info/child-state-pages/AttendanceChildComing.tsx
@@ -42,7 +42,7 @@ export default React.memo(function AttendanceChildComing({
         <WideLinkButton
           $primary
           data-qa="mark-present-link"
-          to={routes.markPresent(unitId, child.id).value}
+          to={routes.markPresent(unitId, [child.id]).value}
         >
           {i18n.attendances.actions.markPresent}
         </WideLinkButton>
diff --git a/frontend/src/employee-mobile-frontend/child-info/child-state-pages/AttendanceChildDeparted.tsx b/frontend/src/employee-mobile-frontend/child-info/child-state-pages/AttendanceChildDeparted.tsx
index b4dd05fdcb..2e2260036f 100644
--- a/frontend/src/employee-mobile-frontend/child-info/child-state-pages/AttendanceChildDeparted.tsx
+++ b/frontend/src/employee-mobile-frontend/child-info/child-state-pages/AttendanceChildDeparted.tsx
@@ -32,7 +32,7 @@ export default React.memo(function AttendanceChildDeparted({
     <ReturnToPresentButton
       icon={faArrowRotateLeft}
       text={i18n.attendances.actions.returnToPresent}
-      onClick={() => navigate(routes.markPresent(unitId, child.id).value)}
+      onClick={() => navigate(routes.markPresent(unitId, [child.id]).value)}
       data-qa="return-to-present-btn"
     />
   )

From af90690b02661f502d29298b299f656612205f20 Mon Sep 17 00:00:00 2001
From: Joosa Kurvinen <joosa.kurvinen@reaktor.com>
Date: Sat, 2 Nov 2024 13:44:02 +0200
Subject: [PATCH 06/16] multiselect action buttons

---
 .../child-attendance/ChildList.tsx            | 145 ++++++++++++------
 1 file changed, 100 insertions(+), 45 deletions(-)

diff --git a/frontend/src/employee-mobile-frontend/child-attendance/ChildList.tsx b/frontend/src/employee-mobile-frontend/child-attendance/ChildList.tsx
index 2fb3ff7bc3..bb62084579 100644
--- a/frontend/src/employee-mobile-frontend/child-attendance/ChildList.tsx
+++ b/frontend/src/employee-mobile-frontend/child-attendance/ChildList.tsx
@@ -3,6 +3,7 @@
 // SPDX-License-Identifier: LGPL-2.1-or-later
 
 import React, { useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
 
 import {
@@ -10,8 +11,12 @@ import {
   AttendanceStatus
 } from 'lib-common/generated/api-types/attendance'
 import { UUID } from 'lib-common/types'
+import { Button } from 'lib-components/atoms/buttons/Button'
 import Checkbox from 'lib-components/atoms/form/Checkbox'
-import { FixedSpaceColumn } from 'lib-components/layout/flex-helpers'
+import {
+  FixedSpaceColumn,
+  FixedSpaceRow
+} from 'lib-components/layout/flex-helpers'
 import {
   defaultMargins,
   isSpacingSize,
@@ -46,6 +51,7 @@ export default React.memo(function ChildList({
   type
 }: Props) {
   const { i18n } = useTranslation()
+  const navigate = useNavigate()
   const unitId = unitOrGroup.unitId
 
   const [multiSelectMode, setMultiSelectMode] = useState(false)
@@ -66,52 +72,84 @@ export default React.memo(function ChildList({
   }, [type])
 
   return (
-    <FixedSpaceColumn>
-      <OrderedList spacing="zero">
-        {items.length > 0 ? (
-          <>
-            {type === 'COMING' && (
-              <Li>
-                <MultiselectToggleBox>
-                  <Checkbox
-                    checked={multiSelectMode}
-                    onChange={(checked) =>
-                      checked ? enterMultiSelectMode() : exitMultiSelectMode()
+    <>
+      <FixedSpaceColumn>
+        <OrderedList spacing="zero">
+          {items.length > 0 ? (
+            <>
+              {type === 'COMING' && (
+                <Li>
+                  <MultiselectToggleBox>
+                    <Checkbox
+                      checked={multiSelectMode}
+                      onChange={(checked) =>
+                        checked ? enterMultiSelectMode() : exitMultiSelectMode()
+                      }
+                      label="Kirjaa useampi lapsi"
+                    />
+                  </MultiselectToggleBox>
+                </Li>
+              )}
+              {items.map((ac) => (
+                <Li key={ac.id}>
+                  <ChildListItem
+                    unitOrGroup={unitOrGroup}
+                    type={type}
+                    key={ac.id}
+                    child={ac}
+                    childAttendanceUrl={routes.child(unitId, ac.id).value}
+                    selected={
+                      multiSelectMode ? selectedChildren.includes(ac.id) : null
                     }
-                    label="Kirjaa useampi lapsi"
+                    onChangeSelected={(selected) => {
+                      setSelectedChildren((prev) =>
+                        selected
+                          ? [...prev, ac.id]
+                          : prev.filter((id) => id !== ac.id)
+                      )
+                    }}
                   />
-                </MultiselectToggleBox>
-              </Li>
-            )}
-            {items.map((ac) => (
-              <Li key={ac.id}>
-                <ChildListItem
-                  unitOrGroup={unitOrGroup}
-                  type={type}
-                  key={ac.id}
-                  child={ac}
-                  childAttendanceUrl={routes.child(unitId, ac.id).value}
-                  selected={
-                    multiSelectMode ? selectedChildren.includes(ac.id) : null
-                  }
-                  onChangeSelected={(selected) => {
-                    setSelectedChildren((prev) =>
-                      selected
-                        ? [...prev, ac.id]
-                        : prev.filter((id) => id !== ac.id)
-                    )
-                  }}
-                />
-              </Li>
-            ))}
-          </>
-        ) : (
-          <NoChildrenOnList data-qa="no-children-indicator">
-            {i18n.mobile.emptyList(type || 'ABSENT')}
-          </NoChildrenOnList>
-        )}
-      </OrderedList>
-    </FixedSpaceColumn>
+                </Li>
+              ))}
+            </>
+          ) : (
+            <NoChildrenOnList data-qa="no-children-indicator">
+              {i18n.mobile.emptyList(type || 'ABSENT')}
+            </NoChildrenOnList>
+          )}
+        </OrderedList>
+      </FixedSpaceColumn>
+      {multiSelectMode && (
+        <MultiselectActions>
+          <FixedSpaceRow
+            spacing="s"
+            alignItems="center"
+            justifyContent="space-evenly"
+          >
+            <Button
+              appearance="inline"
+              text={i18n.common.cancel}
+              onClick={exitMultiSelectMode}
+            />
+            <FloatingActionButton
+              appearance="button"
+              primary
+              text={`Merkitse saapuneeksi${
+                selectedChildren.length > 1
+                  ? `: ${selectedChildren.length} lasta`
+                  : selectedChildren.length === 1
+                    ? ': 1 lapsi'
+                    : ''
+              }`}
+              disabled={selectedChildren.length === 0}
+              onClick={() =>
+                navigate(routes.markPresent(unitId, selectedChildren).value)
+              }
+            />
+          </FixedSpaceRow>
+        </MultiselectActions>
+      )}
+    </>
   )
 })
 
@@ -154,3 +192,20 @@ const MultiselectToggleBox = styled.div`
   border-radius: 2px;
   background-color: ${colors.grayscale.g0};
 `
+
+const MultiselectActions = styled.div`
+  position: sticky;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  width: 100%;
+  padding: ${defaultMargins.xs} ${defaultMargins.s};
+  min-height: 30px;
+  background-color: rgba(255, 255, 255, 0.9);
+`
+
+const FloatingActionButton = styled(Button)`
+  border-radius: 40px;
+  max-width: 240px;
+  white-space: break-spaces;
+`

From 7d2ca6cae2c44cbfc512be4979bc8dee323095ec Mon Sep 17 00:00:00 2001
From: Joosa Kurvinen <joosa.kurvinen@reaktor.com>
Date: Sat, 2 Nov 2024 13:58:37 +0200
Subject: [PATCH 07/16] backend to mark multiple children arrived

---
 .../child-attendance/actions/MarkPresent.tsx  |  7 ++-
 .../child-attendance/queries.ts               |  4 +-
 .../generated/api-clients/attendance.ts       | 22 +++++++++-
 .../AttendanceTransitionsIntegrationTest.kt   |  5 +--
 .../attendance/ChildAttendanceController.kt   | 43 ++++++++++++++++++-
 5 files changed, 71 insertions(+), 10 deletions(-)

diff --git a/frontend/src/employee-mobile-frontend/child-attendance/actions/MarkPresent.tsx b/frontend/src/employee-mobile-frontend/child-attendance/actions/MarkPresent.tsx
index f83521606a..57df86ea59 100644
--- a/frontend/src/employee-mobile-frontend/child-attendance/actions/MarkPresent.tsx
+++ b/frontend/src/employee-mobile-frontend/child-attendance/actions/MarkPresent.tsx
@@ -126,8 +126,11 @@ const MarkPresentInner = React.memo(function MarkPresentInner({
                   onClick={() =>
                     createArrival({
                       unitId,
-                      childId: child.id,
-                      body: { arrived: time }
+                      body: {
+                        [child.id]: {
+                          arrived: time
+                        }
+                      }
                     })
                   }
                   onSuccess={() => {
diff --git a/frontend/src/employee-mobile-frontend/child-attendance/queries.ts b/frontend/src/employee-mobile-frontend/child-attendance/queries.ts
index 3e6176536a..d7cd922d1b 100644
--- a/frontend/src/employee-mobile-frontend/child-attendance/queries.ts
+++ b/frontend/src/employee-mobile-frontend/child-attendance/queries.ts
@@ -12,7 +12,7 @@ import {
   cancelFullDayAbsence,
   getAttendanceStatuses,
   getChildExpectedAbsencesOnDeparture,
-  postArrival,
+  postArrivals,
   postDeparture,
   postFullDayAbsence,
   returnToComing,
@@ -129,7 +129,7 @@ export const createFullDayAbsenceMutation = mutation({
 })
 
 export const createArrivalMutation = mutation({
-  api: postArrival,
+  api: postArrivals,
   invalidateQueryKeys: ({ unitId }) => [
     attendanceStatusesQuery({ unitId }).queryKey
   ]
diff --git a/frontend/src/employee-mobile-frontend/generated/api-clients/attendance.ts b/frontend/src/employee-mobile-frontend/generated/api-clients/attendance.ts
index aa6d372a44..fe1b49e18d 100644
--- a/frontend/src/employee-mobile-frontend/generated/api-clients/attendance.ts
+++ b/frontend/src/employee-mobile-frontend/generated/api-clients/attendance.ts
@@ -151,9 +151,9 @@ export async function postAbsenceRange(
 
 
 /**
-* Generated from fi.espoo.evaka.attendance.ChildAttendanceController.postArrival
+* Generated from fi.espoo.evaka.attendance.ChildAttendanceController.postArrivalDeprecated
 */
-export async function postArrival(
+export async function postArrivalDeprecated(
   request: {
     unitId: UUID,
     childId: UUID,
@@ -169,6 +169,24 @@ export async function postArrival(
 }
 
 
+/**
+* Generated from fi.espoo.evaka.attendance.ChildAttendanceController.postArrivals
+*/
+export async function postArrivals(
+  request: {
+    unitId: UUID,
+    body: Record<UUID, ArrivalRequest>
+  }
+): Promise<void> {
+  const { data: json } = await client.request<JsonOf<void>>({
+    url: uri`/employee-mobile/attendances/units/${request.unitId}/arrivals`.toString(),
+    method: 'POST',
+    data: request.body satisfies JsonCompatible<Record<UUID, ArrivalRequest>>
+  })
+  return json
+}
+
+
 /**
 * Generated from fi.espoo.evaka.attendance.ChildAttendanceController.postDeparture
 */
diff --git a/service/src/integrationTest/kotlin/fi/espoo/evaka/attendance/AttendanceTransitionsIntegrationTest.kt b/service/src/integrationTest/kotlin/fi/espoo/evaka/attendance/AttendanceTransitionsIntegrationTest.kt
index d14396bb16..b425ef6b67 100644
--- a/service/src/integrationTest/kotlin/fi/espoo/evaka/attendance/AttendanceTransitionsIntegrationTest.kt
+++ b/service/src/integrationTest/kotlin/fi/espoo/evaka/attendance/AttendanceTransitionsIntegrationTest.kt
@@ -514,13 +514,12 @@ class AttendanceTransitionsIntegrationTest : FullApplicationTest(resetDbBeforeEa
     }
 
     private fun markArrived(arrived: LocalTime) {
-        childAttendanceController.postArrival(
+        childAttendanceController.postArrivals(
             dbInstance(),
             mobileUser,
             mockClock,
             testDaycare.id,
-            testChild_1.id,
-            ChildAttendanceController.ArrivalRequest(arrived),
+            mapOf(testChild_1.id to ChildAttendanceController.ArrivalRequest(arrived)),
         )
     }
 
diff --git a/service/src/main/kotlin/fi/espoo/evaka/attendance/ChildAttendanceController.kt b/service/src/main/kotlin/fi/espoo/evaka/attendance/ChildAttendanceController.kt
index f89f670253..0592e19944 100644
--- a/service/src/main/kotlin/fi/espoo/evaka/attendance/ChildAttendanceController.kt
+++ b/service/src/main/kotlin/fi/espoo/evaka/attendance/ChildAttendanceController.kt
@@ -184,8 +184,49 @@ class ChildAttendanceController(
         @ForceCodeGenType(String::class) @DateTimeFormat(pattern = "HH:mm") val arrived: LocalTime
     )
 
+    @PostMapping("/employee-mobile/attendances/units/{unitId}/arrivals")
+    fun postArrivals(
+        db: Database,
+        user: AuthenticatedUser.MobileDevice,
+        clock: EvakaClock,
+        @PathVariable unitId: DaycareId,
+        @RequestBody body: Map<ChildId, ArrivalRequest>,
+    ) {
+        val today = clock.today()
+        db.connect { dbc ->
+            dbc.transaction { tx ->
+                accessControl.requirePermissionFor(
+                    tx,
+                    user,
+                    clock,
+                    Action.Unit.UPDATE_CHILD_ATTENDANCES,
+                    unitId,
+                )
+                body.entries.forEach { (childId, arrival) ->
+                    tx.fetchChildPlacementBasics(childId, unitId, today)
+                    try {
+                        tx.insertAttendance(
+                            childId = childId,
+                            unitId = unitId,
+                            date = today,
+                            range = TimeInterval(arrival.arrived, null),
+                        )
+                    } catch (e: Exception) {
+                        throw mapPSQLException(e)
+                    }
+                }
+            }
+        }
+        body.keys.forEach { childId ->
+            Audit.ChildAttendancesArrivalCreate.log(
+                targetId = AuditId(childId),
+                objectId = AuditId(unitId),
+            )
+        }
+    }
+
     @PostMapping("/employee-mobile/attendances/units/{unitId}/children/{childId}/arrival")
-    fun postArrival(
+    fun postArrivalDeprecated(
         db: Database,
         user: AuthenticatedUser.MobileDevice,
         clock: EvakaClock,

From 49e7a3ef1bc1b5eb7fd849e3f56b1b3652a3b9e3 Mon Sep 17 00:00:00 2001
From: Joosa Kurvinen <joosa.kurvinen@reaktor.com>
Date: Sat, 2 Nov 2024 15:24:54 +0200
Subject: [PATCH 08/16] display all children when marking multiple arrived

---
 .../child-attendance/ChildListItem.tsx        |   6 +-
 .../child-attendance/ChildNotesSummary.tsx    | 274 ++++++++++--------
 .../child-attendance/actions/MarkAbsent.tsx   |  17 +-
 .../child-attendance/actions/MarkDeparted.tsx | 269 ++++++++---------
 .../child-attendance/actions/MarkPresent.tsx  | 230 ++++++++-------
 .../AttendanceChildComing.tsx                 |   2 +-
 .../employee-mobile-frontend/i18n/fi.ts       |   5 +-
 7 files changed, 418 insertions(+), 385 deletions(-)

diff --git a/frontend/src/employee-mobile-frontend/child-attendance/ChildListItem.tsx b/frontend/src/employee-mobile-frontend/child-attendance/ChildListItem.tsx
index 79b314656b..ea4177adc4 100644
--- a/frontend/src/employee-mobile-frontend/child-attendance/ChildListItem.tsx
+++ b/frontend/src/employee-mobile-frontend/child-attendance/ChildListItem.tsx
@@ -250,18 +250,18 @@ export default React.memo(function ChildListItem({
   )
 })
 
-const ChildImage = React.memo(function ChildImage({
+export const ChildImage = React.memo(function ChildImage({
   child,
   type
 }: {
-  child: ListItem
+  child: AttendanceChild
   type?: AttendanceStatus
 }) {
   const childAge = LocalDate.todayInHelsinkiTz().differenceInYears(
     child.dateOfBirth
   )
   return (
-    <IconBox type={child.status}>
+    <IconBox type={type ?? 'COMING'}>
       {child.imageUrl ? (
         <RoundImage src={child.imageUrl} />
       ) : (
diff --git a/frontend/src/employee-mobile-frontend/child-attendance/ChildNotesSummary.tsx b/frontend/src/employee-mobile-frontend/child-attendance/ChildNotesSummary.tsx
index 5da2c0e5d4..75aa1b58fd 100644
--- a/frontend/src/employee-mobile-frontend/child-attendance/ChildNotesSummary.tsx
+++ b/frontend/src/employee-mobile-frontend/child-attendance/ChildNotesSummary.tsx
@@ -1,25 +1,47 @@
-// SPDX-FileCopyrightText: 2017-2022 City of Espoo
+// SPDX-FileCopyrightText: 2017-2024 City of Espoo
 //
 // SPDX-License-Identifier: LGPL-2.1-or-later
 
 import React, { useMemo } from 'react'
+import styled from 'styled-components'
 
 import { AttendanceChild } from 'lib-common/generated/api-types/attendance'
 import { GroupNote } from 'lib-common/generated/api-types/note'
 import LocalDate from 'lib-common/local-date'
+import { constantQuery, useQueryResult } from 'lib-common/query'
 import RoundIcon from 'lib-components/atoms/RoundIcon'
 import { ContentArea } from 'lib-components/layout/Container'
 import {
   FixedSpaceColumn,
   FixedSpaceRow
 } from 'lib-components/layout/flex-helpers'
-import { H2, Label, P } from 'lib-components/typography'
+import { H3, Label } from 'lib-components/typography'
 import colors from 'lib-customizations/common'
 import { fasExclamation, farStickyNote, farUsers } from 'lib-icons'
 
+import { renderResult } from '../async-rendering'
+import { groupNotesQuery } from '../child-notes/queries'
 import { useTranslation } from '../common/i18n'
 
+import { ChildImage } from './ChildListItem'
+
 export default React.memo(function ChildNotesSummary({
+  child
+}: {
+  child: AttendanceChild
+}) {
+  const groupNotes = useQueryResult(
+    child.groupId
+      ? groupNotesQuery({ groupId: child.groupId })
+      : constantQuery([])
+  )
+
+  return renderResult(groupNotes, (groupNotes) => (
+    <ChildNotesSummaryInner child={child} groupNotes={groupNotes} />
+  ))
+})
+
+const ChildNotesSummaryInner = React.memo(function ChildNotesSummaryInner({
   child,
   groupNotes
 }: {
@@ -39,128 +61,150 @@ export default React.memo(function ChildNotesSummary({
   )
   const hasGroupNotes = activeGroupNotes.length > 0
 
-  if (!hasStickyNotes && !hasDailyNote && !hasGroupNotes) return null
-
   return (
-    <FixedSpaceColumn spacing="m">
-      {hasStickyNotes && (
-        <NoteSection
-          icon={fasExclamation}
-          iconColor={colors.accents.a5orangeLight}
-          title={i18n.attendances.notes.childStickyNotes}
-        >
-          {child.stickyNotes.map((gn) => (
-            <P key={gn.id} noMargin data-qa="sticky-note">
-              {gn.note}
-            </P>
-          ))}
-        </NoteSection>
-      )}
+    <ContentArea
+      shadow
+      opaque={true}
+      paddingHorizontal="s"
+      paddingVertical="s"
+      blue
+    >
+      <FixedSpaceColumn spacing="m">
+        <FixedSpaceRow spacing="m" alignItems="center">
+          <ChildImage child={child} />
+          <ChildName>
+            <H3 primary noMargin>
+              {child.firstName} {child.lastName}
+              {child.preferredName ? ` (${child.preferredName})` : null}
+            </H3>
+          </ChildName>
+        </FixedSpaceRow>
 
-      {child.dailyNote && (
-        <NoteSection
-          icon={farStickyNote}
-          iconColor={colors.accents.a9pink}
-          title={i18n.attendances.notes.note}
-        >
-          {!!child.dailyNote.note && (
-            <span data-qa="daily-note">{child.dailyNote.note}</span>
-          )}
-          {child.dailyNote.feedingNote && (
-            <FixedSpaceColumn spacing="xxs">
-              <Label>{i18n.attendances.notes.labels.feedingNote}</Label>
+        {hasStickyNotes && (
+          <FixedSpaceColumn spacing="xs">
+            <FixedSpaceRow>
               <span>
-                {
-                  i18n.attendances.notes.feedingValues[
-                    child.dailyNote.feedingNote
-                  ]
-                }
+                <RoundIcon
+                  content={fasExclamation}
+                  color={colors.accents.a5orangeLight}
+                  size="m"
+                />
               </span>
-            </FixedSpaceColumn>
-          )}
-          {child.dailyNote.sleepingNote && (
-            <FixedSpaceColumn spacing="xxs">
-              <Label>{i18n.attendances.notes.labels.sleepingNote}</Label>
+              <Label>{i18n.attendances.notes.childStickyNotes}</Label>
+            </FixedSpaceRow>
+            {child.stickyNotes.length === 1 ? (
+              <div>{child.stickyNotes[0].note}</div>
+            ) : (
+              <NoMarginList>
+                {child.stickyNotes.map((note) => (
+                  <li key={note.id} data-qa="sticky-note">
+                    {note.note}
+                  </li>
+                ))}
+              </NoMarginList>
+            )}
+          </FixedSpaceColumn>
+        )}
+
+        {child.dailyNote && (
+          <FixedSpaceColumn spacing="xs">
+            <FixedSpaceRow>
               <span>
-                {
-                  i18n.attendances.notes.sleepingValues[
-                    child.dailyNote.sleepingNote
-                  ]
-                }
-                {child.dailyNote.sleepingMinutes
-                  ? child.dailyNote.sleepingMinutes / 60 >= 1
-                    ? `. ${Math.floor(
-                        child.dailyNote.sleepingMinutes / 60
-                      )}h ${Math.round(
-                        child.dailyNote.sleepingMinutes % 60
-                      )}min.`
-                    : `${Math.round(child.dailyNote.sleepingMinutes % 60)}min.`
-                  : ''}
+                <RoundIcon
+                  content={farStickyNote}
+                  color={colors.accents.a9pink}
+                  size="m"
+                />
               </span>
-            </FixedSpaceColumn>
-          )}
-          {(!!child.dailyNote.reminderNote ||
-            child.dailyNote.reminders.length > 0) && (
-            <FixedSpaceColumn spacing="xxs">
-              <Label>{i18n.attendances.notes.labels.reminderNote}</Label>
+              <Label>{i18n.attendances.notes.note}</Label>
+            </FixedSpaceRow>
+            {!!child.dailyNote.note && (
+              <span data-qa="daily-note">{child.dailyNote.note}</span>
+            )}
+            {child.dailyNote.feedingNote && (
+              <FixedSpaceColumn spacing="xxs">
+                <Label>{i18n.attendances.notes.labels.feedingNote}</Label>
+                <span>
+                  {
+                    i18n.attendances.notes.feedingValues[
+                      child.dailyNote.feedingNote
+                    ]
+                  }
+                </span>
+              </FixedSpaceColumn>
+            )}
+            {child.dailyNote.sleepingNote && (
+              <FixedSpaceColumn spacing="xxs">
+                <Label>{i18n.attendances.notes.labels.sleepingNote}</Label>
+                <span>
+                  {
+                    i18n.attendances.notes.sleepingValues[
+                      child.dailyNote.sleepingNote
+                    ]
+                  }
+                  {child.dailyNote.sleepingMinutes
+                    ? child.dailyNote.sleepingMinutes / 60 >= 1
+                      ? `. ${Math.floor(
+                          child.dailyNote.sleepingMinutes / 60
+                        )}h ${Math.round(
+                          child.dailyNote.sleepingMinutes % 60
+                        )}min.`
+                      : `${Math.round(child.dailyNote.sleepingMinutes % 60)}min.`
+                    : ''}
+                </span>
+              </FixedSpaceColumn>
+            )}
+            {(!!child.dailyNote.reminderNote ||
+              child.dailyNote.reminders.length > 0) && (
+              <FixedSpaceColumn spacing="xxs">
+                <Label>{i18n.attendances.notes.labels.reminderNote}</Label>
+                <span>
+                  {child.dailyNote.reminders.map((reminder) => (
+                    <span
+                      key={reminder}
+                    >{`${i18n.attendances.notes.reminders[reminder]}. `}</span>
+                  ))}{' '}
+                  {child.dailyNote.reminderNote}
+                </span>
+              </FixedSpaceColumn>
+            )}
+          </FixedSpaceColumn>
+        )}
+
+        {hasGroupNotes && (
+          <FixedSpaceColumn spacing="xs">
+            <FixedSpaceRow>
               <span>
-                {child.dailyNote.reminders.map((reminder) => (
-                  <span
-                    key={reminder}
-                  >{`${i18n.attendances.notes.reminders[reminder]}. `}</span>
-                ))}{' '}
-                {child.dailyNote.reminderNote}
+                <RoundIcon content={farUsers} color={colors.main.m4} size="m" />
               </span>
-            </FixedSpaceColumn>
-          )}
-        </NoteSection>
-      )}
-
-      {hasGroupNotes && (
-        <NoteSection
-          icon={farUsers}
-          iconColor={colors.main.m4}
-          title={i18n.attendances.notes.groupNote}
-        >
-          {activeGroupNotes.map((gn) => (
-            <P key={gn.id} noMargin data-qa="group-note">
-              {gn.note}
-            </P>
-          ))}
-        </NoteSection>
-      )}
-    </FixedSpaceColumn>
-  )
-})
+              <Label>{i18n.attendances.notes.groupNote}</Label>
+            </FixedSpaceRow>
+            {activeGroupNotes.length === 1 ? (
+              <div>{activeGroupNotes[0].note}</div>
+            ) : (
+              <NoMarginList>
+                {activeGroupNotes.map((note) => (
+                  <li key={note.id} data-qa="group-note">
+                    {note.note}
+                  </li>
+                ))}
+              </NoMarginList>
+            )}
+          </FixedSpaceColumn>
+        )}
 
-const NoteSection = React.memo(function NoteSection({
-  icon,
-  iconColor,
-  title,
-  children
-}: {
-  icon: IconDefinition
-  iconColor: string
-  title: string
-  children: React.ReactNode
-}) {
-  return (
-    <ContentArea
-      shadow
-      opaque={true}
-      paddingHorizontal="s"
-      paddingVertical="s"
-      blue
-    >
-      <FixedSpaceRow>
-        <span>
-          <RoundIcon content={icon} color={iconColor} size="m" />
-        </span>
-        <FixedSpaceColumn spacing="s">
-          <H2 noMargin>{title}</H2>
-          {children}
-        </FixedSpaceColumn>
-      </FixedSpaceRow>
+        {!hasStickyNotes && !hasDailyNote && !hasGroupNotes && (
+          <div>{i18n.attendances.notes.noNotes}</div>
+        )}
+      </FixedSpaceColumn>
     </ContentArea>
   )
 })
+
+const ChildName = styled.div`
+  flex-grow: 1;
+`
+
+const NoMarginList = styled.ul`
+  margin-block-start: 0;
+`
diff --git a/frontend/src/employee-mobile-frontend/child-attendance/actions/MarkAbsent.tsx b/frontend/src/employee-mobile-frontend/child-attendance/actions/MarkAbsent.tsx
index 07cf5a74cc..52e3db3b4d 100644
--- a/frontend/src/employee-mobile-frontend/child-attendance/actions/MarkAbsent.tsx
+++ b/frontend/src/employee-mobile-frontend/child-attendance/actions/MarkAbsent.tsx
@@ -6,12 +6,7 @@ import React, { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
 
-import { combine } from 'lib-common/api'
-import {
-  constantQuery,
-  useMutationResult,
-  useQueryResult
-} from 'lib-common/query'
+import { useMutationResult, useQueryResult } from 'lib-common/query'
 import { UUID } from 'lib-common/types'
 import { AsyncButton } from 'lib-components/atoms/buttons/AsyncButton'
 import { LegacyButton } from 'lib-components/atoms/buttons/LegacyButton'
@@ -23,7 +18,6 @@ import {
 import { Gap } from 'lib-components/white-space'
 
 import { renderResult } from '../../async-rendering'
-import { groupNotesQuery } from '../../child-notes/queries'
 import ChildNameBackButton from '../../common/ChildNameBackButton'
 import { Actions, CustomTitle } from '../../common/components'
 import { useTranslation } from '../../common/i18n'
@@ -54,18 +48,13 @@ export default React.memo(function MarkAbsent({
     createFullDayAbsenceMutation
   )
 
-  const groupId = child.map(({ groupId }) => groupId).getOrElse(null)
-  const groupNotes = useQueryResult(
-    groupId ? groupNotesQuery({ groupId }) : constantQuery([])
-  )
-
   return (
     <TallContentArea
       opaque={false}
       paddingHorizontal="zero"
       paddingVertical="zero"
     >
-      {renderResult(combine(child, groupNotes), ([child, groupNotes]) => (
+      {renderResult(child, (child) => (
         <>
           <ChildNameBackButton child={child} onClick={() => navigate(-2)} />
           <ContentArea
@@ -127,7 +116,7 @@ export default React.memo(function MarkAbsent({
             </Actions>
           </ContentArea>
           <Gap size="s" />
-          <ChildNotesSummary child={child} groupNotes={groupNotes} />
+          <ChildNotesSummary child={child} />
         </>
       ))}
     </TallContentArea>
diff --git a/frontend/src/employee-mobile-frontend/child-attendance/actions/MarkDeparted.tsx b/frontend/src/employee-mobile-frontend/child-attendance/actions/MarkDeparted.tsx
index 07b4a474cc..6a8f3e73ca 100644
--- a/frontend/src/employee-mobile-frontend/child-attendance/actions/MarkDeparted.tsx
+++ b/frontend/src/employee-mobile-frontend/child-attendance/actions/MarkDeparted.tsx
@@ -37,7 +37,6 @@ import { Gap } from 'lib-components/white-space'
 import { featureFlags } from 'lib-customizations/employee'
 
 import { renderResult } from '../../async-rendering'
-import { groupNotesQuery } from '../../child-notes/queries'
 import ChildNameBackButton from '../../common/ChildNameBackButton'
 import { Actions, CustomTitle, TimeWrapper } from '../../common/components'
 import { Translations, useTranslation } from '../../common/i18n'
@@ -105,11 +104,6 @@ const MarkDepartedInner = React.memo(function MarkDepartedWithChild({
   const navigate = useNavigate()
   const { i18n } = useTranslation()
 
-  const groupId = child.groupId
-  const groupNotes = useQueryResult(
-    groupId ? groupNotesQuery({ groupId }) : constantQuery([])
-  )
-
   const [time, setTime] = useState(() =>
     HelsinkiDateTime.now().toLocalTime().format()
   )
@@ -162,153 +156,138 @@ const MarkDepartedInner = React.memo(function MarkDepartedWithChild({
       paddingHorizontal="zero"
       paddingVertical="zero"
     >
-      {renderResult(groupNotes, (groupNotes) => (
-        <>
-          <div>
-            <ChildNameBackButton child={child} onClick={() => navigate(-1)} />
-          </div>
+      <div>
+        <ChildNameBackButton child={child} onClick={() => navigate(-1)} />
+      </div>
 
-          <ContentArea
-            shadow
-            opaque={true}
-            paddingHorizontal="s"
-            paddingVertical="m"
-          >
-            <TimeWrapper>
-              <CustomTitle>{i18n.attendances.actions.markDeparted}</CustomTitle>
-              <TimeInput
-                onChange={setTime}
-                value={time}
-                data-qa="set-time"
-                info={
-                  timeError ? { text: timeError, status: 'warning' } : undefined
-                }
-              />
-            </TimeWrapper>
+      <ContentArea
+        shadow
+        opaque={true}
+        paddingHorizontal="s"
+        paddingVertical="m"
+      >
+        <TimeWrapper>
+          <CustomTitle>{i18n.attendances.actions.markDeparted}</CustomTitle>
+          <TimeInput
+            onChange={setTime}
+            value={time}
+            data-qa="set-time"
+            info={
+              timeError ? { text: timeError, status: 'warning' } : undefined
+            }
+          />
+        </TimeWrapper>
 
-            <Gap size="xs" />
+        <Gap size="xs" />
 
-            {renderResult(expectedAbsences, (expectedAbsences) =>
-              expectedAbsences?.categories &&
-              expectedAbsences.categories.length > 0 ? (
-                <FixedSpaceColumn>
-                  <AbsenceTitle size={2}>
-                    {i18n.attendances.absenceTitle}
-                  </AbsenceTitle>
-                  {expectedAbsences.categories.includes('NONBILLABLE') && (
-                    <FixedSpaceColumn
-                      spacing="xs"
-                      data-qa="absence-NONBILLABLE"
-                    >
-                      <div>
-                        {formatCategory(
-                          'NONBILLABLE',
-                          child.placementType,
-                          i18n
-                        )}
-                      </div>
-                      <AbsenceSelector
-                        absenceTypes={[
-                          ...basicAbsenceTypes,
-                          ...attendanceStatus.absences
-                            .filter(
-                              (a) =>
-                                a.category === 'NONBILLABLE' &&
-                                !basicAbsenceTypes.includes(a.type)
-                            )
-                            .map((a) => a.type),
-                          ...(featureFlags.noAbsenceType
-                            ? (['NO_ABSENCE'] as const)
-                            : ([] as const))
-                        ]}
-                        selectedAbsenceType={selectedAbsenceTypeNonbillable}
-                        setSelectedAbsenceType={
-                          setSelectedAbsenceTypeNonbillable
-                        }
-                      />
-                    </FixedSpaceColumn>
-                  )}
-                  {expectedAbsences.categories.includes('BILLABLE') && (
-                    <FixedSpaceColumn spacing="xs" data-qa="absence-BILLABLE">
-                      <div>
-                        {formatCategory('BILLABLE', child.placementType, i18n)}
-                      </div>
-                      <AbsenceSelector
-                        absenceTypes={[
-                          ...basicAbsenceTypes,
-                          ...attendanceStatus.absences
-                            .filter(
-                              (a) =>
-                                a.category === 'BILLABLE' &&
-                                !basicAbsenceTypes.includes(a.type)
-                            )
-                            .map((a) => a.type),
-                          ...(featureFlags.noAbsenceType
-                            ? (['NO_ABSENCE'] as const)
-                            : ([] as const))
-                        ]}
-                        selectedAbsenceType={selectedAbsenceTypeBillable}
-                        setSelectedAbsenceType={setSelectedAbsenceTypeBillable}
-                      />
-                    </FixedSpaceColumn>
-                  )}
+        {renderResult(expectedAbsences, (expectedAbsences) =>
+          expectedAbsences?.categories &&
+          expectedAbsences.categories.length > 0 ? (
+            <FixedSpaceColumn>
+              <AbsenceTitle size={2}>
+                {i18n.attendances.absenceTitle}
+              </AbsenceTitle>
+              {expectedAbsences.categories.includes('NONBILLABLE') && (
+                <FixedSpaceColumn spacing="xs" data-qa="absence-NONBILLABLE">
+                  <div>
+                    {formatCategory('NONBILLABLE', child.placementType, i18n)}
+                  </div>
+                  <AbsenceSelector
+                    absenceTypes={[
+                      ...basicAbsenceTypes,
+                      ...attendanceStatus.absences
+                        .filter(
+                          (a) =>
+                            a.category === 'NONBILLABLE' &&
+                            !basicAbsenceTypes.includes(a.type)
+                        )
+                        .map((a) => a.type),
+                      ...(featureFlags.noAbsenceType
+                        ? (['NO_ABSENCE'] as const)
+                        : ([] as const))
+                    ]}
+                    selectedAbsenceType={selectedAbsenceTypeNonbillable}
+                    setSelectedAbsenceType={setSelectedAbsenceTypeNonbillable}
+                  />
+                </FixedSpaceColumn>
+              )}
+              {expectedAbsences.categories.includes('BILLABLE') && (
+                <FixedSpaceColumn spacing="xs" data-qa="absence-BILLABLE">
+                  <div>
+                    {formatCategory('BILLABLE', child.placementType, i18n)}
+                  </div>
+                  <AbsenceSelector
+                    absenceTypes={[
+                      ...basicAbsenceTypes,
+                      ...attendanceStatus.absences
+                        .filter(
+                          (a) =>
+                            a.category === 'BILLABLE' &&
+                            !basicAbsenceTypes.includes(a.type)
+                        )
+                        .map((a) => a.type),
+                      ...(featureFlags.noAbsenceType
+                        ? (['NO_ABSENCE'] as const)
+                        : ([] as const))
+                    ]}
+                    selectedAbsenceType={selectedAbsenceTypeBillable}
+                    setSelectedAbsenceType={setSelectedAbsenceTypeBillable}
+                  />
                 </FixedSpaceColumn>
-              ) : null
-            )}
+              )}
+            </FixedSpaceColumn>
+          ) : null
+        )}
 
-            <Gap size="s" />
+        <Gap size="s" />
 
-            <Actions>
-              <FixedSpaceRow fullWidth>
-                <LegacyButton
-                  text={i18n.common.cancel}
-                  onClick={() => navigate(-1)}
-                />
-                <AsyncButton
-                  primary
-                  text={i18n.common.confirm}
-                  disabled={!formIsValid}
-                  onClick={() => {
-                    if (!expectedAbsences.isSuccess) return undefined
+        <Actions>
+          <FixedSpaceRow fullWidth>
+            <LegacyButton
+              text={i18n.common.cancel}
+              onClick={() => navigate(-1)}
+            />
+            <AsyncButton
+              primary
+              text={i18n.common.confirm}
+              disabled={!formIsValid}
+              onClick={() => {
+                if (!expectedAbsences.isSuccess) return undefined
 
-                    return createDeparture({
-                      unitId,
-                      childId,
-                      body: {
-                        absenceTypeNonbillable:
-                          expectedAbsences.value?.categories?.includes(
-                            'NONBILLABLE'
-                          ) && selectedAbsenceTypeNonbillable !== 'NO_ABSENCE'
-                            ? selectedAbsenceTypeNonbillable ?? null
-                            : null,
-                        absenceTypeBillable:
-                          expectedAbsences.value?.categories?.includes(
-                            'BILLABLE'
-                          ) && selectedAbsenceTypeBillable !== 'NO_ABSENCE'
-                            ? selectedAbsenceTypeBillable ?? null
-                            : null,
-                        departed: LocalTime.parse(time)
-                      }
-                    })
-                  }}
-                  onSuccess={() => {
-                    const absenceMarked = expectedAbsences
-                      .map(
-                        (exp) => exp?.categories && exp.categories.length > 0
-                      )
-                      .getOrElse(false)
-                    navigate(absenceMarked ? -1 : -2)
-                  }}
-                  data-qa="mark-departed-btn"
-                />
-              </FixedSpaceRow>
-            </Actions>
-          </ContentArea>
+                return createDeparture({
+                  unitId,
+                  childId,
+                  body: {
+                    absenceTypeNonbillable:
+                      expectedAbsences.value?.categories?.includes(
+                        'NONBILLABLE'
+                      ) && selectedAbsenceTypeNonbillable !== 'NO_ABSENCE'
+                        ? selectedAbsenceTypeNonbillable ?? null
+                        : null,
+                    absenceTypeBillable:
+                      expectedAbsences.value?.categories?.includes(
+                        'BILLABLE'
+                      ) && selectedAbsenceTypeBillable !== 'NO_ABSENCE'
+                        ? selectedAbsenceTypeBillable ?? null
+                        : null,
+                    departed: LocalTime.parse(time)
+                  }
+                })
+              }}
+              onSuccess={() => {
+                const absenceMarked = expectedAbsences
+                  .map((exp) => exp?.categories && exp.categories.length > 0)
+                  .getOrElse(false)
+                navigate(absenceMarked ? -1 : -2)
+              }}
+              data-qa="mark-departed-btn"
+            />
+          </FixedSpaceRow>
+        </Actions>
+      </ContentArea>
 
-          <Gap size="s" />
-          <ChildNotesSummary child={child} groupNotes={groupNotes} />
-        </>
-      ))}
+      <Gap size="s" />
+      <ChildNotesSummary child={child} />
     </TallContentArea>
   )
 })
diff --git a/frontend/src/employee-mobile-frontend/child-attendance/actions/MarkPresent.tsx b/frontend/src/employee-mobile-frontend/child-attendance/actions/MarkPresent.tsx
index 57df86ea59..81b5a5895a 100644
--- a/frontend/src/employee-mobile-frontend/child-attendance/actions/MarkPresent.tsx
+++ b/frontend/src/employee-mobile-frontend/child-attendance/actions/MarkPresent.tsx
@@ -1,9 +1,9 @@
-// SPDX-FileCopyrightText: 2017-2022 City of Espoo
+// SPDX-FileCopyrightText: 2017-2024 City of Espoo
 //
 // SPDX-License-Identifier: LGPL-2.1-or-later
 
 import { isAfter } from 'date-fns'
-import React, { useCallback, useMemo, useState } from 'react'
+import React, { useMemo, useState } from 'react'
 import { Navigate, useNavigate, useSearchParams } from 'react-router-dom'
 import styled from 'styled-components'
 
@@ -14,25 +14,29 @@ import {
 } from 'lib-common/generated/api-types/attendance'
 import HelsinkiDateTime from 'lib-common/helsinki-date-time'
 import LocalTime from 'lib-common/local-time'
-import {
-  constantQuery,
-  useMutationResult,
-  useQueryResult
-} from 'lib-common/query'
+import { useMutationResult, useQueryResult } from 'lib-common/query'
 import { UUID } from 'lib-common/types'
 import Title from 'lib-components/atoms/Title'
 import { AsyncButton } from 'lib-components/atoms/buttons/AsyncButton'
 import { LegacyButton } from 'lib-components/atoms/buttons/LegacyButton'
 import TimeInput from 'lib-components/atoms/form/TimeInput'
 import { ContentArea } from 'lib-components/layout/Container'
-import { FixedSpaceRow } from 'lib-components/layout/flex-helpers'
+import {
+  FixedSpaceColumn,
+  FixedSpaceRow
+} from 'lib-components/layout/flex-helpers'
 import { Gap } from 'lib-components/white-space'
+import { faArrowLeft } from 'lib-icons'
 
 import { routes } from '../../App'
 import { renderResult } from '../../async-rendering'
-import { groupNotesQuery } from '../../child-notes/queries'
 import ChildNameBackButton from '../../common/ChildNameBackButton'
-import { Actions, TimeWrapper, WideMutateButton } from '../../common/components'
+import {
+  Actions,
+  BackButtonInline,
+  TimeWrapper,
+  WideMutateButton
+} from '../../common/components'
 import { useTranslation } from '../../common/i18n'
 import { TallContentArea } from '../../pairing/components'
 import ChildNotesSummary from '../ChildNotesSummary'
@@ -42,16 +46,17 @@ import {
   createArrivalMutation,
   returnToPresentMutation
 } from '../queries'
-import { childAttendanceStatus, useChild } from '../utils'
+import { childAttendanceStatus } from '../utils'
 
 const MarkPresentInner = React.memo(function MarkPresentInner({
   unitId,
-  child,
-  attendanceStatus
+  childList
 }: {
   unitId: UUID
-  child: AttendanceChild
-  attendanceStatus: ChildAttendanceStatusResponse
+  childList: {
+    child: AttendanceChild
+    attendanceStatus: ChildAttendanceStatusResponse
+  }[]
 }) {
   const navigate = useNavigate()
   const { i18n } = useTranslation()
@@ -62,30 +67,26 @@ const MarkPresentInner = React.memo(function MarkPresentInner({
     createArrivalMutation
   )
 
-  const childLatestDeparture = useMemo(
-    () =>
-      attendanceStatus.attendances.length > 0
-        ? attendanceStatus.attendances[0].departed
-        : null,
-    [attendanceStatus]
-  )
-
-  const isValidTime = useCallback(() => {
+  const isValidTime = useMemo(() => {
     const parsedTime = LocalTime.tryParse(time)
     if (!parsedTime) return false
-    else if (childLatestDeparture) {
+
+    return childList.every(({ attendanceStatus }) => {
+      const childLatestDeparture =
+        attendanceStatus.attendances.length > 0
+          ? attendanceStatus.attendances[0].departed
+          : null
+      if (childLatestDeparture === null) return true
       return isAfter(
         HelsinkiDateTime.now().withTime(parsedTime).toSystemTzDate(),
         childLatestDeparture.toSystemTzDate()
       )
-    } else return true
-  }, [childLatestDeparture, time])
+    })
+  }, [childList, time])
 
-  const groupNotes = useQueryResult(
-    child.groupId
-      ? groupNotesQuery({ groupId: child.groupId })
-      : constantQuery([])
-  )
+  const singeDepartedChild =
+    childList.length === 1 &&
+    childList[0].attendanceStatus.status === 'DEPARTED'
 
   return (
     <TallContentArea
@@ -93,74 +94,89 @@ const MarkPresentInner = React.memo(function MarkPresentInner({
       paddingHorizontal="zero"
       paddingVertical="zero"
     >
-      {renderResult(groupNotes, (groupNotes) => (
-        <>
-          <div>
-            <ChildNameBackButton child={child} onClick={() => navigate(-1)} />
-          </div>
-          <ContentArea
-            shadow
-            opaque={true}
-            paddingHorizontal="s"
-            paddingVertical="m"
-          >
-            <TimeWrapper>
-              <TitleNoMargin size={2}>
-                {attendanceStatus.status === 'DEPARTED'
-                  ? i18n.attendances.actions.returnToPresent
-                  : i18n.attendances.actions.markPresent}
-              </TitleNoMargin>
-              <TimeInput onChange={setTime} value={time} data-qa="set-time" />
-            </TimeWrapper>
-            <Gap size="xs" />
-            <Actions>
-              <FixedSpaceRow fullWidth>
-                <LegacyButton
-                  text={i18n.common.cancel}
-                  onClick={() => navigate(-1)}
-                />
-                <AsyncButton
-                  primary
-                  text={i18n.common.confirm}
-                  disabled={!isValidTime()}
-                  onClick={() =>
-                    createArrival({
-                      unitId,
-                      body: {
-                        [child.id]: {
-                          arrived: time
-                        }
+      <div>
+        {childList.length === 1 ? (
+          <ChildNameBackButton
+            child={childList[0].child}
+            onClick={() => navigate(-1)}
+          />
+        ) : (
+          <BackButtonInline
+            icon={faArrowLeft}
+            text={i18n.common.return}
+            onClick={() => navigate(-1)}
+          />
+        )}
+      </div>
+      <ContentArea
+        shadow
+        opaque={true}
+        paddingHorizontal="s"
+        paddingVertical="m"
+      >
+        <TimeWrapper>
+          <TitleNoMargin size={2}>
+            {singeDepartedChild
+              ? i18n.attendances.actions.returnToPresent
+              : i18n.attendances.actions.markPresent(childList.length)}
+          </TitleNoMargin>
+          <TimeInput onChange={setTime} value={time} data-qa="set-time" />
+        </TimeWrapper>
+        <Gap size="xs" />
+        <Actions>
+          <FixedSpaceRow fullWidth>
+            <LegacyButton
+              text={i18n.common.cancel}
+              onClick={() => navigate(-1)}
+            />
+            <AsyncButton
+              primary
+              text={i18n.common.confirm}
+              disabled={!isValidTime}
+              onClick={() =>
+                createArrival({
+                  unitId,
+                  body: childList.reduce(
+                    (acc, { child }) => ({
+                      ...acc,
+                      [child.id]: {
+                        arrived: time
                       }
-                    })
-                  }
-                  onSuccess={() => {
-                    navigate(-2)
-                  }}
-                  data-qa="mark-present-btn"
-                />
-              </FixedSpaceRow>
-            </Actions>
-            {attendanceStatus.status == 'DEPARTED' && (
-              <>
-                <Title centered size={2}>
-                  {i18n.attendances.actions.or}
-                </Title>
-                <JustifyContainer>
-                  <WideMutateButton
-                    text={i18n.attendances.actions.returnToPresentNoTimeNeeded}
-                    mutation={returnToPresentMutation}
-                    onClick={() => ({ unitId, childId: child.id })}
-                    onSuccess={() => navigate(-2)}
-                    data-qa="return-to-present-btn"
-                  />
-                </JustifyContainer>
-              </>
-            )}
-          </ContentArea>
-          <Gap size="s" />
-          <ChildNotesSummary child={child} groupNotes={groupNotes} />
-        </>
-      ))}
+                    }),
+                    {}
+                  )
+                })
+              }
+              onSuccess={() => {
+                navigate(-2)
+              }}
+              data-qa="mark-present-btn"
+            />
+          </FixedSpaceRow>
+        </Actions>
+        {singeDepartedChild && (
+          <>
+            <Title centered size={2}>
+              {i18n.attendances.actions.or}
+            </Title>
+            <JustifyContainer>
+              <WideMutateButton
+                text={i18n.attendances.actions.returnToPresentNoTimeNeeded}
+                mutation={returnToPresentMutation}
+                onClick={() => ({ unitId, childId: childList[0].child.id })}
+                onSuccess={() => navigate(-2)}
+                data-qa="return-to-present-btn"
+              />
+            </JustifyContainer>
+          </>
+        )}
+      </ContentArea>
+      <Gap size="s" />
+      <FixedSpaceColumn>
+        {childList.map(({ child }) => (
+          <ChildNotesSummary child={child} key={child.id} />
+        ))}
+      </FixedSpaceColumn>
     </TallContentArea>
   )
 })
@@ -182,19 +198,21 @@ const MarkPresentWithChildIds = React.memo(function MarkPresentWithChildIds({
   unitId: UUID
   childIds: UUID[]
 }) {
-  // TODO: using first child for now, need to implement multi-child support
-  const childId = childIds[0]
+  const children = useQueryResult(childrenQuery(unitId)).map((children) =>
+    children.filter((child) => childIds.includes(child.id))
+  )
 
-  const child = useChild(useQueryResult(childrenQuery(unitId)), childId)
   const attendanceStatuses = useQueryResult(attendanceStatusesQuery({ unitId }))
 
   return renderResult(
-    combine(child, attendanceStatuses),
-    ([child, attendanceStatuses]) => (
+    combine(children, attendanceStatuses),
+    ([children, attendanceStatuses]) => (
       <MarkPresentInner
         unitId={unitId}
-        child={child}
-        attendanceStatus={childAttendanceStatus(child, attendanceStatuses)}
+        childList={children.map((child) => ({
+          child,
+          attendanceStatus: childAttendanceStatus(child, attendanceStatuses)
+        }))}
       />
     )
   )
diff --git a/frontend/src/employee-mobile-frontend/child-info/child-state-pages/AttendanceChildComing.tsx b/frontend/src/employee-mobile-frontend/child-info/child-state-pages/AttendanceChildComing.tsx
index 2506af16f5..c67b7c2921 100644
--- a/frontend/src/employee-mobile-frontend/child-info/child-state-pages/AttendanceChildComing.tsx
+++ b/frontend/src/employee-mobile-frontend/child-info/child-state-pages/AttendanceChildComing.tsx
@@ -44,7 +44,7 @@ export default React.memo(function AttendanceChildComing({
           data-qa="mark-present-link"
           to={routes.markPresent(unitId, [child.id]).value}
         >
-          {i18n.attendances.actions.markPresent}
+          {i18n.attendances.actions.markPresent(1)}
         </WideLinkButton>
 
         {!hasBeenPresentToday && (
diff --git a/frontend/src/lib-customizations/defaults/employee-mobile-frontend/i18n/fi.ts b/frontend/src/lib-customizations/defaults/employee-mobile-frontend/i18n/fi.ts
index 48bab2bef7..4e151193a8 100644
--- a/frontend/src/lib-customizations/defaults/employee-mobile-frontend/i18n/fi.ts
+++ b/frontend/src/lib-customizations/defaults/employee-mobile-frontend/i18n/fi.ts
@@ -169,7 +169,10 @@ export const fi = {
     actions: {
       markAbsent: 'Merkitse poissaolevaksi',
       cancelAbsence: 'Peruuta poissaolo',
-      markPresent: 'Merkitse saapuneeksi',
+      markPresent: (count: number) =>
+        count > 1
+          ? `Merkitse saapuneeksi ${count} lasta`
+          : 'Merkitse saapuneeksi',
       markDeparted: 'Merkitse lähteneeksi',
       returnToComing: 'Palauta tulossa oleviin',
       returnToPresent: 'Palauta läsnäolevaksi',

From ebff347c56ab8e89d188edb507ec5d11cb8fb2fe Mon Sep 17 00:00:00 2001
From: Joosa Kurvinen <joosa.kurvinen@reaktor.com>
Date: Mon, 4 Nov 2024 09:41:10 +0200
Subject: [PATCH 09/16] simplify api

---
 .../child-attendance/actions/MarkPresent.tsx  | 13 ++--
 .../generated/api-clients/attendance.ts       |  5 +-
 .../generated/api-types/attendance.ts         |  8 +++
 .../AttendanceTransitionsIntegrationTest.kt   |  5 +-
 .../attendance/ChildAttendanceController.kt   | 64 ++++++++++---------
 5 files changed, 54 insertions(+), 41 deletions(-)

diff --git a/frontend/src/employee-mobile-frontend/child-attendance/actions/MarkPresent.tsx b/frontend/src/employee-mobile-frontend/child-attendance/actions/MarkPresent.tsx
index 81b5a5895a..cca37a4d8a 100644
--- a/frontend/src/employee-mobile-frontend/child-attendance/actions/MarkPresent.tsx
+++ b/frontend/src/employee-mobile-frontend/child-attendance/actions/MarkPresent.tsx
@@ -136,15 +136,10 @@ const MarkPresentInner = React.memo(function MarkPresentInner({
               onClick={() =>
                 createArrival({
                   unitId,
-                  body: childList.reduce(
-                    (acc, { child }) => ({
-                      ...acc,
-                      [child.id]: {
-                        arrived: time
-                      }
-                    }),
-                    {}
-                  )
+                  body: {
+                    children: childList.map(({ child }) => child.id),
+                    arrived: time
+                  }
                 })
               }
               onSuccess={() => {
diff --git a/frontend/src/employee-mobile-frontend/generated/api-clients/attendance.ts b/frontend/src/employee-mobile-frontend/generated/api-clients/attendance.ts
index fe1b49e18d..c1f9e9c67e 100644
--- a/frontend/src/employee-mobile-frontend/generated/api-clients/attendance.ts
+++ b/frontend/src/employee-mobile-frontend/generated/api-clients/attendance.ts
@@ -7,6 +7,7 @@
 import LocalDate from 'lib-common/local-date'
 import { AbsenceRangeRequest } from 'lib-common/generated/api-types/attendance'
 import { ArrivalRequest } from 'lib-common/generated/api-types/attendance'
+import { ArrivalsRequest } from 'lib-common/generated/api-types/attendance'
 import { AttendanceChild } from 'lib-common/generated/api-types/attendance'
 import { ChildAttendanceStatusResponse } from 'lib-common/generated/api-types/attendance'
 import { CurrentDayStaffAttendanceResponse } from 'lib-common/generated/api-types/attendance'
@@ -175,13 +176,13 @@ export async function postArrivalDeprecated(
 export async function postArrivals(
   request: {
     unitId: UUID,
-    body: Record<UUID, ArrivalRequest>
+    body: ArrivalsRequest
   }
 ): Promise<void> {
   const { data: json } = await client.request<JsonOf<void>>({
     url: uri`/employee-mobile/attendances/units/${request.unitId}/arrivals`.toString(),
     method: 'POST',
-    data: request.body satisfies JsonCompatible<Record<UUID, ArrivalRequest>>
+    data: request.body satisfies JsonCompatible<ArrivalsRequest>
   })
   return json
 }
diff --git a/frontend/src/lib-common/generated/api-types/attendance.ts b/frontend/src/lib-common/generated/api-types/attendance.ts
index bca14bcc30..4fa053952f 100644
--- a/frontend/src/lib-common/generated/api-types/attendance.ts
+++ b/frontend/src/lib-common/generated/api-types/attendance.ts
@@ -41,6 +41,14 @@ export interface ArrivalRequest {
   arrived: string
 }
 
+/**
+* Generated from fi.espoo.evaka.attendance.ChildAttendanceController.ArrivalsRequest
+*/
+export interface ArrivalsRequest {
+  arrived: string
+  children: UUID[]
+}
+
 /**
 * Generated from fi.espoo.evaka.attendance.Attendance
 */
diff --git a/service/src/integrationTest/kotlin/fi/espoo/evaka/attendance/AttendanceTransitionsIntegrationTest.kt b/service/src/integrationTest/kotlin/fi/espoo/evaka/attendance/AttendanceTransitionsIntegrationTest.kt
index b425ef6b67..7c0d8b9be2 100644
--- a/service/src/integrationTest/kotlin/fi/espoo/evaka/attendance/AttendanceTransitionsIntegrationTest.kt
+++ b/service/src/integrationTest/kotlin/fi/espoo/evaka/attendance/AttendanceTransitionsIntegrationTest.kt
@@ -519,7 +519,10 @@ class AttendanceTransitionsIntegrationTest : FullApplicationTest(resetDbBeforeEa
             mobileUser,
             mockClock,
             testDaycare.id,
-            mapOf(testChild_1.id to ChildAttendanceController.ArrivalRequest(arrived)),
+            ChildAttendanceController.ArrivalsRequest(
+                children = setOf(testChild_1.id),
+                arrived = arrived,
+            ),
         )
     }
 
diff --git a/service/src/main/kotlin/fi/espoo/evaka/attendance/ChildAttendanceController.kt b/service/src/main/kotlin/fi/espoo/evaka/attendance/ChildAttendanceController.kt
index 0592e19944..26c7593feb 100644
--- a/service/src/main/kotlin/fi/espoo/evaka/attendance/ChildAttendanceController.kt
+++ b/service/src/main/kotlin/fi/espoo/evaka/attendance/ChildAttendanceController.kt
@@ -180,8 +180,9 @@ class ChildAttendanceController(
             }
     }
 
-    data class ArrivalRequest(
-        @ForceCodeGenType(String::class) @DateTimeFormat(pattern = "HH:mm") val arrived: LocalTime
+    data class ArrivalsRequest(
+        val children: Set<ChildId>,
+        @ForceCodeGenType(String::class) @DateTimeFormat(pattern = "HH:mm") val arrived: LocalTime,
     )
 
     @PostMapping("/employee-mobile/attendances/units/{unitId}/arrivals")
@@ -190,41 +191,46 @@ class ChildAttendanceController(
         user: AuthenticatedUser.MobileDevice,
         clock: EvakaClock,
         @PathVariable unitId: DaycareId,
-        @RequestBody body: Map<ChildId, ArrivalRequest>,
+        @RequestBody body: ArrivalsRequest,
     ) {
         val today = clock.today()
         db.connect { dbc ->
-            dbc.transaction { tx ->
-                accessControl.requirePermissionFor(
-                    tx,
-                    user,
-                    clock,
-                    Action.Unit.UPDATE_CHILD_ATTENDANCES,
-                    unitId,
-                )
-                body.entries.forEach { (childId, arrival) ->
-                    tx.fetchChildPlacementBasics(childId, unitId, today)
-                    try {
-                        tx.insertAttendance(
-                            childId = childId,
-                            unitId = unitId,
-                            date = today,
-                            range = TimeInterval(arrival.arrived, null),
-                        )
-                    } catch (e: Exception) {
-                        throw mapPSQLException(e)
+                dbc.transaction { tx ->
+                    accessControl.requirePermissionFor(
+                        tx,
+                        user,
+                        clock,
+                        Action.Unit.UPDATE_CHILD_ATTENDANCES,
+                        unitId,
+                    )
+                    body.children.map { childId ->
+                        tx.fetchChildPlacementBasics(childId, unitId, today)
+                        try {
+                            tx.insertAttendance(
+                                childId = childId,
+                                unitId = unitId,
+                                date = today,
+                                range = TimeInterval(body.arrived, null),
+                            )
+                        } catch (e: Exception) {
+                            throw mapPSQLException(e)
+                        }
                     }
                 }
             }
-        }
-        body.keys.forEach { childId ->
-            Audit.ChildAttendancesArrivalCreate.log(
-                targetId = AuditId(childId),
-                objectId = AuditId(unitId),
-            )
-        }
+            .also { attendanceIds ->
+                Audit.ChildAttendancesArrivalCreate.log(
+                    targetId = AuditId(body.children.toList()),
+                    objectId = AuditId(attendanceIds),
+                    meta = mapOf("unitId" to unitId),
+                )
+            }
     }
 
+    data class ArrivalRequest(
+        @ForceCodeGenType(String::class) @DateTimeFormat(pattern = "HH:mm") val arrived: LocalTime
+    )
+
     @PostMapping("/employee-mobile/attendances/units/{unitId}/children/{childId}/arrival")
     fun postArrivalDeprecated(
         db: Database,

From ff4cbf7ca5b95512abb4738b6a60d41da0b43de9 Mon Sep 17 00:00:00 2001
From: Joosa Kurvinen <joosa.kurvinen@reaktor.com>
Date: Mon, 4 Nov 2024 10:00:18 +0200
Subject: [PATCH 10/16] i18n

---
 .../child-attendance/ChildList.tsx                   | 12 ++++--------
 .../child-attendance/ChildListItem.tsx               |  7 ++++++-
 .../defaults/employee-mobile-frontend/i18n/fi.ts     |  9 +++++++++
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/frontend/src/employee-mobile-frontend/child-attendance/ChildList.tsx b/frontend/src/employee-mobile-frontend/child-attendance/ChildList.tsx
index bb62084579..955602aa62 100644
--- a/frontend/src/employee-mobile-frontend/child-attendance/ChildList.tsx
+++ b/frontend/src/employee-mobile-frontend/child-attendance/ChildList.tsx
@@ -85,7 +85,7 @@ export default React.memo(function ChildList({
                       onChange={(checked) =>
                         checked ? enterMultiSelectMode() : exitMultiSelectMode()
                       }
-                      label="Kirjaa useampi lapsi"
+                      label={i18n.attendances.actions.arrivalMultiselect.toggle}
                     />
                   </MultiselectToggleBox>
                 </Li>
@@ -134,13 +134,9 @@ export default React.memo(function ChildList({
             <FloatingActionButton
               appearance="button"
               primary
-              text={`Merkitse saapuneeksi${
-                selectedChildren.length > 1
-                  ? `: ${selectedChildren.length} lasta`
-                  : selectedChildren.length === 1
-                    ? ': 1 lapsi'
-                    : ''
-              }`}
+              text={i18n.attendances.actions.arrivalMultiselect.confirm(
+                selectedChildren.length
+              )}
               disabled={selectedChildren.length === 0}
               onClick={() =>
                 navigate(routes.markPresent(unitId, selectedChildren).value)
diff --git a/frontend/src/employee-mobile-frontend/child-attendance/ChildListItem.tsx b/frontend/src/employee-mobile-frontend/child-attendance/ChildListItem.tsx
index ea4177adc4..4dfb68b7ee 100644
--- a/frontend/src/employee-mobile-frontend/child-attendance/ChildListItem.tsx
+++ b/frontend/src/employee-mobile-frontend/child-attendance/ChildListItem.tsx
@@ -137,6 +137,7 @@ export default React.memo(function ChildListItem({
   onChangeSelected,
   childAttendanceUrl
 }: ChildListItemProps) {
+  const { i18n } = useTranslation()
   const unitId = unitOrGroup.unitId
   const unitInfoResponse = useQueryResult(unitInfoQuery({ unitId }))
 
@@ -241,7 +242,11 @@ export default React.memo(function ChildListItem({
                 {child.preferredName ? ` (${child.preferredName})` : null}
               </Bold>
             </NameRow>
-            <DetailsText>{selected ? 'Valittu' : 'Valitse'}</DetailsText>
+            <DetailsText>
+              {selected
+                ? i18n.attendances.actions.arrivalMultiselect.selected
+                : i18n.attendances.actions.arrivalMultiselect.select}
+            </DetailsText>
           </MainInfoColumn>
           <RightColumn>{selected ? '[x]' : '[ ]'}</RightColumn>
         </MultiselectBox>
diff --git a/frontend/src/lib-customizations/defaults/employee-mobile-frontend/i18n/fi.ts b/frontend/src/lib-customizations/defaults/employee-mobile-frontend/i18n/fi.ts
index 4e151193a8..5491e1005d 100644
--- a/frontend/src/lib-customizations/defaults/employee-mobile-frontend/i18n/fi.ts
+++ b/frontend/src/lib-customizations/defaults/employee-mobile-frontend/i18n/fi.ts
@@ -167,6 +167,15 @@ export const fi = {
     },
     groupSelectError: 'Valitun ryhmän nimeä ei löytynyt',
     actions: {
+      arrivalMultiselect: {
+        toggle: 'Kirjaa useampi lapsi',
+        confirm: (count: number) =>
+          `Merkitse saapuneeksi${
+            count > 1 ? `: ${count} lasta` : count === 1 ? ': 1 lapsi' : ''
+          }`,
+        select: 'Valitse',
+        selected: 'Valittu'
+      },
       markAbsent: 'Merkitse poissaolevaksi',
       cancelAbsence: 'Peruuta poissaolo',
       markPresent: (count: number) =>

From 47e9b93494d559072fee9a428a78bacf5fe8839d Mon Sep 17 00:00:00 2001
From: Joosa Kurvinen <joosa.kurvinen@reaktor.com>
Date: Mon, 4 Nov 2024 11:52:00 +0200
Subject: [PATCH 11/16] selection icon

---
 .../child-attendance/ChildList.tsx            |  2 ++
 .../child-attendance/ChildListItem.tsx        | 28 ++++++++++++++++++-
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/frontend/src/employee-mobile-frontend/child-attendance/ChildList.tsx b/frontend/src/employee-mobile-frontend/child-attendance/ChildList.tsx
index 955602aa62..ba5eee24a4 100644
--- a/frontend/src/employee-mobile-frontend/child-attendance/ChildList.tsx
+++ b/frontend/src/employee-mobile-frontend/child-attendance/ChildList.tsx
@@ -23,6 +23,7 @@ import {
   SpacingSize
 } from 'lib-components/white-space'
 import colors from 'lib-customizations/common'
+import { faTimes } from 'lib-icons'
 
 import { routes } from '../App'
 import { useTranslation } from '../common/i18n'
@@ -129,6 +130,7 @@ export default React.memo(function ChildList({
             <Button
               appearance="inline"
               text={i18n.common.cancel}
+              icon={faTimes}
               onClick={exitMultiSelectMode}
             />
             <FloatingActionButton
diff --git a/frontend/src/employee-mobile-frontend/child-attendance/ChildListItem.tsx b/frontend/src/employee-mobile-frontend/child-attendance/ChildListItem.tsx
index 4dfb68b7ee..e2ccfef460 100644
--- a/frontend/src/employee-mobile-frontend/child-attendance/ChildListItem.tsx
+++ b/frontend/src/employee-mobile-frontend/child-attendance/ChildListItem.tsx
@@ -2,6 +2,7 @@
 //
 // SPDX-License-Identifier: LGPL-2.1-or-later
 
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import React, { useMemo } from 'react'
 import { Link } from 'react-router-dom'
 import styled from 'styled-components'
@@ -19,6 +20,7 @@ import { defaultMargins } from 'lib-components/white-space'
 import colors, { attendanceColors } from 'lib-customizations/common'
 import { fasExclamation } from 'lib-icons'
 import { farStickyNote, farUser, farUsers } from 'lib-icons'
+import { faCheck } from 'lib-icons'
 
 import { routes } from '../App'
 import { groupNotesQuery } from '../child-notes/queries'
@@ -120,6 +122,22 @@ const IconPlacementBox = styled.div`
   }
 `
 
+const CheckCircleOff = styled.div`
+  height: 40px;
+  width: 40px;
+  border-radius: 100%;
+  border: 1px solid ${(p) => p.theme.colors.main.m1};
+`
+
+const CheckCircleOn = styled(CheckCircleOff)`
+  background-color: ${(p) => p.theme.colors.main.m1};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 20px;
+  line-height: 24px;
+`
+
 interface ChildListItemProps {
   unitOrGroup: UnitOrGroup
   child: ListItem
@@ -248,7 +266,15 @@ export default React.memo(function ChildListItem({
                 : i18n.attendances.actions.arrivalMultiselect.select}
             </DetailsText>
           </MainInfoColumn>
-          <RightColumn>{selected ? '[x]' : '[ ]'}</RightColumn>
+          <RightColumn>
+            {selected ? (
+              <CheckCircleOn>
+                <FontAwesomeIcon icon={faCheck} color={colors.grayscale.g0} />
+              </CheckCircleOn>
+            ) : (
+              <CheckCircleOff />
+            )}
+          </RightColumn>
         </MultiselectBox>
       )}
     </ChildBox>

From 0bbb6ba6b40af058f2d3c4ca01b69f2452e38ee6 Mon Sep 17 00:00:00 2001
From: Joosa Kurvinen <joosa.kurvinen@reaktor.com>
Date: Mon, 4 Nov 2024 11:53:51 +0200
Subject: [PATCH 12/16] z-index fix

---
 .../src/employee-mobile-frontend/child-attendance/ChildList.tsx  | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/employee-mobile-frontend/child-attendance/ChildList.tsx b/frontend/src/employee-mobile-frontend/child-attendance/ChildList.tsx
index ba5eee24a4..9ba049eba0 100644
--- a/frontend/src/employee-mobile-frontend/child-attendance/ChildList.tsx
+++ b/frontend/src/employee-mobile-frontend/child-attendance/ChildList.tsx
@@ -193,6 +193,7 @@ const MultiselectToggleBox = styled.div`
 
 const MultiselectActions = styled.div`
   position: sticky;
+  z-index: 10;
   bottom: 0;
   left: 0;
   right: 0;

From 302620f349e756d0410dade7a802d31e3a232804 Mon Sep 17 00:00:00 2001
From: Joosa Kurvinen <joosa.kurvinen@reaktor.com>
Date: Mon, 4 Nov 2024 12:33:34 +0200
Subject: [PATCH 13/16] fix e2e tests

---
 .../child-attendance/ChildNotesSummary.tsx                    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/src/employee-mobile-frontend/child-attendance/ChildNotesSummary.tsx b/frontend/src/employee-mobile-frontend/child-attendance/ChildNotesSummary.tsx
index 75aa1b58fd..51e0009f13 100644
--- a/frontend/src/employee-mobile-frontend/child-attendance/ChildNotesSummary.tsx
+++ b/frontend/src/employee-mobile-frontend/child-attendance/ChildNotesSummary.tsx
@@ -93,7 +93,7 @@ const ChildNotesSummaryInner = React.memo(function ChildNotesSummaryInner({
               <Label>{i18n.attendances.notes.childStickyNotes}</Label>
             </FixedSpaceRow>
             {child.stickyNotes.length === 1 ? (
-              <div>{child.stickyNotes[0].note}</div>
+              <div data-qa="sticky-note">{child.stickyNotes[0].note}</div>
             ) : (
               <NoMarginList>
                 {child.stickyNotes.map((note) => (
@@ -180,7 +180,7 @@ const ChildNotesSummaryInner = React.memo(function ChildNotesSummaryInner({
               <Label>{i18n.attendances.notes.groupNote}</Label>
             </FixedSpaceRow>
             {activeGroupNotes.length === 1 ? (
-              <div>{activeGroupNotes[0].note}</div>
+              <div data-qa="group-note">{activeGroupNotes[0].note}</div>
             ) : (
               <NoMarginList>
                 {activeGroupNotes.map((note) => (

From 1befa043ec64a0e3119e9b006836a7e242a1e4a5 Mon Sep 17 00:00:00 2001
From: Joosa Kurvinen <joosa.kurvinen@reaktor.com>
Date: Mon, 4 Nov 2024 16:26:29 +0200
Subject: [PATCH 14/16] fix navigation issue, add e2e test

---
 .../src/e2e-test/pages/mobile/list-page.ts    |  8 +++++-
 .../specs/6_mobile/child-attendances.spec.ts  | 25 +++++++++++++++++++
 frontend/src/employee-mobile-frontend/App.tsx |  7 ++++--
 .../child-attendance/ChildList.tsx            |  6 ++++-
 .../child-attendance/actions/MarkPresent.tsx  | 22 ++++++++++++----
 .../AttendanceChildComing.tsx                 |  2 +-
 .../AttendanceChildDeparted.tsx               |  4 ++-
 7 files changed, 63 insertions(+), 11 deletions(-)

diff --git a/frontend/src/e2e-test/pages/mobile/list-page.ts b/frontend/src/e2e-test/pages/mobile/list-page.ts
index 567582eb6f..8fc38a64fc 100644
--- a/frontend/src/e2e-test/pages/mobile/list-page.ts
+++ b/frontend/src/e2e-test/pages/mobile/list-page.ts
@@ -4,7 +4,7 @@
 
 import { UUID } from 'lib-common/types'
 
-import { Page, Element } from '../../utils/page'
+import { Page, Element, Checkbox } from '../../utils/page'
 
 export default class MobileListPage {
   unreadMessagesIndicator: Element
@@ -14,6 +14,8 @@ export default class MobileListPage {
   departedChildrenTab: Element
   absentChildrenTab: Element
   groupSelectorButton: Element
+  multiselectToggle: Checkbox
+  markMultipleArrivedButton: Element
   constructor(private readonly page: Page) {
     this.unreadMessagesIndicator = page.findByDataQa(
       'unread-messages-indicator'
@@ -24,6 +26,10 @@ export default class MobileListPage {
     this.departedChildrenTab = page.findByDataQa('departed-tab')
     this.absentChildrenTab = page.findByDataQa('absent-tab')
     this.groupSelectorButton = page.findByDataQa('group-selector-button')
+    this.multiselectToggle = new Checkbox(
+      page.findByDataQa('multiselect-toggle')
+    )
+    this.markMultipleArrivedButton = page.findByDataQa('mark-multiple-arrived')
   }
 
   childRow = (childId: UUID) => this.page.findByDataQa(`child-${childId}`)
diff --git a/frontend/src/e2e-test/specs/6_mobile/child-attendances.spec.ts b/frontend/src/e2e-test/specs/6_mobile/child-attendances.spec.ts
index 040d36e915..49ee306f45 100644
--- a/frontend/src/e2e-test/specs/6_mobile/child-attendances.spec.ts
+++ b/frontend/src/e2e-test/specs/6_mobile/child-attendances.spec.ts
@@ -271,6 +271,31 @@ describe('Child mobile attendance list', () => {
     await listPage.assertChildExists(child1)
   })
 
+  test('Multiple children can be marked as present', async () => {
+    await openPage()
+    await createPlacements(testChild.id)
+    await createPlacements(testChild2.id, group2.id)
+    await createPlacements(testChildRestricted.id)
+
+    const mobileSignupUrl = await pairMobileDevice(testDaycare.id)
+    await page.goto(mobileSignupUrl)
+    await assertAttendanceCounts(3, 0, 0, 0, 3)
+    await listPage.comingChildrenTab.click()
+
+    await listPage.multiselectToggle.check()
+    await listPage.selectChild(testChild.id)
+    await listPage.selectChild(testChild2.id)
+    await listPage.markMultipleArrivedButton.click()
+    await childAttendancePage.setTime('08:00')
+    await childAttendancePage.selectMarkPresent()
+
+    await assertAttendanceCounts(1, 2, 0, 0, 3)
+
+    await listPage.presentChildrenTab.click()
+    await listPage.assertChildExists(testChild.id)
+    await listPage.assertChildExists(testChild2.id)
+  })
+
   test('Child can be marked as absent for the whole day', async () => {
     await openPage()
     const child = testChild2.id
diff --git a/frontend/src/employee-mobile-frontend/App.tsx b/frontend/src/employee-mobile-frontend/App.tsx
index 65dd386740..35694114a2 100755
--- a/frontend/src/employee-mobile-frontend/App.tsx
+++ b/frontend/src/employee-mobile-frontend/App.tsx
@@ -399,8 +399,11 @@ export const routes = {
   settings(unitId: UUID): Uri {
     return uri`${this.unit(unitId)}/settings`
   },
-  markPresent(unitId: UUID, childIds: UUID[]): Uri {
-    return uri`${this.unit(unitId)}/mark-present?children=${childIds.join(',')}`
+  markPresent(unitId: UUID, childIds: UUID[], multiselect: boolean): Uri {
+    const params = new URLSearchParams()
+    params.set('children', childIds.join(','))
+    if (multiselect) params.set('multiselect', 'true')
+    return uri`${this.unit(unitId)}/mark-present`.appendQuery(params)
   },
   unitOrGroup(unitOrGroup: UnitOrGroup): Uri {
     const id = unitOrGroup.type === 'unit' ? 'all' : unitOrGroup.id
diff --git a/frontend/src/employee-mobile-frontend/child-attendance/ChildList.tsx b/frontend/src/employee-mobile-frontend/child-attendance/ChildList.tsx
index 9ba049eba0..59682c8c0b 100644
--- a/frontend/src/employee-mobile-frontend/child-attendance/ChildList.tsx
+++ b/frontend/src/employee-mobile-frontend/child-attendance/ChildList.tsx
@@ -87,6 +87,7 @@ export default React.memo(function ChildList({
                         checked ? enterMultiSelectMode() : exitMultiSelectMode()
                       }
                       label={i18n.attendances.actions.arrivalMultiselect.toggle}
+                      data-qa="multiselect-toggle"
                     />
                   </MultiselectToggleBox>
                 </Li>
@@ -141,8 +142,11 @@ export default React.memo(function ChildList({
               )}
               disabled={selectedChildren.length === 0}
               onClick={() =>
-                navigate(routes.markPresent(unitId, selectedChildren).value)
+                navigate(
+                  routes.markPresent(unitId, selectedChildren, true).value
+                )
               }
+              data-qa="mark-multiple-arrived"
             />
           </FixedSpaceRow>
         </MultiselectActions>
diff --git a/frontend/src/employee-mobile-frontend/child-attendance/actions/MarkPresent.tsx b/frontend/src/employee-mobile-frontend/child-attendance/actions/MarkPresent.tsx
index cca37a4d8a..8189df2cbe 100644
--- a/frontend/src/employee-mobile-frontend/child-attendance/actions/MarkPresent.tsx
+++ b/frontend/src/employee-mobile-frontend/child-attendance/actions/MarkPresent.tsx
@@ -50,13 +50,15 @@ import { childAttendanceStatus } from '../utils'
 
 const MarkPresentInner = React.memo(function MarkPresentInner({
   unitId,
-  childList
+  childList,
+  multiselect
 }: {
   unitId: UUID
   childList: {
     child: AttendanceChild
     attendanceStatus: ChildAttendanceStatusResponse
   }[]
+  multiselect: boolean
 }) {
   const navigate = useNavigate()
   const { i18n } = useTranslation()
@@ -143,7 +145,7 @@ const MarkPresentInner = React.memo(function MarkPresentInner({
                 })
               }
               onSuccess={() => {
-                navigate(-2)
+                navigate(multiselect ? -1 : -2)
               }}
               data-qa="mark-present-btn"
             />
@@ -186,12 +188,14 @@ const JustifyContainer = styled.div`
   justify-content: center;
 `
 
-const MarkPresentWithChildIds = React.memo(function MarkPresentWithChildIds({
+const MarkPresentWithParams = React.memo(function MarkPresentWithParams({
   unitId,
-  childIds
+  childIds,
+  multiselect
 }: {
   unitId: UUID
   childIds: UUID[]
+  multiselect: boolean
 }) {
   const children = useQueryResult(childrenQuery(unitId)).map((children) =>
     children.filter((child) => childIds.includes(child.id))
@@ -208,6 +212,7 @@ const MarkPresentWithChildIds = React.memo(function MarkPresentWithChildIds({
           child,
           attendanceStatus: childAttendanceStatus(child, attendanceStatuses)
         }))}
+        multiselect={multiselect}
       />
     )
   )
@@ -216,11 +221,18 @@ const MarkPresentWithChildIds = React.memo(function MarkPresentWithChildIds({
 export default React.memo(function MarkPresent({ unitId }: { unitId: UUID }) {
   const [searchParams] = useSearchParams()
   const children = searchParams.get('children')
+  const multiselect = searchParams.get('multiselect') === 'true'
   if (children === null)
     return <Navigate replace to={routes.unit(unitId).value} />
   const childIds = children.split(',').filter((id) => id.length > 0)
   if (childIds.length === 0)
     return <Navigate replace to={routes.unit(unitId).value} />
 
-  return <MarkPresentWithChildIds unitId={unitId} childIds={childIds} />
+  return (
+    <MarkPresentWithParams
+      unitId={unitId}
+      childIds={childIds}
+      multiselect={multiselect}
+    />
+  )
 })
diff --git a/frontend/src/employee-mobile-frontend/child-info/child-state-pages/AttendanceChildComing.tsx b/frontend/src/employee-mobile-frontend/child-info/child-state-pages/AttendanceChildComing.tsx
index c67b7c2921..08fbdfaad0 100644
--- a/frontend/src/employee-mobile-frontend/child-info/child-state-pages/AttendanceChildComing.tsx
+++ b/frontend/src/employee-mobile-frontend/child-info/child-state-pages/AttendanceChildComing.tsx
@@ -42,7 +42,7 @@ export default React.memo(function AttendanceChildComing({
         <WideLinkButton
           $primary
           data-qa="mark-present-link"
-          to={routes.markPresent(unitId, [child.id]).value}
+          to={routes.markPresent(unitId, [child.id], false).value}
         >
           {i18n.attendances.actions.markPresent(1)}
         </WideLinkButton>
diff --git a/frontend/src/employee-mobile-frontend/child-info/child-state-pages/AttendanceChildDeparted.tsx b/frontend/src/employee-mobile-frontend/child-info/child-state-pages/AttendanceChildDeparted.tsx
index 2e2260036f..cbdf8c9c55 100644
--- a/frontend/src/employee-mobile-frontend/child-info/child-state-pages/AttendanceChildDeparted.tsx
+++ b/frontend/src/employee-mobile-frontend/child-info/child-state-pages/AttendanceChildDeparted.tsx
@@ -32,7 +32,9 @@ export default React.memo(function AttendanceChildDeparted({
     <ReturnToPresentButton
       icon={faArrowRotateLeft}
       text={i18n.attendances.actions.returnToPresent}
-      onClick={() => navigate(routes.markPresent(unitId, [child.id]).value)}
+      onClick={() =>
+        navigate(routes.markPresent(unitId, [child.id], false).value)
+      }
       data-qa="return-to-present-btn"
     />
   )

From 423c3fd3d01c9370941fac0ea66f91c49cb4ba5f Mon Sep 17 00:00:00 2001
From: Joosa Kurvinen <joosa.kurvinen@reaktor.com>
Date: Thu, 7 Nov 2024 12:38:35 +0200
Subject: [PATCH 15/16] move/refactor state

---
 .../child-attendance/AttendanceList.tsx       | 15 ++++-
 .../AttendancePageWrapper.tsx                 |  7 ++-
 .../child-attendance/ChildList.tsx            | 57 ++++++++-----------
 3 files changed, 45 insertions(+), 34 deletions(-)

diff --git a/frontend/src/employee-mobile-frontend/child-attendance/AttendanceList.tsx b/frontend/src/employee-mobile-frontend/child-attendance/AttendanceList.tsx
index 6bf814542b..99e1d0e5cb 100644
--- a/frontend/src/employee-mobile-frontend/child-attendance/AttendanceList.tsx
+++ b/frontend/src/employee-mobile-frontend/child-attendance/AttendanceList.tsx
@@ -2,12 +2,13 @@
 //
 // SPDX-License-Identifier: LGPL-2.1-or-later
 
-import React, { useCallback, useMemo } from 'react'
+import React, { useCallback, useEffect, useMemo, useState } from 'react'
 
 import {
   AttendanceChild,
   AttendanceStatus
 } from 'lib-common/generated/api-types/attendance'
+import { UUID } from 'lib-common/types'
 import { ContentArea } from 'lib-components/layout/Container'
 import { TabLinks } from 'lib-components/molecules/Tabs'
 
@@ -33,6 +34,10 @@ export default React.memo(function AttendanceList({
 }: Props) {
   const { i18n } = useTranslation()
 
+  const [multiselectChildren, setMultiselectChildren] = useState<UUID[] | null>(
+    null
+  )
+
   const groupChildren = useMemo(
     () =>
       unitOrGroup.type === 'unit'
@@ -118,6 +123,12 @@ export default React.memo(function AttendanceList({
     [activeStatus, childrenWithStatus]
   )
 
+  // this resetting should be done as a tab change side effect but
+  // that would require changing tabs from NavLinks to buttons
+  useEffect(() => {
+    setMultiselectChildren(null)
+  }, [activeStatus])
+
   return (
     <>
       <TabLinks tabs={tabs} mobile sticky topOffset={64} />
@@ -130,6 +141,8 @@ export default React.memo(function AttendanceList({
           unitOrGroup={unitOrGroup}
           items={filteredChildren}
           type={activeStatus}
+          multiselectChildren={multiselectChildren}
+          setMultiselectChildren={setMultiselectChildren}
         />
       </ContentArea>
     </>
diff --git a/frontend/src/employee-mobile-frontend/child-attendance/AttendancePageWrapper.tsx b/frontend/src/employee-mobile-frontend/child-attendance/AttendancePageWrapper.tsx
index 27896bdd5e..d771edd8c9 100644
--- a/frontend/src/employee-mobile-frontend/child-attendance/AttendancePageWrapper.tsx
+++ b/frontend/src/employee-mobile-frontend/child-attendance/AttendancePageWrapper.tsx
@@ -206,7 +206,12 @@ const ChildSearch = React.memo(function Search({
           setShowSearch={toggleShow}
           searchResults={searchResults}
         />
-        <ChildList unitOrGroup={unitOrGroup} items={searchResults} />
+        <ChildList
+          unitOrGroup={unitOrGroup}
+          items={searchResults}
+          multiselectChildren={null}
+          setMultiselectChildren={() => undefined}
+        />
       </ContentArea>
     </SearchContainer>
   )
diff --git a/frontend/src/employee-mobile-frontend/child-attendance/ChildList.tsx b/frontend/src/employee-mobile-frontend/child-attendance/ChildList.tsx
index 59682c8c0b..a01ebcbc91 100644
--- a/frontend/src/employee-mobile-frontend/child-attendance/ChildList.tsx
+++ b/frontend/src/employee-mobile-frontend/child-attendance/ChildList.tsx
@@ -2,7 +2,7 @@
 //
 // SPDX-License-Identifier: LGPL-2.1-or-later
 
-import React, { useEffect, useState } from 'react'
+import React from 'react'
 import { useNavigate } from 'react-router-dom'
 import styled from 'styled-components'
 
@@ -39,6 +39,8 @@ interface Props {
   unitOrGroup: UnitOrGroup
   items: ListItem[]
   type?: AttendanceStatus
+  multiselectChildren: UUID[] | null
+  setMultiselectChildren: (selected: UUID[] | null) => void
 }
 
 const NoChildrenOnList = styled.div`
@@ -49,29 +51,14 @@ const NoChildrenOnList = styled.div`
 export default React.memo(function ChildList({
   unitOrGroup,
   items,
-  type
+  type,
+  multiselectChildren,
+  setMultiselectChildren
 }: Props) {
   const { i18n } = useTranslation()
   const navigate = useNavigate()
   const unitId = unitOrGroup.unitId
 
-  const [multiSelectMode, setMultiSelectMode] = useState(false)
-  const [selectedChildren, setSelectedChildren] = useState<UUID[]>([])
-
-  const enterMultiSelectMode = () => {
-    setMultiSelectMode(true)
-    setSelectedChildren([])
-  }
-
-  const exitMultiSelectMode = () => {
-    setMultiSelectMode(false)
-    setSelectedChildren([])
-  }
-
-  useEffect(() => {
-    if (type !== 'COMING') exitMultiSelectMode()
-  }, [type])
-
   return (
     <>
       <FixedSpaceColumn>
@@ -82,9 +69,11 @@ export default React.memo(function ChildList({
                 <Li>
                   <MultiselectToggleBox>
                     <Checkbox
-                      checked={multiSelectMode}
+                      checked={multiselectChildren !== null}
                       onChange={(checked) =>
-                        checked ? enterMultiSelectMode() : exitMultiSelectMode()
+                        checked
+                          ? setMultiselectChildren([])
+                          : setMultiselectChildren(null)
                       }
                       label={i18n.attendances.actions.arrivalMultiselect.toggle}
                       data-qa="multiselect-toggle"
@@ -101,14 +90,18 @@ export default React.memo(function ChildList({
                     child={ac}
                     childAttendanceUrl={routes.child(unitId, ac.id).value}
                     selected={
-                      multiSelectMode ? selectedChildren.includes(ac.id) : null
+                      multiselectChildren
+                        ? multiselectChildren.includes(ac.id)
+                        : null
                     }
                     onChangeSelected={(selected) => {
-                      setSelectedChildren((prev) =>
-                        selected
-                          ? [...prev, ac.id]
-                          : prev.filter((id) => id !== ac.id)
-                      )
+                      if (multiselectChildren) {
+                        setMultiselectChildren(
+                          selected
+                            ? [...multiselectChildren, ac.id]
+                            : multiselectChildren.filter((id) => id !== ac.id)
+                        )
+                      }
                     }}
                   />
                 </Li>
@@ -121,7 +114,7 @@ export default React.memo(function ChildList({
           )}
         </OrderedList>
       </FixedSpaceColumn>
-      {multiSelectMode && (
+      {multiselectChildren && (
         <MultiselectActions>
           <FixedSpaceRow
             spacing="s"
@@ -132,18 +125,18 @@ export default React.memo(function ChildList({
               appearance="inline"
               text={i18n.common.cancel}
               icon={faTimes}
-              onClick={exitMultiSelectMode}
+              onClick={() => setMultiselectChildren(null)}
             />
             <FloatingActionButton
               appearance="button"
               primary
               text={i18n.attendances.actions.arrivalMultiselect.confirm(
-                selectedChildren.length
+                multiselectChildren.length
               )}
-              disabled={selectedChildren.length === 0}
+              disabled={multiselectChildren.length === 0}
               onClick={() =>
                 navigate(
-                  routes.markPresent(unitId, selectedChildren, true).value
+                  routes.markPresent(unitId, multiselectChildren, true).value
                 )
               }
               data-qa="mark-multiple-arrived"

From 255239a4a49e20a2cdc976db48fc6ecd7f2e60e2 Mon Sep 17 00:00:00 2001
From: Joosa Kurvinen <joosa.kurvinen@reaktor.com>
Date: Thu, 7 Nov 2024 13:01:42 +0200
Subject: [PATCH 16/16] use local time on api request

---
 .../child-attendance/actions/MarkPresent.tsx  | 21 +++++++++++--------
 .../generated/api-types/attendance.ts         | 10 ++++++++-
 .../attendance/ChildAttendanceController.kt   |  2 +-
 3 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/frontend/src/employee-mobile-frontend/child-attendance/actions/MarkPresent.tsx b/frontend/src/employee-mobile-frontend/child-attendance/actions/MarkPresent.tsx
index 8189df2cbe..8c0d11a942 100644
--- a/frontend/src/employee-mobile-frontend/child-attendance/actions/MarkPresent.tsx
+++ b/frontend/src/employee-mobile-frontend/child-attendance/actions/MarkPresent.tsx
@@ -69,8 +69,9 @@ const MarkPresentInner = React.memo(function MarkPresentInner({
     createArrivalMutation
   )
 
+  const parsedTime = LocalTime.tryParse(time)
+
   const isValidTime = useMemo(() => {
-    const parsedTime = LocalTime.tryParse(time)
     if (!parsedTime) return false
 
     return childList.every(({ attendanceStatus }) => {
@@ -84,7 +85,7 @@ const MarkPresentInner = React.memo(function MarkPresentInner({
         childLatestDeparture.toSystemTzDate()
       )
     })
-  }, [childList, time])
+  }, [childList, parsedTime])
 
   const singeDepartedChild =
     childList.length === 1 &&
@@ -136,13 +137,15 @@ const MarkPresentInner = React.memo(function MarkPresentInner({
               text={i18n.common.confirm}
               disabled={!isValidTime}
               onClick={() =>
-                createArrival({
-                  unitId,
-                  body: {
-                    children: childList.map(({ child }) => child.id),
-                    arrived: time
-                  }
-                })
+                parsedTime
+                  ? createArrival({
+                      unitId,
+                      body: {
+                        children: childList.map(({ child }) => child.id),
+                        arrived: parsedTime
+                      }
+                    })
+                  : Promise.reject()
               }
               onSuccess={() => {
                 navigate(multiselect ? -1 : -2)
diff --git a/frontend/src/lib-common/generated/api-types/attendance.ts b/frontend/src/lib-common/generated/api-types/attendance.ts
index 4fa053952f..9dbab165ab 100644
--- a/frontend/src/lib-common/generated/api-types/attendance.ts
+++ b/frontend/src/lib-common/generated/api-types/attendance.ts
@@ -45,7 +45,7 @@ export interface ArrivalRequest {
 * Generated from fi.espoo.evaka.attendance.ChildAttendanceController.ArrivalsRequest
 */
 export interface ArrivalsRequest {
-  arrived: string
+  arrived: LocalTime
   children: UUID[]
 }
 
@@ -443,6 +443,14 @@ export function deserializeJsonAbsenceRangeRequest(json: JsonOf<AbsenceRangeRequ
 }
 
 
+export function deserializeJsonArrivalsRequest(json: JsonOf<ArrivalsRequest>): ArrivalsRequest {
+  return {
+    ...json,
+    arrived: LocalTime.parseIso(json.arrived)
+  }
+}
+
+
 export function deserializeJsonAttendance(json: JsonOf<Attendance>): Attendance {
   return {
     ...json,
diff --git a/service/src/main/kotlin/fi/espoo/evaka/attendance/ChildAttendanceController.kt b/service/src/main/kotlin/fi/espoo/evaka/attendance/ChildAttendanceController.kt
index 26c7593feb..fce7a15993 100644
--- a/service/src/main/kotlin/fi/espoo/evaka/attendance/ChildAttendanceController.kt
+++ b/service/src/main/kotlin/fi/espoo/evaka/attendance/ChildAttendanceController.kt
@@ -182,7 +182,7 @@ class ChildAttendanceController(
 
     data class ArrivalsRequest(
         val children: Set<ChildId>,
-        @ForceCodeGenType(String::class) @DateTimeFormat(pattern = "HH:mm") val arrived: LocalTime,
+        @DateTimeFormat(pattern = "HH:mm") val arrived: LocalTime,
     )
 
     @PostMapping("/employee-mobile/attendances/units/{unitId}/arrivals")