Timespan component

app/src/App/routes/index.tsx

@@ -319,6 +319,50 @@ const emergencyAdditionalInfo = customWrapRoute({
     },
 });
 
+type DefaultDrefDetailChild = 'dref-detail';
+const drefProcessLayout = customWrapRoute({
+    parent: rootLayout,
+    path: 'dref-process',
+    forwardPath: 'dref-detail' satisfies DefaultDrefDetailChild,
+    component: {
+        render: () => import('#views/DrefProcess'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'DREF Process',
+        visibility: 'anything',
+    },
+});
+
+const drefDetail = customWrapRoute({
+    parent: drefProcessLayout,
+    path: 'dref-detail' satisfies DefaultDrefDetailChild,
+    component: {
+        render: () => import('#views/DrefDetail'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'Response and Imminent DREF',
+        visibility: 'anything',
+    },
+});
+
+const eapDetail = customWrapRoute({
+    parent: drefProcessLayout,
+    path: 'eap-detail',
+    component: {
+        render: () => import('#views/EarlyActionProtocols'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'Early Action Protocols',
+        visibility: 'anything',
+    },
+});
+
 type DefaultPreparednessChild = 'global-summary';
 const preparednessLayout = customWrapRoute({
     parent: rootLayout,
@@ -715,6 +759,50 @@ const accountMyFormsThreeW = customWrapRoute({
     },
 });
 
+const accountMyFormsEap = customWrapRoute({
+    parent: accountMyFormsLayout,
+    path: 'eap-applications',
+    component: {
+        render: () => import('#views/AccountMyFormsEap'),
+        props: {},
+    },
+    context: {
+        title: 'Account - EAP Applications',
+        visibility: 'is-authenticated',
+        permissions: ({ isGuestUser }) => !isGuestUser,
+    },
+});
+
+const eapFullForm = customWrapRoute({
+    parent: rootLayout,
+    path: 'eap-full-form',
+    component: {
+        render: () => import('#views/EapFullForm'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'EAP Full Forms',
+        visibility: 'is-authenticated',
+        permissions: ({ isGuestUser }) => !isGuestUser,
+    },
+});
+
+const simplifiedEapForm = customWrapRoute({
+    parent: rootLayout,
+    path: 'simplified-eap-form',
+    component: {
+        render: () => import('#views/SimplifiedEapForm'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'Simplified EAP Forms',
+        visibility: 'is-authenticated',
+        permissions: ({ isGuestUser }) => !isGuestUser,
+    },
+});
+
 const accountNotifications = customWrapRoute({
     parent: accountLayout,
     path: 'notifications',
@@ -1094,6 +1182,51 @@ const fieldReportDetails = customWrapRoute({
     },
 });
 
+type DefaultEapRegistrationChild = 'new';
+const eapRegistrationLayout = customWrapRoute({
+    parent: rootLayout,
+    path: 'eap-registration',
+    forwardPath: 'new' satisfies DefaultEapRegistrationChild,
+    component: {
+        render: () => import('#views/EapRegistration'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'EAP Process',
+        visibility: 'is-authenticated',
+    },
+});
+
+const newEapDevelopmentRegistration = customWrapRoute({
+    parent: eapRegistrationLayout,
+    path: 'new' satisfies DefaultEapRegistrationChild,
+    component: {
+        render: () => import('#views/EapRegistration'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'New EAP Development Registration',
+        visibility: 'is-authenticated',
+        permissions: ({ isGuestUser }) => !isGuestUser,
+    },
+});
+
+const eapDevelopmentRegistrationForm = customWrapRoute({
+    parent: eapRegistrationLayout,
+    path: ':eapId/',
+    component: {
+        render: () => import('#views/EapRegistration'),
+        props: {},
+    },
+    wrapperComponent: Auth,
+    context: {
+        title: 'View EAP',
+        visibility: 'is-authenticated',
+    },
+});
+
 type DefaultPerProcessChild = 'new';
 const perProcessLayout = customWrapRoute({
     parent: rootLayout,
@@ -1317,6 +1450,7 @@ const wrappedRoutes = {
     accountMyFormsPer,
     accountMyFormsDref,
     accountMyFormsThreeW,
+    accountMyFormsEap,
     resources,
     search,
     allThreeWProject,
@@ -1353,6 +1487,9 @@ const wrappedRoutes = {
     termsAndConditions,
     operationalLearning,
     montandonLandingPage,
+    newEapDevelopmentRegistration,
+    eapFullForm,
+    simplifiedEapForm,
     ...regionRoutes,
     ...countryRoutes,
     ...surgeRoutes,
@@ -1363,6 +1500,11 @@ const wrappedRoutes = {
     // Redirects
     preparednessOperationalLearning,
     obsoleteFieldReportDetails,
+    drefDetail,
+    eapDetail,
+    drefProcessLayout,
+    eapRegistrationLayout,
+    eapDevelopmentRegistrationForm,
 };
 
 export const unwrappedRoutes = unwrapRoute(Object.values(wrappedRoutes));

app/src/components/Navbar/i18n.json

@@ -40,6 +40,7 @@
         "userMenuDrefProcessDescription":"Disaster Response Emergency Fund (DREF) is the quickest way of getting funding directly to local humanitarian actors. Use one of the links below to submit a DREF Application or an update.",
         "userMenuCreateDrefApplication":"Create DREF Application",
         "myDrefApplications": "My DREF Applications",
+        "earlyActionProtocols": "Early Action Protocols (EAP)",
         "userMenuSurge":"The section displays the summary of deployments within current and ongoing emergencies. Login to see available details",
         "userMenuSurgeGlobalOverview":"Surge Global Overview",
         "userMenuOperationalToolbox":"Operational Toolbox",

app/src/components/Navbar/index.tsx

@@ -368,12 +368,20 @@ function Navbar(props: Props) {
                                         </Description>
                                         <DropdownMenuItem
                                             type="link"
-                                            to="accountMyFormsDref"
+                                            to="drefDetail"
                                             styleVariant="action"
                                             withoutFullWidth
                                         >
                                             {strings.myDrefApplications}
                                         </DropdownMenuItem>
+                                        <DropdownMenuItem
+                                            type="link"
+                                            to="eapDetail"
+                                            styleVariant="action"
+                                            withoutFullWidth
+                                        >
+                                            {strings.earlyActionProtocols}
+                                        </DropdownMenuItem>
                                         <DropdownMenuItem
                                             type="link"
                                             to="newDrefApplicationForm"

app/src/components/TimespanInput/i18n.json

@@ -0,0 +1,7 @@
+{
+    "namespace": "common",
+    "strings": {
+        "timeframeLabel": "Timeframe",
+        "timespanLabel": "Time Span"
+    }
+}

app/src/components/TimespanInput/index.tsx

@@ -0,0 +1,128 @@
+import { useMemo } from 'react';
+import {
+    Checklist,
+    SelectInput,
+} from '@ifrc-go/ui';
+import { useTranslation } from '@ifrc-go/ui/hooks';
+import { stringValueSelector } from '@ifrc-go/ui/utils';
+import { isNotDefined } from '@togglecorp/fujs';
+
+import i18n from './i18n.json';
+
+type Timeframe = 'hours' | 'days' | 'months' | 'years';
+
+type TimeframeOptions = {
+    key: Timeframe,
+    value: string,
+}
+
+type TimespanOptions = {
+    key: number,
+    value: string,
+}
+
+const timeframeOptions: TimeframeOptions[] = [
+    {
+        key: 'hours',
+        value: 'Hours',
+    },
+    {
+        key: 'days',
+        value: 'Days',
+    },
+    {
+        key: 'months',
+        value: 'Months',
+    },
+    {
+        key: 'years',
+        value: 'Years',
+    },
+];
+
+function createTimespanOptions(range: number[]): TimespanOptions[] {
+    return range.map((num) => ({
+        key: num,
+        value: String(num),
+    }));
+}
+
+const timespanOptionsMap: Record<Timeframe, TimespanOptions[]> = {
+    hours: createTimespanOptions(Array.from({ length: 25 }, (_, i) => i)),
+    days: createTimespanOptions(Array.from({ length: 31 }, (_, i) => i + 1)),
+    months: createTimespanOptions(Array.from({ length: 12 }, (_, i) => i + 1)),
+    years: createTimespanOptions(Array.from({ length: 10 }, (_, i) => i + 1)),
+};
+
+function timeframeKeySelector(option: TimeframeOptions) {
+    return option.key;
+}
+
+function timeSpanKeySelector(option: TimespanOptions) {
+    return option.key;
+}
+
+export interface TimespanInputValue {
+    timeframe?: Timeframe;
+    timespan?: number[];
+}
+
+interface Props {
+    value?: TimespanInputValue;
+    onChange: (value: TimespanInputValue) => void;
+}
+
+function TimespanInput(props: Props) {
+    const {
+        value,
+        onChange,
+    } = props;
+
+    const strings = useTranslation(i18n);
+
+    const timespanOptions = useMemo(() => {
+        if (isNotDefined(value?.timeframe)) {
+            return undefined;
+        }
+        return timespanOptionsMap[value?.timeframe];
+    }, [value?.timeframe]);
+
+    const handleTimeframeChange = (newTimeframe: Timeframe | undefined) => {
+        onChange({
+            ...value,
+            timeframe: newTimeframe ?? 'months',
+        });
+    };
+
+    const handleTimespanChange = (newTimespan: number[] | undefined) => {
+        onChange({
+            ...value,
+            timespan: newTimespan,
+        });
+    };
+
+    return (
+        <>
+            <SelectInput
+                name="timeframe"
+                label={strings.timeframeLabel}
+                value={value?.timeframe}
+                onChange={handleTimeframeChange}
+                options={timeframeOptions}
+                keySelector={timeframeKeySelector}
+                labelSelector={stringValueSelector}
+            />
+            <Checklist
+                name="timespan"
+                label={strings.timespanLabel}
+                value={value?.timespan}
+                options={timespanOptions}
+                keySelector={timeSpanKeySelector}
+                labelSelector={stringValueSelector}
+                onChange={handleTimespanChange}
+            />
+        </>
+    );
+}
+
+export default TimespanInput;

app/src/utils/constants.ts

@@ -199,3 +199,6 @@ export const multiMonthSelectDefaultValue = listToMap(
 export const ERU_READINESS_READY = 1;
 export const ERU_READINESS_CAN_CONTRIBUTE = 2;
 export const ERU_READINESS_NO_CAPACITY = 3;
+
+export const EAP_TYPE_SIMPLIFIED = 20;
+export const EAP_TYPE_FULL = 10;

app/src/views/AccountMyFormsEap/EapTableActions/i18n.json

@@ -0,0 +1,9 @@
+{
+    "namespace":"accountMyFormsEap",
+    "strings":{
+        "eapViewLabel": "View",
+        "eapEditLabel": "Edit",
+        "eapFormLink": "Start Full EAP",
+        "simplifiedEapLink": "Start sEAP"
+    }
+}