From 1bc1070e25c32efe6f2f1a67c44b2d09f0891bf3 Mon Sep 17 00:00:00 2001
From: Nicolas <nicolaslegrand009@gmail.com>
Date: Fri, 27 Dec 2024 10:27:09 +0100
Subject: [PATCH] EndCustomer model in project list.

---
 .../src/components/project/ProjectsList.scss  |  9 ++--
 .../controls/ProjectEndCustomerIcon.tsx       | 52 ++++++++++++++-----
 .../project/models/getProjectFeature.tsx      |  2 +-
 3 files changed, 45 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/project/ProjectsList.scss b/frontend/src/components/project/ProjectsList.scss
index a2496339..130395eb 100644
--- a/frontend/src/components/project/ProjectsList.scss
+++ b/frontend/src/components/project/ProjectsList.scss
@@ -13,10 +13,11 @@ $borderSeparator: 3px solid $table-border-color;
     td:nth-child(4) { width: 30%; }
     td:nth-child(5) { min-width: 110px; }
 
-    td:nth-child(6) { width: 30%; }
-    td:nth-child(7) { min-width: 100px; }
-    td:nth-child(8) { min-width: 150px; }
-    td:nth-child(9) { min-width: 100px; }
+    td:nth-child(6) { min-width: 30px; }
+    td:nth-child(7) { width: 30%; }
+    td:nth-child(8) { min-width: 100px; }
+    td:nth-child(9) { min-width: 150px; }
+    td:nth-child(10) { min-width: 100px; }
 
     thead, tbody {
       th, td {
diff --git a/frontend/src/components/project/controls/ProjectEndCustomerIcon.tsx b/frontend/src/components/project/controls/ProjectEndCustomerIcon.tsx
index 74d8acd8..f9c52984 100644
--- a/frontend/src/components/project/controls/ProjectEndCustomerIcon.tsx
+++ b/frontend/src/components/project/controls/ProjectEndCustomerIcon.tsx
@@ -1,24 +1,50 @@
-import { ClientModel } from '../../client/models/ClientModels';
-import {Icon, IconProps} from '../../controls/Icon';
-import { ProjectEndCustomerModel } from '../models/IProjectModel';
+import { useState } from "react";
+import { ClientModal } from "../../client/controls/ClientModal";
+import { ClientModel } from "../../client/models/ClientModels";
+import { Icon, IconProps } from "../../controls/Icon";
+import { ProjectEndCustomerModel } from "../models/IProjectModel";
 
 type ProjectEndCustomerIconProps = IconProps & {
   endCustomer: ProjectEndCustomerModel | null | undefined;
   endCustomerClientModel: ClientModel | null | undefined;
-}
+};
 
-export const ProjectEndCustomerIcon = ({endCustomer, endCustomerClientModel, ...props}: ProjectEndCustomerIconProps) => {
+export const ProjectEndCustomerIcon = ({
+  endCustomer,
+  endCustomerClientModel,
+  ...props
+}: ProjectEndCustomerIconProps) => {
   
-  if(!endCustomer){
+  const [modal, setModal] = useState<boolean>(false);
+
+  if (!endCustomer) {
     return null;
   }
-  
-  const title = [
-    endCustomerClientModel?.name,
-    endCustomer.contact,
-    endCustomer.notes,
-  ].filter(Boolean).join('<br/>');
 
-  return <Icon  fa="fa fa-user" size={1} title={title} {...props} />
+  const title = [
+      endCustomerClientModel?.name,
+      endCustomer.contact,
+      endCustomer.notes,
+    ].filter(Boolean).join("<br/>");
 
+  return (
+    <div>
+      <Icon
+        fa="fa fa-user"
+        size={1}
+        title={title}
+        {...props}
+        onClick={() => setModal(true)}
+      />
+      {modal && endCustomerClientModel && (
+        <ClientModal
+          client={endCustomerClientModel}
+          show={modal}
+          onClose={() => {
+            setModal(false);
+          }}
+        />
+      )}
+    </div>
+  );
 };
diff --git a/frontend/src/components/project/models/getProjectFeature.tsx b/frontend/src/components/project/models/getProjectFeature.tsx
index 7670ef5f..546766c3 100644
--- a/frontend/src/components/project/models/getProjectFeature.tsx
+++ b/frontend/src/components/project/models/getProjectFeature.tsx
@@ -135,7 +135,7 @@ const projectListConfig = (config: ProjectFeatureBuilderConfig): IList<FullProje
     value: p => <ProjectClientTariff projectClient={p.details.partner} />,
   },
   {
-    key: 'forEndKlant',
+    key: 'endCustomer',
     header: '',
     value: p => <ProjectEndCustomerIcon endCustomer={p.details.endCustomer} endCustomerClientModel={p.endCustomer}/>
   }, {