front: create occurrence item

front/src/modules/trainschedule/components/Timetable/PacedTrain/OccurrenceItem.tsx

@@ -0,0 +1,77 @@
+import { Dot, Moon } from '@osrd-project/ui-icons';
+import cx from 'classnames';
+import dayjs from 'dayjs';
+
+import RollingStock2Img from 'modules/rollingStock/components/RollingStock2Img';
+
+import type { Occurrence } from '../types';
+
+const ConsecutiveDayDateDisplay = ({
+  departureTime,
+  nextDepartureTime,
+}: {
+  departureTime: Date;
+  nextDepartureTime: Date;
+}) => (
+  <div className="consecutive-day-display">
+    <div>
+      <div className="date-display before-midnight">{dayjs(departureTime).format('DD')}</div>
+      <div className="date-display after-midnight">{dayjs(nextDepartureTime).format('DD')}</div>
+    </div>
+    <div className="date-display">/{dayjs(nextDepartureTime).format('MM')}</div>
+  </div>
+);
+
+type OccurrenceItemProps = {
+  occurrence: Occurrence;
+  isSelected: boolean;
+  nextOccurrence?: Occurrence;
+};
+
+const OccurrenceItem = ({ occurrence, isSelected, nextOccurrence }: OccurrenceItemProps) => {
+  const { trainName, rollingStock, startTime, arrivalTime } = occurrence;
+  const isAfterMidnight = dayjs(occurrence.arrivalTime).isAfter(occurrence.startTime, 'day');
+  const isNextAfterMidnight = nextOccurrence
+    ? dayjs(nextOccurrence.startTime).isAfter(occurrence.startTime, 'day')
+    : false;
+
+  return (
+    <div
+      className={cx('occurrence-item', {
+        'after-midnight': isAfterMidnight,
+        'next-after-midnight': isNextAfterMidnight,
+        selected: isSelected,
+      })}
+    >
+      <div className="occurrence-item-dot">
+        <Dot variant="fill" />
+      </div>
+      <div className="occurrence-item-name" title={trainName}>
+        {trainName}
+      </div>
+      <div className="rolling-stock">
+        {rollingStock && <RollingStock2Img rollingStock={rollingStock} />}
+      </div>
+
+      <div className="occurrence-item-horaries">
+        <div className="status-icon after-midnight">
+          {isAfterMidnight && <Moon iconColor="rgba(33, 100, 130, 0.7)" />}
+        </div>
+        <div className="occurrence-item-time departure-time">
+          {dayjs(startTime).format('HH:mm')}
+        </div>
+        <div className="occurrence-item-time arrival-time">
+          {dayjs(arrivalTime).format('HH:mm')}
+        </div>
+      </div>
+      {nextOccurrence && isNextAfterMidnight && (
+        <ConsecutiveDayDateDisplay
+          departureTime={startTime}
+          nextDepartureTime={nextOccurrence?.startTime}
+        />
+      )}
+    </div>
+  );
+};
+
+export default OccurrenceItem;

front/src/modules/trainschedule/components/Timetable/PacedTrain/PacedTrainItem.tsx

@@ -6,11 +6,13 @@ import cx from 'classnames';
 import dayjs from 'dayjs';
 import { useTranslation } from 'react-i18next';
 
-import type { PacedTrainId } from 'reducers/osrdconf/types';
+import type { PacedTrainId, TrainId } from 'reducers/osrdconf/types';
 import { ms2min } from 'utils/timeManipulation';
 
 import TimetableItemActions from '../TimetableItemActions';
 import type { PacedTrainWithResult } from '../types';
+import useOccurrences from './hooks/useOccurrences';
+import OccurrenceItem from './OccurrenceItem';
 
 type PacedTrainItemProps = {
   isInSelection: boolean;
@@ -19,6 +21,7 @@ type PacedTrainItemProps = {
   isOnEdit: boolean;
   isProjectionPathUsed: boolean;
   selectPacedTrainToEdit: (pacedTrain: PacedTrainWithResult) => void;
+  selectedTimeTableItemId: TrainId | undefined;
 };
 
 const PacedTrainItem = ({
@@ -28,19 +31,18 @@ const PacedTrainItem = ({
   isOnEdit,
   isProjectionPathUsed,
   selectPacedTrainToEdit,
+  selectedTimeTableItemId,
 }: PacedTrainItemProps) => {
   const { t } = useTranslation(['operationalStudies/scenario']);
 
   const [isOccurrencesListOpen, setIsOccurrencesListOpen] = useState(false);
+  const { occurrences, occurrencesCount } = useOccurrences(pacedTrain);
 
   const toggleOccurrencesList = () => setIsOccurrencesListOpen((open) => !open);
   const selectPathProjection = async () => {};
   const duplicatePacedTrain = async () => {};
   const deletePacedTrain = async () => {};
 
-  const pacedTrainCadence = pacedTrain.paced.step;
-
-  const occurrencesCount = Math.ceil(pacedTrain.paced.duration.ms / pacedTrain.paced.step.ms);
   return (
     <div
       data-testid="scenario-timetable-train"
@@ -92,7 +94,9 @@ const PacedTrainItem = ({
 
         {!pacedTrain.invalidReason ? (
           <div className="paced-train-right-zone">
-            {pacedTrain.isValid && <div>&mdash;&nbsp;{`${ms2min(pacedTrainCadence.ms)}min`}</div>}
+            {pacedTrain.isValid && (
+              <div>&mdash;&nbsp;{`${ms2min(pacedTrain.paced.step.ms)}min`}</div>
+            )}
             <div
               className={cx('status-icon', {
                 'not-honored-or-too-fast': pacedTrain.notHonoredReason,
@@ -120,7 +124,16 @@ const PacedTrainItem = ({
         editTimetableItem={() => selectPacedTrainToEdit(pacedTrain)}
         deleteTimetableItem={deletePacedTrain}
       />
-      <div className="occurrences" />
+      <div className="occurrences">
+        {occurrences.map((occurrence, index) => (
+          <OccurrenceItem
+            occurrence={occurrence}
+            key={occurrence.id}
+            isSelected={selectedTimeTableItemId === occurrence.id}
+            nextOccurrence={occurrences[index + 1]}
+          />
+        ))}
+      </div>
       {pacedTrain.isValid && (
         <div className="more-info">
           <div className="more-info-left">

front/src/modules/trainschedule/components/Timetable/PacedTrain/hooks/useOccurrences.spec.ts

@@ -0,0 +1,15 @@
+import { describe, it, expect } from 'vitest';
+
+import { computeOccurrenceName } from './useOccurrences';
+
+describe('computeOccurrenceName', () => {
+  it('should properly compute occurrence name', () => {
+    expect(computeOccurrenceName('trainName', 0)).toEqual('trainName 1');
+    expect(computeOccurrenceName('trainName 1', 1)).toEqual('trainName 3');
+    expect(computeOccurrenceName('trainName-2 3', 3)).toEqual('trainName-2 9');
+    expect(computeOccurrenceName('trainName-2', 3)).toEqual('trainName-2 7');
+    expect(computeOccurrenceName('12345', 2)).toEqual('12349');
+    expect(computeOccurrenceName('12345 1', 2)).toEqual('12345 5');
+    expect(computeOccurrenceName('1', 2)).toEqual('5');
+  });
+});

front/src/modules/trainschedule/components/Timetable/PacedTrain/hooks/useOccurrences.tsx

@@ -0,0 +1,60 @@
+import { useMemo } from 'react';
+
+import dayjs from 'dayjs';
+
+import type { OccurrenceId } from 'reducers/osrdconf/types';
+
+import type { Occurrence, PacedTrainWithResult } from '../../types';
+
+export const computeOccurrenceName = (pacedTrainName: string, index: number): string => {
+  const endByNumber = /\b\w+\s\d+$/;
+
+  if (endByNumber.test(pacedTrainName)) {
+    const endOfPacedTrainName = Number(pacedTrainName.split(' ').pop());
+    return `${pacedTrainName.replace(/\s\d+$/, '')} ${endOfPacedTrainName + 2 * index}`;
+  }
+  if (!Number.isNaN(+pacedTrainName)) {
+    return `${+pacedTrainName + 2 * index}`;
+  }
+  return `${pacedTrainName} ${2 * index + 1}`;
+};
+
+type OccurrencesState = {
+  occurrences: Occurrence[];
+  occurrencesCount: number;
+};
+
+const useOccurrences = ({
+  id,
+  paced,
+  startTime,
+  arrivalTime,
+  trainName,
+  rollingStock,
+}: PacedTrainWithResult) => {
+  const occurrencesState = useMemo<OccurrencesState>(() => {
+    const occurrencesCount = Math.ceil(paced.duration.ms / paced.step.ms);
+    const computedOccurrences: Occurrence[] = [];
+
+    for (let i = 0; i < occurrencesCount; i += 1) {
+      const occurrenceStartTime = dayjs(startTime)
+        .add(i * paced.step.ms, 'ms')
+        .toDate();
+      const occurrenceArrivalTime = dayjs(arrivalTime)
+        .add(i * paced.step.ms, 'ms')
+        .toDate();
+      computedOccurrences.push({
+        id: `occurrence-${i}-${id}` as OccurrenceId,
+        trainName: computeOccurrenceName(trainName, i),
+        rollingStock,
+        startTime: occurrenceStartTime,
+        arrivalTime: occurrenceArrivalTime,
+      });
+    }
+    return { occurrencesCount, occurrences: computedOccurrences };
+  }, [paced.duration, paced.step, startTime, arrivalTime, trainName, id, rollingStock]);
+
+  return occurrencesState;
+};
+
+export default useOccurrences;

front/src/modules/trainschedule/components/Timetable/Timetable.tsx

@@ -145,8 +145,8 @@ const Timetable = ({
               trainName: 'Paced train 1',
               labels: ['Paced-Train-Tag-1'],
               paced: {
-                duration: Duration.parse('PT2H'),
-                step: Duration.parse('PT30M'),
+                duration: Duration.parse('PT72H'),
+                step: Duration.parse('PT7H'),
               },
             },
             {
@@ -249,6 +249,7 @@ const Timetable = ({
                   handleSelectPacedTrain={handleSelectTimetableItem}
                   isOnEdit={timetableItem.id === itemIdToEdit}
                   isProjectionPathUsed={false}
+                  selectedTimeTableItemId={selectedTrainId}
                 />
               )}
             </div>

front/src/modules/trainschedule/components/Timetable/types.ts

@@ -5,7 +5,7 @@ import type {
   SimulationSummaryResult,
   TrainScheduleResult,
 } from 'common/api/osrdEditoastApi';
-import type { PacedTrainId, TrainScheduleId } from 'reducers/osrdconf/types';
+import type { OccurrenceId, PacedTrainId, TrainScheduleId } from 'reducers/osrdconf/types';
 import type { Duration } from 'utils/duration';
 
 export type ValidityFilter = 'both' | 'valid' | 'invalid';
@@ -77,3 +77,11 @@ export type TimetableFilters = {
   selectedTags: Set<string | null>;
   setSelectedTags: React.Dispatch<React.SetStateAction<Set<string | null>>>;
 };
+
+export type Occurrence = {
+  id: OccurrenceId;
+  trainName: string;
+  rollingStock?: LightRollingStockWithLiveries;
+  startTime: Date;
+  arrivalTime: Date;
+};

front/src/styles/scss/_variables.scss

@@ -42,6 +42,7 @@ $colors: (
   'black5': rgba(0, 0, 0, 0.05),
   'black10': rgba(0, 0, 0, 0.1),
   'black25': rgba(0, 0, 0, 0.25),
+  'black50': rgba(0, 0, 0, 0.5),
   'black100': #000000,
   'error5': #ffeeed,
   'error30': #ff6868,