From 8da1f5f05d2582c9e6dca49de7d59b611d720711 Mon Sep 17 00:00:00 2001
From: Fufeck <fabien.tafforeau@gmail.com>
Date: Wed, 3 May 2023 09:54:47 +0400
Subject: [PATCH] edit client api-depot

---
 components/api-depot/chef-de-file.js          | 73 +++++++++++--------
 components/api-depot/client-item.js           | 11 +++
 .../client/client-form/chef-de-file-form.js   |  8 +-
 .../client-form/chef-de-file-perimeter.js     |  1 -
 .../client/client-form/mandataire-form.js     |  7 +-
 .../api-depot/client/client-form/perimeter.js | 65 ++++++++++++-----
 components/api-depot/client/client-header.js  | 28 +++----
 components/api-depot/client/client-options.js | 26 -------
 components/api-depot/clients-list.js          |  3 +-
 components/api-depot/mandataire.js            | 17 +++--
 components/autocomplete-input.js              | 48 ++++++++++++
 components/text-input.js                      | 36 +++++++++
 layouts/main.js                               |  5 +-
 pages/api-depot/client/client-form.js         | 23 ++++--
 pages/api-depot/client/index.js               | 63 +++++-----------
 15 files changed, 249 insertions(+), 165 deletions(-)
 delete mode 100644 components/api-depot/client/client-options.js
 create mode 100644 components/autocomplete-input.js
 create mode 100644 components/text-input.js

diff --git a/components/api-depot/chef-de-file.js b/components/api-depot/chef-de-file.js
index 450c782..9de8693 100644
--- a/components/api-depot/chef-de-file.js
+++ b/components/api-depot/chef-de-file.js
@@ -9,60 +9,71 @@ function getPerimeters(perimetre) {
     const [territoireType, code] = p.split('-')
 
     if (territoireType === 'epci') {
-      return `EPCI de ${getEPCI(code).nom}`
+      return `EPCI de ${getEPCI(code).nom} (${code})`
     }
 
     if (territoireType === 'departement') {
-      return `Département de ${getDepartement(code).nom}`
+      return `Département de ${getDepartement(code).nom} (${code})`
     }
 
     if (territoireType === 'commune') {
-      return `Commune de ${getCommune(code).nom}`
+      return `Commune de ${getCommune(code).nom} (${code})`
     }
 
     return 'inconnu'
   }) : null
 }
 
-const ChefDeFile = ({_id, nom, email, perimetre, signataireCharte}) => {
+const ChefDeFile = ({hasChefDeFile, _id, nom, email, perimetre, signataireCharte}) => {
   const perimeters = getPerimeters(perimetre)
   return (
-    <div className='fr-container'>
-      <div className='fr-grid-row fr-grid-row--gutters fr-grid-row--middle'>
-        <div className='fr-col'>
-          <h3>{nom}</h3>
-          <MongoId id={_id} />
-        </div>
+    <div className='fr-py-4v'>
+      <h1 className='fr-m-1v'>Chef de file</h1>
+      {hasChefDeFile ? (
+        <div className='fr-container fr-py-4v'>
+          <div className='fr-grid-row fr-grid-row--gutters fr-grid-row--middle'>
+            <div className='fr-col-10'>
+              <h3>{nom}</h3>
+              <MongoId id={_id} />
+              <a href={`emailTo:${email}`}>{email}</a>
+            </div>
 
-        <div className='fr-col'>
-          <a href={`emailTo:${email}`}>{email}</a>
-        </div>
+            <div className='fr-col'>
+              <input type='checkbox' id='checkbox' name='checkbox' checked={signataireCharte} disabled />
+              <label className='fr-label' htmlFor='checkbox'>signataire de la charte</label>
+            </div>
+          </div>
 
-        <div className='fr-col'>
-          <input type='checkbox' id='checkbox' name='checkbox' checked={signataireCharte} disabled />
-          <label className='fr-label' htmlFor='checkbox'>signataire de la charte</label>
+          <div className='fr-my-2w'>
+            <label className='fr-label'>Périmètre :</label>
+            <ul>
+              {perimeters ? perimeters.map(p => (
+                <li key={p}>{p}</li>
+              )) : 'Aucune périmètre n’est défini'}
+            </ul>
+          </div>
         </div>
-      </div>
-
-      <div className='fr-my-2w'>
-        <label className='fr-label'>Périmètre :</label>
-        <ul>
-          {perimeters ? perimeters.map(p => (
-            <li key={p}>{p}</li>
-          )) : 'Aucune périmètre n’est défini'}
-        </ul>
-      </div>
+      ) : (
+        <div className='fr-container fr-py-4v'>
+          <div className='fr-grid-row fr-grid-row--gutters'>
+            <div className='fr-col'>
+              Aucun chef de file
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   )
 }
 
 /* eslint-disable react/boolean-prop-naming */
 ChefDeFile.propTypes = {
-  _id: PropTypes.string.isRequired,
-  nom: PropTypes.string.isRequired,
-  email: PropTypes.string.isRequired,
-  perimetre: PropTypes.string.isRequired,
-  signataireCharte: PropTypes.bool.isRequired
+  hasChefDeFile: PropTypes.bool,
+  _id: PropTypes.string,
+  nom: PropTypes.string,
+  email: PropTypes.string,
+  perimetre: PropTypes.array,
+  signataireCharte: PropTypes.bool
 }
 /* eslint-enable react/boolean-prop-naming */
 
diff --git a/components/api-depot/client-item.js b/components/api-depot/client-item.js
index d4b6f5d..493eac4 100644
--- a/components/api-depot/client-item.js
+++ b/components/api-depot/client-item.js
@@ -22,6 +22,17 @@ const ClientItem = ({_id, nom, mandataire, chefDeFile, authorizationStrategy, ac
     <td className='fr-col fr-my-1v'>
       <input type='checkbox' id='checkbox' name='checkbox' checked={options.relaxMode} disabled />
     </td>
+    <td className='fr-col fr-my-1v'>
+      <Link passHref href={{
+        pathname: '/api-depot/client/client-form',
+        query: {clientId: _id, demo: isDemo ? 1 : 0}
+      }}
+      >
+        <Button iconId='fr-icon-edit-line' iconPosition='right'>
+          Editer
+        </Button>
+      </Link>
+    </td>
     <td className='fr-col fr-my-1v'>
       <Link passHref href={{
         pathname: '/api-depot/client',
diff --git a/components/api-depot/client/client-form/chef-de-file-form.js b/components/api-depot/client/client-form/chef-de-file-form.js
index d08fb5c..fcf0b5b 100644
--- a/components/api-depot/client/client-form/chef-de-file-form.js
+++ b/components/api-depot/client/client-form/chef-de-file-form.js
@@ -19,12 +19,13 @@ const ChefDeFileForm = ({selectedChefDeFile, chefsDeFile, onSelect}) => {
   const [isCreateFormOpen, setIsCreateFormOpen] = useState(false)
 
   const chefsDeFileOptions = useMemo(() =>
-    chefsDeFile.sort((a, b) => a.nom > b.nom).map(m => ({label: m.nom, value: m._id}))
+    chefsDeFile.sort((a, b) => a.nom > b.nom).map(m => ({label: m.nom + ' (' + m.email + ')', value: m._id}))
   , [chefsDeFile])
 
   const handleCreationForm = (event, isOpen) => {
     event.preventDefault()
     setIsCreateFormOpen(isOpen)
+    onSelect('')
   }
 
   useEffect(() => {
@@ -112,7 +113,10 @@ const ChefDeFileForm = ({selectedChefDeFile, chefsDeFile, onSelect}) => {
 }
 
 ChefDeFileForm.propTypes = {
-  selectedChefDeFile: PropTypes.string,
+  selectedChefDeFile: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+  ]),
   chefsDeFile: PropTypes.array.isRequired,
   onSelect: PropTypes.func.isRequired
 }
diff --git a/components/api-depot/client/client-form/chef-de-file-perimeter.js b/components/api-depot/client/client-form/chef-de-file-perimeter.js
index 3cbaba1..c4372e9 100644
--- a/components/api-depot/client/client-form/chef-de-file-perimeter.js
+++ b/components/api-depot/client/client-form/chef-de-file-perimeter.js
@@ -13,7 +13,6 @@ const ChefDeFilePerimeter = ({perimeters, handlePerimeter}) => {
 
   const handleChange = useCallback((perimeter, key, idx) => {
     const {type, code} = perimeter
-
     const cpy = [...perimeters]
     cpy[idx] = {type, code, key}
 
diff --git a/components/api-depot/client/client-form/mandataire-form.js b/components/api-depot/client/client-form/mandataire-form.js
index e34918c..82b1aa2 100644
--- a/components/api-depot/client/client-form/mandataire-form.js
+++ b/components/api-depot/client/client-form/mandataire-form.js
@@ -14,7 +14,7 @@ const MandataireForm = ({selectedMandataire, mandataires, onSelect}) => {
   const [isCreateFormOpen, setIsCreateFormOpen] = useState(false)
 
   const mandatairesOptions = useMemo(() =>
-    mandataires.sort((a, b) => a.nom > b.nom).map(m => ({label: m.nom, value: m._id}))
+    mandataires.sort((a, b) => a.nom > b.nom).map(m => ({label: m.nom + ' (' + m.email + ')', value: m._id}))
   , [mandataires])
 
   const handleCreationForm = (event, isOpen) => {
@@ -92,7 +92,10 @@ const MandataireForm = ({selectedMandataire, mandataires, onSelect}) => {
 }
 
 MandataireForm.propTypes = {
-  selectedMandataire: PropTypes.string,
+  selectedMandataire: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.object,
+  ]),
   mandataires: PropTypes.array.isRequired,
   onSelect: PropTypes.func.isRequired
 }
diff --git a/components/api-depot/client/client-form/perimeter.js b/components/api-depot/client/client-form/perimeter.js
index 3735ad9..60ca44c 100644
--- a/components/api-depot/client/client-form/perimeter.js
+++ b/components/api-depot/client/client-form/perimeter.js
@@ -1,6 +1,11 @@
+import {useEffect, useState} from 'react'
+import {uniqueId} from 'lodash'
 import PropTypes from 'prop-types'
-import Input from '@codegouvfr/react-dsfr/Input'
+import epcis from '@etalab/decoupage-administratif/data/epci.json'
+import departements from '@etalab/decoupage-administratif/data/departements.json'
+import allCommunes from '@etalab/decoupage-administratif/data/communes.json'
 
+import AutocompleteInput from '@/components/autocomplete-input'
 import SelectInput from '@/components/select-input'
 
 const typeOptions = [
@@ -9,25 +14,47 @@ const typeOptions = [
   {label: 'Commune', value: 'commune'}
 ]
 
-const Perimeter = ({type, code, handlePerimeter}) => (
-  <div className='fr-grid-row fr-grid-row--gutters'>
-    <div className='fr-col-6'>
-      <SelectInput
-        label='Type'
-        value={type}
-        options={typeOptions}
-        handleChange={v => handlePerimeter({type: v, code})}
-      />
-    </div>
-    <div className='fr-col-6'>
-      <Input
-        label='Code'
-        value={code}
-        onChange={e => handlePerimeter({type, code: e.target.value})}
-      />
+const Perimeter = ({type, code, handlePerimeter}) => {
+  const [perimetreOptions, setPerimetreOptions] = useState([])
+
+  useEffect(() => {
+    let options = []
+    if (type === 'epci') {
+      options = epcis.map(({code, nom}) => ({value: code, label: nom}))
+    } else if (type === 'departement') {
+      options = departements.map(({code, nom}) => ({value: code, label: nom}))
+    } else if (type === 'commune') {
+      options = allCommunes
+        .filter(c => ['commune-actuelle', 'arrondissement-municipal'].includes(c.type))
+        .map(({code, nom}) => ({value: code, label: nom}))
+    }
+
+    setPerimetreOptions(options)
+  }, [type])
+
+  return (
+    <div className='fr-grid-row fr-grid-row--gutters'>
+      <div className='fr-col-6'>
+        <SelectInput
+          label='Type'
+          value={type}
+          options={typeOptions}
+          handleChange={v => handlePerimeter({type: v, code})}
+        />
+      </div>
+
+      <div className='fr-col-6'>
+        <AutocompleteInput
+          id={uniqueId()}
+          label='Code'
+          options={perimetreOptions}
+          value={code}
+          onChange={e => handlePerimeter({type, code: e.target.value})}
+        />
+      </div>
     </div>
-  </div>
-)
+  )
+}
 
 Perimeter.propTypes = {
   type: PropTypes.string.isRequired,
diff --git a/components/api-depot/client/client-header.js b/components/api-depot/client/client-header.js
index 38ff8b3..a07528b 100644
--- a/components/api-depot/client/client-header.js
+++ b/components/api-depot/client/client-header.js
@@ -1,23 +1,16 @@
 import PropTypes from 'prop-types'
 
-import ToggleSwitch from '@codegouvfr/react-dsfr/ToggleSwitch'
 import MongoId from '@/components/mongo-id'
 
-const ClientHeader = ({id, nom, isActive, isDisabled, onUpdate}) => (
-  <div className='fr-container fr-py-12v'>
-    <div className='fr-grid-row fr-grid-row--gutters'>
-      <div className='fr-col-10'>
-        <h1>{nom}</h1>
-        <MongoId id={id} />
-      </div>
-
-      <div className='fr-col-2'>
-        <ToggleSwitch
-          label=''
-          checked={isActive}
-          disabled={isDisabled}
-          onChange={checked => onUpdate({active: checked})}
-        />
+const ClientHeader = ({id, nom}) => (
+  <div className='fr-py-4v'>
+    <h1 className='fr-m-1v' >Client</h1>
+    <div className='fr-container fr-py-4v'>
+      <div className='fr-grid-row fr-grid-row--gutters'>
+        <div className='fr-col-10'>
+          <h2>{nom}</h2>
+          <MongoId id={id} />
+        </div>
       </div>
     </div>
   </div>
@@ -26,9 +19,6 @@ const ClientHeader = ({id, nom, isActive, isDisabled, onUpdate}) => (
 ClientHeader.propTypes = {
   id: PropTypes.string.isRequired,
   nom: PropTypes.string.isRequired,
-  isActive: PropTypes.bool.isRequired,
-  isDisabled: PropTypes.bool.isRequired,
-  onUpdate: PropTypes.func.isRequired
 }
 
 export default ClientHeader
diff --git a/components/api-depot/client/client-options.js b/components/api-depot/client/client-options.js
deleted file mode 100644
index 0369246..0000000
--- a/components/api-depot/client/client-options.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import PropTypes from 'prop-types'
-
-import ToggleSwitch from '@codegouvfr/react-dsfr/ToggleSwitch'
-
-const ClientOptions = ({isModeRelax, isDisabled, onUpdate}) => (
-  <div className='fr-container fr-py-12v'>
-    <h2>Options</h2>
-    <div>
-      <ToggleSwitch
-        label='Mode relax'
-        helperText='Le mode relax assoupli les vérifications du Validateur BAL'
-        checked={isModeRelax}
-        disabled={isDisabled}
-        onChange={checked => onUpdate({options: {relaxMode: checked}})}
-      />
-    </div>
-  </div>
-)
-
-ClientOptions.propTypes = {
-  isModeRelax: PropTypes.bool.isRequired,
-  isDisabled: PropTypes.bool.isRequired,
-  onUpdate: PropTypes.func.isRequired
-}
-
-export default ClientOptions
diff --git a/components/api-depot/clients-list.js b/components/api-depot/clients-list.js
index 7cb62e6..4e485e2 100644
--- a/components/api-depot/clients-list.js
+++ b/components/api-depot/clients-list.js
@@ -54,7 +54,8 @@ const ClientsList = ({isDemo}) => {
               <th scope='col'>Stratégie d’autorisation</th>
               <th scope='col'>Activé</th>
               <th scope='col'>Mode relax</th>
-              <th scope='col' />
+              <th scope='col'>Editer</th>
+              <th scope='col'>Consulter</th>
             </tr>
           </thead>
 
diff --git a/components/api-depot/mandataire.js b/components/api-depot/mandataire.js
index 7ce875c..60aabf2 100644
--- a/components/api-depot/mandataire.js
+++ b/components/api-depot/mandataire.js
@@ -3,14 +3,15 @@ import PropTypes from 'prop-types'
 import MongoId from '@/components/mongo-id'
 
 const Mandataire = ({_id, nom, email}) => (
-  <div className='fr-container'>
-    <div className='fr-grid-row fr-grid-row--gutters'>
-      <div className='fr-col'>
-        <h3>{nom}</h3>
-        <MongoId id={_id} />
-      </div>
-      <div className='fr-col'>
-        <a href={`emailTo:${email}`}>{email}</a>
+  <div className='fr-py-4v'>
+    <h1 className='fr-m-1v'>Mandataire</h1>
+    <div className='fr-container fr-py-4v'>
+      <div className='fr-grid-row fr-grid-row--gutters'>
+        <div className='fr-col'>
+          <h3>{nom}</h3>
+          <MongoId id={_id} />
+          <a href={`emailTo:${email}`}>{email}</a>
+        </div>
       </div>
     </div>
   </div>
diff --git a/components/autocomplete-input.js b/components/autocomplete-input.js
new file mode 100644
index 0000000..9d7e7d9
--- /dev/null
+++ b/components/autocomplete-input.js
@@ -0,0 +1,48 @@
+import PropTypes from 'prop-types'
+
+const AutocompleteInput = ({id, label, value, hint, options, isDisabled, onChange}) => (
+  <div className={`fr-input-group ${isDisabled ? 'fr-select-input--disabled' : ''}`}>
+    <label className='fr-label' htmlFor={`input-${label}`}>
+      {label}
+      {hint && <span className='fr-hint-text'>{hint}</span>}
+    </label>
+
+    <input
+      className='fr-input'
+      list={'browsers#' + id}
+      id={`input-${label}`}
+      name={`input-${label}`}
+      value={value}
+      disabled={isDisabled}
+      onChange={event => onChange(event)}
+    />
+    <datalist id={'browsers#' + id}>
+      {options.map(option => (
+        <option
+          key={option.label}
+          value={option.value}
+        >
+          {option.label}
+        </option>
+      ))}
+    </datalist>
+  </div>
+)
+
+AutocompleteInput.defaultProps = {
+  value: '',
+  hint: null,
+  isDisabled: false
+}
+
+AutocompleteInput.propTypes = {
+  id: PropTypes.string.isRequired,
+  label: PropTypes.string.isRequired,
+  value: PropTypes.string,
+  hint: PropTypes.string,
+  options: PropTypes.array.isRequired,
+  isDisabled: PropTypes.bool,
+  onChange: PropTypes.func.isRequired
+}
+
+export default AutocompleteInput
diff --git a/components/text-input.js b/components/text-input.js
new file mode 100644
index 0000000..f070301
--- /dev/null
+++ b/components/text-input.js
@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types'
+
+const TextInput = ({label, value, hint, isDisabled, onChange}) => (
+  <div className={`fr-input-group ${isDisabled ? 'fr-select-input--disabled' : ''}`}>
+    <label className='fr-label' htmlFor={`input-${label}`}>
+      {label}
+      {hint && <span className='fr-hint-text'>{hint}</span>}
+    </label>
+
+    <input
+      className='fr-input'
+      id={`input-${label}`}
+      name={`input-${label}`}
+      value={value}
+      disabled={isDisabled}
+      onChange={event => onChange(event)}
+    />
+  </div>
+
+)
+
+TextInput.defaultProps = {
+  value: '',
+  hint: null,
+  isDisabled: false
+}
+
+TextInput.propTypes = {
+  label: PropTypes.string.isRequired,
+  value: PropTypes.string,
+  hint: PropTypes.string,
+  isDisabled: PropTypes.bool,
+  onChange: PropTypes.func.isRequired
+}
+
+export default TextInput
diff --git a/layouts/main.js b/layouts/main.js
index f9d9874..4086110 100644
--- a/layouts/main.js
+++ b/layouts/main.js
@@ -15,7 +15,6 @@ const Layout = ({isAdmin, children}) => (
 
     <div className='test'>
       <Header isLoggedIn={isAdmin} />
-
       <main role='main'>
         <React.StrictMode>
           {children}
@@ -34,9 +33,7 @@ const Layout = ({isAdmin, children}) => (
           href: '#'
         }}
       />
-
     </div>
-
     <style jsx>{`
       .test {
         display: flex;
@@ -47,7 +44,7 @@ const Layout = ({isAdmin, children}) => (
       main {
         flex: 1;
       }
-      `}</style>
+    `}</style>
   </>
 )
 
diff --git a/pages/api-depot/client/client-form.js b/pages/api-depot/client/client-form.js
index 27fe0d4..b5c1468 100644
--- a/pages/api-depot/client/client-form.js
+++ b/pages/api-depot/client/client-form.js
@@ -1,12 +1,11 @@
 import {useCallback, useEffect, useState} from 'react'
 import PropTypes from 'prop-types'
 import Router from 'next/router'
-import Input from '@codegouvfr/react-dsfr/Input'
 import Button from '@codegouvfr/react-dsfr/Button'
 import Alert from '@codegouvfr/react-dsfr/Alert'
 import ToggleSwitch from '@codegouvfr/react-dsfr/ToggleSwitch'
 
-import {createClient, createMandataire, createChefDeFile, getChefsDeFile, getClient, getMandataires} from '@/lib/api-depot'
+import {createClient, updateClient, createMandataire, createChefDeFile, getChefsDeFile, getClient, getMandataires} from '@/lib/api-depot'
 
 import Main from '@/layouts/main'
 
@@ -14,6 +13,7 @@ import {useUser} from '@/hooks/user'
 
 import Loader from '@/components/loader'
 import SelectInput from '@/components/select-input'
+import TextInput from '@/components/text-input'
 import MandataireForm from '@/components/api-depot/client/client-form/mandataire-form'
 import ChefDeFileForm from '@/components/api-depot/client/client-form/chef-de-file-form'
 
@@ -37,7 +37,6 @@ const ClientForm = ({client, mandataires, chefsDeFile, isDemo}) => {
 
   const handleSumit = useCallback(async event => {
     event.preventDefault()
-
     const body = {
       nom,
       options: {relaxMode: isModeRelax},
@@ -64,12 +63,19 @@ const ClientForm = ({client, mandataires, chefsDeFile, isDemo}) => {
         }
       }
 
-      const {_id} = await createClient(body, isDemo)
-      Router.push({pathname: '/api-depot/client', query: {clientId: _id, demo: isDemo ? 1 : 0}})
+      let clientId = client._id
+      if (clientId) {
+        await updateClient(clientId, body, isDemo)
+      } else {
+        const response = await createClient(body, isDemo)
+        clientId = response._id
+      }
+
+      Router.push({pathname: '/api-depot/client', query: {clientId, demo: isDemo ? 1 : 0}})
     } catch (error) {
       setSubmitError(error.message || '')
     }
-  }, [nom, isModeRelax, isActive, authorizationStrategy, mandataire, chefDeFile, isDemo])
+  }, [nom, client._id, isModeRelax, isActive, authorizationStrategy, mandataire, chefDeFile, isDemo])
 
   useEffect(() => {
     let isFormValid = nom && mandataire
@@ -87,10 +93,10 @@ const ClientForm = ({client, mandataires, chefsDeFile, isDemo}) => {
         {isAdmin && (
           <div className='fr-container fr-my-4w'>
             <form onSubmit={handleSumit}>
-              <Input
+              <TextInput
                 label='Nom'
                 value={nom}
-                hintText='Nom du client. Exemple : Business Geografic'
+                hint='Nom du client. Exemple : Business Geografic'
                 onChange={e => setNom(e.target.value)}
               />
 
@@ -161,6 +167,7 @@ ClientForm.defaultProps = {
 ClientForm.propTypes = {
   /* eslint-disable react/boolean-prop-naming */
   client: PropTypes.shape({
+    _id: PropTypes.string,
     nom: PropTypes.string,
     options: PropTypes.shape({
       relaxMode: PropTypes.bool
diff --git a/pages/api-depot/client/index.js b/pages/api-depot/client/index.js
index 6741183..d341fc1 100644
--- a/pages/api-depot/client/index.js
+++ b/pages/api-depot/client/index.js
@@ -1,8 +1,9 @@
-import {useState, useCallback} from 'react'
 import PropTypes from 'prop-types'
 import Alert from '@codegouvfr/react-dsfr/Alert'
+import Button from '@codegouvfr/react-dsfr/Button'
+import Link from 'next/link'
 
-import {getChefDeFile, getClient, getMandataire, updateClient} from '@/lib/api-depot'
+import {getChefDeFile, getClient, getMandataire} from '@/lib/api-depot'
 
 import Main from '@/layouts/main'
 
@@ -10,29 +11,12 @@ import {useUser} from '@/hooks/user'
 
 import Loader from '@/components/loader'
 import ClientHeader from '@/components/api-depot/client/client-header'
-import ClientOptions from '@/components/api-depot/client/client-options'
 import Mandataire from '@/components/api-depot/mandataire'
 import ChefDeFile from '@/components/api-depot/chef-de-file'
 
 const Client = ({_client, _mandataire, _chefDeFile, isDemo}) => {
   const [isAdmin, isLoading] = useUser()
 
-  const [client, setClient] = useState(_client)
-  const [isUpdating, setIsUpdating] = useState(false)
-  const [error, setError] = useState()
-
-  const handleClientUpdate = useCallback(async changes => {
-    try {
-      setIsUpdating(true)
-      const updatedClient = await updateClient(_client._id, changes)
-      setClient(updatedClient)
-    } catch (error) {
-      setError(error.message)
-    }
-
-    setIsUpdating(false)
-  }, [_client])
-
   return (
     <Main isAdmin={isAdmin}>
       <Loader isLoading={isLoading}>
@@ -47,31 +31,22 @@ const Client = ({_client, _mandataire, _chefDeFile, isDemo}) => {
               />
             )}
 
-            {error && <Alert severity='error' title='Error' description={error} />}
-
-            <ClientHeader
-              id={client._id}
-              nom={client.nom}
-              isActive={client.active}
-              isDisabled={isUpdating}
-              onUpdate={handleClientUpdate}
-            />
-
-            <ClientOptions
-              isModeRelax={client.options.relaxMode}
-              isDisabled={isUpdating}
-              onUpdate={handleClientUpdate}
-            />
-
-            <div className='fr-container fr-my-4w'>
-              <h2>Mandataire</h2>
-              <Mandataire {..._mandataire} />
-            </div>
-
-            <div className='fr-container fr-my-4w'>
-              <h2>Chef de file</h2>
-              {_chefDeFile ? <ChefDeFile {..._chefDeFile} /> : 'Aucun chef de file'}
-            </div>
+            <Link passHref href={{
+              pathname: '/api-depot/client/client-form',
+              query: {clientId: _client._id, demo: isDemo ? 1 : 0}
+            }}
+            >
+              <Button iconId='fr-icon-edit-line'>
+                Modifier le client
+              </Button>
+            </Link>
+
+            <ClientHeader id={_client._id} nom={_client.nom} />
+
+            <Mandataire {..._mandataire} />
+
+            <ChefDeFile hasChefDeFile={_chefDeFile !== null} {..._chefDeFile} />
+
           </div>
         )}
       </Loader>