Vite + React

Building Flow: {flowName}

How will a contact start their journey?

+ This is what kicks off your contact's journey. You choose the + starting point, then contacts who meet the criteria will enter + your map and begin their journey. +

setShowPopup(false)} + /> + )} +

Create a map of your contact's journey

+ Put your contacts on a path that’s right for them. With a customer + journey, you can always be there for your contacts when they need you + most. +

+ +

+ These starting points are popular with other Mailchimp customers. +

+ Some starting points are coming soon or require additional setup. +

+ {dataListFlow.map((option) => ( +

handleFlowClick(option.key)} + > +

{option.name}

+ ))} +

+ + ); +}; + +export default PopupListFlow; diff --git a/src/RouterFlow.jsx b/src/RouterFlow.jsx new file mode 100644 index 0000000..9271059 --- /dev/null +++ b/src/RouterFlow.jsx @@ -0,0 +1,17 @@ +import React from "react"; +import { Routes, Route } from "react-router-dom"; +import CreateFlow from "./CreateFlow"; +import BuildFlow from "./BuildFlow"; + +function RouterFlow() { + return ( +

+ + } /> + } /> + +

+ ); +} + +export default RouterFlow; diff --git a/src/Sidebar/Sidebar.css b/src/Sidebar/Sidebar.css new file mode 100644 index 0000000..9079787 --- /dev/null +++ b/src/Sidebar/Sidebar.css @@ -0,0 +1,57 @@ +.dndflow { + flex-direction: column; + display: flex; + flex-grow: 1; + height: 100%; +} + +.dndflow aside { + border-right: 1px solid #eee; + padding: 15px 10px; + font-size: 12px; + background: #fcfcfc; +} + +.dndflow aside .description { + margin-bottom: 10px; +} + +.dndflow .dndnode { + height: 20px; + padding: 4px; + border: 1px solid #1a192b; + border-radius: 2px; + margin-bottom: 10px; + display: flex; + justify-content: center; + align-items: center; + cursor: grab; +} + +.dndflow .dndnode.input { + border-color: #0041d0; +} + +.dndflow .dndnode.output { + border-color: #ff0072; +} + +.dndflow { + flex-grow: 1; + height: 100vh; +} + +.dndflow .selectall { + margin-top: 10px; +} + +@media screen and (min-width: 768px) { + .dndflow { + flex-direction: row; + } + + .dndflow aside { + width: 20%; + max-width: 250px; + } +} diff --git a/src/Sidebar/Sidebar.jsx b/src/Sidebar/Sidebar.jsx new file mode 100644 index 0000000..1e21214 --- /dev/null +++ b/src/Sidebar/Sidebar.jsx @@ -0,0 +1,44 @@ +// ================================================================================================= +import React from "react"; +import { MenuOptions } from "../Data/Menu"; + +const Sidebar = ({ onAddNodeCallback }) => { + // const onDragStart = (event, nodeType) => { + // event.dataTransfer.setData("application/reactflow", nodeType); + // }; + const onDragStart = (event, nodeType) => { + // event.dataTransfer.setData("application/reactflow", "custom"); // Set a custom dataTransfer type + event.dataTransfer.setData("nodeType", nodeType); // Store the node type in a custom data attribute + }; + + return ( +

+ {MenuOptions.map((option) => ( +

+ {option.title} +

+ {option.list_option.map((items) => ( +

onDragStart(event, items.key)} + > +

{items.label}

+ ))} +

+ ); +}; + +export default Sidebar; diff --git a/src/Utils/WorkflowElementUtils.jsx b/src/Utils/WorkflowElementUtils.jsx new file mode 100644 index 0000000..224492c --- /dev/null +++ b/src/Utils/WorkflowElementUtils.jsx @@ -0,0 +1,224 @@ +import { v4 as uuidv4 } from "uuid"; +import _ from "lodash"; +import { MenuOptions } from "../Data/Menu"; + +const position = { x: 0, y: 0 }; + +const getTitleAndDescription = (type) => { + let title = []; + + MenuOptions.forEach((option) => { + option.list_option.forEach((item) => { + if (type === item.key) { + title.push(item.label); + } + }); + }); + + return { title }; +}; + +const getUpdatedElementsAfterActionNodeAddition = ({ + elements, + newNodeId, + targetNodeId, + onAddNodeCallback, +}) => { + const clonedElements = _.cloneDeep(elements); + const newEdge = { + id: uuidv4(), + source: newNodeId, + target: targetNodeId, + type: "condition", + data: { onAddNodeCallback }, + }; + clonedElements.push(newEdge); + return clonedElements; +}; + +const getUpdatedElementsAfterEndNodeAddition = () => {}; + +const getUpdatedElementsAfterRuleNodeAdditon = ({ + elements, + newNodeId, + targetNodeId, + onAddNodeCallback, +}) => { + const clonedElements = _.cloneDeep(elements); + const emptyNode1Id = uuidv4(); + const emptyNode2Id = uuidv4(); + const endNodeId = uuidv4(); + + // Define the end node for 'no' branch + const endNode = { + id: endNodeId, + type: "end", + data: { + title: "End", + description: "Automation ends.", + stats: { + completed: 14, + }, + }, + position, // Node end sẽ ở vị trí của nhánh no + }; + + // Move the existing target node to the 'yes' branch + const ruleNodeToYesBranchEdge = { + id: uuidv4(), + source: newNodeId, + target: targetNodeId, // Existing target node moves to yes branch + type: "condition", + sourceHandle: "yes", + data: { onAddNodeCallback }, + }; + + // Connect the rule node to the empty node in 'no' branch, which ends in the end node + const ruleNodeToNoBranchEdge = { + id: uuidv4(), + source: newNodeId, + target: endNodeId, // This goes to the 'no' branch + type: "condition", + sourceHandle: "no", + data: { onAddNodeCallback }, + }; + + // Add everything to cloned elements + clonedElements.push(ruleNodeToYesBranchEdge, ruleNodeToNoBranchEdge, endNode); + + return clonedElements; +}; + +const getUpdatedElementsAfterNodeAddition = ({ + elements, + targetEdgeId, + type, + onDeleteNodeCallback, + onNodeClickCallback, + onAddNodeCallback, + position, +}) => { + const newNodeId = uuidv4(); + const { title } = getTitleAndDescription(type); + const newNode = { + id: newNodeId, + type, + data: { + title, + onNodeClickCallback, + onDeleteNodeCallback, + }, + + position, + }; + const clonedElements = _.cloneDeep(elements); + const targetEdgeIndex = clonedElements.findIndex( + (x) => x.id === targetEdgeId + ); + + if (targetEdgeIndex === -1) { + console.error("Target edge is undefined."); + return elements; + } + + const targetEdge = elements[targetEdgeIndex]; + + // Check if targetEdge is defined before accessing its properties + if (targetEdge) { + const { target: targetNodeId } = targetEdge; + const updatedTargetEdge = { ...targetEdge, target: newNodeId }; + clonedElements[targetEdgeIndex] = updatedTargetEdge; + clonedElements.push(newNode); + + console.log(position); + + console.log(updatedTargetEdge); + + switch (type) { + case "end": + // return getUpdatedElementsAfterEndNodeAddition(); + + return getUpdatedElementsAfterActionNodeAddition({ + elements: clonedElements, + newNodeId, + newNode, + targetNodeId, + onAddNodeCallback, + }); + + case "waitThenCheck": + return getUpdatedElementsAfterRuleNodeAdditon({ + elements: clonedElements, + newNodeId, + targetNodeId, + onAddNodeCallback, + }); + default: + return getUpdatedElementsAfterActionNodeAddition({ + elements: clonedElements, + newNodeId, + newNode, + targetNodeId, + onAddNodeCallback, + }); + } + } else { + // Handle the case when targetEdge is undefined + console.error("Target edge is undefined."); + return elements; // Return the original elements array + } +}; + +// const getUpdatedElementsAfterNodeAddition = ({ +// elements, +// targetEdgeId, +// type, +// onDeleteNodeCallback, +// onNodeClickCallback, +// onAddNodeCallback, +// }) => { +// const newNodeId = uuidv4(); +// const { title, description } = getTitleAndDescription(type); +// const newNode = { +// id: newNodeId, +// type, +// data: { +// title, +// description, +// onNodeClickCallback, +// onDeleteNodeCallback, +// }, +// position, +// }; +// const clonedElements = _.cloneDeep(elements); +// const targetEdgeIndex = clonedElements.findIndex( +// (x) => x.id === targetEdgeId +// ); +// const targetEdge = elements[targetEdgeIndex]; +// const { target: targetNodeId } = targetEdge; +// const updatedTargetEdge = { ...targetEdge, target: newNodeId }; +// clonedElements[targetEdgeIndex] = updatedTargetEdge; +// clonedElements.push(newNode); + +// switch (type) { +// case "end": +// return getUpdatedElementsAfterEndNodeAddition(); +// case "waitThenCheck": +// return getUpdatedElementsAfterRuleNodeAdditon({ +// elements: clonedElements, +// newNodeId, +// targetNodeId, +// onAddNodeCallback, +// }); +// default: +// return getUpdatedElementsAfterActionNodeAddition({ +// elements: clonedElements, +// newNodeId, +// newNode, +// targetNodeId, +// onAddNodeCallback, +// }); +// } +// }; + +export { getUpdatedElementsAfterNodeAddition }; diff --git a/src/Utils/WorkflowLayoutUtils.jsx b/src/Utils/WorkflowLayoutUtils.jsx new file mode 100644 index 0000000..5889d45 --- /dev/null +++ b/src/Utils/WorkflowLayoutUtils.jsx @@ -0,0 +1,45 @@ +import dagre from "dagre"; +import _ from "lodash"; +import { isNode } from "reactflow"; + +const nodeWidth = 250; +const nodeHeight = 80; + +const getLayoutedElements = (_elements) => { + const elements = _.cloneDeep(_elements); + const dagreGraph = new dagre.graphlib.Graph(); + + dagreGraph.setDefaultEdgeLabel(() => ({})); + dagreGraph.setGraph({ rankdir: "TB" }); + + elements.forEach((el) => { + if (isNode(el)) { + dagreGraph.setNode(el.id, { + width: el.width || nodeWidth, + height: el.height || nodeHeight, + }); + } else { + dagreGraph.setEdge(el.source, el.target); + } + }); + + dagre.layout(dagreGraph); + + return elements.map((el) => { + if (isNode(el)) { + const nodeWithPosition = dagreGraph.node(el.id); + el.targetPosition = "top"; + el.sourcePosition = "bottom"; + el.position = { + x: + nodeWithPosition.x - + (el.width || nodeWidth) / 2 + + Math.random() / 1000, + y: nodeWithPosition.y - (el.height || nodeHeight) / 2, + }; + } + return el; + }); +}; + +export { getLayoutedElements }; diff --git a/src/assets/css/style.css b/src/assets/css/style.css new file mode 100644 index 0000000..c8ff3ce --- /dev/null +++ b/src/assets/css/style.css @@ -0,0 +1,226 @@ +.container { + width: 1200px; + margin: 0 auto; + padding: 0 10px; +} + +.content-create { + width: 640px; + margin: 0 auto; +} + +.content-create .title { + text-align: center; + font-size: 20px; +} + +.content-create .note { + text-align: center; + color: gray; +} + +.style-form { + border: 1px solid rgba(36, 28, 21, 0.15); + border-radius: 4px; + -webkit-box-shadow: 0px 12px 24px rgba(36, 28, 21, 0.16); + box-shadow: 0px 12px 24px rgba(36, 28, 21, 0.16); + padding: 60px; +} + +.style-form label { + font-weight: 600; + display: block; + margin-bottom: 10px; +} + +.style-form input { + -webkit-box-flex: 1; + background-color: transparent; + border: 1px solid #222; + outline: none; + padding: 10px 16px; + width: 100%; + border-radius: 5px; +} + +.style-form .btn-submit { + background-color: #007c89; + color: #fff; + text-decoration: none; + text-align: center; + margin: 20px auto; + width: 120px; + height: 45px; + border-radius: 50px; + outline: none; + border: 0; + display: block; +} + +.content-create .image-header { + width: 200px; + margin-top: 30px; + text-align: center; + margin: 0 auto; + display: block; +} + +.content-start { + width: 500px; + margin: 0 auto; +} + +.content-start .imageStart { + width: 200px; + display: block; + margin: 20px auto 10px auto; +} + +.content-start h2 { + display: block; + font-size: 20px; + text-align: center; +} + +.content-start .note { + font-style: italic; + text-align: center; + color: gray; +} + +.btn-start { + display: block; + position: relative; + margin: 30px auto 0 auto; + width: 300px; + height: 50px; + background: #007c89; + color: #fff; + border-radius: 50px; + outline: none; + border: 0; + cursor: pointer; + font-weight: 700; +} + +.btn-start::after { + position: absolute; + content: ""; + left: 50%; + bottom: -50px; + width: 2px; + height: 50px; + background: #222; +} + +.popup-list-flow { + left: 50%; + position: fixed; + width: 1000px; + top: 50%; + transform: translate(-50%, -50%); + z-index: 1000; +} + +.popup-list-flow .popup-content { + background: #efeeea; + position: relative; + padding: 0; + overflow-x: hidden; +} +.popup-list-flow .close { + position: absolute; + top: 10px; + right: 10px; + background: transparent; + font-size: 25px; + outline: 0; + border: 0; + cursor: pointer; +} + +.popup-list-flow .title, +.popup-list-flow .note { + display: block; + margin: 0; + padding-left: 20px; +} +.popup-list-flow .title { + padding-top: 20px; +} +.d-flex { + display: flex; +} +.flex-wrap { + flex-wrap: wrap; +} +.align-items { + align-items: center; +} + +.ListNodeMain { + padding: 20px; + margin-right: -16px; +} + +.ListNodeMain .item-node { + width: calc(100% / 3 - 16px); + background: #fff; + border: 2px solid rgba(36, 28, 21, 0.15); + border-radius: 8px; + cursor: pointer; + padding: 20px; + margin-right: 16px; + margin-bottom: 16px; +} + +.ListNodeMain .item-node .icon { + width: 24px; + height: 24px; + margin-right: 10px; +} +.ListNodeMain .triggerName { + margin-bottom: 10px; +} +.ListNodeMain .item-node .name { + font-weight: 700; +} + +.ListNodeMain .item-node .description { + font-size: 11px; + line-height: 20px; +} +.ListNodeMain .item-node ul li { + margin-left: 20px; +} + +.popup-overlay { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background: rgba(0, 0, 0, 0.5); + z-index: 999; +} + +.popup-header { + border-bottom: 1px solid rgba(36, 28, 21, 0.15); + padding: 10px 20px; + position: relative; +} + +.popup-header .close-popup { + position: absolute; + right: 10px; + top: 0; + font-size: 25px; + font-weight: 600; + cursor: pointer; +} + +.popup-footer { + border-top: 1px solid rgba(36, 28, 21, 0.15); + padding: 12px 16px; + text-align: right; +} diff --git a/src/assets/images/Customer-Journey_Animation.gif b/src/assets/images/Customer-Journey_Animation.gif new file mode 100644 index 0000000..edf390c Binary files /dev/null and b/src/assets/images/Customer-Journey_Animation.gif differ diff --git a/src/assets/images/ILLO_MiniSpot_2-Paths-v2_1080x1080.png b/src/assets/images/ILLO_MiniSpot_2-Paths-v2_1080x1080.png new file mode 100644 index 0000000..76f8e8d Binary files /dev/null and b/src/assets/images/ILLO_MiniSpot_2-Paths-v2_1080x1080.png differ diff --git a/src/assets/images/icon-birthday.svg b/src/assets/images/icon-birthday.svg new file mode 100644 index 0000000..661286d --- /dev/null +++ b/src/assets/images/icon-birthday.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/icon-buy.svg b/src/assets/images/icon-buy.svg new file mode 100644 index 0000000..1e9b589 --- /dev/null +++ b/src/assets/images/icon-buy.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/icon-check.svg b/src/assets/images/icon-check.svg new file mode 100644 index 0000000..cd27eeb --- /dev/null +++ b/src/assets/images/icon-check.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/icon-email.svg b/src/assets/images/icon-email.svg new file mode 100644 index 0000000..5d3349e --- /dev/null +++ b/src/assets/images/icon-email.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/icon-exits.svg b/src/assets/images/icon-exits.svg new file mode 100644 index 0000000..92847d3 --- /dev/null +++ b/src/assets/images/icon-exits.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/icon-if.svg b/src/assets/images/icon-if.svg new file mode 100644 index 0000000..bbda400 --- /dev/null +++ b/src/assets/images/icon-if.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/icon-list.svg b/src/assets/images/icon-list.svg new file mode 100644 index 0000000..29d2777 --- /dev/null +++ b/src/assets/images/icon-list.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/icon-phone.svg b/src/assets/images/icon-phone.svg new file mode 100644 index 0000000..45707be --- /dev/null +++ b/src/assets/images/icon-phone.svg @@ -0,0 +1,7 @@ + \ No newline at end of file diff --git a/src/assets/images/icon-signs.svg b/src/assets/images/icon-signs.svg new file mode 100644 index 0000000..217b07b --- /dev/null +++ b/src/assets/images/icon-signs.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/icon-slack.svg b/src/assets/images/icon-slack.svg new file mode 100644 index 0000000..435faca --- /dev/null +++ b/src/assets/images/icon-slack.svg @@ -0,0 +1,18 @@ + + + + \ No newline at end of file diff --git a/src/assets/images/icon-tag.svg b/src/assets/images/icon-tag.svg new file mode 100644 index 0000000..4e818dd --- /dev/null +++ b/src/assets/images/icon-tag.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/icon-time.svg b/src/assets/images/icon-time.svg new file mode 100644 index 0000000..4a6520f --- /dev/null +++ b/src/assets/images/icon-time.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/icon-user.svg b/src/assets/images/icon-user.svg new file mode 100644 index 0000000..f366874 --- /dev/null +++ b/src/assets/images/icon-user.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/icon-wait.svg b/src/assets/images/icon-wait.svg new file mode 100644 index 0000000..c3d511e --- /dev/null +++ b/src/assets/images/icon-wait.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/icon-wink.svg b/src/assets/images/icon-wink.svg new file mode 100644 index 0000000..339bc11 --- /dev/null +++ b/src/assets/images/icon-wink.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/images/icon-zalo.svg b/src/assets/images/icon-zalo.svg new file mode 100644 index 0000000..0822f56 --- /dev/null +++ b/src/assets/images/icon-zalo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/index.scss b/src/index.scss new file mode 100644 index 0000000..cd83d96 --- /dev/null +++ b/src/index.scss @@ -0,0 +1,106 @@ +/* prettier-ignore */ +html, +body, +#root { + height: 100%; + margin: 0; +} +:root { + /* 1. The Contactlab Marketing Cloud color palette */ + --color-accent: #1890ff; + --color-accent100: #e6f7ff; + --color-accent200: #bae7ff; + --color-accent300: #91d5ff; + --color-accent400: #69c0ff; + --color-accent500: #40a9ff; + --color-accent600: #1890ff; + --color-accent700: #096dd9; + --color-accent800: #0050b3; + --color-accent900: #003a8c; + --color-base: #141414; + --color-base100: #fafafa; + --color-base200: #f5f5f5; + --color-base300: #f0f0f0; + --color-base400: #d9d9d9; + --color-base500: #bfbfbf; + --color-base600: #8c8c8c; + --color-base700: #595959; + --color-base800: #434343; + --color-base900: #141414; + --color-info: #1890ff; + --color-success: #52c41a; + --color-warning: #faad14; + --color-error: #f5222d; + --color-white: #fff; + --color-black: #000; + --color-fluo-base300: #e9e8ff; + --color-fluo-base600: #b4afff; + --color-fluo-base900: #7168ff; + --color-fluo-accent300: #e1f9ef; + --color-fluo-accent600: #9bebd0; + --color-fluo-accent900: #00c9bd; + + /* 2. The Contactlab Marketing Cloud elevations */ + --elevation-z1: 0 1px 3px 0 rgba(0, 20, 32, 0.12); + --elevation-z2: 0 3px 6px 0 rgba(0, 20, 32, 0.04), 0 3px 6px 0 rgba(0, 20, 32, 0.12); + --elevation-z3: 0 6px 6px 0 rgba(0, 20, 32, 0.09), 0 10px 20px 0 rgba(0, 20, 32, 0.13); + --elevation-z4: 0 10px 10px 0 rgba(0, 20, 32, 0.05), 0 14px 28px 0 rgba(0, 20, 32, 0.16); + --elevation-z5: 0 19px 38px 0 rgba(0, 20, 32, 0.16), 0 15px 12px 0 rgba(0, 20, 32, 0.12); + --elevation-accent-z1: 0 1px 3px 0 rgba(3, 145, 236, 0.12); + --elevation-accent-z2: 0 3px 6px 0 rgba(3, 145, 236, 0.04), 0 3px 6px 0 rgba(3, 145, 236, 0.12); + --elevation-accent-z3: 0 6px 6px 0 rgba(3, 145, 236, 0.09), 0 10px 20px 0 rgba(3, 145, 236, 0.13); + --elevation-accent-z4: 0 10px 10px 0 rgba(3, 145, 236, 0.05), 0 14px 28px 0 rgba(3, 145, 236, 0.16); + --elevation-accent-z5: 0 19px 38px 0 rgba(3, 145, 236, 0.16), 0 15px 12px 0 rgba(3, 145, 236, 0.12); + + /* 3. The Contactlab Marketing Cloud transitions */ + --elevation-transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1); + + /* 4. Document styles */ + --mc-body-foreground: var(--color-base); + --mc-body-background: var(--color-base100); + --mc-scroll-padding: 100px; + --mc-scroll-behavior: smooth; + + /* 5. a11y */ + --mc-selection-foreground: var(--color-white); + --mc-selection-background: rgba(24, 144, 255, 0.8); + + /* 6. Headings */ + --mc-heading-foreground: var(--color-base); + --mc-subheading-foreground: var(--color-base800); + + /* 7. Links */ + --mc-link-foreground: var(--color-accent); + --mc-link-active-foreground: var(--color-accent500); + + /* 8.

 */
+    --mc-code-border-radius: 2px;
+    --mc-code-background: var(--color-base300);
+
+    /* 9.  */
+    --mc-hr-background: var(--color-base300);
+
+    /* 10.  */
+    --mc-mark-foreground: var(--color-white);
+    --mc-mark-background: var(--color-accent);
+
+    /* 11.  */
+    --mc-small-foreground: var(--color-base600);
+}
+
+.App {
+    display: flex;
+    justify-content: center;
+}
+
+body {
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans",
+        "Droid Sans", "Helvetica Neue", sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
+}
diff --git a/src/main.jsx b/src/main.jsx
new file mode 100644
index 0000000..45ba5d4
--- /dev/null
+++ b/src/main.jsx
@@ -0,0 +1,21 @@
+import React from "react";
+import ReactDOM from "react-dom/client"; // Sử dụng từ react-dom/client trong React 18
+import { BrowserRouter } from "react-router-dom";
+import App from "./App";
+
+import RouterFlow from "./RouterFlow";
+
+// Lấy root element từ file HTML
+const rootElement = document.getElementById("root");
+
+// Sử dụng createRoot thay vì ReactDOM.render
+const root = ReactDOM.createRoot(rootElement);
+
+// Render ứng dụng
+root.render(
+  
+    
+      
+    
+  
+);
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 0000000..5a33944
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+})
diff --git a/vite.config.js.timestamp-1727964485729-baa5cfaa2c2d6.mjs b/vite.config.js.timestamp-1727964485729-baa5cfaa2c2d6.mjs
new file mode 100644
index 0000000..e899f15
--- /dev/null
+++ b/vite.config.js.timestamp-1727964485729-baa5cfaa2c2d6.mjs
@@ -0,0 +1,10 @@
+// vite.config.js
+import { defineConfig } from "file:///C:/Users/tiepb/Downloads/Company/work_2024/react-flow-drag/node_modules/vite/dist/node/index.js";
+import react from "file:///C:/Users/tiepb/Downloads/Company/work_2024/react-flow-drag/node_modules/@vitejs/plugin-react/dist/index.mjs";
+var vite_config_default = defineConfig({
+  plugins: [react()]
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcuanMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCJDOlxcXFxVc2Vyc1xcXFx0aWVwYlxcXFxEb3dubG9hZHNcXFxcQ29tcGFueVxcXFx3b3JrXzIwMjRcXFxccmVhY3QtZmxvdy1kcmFnXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ZpbGVuYW1lID0gXCJDOlxcXFxVc2Vyc1xcXFx0aWVwYlxcXFxEb3dubG9hZHNcXFxcQ29tcGFueVxcXFx3b3JrXzIwMjRcXFxccmVhY3QtZmxvdy1kcmFnXFxcXHZpdGUuY29uZmlnLmpzXCI7Y29uc3QgX192aXRlX2luamVjdGVkX29yaWdpbmFsX2ltcG9ydF9tZXRhX3VybCA9IFwiZmlsZTovLy9DOi9Vc2Vycy90aWVwYi9Eb3dubG9hZHMvQ29tcGFueS93b3JrXzIwMjQvcmVhY3QtZmxvdy1kcmFnL3ZpdGUuY29uZmlnLmpzXCI7aW1wb3J0IHsgZGVmaW5lQ29uZmlnIH0gZnJvbSAndml0ZSdcclxuaW1wb3J0IHJlYWN0IGZyb20gJ0B2aXRlanMvcGx1Z2luLXJlYWN0J1xyXG5cclxuLy8gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cclxuZXhwb3J0IGRlZmF1bHQgZGVmaW5lQ29uZmlnKHtcclxuICBwbHVnaW5zOiBbcmVhY3QoKV0sXHJcbn0pXHJcbiJdLAogICJtYXBwaW5ncyI6ICI7QUFBOFcsU0FBUyxvQkFBb0I7QUFDM1ksT0FBTyxXQUFXO0FBR2xCLElBQU8sc0JBQVEsYUFBYTtBQUFBLEVBQzFCLFNBQVMsQ0FBQyxNQUFNLENBQUM7QUFDbkIsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K