diff --git a/erpnext/public/build.json b/erpnext/public/build.json
index 3d38aca..1bed541 100644
--- a/erpnext/public/build.json
+++ b/erpnext/public/build.json
@@ -2,8 +2,7 @@
 	"css/erpnext.css": [
 		"public/less/erpnext.less",
 		"public/scss/call_popup.scss",
-		"public/scss/point-of-sale.scss",
-		"public/scss/hierarchy_chart.scss"
+		"public/scss/point-of-sale.scss"
 	],
 	"js/erpnext-web.min.js": [
 		"public/js/website_utils.js",
@@ -37,7 +36,6 @@
 		"public/js/utils/dimension_tree_filter.js",
 		"public/js/telephony.js",
 		"public/js/templates/call_link.html",
-		"public/js/templates/node_card.html",
 		"public/js/bulk_transaction_processing.js"
 	],
 	"js/item-dashboard.min.js": [
@@ -62,10 +60,6 @@
 		"public/js/bank_reconciliation_tool/number_card.js",
 		"public/js/bank_reconciliation_tool/dialog_manager.js"
 	],
-	"js/hierarchy-chart.min.js": [
-		"public/js/hierarchy_chart/hierarchy_chart_desktop.js",
-		"public/js/hierarchy_chart/hierarchy_chart_mobile.js"
-	],
 	"js/e-commerce.min.js": [
 		"e_commerce/product_ui/views.js",
 		"e_commerce/product_ui/grid.js",
diff --git a/erpnext/public/js/hierarchy-chart.bundle.js b/erpnext/public/js/hierarchy-chart.bundle.js
deleted file mode 100644
index 0270313..0000000
--- a/erpnext/public/js/hierarchy-chart.bundle.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import "./hierarchy_chart/hierarchy_chart_desktop.js";
-import "./hierarchy_chart/hierarchy_chart_mobile.js";
-import "./templates/node_card.html";
diff --git a/erpnext/public/js/hierarchy_chart/hierarchy_chart_desktop.js b/erpnext/public/js/hierarchy_chart/hierarchy_chart_desktop.js
deleted file mode 100644
index a585aa6..0000000
--- a/erpnext/public/js/hierarchy_chart/hierarchy_chart_desktop.js
+++ /dev/null
@@ -1,608 +0,0 @@
-import html2canvas from 'html2canvas';
-erpnext.HierarchyChart = class {
-	/* Options:
-		- doctype
-		- wrapper: wrapper for the hierarchy view
-		- method:
-			- to get the data for each node
-			- this method should return id, name, title, image, and connections for each node
-	*/
-	constructor(doctype, wrapper, method) {
-		this.page = wrapper.page;
-		this.method = method;
-		this.doctype = doctype;
-
-		this.setup_page_style();
-		this.page.main.addClass('frappe-card');
-
-		this.nodes = {};
-		this.setup_node_class();
-	}
-
-	setup_page_style() {
-		this.page.main.css({
-			'min-height': '300px',
-			'max-height': '600px',
-			'overflow': 'auto',
-			'position': 'relative'
-		});
-	}
-
-	setup_node_class() {
-		let me = this;
-		this.Node = class {
-			constructor({
-				id, parent, parent_id, image, name, title, expandable, connections, is_root // eslint-disable-line
-			}) {
-				// to setup values passed via constructor
-				$.extend(this, arguments[0]);
-
-				this.expanded = 0;
-
-				me.nodes[this.id] = this;
-				me.make_node_element(this);
-
-				if (!me.all_nodes_expanded) {
-					me.setup_node_click_action(this);
-				}
-
-				me.setup_edit_node_action(this);
-			}
-		};
-	}
-
-	make_node_element(node) {
-		let node_card = frappe.render_template('node_card', {
-			id: node.id,
-			name: node.name,
-			title: node.title,
-			image: node.image,
-			parent: node.parent_id,
-			connections: node.connections,
-			is_mobile: false
-		});
-
-		node.parent.append(node_card);
-		node.$link = $(`[id="${node.id}"]`);
-	}
-
-	show() {
-		this.setup_actions();
-		if ($(`[data-fieldname="company"]`).length) return;
-		let me = this;
-
-		let company = this.page.add_field({
-			fieldtype: 'Link',
-			options: 'Company',
-			fieldname: 'company',
-			placeholder: __('Select Company'),
-			default: frappe.defaults.get_default('company'),
-			only_select: true,
-			reqd: 1,
-			change: () => {
-				me.company = undefined;
-				$('#hierarchy-chart-wrapper').remove();
-
-				if (company.get_value()) {
-					me.company = company.get_value();
-
-					// svg for connectors
-					me.make_svg_markers();
-					me.setup_hierarchy();
-					me.render_root_nodes();
-					me.all_nodes_expanded = false;
-				} else {
-					frappe.throw(__('Please select a company first.'));
-				}
-			}
-		});
-
-		company.refresh();
-		$(`[data-fieldname="company"]`).trigger('change');
-		$(`[data-fieldname="company"] .link-field`).css('z-index', 2);
-	}
-
-	setup_actions() {
-		let me = this;
-		this.page.clear_inner_toolbar();
-		this.page.add_inner_button(__('Export'), function() {
-			me.export_chart();
-		});
-
-		this.page.add_inner_button(__('Expand All'), function() {
-			me.load_children(me.root_node, true);
-			me.all_nodes_expanded = true;
-
-			me.page.remove_inner_button(__('Expand All'));
-			me.page.add_inner_button(__('Collapse All'), function() {
-				me.setup_hierarchy();
-				me.render_root_nodes();
-				me.all_nodes_expanded = false;
-
-				me.page.remove_inner_button(__('Collapse All'));
-				me.setup_actions();
-			});
-		});
-	}
-
-	export_chart() {
-		frappe.dom.freeze(__('Exporting...'));
-		this.page.main.css({
-			'min-height': '',
-			'max-height': '',
-			'overflow': 'visible',
-			'position': 'fixed',
-			'left': '0',
-			'top': '0'
-		});
-
-		$('.node-card').addClass('exported');
-
-		html2canvas(document.querySelector('#hierarchy-chart-wrapper'), {
-			scrollY: -window.scrollY,
-			scrollX: 0
-		}).then(function(canvas) {
-			// Export the canvas to its data URI representation
-			let dataURL = canvas.toDataURL('image/png');
-
-			// download the image
-			let a = document.createElement('a');
-			a.href = dataURL;
-			a.download = 'hierarchy_chart';
-			a.click();
-		}).finally(() => {
-			frappe.dom.unfreeze();
-		});
-
-		this.setup_page_style();
-		$('.node-card').removeClass('exported');
-	}
-
-	setup_hierarchy() {
-		if (this.$hierarchy)
-			this.$hierarchy.remove();
-
-		$(`#connectors`).empty();
-
-		// setup hierarchy
-		this.$hierarchy = $(
-			`<ul class="hierarchy">
-				<li class="root-level level">
-					<ul class="node-children"></ul>
-				</li>
-			</ul>`);
-
-		this.page.main
-			.find('#hierarchy-chart')
-			.empty()
-			.append(this.$hierarchy);
-
-		this.nodes = {};
-	}
-
-	make_svg_markers() {
-		$('#hierarchy-chart-wrapper').remove();
-
-		this.page.main.append(`
-			<div id="hierarchy-chart-wrapper">
-				<svg id="arrows" width="100%" height="100%">
-					<defs>
-						<marker id="arrowhead-active" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="6" markerHeight="6" orient="auto" fill="var(--blue-500)">
-							<path d="M 0 0 L 10 5 L 0 10 z"></path>
-						</marker>
-						<marker id="arrowhead-collapsed" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="6" markerHeight="6" orient="auto" fill="var(--blue-300)">
-							<path d="M 0 0 L 10 5 L 0 10 z"></path>
-						</marker>
-
-						<marker id="arrowstart-active" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="8" markerHeight="8" orient="auto" fill="var(--blue-500)">
-							<circle cx="4" cy="4" r="3.5" fill="white" stroke="var(--blue-500)"/>
-						</marker>
-						<marker id="arrowstart-collapsed" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="8" markerHeight="8" orient="auto" fill="var(--blue-300)">
-							<circle cx="4" cy="4" r="3.5" fill="white" stroke="var(--blue-300)"/>
-						</marker>
-					</defs>
-					<g id="connectors" fill="none">
-					</g>
-				</svg>
-				<div id="hierarchy-chart">
-				</div>
-			</div>`);
-	}
-
-	render_root_nodes(expanded_view=false) {
-		let me = this;
-
-		return frappe.call({
-			method: me.method,
-			args: {
-				company: me.company
-			}
-		}).then(r => {
-			if (r.message.length) {
-				let expand_node = undefined;
-				let node = undefined;
-
-				$.each(r.message, (_i, data) => {
-					if ($(`[id="${data.id}"]`).length)
-						return;
-
-					node = new me.Node({
-						id: data.id,
-						parent: $('<li class="child-node"></li>').appendTo(me.$hierarchy.find('.node-children')),
-						parent_id: undefined,
-						image: data.image,
-						name: data.name,
-						title: data.title,
-						expandable: true,
-						connections: data.connections,
-						is_root: true
-					});
-
-					if (!expand_node && data.connections)
-						expand_node = node;
-				});
-
-				me.root_node = expand_node;
-				if (!expanded_view) {
-					me.expand_node(expand_node);
-				}
-			}
-		});
-	}
-
-	expand_node(node) {
-		const is_sibling = this.selected_node && this.selected_node.parent_id === node.parent_id;
-		this.set_selected_node(node);
-		this.show_active_path(node);
-		this.collapse_previous_level_nodes(node);
-
-		// since the previous node collapses, all connections to that node need to be rebuilt
-		// if a sibling node is clicked, connections don't need to be rebuilt
-		if (!is_sibling) {
-			// rebuild outgoing connections
-			this.refresh_connectors(node.parent_id);
-
-			// rebuild incoming connections
-			let grandparent = $(`[id="${node.parent_id}"]`).attr('data-parent');
-			this.refresh_connectors(grandparent);
-		}
-
-		if (node.expandable && !node.expanded) {
-			return this.load_children(node);
-		}
-	}
-
-	collapse_node() {
-		if (this.selected_node.expandable) {
-			this.selected_node.$children.hide();
-			$(`path[data-parent="${this.selected_node.id}"]`).hide();
-			this.selected_node.expanded = false;
-		}
-	}
-
-	show_active_path(node) {
-		// mark node parent on active path
-		$(`[id="${node.parent_id}"]`).addClass('active-path');
-	}
-
-	load_children(node, deep=false) {
-		if (!deep) {
-			frappe.run_serially([
-				() => this.get_child_nodes(node.id),
-				(child_nodes) => this.render_child_nodes(node, child_nodes)
-			]);
-		} else {
-			frappe.run_serially([
-				() => frappe.dom.freeze(),
-				() => this.setup_hierarchy(),
-				() => this.render_root_nodes(true),
-				() => this.get_all_nodes(),
-				(data_list) => this.render_children_of_all_nodes(data_list),
-				() => frappe.dom.unfreeze()
-			]);
-		}
-	}
-
-	get_child_nodes(node_id) {
-		let me = this;
-		return new Promise(resolve => {
-			frappe.call({
-				method: me.method,
-				args: {
-					parent: node_id,
-					company: me.company
-				}
-			}).then(r => resolve(r.message));
-		});
-	}
-
-	render_child_nodes(node, child_nodes) {
-		const last_level = this.$hierarchy.find('.level:last').index();
-		const current_level = $(`[id="${node.id}"]`).parent().parent().parent().index();
-
-		if (last_level === current_level) {
-			this.$hierarchy.append(`
-				<li class="level"></li>
-			`);
-		}
-
-		if (!node.$children) {
-			node.$children = $('<ul class="node-children"></ul>')
-				.hide()
-				.appendTo(this.$hierarchy.find('.level:last'));
-
-			node.$children.empty();
-
-			if (child_nodes) {
-				$.each(child_nodes, (_i, data) => {
-					if (!$(`[id="${data.id}"]`).length) {
-						this.add_node(node, data);
-						setTimeout(() => {
-							this.add_connector(node.id, data.id);
-						}, 250);
-					}
-				});
-			}
-		}
-
-		node.$children.show();
-		$(`path[data-parent="${node.id}"]`).show();
-		node.expanded = true;
-	}
-
-	get_all_nodes() {
-		let me = this;
-		return new Promise(resolve => {
-			frappe.call({
-				method: 'erpnext.utilities.hierarchy_chart.get_all_nodes',
-				args: {
-					method: me.method,
-					company: me.company
-				},
-				callback: (r) => {
-					resolve(r.message);
-				}
-			});
-		});
-	}
-
-	render_children_of_all_nodes(data_list) {
-		let entry = undefined;
-		let node = undefined;
-
-		while (data_list.length) {
-			// to avoid overlapping connectors
-			entry = data_list.shift();
-			node = this.nodes[entry.parent];
-			if (node) {
-				this.render_child_nodes_for_expanded_view(node, entry.data);
-			} else if (data_list.length) {
-				data_list.push(entry);
-			}
-		}
-	}
-
-	render_child_nodes_for_expanded_view(node, child_nodes) {
-		node.$children = $('<ul class="node-children"></ul>');
-
-		const last_level = this.$hierarchy.find('.level:last').index();
-		const node_level = $(`[id="${node.id}"]`).parent().parent().parent().index();
-
-		if (last_level === node_level) {
-			this.$hierarchy.append(`
-				<li class="level"></li>
-			`);
-			node.$children.appendTo(this.$hierarchy.find('.level:last'));
-		} else {
-			node.$children.appendTo(this.$hierarchy.find('.level:eq(' + (node_level + 1) + ')'));
-		}
-
-		node.$children.hide().empty();
-
-		if (child_nodes) {
-			$.each(child_nodes, (_i, data) => {
-				this.add_node(node, data);
-				setTimeout(() => {
-					this.add_connector(node.id, data.id);
-				}, 250);
-			});
-		}
-
-		node.$children.show();
-		$(`path[data-parent="${node.id}"]`).show();
-		node.expanded = true;
-	}
-
-	add_node(node, data) {
-		return new this.Node({
-			id: data.id,
-			parent: $('<li class="child-node"></li>').appendTo(node.$children),
-			parent_id: node.id,
-			image: data.image,
-			name: data.name,
-			title: data.title,
-			expandable: data.expandable,
-			connections: data.connections,
-			children: undefined
-		});
-	}
-
-	add_connector(parent_id, child_id) {
-		// using pure javascript for better performance
-		const parent_node = document.getElementById(`${parent_id}`);
-		const child_node = document.getElementById(`${child_id}`);
-
-		let path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-
-		// we need to connect right side of the parent to the left side of the child node
-		const pos_parent_right = {
-			x: parent_node.offsetLeft + parent_node.offsetWidth,
-			y: parent_node.offsetTop + parent_node.offsetHeight / 2
-		};
-		const pos_child_left = {
-			x: child_node.offsetLeft - 5,
-			y: child_node.offsetTop + child_node.offsetHeight / 2
-		};
-
-		const connector = this.get_connector(pos_parent_right, pos_child_left);
-
-		path.setAttribute('d', connector);
-		this.set_path_attributes(path, parent_id, child_id);
-
-		document.getElementById('connectors').appendChild(path);
-	}
-
-	get_connector(pos_parent_right, pos_child_left) {
-		if (pos_parent_right.y === pos_child_left.y) {
-			// don't add arcs if it's a straight line
-			return "M" +
-			(pos_parent_right.x) + "," + (pos_parent_right.y) + " " +
-			"L"+
-			(pos_child_left.x) + "," + (pos_child_left.y);
-		} else {
-			let arc_1 = "";
-			let arc_2 = "";
-			let offset = 0;
-
-			if (pos_parent_right.y > pos_child_left.y) {
-				// if child is above parent on Y axis 1st arc is anticlocwise
-				// second arc is clockwise
-				arc_1 = "a10,10 1 0 0 10,-10 ";
-				arc_2 = "a10,10 0 0 1 10,-10 ";
-				offset = 10;
-			} else {
-				// if child is below parent on Y axis 1st arc is clockwise
-				// second arc is anticlockwise
-				arc_1 = "a10,10 0 0 1 10,10 ";
-				arc_2 = "a10,10 1 0 0 10,10 ";
-				offset = -10;
-			}
-
-			return "M" + (pos_parent_right.x) + "," + (pos_parent_right.y) + " " +
-				"L" +
-				(pos_parent_right.x + 40) + "," + (pos_parent_right.y) + " " +
-				arc_1 +
-				"L" +
-				(pos_parent_right.x + 50) + "," + (pos_child_left.y + offset) + " " +
-				arc_2 +
-				"L"+
-				(pos_child_left.x) + "," + (pos_child_left.y);
-		}
-	}
-
-	set_path_attributes(path, parent_id, child_id) {
-		path.setAttribute("data-parent", parent_id);
-		path.setAttribute("data-child", child_id);
-		const parent = $(`[id="${parent_id}"]`);
-
-		if (parent.hasClass('active')) {
-			path.setAttribute("class", "active-connector");
-			path.setAttribute("marker-start", "url(#arrowstart-active)");
-			path.setAttribute("marker-end", "url(#arrowhead-active)");
-		} else {
-			path.setAttribute("class", "collapsed-connector");
-			path.setAttribute("marker-start", "url(#arrowstart-collapsed)");
-			path.setAttribute("marker-end", "url(#arrowhead-collapsed)");
-		}
-	}
-
-	set_selected_node(node) {
-		// remove active class from the current node
-		if (this.selected_node)
-			this.selected_node.$link.removeClass('active');
-
-		// add active class to the newly selected node
-		this.selected_node = node;
-		node.$link.addClass('active');
-	}
-
-	collapse_previous_level_nodes(node) {
-		let node_parent = $(`[id="${node.parent_id}"]`);
-		let previous_level_nodes = node_parent.parent().parent().children('li');
-		let node_card = undefined;
-
-		previous_level_nodes.each(function() {
-			node_card = $(this).find('.node-card');
-
-			if (!node_card.hasClass('active-path')) {
-				node_card.addClass('collapsed');
-			}
-		});
-	}
-
-	refresh_connectors(node_parent) {
-		if (!node_parent) return;
-
-		$(`path[data-parent="${node_parent}"]`).remove();
-
-		frappe.run_serially([
-			() => this.get_child_nodes(node_parent),
-			(child_nodes) => {
-				if (child_nodes) {
-					$.each(child_nodes, (_i, data) => {
-						this.add_connector(node_parent, data.id);
-					});
-				}
-			}
-		]);
-	}
-
-	setup_node_click_action(node) {
-		let me = this;
-		let node_element = $(`[id="${node.id}"]`);
-
-		node_element.click(function() {
-			const is_sibling = me.selected_node.parent_id === node.parent_id;
-
-			if (is_sibling) {
-				me.collapse_node();
-			} else if (node_element.is(':visible')
-				&& (node_element.hasClass('collapsed') || node_element.hasClass('active-path'))) {
-				me.remove_levels_after_node(node);
-				me.remove_orphaned_connectors();
-			}
-
-			me.expand_node(node);
-		});
-	}
-
-	setup_edit_node_action(node) {
-		let node_element = $(`[id="${node.id}"]`);
-		let me = this;
-
-		node_element.find('.btn-edit-node').click(function() {
-			frappe.set_route('Form', me.doctype, node.id);
-		});
-	}
-
-	remove_levels_after_node(node) {
-		let level = $(`[id="${node.id}"]`).parent().parent().parent().index();
-
-		level = $('.hierarchy > li:eq('+ level + ')');
-		level.nextAll('li').remove();
-
-		let nodes = level.find('.node-card');
-		let node_object = undefined;
-
-		$.each(nodes, (_i, element) => {
-			node_object = this.nodes[element.id];
-			node_object.expanded = 0;
-			node_object.$children = undefined;
-		});
-
-		nodes.removeClass('collapsed active-path');
-	}
-
-	remove_orphaned_connectors() {
-		let paths = $('#connectors > path');
-		$.each(paths, (_i, path) => {
-			const parent = $(path).data('parent');
-			const child = $(path).data('child');
-
-			if ($(`[id="${parent}"]`).length && $(`[id="${child}"]`).length)
-				return;
-
-			$(path).remove();
-		});
-	}
-};
diff --git a/erpnext/public/js/hierarchy_chart/hierarchy_chart_mobile.js b/erpnext/public/js/hierarchy_chart/hierarchy_chart_mobile.js
deleted file mode 100644
index 52236e7..0000000
--- a/erpnext/public/js/hierarchy_chart/hierarchy_chart_mobile.js
+++ /dev/null
@@ -1,550 +0,0 @@
-erpnext.HierarchyChartMobile = class {
-	/* Options:
-		- doctype
-		- wrapper: wrapper for the hierarchy view
-		- method:
-			- to get the data for each node
-			- this method should return id, name, title, image, and connections for each node
-	*/
-	constructor(doctype, wrapper, method) {
-		this.page = wrapper.page;
-		this.method = method;
-		this.doctype = doctype;
-
-		this.page.main.css({
-			'min-height': '300px',
-			'max-height': '600px',
-			'overflow': 'auto',
-			'position': 'relative'
-		});
-		this.page.main.addClass('frappe-card');
-
-		this.nodes = {};
-		this.setup_node_class();
-	}
-
-	setup_node_class() {
-		let me = this;
-		this.Node = class {
-			constructor({
-				id, parent, parent_id, image, name, title, expandable, connections, is_root // eslint-disable-line
-			}) {
-				// to setup values passed via constructor
-				$.extend(this, arguments[0]);
-
-				this.expanded = 0;
-
-				me.nodes[this.id] = this;
-				me.make_node_element(this);
-				me.setup_node_click_action(this);
-				me.setup_edit_node_action(this);
-			}
-		};
-	}
-
-	make_node_element(node) {
-		let node_card = frappe.render_template('node_card', {
-			id: node.id,
-			name: node.name,
-			title: node.title,
-			image: node.image,
-			parent: node.parent_id,
-			connections: node.connections,
-			is_mobile: true
-		});
-
-		node.parent.append(node_card);
-		node.$link = $(`[id="${node.id}"]`);
-		node.$link.addClass('mobile-node');
-	}
-
-	show() {
-		let me = this;
-		if ($(`[data-fieldname="company"]`).length) return;
-
-		let company = this.page.add_field({
-			fieldtype: 'Link',
-			options: 'Company',
-			fieldname: 'company',
-			placeholder: __('Select Company'),
-			default: frappe.defaults.get_default('company'),
-			only_select: true,
-			reqd: 1,
-			change: () => {
-				me.company = undefined;
-
-				if (company.get_value() && me.company != company.get_value()) {
-					me.company = company.get_value();
-
-					// svg for connectors
-					me.make_svg_markers();
-
-					if (me.$sibling_group)
-						me.$sibling_group.remove();
-
-					// setup sibling group wrapper
-					me.$sibling_group = $(`<div class="sibling-group mt-4 mb-4"></div>`);
-					me.page.main.append(me.$sibling_group);
-
-					me.setup_hierarchy();
-					me.render_root_nodes();
-				}
-			}
-		});
-
-		company.refresh();
-		$(`[data-fieldname="company"]`).trigger('change');
-	}
-
-	make_svg_markers() {
-		$('#arrows').remove();
-
-		this.page.main.prepend(`
-			<svg id="arrows" width="100%" height="100%">
-				<defs>
-					<marker id="arrowhead-active" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="6" markerHeight="6" orient="auto" fill="var(--blue-500)">
-						<path d="M 0 0 L 10 5 L 0 10 z"></path>
-					</marker>
-					<marker id="arrowhead-collapsed" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="6" markerHeight="6" orient="auto" fill="var(--blue-300)">
-						<path d="M 0 0 L 10 5 L 0 10 z"></path>
-					</marker>
-
-					<marker id="arrowstart-active" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="8" markerHeight="8" orient="auto" fill="var(--blue-500)">
-						<circle cx="4" cy="4" r="3.5" fill="white" stroke="var(--blue-500)"/>
-					</marker>
-					<marker id="arrowstart-collapsed" viewBox="0 0 10 10" refX="3" refY="5" markerWidth="8" markerHeight="8" orient="auto" fill="var(--blue-300)">
-						<circle cx="4" cy="4" r="3.5" fill="white" stroke="var(--blue-300)"/>
-					</marker>
-				</defs>
-				<g id="connectors" fill="none">
-				</g>
-			</svg>`);
-	}
-
-	setup_hierarchy() {
-		$(`#connectors`).empty();
-		if (this.$hierarchy)
-			this.$hierarchy.remove();
-
-		if (this.$sibling_group)
-			this.$sibling_group.empty();
-
-		this.$hierarchy = $(
-			`<ul class="hierarchy-mobile">
-				<li class="root-level level"></li>
-			</ul>`);
-
-		this.page.main.append(this.$hierarchy);
-	}
-
-	render_root_nodes() {
-		let me = this;
-
-		frappe.call({
-			method: me.method,
-			args: {
-				company: me.company
-			},
-		}).then(r => {
-			if (r.message.length) {
-				let root_level = me.$hierarchy.find('.root-level');
-				root_level.empty();
-
-				$.each(r.message, (_i, data) => {
-					return new me.Node({
-						id: data.id,
-						parent: root_level,
-						parent_id: undefined,
-						image: data.image,
-						name: data.name,
-						title: data.title,
-						expandable: true,
-						connections: data.connections,
-						is_root: true
-					});
-				});
-			}
-		});
-	}
-
-	expand_node(node) {
-		const is_same_node = (this.selected_node && this.selected_node.id === node.id);
-		this.set_selected_node(node);
-		this.show_active_path(node);
-
-		if (this.$sibling_group) {
-			const sibling_parent = this.$sibling_group.find('.node-group').attr('data-parent');
-			if (node.parent_id !== undefined && node.parent_id != sibling_parent)
-				this.$sibling_group.empty();
-		}
-
-		if (!is_same_node) {
-			// since the previous/parent node collapses, all connections to that node need to be rebuilt
-			// rebuild outgoing connections of parent
-			this.refresh_connectors(node.parent_id, node.id);
-
-			// rebuild incoming connections of parent
-			let grandparent = $(`[id="${node.parent_id}"]`).attr('data-parent');
-			this.refresh_connectors(grandparent, node.parent_id);
-		}
-
-		if (node.expandable && !node.expanded) {
-			return this.load_children(node);
-		}
-	}
-
-	collapse_node() {
-		let node = this.selected_node;
-		if (node.expandable && node.$children) {
-			node.$children.hide();
-			node.expanded = 0;
-
-			// add a collapsed level to show the collapsed parent
-			// and a button beside it to move to that level
-			let node_parent = node.$link.parent();
-			node_parent.prepend(
-				`<div class="collapsed-level d-flex flex-row"></div>`
-			);
-
-			node_parent
-				.find('.collapsed-level')
-				.append(node.$link);
-
-			frappe.run_serially([
-				() => this.get_child_nodes(node.parent_id, node.id),
-				(child_nodes) => this.get_node_group(child_nodes, node.parent_id),
-				(node_group) => node_parent.find('.collapsed-level').append(node_group),
-				() => this.setup_node_group_action()
-			]);
-		}
-	}
-
-	show_active_path(node) {
-		// mark node parent on active path
-		$(`[id="${node.parent_id}"]`).addClass('active-path');
-	}
-
-	load_children(node) {
-		frappe.run_serially([
-			() => this.get_child_nodes(node.id),
-			(child_nodes) => this.render_child_nodes(node, child_nodes)
-		]);
-	}
-
-	get_child_nodes(node_id, exclude_node=null) {
-		let me = this;
-		return new Promise(resolve => {
-			frappe.call({
-				method: me.method,
-				args: {
-					parent: node_id,
-					company: me.company,
-					exclude_node: exclude_node
-				}
-			}).then(r => resolve(r.message));
-		});
-	}
-
-	render_child_nodes(node, child_nodes) {
-		if (!node.$children) {
-			node.$children = $('<ul class="node-children"></ul>')
-				.hide()
-				.appendTo(node.$link.parent());
-
-			node.$children.empty();
-
-			if (child_nodes) {
-				$.each(child_nodes, (_i, data) => {
-					this.add_node(node, data);
-					$(`[id="${data.id}"]`).addClass('active-child');
-
-					setTimeout(() => {
-						this.add_connector(node.id, data.id);
-					}, 250);
-				});
-			}
-		}
-
-		node.$children.show();
-		node.expanded = 1;
-	}
-
-	add_node(node, data) {
-		var $li = $('<li class="child-node"></li>');
-
-		return new this.Node({
-			id: data.id,
-			parent: $li.appendTo(node.$children),
-			parent_id: node.id,
-			image: data.image,
-			name: data.name,
-			title: data.title,
-			expandable: data.expandable,
-			connections: data.connections,
-			children: undefined
-		});
-	}
-
-	add_connector(parent_id, child_id) {
-		const parent_node = document.getElementById(`${parent_id}`);
-		const child_node = document.getElementById(`${child_id}`);
-
-		const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
-
-		let connector = undefined;
-
-		if ($(`[id="${parent_id}"]`).hasClass('active')) {
-			connector = this.get_connector_for_active_node(parent_node, child_node);
-		} else if ($(`[id="${parent_id}"]`).hasClass('active-path')) {
-			connector = this.get_connector_for_collapsed_node(parent_node, child_node);
-		}
-
-		path.setAttribute('d', connector);
-		this.set_path_attributes(path, parent_id, child_id);
-
-		document.getElementById('connectors').appendChild(path);
-	}
-
-	get_connector_for_active_node(parent_node, child_node) {
-		// we need to connect the bottom left of the parent to the left side of the child node
-		let pos_parent_bottom = {
-			x: parent_node.offsetLeft + 20,
-			y: parent_node.offsetTop + parent_node.offsetHeight
-		};
-		let pos_child_left = {
-			x: child_node.offsetLeft - 5,
-			y: child_node.offsetTop + child_node.offsetHeight / 2
-		};
-
-		let connector =
-			"M" +
-			(pos_parent_bottom.x) + "," + (pos_parent_bottom.y) + " " +
-			"L" +
-			(pos_parent_bottom.x) + "," + (pos_child_left.y - 10) + " " +
-			"a10,10 1 0 0 10,10 " +
-			"L" +
-			(pos_child_left.x) + "," + (pos_child_left.y);
-
-		return connector;
-	}
-
-	get_connector_for_collapsed_node(parent_node, child_node) {
-		// we need to connect the bottom left of the parent to the top left of the child node
-		let pos_parent_bottom = {
-			x: parent_node.offsetLeft + 20,
-			y: parent_node.offsetTop + parent_node.offsetHeight
-		};
-		let pos_child_top = {
-			x: child_node.offsetLeft + 20,
-			y: child_node.offsetTop
-		};
-
-		let connector =
-			"M" +
-			(pos_parent_bottom.x) + "," + (pos_parent_bottom.y) + " " +
-			"L" +
-			(pos_child_top.x) + "," + (pos_child_top.y);
-
-		return connector;
-	}
-
-	set_path_attributes(path, parent_id, child_id) {
-		path.setAttribute("data-parent", parent_id);
-		path.setAttribute("data-child", child_id);
-		const parent = $(`[id="${parent_id}"]`);
-
-		if (parent.hasClass('active')) {
-			path.setAttribute("class", "active-connector");
-			path.setAttribute("marker-start", "url(#arrowstart-active)");
-			path.setAttribute("marker-end", "url(#arrowhead-active)");
-		} else if (parent.hasClass('active-path')) {
-			path.setAttribute("class", "collapsed-connector");
-		}
-	}
-
-	set_selected_node(node) {
-		// remove .active class from the current node
-		if (this.selected_node)
-			this.selected_node.$link.removeClass('active');
-
-		// add active class to the newly selected node
-		this.selected_node = node;
-		node.$link.addClass('active');
-	}
-
-	setup_node_click_action(node) {
-		let me = this;
-		let node_element = $(`[id="${node.id}"]`);
-
-		node_element.click(function() {
-			let el = undefined;
-
-			if (node.is_root) {
-				el = $(this).detach();
-				me.$hierarchy.empty();
-				$(`#connectors`).empty();
-				me.add_node_to_hierarchy(el, node);
-			} else if (node_element.is(':visible') && node_element.hasClass('active-path')) {
-				me.remove_levels_after_node(node);
-				me.remove_orphaned_connectors();
-			} else {
-				el = $(this).detach();
-				me.add_node_to_hierarchy(el, node);
-				me.collapse_node();
-			}
-
-			me.expand_node(node);
-		});
-	}
-
-	setup_edit_node_action(node) {
-		let node_element = $(`[id="${node.id}"]`);
-		let me = this;
-
-		node_element.find('.btn-edit-node').click(function() {
-			frappe.set_route('Form', me.doctype, node.id);
-		});
-	}
-
-	setup_node_group_action() {
-		let me = this;
-
-		$('.node-group').on('click', function() {
-			let parent = $(this).attr('data-parent');
-			if (parent === 'undefined') {
-				me.setup_hierarchy();
-				me.render_root_nodes();
-			} else {
-				me.expand_sibling_group_node(parent);
-			}
-		});
-	}
-
-	add_node_to_hierarchy(node_element, node) {
-		this.$hierarchy.append(`<li class="level"></li>`);
-		node_element.removeClass('active-child active-path');
-		this.$hierarchy.find('.level:last').append(node_element);
-
-		let node_object = this.nodes[node.id];
-		node_object.expanded = 0;
-		node_object.$children = undefined;
-		this.nodes[node.id] = node_object;
-	}
-
-	get_node_group(nodes, parent, collapsed=true) {
-		let limit = 2;
-		const display_nodes = nodes.slice(0, limit);
-		const extra_nodes = nodes.slice(limit);
-
-		let html = display_nodes.map(node =>
-			this.get_avatar(node)
-		).join('');
-
-		if (extra_nodes.length === 1) {
-			let node = extra_nodes[0];
-			html += this.get_avatar(node);
-		} else if (extra_nodes.length > 1) {
-			html = `
-				${html}
-				<span class="avatar avatar-small">
-					<div class="avatar-frame standard-image avatar-extra-count"
-						title="${extra_nodes.map(node => node.name).join(', ')}">
-						+${extra_nodes.length}
-					</div>
-				</span>
-			`;
-		}
-
-		if (html) {
-			const $node_group =
-				$(`<div class="node-group card cursor-pointer" data-parent=${parent}>
-					<div class="avatar-group right overlap">
-						${html}
-					</div>
-				</div>`);
-
-			if (collapsed)
-				$node_group.addClass('collapsed');
-
-			return $node_group;
-		}
-
-		return null;
-	}
-
-	get_avatar(node) {
-		return `<span class="avatar avatar-small" title="${node.name}">
-			<span class="avatar-frame" src=${node.image} style="background-image: url(${node.image})"></span>
-		</span>`;
-	}
-
-	expand_sibling_group_node(parent) {
-		let node_object = this.nodes[parent];
-		let node = node_object.$link;
-
-		node.removeClass('active-child active-path');
-		node_object.expanded = 0;
-		node_object.$children = undefined;
-		this.nodes[node.id] = node_object;
-
-		// show parent's siblings and expand parent node
-		frappe.run_serially([
-			() => this.get_child_nodes(node_object.parent_id, node_object.id),
-			(child_nodes) => this.get_node_group(child_nodes, node_object.parent_id, false),
-			(node_group) => {
-				if (node_group)
-					this.$sibling_group.empty().append(node_group);
-			},
-			() => this.setup_node_group_action(),
-			() => this.reattach_and_expand_node(node, node_object)
-		]);
-	}
-
-	reattach_and_expand_node(node, node_object) {
-		var el = node.detach();
-
-		this.$hierarchy.empty().append(`
-			<li class="level"></li>
-		`);
-		this.$hierarchy.find('.level').append(el);
-		$(`#connectors`).empty();
-		this.expand_node(node_object);
-	}
-
-	remove_levels_after_node(node) {
-		let level = $(`[id="${node.id}"]`).parent().parent().index();
-
-		level = $('.hierarchy-mobile > li:eq('+ level + ')');
-		level.nextAll('li').remove();
-
-		let node_object = this.nodes[node.id];
-		let current_node = level.find(`[id="${node.id}"]`).detach();
-
-		current_node.removeClass('active-child active-path');
-
-		node_object.expanded = 0;
-		node_object.$children = undefined;
-
-		level.empty().append(current_node);
-	}
-
-	remove_orphaned_connectors() {
-		let paths = $('#connectors > path');
-		$.each(paths, (_i, path) => {
-			const parent = $(path).data('parent');
-			const child = $(path).data('child');
-
-			if ($(`[id="${parent}"]`).length && $(`[id="${child}"]`).length)
-				return;
-
-			$(path).remove();
-		});
-	}
-
-	refresh_connectors(node_parent, node_id) {
-		if (!node_parent) return;
-
-		$(`path[data-parent="${node_parent}"]`).remove();
-		this.add_connector(node_parent, node_id);
-	}
-};
diff --git a/erpnext/public/js/templates/node_card.html b/erpnext/public/js/templates/node_card.html
deleted file mode 100644
index 4cb6ee0..0000000
--- a/erpnext/public/js/templates/node_card.html
+++ /dev/null
@@ -1,33 +0,0 @@
-<div class="node-card card cursor-pointer" id="{%= id %}" data-parent="{%= parent %}">
-	<div class="node-meta d-flex flex-row">
-		<div class="mr-3">
-			<span class="avatar node-image" title="{{ name }}">
-				<span class="avatar-frame" src={{image}} style="background-image: url(\'{%= image %}\')"></span>
-			</span>
-		</div>
-		<div>
-			<div class="node-name d-flex flex-row mb-1">
-				<span class="ellipsis">{{ name }}</span>
-				<div class="btn-xs btn-edit-node d-flex flex-row">
-					<a class="node-edit-icon">{{ frappe.utils.icon("edit", "xs") }}</a>
-					<span class="edit-chart-node text-xs">{{ __("Edit") }}</span>
-				</div>
-			</div>
-			<div class="node-info d-flex flex-row mb-1">
-				<div class="node-title text-muted ellipsis">{{ title }}</div>
-
-				{% if is_mobile %}
-					<div class="node-connections text-muted ml-2 ellipsis">
-						· {{ connections }} <span class="fa fa-level-down"></span>
-					</div>
-				{% else %}
-					{% if connections == 1 %}
-						<div class="node-connections text-muted ml-2 ellipsis">· {{ connections }} Connection</div>
-					{% else %}
-						<div class="node-connections text-muted ml-2 ellipsis">· {{ connections }} Connections</div>
-					{% endif %}
-				{% endif %}
-			</div>
-		</div>
-	</div>
-</div>
diff --git a/erpnext/public/scss/erpnext.bundle.scss b/erpnext/public/scss/erpnext.bundle.scss
index b68ddf5..d3313c7 100644
--- a/erpnext/public/scss/erpnext.bundle.scss
+++ b/erpnext/public/scss/erpnext.bundle.scss
@@ -1,4 +1,3 @@
 @import "./erpnext";
 @import "./call_popup";
 @import "./point-of-sale";
-@import "./hierarchy_chart";
diff --git a/erpnext/public/scss/hierarchy_chart.scss b/erpnext/public/scss/hierarchy_chart.scss
deleted file mode 100644
index 57d5e84..0000000
--- a/erpnext/public/scss/hierarchy_chart.scss
+++ /dev/null
@@ -1,313 +0,0 @@
-.node-card {
-	background: white;
-	stroke: 1px solid var(--gray-200);
-	box-shadow: var(--shadow-base);
-	border-radius: 0.5rem;
-	padding: 0.75rem;
-	margin-left: 3rem;
-	width: 18rem;
-	overflow: hidden;
-
-	.btn-edit-node {
-		display: none;
-	}
-
-	.edit-chart-node {
-		display: none;
-	}
-
-	.node-edit-icon {
-		display: none;
-	}
-}
-
-.node-card.exported {
-	box-shadow: none
-}
-
-.node-image {
-	width: 3.0rem;
-	height: 3.0rem;
-}
-
-.node-name {
-	font-size: 1rem;
-	line-height: 1.72;
-}
-
-.node-title {
-	font-size: 0.75rem;
-	line-height: 1.35;
-}
-
-.node-info {
-	width: 12.7rem;
-}
-
-.node-connections {
-	font-size: 0.75rem;
-	line-height: 1.35;
-}
-
-.node-card.active {
-	background: var(--blue-50);
-	border: 1px solid var(--blue-500);
-	box-shadow: var(--shadow-md);
-	border-radius: 0.5rem;
-	padding: 0.75rem;
-	width: 18rem;
-
-	.btn-edit-node {
-		display: flex;
-		background: var(--blue-100);
-		color: var(--blue-500);
-		padding: .25rem .5rem;
-		font-size: .75rem;
-		justify-content: center;
-		box-shadow: var(--shadow-sm);
-		margin-left: auto;
-	}
-
-	.edit-chart-node {
-		display: block;
-		margin-right: 0.25rem;
-	}
-
-	.node-edit-icon {
-		display: block;
-	}
-
-	.node-edit-icon > .icon{
-		stroke: var(--blue-500);
-	}
-
-	.node-name {
-		align-items: center;
-		justify-content: space-between;
-		margin-bottom: 2px;
-		width: 12.2rem;
-	}
-}
-
-.node-card.active-path {
-	background: var(--blue-100);
-	border: 1px solid var(--blue-300);
-	box-shadow: var(--shadow-sm);
-	border-radius: 0.5rem;
-	padding: 0.75rem;
-	width: 15rem;
-	height: 3.0rem;
-
-	.btn-edit-node {
-		display: none !important;
-	}
-
-	.edit-chart-node {
-		display: none;
-	}
-
-	.node-edit-icon {
-		display: none;
-	}
-
-	.node-info {
-		display: none;
-	}
-
-	.node-title {
-		display: none;
-	}
-
-	.node-connections {
-		display: none;
-	}
-
-	.node-name {
-		font-size: 0.85rem;
-		line-height: 1.35;
-	}
-
-	.node-image {
-		width: 1.5rem;
-		height: 1.5rem;
-	}
-
-	.node-meta {
-		align-items: baseline;
-	}
-}
-
-.node-card.collapsed {
-	background: white;
-	stroke: 1px solid var(--gray-200);
-	box-shadow: var(--shadow-sm);
-	border-radius: 0.5rem;
-	padding: 0.75rem;
-	width: 15rem;
-	height: 3.0rem;
-
-	.btn-edit-node {
-		display: none !important;
-	}
-
-	.edit-chart-node {
-		display: none;
-	}
-
-	.node-edit-icon {
-		display: none;
-	}
-
-	.node-info {
-		display: none;
-	}
-
-	.node-title {
-		display: none;
-	}
-
-	.node-connections {
-		display: none;
-	}
-
-	.node-name {
-		font-size: 0.85rem;
-		line-height: 1.35;
-	}
-
-	.node-image {
-		width: 1.5rem;
-		height: 1.5rem;
-	}
-
-	.node-meta {
-		align-items: baseline;
-	}
-}
-
-// horizontal hierarchy tree view
-#hierarchy-chart-wrapper {
-	padding-top: 30px;
-
-	#arrows {
-		margin-top: -80px;
-	}
-}
-
-.hierarchy {
-	display: flex;
-}
-
-.hierarchy li {
-	list-style-type: none;
-}
-
-.child-node {
-	margin: 0px 0px 16px 0px;
-}
-
-.hierarchy, .hierarchy-mobile {
-	.level {
-		margin-right: 8px;
-		align-items: flex-start;
-		flex-direction: column;
-	}
-}
-
-#arrows {
-	position: absolute;
-	overflow: visible;
-}
-
-.active-connector {
-	stroke: var(--blue-500);
-}
-
-.collapsed-connector {
-	stroke: var(--blue-300);
-}
-
-// mobile
-
-.hierarchy-mobile {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	padding-top: 10px;
-	padding-left: 0px;
-}
-
-.hierarchy-mobile li {
-	list-style-type: none;
-	display: flex;
-	flex-direction: column;
-	align-items: flex-end;
-}
-
-.mobile-node {
-	margin-left: 0;
-}
-
-.mobile-node.active-path {
-	width: 12.25rem;
-}
-
-.active-child {
-	width: 15.5rem;
-}
-
-.mobile-node .node-connections {
-	max-width: 80px;
-}
-
-.hierarchy-mobile .node-children {
-	margin-top: 16px;
-}
-
-.root-level .node-card {
-	margin: 0 0 16px;
-}
-
-// node group
-
-.collapsed-level {
-	margin-bottom: 16px;
-	width: 18rem;
-}
-
-.node-group {
-	background: white;
-	border: 1px solid var(--gray-300);
-	box-shadow: var(--shadow-sm);
-	border-radius: 0.5rem;
-	padding: 0.75rem;
-	width: 18rem;
-	height: 3rem;
-	overflow: hidden;
-	align-items: center;
-}
-
-.node-group .avatar-group {
-	margin-left: 0px;
-}
-
-.node-group .avatar-extra-count {
-	background-color: var(--blue-100);
-	color: var(--blue-500);
-}
-
-.node-group .avatar-frame {
-	width: 1.5rem;
-	height: 1.5rem;
-}
-
-.node-group.collapsed {
-	width: 5rem;
-	margin-left: 12px;
-}
-
-.sibling-group {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-}