From 0263ac9f5e74b38d3966bcf4424c728f8735aaeb Mon Sep 17 00:00:00 2001
From: fdelemarre <florian.delemarre@365talents.com>
Date: Wed, 26 Jun 2024 17:35:51 +0200
Subject: [PATCH 01/22] add BasicTable component, handle text and links

---
 src/webapp/components/table/BasicTable.tsx | 83 ++++++++++++++++++++++
 1 file changed, 83 insertions(+)
 create mode 100644 src/webapp/components/table/BasicTable.tsx

diff --git a/src/webapp/components/table/BasicTable.tsx b/src/webapp/components/table/BasicTable.tsx
new file mode 100644
index 00000000..bbcd9077
--- /dev/null
+++ b/src/webapp/components/table/BasicTable.tsx
@@ -0,0 +1,83 @@
+import React from "react";
+import _ from "lodash";
+import { Table, TableBody, TableCell, TableHead, TableRow, Link } from "@material-ui/core";
+import styled from "styled-components";
+import { Maybe } from "../../../utils/ts-utils";
+
+interface TableCellData {
+    value: string;
+    type?: "link";
+    link?: string;
+}
+
+export type TableColumn = string;
+
+interface BasicTableProps {
+    columns: TableColumn[];
+    rows: {
+        [key: TableColumn]: TableCellData;
+    }[];
+    onChange?: (cell: Maybe<TableCellData>, rowIndex: number, column: TableColumn) => void;
+}
+
+export const BasicTable: React.FC<BasicTableProps> = React.memo(
+    ({ columns, rows, onChange = () => {} }) => {
+        const renderCell = (cell: Maybe<TableCellData>, rowIndex: number, column: TableColumn) => {
+            if (!cell) {
+                return "";
+            }
+            switch (cell.type) {
+                case "link":
+                    return (
+                        <StyledLink href="#" onClick={() => onChange(cell, rowIndex, column)}>
+                            {cell.value}
+                        </StyledLink>
+                    );
+                default:
+                    return cell.value;
+            }
+        };
+
+        return (
+            <StyledTable>
+                <TableHead>
+                    <TableRow>
+                        {columns.map(column => (
+                            <TableCell key={column}>{_.startCase(column)}</TableCell>
+                        ))}
+                    </TableRow>
+                </TableHead>
+                <TableBody>
+                    {rows.map((row, rowIndex) => (
+                        <TableRow key={rowIndex}>
+                            {columns.map(column => (
+                                <TableCell key={`${rowIndex}-${column}`}>
+                                    {renderCell(row[column], rowIndex, column)}
+                                </TableCell>
+                            ))}
+                        </TableRow>
+                    ))}
+                </TableBody>
+            </StyledTable>
+        );
+    }
+);
+
+const StyledTable = styled(Table)`
+    border-collapse: collapse;
+    & .MuiTableHead-root {
+        color: ${props => props.theme.palette.common.greyBlack};
+        background-color: ${props => props.theme.palette.common.greyLight};
+    }
+    & .MuiTableBody-root {
+        color: ${props => props.theme.palette.common.grey};
+    }
+    & .MuiTableCell-root {
+        border: 1px solid ${props => props.theme.palette.common.grey};
+    }
+`;
+
+const StyledLink = styled(Link)`
+    color: ${props => props.theme.palette.common.blue600};
+    text-decoration: underline;
+`;

From e1a7ee31f0f0e7476c1ffc3a655d46d87d5bb361 Mon Sep 17 00:00:00 2001
From: fdelemarre <florian.delemarre@365talents.com>
Date: Wed, 26 Jun 2024 18:48:19 +0200
Subject: [PATCH 02/22] set type of cell in columns

---
 src/webapp/components/table/BasicTable.tsx | 32 ++++++++++------------
 1 file changed, 15 insertions(+), 17 deletions(-)

diff --git a/src/webapp/components/table/BasicTable.tsx b/src/webapp/components/table/BasicTable.tsx
index bbcd9077..564a9c76 100644
--- a/src/webapp/components/table/BasicTable.tsx
+++ b/src/webapp/components/table/BasicTable.tsx
@@ -3,38 +3,35 @@ import _ from "lodash";
 import { Table, TableBody, TableCell, TableHead, TableRow, Link } from "@material-ui/core";
 import styled from "styled-components";
 import { Maybe } from "../../../utils/ts-utils";
+import { User } from "../../../domain/entities/User";
 
-interface TableCellData {
-    value: string;
-    type?: "link";
-    link?: string;
-}
+type TableCellData = Maybe<string | User>;
 
-export type TableColumn = string;
+export type TableColumn = { name: string; type?: "link" | "select" };
 
 interface BasicTableProps {
     columns: TableColumn[];
     rows: {
-        [key: TableColumn]: TableCellData;
+        [key: TableColumn["name"]]: string | User;
     }[];
-    onChange?: (cell: Maybe<TableCellData>, rowIndex: number, column: TableColumn) => void;
+    onChange?: (cell: TableCellData, rowIndex: number, column: TableColumn["name"]) => void;
 }
 
 export const BasicTable: React.FC<BasicTableProps> = React.memo(
     ({ columns, rows, onChange = () => {} }) => {
-        const renderCell = (cell: Maybe<TableCellData>, rowIndex: number, column: TableColumn) => {
+        const renderCell = (cell: TableCellData, rowIndex: number, { name, type }: TableColumn) => {
             if (!cell) {
                 return "";
             }
-            switch (cell.type) {
+            switch (type) {
                 case "link":
                     return (
-                        <StyledLink href="#" onClick={() => onChange(cell, rowIndex, column)}>
-                            {cell.value}
+                        <StyledLink onClick={() => onChange(cell, rowIndex, name)}>
+                            {_.isObject(cell) ? cell.name : cell}
                         </StyledLink>
                     );
                 default:
-                    return cell.value;
+                    return _.isObject(cell) ? cell.name : cell;
             }
         };
 
@@ -42,8 +39,8 @@ export const BasicTable: React.FC<BasicTableProps> = React.memo(
             <StyledTable>
                 <TableHead>
                     <TableRow>
-                        {columns.map(column => (
-                            <TableCell key={column}>{_.startCase(column)}</TableCell>
+                        {columns.map(({ name }) => (
+                            <TableCell key={name}>{_.startCase(name)}</TableCell>
                         ))}
                     </TableRow>
                 </TableHead>
@@ -51,8 +48,8 @@ export const BasicTable: React.FC<BasicTableProps> = React.memo(
                     {rows.map((row, rowIndex) => (
                         <TableRow key={rowIndex}>
                             {columns.map(column => (
-                                <TableCell key={`${rowIndex}-${column}`}>
-                                    {renderCell(row[column], rowIndex, column)}
+                                <TableCell key={`${rowIndex}-${column.name}`}>
+                                    {renderCell(row[column.name], rowIndex, column)}
                                 </TableCell>
                             ))}
                         </TableRow>
@@ -80,4 +77,5 @@ const StyledTable = styled(Table)`
 const StyledLink = styled(Link)`
     color: ${props => props.theme.palette.common.blue600};
     text-decoration: underline;
+    cursor: pointer;
 `;

From 1638f535127690fc2597177f98ae0b015cb533f7 Mon Sep 17 00:00:00 2001
From: fdelemarre <florian.delemarre@365talents.com>
Date: Wed, 26 Jun 2024 19:02:26 +0200
Subject: [PATCH 03/22] add props to prefix row with an index

---
 src/webapp/components/table/BasicTable.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/webapp/components/table/BasicTable.tsx b/src/webapp/components/table/BasicTable.tsx
index 564a9c76..5cb986a3 100644
--- a/src/webapp/components/table/BasicTable.tsx
+++ b/src/webapp/components/table/BasicTable.tsx
@@ -15,10 +15,11 @@ interface BasicTableProps {
         [key: TableColumn["name"]]: string | User;
     }[];
     onChange?: (cell: TableCellData, rowIndex: number, column: TableColumn["name"]) => void;
+    showRowIndex?: boolean;
 }
 
 export const BasicTable: React.FC<BasicTableProps> = React.memo(
-    ({ columns, rows, onChange = () => {} }) => {
+    ({ columns, rows, onChange = () => {}, showRowIndex = false }) => {
         const renderCell = (cell: TableCellData, rowIndex: number, { name, type }: TableColumn) => {
             if (!cell) {
                 return "";
@@ -39,6 +40,7 @@ export const BasicTable: React.FC<BasicTableProps> = React.memo(
             <StyledTable>
                 <TableHead>
                     <TableRow>
+                        <TableCell />
                         {columns.map(({ name }) => (
                             <TableCell key={name}>{_.startCase(name)}</TableCell>
                         ))}
@@ -47,6 +49,7 @@ export const BasicTable: React.FC<BasicTableProps> = React.memo(
                 <TableBody>
                     {rows.map((row, rowIndex) => (
                         <TableRow key={rowIndex}>
+                            {showRowIndex && <TableCell>{rowIndex + 1}</TableCell>}
                             {columns.map(column => (
                                 <TableCell key={`${rowIndex}-${column.name}`}>
                                     {renderCell(row[column.name], rowIndex, column)}

From c286b0c90adbcfd9ff0896b48d741517239898d4 Mon Sep 17 00:00:00 2001
From: fdelemarre <florian.delemarre@365talents.com>
Date: Thu, 27 Jun 2024 09:41:17 +0200
Subject: [PATCH 04/22] handle Selector in table

---
 src/webapp/components/table/BasicTable.tsx | 57 ++++++++++++++--------
 1 file changed, 37 insertions(+), 20 deletions(-)

diff --git a/src/webapp/components/table/BasicTable.tsx b/src/webapp/components/table/BasicTable.tsx
index 5cb986a3..7f9abea2 100644
--- a/src/webapp/components/table/BasicTable.tsx
+++ b/src/webapp/components/table/BasicTable.tsx
@@ -3,37 +3,54 @@ import _ from "lodash";
 import { Table, TableBody, TableCell, TableHead, TableRow, Link } from "@material-ui/core";
 import styled from "styled-components";
 import { Maybe } from "../../../utils/ts-utils";
-import { User } from "../../../domain/entities/User";
+import { Selector, SelectorOption } from "../selector/Selector";
 
-type TableCellData = Maybe<string | User>;
-
-export type TableColumn = { name: string; type?: "link" | "select" };
+interface BaseColumn {
+    name: string;
+}
+interface LinkColumn extends BaseColumn {
+    type: "link";
+}
+interface SelectorColumn extends BaseColumn {
+    type: "selector";
+    options: SelectorOption[];
+}
 
+export type TableColumn = BaseColumn | LinkColumn | SelectorColumn;
 interface BasicTableProps {
     columns: TableColumn[];
     rows: {
-        [key: TableColumn["name"]]: string | User;
+        [key: TableColumn["name"]]: string;
     }[];
-    onChange?: (cell: TableCellData, rowIndex: number, column: TableColumn["name"]) => void;
+    onChange?: (cell: Maybe<string>, rowIndex: number, column: TableColumn["name"]) => void;
     showRowIndex?: boolean;
 }
 
 export const BasicTable: React.FC<BasicTableProps> = React.memo(
     ({ columns, rows, onChange = () => {}, showRowIndex = false }) => {
-        const renderCell = (cell: TableCellData, rowIndex: number, { name, type }: TableColumn) => {
-            if (!cell) {
-                return "";
-            }
-            switch (type) {
-                case "link":
-                    return (
-                        <StyledLink onClick={() => onChange(cell, rowIndex, name)}>
-                            {_.isObject(cell) ? cell.name : cell}
-                        </StyledLink>
-                    );
-                default:
-                    return _.isObject(cell) ? cell.name : cell;
+        const Cell = (cell: string, rowIndex: number, column: TableColumn) => {
+            const [selectorValue, setSelectorValue] = React.useState<string>(cell);
+            if ("type" in column && column.type === "link") {
+                return (
+                    <StyledLink onClick={() => onChange(cell, rowIndex, column.name)}>
+                        {cell}
+                    </StyledLink>
+                );
+            } else if ("type" in column && column.type === "selector") {
+                const handleChange = (value: string) => {
+                    setSelectorValue(value);
+                    onChange(value, rowIndex, column.name);
+                };
+                return (
+                    <Selector
+                        id={`selector-${rowIndex}-${column.name}`}
+                        options={column.options}
+                        selected={selectorValue}
+                        onChange={handleChange}
+                    />
+                );
             }
+            return cell;
         };
 
         return (
@@ -52,7 +69,7 @@ export const BasicTable: React.FC<BasicTableProps> = React.memo(
                             {showRowIndex && <TableCell>{rowIndex + 1}</TableCell>}
                             {columns.map(column => (
                                 <TableCell key={`${rowIndex}-${column.name}`}>
-                                    {renderCell(row[column.name], rowIndex, column)}
+                                    {Cell(row[column.name] || "", rowIndex, column)}
                                 </TableCell>
                             ))}
                         </TableRow>

From 1f44f747cac6cc8e2e74bceee2ed9b5234166a10 Mon Sep 17 00:00:00 2001
From: fdelemarre <florian.delemarre@365talents.com>
Date: Thu, 27 Jun 2024 10:11:39 +0200
Subject: [PATCH 05/22] fix showRowIndex in header

---
 src/webapp/components/table/BasicTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/webapp/components/table/BasicTable.tsx b/src/webapp/components/table/BasicTable.tsx
index 7f9abea2..bf2e5019 100644
--- a/src/webapp/components/table/BasicTable.tsx
+++ b/src/webapp/components/table/BasicTable.tsx
@@ -57,7 +57,7 @@ export const BasicTable: React.FC<BasicTableProps> = React.memo(
             <StyledTable>
                 <TableHead>
                     <TableRow>
-                        <TableCell />
+                        {showRowIndex && <TableCell />}
                         {columns.map(({ name }) => (
                             <TableCell key={name}>{_.startCase(name)}</TableCell>
                         ))}

From e09f15a352e9220aa1eca7b8e4c50a35e9572133 Mon Sep 17 00:00:00 2001
From: fdelemarre <florian.delemarre@365talents.com>
Date: Thu, 27 Jun 2024 10:44:20 +0200
Subject: [PATCH 06/22] use `Maybe` instead of `?`

---
 src/webapp/components/table/BasicTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/webapp/components/table/BasicTable.tsx b/src/webapp/components/table/BasicTable.tsx
index bf2e5019..a2206cdd 100644
--- a/src/webapp/components/table/BasicTable.tsx
+++ b/src/webapp/components/table/BasicTable.tsx
@@ -23,7 +23,7 @@ interface BasicTableProps {
         [key: TableColumn["name"]]: string;
     }[];
     onChange?: (cell: Maybe<string>, rowIndex: number, column: TableColumn["name"]) => void;
-    showRowIndex?: boolean;
+    showRowIndex: Maybe<boolean>;
 }
 
 export const BasicTable: React.FC<BasicTableProps> = React.memo(

From a67e056076ac09c108aa9330f67dd6527b627f90 Mon Sep 17 00:00:00 2001
From: fdelemarre <florian.delemarre@365talents.com>
Date: Thu, 27 Jun 2024 10:54:10 +0200
Subject: [PATCH 07/22] use `BasicTable` with test data

---
 i18n/en.pot                                   |  13 +-
 i18n/es.po                                    |  11 +-
 src/webapp/components/table/BasicTable.tsx    |   2 +-
 .../CreateIncidentActionPlanPage.tsx          | 139 ++++++++++++++++++
 4 files changed, 149 insertions(+), 16 deletions(-)

diff --git a/i18n/en.pot b/i18n/en.pot
index 171de7da..cf5cb555 100644
--- a/i18n/en.pot
+++ b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-06-26T13:33:38.517Z\n"
-"PO-Revision-Date: 2024-06-26T13:33:38.517Z\n"
+"POT-Creation-Date: 2024-06-27T08:53:15.150Z\n"
+"PO-Revision-Date: 2024-06-27T08:53:15.150Z\n"
 
 msgid "Add new option"
 msgstr ""
@@ -41,13 +41,13 @@ msgstr ""
 msgid "Cholera in NW Province, June 2023"
 msgstr ""
 
-msgid "Event Name"
+msgid "Incident Action Plan"
 msgstr ""
 
-msgid "Hazard Type"
+msgid "Team"
 msgstr ""
 
-msgid "Incident Action Plan"
+msgid "Response Actions"
 msgstr ""
 
 msgid "Create Risk Assessment"
@@ -101,9 +101,6 @@ msgstr ""
 msgid "Edit Action Plan"
 msgstr ""
 
-msgid "Team"
-msgstr ""
-
 msgid "Edit Team"
 msgstr ""
 
diff --git a/i18n/es.po b/i18n/es.po
index 3c53cb62..0a4ba04f 100644
--- a/i18n/es.po
+++ b/i18n/es.po
@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: i18next-conv\n"
-"POT-Creation-Date: 2024-06-26T13:33:38.517Z\n"
+"POT-Creation-Date: 2024-06-27T08:53:15.150Z\n"
 "PO-Revision-Date: 2018-10-25T09:02:35.143Z\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
@@ -41,13 +41,13 @@ msgstr ""
 msgid "Cholera in NW Province, June 2023"
 msgstr ""
 
-msgid "Event Name"
+msgid "Incident Action Plan"
 msgstr ""
 
-msgid "Hazard Type"
+msgid "Team"
 msgstr ""
 
-msgid "Incident Action Plan"
+msgid "Response Actions"
 msgstr ""
 
 msgid "Create Risk Assessment"
@@ -101,9 +101,6 @@ msgstr ""
 msgid "Edit Action Plan"
 msgstr ""
 
-msgid "Team"
-msgstr ""
-
 msgid "Edit Team"
 msgstr ""
 
diff --git a/src/webapp/components/table/BasicTable.tsx b/src/webapp/components/table/BasicTable.tsx
index a2206cdd..bf2e5019 100644
--- a/src/webapp/components/table/BasicTable.tsx
+++ b/src/webapp/components/table/BasicTable.tsx
@@ -23,7 +23,7 @@ interface BasicTableProps {
         [key: TableColumn["name"]]: string;
     }[];
     onChange?: (cell: Maybe<string>, rowIndex: number, column: TableColumn["name"]) => void;
-    showRowIndex: Maybe<boolean>;
+    showRowIndex?: boolean;
 }
 
 export const BasicTable: React.FC<BasicTableProps> = React.memo(
diff --git a/src/webapp/pages/create-incident-action-plan/CreateIncidentActionPlanPage.tsx b/src/webapp/pages/create-incident-action-plan/CreateIncidentActionPlanPage.tsx
index 12a9b0be..0f9f7ba5 100644
--- a/src/webapp/pages/create-incident-action-plan/CreateIncidentActionPlanPage.tsx
+++ b/src/webapp/pages/create-incident-action-plan/CreateIncidentActionPlanPage.tsx
@@ -2,8 +2,132 @@ import React from "react";
 
 import { Layout } from "../../components/layout/Layout";
 import i18n from "../../../utils/i18n";
+import { BasicTable, TableColumn } from "../../components/table/BasicTable";
+import { Section } from "../../components/section/Section";
 
 export const CreateIncidentActionPlanPage: React.FC = React.memo(() => {
+    const columnsTeam: TableColumn[] = [
+        { name: "role" },
+        { name: "name", type: "link" },
+        { name: "email", type: "link" },
+        { name: "phone" },
+    ];
+
+    const dataTeam = [
+        {
+            role: "Incident Manager",
+
+            name: "George Abitbol",
+            email: "george.abitbol@gmail.com",
+            phone: "+33 6 12 34 56 78",
+        },
+        {
+            role: "Manager of Operations",
+            name: "John Traore",
+            email: "george.abitbol@gmail.com",
+            phone: "+33 6 12 34 56 78",
+        },
+    ];
+
+    const columnsResponseActions: TableColumn[] = [
+        { name: "mainTask" },
+        { name: "subActivities" },
+        { name: "subPillar" },
+        { name: "responsibleOfficer" },
+        {
+            name: "status",
+            type: "selector",
+            options: [
+                { value: "Complete", label: "Complete" },
+                { value: "Pending", label: "Pending" },
+                { value: "In progress", label: "In progress" },
+            ],
+        },
+        {
+            name: "verification",
+            type: "selector",
+            options: [
+                { value: "Unverified", label: "Unverified" },
+                { value: "Verified", label: "Verified" },
+            ],
+        },
+        { name: "timeline" },
+        { name: "dueDate" },
+    ];
+
+    const dataResponseActions = [
+        {
+            mainTask: "Data management",
+            subActivities: "Configure tablet",
+            subPillar: "Planning",
+            responsibleOfficer: "Moses Banda",
+            status: "Complete",
+            verification: "Unverified",
+            timeline: "Qtr 2 June",
+            dueDate: "8 June",
+        },
+        {
+            mainTask: "Risk communication",
+            subActivities: "Develop risk communication plan",
+            subPillar: "RCCE",
+            responsibleOfficer: "Mr Zimba",
+            status: "Pending",
+            verification: "Verified",
+            timeline: "Qtr 3 June",
+            dueDate: "17 June",
+        },
+        {
+            mainTask: "Vaccine transportation",
+            subActivities: "Reverse cold storage transport",
+            subPillar: "Logistics",
+            responsibleOfficer: "Mr Guissimon",
+            status: "In progress",
+            verification: "Unverified",
+            timeline: "Qtr 3 June",
+            dueDate: "9 June",
+        },
+        {
+            mainTask: "Training of RRT",
+            subActivities: "Train and deploy RRTs",
+            subPillar: "Operations",
+            responsibleOfficer: "Dr Chika",
+            status: "Not done",
+            verification: "Unverified",
+            timeline: "Qtr 3 June",
+            dueDate: "9 June",
+        },
+        {
+            mainTask: "Supplies",
+            subActivities: "Procure granular chlorine",
+            subPillar: "Administration",
+            responsibleOfficer: "Moses Banda",
+            status: "Pending",
+            verification: "Unverified",
+            timeline: "Qtr 4 June",
+            dueDate: "20 June",
+        },
+        {
+            mainTask: "Supplies",
+            subActivities: "Procure RDTs",
+            subPillar: "Operations",
+            responsibleOfficer: "Mpanga Kasonde",
+            status: "In Progress",
+            verification: "Unverified",
+            timeline: "Qtr 3 June",
+            dueDate: "17 June",
+        },
+        {
+            mainTask: "Strengthen surveillance",
+            subActivities: "Active case search",
+            subPillar: "Surveillance",
+            responsibleOfficer: "Namonda Mbumwae",
+            status: "Complete",
+            verification: "Unverified",
+            timeline: "Qtr 1 June",
+            dueDate: "5 June",
+        },
+    ];
+
     return (
         <Layout
             title={i18n.t("Incident Action Plan")}
@@ -11,6 +135,21 @@ export const CreateIncidentActionPlanPage: React.FC = React.memo(() => {
             hideSideBarOptions
         >
             CreateIncidentActionPlanPage
+            <Section title={i18n.t("Team")}>
+                <BasicTable
+                    columns={columnsTeam}
+                    rows={dataTeam}
+                    onChange={(...arg) => console.log(arg)}
+                />
+            </Section>
+            <Section title={i18n.t("Response Actions")}>
+                <BasicTable
+                    showRowIndex
+                    columns={columnsResponseActions}
+                    rows={dataResponseActions}
+                    onChange={(...arg) => console.log(arg)}
+                />
+            </Section>
         </Layout>
     );
 });

From bb3269d4dc4b7aaeb4bd77ffe982758ba4c73a0e Mon Sep 17 00:00:00 2001
From: fdelemarre <florian.delemarre@365talents.com>
Date: Fri, 28 Jun 2024 09:40:10 +0200
Subject: [PATCH 08/22] columns use { value, label } format and use i18n

---
 src/webapp/components/table/BasicTable.tsx    | 22 +++++++++-------
 .../CreateIncidentActionPlanPage.tsx          | 26 ++++++++++---------
 2 files changed, 26 insertions(+), 22 deletions(-)

diff --git a/src/webapp/components/table/BasicTable.tsx b/src/webapp/components/table/BasicTable.tsx
index bf2e5019..f841ddec 100644
--- a/src/webapp/components/table/BasicTable.tsx
+++ b/src/webapp/components/table/BasicTable.tsx
@@ -4,9 +4,11 @@ import { Table, TableBody, TableCell, TableHead, TableRow, Link } from "@materia
 import styled from "styled-components";
 import { Maybe } from "../../../utils/ts-utils";
 import { Selector, SelectorOption } from "../selector/Selector";
+import i18n from "../../../utils/i18n";
 
 interface BaseColumn {
-    name: string;
+    value: string;
+    label: string;
 }
 interface LinkColumn extends BaseColumn {
     type: "link";
@@ -20,9 +22,9 @@ export type TableColumn = BaseColumn | LinkColumn | SelectorColumn;
 interface BasicTableProps {
     columns: TableColumn[];
     rows: {
-        [key: TableColumn["name"]]: string;
+        [key: TableColumn["value"]]: string;
     }[];
-    onChange?: (cell: Maybe<string>, rowIndex: number, column: TableColumn["name"]) => void;
+    onChange?: (cell: Maybe<string>, rowIndex: number, column: TableColumn["value"]) => void;
     showRowIndex?: boolean;
 }
 
@@ -32,18 +34,18 @@ export const BasicTable: React.FC<BasicTableProps> = React.memo(
             const [selectorValue, setSelectorValue] = React.useState<string>(cell);
             if ("type" in column && column.type === "link") {
                 return (
-                    <StyledLink onClick={() => onChange(cell, rowIndex, column.name)}>
+                    <StyledLink onClick={() => onChange(cell, rowIndex, column.value)}>
                         {cell}
                     </StyledLink>
                 );
             } else if ("type" in column && column.type === "selector") {
                 const handleChange = (value: string) => {
                     setSelectorValue(value);
-                    onChange(value, rowIndex, column.name);
+                    onChange(value, rowIndex, column.value);
                 };
                 return (
                     <Selector
-                        id={`selector-${rowIndex}-${column.name}`}
+                        id={`selector-${rowIndex}-${column.value}`}
                         options={column.options}
                         selected={selectorValue}
                         onChange={handleChange}
@@ -58,8 +60,8 @@ export const BasicTable: React.FC<BasicTableProps> = React.memo(
                 <TableHead>
                     <TableRow>
                         {showRowIndex && <TableCell />}
-                        {columns.map(({ name }) => (
-                            <TableCell key={name}>{_.startCase(name)}</TableCell>
+                        {columns.map(({ value, label }) => (
+                            <TableCell key={value}>{i18n.t(label)}</TableCell>
                         ))}
                     </TableRow>
                 </TableHead>
@@ -68,8 +70,8 @@ export const BasicTable: React.FC<BasicTableProps> = React.memo(
                         <TableRow key={rowIndex}>
                             {showRowIndex && <TableCell>{rowIndex + 1}</TableCell>}
                             {columns.map(column => (
-                                <TableCell key={`${rowIndex}-${column.name}`}>
-                                    {Cell(row[column.name] || "", rowIndex, column)}
+                                <TableCell key={`${rowIndex}-${column.value}`}>
+                                    {Cell(row[column.value] || "", rowIndex, column)}
                                 </TableCell>
                             ))}
                         </TableRow>
diff --git a/src/webapp/pages/create-incident-action-plan/CreateIncidentActionPlanPage.tsx b/src/webapp/pages/create-incident-action-plan/CreateIncidentActionPlanPage.tsx
index 0f9f7ba5..a2794f14 100644
--- a/src/webapp/pages/create-incident-action-plan/CreateIncidentActionPlanPage.tsx
+++ b/src/webapp/pages/create-incident-action-plan/CreateIncidentActionPlanPage.tsx
@@ -7,10 +7,10 @@ import { Section } from "../../components/section/Section";
 
 export const CreateIncidentActionPlanPage: React.FC = React.memo(() => {
     const columnsTeam: TableColumn[] = [
-        { name: "role" },
-        { name: "name", type: "link" },
-        { name: "email", type: "link" },
-        { name: "phone" },
+        { value: "role", label: "Role" },
+        { value: "label", label: "Name", type: "link" },
+        { value: "email", label: "Email", type: "link" },
+        { value: "phone", label: "Phone" },
     ];
 
     const dataTeam = [
@@ -30,12 +30,13 @@ export const CreateIncidentActionPlanPage: React.FC = React.memo(() => {
     ];
 
     const columnsResponseActions: TableColumn[] = [
-        { name: "mainTask" },
-        { name: "subActivities" },
-        { name: "subPillar" },
-        { name: "responsibleOfficer" },
+        { value: "mainTask", label: "Main Task" },
+        { value: "subActivities", label: "Sub Activities" },
+        { value: "subPillar", label: "Sub Pillar" },
+        { value: "responsibleOfficer", label: "Responsible officer" },
         {
-            name: "status",
+            value: "status",
+            label: "Status",
             type: "selector",
             options: [
                 { value: "Complete", label: "Complete" },
@@ -44,15 +45,16 @@ export const CreateIncidentActionPlanPage: React.FC = React.memo(() => {
             ],
         },
         {
-            name: "verification",
+            value: "verification",
+            label: "Verification",
             type: "selector",
             options: [
                 { value: "Unverified", label: "Unverified" },
                 { value: "Verified", label: "Verified" },
             ],
         },
-        { name: "timeline" },
-        { name: "dueDate" },
+        { value: "timeline", label: "Timeline" },
+        { value: "dueDate", label: "Due date" },
     ];
 
     const dataResponseActions = [

From c52884325b3bef2096760a77e0ad64ae22d4c691 Mon Sep 17 00:00:00 2001
From: fdelemarre <florian.delemarre@365talents.com>
Date: Fri, 28 Jun 2024 09:45:43 +0200
Subject: [PATCH 09/22] fix data

---
 .../CreateIncidentActionPlanPage.tsx                           | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/webapp/pages/create-incident-action-plan/CreateIncidentActionPlanPage.tsx b/src/webapp/pages/create-incident-action-plan/CreateIncidentActionPlanPage.tsx
index a2794f14..04e2359a 100644
--- a/src/webapp/pages/create-incident-action-plan/CreateIncidentActionPlanPage.tsx
+++ b/src/webapp/pages/create-incident-action-plan/CreateIncidentActionPlanPage.tsx
@@ -8,7 +8,7 @@ import { Section } from "../../components/section/Section";
 export const CreateIncidentActionPlanPage: React.FC = React.memo(() => {
     const columnsTeam: TableColumn[] = [
         { value: "role", label: "Role" },
-        { value: "label", label: "Name", type: "link" },
+        { value: "name", label: "Name", type: "link" },
         { value: "email", label: "Email", type: "link" },
         { value: "phone", label: "Phone" },
     ];
@@ -16,7 +16,6 @@ export const CreateIncidentActionPlanPage: React.FC = React.memo(() => {
     const dataTeam = [
         {
             role: "Incident Manager",
-
             name: "George Abitbol",
             email: "george.abitbol@gmail.com",
             phone: "+33 6 12 34 56 78",

From 2101a8c4e4a47ca04a06dd092f309f63436fb4a9 Mon Sep 17 00:00:00 2001
From: fdelemarre <florian.delemarre@365talents.com>
Date: Fri, 28 Jun 2024 10:28:46 +0200
Subject: [PATCH 10/22] update css

---
 src/webapp/components/table/BasicTable.tsx    | 32 ++++++++++++++++---
 .../CreateIncidentActionPlanPage.tsx          |  2 +-
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/webapp/components/table/BasicTable.tsx b/src/webapp/components/table/BasicTable.tsx
index f841ddec..ad26b993 100644
--- a/src/webapp/components/table/BasicTable.tsx
+++ b/src/webapp/components/table/BasicTable.tsx
@@ -9,6 +9,7 @@ import i18n from "../../../utils/i18n";
 interface BaseColumn {
     value: string;
     label: string;
+    underline?: boolean;
 }
 interface LinkColumn extends BaseColumn {
     type: "link";
@@ -68,11 +69,14 @@ export const BasicTable: React.FC<BasicTableProps> = React.memo(
                 <TableBody>
                     {rows.map((row, rowIndex) => (
                         <TableRow key={rowIndex}>
-                            {showRowIndex && <TableCell>{rowIndex + 1}</TableCell>}
+                            {showRowIndex && <IndexTableCell>{rowIndex + 1}</IndexTableCell>}
                             {columns.map(column => (
-                                <TableCell key={`${rowIndex}-${column.value}`}>
+                                <StyledTableCell
+                                    key={`${rowIndex}-${column.value}`}
+                                    $underline={column.underline}
+                                >
                                     {Cell(row[column.value] || "", rowIndex, column)}
-                                </TableCell>
+                                </StyledTableCell>
                             ))}
                         </TableRow>
                     ))}
@@ -85,17 +89,35 @@ export const BasicTable: React.FC<BasicTableProps> = React.memo(
 const StyledTable = styled(Table)`
     border-collapse: collapse;
     & .MuiTableHead-root {
-        color: ${props => props.theme.palette.common.greyBlack};
+        color: ${props => props.theme.palette.common.grey1};
         background-color: ${props => props.theme.palette.common.greyLight};
+        font-weight: 600;
+        height: 2.25rem;
+        & .MuiTableCell-root {
+            white-space: nowrap;
+        }
     }
     & .MuiTableBody-root {
         color: ${props => props.theme.palette.common.grey};
     }
     & .MuiTableCell-root {
-        border: 1px solid ${props => props.theme.palette.common.grey};
+        font-size: 0.75rem;
+        padding-block: 0.375rem;
+        border: 1px solid ${props => props.theme.palette.common.grey4};
+        height: 1.875rem;
     }
 `;
 
+const IndexTableCell = styled(TableCell)`
+    min-width: 2.25rem;
+    padding-inline: 0.375rem;
+    text-align: center;
+`;
+
+const StyledTableCell = styled(TableCell)<{ $underline?: boolean }>`
+    ${props => props.$underline && "text-decoration: underline;"}
+`;
+
 const StyledLink = styled(Link)`
     color: ${props => props.theme.palette.common.blue600};
     text-decoration: underline;
diff --git a/src/webapp/pages/create-incident-action-plan/CreateIncidentActionPlanPage.tsx b/src/webapp/pages/create-incident-action-plan/CreateIncidentActionPlanPage.tsx
index 04e2359a..9ee519db 100644
--- a/src/webapp/pages/create-incident-action-plan/CreateIncidentActionPlanPage.tsx
+++ b/src/webapp/pages/create-incident-action-plan/CreateIncidentActionPlanPage.tsx
@@ -29,7 +29,7 @@ export const CreateIncidentActionPlanPage: React.FC = React.memo(() => {
     ];
 
     const columnsResponseActions: TableColumn[] = [
-        { value: "mainTask", label: "Main Task" },
+        { value: "mainTask", label: "Main Task", underline: true },
         { value: "subActivities", label: "Sub Activities" },
         { value: "subPillar", label: "Sub Pillar" },
         { value: "responsibleOfficer", label: "Responsible officer" },

From 4aa65c3c9f4867404b8c63ae942dc7ae433eceb9 Mon Sep 17 00:00:00 2001
From: fdelemarre <florian.delemarre@365talents.com>
Date: Fri, 28 Jun 2024 11:13:33 +0200
Subject: [PATCH 11/22] remove lodash

---
 src/webapp/components/table/BasicTable.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/webapp/components/table/BasicTable.tsx b/src/webapp/components/table/BasicTable.tsx
index c8587d6c..1adcafb1 100644
--- a/src/webapp/components/table/BasicTable.tsx
+++ b/src/webapp/components/table/BasicTable.tsx
@@ -1,5 +1,4 @@
 import React from "react";
-import _ from "lodash";
 import { Table, TableBody, TableCell, TableHead, TableRow, Link } from "@material-ui/core";
 import styled from "styled-components";
 import { Maybe } from "../../../utils/ts-utils";

From 55c6b00f30f16935aa575ef29182f89d0f73042a Mon Sep 17 00:00:00 2001
From: fdelemarre <florian.delemarre@365talents.com>
Date: Tue, 2 Jul 2024 10:18:56 +0200
Subject: [PATCH 12/22] split Cell into new component & make type mandatory

---
 src/webapp/components/table/BasicTable.tsx    | 43 ++++----------
 src/webapp/components/table/Cell.tsx          | 57 +++++++++++++++++++
 .../IncidentActionPlanPage.tsx                | 16 +++---
 3 files changed, 76 insertions(+), 40 deletions(-)
 create mode 100644 src/webapp/components/table/Cell.tsx

diff --git a/src/webapp/components/table/BasicTable.tsx b/src/webapp/components/table/BasicTable.tsx
index 1adcafb1..c234991e 100644
--- a/src/webapp/components/table/BasicTable.tsx
+++ b/src/webapp/components/table/BasicTable.tsx
@@ -2,13 +2,16 @@ import React from "react";
 import { Table, TableBody, TableCell, TableHead, TableRow, Link } from "@material-ui/core";
 import styled from "styled-components";
 import { Maybe } from "../../../utils/ts-utils";
-import { Selector } from "../selector/Selector";
 import i18n from "../../../utils/i18n";
 import { SelectorOption } from "../selector/utils/selectorHelper";
+import { Cell } from "./Cell";
 
 interface BaseColumn {
     value: string;
     label: string;
+}
+interface TextColumn extends BaseColumn {
+    type: "text";
     underline?: boolean;
 }
 interface LinkColumn extends BaseColumn {
@@ -19,7 +22,7 @@ interface SelectorColumn extends BaseColumn {
     options: SelectorOption[];
 }
 
-export type TableColumn = BaseColumn | LinkColumn | SelectorColumn;
+export type TableColumn = TextColumn | LinkColumn | SelectorColumn;
 interface BasicTableProps {
     columns: TableColumn[];
     rows: {
@@ -31,31 +34,6 @@ interface BasicTableProps {
 
 export const BasicTable: React.FC<BasicTableProps> = React.memo(
     ({ columns, rows, onChange = () => {}, showRowIndex = false }) => {
-        const Cell = (cell: string, rowIndex: number, column: TableColumn) => {
-            const [selectorValue, setSelectorValue] = React.useState<string>(cell);
-            if ("type" in column && column.type === "link") {
-                return (
-                    <StyledLink onClick={() => onChange(cell, rowIndex, column.value)}>
-                        {cell}
-                    </StyledLink>
-                );
-            } else if ("type" in column && column.type === "selector") {
-                const handleChange = (value: string) => {
-                    setSelectorValue(value);
-                    onChange(value, rowIndex, column.value);
-                };
-                return (
-                    <Selector
-                        id={`selector-${rowIndex}-${column.value}`}
-                        options={column.options}
-                        selected={selectorValue}
-                        onChange={handleChange}
-                    />
-                );
-            }
-            return cell;
-        };
-
         return (
             <StyledTable>
                 <TableHead>
@@ -71,12 +49,13 @@ export const BasicTable: React.FC<BasicTableProps> = React.memo(
                         <TableRow key={rowIndex}>
                             {showRowIndex && <IndexTableCell>{rowIndex + 1}</IndexTableCell>}
                             {columns.map(column => (
-                                <StyledTableCell
+                                <Cell
                                     key={`${rowIndex}-${column.value}`}
-                                    $underline={column.underline}
-                                >
-                                    {Cell(row[column.value] || "", rowIndex, column)}
-                                </StyledTableCell>
+                                    value={row[column.value] || ""}
+                                    rowIndex={rowIndex}
+                                    column={column}
+                                    onChange={onChange}
+                                />
                             ))}
                         </TableRow>
                     ))}
diff --git a/src/webapp/components/table/Cell.tsx b/src/webapp/components/table/Cell.tsx
new file mode 100644
index 00000000..9e7ba015
--- /dev/null
+++ b/src/webapp/components/table/Cell.tsx
@@ -0,0 +1,57 @@
+import React from "react";
+import { TableCell, Link } from "@material-ui/core";
+import styled from "styled-components";
+import { Selector } from "../selector/Selector";
+import { TableColumn } from "./BasicTable";
+
+type CellProps = {
+    value: string;
+    rowIndex: number;
+    column: TableColumn;
+    onChange?: (value: string, rowIndex: number, column: TableColumn["value"]) => void;
+};
+
+export const Cell: React.FC<CellProps> = React.memo(
+    ({ value, rowIndex, column, onChange = () => {} }) => {
+        const [selectorValue, setSelectorValue] = React.useState<string>(value);
+        const handleChange = (value: string) => {
+            setSelectorValue(value);
+            onChange(value, rowIndex, column.value);
+        };
+
+        switch (column.type) {
+            case "link":
+                return (
+                    <StyledTableCell>
+                        <StyledLink onClick={() => onChange(value, rowIndex, column.value)}>
+                            {value}
+                        </StyledLink>
+                    </StyledTableCell>
+                );
+            case "selector":
+                return (
+                    <StyledTableCell>
+                        <Selector
+                            id={`selector-${rowIndex}-${column.value}`}
+                            options={column.options}
+                            selected={selectorValue}
+                            onChange={handleChange}
+                        />
+                    </StyledTableCell>
+                );
+            case "text":
+            default:
+                return <StyledTableCell $underline={column.underline}>{value}</StyledTableCell>;
+        }
+    }
+);
+
+const StyledTableCell = styled(TableCell)<{ $underline?: boolean }>`
+    ${props => props.$underline && "text-decoration: underline;"}
+`;
+
+const StyledLink = styled(Link)`
+    color: ${props => props.theme.palette.common.blue600};
+    text-decoration: underline;
+    cursor: pointer;
+`;
diff --git a/src/webapp/pages/incident-action-plan/IncidentActionPlanPage.tsx b/src/webapp/pages/incident-action-plan/IncidentActionPlanPage.tsx
index 938d73ff..4863c1e1 100644
--- a/src/webapp/pages/incident-action-plan/IncidentActionPlanPage.tsx
+++ b/src/webapp/pages/incident-action-plan/IncidentActionPlanPage.tsx
@@ -9,10 +9,10 @@ import { BasicTable, TableColumn } from "../../components/table/BasicTable";
 
 export const IncidentActionPlanPage: React.FC = React.memo(() => {
     const columnsTeam: TableColumn[] = [
-        { value: "role", label: "Role" },
+        { value: "role", label: "Role", type: "text" },
         { value: "name", label: "Name", type: "link" },
         { value: "email", label: "Email", type: "link" },
-        { value: "phone", label: "Phone" },
+        { value: "phone", label: "Phone", type: "text" },
     ];
 
     const dataTeam = [
@@ -31,10 +31,10 @@ export const IncidentActionPlanPage: React.FC = React.memo(() => {
     ];
 
     const columnsResponseActions: TableColumn[] = [
-        { value: "mainTask", label: "Main Task", underline: true },
-        { value: "subActivities", label: "Sub Activities" },
-        { value: "subPillar", label: "Sub Pillar" },
-        { value: "responsibleOfficer", label: "Responsible officer" },
+        { value: "mainTask", label: "Main Task", type: "text", underline: true },
+        { value: "subActivities", label: "Sub Activities", type: "text" },
+        { value: "subPillar", label: "Sub Pillar", type: "text" },
+        { value: "responsibleOfficer", label: "Responsible officer", type: "text" },
         {
             value: "status",
             label: "Status",
@@ -54,8 +54,8 @@ export const IncidentActionPlanPage: React.FC = React.memo(() => {
                 { value: "Verified", label: "Verified" },
             ],
         },
-        { value: "timeline", label: "Timeline" },
-        { value: "dueDate", label: "Due date" },
+        { value: "timeline", label: "Timeline", type: "text" },
+        { value: "dueDate", label: "Due date", type: "text" },
     ];
 
     const dataResponseActions = [

From d1bce8ae3482de97203d06a3bd32dd4290ca9b3c Mon Sep 17 00:00:00 2001
From: fdelemarre <florian.delemarre@365talents.com>
Date: Tue, 2 Jul 2024 10:23:53 +0200
Subject: [PATCH 13/22] Add TODO comments

---
 .../pages/incident-action-plan/IncidentActionPlanPage.tsx     | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/webapp/pages/incident-action-plan/IncidentActionPlanPage.tsx b/src/webapp/pages/incident-action-plan/IncidentActionPlanPage.tsx
index 4863c1e1..2a41bec1 100644
--- a/src/webapp/pages/incident-action-plan/IncidentActionPlanPage.tsx
+++ b/src/webapp/pages/incident-action-plan/IncidentActionPlanPage.tsx
@@ -8,13 +8,13 @@ import { Button } from "../../components/button/Button";
 import { BasicTable, TableColumn } from "../../components/table/BasicTable";
 
 export const IncidentActionPlanPage: React.FC = React.memo(() => {
+    // TODO remove hard coding
     const columnsTeam: TableColumn[] = [
         { value: "role", label: "Role", type: "text" },
         { value: "name", label: "Name", type: "link" },
         { value: "email", label: "Email", type: "link" },
         { value: "phone", label: "Phone", type: "text" },
     ];
-
     const dataTeam = [
         {
             role: "Incident Manager",
@@ -30,6 +30,7 @@ export const IncidentActionPlanPage: React.FC = React.memo(() => {
         },
     ];
 
+    // TODO remove hard coding
     const columnsResponseActions: TableColumn[] = [
         { value: "mainTask", label: "Main Task", type: "text", underline: true },
         { value: "subActivities", label: "Sub Activities", type: "text" },
@@ -57,7 +58,6 @@ export const IncidentActionPlanPage: React.FC = React.memo(() => {
         { value: "timeline", label: "Timeline", type: "text" },
         { value: "dueDate", label: "Due date", type: "text" },
     ];
-
     const dataResponseActions = [
         {
             mainTask: "Data management",

From 808c876b6e7a50b780c6098c2d59799cf74c350c Mon Sep 17 00:00:00 2001
From: fdelemarre <florian.delemarre@365talents.com>
Date: Tue, 2 Jul 2024 10:27:50 +0200
Subject: [PATCH 14/22] add stickyHeader to Table

---
 src/webapp/components/table/BasicTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/webapp/components/table/BasicTable.tsx b/src/webapp/components/table/BasicTable.tsx
index c234991e..dfbc1b23 100644
--- a/src/webapp/components/table/BasicTable.tsx
+++ b/src/webapp/components/table/BasicTable.tsx
@@ -35,7 +35,7 @@ interface BasicTableProps {
 export const BasicTable: React.FC<BasicTableProps> = React.memo(
     ({ columns, rows, onChange = () => {}, showRowIndex = false }) => {
         return (
-            <StyledTable>
+            <StyledTable stickyHeader>
                 <TableHead>
                     <TableRow>
                         {showRowIndex && <TableCell />}

From 121d34455e41667b2ab0c1d266c48921a2c6f444 Mon Sep 17 00:00:00 2001
From: fdelemarre <florian.delemarre@365talents.com>
Date: Tue, 2 Jul 2024 10:33:34 +0200
Subject: [PATCH 15/22] add noop function

---
 src/webapp/components/table/BasicTable.tsx | 16 ++++------------
 src/webapp/components/table/Cell.tsx       |  4 +++-
 2 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/src/webapp/components/table/BasicTable.tsx b/src/webapp/components/table/BasicTable.tsx
index dfbc1b23..b39eaf6b 100644
--- a/src/webapp/components/table/BasicTable.tsx
+++ b/src/webapp/components/table/BasicTable.tsx
@@ -1,11 +1,13 @@
 import React from "react";
-import { Table, TableBody, TableCell, TableHead, TableRow, Link } from "@material-ui/core";
+import { Table, TableBody, TableCell, TableHead, TableRow } from "@material-ui/core";
 import styled from "styled-components";
 import { Maybe } from "../../../utils/ts-utils";
 import i18n from "../../../utils/i18n";
 import { SelectorOption } from "../selector/utils/selectorHelper";
 import { Cell } from "./Cell";
 
+const noop = () => {};
+
 interface BaseColumn {
     value: string;
     label: string;
@@ -33,7 +35,7 @@ interface BasicTableProps {
 }
 
 export const BasicTable: React.FC<BasicTableProps> = React.memo(
-    ({ columns, rows, onChange = () => {}, showRowIndex = false }) => {
+    ({ columns, rows, onChange = noop, showRowIndex = false }) => {
         return (
             <StyledTable stickyHeader>
                 <TableHead>
@@ -92,13 +94,3 @@ const IndexTableCell = styled(TableCell)`
     padding-inline: 0.375rem;
     text-align: center;
 `;
-
-const StyledTableCell = styled(TableCell)<{ $underline?: boolean }>`
-    ${props => props.$underline && "text-decoration: underline;"}
-`;
-
-const StyledLink = styled(Link)`
-    color: ${props => props.theme.palette.common.blue600};
-    text-decoration: underline;
-    cursor: pointer;
-`;
diff --git a/src/webapp/components/table/Cell.tsx b/src/webapp/components/table/Cell.tsx
index 9e7ba015..d1e287b6 100644
--- a/src/webapp/components/table/Cell.tsx
+++ b/src/webapp/components/table/Cell.tsx
@@ -4,6 +4,8 @@ import styled from "styled-components";
 import { Selector } from "../selector/Selector";
 import { TableColumn } from "./BasicTable";
 
+const noop = () => {};
+
 type CellProps = {
     value: string;
     rowIndex: number;
@@ -12,7 +14,7 @@ type CellProps = {
 };
 
 export const Cell: React.FC<CellProps> = React.memo(
-    ({ value, rowIndex, column, onChange = () => {} }) => {
+    ({ value, rowIndex, column, onChange = noop }) => {
         const [selectorValue, setSelectorValue] = React.useState<string>(value);
         const handleChange = (value: string) => {
             setSelectorValue(value);

From 10bb633873741f83aa1b660ce20aaa52b4030995 Mon Sep 17 00:00:00 2001
From: fdelemarre <florian.delemarre@365talents.com>
Date: Tue, 2 Jul 2024 11:35:57 +0200
Subject: [PATCH 16/22] add bold props

---
 src/webapp/components/table/BasicTable.tsx |  1 +
 src/webapp/components/table/Cell.tsx       | 11 ++++++++---
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/webapp/components/table/BasicTable.tsx b/src/webapp/components/table/BasicTable.tsx
index b39eaf6b..aa0cb5fd 100644
--- a/src/webapp/components/table/BasicTable.tsx
+++ b/src/webapp/components/table/BasicTable.tsx
@@ -15,6 +15,7 @@ interface BaseColumn {
 interface TextColumn extends BaseColumn {
     type: "text";
     underline?: boolean;
+    bold?: boolean;
 }
 interface LinkColumn extends BaseColumn {
     type: "link";
diff --git a/src/webapp/components/table/Cell.tsx b/src/webapp/components/table/Cell.tsx
index d1e287b6..8573539b 100644
--- a/src/webapp/components/table/Cell.tsx
+++ b/src/webapp/components/table/Cell.tsx
@@ -43,13 +43,18 @@ export const Cell: React.FC<CellProps> = React.memo(
                 );
             case "text":
             default:
-                return <StyledTableCell $underline={column.underline}>{value}</StyledTableCell>;
+                return (
+                    <StyledTableCell $underline={column.underline} $bold={column.bold}>
+                        {value}
+                    </StyledTableCell>
+                );
         }
     }
 );
 
-const StyledTableCell = styled(TableCell)<{ $underline?: boolean }>`
-    ${props => props.$underline && "text-decoration: underline;"}
+const StyledTableCell = styled(TableCell)<{ $underline?: boolean; $bold?: boolean }>`
+    text-decoration: ${props => (props.$underline ? "underline" : "initial")};
+    font-weight: ${props => (props.$bold ? 700 : 400)};
 `;
 
 const StyledLink = styled(Link)`

From c539623b7ceacde2db653ae76c2730adeb53740a Mon Sep 17 00:00:00 2001
From: fdelemarre <florian.delemarre@365talents.com>
Date: Wed, 10 Jul 2024 09:59:18 +0200
Subject: [PATCH 17/22] wrap handleChange with useCallback

---
 src/webapp/components/table/Cell.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/webapp/components/table/Cell.tsx b/src/webapp/components/table/Cell.tsx
index 8573539b..eb96228c 100644
--- a/src/webapp/components/table/Cell.tsx
+++ b/src/webapp/components/table/Cell.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback } from "react";
 import { TableCell, Link } from "@material-ui/core";
 import styled from "styled-components";
 import { Selector } from "../selector/Selector";
@@ -16,10 +16,13 @@ type CellProps = {
 export const Cell: React.FC<CellProps> = React.memo(
     ({ value, rowIndex, column, onChange = noop }) => {
         const [selectorValue, setSelectorValue] = React.useState<string>(value);
-        const handleChange = (value: string) => {
-            setSelectorValue(value);
-            onChange(value, rowIndex, column.value);
-        };
+        const handleChange = useCallback(
+            (value: string) => {
+                setSelectorValue(value);
+                onChange(value, rowIndex, column.value);
+            },
+            [onChange, rowIndex, column.value]
+        );
 
         switch (column.type) {
             case "link":

From e572c2425aed2144d6594a24af2f29ee47adbd7c Mon Sep 17 00:00:00 2001
From: fdelemarre <florian.delemarre@365talents.com>
Date: Wed, 10 Jul 2024 10:04:00 +0200
Subject: [PATCH 18/22] fix translations

---
 i18n/en.pot | 24 ++++++++++++++++++++----
 i18n/es.po  | 14 +++++++++++++-
 2 files changed, 33 insertions(+), 5 deletions(-)

diff --git a/i18n/en.pot b/i18n/en.pot
index eef4b4f9..f5362cbb 100644
--- a/i18n/en.pot
+++ b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-07-01T02:04:44.570Z\n"
-"PO-Revision-Date: 2024-07-01T02:04:44.570Z\n"
+"POT-Creation-Date: 2024-07-10T08:03:15.296Z\n"
+"PO-Revision-Date: 2024-07-10T08:03:15.296Z\n"
 
 msgid "Low"
 msgstr ""
@@ -32,10 +32,14 @@ msgstr ""
 msgid "Within a province with more than one district affected"
 msgstr ""
 
-msgid "More than one province affected with high threat of spread locally and internationally"
+msgid ""
+"More than one province affected with high threat of spread locally and "
+"internationally"
 msgstr ""
 
-msgid "Available within the district with support from provincial and national level"
+msgid ""
+"Available within the district with support from provincial and national "
+"level"
 msgstr ""
 
 msgid "Available within the province with minimal support from national level"
@@ -95,6 +99,18 @@ msgstr ""
 msgid "Cholera in NW Province, June 2023"
 msgstr ""
 
+msgid "Response actions"
+msgstr ""
+
+msgid "Edit Response Actions"
+msgstr ""
+
+msgid "Team"
+msgstr ""
+
+msgid "Edit Team"
+msgstr ""
+
 msgid "Incident Management Team Builder"
 msgstr ""
 
diff --git a/i18n/es.po b/i18n/es.po
index 2dc83d3b..0e99d73b 100644
--- a/i18n/es.po
+++ b/i18n/es.po
@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: i18next-conv\n"
-"POT-Creation-Date: 2024-07-01T02:04:44.570Z\n"
+"POT-Creation-Date: 2024-07-10T08:03:15.296Z\n"
 "PO-Revision-Date: 2018-10-25T09:02:35.143Z\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
@@ -98,6 +98,18 @@ msgstr ""
 msgid "Cholera in NW Province, June 2023"
 msgstr ""
 
+msgid "Response actions"
+msgstr ""
+
+msgid "Edit Response Actions"
+msgstr ""
+
+msgid "Team"
+msgstr ""
+
+msgid "Edit Team"
+msgstr ""
+
 msgid "Incident Management Team Builder"
 msgstr ""
 

From e3b056f3e49fc7f417558e6bf82f102a6a0eebad Mon Sep 17 00:00:00 2001
From: fdelemarre <florian.delemarre@365talents.com>
Date: Wed, 10 Jul 2024 11:02:55 +0200
Subject: [PATCH 19/22] fix Option

---
 src/webapp/components/table/BasicTable.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/webapp/components/table/BasicTable.tsx b/src/webapp/components/table/BasicTable.tsx
index aa0cb5fd..4cd6faf4 100644
--- a/src/webapp/components/table/BasicTable.tsx
+++ b/src/webapp/components/table/BasicTable.tsx
@@ -3,7 +3,7 @@ import { Table, TableBody, TableCell, TableHead, TableRow } from "@material-ui/c
 import styled from "styled-components";
 import { Maybe } from "../../../utils/ts-utils";
 import i18n from "../../../utils/i18n";
-import { SelectorOption } from "../selector/utils/selectorHelper";
+import { Option } from "../utils/option";
 import { Cell } from "./Cell";
 
 const noop = () => {};
@@ -22,7 +22,7 @@ interface LinkColumn extends BaseColumn {
 }
 interface SelectorColumn extends BaseColumn {
     type: "selector";
-    options: SelectorOption[];
+    options: Option[];
 }
 
 export type TableColumn = TextColumn | LinkColumn | SelectorColumn;

From 215ba2b144cb5e4ad5cf2924880526c837e0f182 Mon Sep 17 00:00:00 2001
From: fdelemarre <florian.delemarre@365talents.com>
Date: Wed, 10 Jul 2024 15:51:58 +0200
Subject: [PATCH 20/22] fix header background-color

---
 src/webapp/components/table/BasicTable.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/webapp/components/table/BasicTable.tsx b/src/webapp/components/table/BasicTable.tsx
index 4cd6faf4..ca3f2ed9 100644
--- a/src/webapp/components/table/BasicTable.tsx
+++ b/src/webapp/components/table/BasicTable.tsx
@@ -72,11 +72,11 @@ const StyledTable = styled(Table)`
     border-collapse: collapse;
     & .MuiTableHead-root {
         color: ${props => props.theme.palette.common.grey1};
-        background-color: ${props => props.theme.palette.common.greyLight};
         font-weight: 600;
         height: 2.25rem;
         & .MuiTableCell-root {
             white-space: nowrap;
+            background-color: ${props => props.theme.palette.common.greyLight};
         }
     }
     & .MuiTableBody-root {

From affce4038bae048f45477fda3056b26e969665a1 Mon Sep 17 00:00:00 2001
From: fdelemarre <florian.delemarre@365talents.com>
Date: Wed, 10 Jul 2024 15:57:49 +0200
Subject: [PATCH 21/22] remove testing code

---
 .../IncidentActionPlanPage.tsx                | 173 +-----------------
 1 file changed, 1 insertion(+), 172 deletions(-)

diff --git a/src/webapp/pages/incident-action-plan/IncidentActionPlanPage.tsx b/src/webapp/pages/incident-action-plan/IncidentActionPlanPage.tsx
index a400c30e..36728c67 100644
--- a/src/webapp/pages/incident-action-plan/IncidentActionPlanPage.tsx
+++ b/src/webapp/pages/incident-action-plan/IncidentActionPlanPage.tsx
@@ -2,183 +2,12 @@ import React from "react";
 
 import i18n from "../../../utils/i18n";
 import { Layout } from "../../components/layout/Layout";
-import { Section } from "../../components/section/Section";
-import { Button } from "../../components/button/Button";
-import { BasicTable, TableColumn } from "../../components/table/BasicTable";
-import { IconEdit24 } from "@dhis2/ui";
 
 export const IncidentActionPlanPage: React.FC = React.memo(() => {
-    // TODO remove hard coding
-    const columnsTeam: TableColumn[] = [
-        { value: "role", label: "Role", type: "text" },
-        { value: "name", label: "Name", type: "link" },
-        { value: "email", label: "Email", type: "link" },
-        { value: "phone", label: "Phone", type: "text" },
-    ];
-    const dataTeam = [
-        {
-            role: "Incident Manager",
-            name: "George Abitbol",
-            email: "george.abitbol@gmail.com",
-            phone: "+33 6 12 34 56 78",
-        },
-        {
-            role: "Manager of Operations",
-            name: "John Traore",
-            email: "george.abitbol@gmail.com",
-            phone: "+33 6 12 34 56 78",
-        },
-    ];
-
-    // TODO remove hard coding
-    const columnsResponseActions: TableColumn[] = [
-        { value: "mainTask", label: "Main Task", type: "text", underline: true },
-        { value: "subActivities", label: "Sub Activities", type: "text" },
-        { value: "subPillar", label: "Sub Pillar", type: "text" },
-        { value: "responsibleOfficer", label: "Responsible officer", type: "text" },
-        {
-            value: "status",
-            label: "Status",
-            type: "selector",
-            options: [
-                { value: "Complete", label: "Complete" },
-                { value: "Pending", label: "Pending" },
-                { value: "In progress", label: "In progress" },
-            ],
-        },
-        {
-            value: "verification",
-            label: "Verification",
-            type: "selector",
-            options: [
-                { value: "Unverified", label: "Unverified" },
-                { value: "Verified", label: "Verified" },
-            ],
-        },
-        { value: "timeline", label: "Timeline", type: "text" },
-        { value: "dueDate", label: "Due date", type: "text" },
-    ];
-    const dataResponseActions = [
-        {
-            mainTask: "Data management",
-            subActivities: "Configure tablet",
-            subPillar: "Planning",
-            responsibleOfficer: "Moses Banda",
-            status: "Complete",
-            verification: "Unverified",
-            timeline: "Qtr 2 June",
-            dueDate: "8 June",
-        },
-        {
-            mainTask: "Risk communication",
-            subActivities: "Develop risk communication plan",
-            subPillar: "RCCE",
-            responsibleOfficer: "Mr Zimba",
-            status: "Pending",
-            verification: "Verified",
-            timeline: "Qtr 3 June",
-            dueDate: "17 June",
-        },
-        {
-            mainTask: "Vaccine transportation",
-            subActivities: "Reverse cold storage transport",
-            subPillar: "Logistics",
-            responsibleOfficer: "Mr Guissimon",
-            status: "In progress",
-            verification: "Unverified",
-            timeline: "Qtr 3 June",
-            dueDate: "9 June",
-        },
-        {
-            mainTask: "Training of RRT",
-            subActivities: "Train and deploy RRTs",
-            subPillar: "Operations",
-            responsibleOfficer: "Dr Chika",
-            status: "Not done",
-            verification: "Unverified",
-            timeline: "Qtr 3 June",
-            dueDate: "9 June",
-        },
-        {
-            mainTask: "Supplies",
-            subActivities: "Procure granular chlorine",
-            subPillar: "Administration",
-            responsibleOfficer: "Moses Banda",
-            status: "Pending",
-            verification: "Unverified",
-            timeline: "Qtr 4 June",
-            dueDate: "20 June",
-        },
-        {
-            mainTask: "Supplies",
-            subActivities: "Procure RDTs",
-            subPillar: "Operations",
-            responsibleOfficer: "Mpanga Kasonde",
-            status: "In Progress",
-            verification: "Unverified",
-            timeline: "Qtr 3 June",
-            dueDate: "17 June",
-        },
-        {
-            mainTask: "Strengthen surveillance",
-            subActivities: "Active case search",
-            subPillar: "Surveillance",
-            responsibleOfficer: "Namonda Mbumwae",
-            status: "Complete",
-            verification: "Unverified",
-            timeline: "Qtr 1 June",
-            dueDate: "5 June",
-        },
-    ];
-
     return (
         <Layout
             title={i18n.t("Incident Action Plan")}
             subtitle={i18n.t("Cholera in NW Province, June 2023")}
-        >
-            <Section
-                title={i18n.t("Response actions")}
-                headerButtom={
-                    <Button
-                        onClick={function (): void {
-                            throw new Error("Function not implemented.");
-                        }}
-                        variant="outlined"
-                        color="secondary"
-                        startIcon={<IconEdit24 />}
-                    >
-                        {i18n.t("Edit Response Actions")}
-                    </Button>
-                }
-            >
-                <BasicTable
-                    showRowIndex
-                    columns={columnsResponseActions}
-                    rows={dataResponseActions}
-                    onChange={(...arg) => console.log(arg)}
-                />
-            </Section>
-            <Section
-                title={i18n.t("Team")}
-                headerButtom={
-                    <Button
-                        onClick={function (): void {
-                            throw new Error("Function not implemented.");
-                        }}
-                        variant="outlined"
-                        color="secondary"
-                        startIcon={<IconEdit24 />}
-                    >
-                        {i18n.t("Edit Team")}
-                    </Button>
-                }
-            >
-                <BasicTable
-                    columns={columnsTeam}
-                    rows={dataTeam}
-                    onChange={(...arg) => console.log(arg)}
-                />
-            </Section>
-        </Layout>
+        ></Layout>
     );
 });

From 418bb54198ff2161c69f2c29d9809cdcccfd3619 Mon Sep 17 00:00:00 2001
From: fdelemarre <florian.delemarre@365talents.com>
Date: Wed, 10 Jul 2024 15:58:39 +0200
Subject: [PATCH 22/22] updated translations

---
 i18n/en.pot | 16 ++--------------
 i18n/es.po  | 14 +-------------
 2 files changed, 3 insertions(+), 27 deletions(-)

diff --git a/i18n/en.pot b/i18n/en.pot
index f5362cbb..e260f46c 100644
--- a/i18n/en.pot
+++ b/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-07-10T08:03:15.296Z\n"
-"PO-Revision-Date: 2024-07-10T08:03:15.296Z\n"
+"POT-Creation-Date: 2024-07-10T13:58:01.688Z\n"
+"PO-Revision-Date: 2024-07-10T13:58:01.688Z\n"
 
 msgid "Low"
 msgstr ""
@@ -99,18 +99,6 @@ msgstr ""
 msgid "Cholera in NW Province, June 2023"
 msgstr ""
 
-msgid "Response actions"
-msgstr ""
-
-msgid "Edit Response Actions"
-msgstr ""
-
-msgid "Team"
-msgstr ""
-
-msgid "Edit Team"
-msgstr ""
-
 msgid "Incident Management Team Builder"
 msgstr ""
 
diff --git a/i18n/es.po b/i18n/es.po
index 0e99d73b..57990e29 100644
--- a/i18n/es.po
+++ b/i18n/es.po
@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: i18next-conv\n"
-"POT-Creation-Date: 2024-07-10T08:03:15.296Z\n"
+"POT-Creation-Date: 2024-07-10T13:58:01.688Z\n"
 "PO-Revision-Date: 2018-10-25T09:02:35.143Z\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
@@ -98,18 +98,6 @@ msgstr ""
 msgid "Cholera in NW Province, June 2023"
 msgstr ""
 
-msgid "Response actions"
-msgstr ""
-
-msgid "Edit Response Actions"
-msgstr ""
-
-msgid "Team"
-msgstr ""
-
-msgid "Edit Team"
-msgstr ""
-
 msgid "Incident Management Team Builder"
 msgstr ""