Combine organisations and clients

Author: santiagolizardo

packages/app/package.json

@@ -5,9 +5,9 @@
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.7.1",
     "@reconmap/native-components": "workspace:^",
-    "@types/node": "^22.10.1",
-    "@types/react": "^18.3.13",
-    "@types/react-dom": "^18.3.1",
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.0.1",
+    "@types/react-dom": "^19.0.2",
     "@uiw/react-md-editor": "^4.0.4",
     "bulma": "^1.0.2",
     "countries-and-timezones": "^3.7.2",
@@ -16,19 +16,19 @@
     "dayjs": "^1.11.13",
     "friendly-mimes": "^3.0.1",
     "http-status-codes": "^2.3.0",
-    "i18next": "^24.0.5",
-    "i18next-browser-languagedetector": "^8.0.0",
+    "i18next": "^24.1.0",
+    "i18next-browser-languagedetector": "^8.0.2",
     "javascript-time-ago": "^2.5.11",
     "keycloak-js": "^26.0.7",
     "path-browserify": "^1.0.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-dropzone": "^14.3.5",
     "react-hot-toast": "^2.4.1",
-    "react-i18next": "^15.1.3",
+    "react-i18next": "^15.2.0",
     "react-markdown": "^9.0.1",
     "react-router-dom": "^7.0.2",
-    "react-select": "^5.8.3",
+    "react-select": "^5.9.0",
     "react-time-ago": "^7.3.3",
     "recharts": "^2.14.1",
     "typescript": "^5.7.2",
@@ -37,26 +37,26 @@
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^6.6.3",
-    "@testing-library/react": "^16.0.1",
+    "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
-    "@typescript-eslint/eslint-plugin": "^8.17.0",
-    "@typescript-eslint/parser": "^8.17.0",
+    "@typescript-eslint/eslint-plugin": "^8.18.0",
+    "@typescript-eslint/parser": "^8.18.0",
     "@vitejs/plugin-react": "^4.3.4",
     "@vitest/coverage-v8": "^2.1.8",
     "eslint": "^9.16.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-react": "^7.37.2",
-    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-hooks": "^5.1.0",
     "jsdom": "^25.0.1",
     "npm-check-updates": "^17.1.11",
     "prettier": "^3.4.2",
     "stylelint": "^16.11.0",
     "stylelint-config-standard": "^36.0.1",
-    "vite": "^6.0.2",
+    "vite": "^6.0.3",
     "vite-plugin-svgr": "^4.3.0",
-    "vite-tsconfig-paths": "^5.1.3",
+    "vite-tsconfig-paths": "^5.1.4",
     "vitest": "^2.1.8"
   },
   "scripts": {

packages/app/src/components/clients/Create.jsx

@@ -1,25 +1,33 @@
 import { actionCompletedToast, errorToast } from "components/ui/toast";
 import Client from "models/Client";
 import { useState } from "react";
+import { useTranslation } from "react-i18next";
 import { Link, useNavigate } from "react-router-dom";
 import secureApiFetch from "../../services/api";
 import Breadcrumb from "../ui/Breadcrumb";
 import Title from "../ui/Title";
 import ClientForm from "./Form";
+import OrganisationsUrls from "./OrganisationsUrls";
 
 const ClientCreate = () => {
+    const [t] = useTranslation();
+
     const navigate = useNavigate();
     const [newClient, setNewClient] = useState(Client);
 
     const onFormSubmit = async (ev) => {
         ev.preventDefault();
 
-        secureApiFetch(`/clients`, {
+        const form = ev.target.closest("form");
+        const formData = new FormData(form);
+        const data = Object.fromEntries(formData.entries());
+
+        secureApiFetch("/clients", {
             method: "POST",
-            body: JSON.stringify(newClient),
+            body: JSON.stringify(data),
         }).then((resp) => {
             if (resp.status === 201) {
-                navigate(`/clients`);
+                navigate(OrganisationsUrls.List);
                 actionCompletedToast(`The client "${newClient.name}" has been added.`);
             } else {
                 errorToast("The client could not be saved. Review the form data or check the application logs.");
@@ -31,11 +39,11 @@ const ClientCreate = () => {
         <div>
             <div className="heading">
                 <Breadcrumb>
-                    <Link to="/clients">Clients</Link>
+                    <Link to={OrganisationsUrls.List}>{t("Organisations")}</Link>
                 </Breadcrumb>
             </div>
 
-            <Title title="New client details" />
+            <Title title={t("New organisation")} />
 
             <ClientForm onFormSubmit={onFormSubmit} client={newClient} clientSetter={setNewClient} />
         </div>

packages/app/src/components/clients/Details.jsx

@@ -16,6 +16,7 @@ import { actionCompletedToast, errorToast } from "components/ui/toast";
 import UserLink from "components/users/Link";
 import Contact from "models/Contact";
 import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { Link, useNavigate, useParams } from "react-router-dom";
 import secureApiFetch from "services/api";
 import Breadcrumb from "../ui/Breadcrumb";
@@ -25,6 +26,7 @@ import DeleteButton from "../ui/buttons/Delete";
 import useDelete from "./../../hooks/useDelete";
 import useFetch from "./../../hooks/useFetch";
 import Loading from "./../ui/Loading";
+import OrganisationsUrls from "./OrganisationsUrls";
 
 const ClientProjectsTab = ({ clientId }) => {
     const [projects] = useFetch(`/projects?clientId=${clientId}`);
@@ -48,6 +50,8 @@ const ClientProjectsTab = ({ clientId }) => {
 };
 
 const ClientDetails = () => {
+    const [t] = useTranslation();
+
     const { clientId } = useParams();
     const navigate = useNavigate();
 
@@ -140,7 +144,9 @@ const ClientDetails = () => {
                 </Breadcrumb>
                 <NativeButtonGroup>
                     <RestrictedComponent roles={["administrator", "superuser", "user"]}>
-                        <LinkButton href={`/clients/${client.id}/edit`}>Edit</LinkButton>
+                        <LinkButton href={OrganisationsUrls.Edit.replace(":organisationId", client.id)}>
+                            {t("Edit")}
+                        </LinkButton>
                         <DeleteButton onClick={handleDelete} />
                     </RestrictedComponent>
                 </NativeButtonGroup>

packages/app/src/components/clients/Form.jsx

@@ -1,11 +1,16 @@
 import AttachmentsImageDropzone from "components/attachments/ImageDropzone";
+import LabelledField from "components/form/LabelledField";
 import NativeInput from "components/form/NativeInput";
+import NativeSelect from "components/form/NativeSelect";
 import RestrictedComponent from "components/logic/RestrictedComponent";
 import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import secureApiFetch from "../../services/api";
 import PrimaryButton from "../ui/buttons/Primary";
 
 const ClientForm = ({ isEditForm = false, onFormSubmit, client, clientSetter: setClient }) => {
+    const [t] = useTranslation();
+
     const parentType = "client";
     const parentId = client.id;
     const [logo, setLogo] = useState(null);
@@ -58,21 +63,37 @@ const ClientForm = ({ isEditForm = false, onFormSubmit, client, clientSetter: se
         <form onSubmit={onFormSubmit}>
             <fieldset>
                 <legend>Basic information</legend>
-                <label>
-                    Name
-                    <NativeInput
-                        type="text"
-                        name="name"
-                        onChange={onFormChange}
-                        value={client.name || ""}
-                        required
-                        autoFocus
-                    />
-                </label>
-                <label>
-                    Address
-                    <NativeInput type="text" name="address" onChange={onFormChange} value={client.address || ""} />
-                </label>
+                <LabelledField
+                    label={t("Type")}
+                    control={
+                        <NativeSelect name="kind" defaultValue={client.kind}>
+                            <option value="service_provider">{t("Service provider")}</option>
+                            <option value="client">{t("Client")}</option>
+                        </NativeSelect>
+                    }
+                />
+
+                <LabelledField
+                    label={t("Name")}
+                    control={
+                        <NativeInput
+                            type="text"
+                            name="name"
+                            onChange={onFormChange}
+                            value={client.name || ""}
+                            required
+                            autoFocus
+                        />
+                    }
+                />
+
+                <LabelledField
+                    label={t("Address")}
+                    control={
+                        <NativeInput type="text" name="address" onChange={onFormChange} value={client.address || ""} />
+                    }
+                />
+
                 <label>
                     URL
                     <NativeInput type="text" name="url" onChange={onFormChange} value={client.url || ""} />

packages/app/src/components/clients/Link.jsx

@@ -1,4 +1,6 @@
+import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
+import OrganisationsUrls from "./OrganisationsUrls";
 
 const styles = {
     badge: {
@@ -9,12 +11,14 @@ const styles = {
 };
 
 const ClientLink = ({ clientId, children }) => {
+    const [t] = useTranslation();
+
     if (!clientId) {
-        return "(not set)";
+        return t("(not set)");
     }
 
     return (
-        <Link style={styles.badge} to={`/clients/${clientId}`}>
+        <Link style={styles.badge} to={OrganisationsUrls.Details.replace(":organisationId", clientId)}>
             {children}
         </Link>
     );

packages/app/src/components/clients/List.jsx

@@ -4,41 +4,39 @@ import DeleteIconButton from "components/ui/buttons/DeleteIconButton";
 import ExportButton from "components/ui/buttons/ExportButton";
 import LoadingTableRow from "components/ui/tables/LoadingTableRow";
 import NoResultsTableRow from "components/ui/tables/NoResultsTableRow";
-import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
 import useDelete from "../../hooks/useDelete";
 import useFetch from "../../hooks/useFetch";
 import Breadcrumb from "../ui/Breadcrumb";
 import ExternalLink from "../ui/ExternalLink";
-import CreateButton from "../ui/buttons/Create";
 import LinkButton from "../ui/buttons/Link";
 import ClientLink from "./Link";
+import OrganisationsUrls from "./OrganisationsUrls";
 
 const ClientsList = () => {
-    const navigate = useNavigate();
+    const [t] = useTranslation();
+
     const [clients, updateTasks] = useFetch("/clients");
 
     const destroy = useDelete("/clients/", updateTasks);
 
-    const handleCreateClient = () => {
-        navigate(`/clients/create`);
-    };
-
     return (
         <>
             <div className="heading">
                 <Breadcrumb />
 
                 <NativeButtonGroup>
-                    <CreateButton onClick={handleCreateClient}>Add client</CreateButton>
+                    <LinkButton href={OrganisationsUrls.Create}>{t("Add organisation")}</LinkButton>
                     <ExportButton entity="clients" disabled={clients === null || clients?.length === 0} />
                 </NativeButtonGroup>
             </div>
-            <Title title="Clients" />
+            <Title title={t("Organisations")} />
 
             <table className="table is-fullwidth">
                 <thead>
                     <tr>
-                        <th>Name</th>
+                        <th>{t("Type")}</th>
+                        <th>{t("Name")}</th>
                         <th>Address</th>
                         <th>URL</th>
                         <th>Number of contacts</th>
@@ -52,6 +50,7 @@ const ClientsList = () => {
                         0 < clients.length &&
                         clients.map((client) => (
                             <tr key={client.id}>
+                                <td>{client.kind}</td>
                                 <td>
                                     <ClientLink clientId={client.id}>{client.name}</ClientLink>
                                 </td>
@@ -61,7 +60,9 @@ const ClientsList = () => {
                                 </td>
                                 <td>{client.num_contacts}</td>
                                 <td>
-                                    <LinkButton href={`/clients/${client.id}/edit`}>Edit</LinkButton>
+                                    <LinkButton href={OrganisationsUrls.Edit.replace(":organisationId", client.id)}>
+                                        {t("Edit")}
+                                    </LinkButton>
                                     <DeleteIconButton onClick={() => destroy(client.id)} />
                                 </td>
                             </tr>

packages/app/src/components/clients/OrganisationsUrls.ts

@@ -0,0 +1,8 @@
+const OrganisationsUrls: Record<string, string> = {
+    List: "/organisations",
+    Create: "/organisations/create",
+    Edit: "/organisations/:organisationId/edit",
+    Details: "/organisations/:organisationId",
+};
+
+export default OrganisationsUrls;

packages/app/src/components/clients/Routes.jsx

@@ -4,9 +4,10 @@ import ClientCreate from "./Create";
 import ClientDetails from "./Details";
 import EditClientPage from "./Edit";
 import ClientsList from "./List";
+import OrganisationsUrls from "./OrganisationsUrls";
 
 const ClientsRoutes = [
-    <Route path={`/clients`} element={<SettingsLayout />}>
+    <Route path={OrganisationsUrls.List} element={<SettingsLayout />}>
         <Route index element={<ClientsList />} />
         <Route path={`create`} element={<ClientCreate />} />,
         <Route path={`:clientId`} element={<ClientDetails />} />,

packages/app/src/components/form/DynamicForm.jsx

@@ -4,23 +4,23 @@ const DynamicForm = ({ fields }) => {
     return fields.map((field) => {
         if (["text"].includes(field.kind)) {
             return (
-                <div>
+                <div key={`customField-${field.name}`}>
                     <label htmlFor={field.name}>{field.label}</label>
                     <NativeInput id={field.name} type={field.kind} name={field.name} />
                 </div>
             );
         }
         if (["integer"].includes(field.kind)) {
             return (
-                <div>
+                <div key={`customField-${field.name}`}>
                     <label htmlFor={field.name}>{field.label}</label>
                     <NativeInput id={field.name} type="number" name={field.name} />
                 </div>
             );
         }
         if (["decimal"].includes(field.kind)) {
             return (
-                <div>
+                <div key={`customField-${field.name}`}>
                     <label htmlFor={field.name}>{field.label}</label>
                     <NativeInput id={field.name} type="number" name={field.name} step="0.001" />
                 </div>

packages/app/src/components/layout/Header.jsx

@@ -1,3 +1,4 @@
+import OrganisationsUrls from "components/clients/OrganisationsUrls";
 import SearchUrls from "components/search/SearchUrls";
 import ExternalLink from "components/ui/ExternalLink";
 import Configuration from "Configuration";
@@ -24,14 +25,18 @@ const MenuLinks = [
             { name: t("Commands"), url: "/commands", permissions: "commands.*" },
             { name: t("Vulnerabilities"), url: "/vulnerabilities", permissions: "commands.*" },
             { name: t("Documents"), url: "/documents", permissions: "documents.*" },
+            null,
+            { name: t("Search"), url: SearchUrls.AdvancedSearch },
         ],
     },
     {
         name: t("Settings"),
         items: [
             { name: t("Users"), url: "/users" },
+            { name: t("Organisations"), url: OrganisationsUrls.List },
+            null,
             { name: t("Custom fields"), url: "/settings/custom-fields" },
-            { name: t("Search"), url: SearchUrls.AdvancedSearch },
+            null,
             { name: t("Import data"), url: "/system/import-data" },
             { name: t("Export data"), url: "/system/export-data" },
         ],