From e3d9e09d37b73cd2c8ef63762c22a1ff6b4a57b7 Mon Sep 17 00:00:00 2001
From: maxn92 <maximilian.neser@accenture.com>
Date: Fri, 17 Oct 2025 14:16:39 +0200
Subject: [PATCH 1/2] feat: Highlighter

---
 .../components/src/entry-input-layout.tsx     | 14 +++------
 packages/components/src/highlighter.tsx       | 31 +++++++++++++++++++
 .../frontend/src/components/day-input.tsx     |  3 ++
 .../frontend/src/components/entries-input.tsx |  3 ++
 .../frontend/src/components/entry-input.tsx   |  3 ++
 packages/frontend/src/pages/archive-page.tsx  |  7 +++--
 .../frontend/src/pages/dashboard-page.tsx     |  1 +
 packages/frontend/src/pages/report-page.tsx   |  3 +-
 .../frontend/src/pages/report-review-page.tsx |  1 +
 packages/frontend/src/routes.tsx              |  1 +
 10 files changed, 55 insertions(+), 12 deletions(-)
 create mode 100644 packages/components/src/highlighter.tsx

diff --git a/packages/components/src/entry-input-layout.tsx b/packages/components/src/entry-input-layout.tsx
index 71a502a5..e615d4d4 100644
--- a/packages/components/src/entry-input-layout.tsx
+++ b/packages/components/src/entry-input-layout.tsx
@@ -4,6 +4,7 @@ import styled from 'styled-components'
 import { Spacings } from './spacing'
 import { FontSizes } from './font-size'
 import { BorderRadii } from './border-radius'
+import Highlighter from './highlighter'
 
 const ActionWrapper = styled.div`
   display: flex;
@@ -118,13 +119,6 @@ const TextWrapper = styled(ValueBase)`
   padding-left: 0;
 `
 
-const Text = styled.p`
-  margin: 0;
-  padding: 0;
-  white-space: pre-wrap;
-  word-break: break-word;
-`
-
 const Time = styled(ValueBase)`
   width: 100px;
   text-align: right;
@@ -193,17 +187,19 @@ interface EntryInputLayoutProps extends HTMLAttributes<HTMLElement>, EntryContai
   text: string
   time: string
   actions: JSX.Element
+  term: string
   clickHandler: React.Dispatch<React.SetStateAction<boolean>>
 }
 
-export const EntryInputLayout: React.FC<EntryInputLayoutProps> = ({ text, time, actions, clickHandler, ...rest }) => {
+export const EntryInputLayout: React.FC<EntryInputLayoutProps> = ({ text, time, actions, term, clickHandler, ...rest }) => {
+  console.log(term)
   return (
     <>
       <StyledEntryContainer {...rest}>
         <StyledEntryValueWrapper>
           <StyledInputWrapper onClick={() => clickHandler(true)}>
             <TextWrapper>
-              <Text>{text}</Text>
+              <Highlighter term={term}>{text}</Highlighter>
             </TextWrapper>
             <Time>{time}</Time>
           </StyledInputWrapper>
diff --git a/packages/components/src/highlighter.tsx b/packages/components/src/highlighter.tsx
new file mode 100644
index 00000000..347f46f8
--- /dev/null
+++ b/packages/components/src/highlighter.tsx
@@ -0,0 +1,31 @@
+
+interface highlighterProps {
+  term: string
+  children: string
+}
+
+const Highlighter: React.FC<highlighterProps> = ({term, children}) => {
+  if (!term) {
+    return (
+      <>{children}</>
+    )
+  }
+  const regex = new RegExp(`(${term})`, 'gi');
+  const parts = children.split(regex);
+  console.log(parts)
+
+  return(
+    <>
+    <div>test</div>
+      {parts.map((part: string, index: number)=> 
+        regex.test(part) ? (
+          <span key={index} style={{margin: 0, backgroundColor: "rgb(84 198 247)", padding: 0, whiteSpace: "pre-wrap", wordBreak: "break-word", fontWeight: "bold"}}>
+            {part}
+          </span>
+        ) : (part)
+      )}
+    </>
+  )
+}
+
+export default Highlighter
\ No newline at end of file
diff --git a/packages/frontend/src/components/day-input.tsx b/packages/frontend/src/components/day-input.tsx
index b9273672..8991bcad 100644
--- a/packages/frontend/src/components/day-input.tsx
+++ b/packages/frontend/src/components/day-input.tsx
@@ -66,6 +66,7 @@ interface DayInputProps {
   disabled?: boolean
   reportStatus?: ReportStatus
   primary?: boolean
+  term: string
   updateMessageDay?: (message: string, commentId: string) => void
   updateMessageEntry?: (
     message: string,
@@ -86,6 +87,7 @@ const DayInput: React.FunctionComponent<DayInputProps> = ({
   primary,
   updateMessageDay,
   updateMessageEntry,
+  term,
 }) => {
   const { getTotalMinutes } = useDayHelper()
   const { addToast } = useToastContext()
@@ -232,6 +234,7 @@ const DayInput: React.FunctionComponent<DayInputProps> = ({
       }
     >
       <EntriesInput
+        term={term}
         handleStatusChange={handleStatusChange}
         day={day}
         reportStatus={reportStatus ?? ReportStatus.Todo}
diff --git a/packages/frontend/src/components/entries-input.tsx b/packages/frontend/src/components/entries-input.tsx
index 3f78ed84..85755b06 100644
--- a/packages/frontend/src/components/entries-input.tsx
+++ b/packages/frontend/src/components/entries-input.tsx
@@ -20,6 +20,7 @@ import { useToastContext } from '../hooks/use-toast-context'
 import { useDayHelper } from '../helper/day-helper'
 
 interface EntriesInputProps {
+  term: string
   day?: Pick<Day, 'id' | 'date'> & {
     entries: (Pick<Entry, 'id' | 'text' | 'time' | 'orderId'> & {
       comments: (Pick<Comment, 'id' | 'text' | 'published'> & {
@@ -49,6 +50,7 @@ const EntriesInput: React.FC<EntriesInputProps> = ({
   handleStatusChange,
   trainee,
   updateMessage,
+  term,
 }) => {
   const [createEntryMutation] = useCreateEntryMutation()
   const { addToast } = useToastContext()
@@ -107,6 +109,7 @@ const EntriesInput: React.FC<EntriesInputProps> = ({
         .sort((a, b) => a.orderId - b.orderId)
         .map((entry) => (
           <EntryInput
+          term={term}
             handleStatusChange={handleStatusChange}
             key={entry.id}
             disabled={disabled}
diff --git a/packages/frontend/src/components/entry-input.tsx b/packages/frontend/src/components/entry-input.tsx
index 069de1a8..ff1e9111 100644
--- a/packages/frontend/src/components/entry-input.tsx
+++ b/packages/frontend/src/components/entry-input.tsx
@@ -53,6 +53,7 @@ interface EntryDisplayFieldProps {
   showContextMenu?: string
   setShowContextMenu?: React.Dispatch<React.SetStateAction<string>>
   updateMessage?: (message: string, commentId: string) => void
+  term: string
 }
 
 const EntryInput: React.FC<EntryDisplayFieldProps> = ({
@@ -65,6 +66,7 @@ const EntryInput: React.FC<EntryDisplayFieldProps> = ({
   showContextMenu,
   setShowContextMenu,
   updateMessage,
+  term,
 }) => {
   const { loading, data } = useEntryInputDataQuery()
 
@@ -301,6 +303,7 @@ const EntryInput: React.FC<EntryDisplayFieldProps> = ({
         <TextTimeInput autoFocus entry={entry} onDelete={handleDelete} onSave={handleSave} />
       ) : (
         <EntryInputLayout
+          term={term}
           clickable
           disabled={disabled}
           draggable={!disabled}
diff --git a/packages/frontend/src/pages/archive-page.tsx b/packages/frontend/src/pages/archive-page.tsx
index 3daf28d2..af33f76e 100644
--- a/packages/frontend/src/pages/archive-page.tsx
+++ b/packages/frontend/src/pages/archive-page.tsx
@@ -123,6 +123,7 @@ const ArchivePage: React.FunctionComponent = () => {
 
   const [allChecked, setAllChecked] = React.useState(false)
   const [selectedTrainee, setSelectedTrainee] = React.useState<string | undefined>(undefined)
+  const [term, setTerm] = React.useState<string | undefined>(undefined)
 
   const getArchivedReports = React.useCallback(() => {
     if (!data) return []
@@ -215,6 +216,8 @@ const ArchivePage: React.FunctionComponent = () => {
     let weekEnd: number | undefined = undefined
     let searchText: string | undefined = undefined
 
+    setTerm(value) 
+
     const yearMatch = yearMonthRegex.exec(value)
     if (yearMonthRegex.test(value) && yearMatch) {
       year = parseInt(yearMatch[1], 10)
@@ -346,8 +349,8 @@ const ArchivePage: React.FunctionComponent = () => {
 
                     const link =
                       data?.currentUser?.__typename === UserTypeEnum.Trainer
-                        ? `/report/${traineeId}/${year}/${week}`
-                        : `/report/${year}/${week}`
+                        ? `/report/${traineeId}/${year}/${week}/${term ? term: ""}`
+                        : `/report/${year}/${week}/${term ? term: ""}`
 
                     return (
                       <StyledArchiveTableRow key={report.id}>
diff --git a/packages/frontend/src/pages/dashboard-page.tsx b/packages/frontend/src/pages/dashboard-page.tsx
index 58ff6483..2394ed52 100644
--- a/packages/frontend/src/pages/dashboard-page.tsx
+++ b/packages/frontend/src/pages/dashboard-page.tsx
@@ -63,6 +63,7 @@ const DashboardPage: React.FunctionComponent = () => {
             <Container overflow={'visible'}>
               <DayInput
                 primary
+                term=""
                 heading={getTodayHeading()}
                 reportStatus={reportForYearAndWeek?.status}
                 day={day}
diff --git a/packages/frontend/src/pages/report-page.tsx b/packages/frontend/src/pages/report-page.tsx
index 7476ce5d..dd185f27 100644
--- a/packages/frontend/src/pages/report-page.tsx
+++ b/packages/frontend/src/pages/report-page.tsx
@@ -45,7 +45,7 @@ import { useReportHelper } from '../helper/report-helper'
 const ReportPage: React.FunctionComponent = () => {
   const navigate = useNavigate()
   const { getFinishedDays } = useReportHelper()
-  const { trainee, year, week } = useParams()
+  const { trainee, year, week, term } = useParams()
 
   const variables: ReportPageDataQueryVariables = {
     year: parseInt(year ?? '', 10),
@@ -282,6 +282,7 @@ const ReportPage: React.FunctionComponent = () => {
           {report?.days.map((day) => (
             <StyledTopBorderWrapper key={day.id}>
               <DayInput
+                term={term ? term : ""}
                 day={day}
                 disabled={reportArchived || reportReview || day.status === DayStatusEnum.Holiday}
                 reportStatus={report.status}
diff --git a/packages/frontend/src/pages/report-review-page.tsx b/packages/frontend/src/pages/report-review-page.tsx
index f6ccc306..ac2ad1cd 100644
--- a/packages/frontend/src/pages/report-review-page.tsx
+++ b/packages/frontend/src/pages/report-review-page.tsx
@@ -388,6 +388,7 @@ const ReportReviewPage: React.FunctionComponent = () => {
                       <>
                         {day.entries.map((entry, entryIndex) => (
                           <EntryInput
+                            term=""
                             key={entryIndex}
                             entry={entry}
                             day={day}
diff --git a/packages/frontend/src/routes.tsx b/packages/frontend/src/routes.tsx
index c4dd88b2..52266375 100644
--- a/packages/frontend/src/routes.tsx
+++ b/packages/frontend/src/routes.tsx
@@ -71,6 +71,7 @@ const AppRoutes: React.FunctionComponent<RoutesProps> = ({ currentUser }) => {
               <>
                 <Route path="/" element={<DashboardPage />} />
                 <Route path="/archive" element={<ArchivePage />} />
+                <Route path="/report/:year/:week/:term" element={<ReportPage />} />
                 <Route path="/report/:year/:week" element={<ReportPage />} />
                 <Route path="/report/missing" element={<MissingPage />} />
                 <Route path="/alexa" element={<AlexaPage />} />

From b6293265cd90c760b4d9805180a4f39406128b54 Mon Sep 17 00:00:00 2001
From: maxn92 <maximilian.neser@accenture.com>
Date: Fri, 17 Oct 2025 14:34:39 +0200
Subject: [PATCH 2/2] chore: Format

---
 .../components/src/entry-input-layout.tsx     |  9 ++++-
 packages/components/src/highlighter.tsx       | 35 ++++++++++++-------
 .../frontend/src/components/entries-input.tsx |  2 +-
 packages/frontend/src/pages/archive-page.tsx  |  6 ++--
 packages/frontend/src/pages/report-page.tsx   |  2 +-
 5 files changed, 35 insertions(+), 19 deletions(-)

diff --git a/packages/components/src/entry-input-layout.tsx b/packages/components/src/entry-input-layout.tsx
index e615d4d4..203f3a7f 100644
--- a/packages/components/src/entry-input-layout.tsx
+++ b/packages/components/src/entry-input-layout.tsx
@@ -191,7 +191,14 @@ interface EntryInputLayoutProps extends HTMLAttributes<HTMLElement>, EntryContai
   clickHandler: React.Dispatch<React.SetStateAction<boolean>>
 }
 
-export const EntryInputLayout: React.FC<EntryInputLayoutProps> = ({ text, time, actions, term, clickHandler, ...rest }) => {
+export const EntryInputLayout: React.FC<EntryInputLayoutProps> = ({
+  text,
+  time,
+  actions,
+  term,
+  clickHandler,
+  ...rest
+}) => {
   console.log(term)
   return (
     <>
diff --git a/packages/components/src/highlighter.tsx b/packages/components/src/highlighter.tsx
index 347f46f8..838eb51f 100644
--- a/packages/components/src/highlighter.tsx
+++ b/packages/components/src/highlighter.tsx
@@ -1,31 +1,40 @@
-
 interface highlighterProps {
   term: string
   children: string
 }
 
-const Highlighter: React.FC<highlighterProps> = ({term, children}) => {
+const Highlighter: React.FC<highlighterProps> = ({ term, children }) => {
   if (!term) {
-    return (
-      <>{children}</>
-    )
+    return <>{children}</>
   }
-  const regex = new RegExp(`(${term})`, 'gi');
-  const parts = children.split(regex);
+  const regex = new RegExp(`(${term})`, 'gi')
+  const parts = children.split(regex)
   console.log(parts)
 
-  return(
+  return (
     <>
-    <div>test</div>
-      {parts.map((part: string, index: number)=> 
+      <div>test</div>
+      {parts.map((part: string, index: number) =>
         regex.test(part) ? (
-          <span key={index} style={{margin: 0, backgroundColor: "rgb(84 198 247)", padding: 0, whiteSpace: "pre-wrap", wordBreak: "break-word", fontWeight: "bold"}}>
+          <span
+            key={index}
+            style={{
+              margin: 0,
+              backgroundColor: 'rgb(84 198 247)',
+              padding: 0,
+              whiteSpace: 'pre-wrap',
+              wordBreak: 'break-word',
+              fontWeight: 'bold',
+            }}
+          >
             {part}
           </span>
-        ) : (part)
+        ) : (
+          part
+        )
       )}
     </>
   )
 }
 
-export default Highlighter
\ No newline at end of file
+export default Highlighter
diff --git a/packages/frontend/src/components/entries-input.tsx b/packages/frontend/src/components/entries-input.tsx
index 85755b06..96b8192c 100644
--- a/packages/frontend/src/components/entries-input.tsx
+++ b/packages/frontend/src/components/entries-input.tsx
@@ -109,7 +109,7 @@ const EntriesInput: React.FC<EntriesInputProps> = ({
         .sort((a, b) => a.orderId - b.orderId)
         .map((entry) => (
           <EntryInput
-          term={term}
+            term={term}
             handleStatusChange={handleStatusChange}
             key={entry.id}
             disabled={disabled}
diff --git a/packages/frontend/src/pages/archive-page.tsx b/packages/frontend/src/pages/archive-page.tsx
index af33f76e..1357706c 100644
--- a/packages/frontend/src/pages/archive-page.tsx
+++ b/packages/frontend/src/pages/archive-page.tsx
@@ -216,7 +216,7 @@ const ArchivePage: React.FunctionComponent = () => {
     let weekEnd: number | undefined = undefined
     let searchText: string | undefined = undefined
 
-    setTerm(value) 
+    setTerm(value)
 
     const yearMatch = yearMonthRegex.exec(value)
     if (yearMonthRegex.test(value) && yearMatch) {
@@ -349,8 +349,8 @@ const ArchivePage: React.FunctionComponent = () => {
 
                     const link =
                       data?.currentUser?.__typename === UserTypeEnum.Trainer
-                        ? `/report/${traineeId}/${year}/${week}/${term ? term: ""}`
-                        : `/report/${year}/${week}/${term ? term: ""}`
+                        ? `/report/${traineeId}/${year}/${week}/${term ? term : ''}`
+                        : `/report/${year}/${week}/${term ? term : ''}`
 
                     return (
                       <StyledArchiveTableRow key={report.id}>
diff --git a/packages/frontend/src/pages/report-page.tsx b/packages/frontend/src/pages/report-page.tsx
index dd185f27..0d22bffa 100644
--- a/packages/frontend/src/pages/report-page.tsx
+++ b/packages/frontend/src/pages/report-page.tsx
@@ -282,7 +282,7 @@ const ReportPage: React.FunctionComponent = () => {
           {report?.days.map((day) => (
             <StyledTopBorderWrapper key={day.id}>
               <DayInput
-                term={term ? term : ""}
+                term={term ? term : ''}
                 day={day}
                 disabled={reportArchived || reportReview || day.status === DayStatusEnum.Holiday}
                 reportStatus={report.status}