diff --git a/src/pages/data/[[...path]].tsx b/src/pages/data/[[...path]].tsx
new file mode 100644
index 000000000..3d6df8223
--- /dev/null
+++ b/src/pages/data/[[...path]].tsx
@@ -0,0 +1,221 @@
+import type { GetServerSidePropsContext } from 'next'
+
+import { S3 } from '@aws-sdk/client-s3'
+import PropTypes from 'prop-types'
+import Section from '@/components/Section'
+import Breadcrumb from '@/layouts/Breadcrumb'
+import NotFoundPage from '@/app/not-found'
+// import sendToTracker, { getDownloadToEventTracker } from '@/lib/util/analytics-tracker'
+
+import { dataConfig, pageConfig } from './config'
+import Data from './components/Data'
+import {
+ getAlias,
+ getFormatedDate,
+ asyncSendS3,
+ listObjectsRecursively,
+ autorizedPathS3,
+} from './utils'
+
+interface Context extends GetServerSidePropsContext {
+ params: {
+ path: string[]
+ }
+}
+
+interface DataPageProps {
+ title: string
+ path: string[]
+ data: object[]
+ config: object
+ errorCode: number
+ errorMessage: string
+}
+
+const {
+ S3_CONFIG_ACCESS_KEY_ID,
+ S3_CONFIG_SECRET_ACCESS_KEY,
+ S3_CONFIG_REGION,
+ S3_CONFIG_ENDPOINT,
+} = process.env
+
+const { rootLink } = pageConfig
+
+const bucketName = 'prd-ign-mut-ban'
+const rootDir = ['adresse-data']
+const clientS3 = new S3({
+ credentials: {
+ accessKeyId: S3_CONFIG_ACCESS_KEY_ID || '',
+ secretAccessKey: S3_CONFIG_SECRET_ACCESS_KEY || '',
+ },
+ region: S3_CONFIG_REGION || '',
+ endpoint: S3_CONFIG_ENDPOINT || '',
+})
+
+export async function getServerSideProps(context: Context) {
+ const { params, res, req } = context
+ const { path: paramPathRaw = [] } = params
+ const config = dataConfig?.directory.find(({ path }) => path === paramPathRaw.join('/')) || {}
+ const alias = await getAlias(clientS3, bucketName)(rootDir, dataConfig?.alias, paramPathRaw.join('/') || '')
+
+ const paramPath = alias && (new RegExp(`^${alias.parent}/${alias.name}`)).test(paramPathRaw.join('/'))
+ ? paramPathRaw.join('/').replace(new RegExp(`^${alias.parent}/${alias.name}`), `${alias.parent}/${alias.target}`).split('/')
+ : paramPathRaw
+ const dirPath = `${paramPath.join('/')}`
+ const formattedDate = getFormatedDate()
+ const s3ObjectPath = [...rootDir, ...paramPath].join('/')
+
+ try {
+ const s3Head = await clientS3.headObject({
+ Bucket: bucketName,
+ Key: s3ObjectPath,
+ })
+
+ // NO ERROR > PATH IS A FILE
+ try {
+ // sendToTracker(getDownloadToEventTracker({
+ // downloadDataType: `${paramPath[0]}${req?.headers?.range ? ' (Partial)' : ''}`,
+ // downloadFileName: dirPath,
+ // nbDownload: 1
+ // }))
+ await asyncSendS3(clientS3)((req as unknown as Request), res, {
+ params: {
+ ...(req?.headers?.range ? { Range: req.headers.range } : {}),
+ Bucket: bucketName,
+ Key: s3ObjectPath,
+ },
+ fileName: paramPath[paramPath.length - 1],
+ metadata: s3Head,
+ })
+ }
+ catch (err) {
+ console.warn(`[${formattedDate} - ERROR]`, 'File access error:', err)
+ return {
+ props: {
+ errorCode: 502,
+ errorMessage: 'Une erreur est survenue lors de la génération du téléchargement.',
+ },
+ }
+ }
+ }
+ catch {
+ // ERROR > PATH SHOULD BE DIRECTORY
+ const s3DirPath = `${s3ObjectPath}/`
+ const s3Objects = await listObjectsRecursively(clientS3, bucketName)(s3DirPath)
+ if (s3Objects) {
+ const s3data = [
+ ...(s3Objects || [])
+ .filter(({ name }) => autorizedPathS3(name).auth)
+ .map(({ name, path, isDirectory, fileInfo, ...rest }) => ({
+ name,
+ path: alias && alias.parent !== dirPath
+ ? path.replace(
+ (new RegExp(`^${rootDir.join('/')}/${alias.parent}/${alias.target}`)),
+ `${rootDir.join('/')}/${alias.parent}/${alias.name}`
+ )
+ : path,
+ isDirectory,
+ ...(fileInfo ? { fileInfo } : {}),
+ ...rest,
+ })),
+ ]
+ const s3contentDir = [
+ ...s3data,
+ ...(alias && alias.parent === dirPath
+ ? [{
+ ...alias,
+ ...(s3data.find(({ name }) => name === alias.target) || {}),
+ name: alias.name,
+ path: `${s3ObjectPath}/${alias.name}`,
+ }]
+ : []),
+ ].sort(
+ (a, b) => (
+ a.name.localeCompare(b.name)
+ || Number(a.isDirectory) - Number(b.isDirectory)
+ )
+ )
+
+ return {
+ props: {
+ title: ['data', ...paramPath].join('/') || '',
+ path: paramPathRaw || [],
+ data: s3contentDir || [],
+ config,
+ },
+ }
+ }
+
+ // OBJECT DO NOT EXIST > IS UNKNOWN PATH
+ console.warn(`[${formattedDate} - ERROR]`, 'S3 Object - Try access to unknown object:', s3DirPath)
+ res.statusCode = 404
+ return {
+ props: { errorCode: 404 },
+ }
+ }
+
+ return { props: {} }
+}
+
+export default function DataPage({ title, path, data, config, errorCode, errorMessage }: DataPageProps) {
+ const currentDir = ['data', ...(path || [])].slice(-1)
+
+ return errorCode && errorCode !== 200
+ ? (
+ <>
+ {path && (
+
({
+ label: dir,
+ linkProps: { href: `/data/${path.slice(0, index).join('/')}` },
+ })),
+ ]}
+ />
+ )}
+
+
+ )
+ : (path
+ ? (
+ <>
+ ({
+ label: dir,
+ linkProps: { href: `/data/${path.slice(0, index).join('/')}` },
+ })),
+ ]}
+ />
+
+
+
+ )
+ : null)
+}
+
+DataPage.propTypes = {
+ title: PropTypes.string,
+ path: PropTypes.arrayOf(PropTypes.string),
+ data: PropTypes.arrayOf(PropTypes.object),
+ config: PropTypes.shape({
+ hero: PropTypes.shape({
+ type: PropTypes.string,
+ value: PropTypes.string,
+ }),
+ }),
+ errorCode: PropTypes.number,
+ errorMessage: PropTypes.string,
+}
diff --git a/src/pages/data/components/Data.styled.tsx b/src/pages/data/components/Data.styled.tsx
new file mode 100644
index 000000000..1fb0fe7ca
--- /dev/null
+++ b/src/pages/data/components/Data.styled.tsx
@@ -0,0 +1,16 @@
+'use client'
+
+import styled from 'styled-components'
+
+export const ItemList = styled.ul`
+ padding-top: 0.5rem;
+`
+
+export const Item = styled.li`
+ display: block;
+`
+
+export const ParentDirName = styled.span.attrs({ className: 'fr-link--icon-left fr-icon-folder-2-line' })`
+ display: inline-block;
+ padding: 0 0.5em;
+`
diff --git a/src/pages/data/components/Data.tsx b/src/pages/data/components/Data.tsx
new file mode 100644
index 000000000..1852fdb30
--- /dev/null
+++ b/src/pages/data/components/Data.tsx
@@ -0,0 +1,164 @@
+import { useMemo } from 'react'
+import Link from 'next/link'
+import PropTypes from 'prop-types'
+
+import { dateFormatOptions } from '../config'
+import DataEntry from './DataEntry'
+import {
+ ItemList,
+ Item,
+ ParentDirName,
+} from './Data.styled'
+
+interface DataProps {
+ root: {
+ href: string
+ label: string
+ }
+ path: string[]
+ data: any[]
+ config: {
+ groups?: {
+ name: string
+ rule: string
+ description: string
+ }[]
+ }
+}
+
+interface DataEntry {
+ name: string
+ isDirectory: boolean
+ fileInfo: {
+ date: string
+ size: number
+ }
+}
+
+const sortDirectory = (a: DataEntry, b: DataEntry) => {
+ if (a.isDirectory === b.isDirectory) {
+ return a.name.localeCompare(b.name)
+ }
+ return a.isDirectory ? -1 : 1
+}
+
+function Data({ root, path = [], data: dataRaw = [], config = {} }: DataProps) {
+// function Data({ root, path: _path = [], data: dataRaw = [], config = {} }: DataProps) {
+ // const path = ['data', ..._path]
+ // const currentDir = [...path].slice(-1)
+ // const parentsDir = [...path].slice(0, -1)
+ const currentDir = ['data', ...path].slice(-1)
+ const parentsDir = ['data', ...path].slice(0, -1)
+ const parentDir = parentsDir.slice(-1)[0]
+ const sectionsConfig = useMemo(() => Object.fromEntries((config.groups || []).map(group => [group.name, group])), [config.groups])
+ const { __: dataDefault, ...dateSections } = useMemo>(() => {
+ const sections = Object.fromEntries((config.groups || []).map(group => [group.name, []]))
+
+ const dataSections = dataRaw.reduce((acc, entry) => {
+ const fileDate = entry.fileInfo?.date && new Date(entry.fileInfo.date)
+ const { year, month, day } = /^(?\d{4})-(?\d{2})-(?\d{2})$/.exec(entry.name)?.groups || {}
+ const humanDateDirName = year && month && day && (
+ new Date(+year, (+month - 1), +day)
+ ).toLocaleString('fr-FR', dateFormatOptions.dateFormatOptionsLongDate)
+
+ const finalEntry = {
+ ...entry,
+ humanDirName: humanDateDirName,
+ fileDate,
+ }
+
+ const section = config.groups?.find(({ rule }: { rule: string }) => rule && (new RegExp(rule)).test(entry.name))
+ acc[section ? section.name : '__'].push(finalEntry)
+
+ return acc
+ }, (sections.__ ? sections : { __: [], ...sections }))
+ return dataSections
+ }, [dataRaw, config.groups])
+
+ console.log('path >>>', path)
+ console.log('parentDir >>>', parentDir)
+
+ return (
+
+ {/*
({
+ label: dir,
+ linkProps: { href: `/data/${path.slice(0, index).join('/')}` },
+ })),
+ ]}
+ /> */}
+
+ {/* Breadcrumb : */}
+ {/*
+ {root
+ ? {root.label}{' '}
+ : null}
+ {path.length > 0 && (
+ parentsDir.map((dir, index) => (
+ > {dir}{' '}
+ ))
+ )}
+ > {currentDir}{' '}
+
*/}
+
+ {parentDir && }
+
+ {(!dataDefault || dataDefault.length === 0) && (!dateSections || Object.keys(dateSections).length === 0) && (
+ Ce répertoire est vide
+ )}
+
+
+ {dataDefault?.length > 0 && (
+
+ {
+ dataDefault.sort(sortDirectory).map(entry => (
+
+ )}
+
+ {dateSections && Object.entries(dateSections).map(([sectionName, sectionEntries]) => {
+ const { description } = sectionsConfig[sectionName] || {}
+ return (
+
+
+
{sectionName}
+ {description &&
{description}
}
+
+ {
+ sectionEntries.sort(sortDirectory).map(entry => (
+
+
+ )
+ }
+ )}
+