> ## Documentation Index
> Fetch the complete documentation index at: https://docs.datanumia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Profile summary

## Functional description

***

### Main feature

The profile read web component allows users to **consult a read-only summary of their energy profile** organized in **5 cards**, one per profile section.

Each card displays the values filled in by the user in the `dtn-profile` form. <Badge icon="clock" stroke color="blue" size="md">Coming soon</Badge>

At the top of the component, a **circular completion indicator** shows the percentage of profile fields that have been answered.

The component is designed to be used alongside `dtn-profile`: when the tenant enables it, each card exposes a **"Edit button"** that emits a `dtn:profile-goto` event, so the tenant application can navigate the user directly to the corresponding step in the profile form.

***

### Detailed features

**Completion indicator**

A circular progress indicator is displayed at the top of the component. It shows the current profile completion percentage (0 to 100), computed server-side.

**5 profile section cards**

| Card | Profile section |
| - | - |
| General information (residency, occupancy, surface, occupants, heating, hot water) | `general` |
| Housing (type, specificities, year of construction, natural light, renovation) | `housing` |
| Equipment (heating systems, air conditioning, electric vehicle, swimming pool) | `equipment` |
| Other equipment (cooking, audiovisual, household appliances, leisure, lighting) | `otherEquipment` |
| Lifestyle (wash type, shutters, weekend/seasonal absences) | `lifestyle` |

Each card displays the fields that have been filled in by the user. Empty fields are shown in a neutral state.

**Redirection to the profile form**

When `enable-redirection-event` is `true`, each card shows an **"Edit"** button. Clicking it dispatches a `dtn:profile-goto` custom event carrying the section key, so the tenant application can navigate the user directly to that step in `dtn-profile`.

This mechanism uses a Custom DOM Event that **bubbles and is composed** (crosses the ShadowDom boundary), making it interceptable from the host page.

```javascript theme={null}
window.addEventListener('dtn:profile-goto', (event) => {
  const { section } = event.detail;
  // Navigate to dtn-profile with active-step-section = section
  document.querySelector('dtn-profile').setAttribute('active-step-section', section);
});
```

<Note>
  The following documentation described the profile form to complete, [dtn-profile](.3-Profile-entry.md).
</Note>

**Automatic synchronization with `dtn-profile`** <Badge icon="clock" stroke color="blue" size="md">Coming soon</Badge>

The `dtn-profile-read` component shares the data with `dtn-profile`. Any profile save performed in the form is immediately reflected in the read view without requiring a page reload or a new API call.

***

### Error and information messages handling <Badge icon="clock" stroke color="blue" size="md">Coming soon</Badge>

The web component display messages in the following cases:

**Use case 1: Profile not yet filled in**

If the profile has never been filled in by the user, all cards
are displayed in an empty state — no data is shown inside
the cards, and the completion indicator shows 0%.

**Use case 2: API error (400/500)**

If the profile cannot be loaded due to an API error, an error
state is displayed in place of the cards.

***

### Loading state handling <Badge icon="clock" stroke color="blue" size="md">Coming soon</Badge>

When profile data takes time to load (slow network or API
response > 300 ms), a skeleton screen is displayed to:

* Indicate that data is loading
* Preview the layout of the 5 cards before content
  appears

***

### Responsiveness

The `dtn-profile-read` web component is fully responsive.

***

### Provider customization

The component inherits the provider's design system via the Étincelle Design System and supports customization through:

* **Brand colors** applied via CSS custom properties from the provider's stylesheet
* **Radius overrides** for card shapes

For more details, refer to the *How to parameterize a web component* section.

### Language management

The web component supports multiple languages.

* `fr-FR`
* `en-US`

***

### Accessibility

The component is developed following the RGAA (French General Accessibility Improvement Framework) requirements and accessibility best practices.

Examples of RGAA accessibility requirements implemented in the `dtn-profile-read` web component include :

* Each card is navigable by keyboard
* The "Edit" buttons (when enabled) are focusable and labelled for screen readers
* The circular completion indicator includes an accessible label announcing the percentage

<Note>
  The accessibility of this web component does not imply that the entire page where it is integrated is accessible. Accessibility compliance must be assessed at page level, including any surrounding content, custom code, and third-party components provided by the integrating application.
</Note>

***

### API used to display profile data

Profile data is provided by the **Profile API**:

\-- **GET /profile** — fetches the current user profile to reflect completion rate.

***

[Integration of the web component 'Profil summary'](/docs/DeveloperTools/HomeInteface/05-home-basic/04-profil-summary)