feat: Organizational Chart
diff --git a/erpnext/public/build.json b/erpnext/public/build.json
index 7a3cb83..d3ebcdf 100644
--- a/erpnext/public/build.json
+++ b/erpnext/public/build.json
@@ -3,7 +3,8 @@
"public/less/erpnext.less",
"public/less/hub.less",
"public/scss/call_popup.scss",
- "public/scss/point-of-sale.scss"
+ "public/scss/point-of-sale.scss",
+ "public/scss/organizational_chart.scss"
],
"css/marketplace.css": [
"public/less/hub.less"
diff --git a/erpnext/public/scss/organizational_chart.scss b/erpnext/public/scss/organizational_chart.scss
new file mode 100644
index 0000000..62f6ddc
--- /dev/null
+++ b/erpnext/public/scss/organizational_chart.scss
@@ -0,0 +1,209 @@
+.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;
+
+ .btn-edit-node {
+ display: none;
+ }
+
+ .edit-chart-node {
+ display: none;
+ }
+
+ .node-edit-icon {
+ display: 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-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;
+ height: 5rem;
+
+ .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);
+ }
+
+ .edit-chart-node {
+ display: block;
+ }
+
+ .node-edit-icon {
+ display: block;
+ }
+
+ .edit-chart-node {
+ margin-right: 0.25rem;
+ }
+
+ .node-edit-icon > .icon{
+ stroke: var(--blue-500);
+ }
+
+ .node-name {
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 2px;
+ }
+}
+
+.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 {
+ display: flex;
+ padding-top: 30px;
+}
+
+.hierarchy li {
+ list-style-type: none;
+}
+
+.child-node {
+ margin: 0px 0px 16px 0px;
+}
+
+.level {
+ margin-right: 8px;
+}
+
+#arrows {
+ position: absolute;
+}
+
+.active-connector {
+ stroke: var(--blue-500);
+}
+
+.collapsed-connector {
+ stroke: var(--blue-300);
+}