- web ui features to add a new cost schedules, and root cost items

- improved ui for cost schedules
- sharing more css across files
- refactor get_predefined_types(cost_schedule)

src/bonsai/bonsai/bim/data/webui/sioserver.py

@@ -176,6 +176,11 @@ class BlenderNamespace(socketio.AsyncNamespace):
         blender_messages[sid]["cost_value"] = data
         await sio.emit("cost_value", {"blenderId": sid, "data": data}, namespace="/web")
 
+    async def on_predefined_types(self, sid, data):
+        print(f"Predefined types from Blender client {sid}")
+        blender_messages[sid]["predefined_types"] = data
+        await sio.emit("predefined_types", {"blenderId": sid, "data": data}, namespace="/web")
+
 async def schedules(request):
     with open("templates/index.html", "r") as f:
         template = f.read()

src/bonsai/bonsai/bim/data/webui/static/css/cost.css

@@ -5,24 +5,19 @@
 table {
     width: 100%;
     border-collapse: collapse;
-    /* prevent text from being selceted */
     user-select: none;
 }
 
-
 td:not(:first-child) {
     text-align: center;
     justify-content: space-between;
     align-items: center;
-
 }
 
 td {
-
     border-right: 1px solid #ddd;
     padding-left: 0.5em;
     padding-right: 0.5em;
-
 }
 
 .nested {
@@ -39,22 +34,15 @@ td {
     padding: 0;
 }
 
-.flex-container {
+input, select {
-    display: flex;
+    background-color: var(--blender-button-background, var(--bg-color));
-    justify-content: space-between;
+    color: var(--blender-button-text, var(--text-color));
-    align-items: center;
+    border-color: var(--blender-button-border, var(--border-color));
-    width: 100%;
+    transition: filter 0.2s ease;
-}
-
-input {
-    width: 100%;
-    border: 1px solid #e1e4e8;
     border-radius: 6px;
-    background-color:inherit;
     padding: 6px 8px;
     font-size: 14px;
     line-height: 20px;
-    color:inherit;
     transition: border-color 0.2s cubic-bezier(0.3, 0, 0.5, 1);
     height: inherit;
     margin-left: 0.5em;
@@ -62,12 +50,11 @@ input {
 }
 
 input:focus {
-    border-color: #0366d6;
+    border-color: #28a745;
     outline: none;
-    box-shadow: 0 0 0 3px rgba(3, 102, 214, 0.3);
+    box-shadow: 0 0 0 3px #28a745;
 }
 
-
 #cost-items tr:hover, .highlighted {
     background-color: #ffb936;
     color : black;
@@ -87,13 +74,17 @@ input:focus {
     padding: 10px;
 }
 
-.cost-values-form {
+.floating-form {
+    min-width: 40%;
+    height: auto;
     position: absolute;
-    background-color: white;
+    background-color: #363636;
     border: 1px solid black;
     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
     z-index: 9999;
     cursor: move;
+    padding: 20px;
+    user-select: none;
 }
 
 .cost-values-table {
@@ -120,18 +111,20 @@ input:focus {
 }
 
 .action-button {
-    background-color: #28a745; /* GitHub green color */
+    background-color: #28a745;
     border: none;
-    color: #fff; /* White text color */
+    color: #fff;
-    padding: 0.5em 1em; /* Adjust padding as needed */
+    padding: 0.5em 1em;
     cursor: pointer;
-    border-radius: 6px; /* Slightly rounded corners */
+    border-radius: 6px;
-    font-weight: bold; /* Make the text bold */
+    font-weight: bold;
-    text-decoration: none; /* Remove underline */
+    text-decoration: none;
-    display: inline-block; /* Make the button inline */
+    display: inline-block;
-    transition: background-color 0.3s ease; /* Add a smooth transition */
+    transition: background-color 0.3s ease;
+    width: fit-content;
+    margin-left: 0.5em;
 }
 
 .action-button:hover {
-    background-color: #218838; /* Darker green color on hover */
+    background-color: #218838;
 }

src/bonsai/bonsai/bim/data/webui/static/css/gantt.css

@@ -1,127 +1,5 @@
 @import url("./components/card.css");
-
+@import url("./shared.css");
-:root {
-    --font-family: Arial, sans-serif;
-    --base-font-size: 16px;
-    --margin-tiny: 0.125rem;
-    --margin-small: 0.625rem;
-    --margin-medium: 1.25rem;
-    --margin-large: 2.5rem;
-    --padding-tiny: 0.125rem;
-    --padding-small: 0.625rem;
-    --padding-medium: 1rem;
-    --font-size-small: 1rem;
-    --font-size-large: 1.2rem;
-    --logo-height: 1.5rem;
-    --nav-height: 0.625rem;
-    --border-radius: 0.3rem;
-    --folder-collapse-font-size: 0.75rem;
-    --folder-collapse-font-family: Courier, "Courier New", monospace;
-    --box-shadow: 0 0 0.7rem #5f5f5f66;
-}
-
-:root.dark {
-    color-scheme: dark;
-    --bg-color: #252525;
-    --primary-text-color: #e0e0e0;
-    --secondary-text-color: #c7c7c7;
-    --nav-bg-color: #121212;
-    --nav-border-color: #25682a;
-    --nav-link-color: #fff;
-    --nav-link-hover-color: #3fb449;
-    --warning-color: #FFDB8F;
-    --border-color: #464444;
-    --hover-bg-color: #3a3a3a;
-    --highlight-color: #009136;
-    --task-complete-bg-color: #777777;
-    --milestone-border-color: #ffffff;
-    --group-item-bg-color: #4b4b4b;
-    --input-bg-color: #3b3b3b;
-    --input-border-color: #000;
-    --border-color: #464444;
-}
-
-:root.light {
-    color-scheme: light;
-    --bg-color: #ffffff;
-    --primary-text-color: #000000;
-    --nav-bg-color: #f8f8f8;
-    --nav-border-color: #cccccc;
-    --nav-link-color: #000000;
-    --nav-link-hover-color: #38a63d;
-    --warning-color: #FF4500;
-    --border-color: #222;
-}
-
-
-*:not(td, tr, td, .gmain) {
-    border-radius: var(--border-radius) !important;
-}
-
-html {
-    font-size: var(--base-font-size);
-}
-
-body {
-    background-color: var(--blender-window-background, var(--bg-color));
-    color: var(--blender-text, var(--primary-text-color));
-    margin: 0;
-    font-family: var(--font-family);
-    display: flex;
-    flex-direction: column;
-    min-height: 100vh;
-}
-
-#container {
-    flex: 1;
-    padding: var(--margin-small);
-}
-
-h3 {
-    margin-top: 0;
-}
-
-nav {
-    background-color: var(--blender-top-bar-header, var(--nav-bg-color));
-    height: var(--nav-height);
-    padding: var(--padding-medium) 0;
-    display: flex;
-    align-items: center;
-    position: relative;
-    border-bottom: 2px solid var(--blender-tab-outline, var(--nav-border-color));
-}
-
-nav .logo {
-    margin-left: var(--margin-large);
-    height: var(--logo-height);
-}
-
-nav ul {
-    list-style-type: none;
-    margin: 0;
-    display: flex;
-    flex: 1;
-    justify-content: center;
-}
-
-nav ul li {
-    margin-right: var(--margin-large);
-}
-
-nav ul li a {
-    text-decoration: none;
-    color: var(--blender-text, var(--nav-link-color));
-}
-
-nav ul li a:hover,
-nav ul li a.active {
-    color: var(--blender-selected-object, var(--nav-link-hover-color));
-}
-
-.warning,
-.warning-icon {
-    color: var(--blender-info-warning, var(--warning-color));
-}
 
 .table-description {
   margin-bottom: var(--margin-medium);
@@ -194,7 +72,8 @@ nav ul li a.active {
   max-height: 0;
   overflow: hidden;
   padding-left: var(--padding-small);
-    transition: max-height 0.2s ease-out, padding 0.2s ease-out, opacity 0.1s ease-out;
+  transition: max-height 0.2s ease-out, padding 0.2s ease-out,
+    opacity 0.1s ease-out;
   background-color: var(--blender-panel-background, var(--nav-bg-color));
   margin-top: var(--margin-tiny);
   opacity: 0;
@@ -259,7 +138,6 @@ footer p {
   }
 }
 
-
 button,
 select {
   background-color: var(--blender-button-background, var(--bg-color));
@@ -316,7 +194,7 @@ button:hover {
   border-color: var(--border-color);
 }
 
-:root.dark .gtaskname>div {
+:root.dark .gtaskname > div {
   color: var(--secondary-text-color);
 }
 
@@ -429,7 +307,6 @@ button:hover {
 
 /* ------------------- for blender generated theme ------------------- */
 
-
 :root.blender div.gantt,
 :root.blender .gantt table,
 :root.blender .gantt td {
@@ -447,7 +324,6 @@ button:hover {
   border-color: var(--blender-tab-outline);
 }
 
-
 /* Headings and cell defaults */
 :root.blender .gtaskheading,
 :root.blender .gchartlbl.gcontainercol .gmajorheading,
@@ -486,7 +362,7 @@ button:hover {
   border-color: var(--blender-tab-outline);
 }
 
-:root.blender .gtaskname>div,
+:root.blender .gtaskname > div,
 :root.blender .gtaskname div,
 :root.blender .gtaskheading div,
 :root.blender .gtaskname span {
@@ -509,7 +385,6 @@ button:hover {
   border-color: var(--blender-tab-outline);
 }
 
-
 /* Highlight row */
 :root.blender .gitemhighlight td,
 :root.blender .gitemhighlight .gantt-inputtable,

src/bonsai/bonsai/bim/data/webui/static/css/shared.css

@@ -8,37 +8,50 @@
   --padding-tiny: 0.125rem;
   --padding-small: 0.625rem;
   --padding-medium: 1rem;
+  --font-size-small: 1rem;
   --font-size-large: 1.2rem;
   --logo-height: 1.5rem;
   --nav-height: 0.625rem;
   --border-radius: 0.3rem;
+  --folder-collapse-font-size: 0.75rem;
+  --folder-collapse-font-family: Courier, "Courier New", monospace;
+  --box-shadow: 0 0 0.7rem #5f5f5f66;
 }
 
 :root.dark {
   color-scheme: dark;
   --bg-color: #252525;
-    --text-color: #e0e0e0;
+  --primary-text-color: #e0e0e0;
+  --secondary-text-color: #c7c7c7;
   --nav-bg-color: #121212;
   --nav-border-color: #25682a;
   --nav-link-color: #fff;
   --nav-link-hover-color: #3fb449;
-    --warning-color: #FFDB8F;
+  --warning-color: #ffdb8f;
+  --border-color: #464444;
+  --hover-bg-color: #3a3a3a;
+  --highlight-color: #009136;
+  --task-complete-bg-color: #777777;
+  --milestone-border-color: #ffffff;
+  --group-item-bg-color: #4b4b4b;
+  --input-bg-color: #3b3b3b;
+  --input-border-color: #000;
   --border-color: #464444;
 }
 
 :root.light {
   color-scheme: light;
   --bg-color: #ffffff;
-    --text-color: #000000;
+  --primary-text-color: #000000;
   --nav-bg-color: #f8f8f8;
   --nav-border-color: #cccccc;
   --nav-link-color: #000000;
   --nav-link-hover-color: #38a63d;
-    --warning-color: #FF4500;
+  --warning-color: #ff4500;
   --border-color: #222;
 }
 
-*:not(.tabulator-cell) {
+*:not(td, tr, td, .gmain) {
   border-radius: var(--border-radius) !important;
 }
 
@@ -48,7 +61,7 @@ html {
 
 body {
   background-color: var(--blender-window-background, var(--bg-color));
-    color: var(--blender-text, var(--text-color));
+  color: var(--blender-text, var(--primary-text-color));
   margin: 0;
   font-family: var(--font-family);
   display: flex;
@@ -57,9 +70,8 @@ body {
 }
 
 #container {
-    position: relative;
-    padding: var(--margin-small);
   flex: 1;
+  padding: var(--margin-small);
 }
 
 h3 {
@@ -108,14 +120,6 @@ nav ul li a.active {
   color: var(--blender-info-warning, var(--warning-color));
 }
 
-#toggle-theme {
-    border: none;
-    background: none;
-    cursor: pointer;
-    font-size: var(--font-size-large);
-    margin-right: var(--margin-medium);
-}
-
 #toggle-theme:focus {
   outline: none;
 }
@@ -153,7 +157,8 @@ nav ul li a.active {
   max-height: 0;
   overflow: hidden;
   padding-left: var(--padding-small);
-    transition: max-height 0.2s ease-out, padding 0.2s ease-out, opacity 0.1s ease-out;
+  transition: max-height 0.2s ease-out, padding 0.2s ease-out,
+    opacity 0.1s ease-out;
   background-color: var(--blender-panel-background, var(--nav-bg-color));
   margin-top: var(--margin-tiny);
   opacity: 0;
@@ -173,7 +178,7 @@ nav ul li a.active {
   width: auto;
   background-color: var(--blender-panel-header, var(--bg-color));
   font-size: var(--base-font-size);
-    color: var(--blender-text, var(--text-color))
+  color: var(--blender-text, var(--text-color));
 }
 
 #show-connected-button:hover,
@@ -212,3 +217,23 @@ select {
 button:hover {
   filter: brightness(1.2);
 }
+
+.row-container {
+  width: 100%;
+  border-collapse: collapse;
+  display: flex;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+}
+
+.column-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  flex-wrap: wrap;
+}
+
+label {
+  margin-right: var(--margin-small);
+  margin-bottom: var(--margin-small);
+}

src/bonsai/bonsai/bim/data/webui/static/js/cost.js

@@ -1,8 +1,10 @@
-import { CostUI } from './utilities/costui.js';
+import { CostUI } from "./utilities/costui.js";
 
 const connectedClients = {};
 let socket;
 
+let isScheduleLoad = {};
+
 $(document).ready(function () {
   var defaultTheme = "blender";
   var theme = localStorage.getItem("theme") || defaultTheme;
@@ -21,12 +23,28 @@ function connectSocket() {
   socket.on("connected_clients", handleConnectedClients);
   socket.on("theme_data", handleThemeData);
   socket.on("connect", handleWebConnect);
+  socket.on("predefined_types", handlePredefinedTypes);
   socket.on("cost_schedules", handleCostSchedulesData);
   socket.on("cost_items", handleCostItemsData);
   socket.on("cost_values", handleCostValuesData);
   socket.on("cost_value", handleCostValueData);
 }
 
+function handlePredefinedTypes(data) {
+  CostUI.enableAddingCostSchedule(
+    data.data["predefined_types"],
+    addCostSchedule
+  );
+}
+
+function addCostSchedule(name, predefinedType) {
+  executeOperator({
+    type: "addCostSchedule",
+    name: name,
+    predefinedType: predefinedType,
+  });
+}
+
 function handleBlenderConnect(blenderId) {
   if (!connectedClients.hasOwnProperty(blenderId)) {
     connectedClients[blenderId] = { shown: false, ifc_file: "" };
@@ -35,7 +53,6 @@ function handleBlenderConnect(blenderId) {
   $("#blender-count").text(function (i, text) {
     return parseInt(text, 10) + 1;
   });
-  console.log("Blender connected", blenderId);
 }
 
 function handleBlenderDisconnect(blenderId) {
@@ -53,24 +70,24 @@ function removeTableElement(blenderId) {
   $("#cost-items-" + blenderId).remove();
 }
 
-
 const costValueCallbacks = {
-  'editCostValues': editCostValues,
+  editCostValues: editCostValues,
-  'addCostValue': addCostValue,
+  addCostValue: addCostValue,
-  'deleteCostValue': deleteCostValue,
+  deleteCostValue: deleteCostValue,
 };
 
 function handleCostValueData(data) {
-
   const costItemId = data.data["cost_value"]["cost_item_id"];
   const costValueId = data.data["cost_value"]["cost_value_id"];
-  console.log("Handling cost value data", costItemId, costValueId);
   CostUI.addNewCostValueRow(costItemId, costValueId, costValueCallbacks);
-
 }
 
 function deleteCostValue(costItemId, costValueId) {
-  executeOperator({ type: "deleteCostValue", costItemId: costItemId, costValueId: costValueId });
+  executeOperator({
+    type: "deleteCostValue",
+    costItemId: costItemId,
+    costValueId: costValueId,
+  });
 }
 
 function handleConnectedClients(data) {
@@ -86,14 +103,13 @@ function handleCostValuesData(data) {
     costValues: data.data["cost_values"]["cost_values"],
     costItemId: data.data["cost_values"]["cost_item_id"],
     callbacks: {
-      'editCostValues': editCostValues,
+      editCostValues: editCostValues,
-      'addCostValue': addCostValue,
+      addCostValue: addCostValue,
-      'deleteCostValue': deleteCostValue,
+      deleteCostValue: deleteCostValue,
     },
   });
 
   CostUI.highlightCostItem(data.data["cost_values"]["cost_item_id"]);
-
 }
 
 function addCostValue(costItemId) {
@@ -104,7 +120,7 @@ function editCostValues(costItemId, costValues) {
   executeOperator({
     type: "editCostValues",
     costItemId: costItemId,
-    costValues: costValues 
+    costValues: costValues,
   });
 }
 
@@ -159,7 +175,11 @@ function addCostItem(costItemId) {
 }
 
 function editCostItemName(costItemId, name) {
-  executeOperator({ type: "editCostItemName", costItemId: costItemId, name: name });
+  executeOperator({
+    type: "editCostItemName",
+    costItemId: costItemId,
+    name: name,
+  });
 }
 
 function selectAssignedElements(costItemId) {
@@ -167,44 +187,52 @@ function selectAssignedElements(costItemId) {
 }
 
 function handleWebConnect() {
+  executeOperator({ type: "getPredefinedTypes" });
   getCostSchedules();
 }
 
+function addSummaryCostItem(costScheduleId) {
+  executeOperator({
+    type: "addSummaryCostItem",
+    costScheduleId: costScheduleId,
+  });
+}
+
 function handleCostSchedulesData(data) {
   const blenderId = data.blenderId;
   const costSchedules = data.data["cost_schedules"]["cost_schedules"];
-  const currency = data.data["cost_schedules"]["currency"]["name"];
+  if (costSchedules.length === 0) {
-  const costScheduleDiv = $("#cost-schedules");
+    return;
+  }
+  const currency = data.data["cost_schedules"]["currency"]
+    ? data.data["cost_schedules"]["currency"]["name"]
+    : "Undefined";
+  const costScheduleDiv = document.getElementById("cost-schedules");
+  costScheduleDiv.innerHTML = "";
   costSchedules.forEach((costSchedule) => {
     costSchedule.UpdateDate = new Date(costSchedule.UpdateDate);
     const mainContainer = CostUI.text("Updated On: " + costSchedule.UpdateDate);
     const callback = () => loadCostSchedule(costSchedule.id, blenderId);
 
-
     const card = CostUI.createCard(costSchedule.Name, mainContainer, callback);
     costScheduleDiv.append(card);
   });
-
-  const firstCostSchedule = costSchedules[0];
-  if (firstCostSchedule) {
-    loadCostSchedule(firstCostSchedule.id, blenderId);
-  }
-
 }
 
 function handleCostItemsData(data) {
-  console.log("Handling cost items data", data);
   CostUI.createCostSchedule({
-    data: data.data["cost_items"],
+    data: data.data["cost_items"]["cost_items"],
+    costScheduleId: data.data["cost_items"]["cost_schedule_id"],
     blenderID: data.blenderId,
     callbacks: {
-      "addCostItem": addCostItem,
+      addCostItem: addCostItem,
-      "deleteCostItem": deleteCostItem,
+      deleteCostItem: deleteCostItem,
-      "duplicateCostItem": duplicateCostItem,
+      duplicateCostItem: duplicateCostItem,
-      "selectAssignedElements": selectAssignedElements,
+      selectAssignedElements: selectAssignedElements,
-      'editCostItemName': editCostItemName,
+      editCostItemName: editCostItemName,
-      'enableEditingCostValues': enableEditingCostValues,
+      enableEditingCostValues: enableEditingCostValues,
-    }
+      addSummaryCostItem: addSummaryCostItem,
+    },
   });
 }
 
@@ -224,7 +252,10 @@ function executeOperator(operator, blenderId) {
 }
 
 function loadCostSchedule(costScheduleId, blenderId) {
-  executeOperator({ type: "loadCostSchedule", costScheduleId: costScheduleId }, blenderId);
+  executeOperator(
+    { type: "loadCostSchedule", costScheduleId: costScheduleId },
+    blenderId
+  );
 }
 
 function getCostSchedules(blenderId) {
@@ -232,5 +263,5 @@ function getCostSchedules(blenderId) {
 }
 
 function enableEditingCostValues(costItemId) {
-  executeOperator({ type: "enableEditingCostValues", costItemId: costItemId});
+  executeOperator({ type: "enableEditingCostValues", costItemId: costItemId });
 }

src/bonsai/bonsai/bim/data/webui/static/js/utilities/costui.js

@@ -2,7 +2,7 @@ export class CostUI {
   constructor() {}
 
   static isCostScheduleLoaded(id) {
-        const existingTable = document.getElementById('cost-items-' + id);
+    const existingTable = document.getElementById("cost-items-" + id);
     return existingTable !== null;
   }
 
@@ -13,11 +13,18 @@ export class CostUI {
     CostUI.isCostScheduleLoaded(id) ? CostUI.removeCostSchedule(id) : null;
 
     const table = document.createElement("table");
-        table.id = 'cost-items-' + id;
+    table.id = "cost-items-" + id;
     const tbody = document.createElement("tbody");
     tbody.setAttribute("id", "cost-items");
 
-        const columnHeaders = ["Name", "Quantity", "Unit", "Cost", "Total Cost", "Action"];
+    const columnHeaders = [
+      "Name",
+      "Quantity",
+      "Unit",
+      "Cost",
+      "Total Cost",
+      "Action",
+    ];
     const tr = document.createElement("tr");
 
     for (let i = 0; i < columnHeaders.length; i++) {
@@ -40,7 +47,7 @@ export class CostUI {
 
     CostUI.addTableStyles(id);
     CostUI.createContextMenu(callbacks);
-        table.get_blender_id = function() {
+    table.get_blender_id = function () {
       return this.getAttribute("id").split("-")[2];
     };
 
@@ -62,8 +69,7 @@ export class CostUI {
         `;
     document.head.appendChild(style);
   }
-
+static createContextMenu(callbacks) {
-    static createContextMenu(callbacks) {
     const contextMenu = document.createElement("div");
     contextMenu.id = "context-menu";
     contextMenu.classList.add("context-menu");
@@ -71,11 +77,11 @@ export class CostUI {
                     <button id="edit-cost-values-button">Edit Cost Values</button>
                     <button id="add-cost-item-button">Add sub-cost</button>
                     <button id="duplicate-button">Duplicate</button>
-            <button id="delete-button">Delete</button>
+                    <button id="delete-cost-item">Delete</button>
             `;
     document.body.appendChild(contextMenu);
 
-        document.addEventListener("contextmenu", function(event) {
+    document.addEventListener("contextmenu", function (event) {
         event.preventDefault();
         const targetRow = event.target.closest("tr");
         const targetCell = event.target.closest("td");
@@ -92,21 +98,26 @@ export class CostUI {
         }
     });
 
-        document.addEventListener("click", function(event) {
+    document.addEventListener("click", function (event) {
         const contextMenu = document.getElementById("context-menu");
         if (!contextMenu.contains(event.target)) {
             contextMenu.style.display = "none";
         }
     });
 
-        const editCostValuesButton = document.getElementById("edit-cost-values-button");
+    const editCostValuesButton = document.getElementById(
-        editCostValuesButton.addEventListener("click", function() {
+        "edit-cost-values-button"
+    );
+    editCostValuesButton.addEventListener("click", function () {
         const targetRow = document.getElementById("context-menu").targetRow;
         const targetCell = document.getElementById("context-menu").targetCell;
         if (targetRow) {
             const costItemId = parseInt(targetRow.getAttribute("id"));
-                callbacks.enableEditingCostValues ? callbacks.enableEditingCostValues(costItemId) : null;
+            callbacks.enableEditingCostValues
+                ? callbacks.enableEditingCostValues(costItemId)
+                : null;
         }
+        document.getElementById("context-menu").style.display = "none";
     });
 
     const addButton = document.getElementById("add-cost-item-button");
@@ -124,51 +135,54 @@ export class CostUI {
         addButton.dataset.listenerAdded = "true";
     }
 
-        const deleteButton = document.getElementById("delete-button");
+    const deleteCostItem = document.getElementById("delete-cost-item");
-        if (deleteButton && !deleteButton.hasListener) {
+    if (deleteCostItem && !deleteCostItem.hasListener) {
-            deleteButton.addEventListener("click", function() {
+        deleteCostItem.addEventListener("click", function () {
             const targetRow = document.getElementById("context-menu").targetRow;
             if (targetRow) {
                 const costItemId = parseInt(targetRow.getAttribute("id"));
-                    let expandedState = JSON.parse(localStorage.getItem('expandedState')) || {};
+                let expandedState =
-                    expandedState = CostUI.deleteRow(targetRow, expandedState)
+                    JSON.parse(localStorage.getItem("expandedState")) || {};
-                    localStorage.setItem('expandedState', JSON.stringify(expandedState));
+                expandedState = CostUI.deleteRow(targetRow, expandedState);
+                localStorage.setItem("expandedState", JSON.stringify(expandedState));
                 callbacks.deleteCostItem(costItemId);
             }
+            document.getElementById("context-menu").style.display = "none";
         });
-            deleteButton.hasListener = true;
+        deleteCostItem.hasListener = true;
     }
 
     const duplicateButton = document.getElementById("duplicate-button");
     if (duplicateButton && !duplicateButton.hasListener) {
-            duplicateButton.addEventListener("click", function() {
+        duplicateButton.addEventListener("click", function () {
             const targetRow = document.getElementById("context-menu").targetRow;
             if (targetRow) {
                 const costItemId = parseInt(targetRow.getAttribute("id"));
                 callbacks.duplicateCostItem(costItemId);
             }
+            document.getElementById("context-menu").style.display = "none";
         });
         duplicateButton.hasListener = true;
     }
-    }
+}
 
   static deleteRow(targetRow, expandedState) {
     if (!targetRow) {
-            return
+      return;
     }
-        delete expandedState[targetRow.id]
+    delete expandedState[targetRow.id];
-        targetRow.remove()
+    targetRow.remove();
     const subRows = document.querySelectorAll(`[parent-id='${targetRow.id}']`);
-        subRows.forEach(subRow => {
+    subRows.forEach((subRow) => {
-            CostUI.deleteRow(subRow, expandedState)
+      CostUI.deleteRow(subRow, expandedState);
     });
-        return expandedState
+    return expandedState;
   }
 
   static addResizer(resizer) {
     let startX, startWidth, th;
 
-        resizer.addEventListener("mousedown", function(e) {
+    resizer.addEventListener("mousedown", function (e) {
       th = e.target.parentElement;
       startX = e.pageX;
       startWidth = th.offsetWidth;
@@ -200,9 +214,17 @@ export class CostUI {
     const num = parseInt(color.slice(1), 16),
       amt = Math.round(2.55 * percent),
       R = (num >> 16) + amt,
-            G = (num >> 8 & 0x00FF) + amt,
+      G = ((num >> 8) & 0x00ff) + amt,
-            B = (num & 0x0000FF) + amt;
+      B = (num & 0x0000ff) + amt;
-        return `#${(0x1000000 + (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 + (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 + (B < 255 ? B < 1 ? 0 : B : 255)).toString(16).slice(1).toUpperCase()}`;
+    return `#${(
+      0x1000000 +
+      (R < 255 ? (R < 1 ? 0 : R) : 255) * 0x10000 +
+      (G < 255 ? (G < 1 ? 0 : G) : 255) * 0x100 +
+      (B < 255 ? (B < 1 ? 0 : B) : 255)
+    )
+      .toString(16)
+      .slice(1)
+      .toUpperCase()}`;
   }
 
   static applyColorScheme(tableId, colorScheme) {
@@ -213,18 +235,81 @@ export class CostUI {
     });
   }
 
+  static enableAddingCostSchedule(types, addCostSchedule) {
+    const addNewSchedule = document.getElementById("add-cost-schedule");
+
+    addNewSchedule.addEventListener("click", function () {
+      const name = "Add New Cost Schedule";
+
+      const form = CostUI.Form({
+        id: "add-cost-schedule-form",
+        name: name,
+        className: "floating-form",
+      });
+
+      const nameLabel = document.createElement("label");
+      nameLabel.textContent = "Name:";
+      form.appendChild(nameLabel);
+      form.classList.add("column-container");
+
+      const nameInput = document.createElement("input");
+      nameInput.type = "text";
+      nameInput.name = "name";
+      form.appendChild(nameInput);
+
+      const typeLabel = document.createElement("label");
+      typeLabel.textContent = "Type:";
+      form.appendChild(typeLabel);
+
+      const typeSelect = document.createElement("select");
+      typeSelect.name = "Predefined Type";
+
+      console.log(types);
+      types.forEach((type) => {
+        const option = document.createElement("option");
+        option.value = type.name;
+        option.textContent = type.name;
+        option.title = type.description;
+        typeSelect.appendChild(option);
+      });
+      form.appendChild(typeSelect);
+
+      const submitButton = document.createElement("button");
+      submitButton.type = "submit";
+      submitButton.textContent = "Add";
+      submitButton.classList.add("action-button");
+      form.appendChild(submitButton);
+
+      document.body.appendChild(form);
+
+      form.addEventListener("submit", function (event) {
+        event.preventDefault();
+        const formData = new FormData(form);
+        const data = {};
+        formData.forEach((value, key) => {
+          data[key] = value;
+        });
+        console.log("Data:", data);
+        addCostSchedule(data.name, data["Predefined Type"]);
+        form.remove();
+      });
+    });
+  }
 
   static createColorPicker() {
+    const div = document.createElement("div");
+    div.classList.add("card");
     const colorPicker = document.createElement("input");
     colorPicker.type = "color";
     colorPicker.id = "color-picker";
     colorPicker.value = "#ff0000";
     const colorText = document.createElement("p");
     colorText.textContent = "Select a color to change row color:";
-        document.getElementById("UI").appendChild(colorText);
+    div.appendChild(colorText);
-        document.getElementById("UI").appendChild(colorPicker);
+    div.appendChild(colorPicker);
+    document.getElementById("UI").appendChild(div);
 
-        colorPicker.addEventListener("input", function() {
+    colorPicker.addEventListener("input", function () {
       const baseColor = colorPicker.value;
       const colorScheme = CostUI.generateColorScheme(baseColor);
       CostUI.applyColorScheme("cost-items", colorScheme);
@@ -233,33 +318,81 @@ export class CostUI {
     CostUI.applyColorScheme("cost-items", colorScheme);
   }
 
-    static createCostSchedule({ data, blenderID, title, callbacks = {} }) {
+  static createCostSchedule({
+    data,
+    costScheduleId,
+    blenderID,
+    callbacks = {},
+  }) {
     const [table, tbody] = CostUI.createTable(blenderID, callbacks);
+    if (data.length === 0) {
+      const tr = document.createElement("tr");
+      const td = document.createElement("td");
+      td.colSpan = 6;
+      td.textContent = "No cost items found";
+      tr.appendChild(td);
+      tbody.appendChild(tr);
+
+      const addSummaryCostItemButton = document.createElement("button");
+      addSummaryCostItemButton.textContent = "Add Summary Cost Item";
+      addSummaryCostItemButton.addEventListener("click", function () {
+        callbacks.addSummaryCostItem
+          ? callbacks.addSummaryCostItem(costScheduleId)
+          : null;
+      });
+      td.appendChild(addSummaryCostItemButton);
+      addSummaryCostItemButton.classList.add("action-button");
+    } else {
       CostUI.createCostItem(data, tbody, 0, null, callbacks);
       CostUI.applyExpandedState();
     }
+  }
 
-    static createCostItem(data, container, nestingLevel = 0, parentID = null, callbacks = {}) {
+  static createCostItem(
-        data.forEach(costItem => {
+    data,
+    container,
+    nestingLevel = 0,
+    parentID = null,
+    callbacks = {}
+  ) {
+    data.forEach((costItem) => {
       const row = CostUI.createRow(costItem, nestingLevel, parentID, callbacks);
       container.appendChild(row);
 
       if (costItem.is_nested_by && costItem.is_nested_by.length > 0) {
-                CostUI.createCostItem(costItem.is_nested_by, container, nestingLevel + 1, costItem.id, callbacks);
+        CostUI.createCostItem(
+          costItem.is_nested_by,
+          container,
+          nestingLevel + 1,
+          costItem.id,
+          callbacks
+        );
       }
     });
   }
 
   static createRow(costItem, nestingLevel, parentID, callbacks = {}) {
-        const totalQuantity = costItem.TotalCostQuantity ? parseFloat(costItem.TotalCostQuantity).toFixed(2) : '-';
+    const totalQuantity = costItem.TotalCostQuantity
+      ? parseFloat(costItem.TotalCostQuantity).toFixed(2)
+      : "-";
     const row = CostUI.createTableRow(costItem, nestingLevel, parentID);
     const expandButton = CostUI.createExpandButton(costItem);
-        const nameCell = CostUI.createNameCell(costItem, nestingLevel, expandButton, callbacks);
+    const nameCell = CostUI.createNameCell(
+      costItem,
+      nestingLevel,
+      expandButton,
+      callbacks
+    );
     const totalCostQuantityCell = CostUI.createTableCell(totalQuantity);
     const unitSymbolCell = CostUI.createTableCell(costItem.UnitSymbol);
-        const totalAppliedValueCell = CostUI.createTableCell(costItem.TotalAppliedValue);
+    const totalAppliedValueCell = CostUI.createTableCell(
+      costItem.TotalAppliedValue
+    );
     const totalCostCell = CostUI.createTotalCostCell(costItem);
-        const flexContainerCell = CostUI.createFlexContainerCell(costItem, callbacks);
+    const flexContainerCell = CostUI.createFlexContainerCell(
+      costItem,
+      callbacks
+    );
 
     row.appendChild(nameCell);
     row.appendChild(totalCostQuantityCell);
@@ -268,11 +401,11 @@ export class CostUI {
     row.appendChild(totalCostCell);
     row.appendChild(flexContainerCell);
 
-        row.get_id = function() {
+    row.get_id = function () {
       return this.getAttribute("id");
     };
 
-        row.get_parent = function() {
+    row.get_parent = function () {
       const parentId = this.getAttribute("parent-id");
       return parentId ? document.getElementById(parentId) : null;
     };
@@ -297,58 +430,53 @@ export class CostUI {
     expandButton.classList.add("fa-angle-right");
 
     if (row.is_nested_by && row.is_nested_by.length > 0) {
-            expandButton.classList.add('fa-angle-right');
+      expandButton.classList.add("fa-angle-right");
     } else {
       expandButton.style.visibility = "hidden";
     }
 
-        expandButton.addEventListener("click", function(event) {
+    expandButton.addEventListener("click", function (event) {
       event.stopPropagation();
       let isExpanded = CostUI.isRowExpanded(row.id);
       console.log("Row is expanded", isExpanded);
       if (event.shiftKey) {
         if (isExpanded) {
-                    CostUI.contractRow(row.id);
+          CostUI.contractRow(row.id, true);
           CostUI.updateExpandedState(row.id, false, true);
         } else {
-                    CostUI.expandRow(row.id);
+          CostUI.expandRow(row.id, true);
           CostUI.updateExpandedState(row.id, true, true);
         }
       } else {
         if (isExpanded) {
-                    CostUI.contractRow(row.id);
+          CostUI.contractRow(row.id, true);
           CostUI.updateExpandedState(row.id, false);
-                }
+        } else {
-                else {
           CostUI.expandRow(row.id);
           CostUI.updateExpandedState(row.id, true);
         }
       }
-            CostUI.applyExpandedState();
     });
 
     return expandButton;
   }
 
-
   static hideRow(id) {
     const row = document.getElementById(id);
     if (row) {
       row.classList.add("nested");
     }
-        
   }
 
-    static contractRow(parentId, recursive=false) {
+  static contractRow(parentId, recursive = false) {
-        CostUI.updateToggleButton(parentId, 'contract');
+    CostUI.updateToggleButton(parentId, "contract");
     const rows = document.querySelectorAll(`[parent-id='${parentId}']`);
-        rows.forEach(row => {
+    rows.forEach((row) => {
-            const childId = row.getAttribute('id');
+      const childId = row.getAttribute("id");
       CostUI.hideRow(childId);
       if (recursive || (childId && CostUI.isRowExpanded(childId))) {
-                CostUI.contractRow(childId, recursive)
+        CostUI.contractRow(childId, recursive);
       }
-            // CostUI.contractRow(childId);
     });
   }
 
@@ -359,27 +487,26 @@ export class CostUI {
     }
   }
 
-    static updateToggleButton(id, type='contract') {
+  static updateToggleButton(id, type = "contract") {
     const toggleButton = document.querySelector(`[id='${id}'] .action-button`);
     if (!toggleButton) {
       return;
     }
-        if (type === 'expand') {
+    if (type === "expand") {
       toggleButton.classList.remove("fa-angle-right");
       toggleButton.classList.add("fa-angle-up");
-        }
+    } else {
-        else {
       toggleButton.classList.remove("fa-angle-up");
       toggleButton.classList.add("fa-angle-right");
     }
   }
 
-    static expandRow(parentId, recursive=false) {
+  static expandRow(parentId, recursive = false) {
     CostUI.updateExpandedState(parentId, true);
-        CostUI.updateToggleButton(parentId, 'expand');
+    CostUI.updateToggleButton(parentId, "expand");
     const rows = document.querySelectorAll(`[parent-id='${parentId}']`);
-        rows.forEach(row => {
+    rows.forEach((row) => {
-            const childId = row.getAttribute('id');
+      const childId = row.getAttribute("id");
       CostUI.showRow(childId);
       if (recursive || (childId && CostUI.isRowExpanded(childId))) {
         CostUI.expandRow(childId, recursive);
@@ -387,27 +514,28 @@ export class CostUI {
     });
   }
 
-    static updateExpandedState(id, isExpanded, recursive=false) {
+  static updateExpandedState(id, isExpanded, recursive = false) {
-        const expandedState = JSON.parse(localStorage.getItem('expandedState')) || {};
+    const expandedState =
+      JSON.parse(localStorage.getItem("expandedState")) || {};
     expandedState[id] = isExpanded;
-        localStorage.setItem('expandedState', JSON.stringify(expandedState));
+    localStorage.setItem("expandedState", JSON.stringify(expandedState));
     if (recursive) {
       const rows = document.querySelectorAll(`[parent-id='${id}']`);
-            rows.forEach(row => {
+      rows.forEach((row) => {
         CostUI.updateExpandedState(row.id, isExpanded, recursive);
       });
     }
   }
 
   static applyExpandedState() {
-        const expandedState = JSON.parse(localStorage.getItem('expandedState')) || CostUI.getAllCostItemsIds().reduce((acc, id) => {
+    const expandedState =
+      JSON.parse(localStorage.getItem("expandedState")) ||
+      CostUI.getAllCostItemsIds().reduce((acc, id) => {
         acc[id] = true;
         return acc;
       }, {});
 
-        console.log("Expanded state", expandedState);
+    Object.keys(expandedState).forEach((id) => {
-
-        Object.keys(expandedState).forEach(id => {
       if (expandedState[id]) {
         CostUI.expandRow(id);
       } else {
@@ -417,7 +545,8 @@ export class CostUI {
   }
 
   static isRowExpanded(id) {
-        const expandedState = JSON.parse(localStorage.getItem('expandedState')) || {};
+    const expandedState =
+      JSON.parse(localStorage.getItem("expandedState")) || {};
     return expandedState[id] || false;
   }
 
@@ -426,13 +555,17 @@ export class CostUI {
     const nameInput = document.createElement("input");
     nameInput.value = costItem.name ? costItem.name : "Unnamed";
 
-        nameInput.addEventListener("change", function() {
+    nameInput.addEventListener("change", function () {
-            callbacks.editCostItemName ? callbacks.editCostItemName(costItem.id, this.value) : null;
+      callbacks.editCostItemName
+        ? callbacks.editCostItemName(costItem.id, this.value)
+        : null;
     });
 
-        nameInput.addEventListener("keydown", function(event) {
+    nameInput.addEventListener("keydown", function (event) {
       if (event.key === "Enter") {
-                callbacks.editCostItemName ? callbacks.editCostItemName(costItem.id, this.value) : null;
+        callbacks.editCostItemName
+          ? callbacks.editCostItemName(costItem.id, this.value)
+          : null;
       }
     });
 
@@ -453,18 +586,16 @@ export class CostUI {
   static createTotalCostCell(costItem) {
     const totalCostCell = document.createElement("td");
     const totalCost = parseFloat(costItem.TotalCost).toFixed(2);
-        totalCostCell.textContent = costItem.is_sum ? totalCost + " (Σ)" : totalCost;
+    totalCostCell.textContent = costItem.is_sum
+      ? totalCost + " (Σ)"
+      : totalCost;
     return totalCostCell;
   }
 
   static createFlexContainerCell(costItem, callbacks) {
     const divFlex = document.createElement("div");
-        divFlex.classList.add("flex-container");
+    divFlex.classList.add("row-container");
-    
-        const addButton = CostUI.createAddButton(costItem, callbacks);
     const selectButton = CostUI.createSelectButton(costItem, callbacks);
-    
-        divFlex.appendChild(addButton);
     divFlex.appendChild(selectButton);
 
     const flexContainerCell = document.createElement("td");
@@ -472,24 +603,15 @@ export class CostUI {
     return flexContainerCell;
   }
 
-    static createAddButton(costItem, callbacks) {
-        const addButton = document.createElement("button");
-        addButton.textContent = "+";
-        addButton.classList.add("add-button");
-        addButton.addEventListener("click", function(e) {
-            e.stopPropagation();
-            callbacks.addCostItem ? callbacks.addCostItem(costItem.id) : null;
-        });
-        return addButton;
-    }
-    
   static createSelectButton(costItem, callbacks) {
     const selectButton = document.createElement("button");
     selectButton.classList.add("action-button");
     selectButton.textContent = "Select";
-        selectButton.addEventListener("click", function(e) {
+    selectButton.addEventListener("click", function (e) {
       e.stopPropagation();
-            callbacks.selectAssignedElements ? callbacks.selectAssignedElements(costItem.id) : null;
+      callbacks.selectAssignedElements
+        ? callbacks.selectAssignedElements(costItem.id)
+        : null;
     });
     return selectButton;
   }
@@ -511,14 +633,12 @@ export class CostUI {
   static getAllCostItemsIds() {
     const rows = document.querySelectorAll("#cost-items tr");
     const ids = [];
-        rows.forEach(row => {
+    rows.forEach((row) => {
       ids.push(row.id);
     });
     return ids;
   }
 
-
-
   static text(label) {
     const text = document.createElement("p");
     text.textContent = label;
@@ -563,15 +683,23 @@ export class CostUI {
     if (existingForm) {
       existingForm.remove();
     }
-    
-        const form = CostUI.createFormElement(formId, "cost-values-form");
     const costItemName = CostUI.getCostItemName(costItemId);
-        const header = CostUI.createHeader("Cost Values Form for " + costItemName);
-        form.appendChild(header);
 
-        const table = CostUI.createCostValuesTable(costItemId, ["Type", "Category", "Value", ""]);
+    let formName = "Cost Values: " + costItemName;
+    const form = CostUI.Form({
+      id: formId,
+      name: formName,
+      className: "floating-form",
+    });
 
-        costValues.forEach(costValue => {
+    const table = CostUI.createCostValuesTable(costItemId, [
+      "Type",
+      "Category",
+      "Value",
+      "",
+    ]);
+
+    costValues.forEach((costValue) => {
       const tr = CostUI.createCostvaluesRow(costItemId, costValue, callbacks);
       table.appendChild(tr);
     });
@@ -581,17 +709,11 @@ export class CostUI {
     const addButton = CostUI.createAddCostValueButton(costItemId, callbacks);
     form.appendChild(addButton);
 
-        const closeButton = CostUI.createCloseButton(form);
-        form.appendChild(closeButton);
-        
-        CostUI.makeHeaderDraggable(header, form);
-        
     document.body.appendChild(form);
 
     return form;
   }
 
-
   static getCostValuesTable(costItemId) {
     return document.getElementById("cost-values-table-" + costItemId);
   }
@@ -602,9 +724,17 @@ export class CostUI {
       console.log("Cost values table not found for cost item ID:", costItemId);
       return;
     }
-        console.log("Adding new cost value row", costValueId);
+    const tr = CostUI.createCostvaluesRow(
-        console.log(table)
+      costItemId,
-        const tr = CostUI.createCostvaluesRow(costItemId, {"category": "", "name": "", "applied_value": 0, "id": costValueId, "parent": costItemId}, costValueCallbacks);
+      {
+        category: "",
+        name: "",
+        applied_value: 0,
+        id: costValueId,
+        parent: costItemId,
+      },
+      costValueCallbacks
+    );
     table.appendChild(tr);
   }
 
@@ -614,7 +744,7 @@ export class CostUI {
     table.id = "cost-values-table-" + costItemId;
 
     const headerRow = document.createElement("tr");
-        headers.forEach(headerText => {
+    headers.forEach((headerText) => {
       const th = document.createElement("th");
       th.textContent = headerText;
       headerRow.appendChild(th);
@@ -624,9 +754,9 @@ export class CostUI {
     return table;
   }
 
-    static createCostvaluesRow(costItemId,costValue, costValueCallbacks) {
+  static createCostvaluesRow(costItemId, costValue, costValueCallbacks) {
     function cleanLabel(value) {
-            return value.replace(/[^0-9.]/g, '');
+      return value.replace(/[^0-9.]/g, "");
     }
 
     if (document.getElementById(costValue.id)) {
@@ -640,23 +770,23 @@ export class CostUI {
     let costType = "FIXED";
     if (costValue.category === "*") {
       costType = "SUM";
-        }
+    } else if (costValue.category && costValue.category !== "*") {
-        else if (costValue.category && costValue.category !== "*") {
       costType = "CATEGORY";
-        }
+    } else if (costValue.applied_value) {
-        else if (costValue.applied_value) {
       costType = "FIXED";
     }
 
     const typeCell = CostUI.createTableDropdown("type", costType);
     const dropdown = typeCell.querySelector("select");
-        dropdown.addEventListener("change", function() {
+    dropdown.addEventListener("change", function () {
       const selectedType = this.value;
       CostUI.updateRowBasedOnType(selectedType, categoryCell, valueCell1);
 
       if (selectedType === "SUM") {
         const costValueId = parseInt(this.closest("tr").getAttribute("id"));
-                const appliedValue = parseFloat(valueCell1.querySelector("input").value);
+        const appliedValue = parseFloat(
+          valueCell1.querySelector("input").value
+        );
         const costCategory = categoryCell.querySelector("input").value;
 
         if (costValueCallbacks.editCostValues) {
@@ -666,24 +796,27 @@ export class CostUI {
               costCategory: costCategory,
               appliedValue: appliedValue,
               id: costValueId,
-                            costItemId: costItemId
+              costItemId: costItemId,
-                        }
+            },
           ]);
         }
       }
     });
     tr.appendChild(typeCell);
 
-        const categoryCell = CostUI.createTableInput("text", "category", costValue.category);
+    const categoryCell = CostUI.createTableInput(
+      "text",
+      "category",
+      costValue.category
+    );
     tr.appendChild(categoryCell);
 
-        let value 
+    let value;
 
-        if (costValue.category === "*"){
+    if (costValue.category === "*") {
-            value = cleanLabel(costValue.label)
+      value = cleanLabel(costValue.label);
-        }
+    } else {
-        else {
+      value = costValue.applied_value;
-            value = costValue.applied_value
     }
     const valueCell1 = CostUI.createTableInput("number", "value", value);
     tr.appendChild(valueCell1);
@@ -695,16 +828,19 @@ export class CostUI {
         costCategory: categoryCell.querySelector("input").value,
         appliedValue: parseFloat(this.value),
         id: costValue.id,
-                costItemId: costItemId
+        costItemId: costItemId,
-            }
+      };
       if (costValueCallbacks.editCostValues) {
         costValueCallbacks.editCostValues(costItemId, [costValueData]);
       }
     }
 
-        inputValue.addEventListener("change", handleCostValueChange.bind(inputValue, costItemId));
+    inputValue.addEventListener(
+      "change",
+      handleCostValueChange.bind(inputValue, costItemId)
+    );
 
-        inputValue.addEventListener("keydown", function(event) {
+    inputValue.addEventListener("keydown", function (event) {
       if (event.key === "Enter") {
         event.preventDefault();
         handleCostValueChange.call(this, costItemId);
@@ -712,14 +848,14 @@ export class CostUI {
     });
     const deleteCell = document.createElement("td");
     tr.appendChild(deleteCell);
-        const deleteButton = document.createElement("button");
+    const deleteCostValue = document.createElement("button");
-        deleteButton.classList.add("action-button");
+    deleteCostValue.classList.add("action-button");
-        deleteButton.textContent = "Delete";
+    deleteCostValue.textContent = "Delete";
-        deleteButton.addEventListener("click", function() {
+    deleteCostValue.addEventListener("click", function () {
       costValueCallbacks.deleteCostValue(costItemId, costValue.id);
       tr.remove();
     });
-        deleteCell.appendChild(deleteButton);
+    deleteCell.appendChild(deleteCostValue);
     CostUI.updateRowBasedOnType(costType, categoryCell, valueCell1);
     return tr;
   }
@@ -743,13 +879,13 @@ export class CostUI {
     }
   }
 
-    static createTableDropdown(name, value="FIXED") {
+  static createTableDropdown(name, value = "FIXED") {
     const cell = document.createElement("td");
     const dropdown = document.createElement("select");
     dropdown.name = name;
 
     const options = ["FIXED", "CATEGORY", "SUM"];
-        options.forEach(optionValue => {
+    options.forEach((optionValue) => {
       const option = document.createElement("option");
       option.value = optionValue;
       option.textContent = optionValue;
@@ -777,14 +913,14 @@ export class CostUI {
     const addButton = document.createElement("button");
     addButton.classList.add("action-button");
     addButton.textContent = " + Add Cost Value";
-        addButton.addEventListener("click", function(e) {
+    addButton.addEventListener("click", function (e) {
       e.preventDefault();
       callbacks.addCostValue ? callbacks.addCostValue(costItemId) : null;
     });
     return addButton;
   }
 
-    static createFormElement(id, className) {
+  static Form({ id, name, className }) {
     const form = document.createElement("form");
     form.id = id;
     form.classList.add(className);
@@ -792,8 +928,70 @@ export class CostUI {
     form.style.top = "50%";
     form.style.left = "50%";
     form.style.transform = "translate(-50%, -50%)";
+    const header = CostUI.createHeader(name);
+    const closeButton = CostUI.createCloseButton(form);
+    form.appendChild(header);
+    form.appendChild(closeButton);
+    CostUI.makeFormDraggable(form);
     return form;
   }
+  static makeFormDraggable(form) {
+    let pos1 = 0,
+      pos2 = 0,
+      pos3 = 0,
+      pos4 = 0;
+    form.onmousedown = function (e) {
+      if (!e.target.closest("input, select, button")) {
+        dragMouseDown(e);
+      }
+    };
+
+    const formElements = form.querySelectorAll("input, select, button");
+    formElements.forEach((element) => {
+      element.onmousedown = function (e) {
+        e.stopImmediatePropagation();
+      };
+    });
+
+    function dragMouseDown(e) {
+      e = e || window.event;
+      e.preventDefault();
+      pos3 = e.clientX;
+      pos4 = e.clientY;
+      document.onmouseup = closeDragElement;
+      document.onmousemove = elementDrag;
+    }
+
+    function elementDrag(e) {
+      e = e || window.event;
+      e.preventDefault();
+      pos1 = pos3 - e.clientX;
+      pos2 = pos4 - e.clientY;
+      pos3 = e.clientX;
+      pos4 = e.clientY;
+
+      let newTop = form.offsetTop - pos2;
+      let newLeft = form.offsetLeft - pos1;
+
+      const minTop = form.offsetHeight / 2;
+      const minLeft = form.offsetWidth / 2;
+      const maxTop = window.innerHeight - form.offsetHeight / 2;
+      const maxLeft = window.innerWidth - form.offsetWidth / 2;
+
+      if (newTop < minTop) newTop = minTop;
+      if (newTop > maxTop) newTop = maxTop;
+      if (newLeft < minLeft) newLeft = minLeft;
+      if (newLeft > maxLeft) newLeft = maxLeft;
+
+      form.style.top = newTop + "px";
+      form.style.left = newLeft + "px";
+    }
+
+    function closeDragElement() {
+      document.onmouseup = null;
+      document.onmousemove = null;
+    }
+  }
 
   static createHeader(text) {
     const header = document.createElement("div");
@@ -806,7 +1004,7 @@ export class CostUI {
     const closeButton = document.createElement("span");
     closeButton.classList.add("close-button");
     closeButton.innerHTML = "&times;";
-        closeButton.addEventListener("click", function() {
+    closeButton.addEventListener("click", function () {
       form.remove();
       const costItemId = form.id.split("-")[3];
       CostUI.unhighlightCostItem(costItemId);
@@ -814,24 +1012,4 @@ export class CostUI {
 
     return closeButton;
   }
-    
-    static makeHeaderDraggable(header, form) {
-        header.addEventListener("mousedown", function(e) {
-            let offsetX = e.clientX - form.getBoundingClientRect().left;
-            let offsetY = e.clientY - form.getBoundingClientRect().top;
-    
-            function mouseMoveHandler(e) {
-                form.style.left = `${e.clientX - offsetX}px`;
-                form.style.top = `${e.clientY - offsetY}px`;
-            }
-    
-            function mouseUpHandler() {
-                document.removeEventListener("mousemove", mouseMoveHandler);
-                document.removeEventListener("mouseup", mouseUpHandler);
-            }
-    
-            document.addEventListener("mousemove", mouseMoveHandler);
-            document.addEventListener("mouseup", mouseUpHandler);
-        });
-    }
 }

src/bonsai/bonsai/bim/data/webui/templates/costing.html

@@ -84,8 +84,14 @@
       </button>
       <div id="client-list"></div>
     </div>
-    <div id="cost-schedules"></div>
+    <h1>Costing</h1>
-    <div id="UI"></div>
+    <div id="" > 
+      <li id="add-cost-schedule" class="action-button fas fa-plus"> </li>
+      Add New Schedule
+    </div>
+    
+    <div id="cost-schedules" class="row-container"></div>
+    <div id="UI" class="row-container"></div>
     <div id="cost-items"></div>
 
     <footer>

src/bonsai/bonsai/bim/data/webui/templates/gantt.html

@@ -81,8 +81,8 @@
       </button>
       <div id="client-list" class="no-print"></div>
     </div>
-    <div id="work_schedules"></div>
+    <div id="work_schedules" class="row-container"></div>
-    <div id="container"></div>
+    <div id="container" ></div>
     <footer>
       <p>Bonsai Version: {{version}}</p>
     </footer>

src/bonsai/bonsai/bim/module/cost/data.py

@@ -279,19 +279,9 @@ class CostSchedulesData:
 
     @classmethod
     def get_cost_schedule_types(cls):
-        results = []
+        types = ifcopenshell.util.cost.get_cost_schedule_types(tool.Ifc.get())
-        declaration = tool.Ifc().schema().declaration_by_name("IfcCostSchedule")
+        return [(t['name'], t['name'], t['description']) for t in types]
-        version = tool.Ifc.get_schema()
+
-        for attribute in declaration.attributes():
-            if attribute.name() == "PredefinedType":
-                results.extend(
-                    [
-                        (e, e, get_predefined_type_doc(version, "IfcCostSchedule", e))
-                        for e in attribute.type_of_attribute().declared_type().enumeration_items()
-                    ]
-                )
-                break
-        return results
 
 
 class CostItemRatesData:

src/bonsai/bonsai/tool/web.py

@@ -16,6 +16,7 @@
 # You should have received a copy of the GNU General Public License
 # along with Bonsai.  If not, see <http://www.gnu.org/licenses/>.
 
+import ifcopenshell.util.cost
 import bpy
 from bonsai.bim.module.web.data import WebData
 import bonsai.core.tool
@@ -341,9 +342,26 @@ class Web(bonsai.core.tool.Web):
         Args:
             operator_data (dict): A dictionary containing the operator data.
         """
-        print("Handling cost operator")
         ifc_file = tool.Ifc.get()
+        if operator_data["type"] == "getPredefinedTypes":
+            print('getting predefined types')
+            predefined_types = ifcopenshell.util.cost.get_cost_schedule_types(ifc_file)
+            cls.send_webui_data(data=predefined_types, data_key="predefined_types", event="predefined_types")
+        if operator_data["type"] == "addCostSchedule":
+            bonsai.core.cost.add_cost_schedule(
+                tool.Ifc, 
+                name=operator_data["name"],
+                predefined_type=operator_data["type"]
+                )
+            cost_schedules = ifc_file.by_type("IfcCostSchedule")
+            cost_schedules_json = [cs.get_info(recursive=True) for cs in cost_schedules]
+            currency = tool.Cost.currency()
+            cls.send_webui_data(data={
+                "cost_schedules": cost_schedules_json,
+                "currency": currency
+            }, data_key="cost_schedules", event="cost_schedules")
         if operator_data["type"] == "getCostSchedules":
+            print('getting cost schedules')
             cost_schedules = ifc_file.by_type("IfcCostSchedule")
             cost_schedules_json = [cs.get_info(recursive=True) for cs in cost_schedules]
             currency = tool.Cost.currency()
@@ -353,13 +371,23 @@ class Web(bonsai.core.tool.Web):
                 event="cost_schedules",
             )
         if operator_data["type"] == "loadCostSchedule":
+            print('loading cost schedule')
             cost_schedule = ifc_file.by_id(operator_data["costScheduleId"])
             bonsai.core.cost.enable_editing_cost_items(tool.Cost, cost_schedule=cost_schedule)
             cls.load_cost_schedule_web_ui(cost_schedule)
         if operator_data["type"] == "selectAssignedElements":
+            print('selecting assigned elements')
             cost_item = tool.Ifc.get().by_id(operator_data["costItemId"])
             products = tool.Cost.get_cost_item_products(cost_item, is_deep=True)
             tool.Spatial.select_products(products, unhide=True)
+        if operator_data["type"] == "addSummaryCostItem":
+            cost_schedule=ifc_file.by_id(operator_data["costScheduleId"])
+            bonsai.core.cost.add_summary_cost_item(
+                tool.Ifc,
+                tool.Cost,
+                cost_schedule=cost_schedule
+            )
+            cls.load_cost_schedule_web_ui(cost_schedule)
         if operator_data["type"] == "addCostItem":
             bpy.ops.bim.add_cost_item(cost_item=operator_data["costItemId"])
             cost_schedule = tool.Cost.get_cost_schedule(cost_item=tool.Ifc.get().by_id(operator_data["costItemId"]))
@@ -424,7 +452,10 @@ class Web(bonsai.core.tool.Web):
     @classmethod
     def load_cost_schedule_web_ui(cls, cost_schedule):
         json_data = tool.Cost.create_cost_schedule_json(cost_schedule)
-        cls.send_webui_data(data=json_data, data_key="cost_items", event="cost_items")
+        cls.send_webui_data(data={
+            "cost_items": json_data,
+            "cost_schedule_id": cost_schedule.id()
+        }, data_key="cost_items", event="cost_items")
 
     @classmethod
     def handle_gantt_operator(cls, operator_data: dict) -> None:

src/ifcopenshell-python/ifcopenshell/util/cost.py

@@ -19,7 +19,8 @@
 import lark
 import ifcopenshell
 from typing import Optional, Union, Literal, Generator, Any
-
+import ifcopenshell.ifcopenshell_wrapper as ifcopenshell_wrapper
+from ifcopenshell.util.doc import get_predefined_type_doc
 
 arithmetic_operator_symbols = {"ADD": "+", "DIVIDE": "/", "MULTIPLY": "*", "SUBTRACT": "-"}
 symbol_arithmetic_operators = {"+": "ADD", "/": "DIVIDE", "*": "MULTIPLY", "-": "SUBTRACT"}
@@ -265,6 +266,20 @@ def get_cost_values(cost_item: ifcopenshell.entity_instance) -> list[dict[str, s
     print(results)
     return results
 
+def get_cost_schedule_types(file):
+    schema: ifcopenshell_wrapper.schema_definition = ifcopenshell_wrapper.schema_by_name(file.schema)
+    results = []
+    declaration = schema.declaration_by_name("IfcCostSchedule")
+    version = file.schema_identifier
+    for attribute in declaration.attributes():
+        if attribute.name() == "PredefinedType":
+            for enumeration in attribute.type_of_attribute().declared_type().enumeration_items():
+                results.append({
+                    "name": enumeration,
+                    'description': get_predefined_type_doc(version, "IfcCostSchedule",enumeration),
+                })
+            break
+    return results
 
 class CostValueUnserialiser:
     def parse(self, formula: str):