AI theme builder

import '@dhx/trial-gantt/codebase/dhtmlxgantt.css';

import { Gantt } from '@dhx/trial-gantt';
import { io } from 'socket.io-client';
import { initChat } from './chat-widget.js';
import initZoom from './gantt-utils/zoom.js';
import fitTaskText from './gantt-utils/fit-text.js';
import createCommandRunner from './command-runner.js';
import { demoData } from './demo-data.js';

const gantt = Gantt.getGanttInstance();
gantt.config.columns = [
  { name: 'wbs', label: 'WBS', width: 60, resize: true, template: gantt.getWBSCode },
  { name: 'text', label: 'Task name', tree: true, width: 250, resize: true },
  { name: 'start_date', align: 'center', width: 100, resize: true },
  { name: 'duration', align: 'center', width: 80, resize: true },
  { name: 'add', width: 40 },
];
gantt.plugins({
  auto_scheduling: true,
  undo: true,
  export_api: true,
  marker: true,
  tooltip: true,
});

gantt.config.auto_scheduling = true;
gantt.config.open_tree_initially = true;
gantt.config.auto_types = true;
gantt.config.scale_height = 60;
gantt.config.link_radius = 4;
initZoom(gantt);
fitTaskText(gantt);

// if llm can't decide in which format it returns dates
function parseSmartDate(str) {
  if (typeof str !== 'string') return null;
  const p = str.trim().replace(/\//g, '-').split('-');
  if (p.length !== 3) return null;

  // decide order by first chunk length
  const [y, m, d] = p[0].length === 4 ? p : [p[2], p[1], p[0]];
  const dt = new Date(+y, +m - 1, +d);
  return isNaN(dt) ? null : dt;
}
gantt.templates.parse_date = parseSmartDate;

gantt.init('gantt_here');
gantt.parse(demoData);

const configList = ['link_line_width', 'link_radius', 'row_height', 'bar_height', 'show_progress'];
const defaultConfigValues = configList.map((cfgName) => ({ name: cfgName, value: gantt.config[cfgName] }));
let currentThemeVariables = [];
let currentConfigs = [...defaultConfigValues];

const runCommand = createCommandRunner(
  gantt,
  {
    onThemeSet: (variables, cmd) => {
      if (cmd === 'set_theme') {
        currentThemeVariables = mergeVariables(currentThemeVariables, variables);
      } else if (cmd === 'reset_theme') {
        currentThemeVariables = [];
        return currentThemeVariables;
      }
    },
    onConfigSet: (configs, cmd) => {
      if (cmd === 'set_theme') {
        currentConfigs = mergeConfigs(currentConfigs, configs);
        return currentConfigs;
      } else if (cmd === 'reset_theme') {
        currentConfigs = defaultConfigValues;
        return currentConfigs;
      }
    },
  },
  defaultConfigValues
);

function mergeVariables(oldVars, newVars) {
  const map = new Map();
  oldVars.forEach((v) => map.set(v.key, v.value));
  (newVars || []).forEach((v) => map.set(v.key, v.value));
  return Array.from(map.entries()).map(([key, value]) => ({ key, value }));
}
function mergeConfigs(oldConfigs, newConfigs) {
  const map = new Map();
  oldConfigs.forEach((config) => map.set(config.name, config.value));
  (newConfigs || []).forEach((config) => map.set(config.name, config.value));
  return Array.from(map.entries()).map(([name, value]) => ({ name, value }));
}

const SOCKET_URL = import.meta.env.VITE_SOCKET_URL || `${window.location.origin}`;
const socket = io(SOCKET_URL);

initChat({
  socket,
  runCommand,
  getTheme: () => currentThemeVariables,
  getConfigs: () => currentConfigs,
});

import { marked } from 'marked';
import DOMPurify from 'https://cdn.jsdelivr.net/npm/dompurify/dist/purify.es.js';
import MicroModal from 'micromodal';
import { ThemeManager } from './theme-manager';

export const initChat = ({ socket, runCommand, getTheme, getConfigs }) => {
  function applyThemeOnFly(theme) {
    let styleEl = document.getElementById('dynamic-theme');
    if (!styleEl) {
      styleEl = document.createElement('style');
      styleEl.id = 'dynamic-theme';
      document.head.appendChild(styleEl);
    }

    styleEl.innerHTML = theme;
  }

  function parseFromCSSToObj(cssThemeStr) {
    const lines = cssThemeStr.split(/;|\n/);
    const vars = [];

    for (let line of lines) {
      line = line.trim();
      if (!line) continue;

      const match = line.match(/^--([\w-]+)\s*:\s*(.+)$/);
      if (match) {
        const key = `--${match[1]}`;
        const value = match[2].trim();
        vars.push({ key, value });
      }
    }

    return vars;
  }

  function parseConfigStringToArray(configStr) {
    const lines = configStr.split('\n');
    const configRegex = /^gantt\.config\.(\w+)\s*=\s*(.+);$/;
    const configs = [];

    for (const line of lines) {
      const trimmed = line.trim();
      if (!trimmed) continue;

      const match = trimmed.match(configRegex);
      if (match) {
        const [, name, rawValue] = match;

        let value;
        try {
          value = JSON.parse(rawValue);
        } catch {
          value = rawValue;
        }

        configs.push({ name, value });
      }
    }

    return configs;
  }

  (function () {
    const chatWidgetContainer = document.querySelector('#chat-tab');
    chatWidgetContainer.dataset.id = '0';

    chatWidgetContainer.innerHTML = `
      <div id="chat-popup" class="relative left-0 bottom-0 h-full w-full bg-white rounded-md shadow-md flex flex-col transition-all">
        <div id="chat-header" class="flex justify-between items-center p-4 bg-gray-800 text-white rounded-t-md">
          <h3 class="m-0 text-lg">DHX Assistant</h3>
           <button data-micromodal-trigger="modal-1" class="help-btn">?</button>
        </div>
        <div id="chat-messages" class="flex-1 p-4 overflow-y-auto text-base"></div>
        <div id="loader" class="hidden justify-start mb-3">
          <div class="spinner m-auto"></div>
        </div>
        <div id="chat-input-container" class="p-4 border-t border-gray-200">
          <div class="flex space-x-4 items-center">
            <input type="text" id="chat-input" class="flex-1 border border-gray-300 rounded-md px-4 py-2 outline-none w-3/4" placeholder="Type your message...">
            <button id="chat-submit" class="bg-gray-800 text-white rounded-md px-4 py-2 cursor-pointer">Send</button>
          </div>
        </div>
      </div>
    `;

    const chatInput = document.getElementById('chat-input');
    const chatSubmit = document.getElementById('chat-submit');
    const chatMessages = document.getElementById('chat-messages');
    const themeManager = new ThemeManager();
    themeManager.initEditors();

    themeManager.onThemeChange((css, configs, isSave = false) => {
      if (isSave) {
        const variables = parseFromCSSToObj(css);
        const parsedConfigs = parseConfigStringToArray(configs);
        runCommand('set_theme', { variables, configs: parsedConfigs });
      } else {
        applyThemeOnFly(css);
        const parsedConfigs = parseConfigStringToArray(configs);
        runCommand('set_configs', { configs: parsedConfigs });
      }
    });

    chatSubmit.addEventListener('click', function () {
      const message = chatInput.value.trim();
      if (!message) return;
      chatMessages.scrollTop = chatMessages.scrollHeight;
      chatInput.value = '';
      sendUserMessage(message);
    });

    chatMessages.addEventListener('click', function (event) {
      if (event.target.closest('.prompt-pill')) {
        const pillText = event.target.closest('.prompt-pill').innerText;
        sendUserMessage(pillText);
      }
    });

    chatInput.addEventListener('keyup', function (event) {
      if (event.key === 'Enter') {
        chatSubmit.click();
      }
    });

    const loader = document.getElementById('loader');

    function showLoader() {
      loader.classList.remove('hidden');
      chatMessages.scrollTop = chatMessages.scrollHeight;
    }

    function hideLoader() {
      loader.classList.add('hidden');
    }

    function sendUserMessage(message) {
      if (!message) return;
      displayUser(message);
      chatInput.value = '';

      const payload = {
        message,
        theme: getTheme(),
        configs: getConfigs(),
      };
      showLoader();
      socket.emit('user_msg', JSON.stringify(payload));
    }

    function displayUser(msg) {
      const div = document.createElement('div');
      div.className = 'flex justify-end mb-3';
      div.innerHTML = `<div class="bg-gray-800 text-white rounded-lg py-2 px-4 max-w-[70%]">${msg}</div>`;
      chatMessages.appendChild(div);
      chatMessages.scrollTop = chatMessages.scrollHeight;
    }

    socket.on('assistant_msg', (txt) => {
      hideLoader();
      displayReply(txt);
    });

    socket.on('tool_call', (txt) => {
      let handled = false;
      try {
        const { cmd, params } = JSON.parse(txt);

        if (cmd && cmd !== 'none') {
          const result = runCommand(cmd, params);
          hideLoader();
          onCallback(cmd, params);

          if (cmd === 'set_theme') {
            const { styles, configStr } = result;
            themeManager.setTheme(styles, configStr);
            displayReply('🎨 Your theme has been generated and applied! You can now edit it in the Code tab.');
          } else if (cmd === 'reset_theme') {
            themeManager.resetTheme();
          }
        }
        handled = true;
      } catch (e) {
        hideLoader();
        displayReply(`Something wrong had happened: ${e.message}`);
        handled = true;
      }
      if (!handled) displayReply(`Couldn't handle this: ${txt}`);
    });

    function displayReply(message) {
      const div = document.createElement('div');
      div.className = 'flex mb-3 chat-message';
      const html = DOMPurify.sanitize(marked.parse(message));
      div.innerHTML = `<div class="bg-gray-100 text-black rounded-lg py-2 px-4 max-w-[70%]">${html}</div>`;
      chatMessages.appendChild(div);
      chatMessages.scrollTop = chatMessages.scrollHeight;
    }

    let generatedTheme = false;
    function onCallback(cmd, params) {
      if (!generatedTheme && cmd === 'set_theme') {
        generatedTheme = true;
        displayReply(buildSuggestionsBlock(cmd));
        return;
      }
      if (generatedTheme && cmd === 'reset_theme') {
        generatedTheme = false;
        displayReply(buildSuggestionsBlock(cmd));
        return;
      }
    }

    function buildSuggestionsBlock(cmd) {
      const afterSetThemePills = [
        `Make tasks a bit lighter.`,
        `Make the current theme a bit darker.`,
        `Reset the current theme.`,
      ];
      const afterResetThemePills = [
        `Create me a relaxed and calm theme where blue and light-purple colors prevail.`,
        `I want to customise the Gantt chart theme. Create a bright and warm theme for me. Also, increase the height of the rows and bars. Make the link width 4px.`,
      ];
      const pills = cmd === 'set_theme' ? afterSetThemePills : afterResetThemePills;

      const cmdText =
        cmd === 'set_theme'
          ? 'Your theme is ready. Keep customizing it with natural language.'
          : 'Your theme is reset. Generate a new theme with natural language.';

      return `
  <p>${cmdText} Try:</p>
  <div class="suggestion-pills">
    ${pills.map((p) => `<button class="prompt-pill">${p}</button>`).join('')}
  </div>`;
    }

    displayReply(`## Welcome to the AI Project Wizard!

I can customise the Gantt chart theme, edit, or style your Gantt chart with plain-language commands.
<br/>
<br/>

Try things like:

<div class="suggestion-pills">
<button class="prompt-pill">I want to customise the Gantt chart theme. Create a bright and warm theme for me. Also, increase the height of the rows and bars. Make the link width 4px.</button>
<button class="prompt-pill">Make tasks a bit lighter.</button>
<button class="prompt-pill">Create me a relaxed and calm theme where blue and light-purple colors prevail.</button>
</div>`);
  })();

  MicroModal.init({ disableScroll: true });

  document.querySelectorAll('.copy-btn').forEach((btn) => {
    btn.addEventListener('click', () => {
      const text = btn.getAttribute('data-text');
      navigator.clipboard.writeText(text).then(() => {
        btn.textContent = 'Copied!';
        setTimeout(() => (btn.textContent = 'Copy'), 1000);
      });
    });
  });

  const chatTabsEl = document.querySelector('.chat_tabs');
  chatTabsEl.addEventListener('click', (e) => {
    const tabBtn = e.target.closest('.tab-btn');
    if (tabBtn && !tabBtn.classList.contains('tab-btn-active')) {
      const activeBtn = chatTabsEl.querySelector('.tab-btn-active');
      const tabPaneShown = chatTabsEl.querySelector('.tab-pane-show');
      tabPaneShown && tabPaneShown.classList.remove('tab-pane-show');
      activeBtn.classList.remove('tab-btn-active');
      tabBtn.classList.add('tab-btn-active');

      const targetId = tabBtn.dataset.targetId;
      const tabPane = chatTabsEl.querySelector(`.tab-pane[data-id="${targetId}"]`);
      tabPane.classList.add('tab-pane-show');
    }
  });

  const modalBodyWrapper = document.querySelector('.modal__body-wrapper');
  const modalScrollTopBtn = document.getElementById('btn-scroll-top');

  modalBodyWrapper.addEventListener('scroll', () => {
    modalScrollTopBtn.style.display = modalBodyWrapper.scrollTop > 200 ? 'block' : 'none';
  });

  modalScrollTopBtn.addEventListener('click', () => {
    modalBodyWrapper.scrollTo({ top: 0, behavior: 'smooth' });
  });
};

export class ThemeManager {
  constructor() {
    this.originalThemeCSS = "";
    this.editedThemeCSS = "";
    this.originalThemeConfigs = "";
    this.editedThemeConfigs = "";
    this.cssEditor = null;
    this.configEditor = null;
    this.onThemeChangeCallback = null;
  }

  initEditors() {
    this.initCssEditor();
    this.initConfigEditor();
  }

  initCssEditor() {
    require.config({ paths: { vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.34.1/min/vs" } });
    require(["vs/editor/editor.main"], () => {
      this.cssEditor = monaco.editor.create(document.getElementById("css-editor-container"), {
        value: this.originalThemeCSS,
        language: "css",
        theme: "vs-dark",
        automaticLayout: true,
        readOnly: false,
      });

      this.setupEditorEvents(this.cssEditor, "css");
    });
  }

  initConfigEditor() {
    require.config({ paths: { vs: "https://cdn.jsdelivr.net/npm/monaco-editor@0.34.1/min/vs" } });
    require(["vs/editor/editor.main"], () => {
      this.configEditor = monaco.editor.create(document.getElementById("config-editor-container"), {
        value: this.originalThemeConfigs,
        language: "javascript",
        theme: "vs-dark",
        automaticLayout: true,
        readOnly: false,
      });

      this.setupEditorEvents(this.configEditor, "config");
    });
  }

  setupEditorEvents(editor, type) {
    editor.onDidChangeModelContent(() => {
      const value = editor.getValue();
      this[`editedTheme${type === "css" ? "CSS" : "Configs"}`] = value;

      this.updateButtonsState(type);
      this.applyThemeOnFly();
    });

    document.querySelector(`[data-editor="${type}"].copy-editor-btn`).addEventListener("click", () => {
      this.copyContent(type);
    });

    document.querySelector(`[data-editor="${type}"].save-editor-btn`).addEventListener("click", () => {
      this.saveChanges(type);
    });

    document.querySelector(`[data-editor="${type}"].cancel-editor-btn`).addEventListener("click", () => {
      this.cancelChanges(type);
    });
  }

  updateButtonsState(type) {
    const original = type === "css" ? this.originalThemeCSS : this.originalThemeConfigs;
    const edited = type === "css" ? this.editedThemeCSS : this.editedThemeConfigs;
    const changed = edited.trim() !== original.trim();

    document.querySelector(`[data-editor="${type}"].save-editor-btn`).disabled = !changed;
    document.querySelector(`[data-editor="${type}"].cancel-editor-btn`).disabled = !changed;
  }

  setTheme(themeCSS, themeConfigs) {
    this.originalThemeCSS = themeCSS;
    this.editedThemeCSS = themeCSS;
    this.originalThemeConfigs = themeConfigs;
    this.editedThemeConfigs = themeConfigs;

    if (this.cssEditor) {
      this.cssEditor.setValue(themeCSS);
    }
    if (this.configEditor) {
      this.configEditor.setValue(themeConfigs);
    }

    this.updateButtonsState("css");
    this.updateButtonsState("config");
  }

  applyThemeOnFly() {
    if (this.onThemeChangeCallback) {
      this.onThemeChangeCallback(this.editedThemeCSS, this.editedThemeConfigs);
    }
  }

  copyContent(type) {
    const content = type === "css" ? this.editedThemeCSS : this.editedThemeConfigs;
    navigator.clipboard.writeText(content);

    const btn = document.querySelector(`[data-editor="${type}"].copy-editor-btn`);
    btn.textContent = "Copied!";
    setTimeout(() => (btn.textContent = "Copy"), 1000);
  }

  saveChanges(type) {
    if (type === "css") {
      this.originalThemeCSS = this.editedThemeCSS;
    } else {
      this.originalThemeConfigs = this.editedThemeConfigs;
    }

    this.updateButtonsState(type);

    if (this.onThemeChangeCallback) {
      this.onThemeChangeCallback(this.editedThemeCSS, this.editedThemeConfigs, true);
    }
  }

  cancelChanges(type) {
    if (type === "css") {
      this.editedThemeCSS = this.originalThemeCSS;
      this.cssEditor.setValue(this.originalThemeCSS);
    } else {
      this.editedThemeConfigs = this.originalThemeConfigs;
      this.configEditor.setValue(this.originalThemeConfigs);
    }

    this.updateButtonsState(type);
    this.applyThemeOnFly();
  }

  onThemeChange(callback) {
    this.onThemeChangeCallback = callback;
  }

  resetTheme() {
    this.setTheme("", "");
  }
}

export default function (gantt, { onThemeSet, onConfigSet }, defaultConfigValues = {}) {
  // handlers for commands defined in /backend/schemaList.js
  return function runCommand(cmd, args) {
    switch (cmd) {
      case "set_theme":
        const variables = args.variables;
        const configs = args.configs;
        const styleId = "dynamic-theme";
        let configStr = "";
        let mergedConfigs = [];

        [...defaultConfigValues, ...configs].forEach((config) => {
          gantt.config[config.name] = config.value;
        });

        let style = document.getElementById(styleId);
        if (!style) {
          style = document.createElement("style");
          style.id = styleId;
          document.head.appendChild(style);
        }

        const lines = variables.map((variable) => `${variable.key}: ${variable.value};`);
        const styles = `:root { \n${lines.join("\n")} \n}`;
        style.innerHTML = styles;

        if (onThemeSet) {
          onThemeSet(variables, cmd);
        }
        if (onConfigSet) {
          mergedConfigs = onConfigSet(configs, cmd);
        }

        configStr = mergedConfigs.map((config) => `gantt.config.${config.name} = ${config.value};`).join("\n");
        gantt.render();

        return { styles, configStr };

      case "reset_theme":
        const themeStyleId = "dynamic-theme";
        const styleEl = document.getElementById(themeStyleId);
        if (styleEl) {
          styleEl.remove();
        }

        if (onThemeSet) {
          onThemeSet([], cmd);
        }
        if (onConfigSet) {
          onConfigSet([], cmd);
          if (defaultConfigValues.length) {
            defaultConfigValues.forEach((config) => {
              gantt.config[config.name] = config.value;
            });
          }

          gantt.render();
        }

        break;

      case "set_configs":
        const configsArr = args.configs;
        if (configsArr.length) {
          configsArr.forEach((config) => {
            gantt.config[config.name] = config.value;
          });

          if (onConfigSet) {
            onConfigSet(configsArr, cmd);
          }

          gantt.render();
        }
        break;

      default:
        console.warn("Unknown cmd:", cmd, args);
    }
  };
}

export const demoData = {
  tasks: [
    { id: 1, text: "Website Relaunch", type: "project", start_date: null, duration: 0, progress: 0.3, open: true },

    {
      id: 2,
      text: "Planning Phase",
      type: "project",
      parent: 1,
      start_date: "2025-01-15",
      duration: 14,
      progress: 1.0,
      open: true,
    },
    { id: 3, text: "Project Kickoff Meeting", parent: 2, start_date: "2025-01-15", duration: 1, progress: 1.0 },
    { id: 4, text: "Requirements Gathering", parent: 2, start_date: "2025-01-16", duration: 3, progress: 1.0 },
    { id: 5, text: "Stakeholder Interviews", parent: 4, start_date: "2025-01-16", duration: 2, progress: 1.0 },
    { id: 6, text: "Competitive Analysis", parent: 4, start_date: "2025-01-18", duration: 2, progress: 1.0 },
    { id: 7, text: "Technical Assessment", parent: 2, start_date: "2025-01-19", duration: 2, progress: 1.0 },
    { id: 8, text: "Project Scope Definition", parent: 2, start_date: "2025-01-22", duration: 2, progress: 1.0 },
    { id: 9, text: "Budget Approval", parent: 2, start_date: "2025-01-24", duration: 2, progress: 1.0 },
    {
      id: 10,
      text: "Planning Completion Milestone",
      parent: 2,
      type: "milestone",
      start_date: "2025-01-26",
      duration: 0,
      progress: 1.0,
    },

    {
      id: 11,
      text: "Design Phase",
      type: "project",
      parent: 1,
      start_date: "2025-01-29",
      duration: 16,
      progress: 0.8,
      open: true,
    },
    { id: 12, text: "Information Architecture", parent: 11, start_date: "2025-01-29", duration: 3, progress: 1.0 },
    { id: 13, text: "Wireframing", parent: 11, start_date: "2025-02-01", duration: 4, progress: 1.0 },
    { id: 14, text: "UI Design - Homepage", parent: 11, start_date: "2025-02-06", duration: 3, progress: 1.0 },
    { id: 15, text: "UI Design - Inner Pages", parent: 11, start_date: "2025-02-09", duration: 4, progress: 0.8 },
    { id: 16, text: "Mobile Responsive Design", parent: 15, start_date: "2025-02-09", duration: 3, progress: 0.5 },
    { id: 17, text: "Design System Creation", parent: 11, start_date: "2025-02-13", duration: 3, progress: 0.3 },
    { id: 18, text: "Client Design Review", parent: 11, start_date: "2025-02-16", duration: 2, progress: 0.0 },
    { id: 19, text: "Design Revisions", parent: 11, start_date: "2025-02-20", duration: 3, progress: 0.0 },
    {
      id: 20,
      text: "Design Approval Milestone",
      parent: 11,
      type: "milestone",
      start_date: "2025-02-23",
      duration: 0,
      progress: 0.0,
    },

    {
      id: 21,
      text: "Development Phase",
      type: "project",
      parent: 1,
      start_date: "2025-02-26",
      duration: 25,
      progress: 0.4,
      open: true,
    },
    { id: 22, text: "Frontend Setup", parent: 21, start_date: "2025-02-26", duration: 3, progress: 1.0 },
    { id: 23, text: "Backend Infrastructure", parent: 21, start_date: "2025-02-29", duration: 4, progress: 0.8 },
    { id: 24, text: "Database Design", parent: 23, start_date: "2025-02-29", duration: 2, progress: 1.0 },
    { id: 25, text: "API Development", parent: 23, start_date: "2025-03-04", duration: 5, progress: 0.6 },
    { id: 26, text: "Homepage Development", parent: 21, start_date: "2025-03-11", duration: 4, progress: 0.9 },
    { id: 27, text: "Content Pages Development", parent: 21, start_date: "2025-03-15", duration: 6, progress: 0.4 },
    { id: 28, text: "User Authentication System", parent: 21, start_date: "2025-03-21", duration: 3, progress: 0.2 },
    { id: 29, text: "E-commerce Functionality", parent: 21, start_date: "2025-03-25", duration: 5, progress: 0.0 },
    { id: 30, text: "Third-party Integrations", parent: 21, start_date: "2025-03-29", duration: 4, progress: 0.0 },
    {
      id: 31,
      text: "Development Completion Milestone",
      parent: 21,
      type: "milestone",
      start_date: "2025-04-03",
      duration: 0,
      progress: 0.0,
    },

    {
      id: 32,
      text: "Testing Phase",
      type: "project",
      parent: 1,
      start_date: "2025-04-04",
      duration: 10,
      progress: 0.0,
      open: true,
    },
    { id: 33, text: "Unit Testing", parent: 32, start_date: "2025-04-04", duration: 3, progress: 0.0 },
    { id: 34, text: "Integration Testing", parent: 32, start_date: "2025-04-09", duration: 4, progress: 0.0 },
    { id: 35, text: "User Acceptance Testing", parent: 32, start_date: "2025-04-15", duration: 3, progress: 0.0 },
    { id: 36, text: "Bug Fixing", parent: 32, start_date: "2025-04-18", duration: 4, progress: 0.0 },
    {
      id: 37,
      text: "Testing Sign-off Milestone",
      parent: 32,
      type: "milestone",
      start_date: "2025-04-22",
      duration: 0,
      progress: 0.0,
    },

    {
      id: 38,
      text: "Deployment Phase",
      type: "project",
      parent: 1,
      start_date: "2025-04-23",
      duration: 6,
      progress: 0.0,
      open: true,
    },
    { id: 39, text: "Production Environment Setup", parent: 38, start_date: "2025-04-23", duration: 2, progress: 0.0 },
    { id: 40, text: "Content Migration", parent: 38, start_date: "2025-04-25", duration: 2, progress: 0.0 },
    { id: 41, text: "Final Deployment", parent: 38, start_date: "2025-04-29", duration: 1, progress: 0.0 },
    { id: 42, text: "Post-launch Monitoring", parent: 38, start_date: "2025-04-30", duration: 3, progress: 0.0 },
    {
      id: 43,
      text: "Project Launch Milestone",
      parent: 38,
      type: "milestone",
      start_date: "2025-05-03",
      duration: 0,
      progress: 0.0,
    },
  ],
  links: [
    { id: 1, source: 3, target: 4, type: "0" },
    { id: 2, source: 4, target: 7, type: "0" },
    { id: 3, source: 7, target: 8, type: "0" },
    { id: 4, source: 8, target: 9, type: "0" },
    { id: 5, source: 9, target: 10, type: "0" },
    { id: 6, source: 10, target: 12, type: "0" },
    { id: 7, source: 12, target: 13, type: "0" },
    { id: 8, source: 13, target: 14, type: "0" },
    { id: 9, source: 14, target: 15, type: "0" },
    { id: 10, source: 15, target: 17, type: "0" },
    { id: 11, source: 17, target: 18, type: "0" },
    { id: 12, source: 18, target: 19, type: "0" },
    { id: 13, source: 19, target: 20, type: "0" },
    { id: 14, source: 20, target: 22, type: "0" },
    { id: 15, source: 22, target: 23, type: "0" },
    { id: 16, source: 24, target: 25, type: "0" },
    { id: 17, source: 25, target: 26, type: "0" },
    { id: 18, source: 26, target: 27, type: "0" },
    { id: 19, source: 27, target: 28, type: "0" },
    { id: 20, source: 28, target: 29, type: "0" },
    { id: 21, source: 29, target: 30, type: "0" },
    { id: 22, source: 30, target: 31, type: "0" },
    { id: 23, source: 31, target: 33, type: "0" },
    { id: 24, source: 33, target: 34, type: "0" },
    { id: 25, source: 34, target: 35, type: "0" },
    { id: 26, source: 35, target: 36, type: "0" },
    { id: 27, source: 36, target: 37, type: "0" },
    { id: 28, source: 37, target: 39, type: "0" },
    { id: 29, source: 39, target: 40, type: "0" },
    { id: 30, source: 40, target: 41, type: "0" },
    { id: 31, source: 41, target: 42, type: "0" },
    { id: 32, source: 42, target: 43, type: "0" },
  ],
};