diff --git a/app/src/components/Navbar/CountryDropdown/index.tsx b/app/src/components/Navbar/CountryDropdown/index.tsx index c72a505766..98f5469ffd 100644 --- a/app/src/components/Navbar/CountryDropdown/index.tsx +++ b/app/src/components/Navbar/CountryDropdown/index.tsx @@ -152,37 +152,41 @@ function CountryDropdown() { className={styles.regionDetailContent} withHeaderBorder withContentOverflow - heading={( - - {/* FIXME: use translation */} - {`${region.value} Region`} - - )} - headingLevel={4} - headerActions={( - } - /> + + {/* FIXME: use translation */} + {`${region.value} Region`} + + } + /> + )} withPadding > {/* TODO: use RawList */} {countriesInSelectedRegion?.map( @@ -193,10 +197,10 @@ function CountryDropdown() { to="countriesLayout" urlParams={{ countryId: id }} styleVariant="action" - withLinkIcon spacing="sm" withoutFullWidth withoutPadding + textSize="sm" > {name} diff --git a/app/src/components/Navbar/CountryDropdown/styles.module.css b/app/src/components/Navbar/CountryDropdown/styles.module.css index df6eace3f5..7cffb16a59 100644 --- a/app/src/components/Navbar/CountryDropdown/styles.module.css +++ b/app/src/components/Navbar/CountryDropdown/styles.module.css @@ -3,10 +3,11 @@ flex-direction: row; max-width: 64rem; min-height: 16rem; + max-height: 70vh; overflow: auto; .region-list { - flex-basis: 10rem; + flex-basis: 9rem; flex-shrink: 0; padding: var(--go-ui-spacing-md) 0 0 var(--go-ui-spacing-md); } diff --git a/app/src/components/Navbar/index.tsx b/app/src/components/Navbar/index.tsx index be067b2ef4..c4f42806ec 100644 --- a/app/src/components/Navbar/index.tsx +++ b/app/src/components/Navbar/index.tsx @@ -61,72 +61,79 @@ function Navbar(props: Props) { className={styles.top} contentClassName={styles.topContent} > -
- - {strings.headerLogoAltText} - - {environment !== 'production' && ( -
- {environment} -
- )} -
- - - {!isAuthenticated && ( - <> - +
+ + {strings.headerLogoAltText} + + {environment !== 'production' && ( +
+ {environment} +
+ )} +
+ + + {!isAuthenticated && ( + <> + + {strings.userMenuLogin} + + + {strings.userMenuRegister} + + + )} + + + - {strings.userMenuLogin} - - + - {strings.userMenuRegister} - - - )} - - - - {strings.headerDropdownNewFieldReport} - - - {strings.headerDropdownNew3WActivity} - - - {strings.headerDropdownNewDrefApplication} - - - {strings.headerDropdownNewFlashUpdate} - - - + {strings.headerDropdownNew3WActivity} + + + {strings.headerDropdownNewDrefApplication} + + + {strings.headerDropdownNewFlashUpdate} + + + + - + { children } diff --git a/app/src/components/Page/styles.module.css b/app/src/components/Page/styles.module.css index 343fe10629..02110e41f8 100644 --- a/app/src/components/Page/styles.module.css +++ b/app/src/components/Page/styles.module.css @@ -23,7 +23,7 @@ } .main-section { - padding: var(--go-ui-spacing-xl) var(--go-ui-spacing-lg); + padding: var(--go-ui-spacing-4xl) var(--go-ui-spacing-lg); } } } diff --git a/app/src/components/TabPage/index.tsx b/app/src/components/TabPage/index.tsx index a118e57631..d7a2782df2 100644 --- a/app/src/components/TabPage/index.tsx +++ b/app/src/components/TabPage/index.tsx @@ -78,7 +78,7 @@ function TabPage(props: Props) { )} {mainContent} diff --git a/app/src/components/WikiLink/styles.module.css b/app/src/components/WikiLink/styles.module.css index 2e655aa0ee..df2d7c1dc9 100644 --- a/app/src/components/WikiLink/styles.module.css +++ b/app/src/components/WikiLink/styles.module.css @@ -1,6 +1,6 @@ .wiki-link { .icon { line-height: 1; - font-size: var(--go-ui-font-size-3xl); + font-size: var(--go-ui-font-size-2xl); } } diff --git a/app/src/components/domain/AppealsTable/i18n.json b/app/src/components/domain/AppealsTable/i18n.json index 9009d21e0c..c0862bdc0c 100644 --- a/app/src/components/domain/AppealsTable/i18n.json +++ b/app/src/components/domain/AppealsTable/i18n.json @@ -4,12 +4,12 @@ "appealsTableStartDate": "Start Date", "appealsTableStartDateAfter": "Start After", "appealsTableStartDateBefore": "Start Before", - "appealsTableType": "Appeal Type", - "appealsTableCode": "Appeal Code", + "appealsTableType": "Type", + "appealsTableCode": "Code", "appealsTableOperation": "Active Operation", "appealsTableDisasterType": "Disaster Type", - "appealsTableRequestedAmount": "Funding Requirements", - "appealsTableFundedAmount": "Funding Coverage", + "appealsTableRequestedAmount": "Requested", + "appealsTableFundedAmount": "Funding", "appealsTableCountry": "Country", "appealsTableFilterTypePlaceholder": "All Appeal Types", "appealsTableFilterDisastersPlaceholder": "All Disaster Types", @@ -17,4 +17,4 @@ "appealsTableFilterDistrictPlaceholder": "All Provinces", "appealsTableProvinces": "Provinces" } -} \ No newline at end of file +} diff --git a/app/src/components/domain/AppealsTable/index.tsx b/app/src/components/domain/AppealsTable/index.tsx index 08c71f4df5..665405b795 100644 --- a/app/src/components/domain/AppealsTable/index.tsx +++ b/app/src/components/domain/AppealsTable/index.tsx @@ -15,7 +15,6 @@ import { SortContext } from '@ifrc-go/ui/contexts'; import { useTranslation } from '@ifrc-go/ui/hooks'; import { createDateColumn, - createNumberColumn, createProgressColumn, createStringColumn, getPercentage, @@ -31,7 +30,13 @@ import DisasterTypeSelectInput from '#components/domain/DisasterTypeSelectInput' import DistrictSearchMultiSelectInput, { type DistrictItem } from '#components/domain/DistrictSearchMultiSelectInput'; import useGlobalEnums from '#hooks/domain/useGlobalEnums'; import useFilterState from '#hooks/useFilterState'; -import { createLinkColumn } from '#utils/domain/tableHelpers'; +import { + createAppealCodeColumn, + createBudgetColumn, + createCountryColumn, + createDisasterTypeColumn, + createEventColumn, +} from '#utils/domain/tableHelpers'; import type { GoApiResponse, GoApiUrlQuery, @@ -144,15 +149,12 @@ function AppealsTable(props: Props) { columnClassName: styles.appealType, }, ), - createStringColumn( + createAppealCodeColumn( 'code', strings.appealsTableCode, (item) => item.code, - { - columnClassName: styles.code, - }, ), - createLinkColumn( + createEventColumn( 'operation', strings.appealsTableOperation, (item) => item.name, @@ -161,20 +163,17 @@ function AppealsTable(props: Props) { urlParams: { emergencyId: item.event }, }), ), - createStringColumn( + createDisasterTypeColumn( 'dtype', strings.appealsTableDisasterType, (item) => item.dtype?.name, { sortable: true }, ), - createNumberColumn( + createBudgetColumn( 'amount_requested', strings.appealsTableRequestedAmount, (item) => item.amount_requested, - { - sortable: true, - suffix: ' CHF', - }, + { sortable: true }, ), createProgressColumn( 'amount_funded', @@ -188,7 +187,7 @@ function AppealsTable(props: Props) { { sortable: true }, ), variant !== 'country' - ? createLinkColumn( + ? createCountryColumn( 'country', strings.appealsTableCountry, (item) => item.country?.name, diff --git a/app/src/components/domain/AppealsTable/styles.module.css b/app/src/components/domain/AppealsTable/styles.module.css index 9fcb7cc6b0..9c744c1414 100644 --- a/app/src/components/domain/AppealsTable/styles.module.css +++ b/app/src/components/domain/AppealsTable/styles.module.css @@ -1,20 +1,13 @@ .appeals-table { - .filter-actions { - align-self: end; - } - .table { - .start-date { - width: 0%; - min-width: 9rem; - } - .appeal-type { width: 0%; + min-width: 6rem; } .code { width: 0%; + min-width: 6rem; } } } diff --git a/app/src/utils/domain/tableHelpers/index.ts b/app/src/utils/domain/tableHelpers/index.ts index 20a054269f..59cead6fc0 100644 --- a/app/src/utils/domain/tableHelpers/index.ts +++ b/app/src/utils/domain/tableHelpers/index.ts @@ -2,12 +2,17 @@ import { type Column, HeaderCell, type HeaderCellProps, + type NumberOutputProps, ReducedListDisplay, type ReducedListDisplayProps, type SortDirection, type TableActionsProps, } from '@ifrc-go/ui'; -import { numericIdSelector } from '@ifrc-go/ui/utils'; +import { + createNumberColumn, + createStringColumn, + numericIdSelector, +} from '@ifrc-go/ui/utils'; import { _cs } from '@togglecorp/fujs'; import Link, { type Props as LinkProps } from '#components/Link'; @@ -166,7 +171,7 @@ export function createRegionListColumn( }; }, cellRendererClassName: options?.cellRendererClassName, - columnClassName: options?.columnClassName, + columnClassName: _cs(styles.regionList, options?.columnClassName), headerCellRendererClassName: options?.headerCellRendererClassName, cellContainerClassName: options?.cellContainerClassName, columnWidth: options?.columnWidth, @@ -176,3 +181,110 @@ export function createRegionListColumn( return item; } + +export function createCountryColumn( + id: string, + title: string, + accessor: (item: D) => React.ReactNode, + rendererParams: (item: D) => LinkProps, + options?: Options, +) { + return createLinkColumn( + id, + title, + accessor, + rendererParams, + { + ...options, + columnClassName: _cs(styles.country, options?.columnClassName), + }, + ); +} + +export function createEventColumn( + id: string, + title: string, + accessor: (item: D) => React.ReactNode, + rendererParams: (item: D) => LinkProps, + options?: Options, +) { + return createLinkColumn( + id, + title, + accessor, + rendererParams, + { + ...options, + columnClassName: _cs(styles.event, options?.columnClassName), + }, + ); +} + +export function createDisasterTypeColumn( + id: string, + title: string, + accessor: (item: D) => string | undefined | null, + options?: Options, +) { + return createStringColumn( + id, + title, + accessor, + { + ...options, + columnClassName: _cs(styles.disasterType, options?.columnClassName), + }, + ); +} + +export function createTitleColumn( + id: string, + title: string, + accessor: (item: D) => string | undefined | null, + options?: Options, +) { + return createStringColumn( + id, + title, + accessor, + { + ...options, + columnClassName: _cs(styles.title, options?.columnClassName), + }, + ); +} + +export function createAppealCodeColumn( + id: string, + title: string, + accessor: (item: D) => string | undefined | null, + options?: Options, +) { + return createStringColumn( + id, + title, + accessor, + { + ...options, + columnClassName: _cs(styles.appealCode, options?.columnClassName), + }, + ); +} + +export function createBudgetColumn( + id: string, + title: string, + accessor: (item: D) => number | undefined | null, + options?: Options, +) { + return createNumberColumn( + id, + title, + accessor, + { + suffix: ' CHF', + ...options, + columnClassName: _cs(styles.budget, options?.columnClassName), + }, + ); +} diff --git a/app/src/utils/domain/tableHelpers/styles.module.css b/app/src/utils/domain/tableHelpers/styles.module.css index 510f61db01..d7df63f3b0 100644 --- a/app/src/utils/domain/tableHelpers/styles.module.css +++ b/app/src/utils/domain/tableHelpers/styles.module.css @@ -1,3 +1,31 @@ +.region-list { + min-width: 8rem; +} + .country-list { min-width: 8rem; } + +.country { + min-width: 8rem; +} + +.event { + min-width: 14rem; +} + +.title { + min-width: 14rem; +} + +.appeal-code { + min-width: 8rem; +} + +.disaster-type { + min-width: 8rem; +} + +.budget { + min-width: 8rem; +} diff --git a/app/src/views/AccountMyFormsDref/ActiveDrefTable/index.tsx b/app/src/views/AccountMyFormsDref/ActiveDrefTable/index.tsx index 9b91bb5d0d..6c6c7da303 100644 --- a/app/src/views/AccountMyFormsDref/ActiveDrefTable/index.tsx +++ b/app/src/views/AccountMyFormsDref/ActiveDrefTable/index.tsx @@ -42,6 +42,11 @@ import { DREF_TYPE_LOAN, type TypeOfDrefEnum, } from '#utils/constants'; +import { + createAppealCodeColumn, + createCountryColumn, + createTitleColumn, +} from '#utils/domain/tableHelpers'; import { useRequest } from '#utils/restRequest'; import DrefTableActions, { type Props as DrefTableActionsProps } from '../DrefTableActions'; @@ -240,19 +245,16 @@ function ActiveDrefTable(props: Props) { 'created_at', strings.activeDrefTableCreatedHeading, (item) => item.created_at, - { columnClassName: styles.date }, ), - createStringColumn( + createAppealCodeColumn( 'appeal_code', strings.activeDrefTableAppealCodeHeading, (item) => item.appeal_code, - { columnClassName: styles.appealCode }, ), - createStringColumn( + createTitleColumn( 'title', strings.activeDrefTableTitleHeading, (item) => item.title, - { columnClassName: styles.title }, ), createStringColumn( 'type', @@ -260,11 +262,14 @@ function ActiveDrefTable(props: Props) { (item) => item.application_type_display, { columnClassName: styles.stage }, ), - createStringColumn( + createCountryColumn( 'country', strings.activeDrefTableCountryHeading, (item) => item.country_details?.name, - { columnClassName: styles.country }, + (item) => ({ + to: 'countriesLayout', + urlParams: { countryId: item.country }, + }), ), createStringColumn( 'type_of_dref', diff --git a/app/src/views/AccountMyFormsFieldReport/index.tsx b/app/src/views/AccountMyFormsFieldReport/index.tsx index cd391ed4e6..f06d041054 100644 --- a/app/src/views/AccountMyFormsFieldReport/index.tsx +++ b/app/src/views/AccountMyFormsFieldReport/index.tsx @@ -9,7 +9,6 @@ import { SortContext } from '@ifrc-go/ui/contexts'; import { useTranslation } from '@ifrc-go/ui/hooks'; import { createDateColumn, - createStringColumn, numericIdSelector, resolveToComponent, } from '@ifrc-go/ui/utils'; @@ -20,7 +19,8 @@ import useUserMe from '#hooks/domain/useUserMe'; import useFilterState from '#hooks/useFilterState'; import { createCountryListColumn, - createLinkColumn, + createDisasterTypeColumn, + createEventColumn, } from '#utils/domain/tableHelpers'; import { type GoApiResponse, @@ -28,7 +28,6 @@ import { } from '#utils/restRequest'; import i18n from './i18n.json'; -import styles from './styles.module.css'; type FieldReportResponse = GoApiResponse<'/api/v2/field-report/'>; type FieldReportListItem = NonNullable[number]; @@ -71,12 +70,9 @@ export function Component() { 'created_at', strings.createdAtHeading, (item) => item.start_date, - { - sortable: true, - columnClassName: styles.createdAt, - }, + { sortable: true }, ), - createLinkColumn( + createEventColumn( 'summary', strings.nameHeading, (item) => item.summary, @@ -84,12 +80,9 @@ export function Component() { to: 'fieldReportDetails', urlParams: { fieldReportId: item.id }, }), - { - sortable: true, - columnClassName: styles.summary, - }, + { sortable: true }, ), - createLinkColumn( + createEventColumn( 'event_name', strings.emergencyHeading, (item) => item.event_details?.name, @@ -97,22 +90,19 @@ export function Component() { to: 'emergenciesLayout', urlParams: { emergencyId: item.event }, }), - { columnClassName: styles.event }, ), - createStringColumn( + createDisasterTypeColumn( 'dtype', strings.disasterTypeHeading, (item) => item.dtype_details?.name, { sortable: true, - columnClassName: styles.disasterType, }, ), createCountryListColumn( 'countries', strings.countryHeading, (item) => item.countries_details, - { columnClassName: styles.countries }, ), ]), [ @@ -140,7 +130,6 @@ export function Component() { return ( ([ - createLinkColumn( + createCountryColumn( 'country', strings.tableCountryTitle, (item) => item.country_details?.name, @@ -140,7 +140,10 @@ export function Component() { 'phase', strings.tablePerPhaseTitle, (item) => (isDefined(item.phase) ? `${item.phase} - ${item.phase_display}` : DEFAULT_INVALID_TEXT), - { sortable: true }, + { + sortable: true, + columnClassName: styles.phaseColumn, + }, ), createElementColumn( 'actions', diff --git a/app/src/views/AccountMyFormsPer/styles.module.css b/app/src/views/AccountMyFormsPer/styles.module.css index d7b046f1df..d74db68171 100644 --- a/app/src/views/AccountMyFormsPer/styles.module.css +++ b/app/src/views/AccountMyFormsPer/styles.module.css @@ -3,4 +3,8 @@ border-bottom: unset; background-color: var(--go-ui-color-gray-20); } + + .phase-column { + min-width: 9rem; + } } diff --git a/app/src/views/ActiveSurgeDeployments/OngoingEruDeployments/index.tsx b/app/src/views/ActiveSurgeDeployments/OngoingEruDeployments/index.tsx index 6af32e0865..4651f306d3 100644 --- a/app/src/views/ActiveSurgeDeployments/OngoingEruDeployments/index.tsx +++ b/app/src/views/ActiveSurgeDeployments/OngoingEruDeployments/index.tsx @@ -230,7 +230,6 @@ function OngoingEruDeployments() { startDate: item.start_date, endDate: item.end_date, }), - { columnClassName: styles.timeline }, ), createEmptyColumn(), ]), diff --git a/app/src/views/ActiveSurgeDeployments/OngoingEruDeployments/styles.module.css b/app/src/views/ActiveSurgeDeployments/OngoingEruDeployments/styles.module.css index 05a8dce702..c71722eb6f 100644 --- a/app/src/views/ActiveSurgeDeployments/OngoingEruDeployments/styles.module.css +++ b/app/src/views/ActiveSurgeDeployments/OngoingEruDeployments/styles.module.css @@ -15,10 +15,6 @@ width: 10rem; } - .timeline { - width: 22rem; - } - .actions { width: 3rem; } diff --git a/app/src/views/ActiveSurgeDeployments/OngoingRapidResponseDeployments/index.tsx b/app/src/views/ActiveSurgeDeployments/OngoingRapidResponseDeployments/index.tsx index aca479cf8f..68e7116df9 100644 --- a/app/src/views/ActiveSurgeDeployments/OngoingRapidResponseDeployments/index.tsx +++ b/app/src/views/ActiveSurgeDeployments/OngoingRapidResponseDeployments/index.tsx @@ -235,7 +235,6 @@ function OngoingRapidResponseDeployments() { startDate: item.start_date, endDate: item.end_date, }), - { columnClassName: styles.timeline }, ), createEmptyColumn(), ]), diff --git a/app/src/views/ActiveSurgeDeployments/OngoingRapidResponseDeployments/styles.module.css b/app/src/views/ActiveSurgeDeployments/OngoingRapidResponseDeployments/styles.module.css index 3a8bd9cc3a..eab10283b2 100644 --- a/app/src/views/ActiveSurgeDeployments/OngoingRapidResponseDeployments/styles.module.css +++ b/app/src/views/ActiveSurgeDeployments/OngoingRapidResponseDeployments/styles.module.css @@ -19,10 +19,6 @@ width: 10rem; } - .timeline { - width: 22rem; - } - .actions { width: 3rem; } diff --git a/app/src/views/CountryOngoingActivitiesEmergencies/index.tsx b/app/src/views/CountryOngoingActivitiesEmergencies/index.tsx index 9bcb4c5de1..ed899e4aae 100644 --- a/app/src/views/CountryOngoingActivitiesEmergencies/index.tsx +++ b/app/src/views/CountryOngoingActivitiesEmergencies/index.tsx @@ -22,7 +22,6 @@ import { SortContext } from '@ifrc-go/ui/contexts'; import { useTranslation } from '@ifrc-go/ui/hooks'; import { createDateColumn, - createNumberColumn, createProgressColumn, createStringColumn, getPercentage, @@ -74,7 +73,12 @@ import { DEFAULT_MAP_PADDING, DURATION_MAP_ZOOM, } from '#utils/constants'; -import { createLinkColumn } from '#utils/domain/tableHelpers'; +import { + createAppealCodeColumn, + createBudgetColumn, + createDisasterTypeColumn, + createEventColumn, +} from '#utils/domain/tableHelpers'; import { type CountryOutletContext } from '#utils/outletContext'; import type { GoApiResponse, @@ -215,12 +219,12 @@ export function Component() { (item) => item.atype_display, { sortable: true }, ), - createStringColumn( + createAppealCodeColumn( 'code', strings.appealsTableCode, (item) => item.code, ), - createLinkColumn( + createEventColumn( 'operation', strings.appealsTableOperation, (item) => item.name, @@ -229,20 +233,17 @@ export function Component() { urlParams: { emergencyId: item.event }, }), ), - createStringColumn( + createDisasterTypeColumn( 'dtype', strings.appealsTableDisasterType, (item) => item.dtype?.name, { sortable: true }, ), - createNumberColumn( + createBudgetColumn( 'amount_requested', strings.appealsTableRequestedAmount, (item) => item.amount_requested, - { - sortable: true, - suffix: ' CHF', - }, + { sortable: true }, ), createProgressColumn( 'amount_funded', diff --git a/app/src/views/DrefFinalReportForm/Operation/ProposedActionsInput/ActivitiesInput/index.tsx b/app/src/views/DrefFinalReportForm/Operation/ProposedActionsInput/ActivitiesInput/index.tsx index e300c6571c..8b9f6bfc66 100644 --- a/app/src/views/DrefFinalReportForm/Operation/ProposedActionsInput/ActivitiesInput/index.tsx +++ b/app/src/views/DrefFinalReportForm/Operation/ProposedActionsInput/ActivitiesInput/index.tsx @@ -75,7 +75,6 @@ function ActivitiesInput(props: Props) { title={strings.drefFormProposedActionRemoveSector} ariaLabel={strings.drefFormProposedActionRemoveSector} round={false} - styleVariant="action" disabled={disabled || readOnly} > diff --git a/app/src/views/DrefFinalReportForm/index.tsx b/app/src/views/DrefFinalReportForm/index.tsx index eeee7fc736..773f2e4dbd 100644 --- a/app/src/views/DrefFinalReportForm/index.tsx +++ b/app/src/views/DrefFinalReportForm/index.tsx @@ -61,7 +61,6 @@ import { checkTabErrors, EARLY_ACTION, EARLY_RESPONSE, - TYPE_IMMINENT, } from './common'; import EventDetail from './EventDetail'; import ObsoletePayloadModal from './ObsoletePayloadModal'; @@ -77,43 +76,37 @@ type GetFinalReportResponse = GoApiResponse<'/api/v2/dref-final-report/{id}/'>; type TabKeys = 'overview' | 'eventDetail' | 'actions' | 'operation' | 'submission'; -function getNextStep(current: TabKeys, direction: 1 | -1, typeOfDref: TypeOfDrefEnum | '' | undefined) { - if (typeOfDref === TYPE_IMMINENT && direction === 1) { - const mapping: { [key in TabKeys]?: TabKeys } = { - overview: 'eventDetail', - eventDetail: 'operation', - operation: 'submission', - }; - return mapping[current]; +function getTabKeyList(typeOfDref: TypeOfDrefEnum | undefined | null) { + if (typeOfDref === DREF_TYPE_IMMINENT) { + return [ + 'overview', + 'eventDetail', + 'operation', + 'submission', + ] satisfies TabKeys[]; } - if (typeOfDref === TYPE_IMMINENT && direction === -1) { - const mapping: { [key in TabKeys]?: TabKeys } = { - submission: 'operation', - operation: 'eventDetail', - eventDetail: 'overview', - }; - return mapping[current]; - } - if (direction === 1) { - const mapping: { [key in TabKeys]?: TabKeys } = { - overview: 'eventDetail', - eventDetail: 'actions', - actions: 'operation', - operation: 'submission', - }; - return mapping[current]; - } - if (direction === -1) { - const mapping: { [key in TabKeys]?: TabKeys } = { - submission: 'operation', - operation: 'actions', - actions: 'eventDetail', - eventDetail: 'overview', - }; - return mapping[current]; - } - return undefined; + + return [ + 'overview', + 'eventDetail', + 'actions', + 'operation', + 'submission', + ] satisfies TabKeys[]; +} + +function getNextStep( + current: TabKeys, + direction: 1 | -1, + typeOfDref: TypeOfDrefEnum | undefined | null, +) { + const tabKeyList = getTabKeyList(typeOfDref); + + const currentIndex = tabKeyList.findIndex((key) => key === current); + + return tabKeyList[currentIndex + direction]; } + /** @knipignore */ // eslint-disable-next-line import/prefer-default-export export function Component() { @@ -424,6 +417,20 @@ export function Component() { const shouldHideForm = fetchingFinalReport || isDefined(finalReportResponseError); + const tabNameMap: Record = { + overview: strings.formTabOverviewLabel, + eventDetail: finalReportResponse?.type_of_dref === DREF_TYPE_IMMINENT + ? strings.formTabEventDevelopmentLabel + : strings.formTabEventDetailLabel, + actions: strings.formTabActionsLabel, + operation: finalReportResponse?.type_of_dref === DREF_TYPE_IMMINENT + ? strings.formTabImplementation + : strings.formTabOperationLabel, + submission: strings.formTabSubmissionLabel, + }; + + const tabKeyList = getTabKeyList(finalReportResponse?.type_of_dref); + return ( )} info={!shouldHideForm && ( - - - {strings.formTabOverviewLabel} - - - {finalReportResponse?.type_of_dref !== DREF_TYPE_IMMINENT - ? strings.formTabEventDetailLabel - : strings.formTabEventDevelopmentLabel} - - {finalReportResponse?.type_of_dref !== DREF_TYPE_IMMINENT && ( + + {tabKeyList.map((tabKey, i) => ( - {strings.formTabActionsLabel} + {tabNameMap[tabKey]} - )} - - {finalReportResponse?.type_of_dref !== DREF_TYPE_IMMINENT - ? strings.formTabOperationLabel - : strings.formTabImplementation} - - - {strings.formTabSubmissionLabel} - + ))} )} withBackgroundColorInMainSection diff --git a/app/src/views/EmergencyReportAndDocument/index.tsx b/app/src/views/EmergencyReportAndDocument/index.tsx index a50ca9d9c9..dac6b34195 100644 --- a/app/src/views/EmergencyReportAndDocument/index.tsx +++ b/app/src/views/EmergencyReportAndDocument/index.tsx @@ -16,6 +16,7 @@ import { import { SortContext } from '@ifrc-go/ui/contexts'; import { useTranslation } from '@ifrc-go/ui/hooks'; import { + createActionColumn, createDateColumn, createStringColumn, numericIdSelector, @@ -35,9 +36,11 @@ import { adminUrl } from '#config'; import useRegion, { type Region } from '#hooks/domain/useRegion'; import useFilterState from '#hooks/useFilterState'; import { + createAppealCodeColumn, createCountryListColumn, - createLinkColumn, + createEventColumn, createRegionListColumn, + createTitleColumn, } from '#utils/domain/tableHelpers'; import { type EmergencyOutletContext } from '#utils/outletContext'; import { resolveUrl } from '#utils/resolveUrl'; @@ -164,7 +167,7 @@ export function Component() { strings.fieldReportsTableCreatedAt, (item) => item.created_at, ), - createLinkColumn( + createEventColumn( 'summary', strings.fieldReportsTableName, (item) => item.summary, @@ -207,29 +210,33 @@ export function Component() { (item) => item.type, { sortable: true }, ), - createStringColumn( + createAppealCodeColumn( 'code', strings.appealDocumentCode, (item) => item.appeal.code, ), - createStringColumn( + createTitleColumn( 'description', strings.appealDocumentDescription, (item) => item.description, ), - createStringColumn( + createTitleColumn( 'name', strings.appealDocumentLink, (item) => item.name, { sortable: true }, ), - createLinkColumn( + createActionColumn( 'action', - '', - () => , (item) => ({ - external: true, - href: item.document ?? item.document_url ?? undefined, + children: ( + + + + ), }), ), ]), diff --git a/app/src/views/EmergencySurge/RapidResponsePersonnelTable/index.tsx b/app/src/views/EmergencySurge/RapidResponsePersonnelTable/index.tsx index 34250e57cc..fe6c986c28 100644 --- a/app/src/views/EmergencySurge/RapidResponsePersonnelTable/index.tsx +++ b/app/src/views/EmergencySurge/RapidResponsePersonnelTable/index.tsx @@ -192,7 +192,6 @@ export default function RapidResponsePersonnelTable(props: Props) { startDate: item.start_date, endDate: item.end_date, }), - { columnClassName: styles.timeline }, ), ]), [ diff --git a/app/src/views/EmergencySurge/RapidResponsePersonnelTable/styles.module.css b/app/src/views/EmergencySurge/RapidResponsePersonnelTable/styles.module.css index f9ed491fd0..6aa6f0d738 100644 --- a/app/src/views/EmergencySurge/RapidResponsePersonnelTable/styles.module.css +++ b/app/src/views/EmergencySurge/RapidResponsePersonnelTable/styles.module.css @@ -3,9 +3,5 @@ width: 25rem; min-width: 15rem; } - - .timeline { - min-width: 25rem; - } } diff --git a/app/src/views/Login/index.tsx b/app/src/views/Login/index.tsx index cf9ad2166c..496810c2f3 100644 --- a/app/src/views/Login/index.tsx +++ b/app/src/views/Login/index.tsx @@ -149,14 +149,17 @@ export function Component() { heading={strings.loginHeader} description={strings.loginSubHeader} > - -
+ - + - + - -
+ + ); } diff --git a/app/src/views/OldDrefFinalReportForm/Overview/index.tsx b/app/src/views/OldDrefFinalReportForm/Overview/index.tsx index cce5b799f2..91a8c0432c 100644 --- a/app/src/views/OldDrefFinalReportForm/Overview/index.tsx +++ b/app/src/views/OldDrefFinalReportForm/Overview/index.tsx @@ -196,7 +196,7 @@ function Overview(props: Props) { - + )} withToggleButtonOnFooter + withoutWrapInFooter initiallyExpanded withBackground withPadding diff --git a/app/src/views/RecoverAccount/index.tsx b/app/src/views/RecoverAccount/index.tsx index 8963cb40b7..01e51bca5d 100644 --- a/app/src/views/RecoverAccount/index.tsx +++ b/app/src/views/RecoverAccount/index.tsx @@ -1,6 +1,8 @@ import { useMemo } from 'react'; import { Button, + Container, + ListView, TextInput, } from '@ifrc-go/ui'; import { useTranslation } from '@ifrc-go/ui/hooks'; @@ -20,7 +22,6 @@ import { useLazyRequest } from '#utils/restRequest'; import { transformObjectError } from '#utils/restRequest/error'; import i18n from './i18n.json'; -import styles from './styles.module.css'; interface FormFields { email?: string; @@ -103,37 +104,44 @@ export function Component() { return ( -
- - - + + + + + + + +
); diff --git a/app/src/views/RegionOperations/RecentEmergenciesTable/index.tsx b/app/src/views/RegionOperations/RecentEmergenciesTable/index.tsx index d03d2c927c..20660b9891 100644 --- a/app/src/views/RegionOperations/RecentEmergenciesTable/index.tsx +++ b/app/src/views/RegionOperations/RecentEmergenciesTable/index.tsx @@ -22,8 +22,10 @@ import { import Link from '#components/Link'; import useFilterState from '#hooks/useFilterState'; import { + createBudgetColumn, createCountryListColumn, - createLinkColumn, + createDisasterTypeColumn, + createEventColumn, } from '#utils/domain/tableHelpers'; import { type GoApiResponse, @@ -31,7 +33,6 @@ import { } from '#utils/restRequest'; import i18n from './i18n.json'; -import styles from './styles.module.css'; type EventResponse = GoApiResponse<'/api/v2/event/'>; type EventListItem = NonNullable[number]; @@ -73,12 +74,9 @@ function EventItemsTable(props: Props) { 'created_at', strings.regionEmergenciesTableDate, (item) => item.created_at, - { - sortable: true, - columnClassName: styles.createdAt, - }, + { sortable: true }, ), - createLinkColumn( + createEventColumn( 'name', strings.regionEmergenciesTableName, (item) => item.name, @@ -88,7 +86,7 @@ function EventItemsTable(props: Props) { }), { sortable: true }, ), - createStringColumn( + createDisasterTypeColumn( 'dtype', strings.regionEmergenciesTableDisasterType, (item) => item.dtype?.name, @@ -99,15 +97,12 @@ function EventItemsTable(props: Props) { (item) => item.glide, { sortable: true }, ), - createNumberColumn( + createBudgetColumn( 'amount_requested', strings.regionEmergenciesTableRequestedAmt, (item) => sumSafe( item.appeals.map((appeal) => appeal.amount_requested), ), - { - suffix: ' CHF', - }, ), createNumberColumn( 'num_affected', @@ -177,7 +172,6 @@ function EventItemsTable(props: Props) { return ( )} + withLargeBreakpointInHeader > )} > - - - - - - - - - - - -
- - + + + + + + - - {isNationalSociety ? ( - + - ) : ( - )} - - - - - {justificationNeeded && ( - <> - - {strings.registerJustify} - -