IFRCGo · samshara · Dec 11, 2023 · Dec 1, 2023
diff --git a/src/components/DateOutput/index.tsx b/src/components/DateOutput/index.tsx
@@ -1,12 +1,12 @@
 import { useMemo } from 'react';
 import { _cs } from '@togglecorp/fujs';
-import { formatDate } from '#utils/common';
+import { DateLike, formatDate } from '#utils/common';
 
 import styles from './styles.module.css';
 
 export interface Props {
     className?: string;
-    value?: string | number | null;
+    value: DateLike | undefined | null;
     format?: string;
     invalidText?: React.ReactNode;
 }

diff --git a/src/components/Table/ColumnShortcuts/TimelineHeader/index.tsx b/src/components/Table/ColumnShortcuts/TimelineHeader/index.tsx
@@ -0,0 +1,43 @@
+import DateOutput from '#components/DateOutput';
+import { _cs } from '@togglecorp/fujs';
+
+import HeaderCell, { HeaderCellProps } from '../../HeaderCell';
+
+import styles from './styles.module.css';
+
+export interface Props extends HeaderCellProps {
+    className?: string;
+    dateRange: {
+        start: Date,
+        end: Date,
+    } | undefined;
+}
+
+function TimelineHeader(props: Props) {
+    const {
+        className,
+        dateRange,
+        ...otherProps
+    } = props;
+
+    return (
+        <HeaderCell
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...otherProps}
+            className={_cs(styles.timelineHeader, className)}
+            titleClassName={styles.title}
+            title={(
+                <>
+                    <DateOutput
+                        value={dateRange?.start}
+                    />
+                    <DateOutput
+                        value={dateRange?.end}
+                    />
+                </>
+            )}
+        />
+    );
+}
+
+export default TimelineHeader;
diff --git a/src/components/Table/ColumnShortcuts/TimelineHeader/styles.module.css b/src/components/Table/ColumnShortcuts/TimelineHeader/styles.module.css
@@ -0,0 +1,7 @@
+.timeline-header {
+    .title {
+        display: flex;
+        flex-grow: 1;
+        justify-content: space-between;
+    }
+}
diff --git a/src/components/Table/ColumnShortcuts/TimelineItem/index.tsx b/src/components/Table/ColumnShortcuts/TimelineItem/index.tsx
@@ -0,0 +1,88 @@
+import { _cs, isNotDefined } from '@togglecorp/fujs';
+
+import Tooltip from '#components/Tooltip';
+import TextOutput from '#components/TextOutput';
+
+import { type DateLike, isValidDate } from '#utils/common';
+
+import styles from './styles.module.css';
+
+export interface Props {
+    className?: string;
+    startDate: DateLike | null | undefined;
+    endDate: DateLike | null | undefined;
+    dateRange: {
+        start: Date,
+        end: Date,
+    } | undefined;
+}
+
+function TimelineItem(props: Props) {
+    const {
+        className,
+        startDate,
+        endDate,
+        dateRange,
+    } = props;
+
+    if (isNotDefined(dateRange)) {
+        return null;
+    }
+
+    if (!isValidDate(startDate)) {
+        return null;
+    }
+
+    if (!isValidDate(endDate)) {
+        return null;
+    }
+
+    const domainWidth = dateRange.end.getTime() - dateRange.start.getTime();
+
+    const start = 1 - (dateRange.end.getTime() - new Date(startDate).getTime()) / domainWidth;
+    const end = (dateRange.end.getTime() - new Date(endDate).getTime()) / domainWidth;
+
+    const today = 1 - (dateRange.end.getTime() - new Date().getTime()) / domainWidth;
+
+    return (
+        <>
+            <div className={_cs(styles.timelineItem, className)}>
+                <div className={styles.startDateMarker} />
+                <div className={styles.endDateMarker} />
+                <div
+                    className={styles.todayMarker}
+                    style={{
+                        left: `${100 * today}%`,
+                    }}
+                />
+                <div
+                    className={styles.timelineProgress}
+                    style={{
+                        left: `${100 * start}%`,
+                        right: `${100 * end}%`,
+                    }}
+                />
+            </div>
+            <Tooltip
+                description={(
+                    <>
+                        <TextOutput
+                            valueType="date"
+                            // FIXME: use translation
+                            label="Start Date"
+                            value={startDate}
+                        />
+                        <TextOutput
+                            // FIXME: use translation
+                            label="End Date"
+                            value={endDate}
+                            valueType="date"
+                        />
+                    </>
+                )}
+            />
+        </>
+    );
+}
+
+export default TimelineItem;
diff --git a/src/components/Table/ColumnShortcuts/TimelineItem/styles.module.css b/src/components/Table/ColumnShortcuts/TimelineItem/styles.module.css
@@ -0,0 +1,36 @@
+.timeline-item {
+    position: absolute;
+    top: 0;
+    left: var(--go-ui-spacing-sm);
+    width: calc(100% - 2 * var(--go-ui-spacing-sm));
+    height: 100%;
+
+    .timeline-progress {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        border-radius: 0.25em;
+        background-color: var(--go-ui-color-primary-red);
+        height: 0.5rem;
+    }
+
+    .today-marker {
+        position: absolute;
+        border-left: var(--go-ui-width-separator-sm) dashed var(--go-ui-color-primary-blue);
+        height: 100%;
+    }
+
+    .start-date-marker {
+        position: absolute;
+        left: 0;
+        border-left: var(--go-ui-width-separator-sm) dashed var(--go-ui-color-separator);
+        height: 100%;
+    }
+
+    .end-date-marker {
+        position: absolute;
+        right: 0;
+        border-left: var(--go-ui-width-separator-sm) dashed var(--go-ui-color-separator);
+        height: 100%;
+    }
+}
diff --git a/src/components/Table/ColumnShortcuts/index.ts b/src/components/Table/ColumnShortcuts/index.ts
@@ -7,21 +7,13 @@ import {
     randomString,
 } from '@togglecorp/fujs';
 
-import DateOutput from '#components/DateOutput';
-import { type Props as DateOutputProps } from '#components/DateOutput';
-import DateRangeOutput from '#components/DateRangeOutput';
-import { type Props as DateRangeOutputProps } from '#components/DateRangeOutput';
-import NumberOutput from '#components/NumberOutput';
-import { type Props as NumberOutputProps } from '#components/NumberOutput';
-import BooleanOutput from '#components/BooleanOutput';
-import { type Props as BooleanOutputProps } from '#components/BooleanOutput';
-import ProgressBar from '#components/ProgressBar';
-import { type Props as ProgressBarProps } from '#components/ProgressBar';
-import ReducedListDisplay, {
-    Props as ReducedListDisplayProps,
-} from '#components/ReducedListDisplay';
-import { type Props as LinkProps } from '#components/Link';
-import Link from '#components/Link';
+import DateOutput, { type Props as DateOutputProps } from '#components/DateOutput';
+import DateRangeOutput, { type Props as DateRangeOutputProps } from '#components/DateRangeOutput';
+import NumberOutput, { type Props as NumberOutputProps } from '#components/NumberOutput';
+import BooleanOutput, { type Props as BooleanOutputProps } from '#components/BooleanOutput';
+import ProgressBar, { type Props as ProgressBarProps } from '#components/ProgressBar';
+import ReducedListDisplay, { Props as ReducedListDisplayProps } from '#components/ReducedListDisplay';
+import Link, { type Props as LinkProps } from '#components/Link';
 import { numericIdSelector } from '#utils/selectors';
 import { type GoApiResponse } from '#utils/restRequest';
 
@@ -38,6 +30,8 @@ import { type ExpandButtonProps } from './ExpandButton';
 import ExpansionIndicator from './ExpansionIndicator';
 import { type Props as ExpansionIndicatorProps } from './ExpansionIndicator';
 import CountryLink from './CountryLink';
+import TimelineItem, { type Props as TimelineItemProps } from './TimelineItem';
+import TimelineHeader, { type Props as TimelineHeaderProps } from './TimelineHeader';
 
 import type { Props as CountryLinkProps } from './CountryLink';
 import RegionLink from './RegionLink';
@@ -383,10 +377,10 @@ export function createExpandColumn<D, K>(
     return item;
 }
 
-export function createExpansionIndicatorColumn<D, K>(
+export function createExpansionIndicatorColumn<DATUM, KEY>(
     isExpanded?: boolean,
 ) {
-    const item: Column<D, K, ExpansionIndicatorProps, HeaderCellProps> = {
+    const item: Column<DATUM, KEY, ExpansionIndicatorProps, HeaderCellProps> = {
         id: randomString(),
         title: '',
         headerCellRenderer: HeaderCell,
@@ -417,14 +411,14 @@ export function createExpansionIndicatorColumn<D, K>(
     return item;
 }
 
-export function createElementColumn<DATA, KEY, ELEMENT_PROPS>(
+export function createElementColumn<DATUM, KEY, ELEMENT_PROPS>(
     id: string,
     title: string,
     renderer: React.ComponentType<ELEMENT_PROPS>,
-    rendererParams: (key: KEY, datum: DATA) => ELEMENT_PROPS,
-    options?: Options<DATA, KEY, ELEMENT_PROPS, HeaderCellProps>,
+    rendererParams: (key: KEY, datum: DATUM) => ELEMENT_PROPS,
+    options?: Options<DATUM, KEY, ELEMENT_PROPS, HeaderCellProps>,
 ) {
-    const item: Column<DATA, KEY, ELEMENT_PROPS, HeaderCellProps> = {
+    const item: Column<DATUM, KEY, ELEMENT_PROPS, HeaderCellProps> = {
         id,
         title,
         headerCellRenderer: HeaderCell,
@@ -446,12 +440,50 @@ export function createElementColumn<DATA, KEY, ELEMENT_PROPS>(
     return item;
 }
 
-export function createActionColumn<D, K>(
+export function createTimelineColumn<DATUM, KEY>(
     id: string,
-    rendererParams: (datum: D) => TableActionsProps,
-    options?: Options<D, K, TableActionsProps, HeaderCellProps>,
+    dateRange: {
+        start: Date,
+        end: Date,
+    } | undefined,
+    rendererParams: (datum: DATUM) => Omit<TimelineItemProps, 'dateRange'>,
+    options?: Options<DATUM, KEY, TableActionsProps, HeaderCellProps>,
+) {
+    const item: Column<DATUM, KEY, TimelineItemProps, TimelineHeaderProps> = {
+        id,
+        title: '',
+        headerCellRenderer: TimelineHeader,
+        headerCellRendererParams: {
+            dateRange,
+            sortable: options?.sortable,
+        },
+        cellRenderer: TimelineItem,
+        cellRendererParams: (_, datum) => ({
+            dateRange,
+            ...rendererParams(datum),
+        }),
+        headerContainerClassName: options?.headerContainerClassName,
+        cellRendererClassName: options?.cellRendererClassName,
+        columnClassName: options?.columnClassName,
+        headerCellRendererClassName: options?.headerCellRendererClassName,
+        cellContainerClassName: _cs(
+            options?.cellContainerClassName,
+            styles.timelineCellContainer,
+        ),
+        columnWidth: options?.columnWidth,
+        columnStretch: options?.columnStretch,
+        columnStyle: options?.columnStyle,
+    };
+
+    return item;
+}
+
+export function createActionColumn<DATUM, KEY>(
+    id: string,
+    rendererParams: (datum: DATUM) => TableActionsProps,
+    options?: Options<DATUM, KEY, TableActionsProps, HeaderCellProps>,
 ) {
-    const item: Column<D, K, TableActionsProps, HeaderCellProps> = {
+    const item: Column<DATUM, KEY, TableActionsProps, HeaderCellProps> = {
         id,
         title: '',
         headerCellRenderer: HeaderCell,

diff --git a/src/components/Table/ColumnShortcuts/styles.module.css b/src/components/Table/ColumnShortcuts/styles.module.css
@@ -5,3 +5,7 @@
 .expansion-indicator-cell-container {
     position: relative;
 }
+
+.timeline-cell-container {
+    position: relative;
+}
diff --git a/src/components/Table/types.ts b/src/components/Table/types.ts
@@ -6,7 +6,7 @@ export interface BaseHeader {
     name: string;
     index: number;
 
-    title?: string;
+    title?: React.ReactNode;
 }
 
 export interface BaseCell {

diff --git a/src/utils/common.ts b/src/utils/common.ts
@@ -373,16 +373,10 @@ export function formatNumber(
     return newValue;
 }
 
+export type DateLike = string | number | Date;
+
 export function formatDate(
-    value: null | undefined,
-    format?: string,
-): undefined;
-export function formatDate(
-    value: Date | string | number,
-    format?: string,
-): string | undefined;
-export function formatDate(
-    value: Date | string | number | null | undefined,
+    value: DateLike | null | undefined,
     format = DEFAULT_DATE_FORMAT,
 ) {
     if (isNotDefined(value)) {
@@ -668,3 +662,19 @@ export function addNumMonthsToDate(
 
     return dateSafe;
 }
+
+export function isValidDate<T extends DateLike>(
+    value: T | null | undefined,
+): value is T {
+    if (isNotDefined(value)) {
+        return false;
+    }
+
+    const date = new Date(value);
+
+    if (Number.isNaN(date.getTime())) {
+        return false;
+    }
+
+    return true;
+}
diff --git a/src/views/EmergencySurge/RapidResponsePerosnnelTable/i18n.json b/src/views/EmergencySurge/RapidResponsePerosnnelTable/i18n.json
@@ -3,8 +3,6 @@
     "strings": {
         "rapidResponseTitle": "Rapid Response Personnel",
         "rapidResponse": "Rapid Response",
-        "personnelTableStartDate": "Start Date",
-        "personnelTableEndDate": "End Date",
         "personnelTableName": "Name",
         "personnelTablePosition": "Position",
         "personnelTableType": "Type",