diff --git a/src/frontend/apps/impress/src/assets/icons/DOCS.svg b/src/frontend/apps/impress/src/assets/icons/DOCS.svg
new file mode 100644
index 000000000..50b68e8b6
--- /dev/null
+++ b/src/frontend/apps/impress/src/assets/icons/DOCS.svg
@@ -0,0 +1,6 @@
+
diff --git a/src/frontend/apps/impress/src/components/ErrorPageFooter.tsx b/src/frontend/apps/impress/src/components/ErrorPageFooter.tsx
new file mode 100644
index 000000000..b7f5d88a7
--- /dev/null
+++ b/src/frontend/apps/impress/src/components/ErrorPageFooter.tsx
@@ -0,0 +1,59 @@
+import { UserMenu } from '@gouvfr-lasuite/ui-kit';
+import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
+
+import { Box } from '@/components';
+import { Waffle } from '@/components/Waffle';
+import { useAuth } from '@/features/auth/hooks/useAuth';
+import { gotoLogout } from '@/features/auth/utils';
+import { HelpMenu } from '@/features/help';
+
+const footerButtonStyles = css`
+ display: flex;
+ height: var(--Height, 32px);
+ min-width: var(--Height, 32px);
+ padding: 4px;
+ justify-content: center;
+ align-items: center;
+ gap: 7px;
+ border-radius: 4px;
+ color: var(--c--contextuals--content--semantic--neutral--tertiary);
+`;
+
+export const ErrorPageFooter = () => {
+ const { t } = useTranslation();
+ const { user } = useAuth();
+
+ const userMenu = user || {
+ full_name: t('Guest'),
+ email: '',
+ };
+
+ return (
+
+ {user && (
+
+ )}
+
+
+
+ );
+};
diff --git a/src/frontend/apps/impress/src/components/ErrorPageHeader.tsx b/src/frontend/apps/impress/src/components/ErrorPageHeader.tsx
new file mode 100644
index 000000000..9d0ba5bbf
--- /dev/null
+++ b/src/frontend/apps/impress/src/components/ErrorPageHeader.tsx
@@ -0,0 +1,64 @@
+import Image from 'next/image';
+import { useTranslation } from 'react-i18next';
+import { css } from 'styled-components';
+
+import DocsTitleSvg from '@/assets/icons/DOCS.svg';
+import { Box, StyledLink } from '@/components';
+import { useConfig } from '@/core';
+
+export const ErrorPageHeader = () => {
+ const { t } = useTranslation();
+ const { data: config } = useConfig();
+ const icon = config?.theme_customization?.header?.icon;
+
+ return (
+
+
+
+ {icon && (
+
+ )}
+
+
+
+
+ );
+};
diff --git a/src/frontend/apps/impress/src/components/index.ts b/src/frontend/apps/impress/src/components/index.ts
index 9075311ab..c55597410 100644
--- a/src/frontend/apps/impress/src/components/index.ts
+++ b/src/frontend/apps/impress/src/components/index.ts
@@ -5,6 +5,8 @@ export * from './DropButton';
export * from './dropdown-menu/DropdownMenu';
export * from './Emoji/EmojiPicker';
export * from './ErrorPage';
+export * from './ErrorPageFooter';
+export * from './ErrorPageHeader';
export * from './quick-search';
export * from './Icon';
export * from './InfiniteScroll';
diff --git a/src/frontend/apps/impress/src/layouts/PageLayout.tsx b/src/frontend/apps/impress/src/layouts/PageLayout.tsx
index ceae98326..8a9f4490b 100644
--- a/src/frontend/apps/impress/src/layouts/PageLayout.tsx
+++ b/src/frontend/apps/impress/src/layouts/PageLayout.tsx
@@ -1,4 +1,4 @@
-import { PropsWithChildren } from 'react';
+import { PropsWithChildren, ReactNode } from 'react';
import { Box } from '@/components';
import { Footer } from '@/features/footer';
@@ -10,19 +10,24 @@ import { MainContent } from './MainLayout';
interface PageLayoutProps {
withFooter?: boolean;
withLeftPanel?: boolean;
+ headerSlot?: ReactNode;
+ footerSlot?: ReactNode;
}
export function PageLayout({
children,
withFooter = true,
withLeftPanel = true,
+ headerSlot,
+ footerSlot,
}: PropsWithChildren) {
return (
{withLeftPanel && }
-
+ {headerSlot !== undefined ? headerSlot : }
{children}
+ {footerSlot}
{withFooter && }
diff --git a/src/frontend/apps/impress/src/pages/401.tsx b/src/frontend/apps/impress/src/pages/401.tsx
index 0f9155a8b..4eb619023 100644
--- a/src/frontend/apps/impress/src/pages/401.tsx
+++ b/src/frontend/apps/impress/src/pages/401.tsx
@@ -5,7 +5,13 @@ import { ReactElement, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import ErrorAccessDeniedSvg from '@/assets/icons/Docs Locked.svg';
-import { Box, Text, errorDescriptionStyles } from '@/components';
+import {
+ Box,
+ ErrorPageFooter,
+ ErrorPageHeader,
+ Text,
+ errorDescriptionStyles,
+} from '@/components';
import { gotoLogin, useAuth } from '@/features/auth';
import { PageLayout } from '@/layouts';
import { NextPageWithLayout } from '@/types/next';
@@ -75,7 +81,16 @@ const Page: NextPageWithLayout = () => {
};
Page.getLayout = function getLayout(page: ReactElement) {
- return {page};
+ return (
+ }
+ footerSlot={}
+ >
+ {page}
+
+ );
};
export default Page;
diff --git a/src/frontend/apps/impress/src/pages/404.tsx b/src/frontend/apps/impress/src/pages/404.tsx
index f4d807728..18de4aac6 100644
--- a/src/frontend/apps/impress/src/pages/404.tsx
+++ b/src/frontend/apps/impress/src/pages/404.tsx
@@ -2,7 +2,7 @@ import { ReactElement } from 'react';
import { useTranslation } from 'react-i18next';
import Error404Svg from '@/assets/icons/404.svg';
-import { ErrorPage } from '@/components';
+import { ErrorPage, ErrorPageFooter, ErrorPageHeader } from '@/components';
import { PageLayout } from '@/layouts';
import { NextPageWithLayout } from '@/types/next';
@@ -22,7 +22,16 @@ const Page: NextPageWithLayout = () => {
};
Page.getLayout = function getLayout(page: ReactElement) {
- return {page};
+ return (
+ }
+ footerSlot={}
+ >
+ {page}
+
+ );
};
export default Page;
diff --git a/src/frontend/apps/impress/src/pages/500.tsx b/src/frontend/apps/impress/src/pages/500.tsx
index e81a00546..ca099fb07 100644
--- a/src/frontend/apps/impress/src/pages/500.tsx
+++ b/src/frontend/apps/impress/src/pages/500.tsx
@@ -3,7 +3,7 @@ import { ReactElement } from 'react';
import { useTranslation } from 'react-i18next';
import Error500Svg from '@/assets/icons/500.svg';
-import { ErrorPage } from '@/components';
+import { ErrorPage, ErrorPageFooter, ErrorPageHeader } from '@/components';
import { PageLayout } from '@/layouts';
import { NextPageWithLayout } from '@/types/next';
@@ -28,7 +28,16 @@ const Page: NextPageWithLayout = () => {
};
Page.getLayout = function getLayout(page: ReactElement) {
- return {page};
+ return (
+ }
+ footerSlot={}
+ >
+ {page}
+
+ );
};
export default Page;
diff --git a/src/frontend/apps/impress/src/pages/_error.tsx b/src/frontend/apps/impress/src/pages/_error.tsx
index 4689e61e5..495921f0e 100644
--- a/src/frontend/apps/impress/src/pages/_error.tsx
+++ b/src/frontend/apps/impress/src/pages/_error.tsx
@@ -5,7 +5,7 @@ import { ReactElement } from 'react';
import { useTranslation } from 'react-i18next';
import Error500Svg from '@/assets/icons/500.svg';
-import { ErrorPage } from '@/components';
+import { ErrorPage, ErrorPageFooter, ErrorPageHeader } from '@/components';
import { PageLayout } from '@/layouts';
const Error = () => {
@@ -44,7 +44,12 @@ Error.getInitialProps = async (contextData: NextPageContext) => {
Error.getLayout = function getLayout(page: ReactElement) {
return (
-
+ }
+ footerSlot={}
+ >
{page}
);
diff --git a/src/frontend/apps/impress/src/pages/offline/index.tsx b/src/frontend/apps/impress/src/pages/offline/index.tsx
index 24cb29569..53f14c506 100644
--- a/src/frontend/apps/impress/src/pages/offline/index.tsx
+++ b/src/frontend/apps/impress/src/pages/offline/index.tsx
@@ -2,7 +2,7 @@ import { ReactElement } from 'react';
import { useTranslation } from 'react-i18next';
import Error503Svg from '@/assets/icons/503.svg';
-import { ErrorPage } from '@/components';
+import { ErrorPage, ErrorPageFooter, ErrorPageHeader } from '@/components';
import { PageLayout } from '@/layouts';
import { NextPageWithLayout } from '@/types/next';
@@ -21,7 +21,16 @@ const Page: NextPageWithLayout = () => {
};
Page.getLayout = function getLayout(page: ReactElement) {
- return {page};
+ return (
+ }
+ footerSlot={}
+ >
+ {page}
+
+ );
};
export default Page;
diff --git a/src/frontend/apps/impress/src/pages/user-reconciliations/active/[id]/index.tsx b/src/frontend/apps/impress/src/pages/user-reconciliations/active/[id]/index.tsx
index 7fa8c27a2..5d759cb94 100644
--- a/src/frontend/apps/impress/src/pages/user-reconciliations/active/[id]/index.tsx
+++ b/src/frontend/apps/impress/src/pages/user-reconciliations/active/[id]/index.tsx
@@ -3,6 +3,7 @@ import { useRouter } from 'next/router';
import { ReactElement } from 'react';
import { useTranslation } from 'react-i18next';
+import { ErrorPageFooter, ErrorPageHeader } from '@/components';
import { UserReconciliation } from '@/features/auth/components/UserReconciliation';
import { PageLayout } from '@/layouts';
import { NextPageWithLayout } from '@/types/next';
@@ -34,7 +35,16 @@ const Page: NextPageWithLayout = () => {
};
Page.getLayout = function getLayout(page: ReactElement) {
- return {page};
+ return (
+ }
+ footerSlot={}
+ >
+ {page}
+
+ );
};
export default Page;
diff --git a/src/frontend/apps/impress/src/pages/user-reconciliations/inactive/[id]/index.tsx b/src/frontend/apps/impress/src/pages/user-reconciliations/inactive/[id]/index.tsx
index c10cbb38e..d2b4ecd9c 100644
--- a/src/frontend/apps/impress/src/pages/user-reconciliations/inactive/[id]/index.tsx
+++ b/src/frontend/apps/impress/src/pages/user-reconciliations/inactive/[id]/index.tsx
@@ -3,6 +3,7 @@ import { useRouter } from 'next/router';
import { ReactElement } from 'react';
import { useTranslation } from 'react-i18next';
+import { ErrorPageFooter, ErrorPageHeader } from '@/components';
import { UserReconciliation } from '@/features/auth/components/UserReconciliation';
import { PageLayout } from '@/layouts';
import { NextPageWithLayout } from '@/types/next';
@@ -34,7 +35,16 @@ const Page: NextPageWithLayout = () => {
};
Page.getLayout = function getLayout(page: ReactElement) {
- return {page};
+ return (
+ }
+ footerSlot={}
+ >
+ {page}
+
+ );
};
export default Page;