update crm and create new customer

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^5.0.1",
+    "@mdxeditor/editor": "^1.13.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

public/locales/en/translation.json

@@ -277,6 +277,7 @@
       "notes": "Notes"
     },
     "buttonNew": "New",
+    "buttonUndo": "Undo",
     "tabs": {
       "dealInfo": "Deal Info",
       "activities": "Activities",

src/App.css

@@ -67,3 +67,7 @@
     content: unset;
   }
 }
+
+.mdx-editor {
+  background: #f4f5f4;
+}

src/Components/AppRoutes/index.js

@@ -1,8 +1,8 @@
 import { Route, Routes } from "react-router-dom";
 import { Constants, hasOnePermission, hasPermission } from "../../utils";
 import { useAppContext } from "../../Contexts/AppContext";
-import { Suspense, lazy } from "react";
+import { lazy } from "react";
-import { Spin } from "antd";
+import { MySupsenseFallback } from "../MySupsenseFallback";
 
 // Lazy-loaded components
 const Dashboard = lazy(() => import("../../Pages/Dashboard"));
@@ -25,30 +25,6 @@ const Consoles = lazy(() => import("../../Pages/Consoles"));
 const RoboticsRobots = lazy(() => import("../../Pages/Robotics/Robots"));
 const Crm = lazy(() => import("../../Pages/Crm"));
 
-function SuspenseFallback({ children }) {
-  return (
-    <Suspense
-      fallback={
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "row",
-            justifyContent: "center",
-            alignContent: "center",
-            alignItems: "center",
-            textAlign: "center",
-            height: "98.3vh",
-          }}
-        >
-          <Spin size="large" />
-        </div>
-      }
-    >
-      {children}
-    </Suspense>
-  );
-}
-
 export default function AppRoutes({ userSession, setUserSession }) {
   const appContext = useAppContext();
 
@@ -59,9 +35,9 @@ export default function AppRoutes({ userSession, setUserSession }) {
       <Route
         path="/"
         element={
-          <SuspenseFallback>
+          <MySupsenseFallback>
             <Dashboard />
-          </SuspenseFallback>
+          </MySupsenseFallback>
         }
       />
 
@@ -72,9 +48,9 @@ export default function AppRoutes({ userSession, setUserSession }) {
         <Route
           path={Constants.ROUTE_PATHS.EQUIPMENT_DOCUMENTATION}
           element={
-            <SuspenseFallback>
+            <MySupsenseFallback>
               <EquipmentDocumentationOverview />
-            </SuspenseFallback>
+            </MySupsenseFallback>
           }
         />
       )}
@@ -86,9 +62,9 @@ export default function AppRoutes({ userSession, setUserSession }) {
         <Route
           path={`${Constants.ROUTE_PATHS.EQUIPMENT_DOCUMENTATION_VIEW}:paramStockId`}
           element={
-            <SuspenseFallback>
+            <MySupsenseFallback>
               <ViewEquipmentDocumentations />
-            </SuspenseFallback>
+            </MySupsenseFallback>
           }
         />
       )}
@@ -100,11 +76,11 @@ export default function AppRoutes({ userSession, setUserSession }) {
         <Route
           path={`${Constants.ROUTE_PATHS.EQUIPMENT_DOCUMENTATION_VIEW}:paramStockId/edit/:paramDocumentationId`}
           element={
-            <SuspenseFallback>
+            <MySupsenseFallback>
               <ViewEquipmentDocumentations
                 isEditEquipmentDocumentationModalOpen={true}
               />
-            </SuspenseFallback>
+            </MySupsenseFallback>
           }
         />
       )}
@@ -116,11 +92,11 @@ export default function AppRoutes({ userSession, setUserSession }) {
         <Route
           path={`${Constants.ROUTE_PATHS.EQUIPMENT_DOCUMENTATION_VIEW}:paramStockId/create`}
           element={
-            <SuspenseFallback>
+            <MySupsenseFallback>
               <ViewEquipmentDocumentations
                 isCreateEquipmentDocumentationModalOpen={true}
               />
-            </SuspenseFallback>
+            </MySupsenseFallback>
           }
         />
       )}
@@ -128,18 +104,18 @@ export default function AppRoutes({ userSession, setUserSession }) {
       <Route
         path={`${Constants.ROUTE_PATHS.GROUP_TASKS}:paramCategory`}
         element={
-          <SuspenseFallback>
+          <MySupsenseFallback>
             <GroupTasks isGroupTasksViewModalOpen={false} />
-          </SuspenseFallback>
+          </MySupsenseFallback>
         }
       />
 
       <Route
         path={`${Constants.ROUTE_PATHS.GROUP_TASKS}:paramCategory/view/:paramGroupTaskId`}
         element={
-          <SuspenseFallback>
+          <MySupsenseFallback>
             <GroupTasks isGroupTasksViewModalOpen={true} />
-          </SuspenseFallback>
+          </MySupsenseFallback>
         }
       />
 
@@ -150,9 +126,9 @@ export default function AppRoutes({ userSession, setUserSession }) {
         <Route
           path={Constants.ROUTE_PATHS.GROUP_TASKS_HISTORY}
           element={
-            <SuspenseFallback>
+            <MySupsenseFallback>
               <GroupTasksHistory />
-            </SuspenseFallback>
+            </MySupsenseFallback>
           }
         />
       )}
@@ -160,30 +136,30 @@ export default function AppRoutes({ userSession, setUserSession }) {
       <Route
         path={Constants.ROUTE_PATHS.SCANNERS}
         element={
-          <SuspenseFallback>
+          <MySupsenseFallback>
             <Scanners />
-          </SuspenseFallback>
+          </MySupsenseFallback>
         }
       />
 
       <Route
         path={Constants.ROUTE_PATHS.USERS}
         element={
-          <SuspenseFallback>
+          <MySupsenseFallback>
             <AllUsers />
-          </SuspenseFallback>
+          </MySupsenseFallback>
         }
       />
 
       <Route
         path={Constants.ROUTE_PATHS.USER_PROFILE}
         element={
-          <SuspenseFallback>
+          <MySupsenseFallback>
             <UserProfile
               userSession={userSession}
               setUserSession={setUserSession}
             />
-          </SuspenseFallback>
+          </MySupsenseFallback>
         }
       />
 
@@ -197,9 +173,9 @@ export default function AppRoutes({ userSession, setUserSession }) {
         <Route
           path={Constants.ROUTE_PATHS.ADMIN_AREA_ROLES}
           element={
-            <SuspenseFallback>
+            <MySupsenseFallback>
               <AdminAreaRoles />
-            </SuspenseFallback>
+            </MySupsenseFallback>
           }
         />
       )}
@@ -211,9 +187,9 @@ export default function AppRoutes({ userSession, setUserSession }) {
         <Route
           path={Constants.ROUTE_PATHS.ADMIN_AREA_LOGS}
           element={
-            <SuspenseFallback>
+            <MySupsenseFallback>
               <AdminAreaLogs />
-            </SuspenseFallback>
+            </MySupsenseFallback>
           }
         />
       )}
@@ -230,9 +206,9 @@ export default function AppRoutes({ userSession, setUserSession }) {
         <Route
           path={Constants.ROUTE_PATHS.ADMIN_AREA_MANAGE}
           element={
-            <SuspenseFallback>
+            <MySupsenseFallback>
               <AdminAreaManage />
-            </SuspenseFallback>
+            </MySupsenseFallback>
           }
         />
       )}
@@ -244,9 +220,9 @@ export default function AppRoutes({ userSession, setUserSession }) {
         <Route
           path={Constants.ROUTE_PATHS.CONSOLES}
           element={
-            <SuspenseFallback>
+            <MySupsenseFallback>
               <Consoles />
-            </SuspenseFallback>
+            </MySupsenseFallback>
           }
         />
       )}
@@ -258,9 +234,9 @@ export default function AppRoutes({ userSession, setUserSession }) {
         <Route
           path={Constants.ROUTE_PATHS.ROBOTICS_ROBOTS}
           element={
-            <SuspenseFallback>
+            <MySupsenseFallback>
               <RoboticsRobots />
-            </SuspenseFallback>
+            </MySupsenseFallback>
           }
         />
       )}
@@ -274,9 +250,9 @@ export default function AppRoutes({ userSession, setUserSession }) {
         <Route
           path={`${Constants.ROUTE_PATHS.CRM}:paramType/:paramDealPhase`}
           element={
-            <SuspenseFallback>
+            <MySupsenseFallback>
               <Crm />
-            </SuspenseFallback>
+            </MySupsenseFallback>
           }
         />
       )}
@@ -284,9 +260,9 @@ export default function AppRoutes({ userSession, setUserSession }) {
       <Route
         path="*"
         element={
-          <SuspenseFallback>
+          <MySupsenseFallback>
             <PageNotFound />
-          </SuspenseFallback>
+          </MySupsenseFallback>
         }
       />
     </Routes>

src/Components/MySupsenseFallback/index.js

@@ -0,0 +1,26 @@
+import { Spin } from "antd";
+import { Suspense } from "react";
+
+export function MySupsenseFallback({ children }) {
+  return (
+    <Suspense
+      fallback={
+        <div
+          style={{
+            display: "flex",
+            flexDirection: "row",
+            justifyContent: "center",
+            alignContent: "center",
+            alignItems: "center",
+            textAlign: "center",
+            height: "98.3vh",
+          }}
+        >
+          <Spin size="large" />
+        </div>
+      }
+    >
+      {children}
+    </Suspense>
+  );
+}

src/Contexts/CrmContext.js

@@ -8,6 +8,7 @@ const preview = {
   openDrawerCustomerId: null,
   currentDrawerCustomer: null,
   currentDrawerCustomerRef: null,
+  changedDrawerCustomerFieldsRef: null,
 };
 
 const CrmContext = createContext(preview);
@@ -24,8 +25,9 @@ export function CrmProvider({ children }) {
   const openDrawerCustomerId = useRef(null);
   // will be used to store the customer object that is currently being viewed in the drawer
   const [currentDrawerCustomer, setCurrentDrawerCustomer] = useState(null);
-  // will be set on drawer open and used to check if the customer has changed
+  // will be used to store the customer updated object that is currently being viewed in the drawer
   const currentDrawerCustomerRef = useRef(null);
+  const changedDrawerCustomerFieldsRef = useRef([]);
 
   return (
     <CrmContext.Provider
@@ -41,6 +43,7 @@ export function CrmProvider({ children }) {
         currentDrawerCustomer,
         setCurrentDrawerCustomer,
         currentDrawerCustomerRef,
+        changedDrawerCustomerFieldsRef,
       }}
     >
       {children}

src/Handlers/WebSocketMessageHandler.js

@@ -49,6 +49,7 @@ export const ReceivedMessagesCommands = {
   AdminAreaManageLogManagerServerConnectionAdded: 45,
   AdminAreaManageLogManagerServerConnectionRemoved: 46,
   CrmCustomerUpdated: 47,
+  CrmCustomerCreated: 48,
 };
 
 // commands sent to the backend server
@@ -1030,14 +1031,27 @@ export function handleWebSocketMessage(
       );
       break;
     case ReceivedMessagesCommands.CrmCustomerUpdated:
-      console.log("CrmCustomerUpdated", body);
-
-      console.log("current", crmContext.currentDrawerCustomerRef.current);
-
       // update drawer customer if it is the same customer
       if (crmContext.currentDrawerCustomerRef.current !== null) {
         if (crmContext.currentDrawerCustomerRef.current.Id === body.Id) {
-          crmContext.setCurrentDrawerCustomer(body);
+          for (const property in body) {
+            if (
+              crmContext.changedDrawerCustomerFieldsRef.current.includes(
+                property
+              )
+            )
+              continue;
+
+            if (body[property] !== undefined && property !== "Id") {
+              crmContext.setCurrentDrawerCustomer((obj) => {
+                const newObj = { ...obj };
+
+                newObj[property] = body[property];
+
+                return newObj;
+              });
+            }
+          }
         }
       }
 
@@ -1048,13 +1062,23 @@ export function handleWebSocketMessage(
         const arrIndex = arr.findIndex((customer) => customer.Id === body.Id);
 
         if (arrIndex !== -1) {
-          newArr[arrIndex] = body;
+          // only update the changed properties and if the property exists
+          for (const property in body) {
+            if (body[property] !== undefined && property !== "Id") {
+              newArr[arrIndex][property] = body[property];
+            }
+          }
         }
 
         return newArr;
       });
 
       break;
+    case ReceivedMessagesCommands.CrmCustomerCreated:
+      console.log("test");
+
+      crmContext.setCustomers((arr) => [...arr, body]);
+      break;
 
     default:
       console.error("unknown command", cmd);

src/Pages/Crm/index.js

@@ -28,6 +28,22 @@ import PageNotFound from "../PageNotFound";
 import { useCrmContext } from "../../Contexts/CrmContext";
 import MyPagination from "../../Components/MyPagination";
 
+import "@mdxeditor/editor/style.css";
+import { MDXEditor } from "@mdxeditor/editor/MDXEditor";
+import { headingsPlugin } from "@mdxeditor/editor/plugins/headings";
+import { listsPlugin } from "@mdxeditor/editor/plugins/lists";
+import { quotePlugin } from "@mdxeditor/editor/plugins/quote";
+import { thematicBreakPlugin } from "@mdxeditor/editor/plugins/thematic-break";
+import { toolbarPlugin } from "@mdxeditor/editor/plugins/toolbar";
+import { BoldItalicUnderlineToggles } from "@mdxeditor/editor/plugins/toolbar/components/BoldItalicUnderlineToggles";
+import { UndoRedo } from "@mdxeditor/editor/plugins/toolbar/components/UndoRedo";
+import { linkPlugin } from "@mdxeditor/editor/plugins/link";
+import { markdownShortcutPlugin } from "@mdxeditor/editor/plugins/markdown-shortcut";
+import { MySupsenseFallback } from "../../Components/MySupsenseFallback";
+import { linkDialogPlugin } from "@mdxeditor/editor";
+import { tablePlugin } from "@mdxeditor/editor";
+import { frontmatterPlugin } from "@mdxeditor/editor";
+
 export default function Crm() {
   const { t } = useTranslation();
   const navigate = useNavigate();
@@ -67,7 +83,6 @@ export default function Crm() {
       },
       {
         title: t("crm.table.createdAt"),
-
         dataIndex: "createdAt",
         key: "createdAt",
       },
@@ -91,11 +106,6 @@ export default function Crm() {
         dataIndex: "createdBy",
         key: "createdBy",
       },
-      {
-        title: t("crm.table.notes"),
-        dataIndex: "notes",
-        key: "notes",
-      },
     ];
   };
 
@@ -113,7 +123,6 @@ export default function Crm() {
         email: item.Email,
         lastContact: item.LastContact,
         createdBy: item.CreatedBy,
-        notes: item.Notes,
       });
     });
 
@@ -160,7 +169,7 @@ export default function Crm() {
         wsConnectionCustomEventName,
         handleCustomersRequest
       );
-  }, [paramType, paramDealPhase]);
+  }, [paramType, paramDealPhase, crmContext.paginationPage]);
 
   if (paramDealPhase > segmentedOptions.length) {
     return <PageNotFound />;
@@ -176,8 +185,18 @@ export default function Crm() {
       >
         <Typography.Title level={4}>{t(title)}</Typography.Title>
 
-        <Button icon={<PlusOutlined />} onClick={() => console.log("add")}>
+        <Button
-          New
+          icon={<PlusOutlined />}
+          onClick={() => {
+            crmContext.openDrawerCustomerId.current = "new";
+            crmContext.currentDrawerCustomer = null;
+            crmContext.currentDrawerCustomerRef.current = null;
+            crmContext.changedDrawerCustomerFieldsRef.current = [];
+
+            setIsDrawerOpen(true);
+          }}
+        >
+          {t("crm.buttonNew")}
         </Button>
       </div>
 
@@ -243,20 +262,39 @@ function CustomerDrawer({ isOpen, onClose }) {
     {
       key: "1",
       label: t("crm.tabs.activities"),
-      children: "Tab 2 content",
+      children: <TabContentActivities />,
     },
     {
       key: "2",
       label: t("crm.tabs.notes"),
-      children: "Tab 3 content",
+      children: (
+        <TabContentNotes
+          notes={
+            crmContext.currentDrawerCustomer === null ||
+            crmContext.currentDrawerCustomer.Notes === null
+              ? ""
+              : crmContext.currentDrawerCustomer.Notes
+          }
+        />
+      ),
     },
   ];
 
-  useEffect(() => {
+  const [activeTab, setActiveTab] = useState(tabItems[0].key);
-    console.log("isOpen", isOpen);
 
+  useEffect(() => {
     if (crmContext.openDrawerCustomerId.current === null) return;
 
+    if (crmContext.openDrawerCustomerId.current === "new") {
+      if (isOpen) return;
+
+      // check if something has changed
+      if (crmContext.currentDrawerCustomer === null) return;
+
+      myFetch(`/crm/customer/create`, "POST", crmContext.currentDrawerCustomer);
+      return;
+    }
+
     const customerRequest = () => {
       if (!isOpen) return;
 
@@ -264,7 +302,6 @@ function CustomerDrawer({ isOpen, onClose }) {
         `/crm/customer/view/${crmContext.openDrawerCustomerId.current}`,
         "GET"
       ).then((data) => {
-        console.log("customer", data);
         crmContext.setCurrentDrawerCustomer(data);
         crmContext.currentDrawerCustomerRef.current = data;
       });
@@ -278,22 +315,26 @@ function CustomerDrawer({ isOpen, onClose }) {
         JSON.stringify(crmContext.currentDrawerCustomer) !==
         JSON.stringify(crmContext.currentDrawerCustomerRef.current)
       ) {
-        console.log("something has changed");
+        // only updated changed fields
+        const updatedCustomer = {};
+
+        Object.keys(crmContext.currentDrawerCustomer).forEach((key) => {
+          if (
+            crmContext.currentDrawerCustomer[key] !==
+            crmContext.currentDrawerCustomerRef.current[key]
+          ) {
+            updatedCustomer[key] = crmContext.currentDrawerCustomer[key];
+          }
+        });
 
         myFetch(
           `/crm/customer/update/${crmContext.openDrawerCustomerId.current}`,
           "POST",
-          crmContext.currentDrawerCustomer
+          updatedCustomer
-        ).then((data) => {
+        );
-          console.log("update", data);
-        });
-      } else {
-        console.log("nothing has changed");
       }
 
-      crmContext.openDrawerCustomerId.current = null;
+      handleCloseDrawer();
-      crmContext.currentDrawerCustomer = null;
-      crmContext.currentDrawerCustomerRef.current = null;
     }
 
     const handleCustomerRequest = () => customerRequest();
@@ -310,16 +351,44 @@ function CustomerDrawer({ isOpen, onClose }) {
       );
   }, [isOpen]);
 
+  const handleCloseDrawer = () => {
+    crmContext.openDrawerCustomerId.current = null;
+    crmContext.currentDrawerCustomer = null;
+    crmContext.currentDrawerCustomerRef.current = null;
+    crmContext.changedDrawerCustomerFieldsRef.current = [];
+
+    setActiveTab(tabItems[0].key);
+  };
+
+  const title =
+    crmContext.currentDrawerCustomer === null
+      ? "loading..."
+      : `${crmContext.currentDrawerCustomer?.FirstName} ${crmContext.currentDrawerCustomer?.LastName}`;
+
   return (
     <Drawer
-      title={`${crmContext.currentDrawerCustomer?.FirstName} ${crmContext.currentDrawerCustomer?.LastName}`}
+      title={title}
       placement="right"
       open={isOpen}
       onClose={onClose}
       width={720}
+      extra={
+        <Button
+          onClick={() => {
+            onClose();
+            handleCloseDrawer();
+          }}
         >
-      {console.log("drawer", crmContext.openDrawerCustomerId.current)}
+          {t("crm.buttonUndo")}
-      <Tabs defaultActiveKey="0" items={tabItems} centered />
+        </Button>
+      }
+    >
+      <Tabs
+        activeKey={activeTab}
+        onChange={(activeKey) => setActiveTab(activeKey)}
+        items={tabItems}
+        centered
+      />
     </Drawer>
   );
 }
@@ -357,7 +426,14 @@ function CollapseContainer({ children, label }) {
 function TabContentDealInfo() {
   const crmContext = useCrmContext();
 
+  const addToChangedFields = (value) => {
+    if (!crmContext.changedDrawerCustomerFieldsRef.current.includes(value)) {
+      crmContext.changedDrawerCustomerFieldsRef.current.push(value);
+    }
+  };
+
   return (
+    <MySupsenseFallback>
       <Space direction="vertical" style={{ display: "flex" }}>
         <CollapseContainer
           label={t("crm.tabContent.dealInfo.collapseDealStatus.label")}
@@ -368,16 +444,19 @@ function TabContentDealInfo() {
               initialValue={crmContext.currentDrawerCustomer?.Pipeline}
             >
               <Select
-              value={crmContext.currentDrawerCustomer?.Pipeline}
+                value={
+                  crmContext.currentDrawerCustomer?.Pipeline === undefined
+                    ? 1
+                    : crmContext.currentDrawerCustomer?.Pipeline
+                }
                 onChange={(value) => {
-                //setSelectedPipeline(value);
-                //setSelectedDealPhase(0);
-
                   crmContext.setCurrentDrawerCustomer({
                     ...crmContext.currentDrawerCustomer,
                     Pipeline: value,
-                  DealPhase: 0,
+                    DealPhase: 1,
                   });
+
+                  addToChangedFields("Pipeline");
                 }}
                 options={[
                   {
@@ -397,13 +476,19 @@ function TabContentDealInfo() {
               initialValue={crmContext.currentDrawerCustomer?.DealPhase}
             >
               <Select
-              value={crmContext.currentDrawerCustomer?.DealPhase}
+                value={
-              onChange={(value) =>
+                  crmContext.currentDrawerCustomer?.DealPhase === undefined
+                    ? 1
+                    : crmContext.currentDrawerCustomer?.DealPhase
+                }
+                onChange={(value) => {
                   crmContext.setCurrentDrawerCustomer({
                     ...crmContext.currentDrawerCustomer,
                     DealPhase: value,
-                })
+                  });
-              }
+
+                  addToChangedFields("DealPhase");
+                }}
                 options={t(
                   crmContext.currentDrawerCustomer?.Pipeline === 1
                     ? "crm.dmcPipeline.segmentedOptions"
@@ -433,12 +518,14 @@ function TabContentDealInfo() {
             >
               <Input
                 value={crmContext.currentDrawerCustomer?.FirstName}
-              onChange={(e) =>
+                onChange={(e) => {
                   crmContext.setCurrentDrawerCustomer({
                     ...crmContext.currentDrawerCustomer,
                     FirstName: e.target.value,
-                })
+                  });
-              }
+
+                  addToChangedFields("FirstName");
+                }}
               />
             </Form.Item>
 
@@ -449,12 +536,14 @@ function TabContentDealInfo() {
             >
               <Input
                 value={crmContext.currentDrawerCustomer?.LastName}
-              onChange={(e) =>
+                onChange={(e) => {
                   crmContext.setCurrentDrawerCustomer({
                     ...crmContext.currentDrawerCustomer,
                     LastName: e.target.value,
-                })
+                  });
-              }
+
+                  addToChangedFields("LastName");
+                }}
               />
             </Form.Item>
           </Content>
@@ -467,12 +556,14 @@ function TabContentDealInfo() {
             >
               <Input
                 value={crmContext.currentDrawerCustomer?.Telephone}
-              onChange={(e) =>
+                onChange={(e) => {
                   crmContext.setCurrentDrawerCustomer({
                     ...crmContext.currentDrawerCustomer,
                     Telephone: e.target.value,
-                })
+                  });
-              }
+
+                  addToChangedFields("Telephone");
+                }}
               />
             </Form.Item>
 
@@ -483,12 +574,14 @@ function TabContentDealInfo() {
             >
               <Input
                 value={crmContext.currentDrawerCustomer?.Email}
-              onChange={(e) =>
+                onChange={(e) => {
                   crmContext.setCurrentDrawerCustomer({
                     ...crmContext.currentDrawerCustomer,
                     Email: e.target.value,
-                })
+                  });
-              }
+
+                  addToChangedFields("Email");
+                }}
               />
             </Form.Item>
           </Content>
@@ -499,7 +592,17 @@ function TabContentDealInfo() {
                 "crm.tabContent.dealInfo.collapseMasterDataOfContact.company"
               )}
             >
-            <Input />
+              <Input
+                value={crmContext.currentDrawerCustomer?.Company}
+                onChange={(e) => {
+                  crmContext.setCurrentDrawerCustomer({
+                    ...crmContext.currentDrawerCustomer,
+                    Company: e.target.value,
+                  });
+
+                  addToChangedFields("Company");
+                }}
+              />
             </Form.Item>
 
             <Form.Item
@@ -507,7 +610,17 @@ function TabContentDealInfo() {
                 "crm.tabContent.dealInfo.collapseMasterDataOfContact.zipCode"
               )}
             >
-            <Input />
+              <Input
+                value={crmContext.currentDrawerCustomer?.ZipCode}
+                onChange={(e) => {
+                  crmContext.setCurrentDrawerCustomer({
+                    ...crmContext.currentDrawerCustomer,
+                    ZipCode: e.target.value,
+                  });
+
+                  addToChangedFields("ZipCode");
+                }}
+              />
             </Form.Item>
           </Content>
 
@@ -517,7 +630,17 @@ function TabContentDealInfo() {
                 "crm.tabContent.dealInfo.collapseMasterDataOfContact.address"
               )}
             >
-            <Input />
+              <Input
+                value={crmContext.currentDrawerCustomer?.Address}
+                onChange={(e) => {
+                  crmContext.setCurrentDrawerCustomer({
+                    ...crmContext.currentDrawerCustomer,
+                    Address: e.target.value,
+                  });
+
+                  addToChangedFields("Address");
+                }}
+              />
             </Form.Item>
 
             <Form.Item
@@ -525,7 +648,17 @@ function TabContentDealInfo() {
                 "crm.tabContent.dealInfo.collapseMasterDataOfContact.city"
               )}
             >
-            <Input />
+              <Input
+                value={crmContext.currentDrawerCustomer?.City}
+                onChange={(e) => {
+                  crmContext.setCurrentDrawerCustomer({
+                    ...crmContext.currentDrawerCustomer,
+                    City: e.target.value,
+                  });
+
+                  addToChangedFields("City");
+                }}
+              />
             </Form.Item>
           </Content>
 
@@ -535,7 +668,17 @@ function TabContentDealInfo() {
                 "crm.tabContent.dealInfo.collapseMasterDataOfContact.country"
               )}
             >
-            <Input />
+              <Input
+                value={crmContext.currentDrawerCustomer?.Country}
+                onChange={(e) => {
+                  crmContext.setCurrentDrawerCustomer({
+                    ...crmContext.currentDrawerCustomer,
+                    Country: e.target.value,
+                  });
+
+                  addToChangedFields("Country");
+                }}
+              />
             </Form.Item>
 
             <Form.Item
@@ -543,7 +686,17 @@ function TabContentDealInfo() {
                 "crm.tabContent.dealInfo.collapseMasterDataOfContact.federalState"
               )}
             >
-            <Input />
+              <Input
+                value={crmContext.currentDrawerCustomer?.FederalState}
+                onChange={(e) => {
+                  crmContext.setCurrentDrawerCustomer({
+                    ...crmContext.currentDrawerCustomer,
+                    FederalState: e.target.value,
+                  });
+
+                  addToChangedFields("FederalState");
+                }}
+              />
             </Form.Item>
           </Content>
 
@@ -553,7 +706,17 @@ function TabContentDealInfo() {
                 "crm.tabContent.dealInfo.collapseMasterDataOfContact.website"
               )}
             >
-            <Input />
+              <Input
+                value={crmContext.currentDrawerCustomer?.Website}
+                onChange={(e) => {
+                  crmContext.setCurrentDrawerCustomer({
+                    ...crmContext.currentDrawerCustomer,
+                    Website: e.target.value,
+                  });
+
+                  addToChangedFields("Website");
+                }}
+              />
             </Form.Item>
 
             <Form.Item
@@ -561,7 +724,17 @@ function TabContentDealInfo() {
                 "crm.tabContent.dealInfo.collapseMasterDataOfContact.leadOrigin"
               )}
             >
-            <Input />
+              <Input
+                value={crmContext.currentDrawerCustomer?.LeadOrigin}
+                onChange={(e) => {
+                  crmContext.setCurrentDrawerCustomer({
+                    ...crmContext.currentDrawerCustomer,
+                    LeadOrigin: e.target.value,
+                  });
+
+                  addToChangedFields("LeadOrigin");
+                }}
+              />
             </Form.Item>
           </Content>
         </CollapseContainer>
@@ -575,7 +748,17 @@ function TabContentDealInfo() {
                 "crm.tabContent.dealInfo.collapseSetterInfo.numberOfEmployees"
               )}
             >
-            <Input />
+              <Input
+                value={crmContext.currentDrawerCustomer?.NumberOfEmployees}
+                onChange={(e) => {
+                  crmContext.setCurrentDrawerCustomer({
+                    ...crmContext.currentDrawerCustomer,
+                    NumberOfEmployees: e.target.value,
+                  });
+
+                  addToChangedFields("NumberOfEmployees");
+                }}
+              />
             </Form.Item>
 
             <Form.Item
@@ -583,7 +766,19 @@ function TabContentDealInfo() {
                 "crm.tabContent.dealInfo.collapseSetterInfo.numberOfJobsSearchedFor"
               )}
             >
-            <Input />
+              <Input
+                value={
+                  crmContext.currentDrawerCustomer?.NumberOfJobsSearchedFor
+                }
+                onChange={(e) => {
+                  crmContext.setCurrentDrawerCustomer({
+                    ...crmContext.currentDrawerCustomer,
+                    NumberOfJobsSearchedFor: e.target.value,
+                  });
+
+                  addToChangedFields("NumberOfJobsSearchedFor");
+                }}
+              />
             </Form.Item>
           </Content>
 
@@ -591,7 +786,17 @@ function TabContentDealInfo() {
             <Form.Item
               label={t("crm.tabContent.dealInfo.collapseSetterInfo.jobTitle")}
             >
-            <Input />
+              <Input
+                value={crmContext.currentDrawerCustomer?.JobTitle}
+                onChange={(e) => {
+                  crmContext.setCurrentDrawerCustomer({
+                    ...crmContext.currentDrawerCustomer,
+                    JobTitle: e.target.value,
+                  });
+
+                  addToChangedFields("JobTitle");
+                }}
+              />
             </Form.Item>
 
             <Form.Item
@@ -599,7 +804,19 @@ function TabContentDealInfo() {
                 "crm.tabContent.dealInfo.collapseSetterInfo.numberOfEmployeesRequired"
               )}
             >
-            <Input />
+              <Input
+                value={
+                  crmContext.currentDrawerCustomer?.NumberOfEmployeesRequired
+                }
+                onChange={(e) => {
+                  crmContext.setCurrentDrawerCustomer({
+                    ...crmContext.currentDrawerCustomer,
+                    NumberOfEmployeesRequired: e.target.value,
+                  });
+
+                  addToChangedFields("NumberOfEmployeesRequired");
+                }}
+              />
             </Form.Item>
           </Content>
 
@@ -609,13 +826,35 @@ function TabContentDealInfo() {
                 "crm.tabContent.dealInfo.collapseSetterInfo.howLongHadHeBeenSearching"
               )}
             >
-            <Input />
+              <Input
+                value={
+                  crmContext.currentDrawerCustomer?.HowLongHadHeBeenSearching
+                }
+                onChange={(e) => {
+                  crmContext.setCurrentDrawerCustomer({
+                    ...crmContext.currentDrawerCustomer,
+                    HowLongHadHeBeenSearching: e.target.value,
+                  });
+
+                  addToChangedFields("HowLongHadHeBeenSearching");
+                }}
+              />
             </Form.Item>
 
             <Form.Item
               label={t("crm.tabContent.dealInfo.collapseSetterInfo.turnover")}
             >
-            <Input />
+              <Input
+                value={crmContext.currentDrawerCustomer?.Turnover}
+                onChange={(e) => {
+                  crmContext.setCurrentDrawerCustomer({
+                    ...crmContext.currentDrawerCustomer,
+                    Turnover: e.target.value,
+                  });
+
+                  addToChangedFields("Turnover");
+                }}
+              />
             </Form.Item>
           </Content>
         </CollapseContainer>
@@ -629,7 +868,17 @@ function TabContentDealInfo() {
                 "crm.tabContent.dealInfo.collapseDealProperties.dateOfcompletion"
               )}
             >
-            <Input />
+              <Input
+                value={crmContext.currentDrawerCustomer?.DateOfCompletion}
+                onChange={(e) => {
+                  crmContext.setCurrentDrawerCustomer({
+                    ...crmContext.currentDrawerCustomer,
+                    DateOfCompletion: e.target.value,
+                  });
+
+                  addToChangedFields("DateOfCompletion");
+                }}
+              />
             </Form.Item>
 
             <Form.Item
@@ -637,7 +886,17 @@ function TabContentDealInfo() {
                 "crm.tabContent.dealInfo.collapseDealProperties.orderVolume"
               )}
             >
-            <Input />
+              <Input
+                value={crmContext.currentDrawerCustomer?.OrderVolume}
+                onChange={(e) => {
+                  crmContext.setCurrentDrawerCustomer({
+                    ...crmContext.currentDrawerCustomer,
+                    OrderVolume: e.target.value,
+                  });
+
+                  addToChangedFields("OrderVolume");
+                }}
+              />
             </Form.Item>
           </Content>
 
@@ -647,7 +906,17 @@ function TabContentDealInfo() {
                 "crm.tabContent.dealInfo.collapseDealProperties.numberOfInstallments"
               )}
             >
-            <Input />
+              <Input
+                value={crmContext.currentDrawerCustomer?.NumberOfInstallments}
+                onChange={(e) => {
+                  crmContext.setCurrentDrawerCustomer({
+                    ...crmContext.currentDrawerCustomer,
+                    NumberOfInstallments: e.target.value,
+                  });
+
+                  addToChangedFields("NumberOfInstallments");
+                }}
+              />
             </Form.Item>
 
             <Form.Item
@@ -655,7 +924,19 @@ function TabContentDealInfo() {
                 "crm.tabContent.dealInfo.collapseDealProperties.amountsOfTheInstallments"
               )}
             >
-            <Input />
+              <Input
+                value={
+                  crmContext.currentDrawerCustomer?.AmountsOfTheInstallments
+                }
+                onChange={(e) => {
+                  crmContext.setCurrentDrawerCustomer({
+                    ...crmContext.currentDrawerCustomer,
+                    AmountsOfTheInstallments: e.target.value,
+                  });
+
+                  addToChangedFields("AmountsOfTheInstallments");
+                }}
+              />
             </Form.Item>
           </Content>
 
@@ -665,7 +946,17 @@ function TabContentDealInfo() {
                 "crm.tabContent.dealInfo.collapseDealProperties.bookedPackages"
               )}
             >
-            <Input />
+              <Input
+                value={crmContext.currentDrawerCustomer?.BookedPackages}
+                onChange={(e) => {
+                  crmContext.setCurrentDrawerCustomer({
+                    ...crmContext.currentDrawerCustomer,
+                    BookedPackages: e.target.value,
+                  });
+
+                  addToChangedFields("BookedPackages");
+                }}
+              />
             </Form.Item>
 
             <Form.Item
@@ -673,10 +964,68 @@ function TabContentDealInfo() {
                 "crm.tabContent.dealInfo.collapseDealProperties.assignedEmployee"
               )}
             >
-            <Input />
+              <Input
+                value={crmContext.currentDrawerCustomer?.AssignedEmployee}
+                onChange={(e) => {
+                  crmContext.setCurrentDrawerCustomer({
+                    ...crmContext.currentDrawerCustomer,
+                    AssignedEmployee: e.target.value,
+                  });
+
+                  addToChangedFields("AssignedEmployee");
+                }}
+              />
             </Form.Item>
           </Content>
         </CollapseContainer>
       </Space>
+    </MySupsenseFallback>
+  );
+}
+
+function TabContentActivities() {
+  return (
+    <MySupsenseFallback>
+      <div>Coming soon</div>
+    </MySupsenseFallback>
+  );
+}
+
+function TabContentNotes({ notes }) {
+  const crmContext = useCrmContext();
+
+  return (
+    <MySupsenseFallback>
+      <MDXEditor
+        key={crmContext.currentDrawerCustomer?.Id}
+        className="mdx-editor"
+        markdown={notes}
+        onChange={(value) => {
+          crmContext.setCurrentDrawerCustomer({
+            ...crmContext.currentDrawerCustomer,
+            Notes: value,
+          });
+        }}
+        plugins={[
+          listsPlugin(),
+          quotePlugin(),
+          headingsPlugin(),
+          linkPlugin(),
+          linkDialogPlugin(),
+          tablePlugin(),
+          thematicBreakPlugin(),
+          frontmatterPlugin(),
+          markdownShortcutPlugin(),
+          toolbarPlugin({
+            toolbarContents: () => (
+              <>
+                <UndoRedo />
+                <BoldItalicUnderlineToggles />
+              </>
+            ),
+          }),
+        ]}
+      />
+    </MySupsenseFallback>
   );
 }