Découpe la page détail des indicateurs avec des onglets

app.territoiresentransitions.react/src/app/pages/collectivite/CollectivitePageLayout/CollectivitePageLayout.tsx

@@ -1,12 +1,12 @@
+import classNames from 'classnames';
 import React, { useEffect, useMemo, useState } from 'react';
-import SideNavContainer, { SideNavContainerProps } from './SideNavContainer';
+import Panel from './Panel/Panel';
 import {
   PanelProvider,
   usePanelDispatch,
   usePanelState,
 } from './Panel/PanelContext';
-import classNames from 'classnames';
-import Panel from './Panel/Panel';
+import SideNavContainer, { SideNavContainerProps } from './SideNavContainer';
 
 type Props = {
   children: React.ReactNode;
@@ -62,7 +62,7 @@ const PageLayout = ({ children, sideNav, dataTest }: Props) => {
   return (
     <div
       data-test={dataTest}
-      className={`grid ${gridCols} m-auto xl:max-w-[90rem] 2xl:px-6`}
+      className={`grid ${gridCols} mx-auto xl:max-w-[90rem] 2xl:px-6`}
     >
       {/** Side nav */}
       {sideNav && (

app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/Indicateur/FichesActionLiees.tsx

@@ -26,7 +26,7 @@ export const FichesActionLiees = (props: TFichesActionProps) => {
   const isReadonly = collectivite?.readonly ?? false;
 
   return (
-    <>
+    <div className="flex flex-col gap-8">
       <Field title="Fiches des plans liées">
         <FichesActionsDropdown
           disabled={isReadonly}
@@ -42,6 +42,6 @@ export const FichesActionLiees = (props: TFichesActionProps) => {
       </Field>
 
       <FichesLieesListe fiches={fiches ?? []} />
-    </>
+    </div>
   );
 };

app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/Indicateur/Indicateur.tsx

@@ -8,8 +8,7 @@ import {
 import { useCollectiviteId } from '@/app/core-logic/hooks/params';
 import { redirect } from 'next/navigation';
 import { useParams } from 'react-router-dom';
-import { IndicateurPersonnalise } from './IndicateurPersonnalise';
-import { IndicateurPredefini } from './IndicateurPredefini';
+import IndicateurDetail from '../detail/IndicateurDetail';
 
 /**
  * Affiche le détail d'un indicateur
@@ -42,18 +41,12 @@ const Indicateur = () => {
   }
 
   return (
-    <div
-      className="w-full"
-      data-test={
+    <IndicateurDetail
+      dataTest={
         indicateurId !== undefined ? `ind-${indicateurId}` : `ind-v-${view}`
       }
-    >
-      {isPerso ? (
-        <IndicateurPersonnalise indicateurId={indicateurId as number} />
-      ) : (
-        <IndicateurPredefini indicateurId={indicateurId} />
-      )}
-    </div>
+      {...{ indicateurId, isPerso }}
+    />
   );
 };
 

app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/Indicateur/detail/HeaderIndicateur.tsx

@@ -52,7 +52,7 @@ export const HeaderIndicateur = ({
   return (
     <div
       className={classNames(
-        'mt-4 group sticky top-0 flex items-center mx-auto py-6 px-6 text-grey-9 bg-bf925 z-40',
+        'group sticky top-0 flex items-center mx-auto py-6 px-6 text-grey-9 bg-bf925 z-40',
         { 'cursor-text': !isReadonly }
       )}
       onClick={!isReadonly ? handleEditFocus : undefined}
@@ -62,17 +62,22 @@ export const HeaderIndicateur = ({
           data-test="HeaderTitleInput"
           ref={titreInputRef}
           className={classNames(
-            'w-full leading-snug !outline-none !resize-none !text-lg'
+            'w-full leading-snug !outline-none !resize-none !text-lg',
+            {
+              '!cursor-default disabled:!text-grey-9': isReadonly,
+            }
           )}
           initialValue={title}
           placeholder={'Sans titre'}
           onBlur={handleChangeTitle}
           disabled={isReadonly}
         />
-        <Icon
-          icon="edit-line"
-          className="my-auto ml-6 hidden group-hover:block"
-        />
+        {!isReadonly && (
+          <Icon
+            icon="edit-line"
+            className="my-auto ml-6 hidden group-hover:block"
+          />
+        )}
       </div>
     </div>
   );

app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/Indicateur/detail/IndicateurCompose.tsx

@@ -59,7 +59,9 @@ export const IndicateurCompose = ({
   );
 };
 // détermine les actions liées communes à un ensemble de définitions
-const findCommonLinkedActions = (definitions: IndicateurDefinition[]) => {
+export const findCommonLinkedActions = (
+  definitions: IndicateurDefinition[]
+) => {
   // extrait les tableaux d'ids
   const actionsIds = definitions.map(({ actions }) => actions.map((a) => a.id));
 

app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/Indicateur/detail/IndicateurInfoLiees.tsx

@@ -56,7 +56,7 @@ export const IndicateurInfoLiees = (props: TIndicateurInfoLieesProps) => {
     .filter((id) => !!id) as string[];
 
   return (
-    <>
+    <div className="flex flex-col gap-8">
       {/** personne pilote */}
       <Field title="Personne pilote">
         <PersonnesDropdown
@@ -97,6 +97,6 @@ export const IndicateurInfoLiees = (props: TIndicateurInfoLieesProps) => {
           />
         </Field>
       )}
-    </>
+    </div>
   );
 };

app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/Indicateur/detail/IndicateurValuesTabs.tsx

@@ -57,7 +57,34 @@ export const IndicateurValuesTabs = ({
   }, [avecObjectifs, avecResultats, activeTab]);
 
   return (
-    <>
+    <div className="flex flex-col gap-2">
+      <Tabs defaultActiveTab={activeTab} onChange={onChangeTab}>
+        {avecResultats ? (
+          <Tab label="Résultats" icon="checkbox">
+            <IndicateurValuesTable
+              definition={definition}
+              type="resultat"
+              valeurs={resultats}
+              valeursBrutes={valeursBrutes!}
+              isReadonly={isReadonly}
+              importSource={importSource}
+              confidentiel={confidentiel}
+            />
+          </Tab>
+        ) : null}
+        {avecObjectifs ? (
+          <Tab label="Objectifs" icon="calendar-2">
+            <IndicateurValuesTable
+              definition={definition}
+              type="objectif"
+              valeurs={objectifs}
+              valeursBrutes={valeursBrutes!}
+              isReadonly={isReadonly}
+            />
+          </Tab>
+        ) : null}
+      </Tabs>
+
       {!isReadonly && (
         <>
           <div className="flex my-10">
@@ -92,32 +119,6 @@ export const IndicateurValuesTabs = ({
           )}
         </>
       )}
-      <Tabs defaultActiveTab={activeTab} onChange={onChangeTab}>
-        {avecResultats ? (
-          <Tab label="Résultats" icon="checkbox">
-            <IndicateurValuesTable
-              definition={definition}
-              type="resultat"
-              valeurs={resultats}
-              valeursBrutes={valeursBrutes!}
-              isReadonly={isReadonly}
-              importSource={importSource}
-              confidentiel={confidentiel}
-            />
-          </Tab>
-        ) : null}
-        {avecObjectifs ? (
-          <Tab label="Objectifs" icon="calendar-2">
-            <IndicateurValuesTable
-              definition={definition}
-              type="objectif"
-              valeurs={objectifs}
-              valeursBrutes={valeursBrutes!}
-              isReadonly={isReadonly}
-            />
-          </Tab>
-        ) : null}
-      </Tabs>
-    </>
+    </div>
   );
 };

app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/components/BadgeIndicateurPerso.tsx

@@ -10,7 +10,7 @@ const BadgeIndicateurPerso = ({ size }: Props) => {
       size={size}
       light
       iconPosition="left"
-      icon="line-chart-line"
+      icon="user-line"
     />
   );
 };

app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/detail/ActionsLiees.tsx

@@ -0,0 +1,33 @@
+import { EmptyCard } from '@/ui';
+import ActionPicto from '../../PlansActions/FicheAction/ActionsLiees/ActionPicto';
+import ActionsLieesListe from '../../PlansActions/FicheAction/ActionsLiees/ActionsLieesListe';
+
+type Props = {
+  actionsIds: string[];
+};
+
+const ActionsLiees = ({ actionsIds }: Props) => {
+  const isEmpty = actionsIds.length === 0;
+
+  return isEmpty ? (
+    <EmptyCard
+      picto={(props) => <ActionPicto {...props} />}
+      title="Aucune action des référentiels n'est liée !"
+      size="xs"
+    />
+  ) : (
+    <div>
+      <div className="w-full border-b border-primary-3 mb-6">
+        <h6 className="text-lg h-[2.125rem] mb-5">
+          Actions du référentiel associées
+        </h6>
+      </div>
+      <ActionsLieesListe
+        actionsIds={actionsIds}
+        className="sm:grid-cols-2 md:grid-cols-3"
+      />
+    </div>
+  );
+};
+
+export default ActionsLiees;

app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/detail/DescriptionIndicateurInput.tsx

@@ -0,0 +1,26 @@
+import { AutoResizedTextarea, Field } from '@/ui';
+
+type Props = {
+  description: string | undefined | null;
+  disabled?: boolean;
+  updateDescription: (value: string) => void;
+};
+
+const DescriptionIndicateurInput = ({
+  description,
+  disabled,
+  updateDescription,
+}: Props) => {
+  return (
+    <Field title="Description et méthodologie de calcul">
+      <AutoResizedTextarea
+        data-test="desc"
+        value={description ?? undefined}
+        disabled={disabled}
+        onBlur={(evt) => updateDescription(evt.currentTarget.value)}
+      />
+    </Field>
+  );
+};
+
+export default DescriptionIndicateurInput;

app.territoiresentransitions.react/src/app/pages/collectivite/Indicateurs/detail/DonneesIndicateur.tsx

@@ -0,0 +1,80 @@
+import { ImportSourcesSelector } from '../Indicateur/detail/ImportSourcesSelector';
+import IndicateurDetailChart from '../Indicateur/detail/IndicateurDetailChart';
+import { IndicateurInfoLiees } from '../Indicateur/detail/IndicateurInfoLiees';
+import { IndicateurValuesTabs } from '../Indicateur/detail/IndicateurValuesTabs';
+import { useIndicateurImportSources } from '../Indicateur/detail/useImportSources';
+import { TIndicateurDefinition } from '../types';
+import DescriptionIndicateurInput from './DescriptionIndicateurInput';
+import UniteIndicateurInput from './UniteIndicateurInput';
+
+type Props = {
+  definition: TIndicateurDefinition;
+  isPerso?: boolean;
+  isReadonly?: boolean;
+  updateUnite: (value: string) => void;
+  updateDescription: (value: string) => void;
+};
+
+const DonneesIndicateur = ({
+  definition,
+  isPerso = false,
+  isReadonly = false,
+  updateUnite,
+  updateDescription,
+}: Props) => {
+  const { description, commentaire, unite, rempli, titre, titreLong } =
+    definition;
+
+  const { sources, currentSource, setCurrentSource } =
+    useIndicateurImportSources(definition.id);
+
+  return (
+    <div className="flex flex-col gap-8">
+      {!!sources?.length && (
+        <ImportSourcesSelector
+          definition={definition}
+          sources={sources}
+          currentSource={currentSource}
+          setCurrentSource={setCurrentSource}
+        />
+      )}
+
+      {/* Graphe */}
+      <IndicateurDetailChart
+        className="mb-8"
+        definition={definition}
+        source={currentSource}
+        rempli={rempli}
+        titre={titreLong || titre}
+        fileName={titre}
+      />
+
+      {/* Tableau */}
+      <IndicateurValuesTabs
+        definition={definition}
+        importSource={currentSource}
+      />
+
+      {/* Description */}
+      <DescriptionIndicateurInput
+        description={isPerso ? description : commentaire}
+        updateDescription={updateDescription}
+        disabled={isReadonly}
+      />
+
+      {/* Infos liées - à déplacer */}
+      <IndicateurInfoLiees definition={definition} />
+
+      {/* Unité personnalisée - à déplacer */}
+      {isPerso && (
+        <UniteIndicateurInput
+          unite={unite}
+          updateUnite={updateUnite}
+          disabled={isReadonly}
+        />
+      )}
+    </div>
+  );
+};
+
+export default DonneesIndicateur;