@paro.io/expert-shared-components 1.14.33 → 1.14.35

package/lib/components/OrganizationChart/OrganizationChart.js

@@ -1,312 +1,312 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.OrganizationChart = void 0;
-const react_1 = __importStar(require("react"));
-const core_1 = require("@material-ui/core");
-const Dialog_1 = __importDefault(require("@material-ui/core/Dialog"));
-const Close_1 = __importDefault(require("@material-ui/icons/Close"));
-const cdn_1 = require("../shared/constants/cdn");
-const styled_components_1 = __importDefault(require("styled-components"));
-const defaultAvatar = cdn_1.CDN_URL + 'defaultAvatar.png';
-const ProfilePhotoPreview = styled_components_1.default.img `
-  height: 86px;
-  width: 86px;
-  border: 1px solid #e4e5e4;
-  border-radius: 50%;
-  object-fit: cover;
-  object-position: top;
-`;
-const CustomDialog = (0, core_1.styled)(Dialog_1.default)(({ theme }) => ({
-    '& .MuiDialog-paper': {
-        backgroundColor: '#060821',
-        width: '50vw',
-        maxWidth: '80vw',
-        height: '80vh',
-        justifyContent: 'center',
-        alignItems: 'center',
-        overflow: 'hidden',
-        [theme.breakpoints.down('md')]: {
-            width: '100vw',
-            maxWidth: '100vw',
-        },
-    }
-}));
-const InformationRow = ({ label, value }) => {
-    return (react_1.default.createElement(core_1.Grid, { item: true, container: true, justify: "flex-start", alignItems: "center" },
-        react_1.default.createElement(core_1.Box, { style: {
-                backgroundColor: '#248384',
-                color: 'white',
-                textAlign: 'center',
-                margin: '2px',
-                padding: '4px',
-                width: '120px',
-                borderRadius: '6px',
-                fontSize: '10px'
-            } },
-            react_1.default.createElement("b", null, label)),
-        react_1.default.createElement(core_1.Box, { ml: 0.5 }, value !== null && value !== void 0 ? value : 'N/A')));
-};
-const EmployeeCard = ({ name, role, experience, location, imageUrl }) => {
-    return (react_1.default.createElement(core_1.Card, { style: {
-            backgroundColor: '#d9efef',
-            borderRadius: '12px',
-            width: 'max-content',
-            padding: '4px 20px',
-            margin: '8px'
-        } },
-        imageUrl && (react_1.default.createElement(core_1.Grid, { item: true, justify: "center", style: { display: 'flex', justifyContent: 'center' } },
-            react_1.default.createElement(ProfilePhotoPreview, { src: imageUrl || defaultAvatar, alt: 'Profile Photo' }))),
-        react_1.default.createElement(core_1.Typography, { variant: "subtitle2", align: "center" },
-            react_1.default.createElement("b", null, name)),
-        react_1.default.createElement(core_1.Grid, { item: true, justify: "center", alignItems: "center" },
-            react_1.default.createElement(InformationRow, { label: "Role", value: role }),
-            react_1.default.createElement(InformationRow, { label: "Experience", value: experience }),
-            react_1.default.createElement(InformationRow, { label: "Location", value: location }))));
-};
-const HorizontalLine = () => (react_1.default.createElement(core_1.Grid, { item: true, alignContent: "center", style: {
-        position: 'relative',
-        background: '#FFFFFF',
-        width: 'calc(105% - 1px)',
-        height: '2px',
-        top: 0,
-        right: 0,
-        left: '50%',
-        transform: 'translateX(0)'
-    } }));
-const VerticalLine = ({ isBottomLine }) => (react_1.default.createElement(core_1.Grid, { item: true, style: {
-        position: 'relative',
-        background: '#FFFFFF',
-        width: '2px',
-        height: '30px',
-        top: 0,
-        left: '50%',
-        transform: 'translateX(-50%)'
-    } }, !isBottomLine && react_1.default.createElement("div", { style: {
-        content: '',
-        position: 'absolute',
-        bottom: 0,
-        left: '50%',
-        transform: 'translateX(-50%)',
-        borderStyle: 'solid',
-        borderWidth: '6px 6px 0 6px',
-        borderColor: '#FFFFFF transparent transparent transparent'
-    } })));
-const parseServices = (services) => {
-    var _a;
-    const uniqueArray = (_a = Array.from(new Set(services === null || services === void 0 ? void 0 : services.map(item => JSON.stringify(item))))) === null || _a === void 0 ? void 0 : _a.map(str => JSON.parse(str));
-    return uniqueArray;
-};
-const checkEmployeeLocation = (data) => {
-    let hasOffshore = false;
-    let hasOnshore = false;
-    data === null || data === void 0 ? void 0 : data.forEach(employee => {
-        var _a;
-        const location = (_a = employee === null || employee === void 0 ? void 0 : employee.employeeLocation) === null || _a === void 0 ? void 0 : _a.toLowerCase();
-        if (location === null || location === void 0 ? void 0 : location.includes("offshore")) {
-            hasOffshore = true;
-        }
-        if (location === null || location === void 0 ? void 0 : location.includes("onshore")) {
-            hasOnshore = true;
-        }
-    });
-    if (hasOffshore && hasOnshore) {
-        return "Offshore & Onshore Team";
-    }
-    else if (hasOffshore) {
-        return "Offshore Team";
-    }
-    else if (hasOnshore) {
-        return "Onshore Team";
-    }
-    else {
-        return "none";
-    }
-};
-const getTotalYearsWithFirm = (data) => {
-    return data === null || data === void 0 ? void 0 : data.reduce((total, employee) => total + employee.yearsWithFirm, 0);
-};
-const OrganizationChart = ({ openModal, setOpenModal, expertFirms, firstName, lastName, imageUrl, primaryServiceLine, city, stateAbbreviation, paroTenure, isPublicProfile }) => {
-    var _a, _b;
-    const services = (_a = expertFirms === null || expertFirms === void 0 ? void 0 : expertFirms.expertFirmClientReferences) === null || _a === void 0 ? void 0 : _a.flatMap((obj) => { var _a; return (_a = obj === null || obj === void 0 ? void 0 : obj.services) !== null && _a !== void 0 ? _a : []; });
-    const uniqueServices = parseServices(services);
-    const employeeLocation = checkEmployeeLocation(expertFirms === null || expertFirms === void 0 ? void 0 : expertFirms.expertFirmEmployees);
-    const getTotalYears = getTotalYearsWithFirm(expertFirms === null || expertFirms === void 0 ? void 0 : expertFirms.expertFirmEmployees);
-    let firmMemberCounter = 1;
-    const groupedEmployees = (_b = expertFirms === null || expertFirms === void 0 ? void 0 : expertFirms.expertFirmEmployees) === null || _b === void 0 ? void 0 : _b.reduce((acc, obj) => {
-        if (!acc[obj.level]) {
-            acc[obj.level] = [];
-        }
-        acc[obj.level].push(obj);
-        return acc;
-    }, {});
-    const [scale, setScale] = (0, react_1.useState)((groupedEmployees === null || groupedEmployees === void 0 ? void 0 : groupedEmployees.length) >= 2 ? 0.3 : 0.5); // checking no of levels & zooming out to fit content
-    const [position, setPosition] = (0, react_1.useState)({ x: 0, y: (groupedEmployees === null || groupedEmployees === void 0 ? void 0 : groupedEmployees.length) >= 2 ? -100 : 0 }); // negative value to align content maximum zoom out and center
-    const [isDragging, setIsDragging] = (0, react_1.useState)(false);
-    const [lastMousePos, setLastMousePos] = (0, react_1.useState)(null);
-    const sortedLevels = Object.keys(groupedEmployees || {})
-        .map(Number)
-        .sort((a, b) => a - b);
-    const MAX_ZOOM_IN = 5;
-    const MAX_ZOOM_OUT = 0.2;
-    const CONTENT_SIZE = 10;
-    // to center the content
-    const centerContent = (newScale) => {
-        const centerX = (CONTENT_SIZE * newScale) / 2;
-        const centerY = (CONTENT_SIZE * newScale) / 2;
-        setPosition({ x: centerX, y: centerY });
-    };
-    const handleWheel = (event) => {
-        event.preventDefault();
-        const zoomFactor = 0.1;
-        if (event.deltaY < 0) {
-            setScale((prev) => Math.min(prev + zoomFactor, MAX_ZOOM_IN));
-        }
-        else {
-            setScale((prev) => {
-                const newScale = Math.max(prev - zoomFactor, MAX_ZOOM_OUT);
-                if (newScale === MAX_ZOOM_OUT) {
-                    centerContent(newScale); // Center content when zoomed out fully
-                }
-                return newScale;
-            });
-        }
-    };
-    const handleMouseDown = (event) => {
-        setIsDragging(true);
-        setLastMousePos({ x: event.clientX, y: event.clientY });
-    };
-    const handleMouseMove = (event) => {
-        if (isDragging && lastMousePos) {
-            const dx = event.clientX - lastMousePos.x;
-            const dy = event.clientY - lastMousePos.y;
-            setPosition((prev) => ({
-                x: prev.x + dx,
-                y: prev.y + dy,
-            }));
-            setLastMousePos({ x: event.clientX, y: event.clientY });
-        }
-    };
-    const handleMouseUp = () => {
-        setIsDragging(false);
-    };
-    // to center the content on double click
-    const handleDoubleClick = () => {
-        const newScale = 1;
-        setScale(newScale);
-        centerContent(newScale);
-    };
-    const highlightsExists = ((expertFirms === null || expertFirms === void 0 ? void 0 : expertFirms.employeeCount) > 0 || employeeLocation !== 'none' || getTotalYears > 0);
-    const uniqueServicesExists = (uniqueServices === null || uniqueServices === void 0 ? void 0 : uniqueServices.length) > 1;
-    return (react_1.default.createElement(CustomDialog, { open: openModal, onClose: () => setOpenModal(false), fullScreen: true, scroll: 'paper' },
-        react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: "row", justify: "space-between", alignItems: "center" },
-                react_1.default.createElement(core_1.Box, { p: 2 },
-                    react_1.default.createElement(core_1.Typography, { variant: "subtitle1" },
-                        react_1.default.createElement(core_1.Box, { style: { color: 'white' } }, "Organizational Structure & Services")),
-                    react_1.default.createElement(core_1.Typography, { variant: "caption" },
-                        react_1.default.createElement(core_1.Box, { style: { color: 'white' } }, "See what services the organization offers and where they're located"))),
-                react_1.default.createElement(core_1.Box, { style: { alignSelf: 'flex-end' } },
-                    react_1.default.createElement(core_1.IconButton, { onClick: () => setOpenModal(false) },
-                        react_1.default.createElement(core_1.Box, { style: { color: 'white' } },
-                            react_1.default.createElement(Close_1.default, null))))),
-            react_1.default.createElement(core_1.DialogContent, { onWheel: handleWheel, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onDoubleClick: handleDoubleClick, style: {
-                    overflow: 'hidden',
-                    width: '100%',
-                    height: '100vh',
-                    position: 'relative',
-                } },
-                react_1.default.createElement("div", { onMouseDown: handleMouseDown, style: {
-                        transform: `translate(${position.x}px, ${position.y}px) scale(${scale})`,
-                        transformOrigin: 'center',
-                        transition: 'transform 0.1s',
-                        width: '100%',
-                        height: '100%',
-                        position: 'relative',
-                        cursor: isDragging ? 'grabbing' : 'grab',
-                        userSelect: 'none',
-                    } },
-                    isPublicProfile ?
-                        react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: "row", justify: "flex-start", alignItems: 'center', wrap: 'nowrap', spacing: 4, style: { width: '100%' } },
-                            react_1.default.createElement(core_1.Box, { style: { width: '25%' } }, highlightsExists &&
-                                react_1.default.createElement(core_1.Box, null,
-                                    react_1.default.createElement(core_1.Grid, { item: true },
-                                        react_1.default.createElement(core_1.Typography, { variant: "subtitle1" },
-                                            react_1.default.createElement(core_1.Box, { style: { color: 'white' } }, "Highlights:")),
-                                        react_1.default.createElement("ul", null,
-                                            (expertFirms === null || expertFirms === void 0 ? void 0 : expertFirms.employeeCount) > 0 && react_1.default.createElement("li", { style: { color: 'white' } },
-                                                react_1.default.createElement(core_1.Typography, { variant: "caption" },
-                                                    react_1.default.createElement(core_1.Box, { style: { color: 'white', } }, expertFirms === null || expertFirms === void 0 ? void 0 :
-                                                        expertFirms.employeeCount,
-                                                        " Team Members"))),
-                                            employeeLocation !== 'none' && react_1.default.createElement("li", { style: { color: 'white' } },
-                                                react_1.default.createElement(core_1.Typography, { variant: "caption" },
-                                                    react_1.default.createElement(core_1.Box, { style: { color: 'white', } }, employeeLocation))),
-                                            getTotalYears > 0 && react_1.default.createElement("li", { style: { color: 'white' } },
-                                                react_1.default.createElement(core_1.Typography, { variant: "caption" },
-                                                    react_1.default.createElement(core_1.Box, { style: { color: 'white', } },
-                                                        getTotalYears,
-                                                        " years of combined experience"))))))),
-                            react_1.default.createElement(core_1.Box, { style: { width: '50%' } },
-                                react_1.default.createElement(core_1.Grid, { item: true },
-                                    react_1.default.createElement(core_1.Box, null,
-                                        react_1.default.createElement(core_1.Typography, { variant: "caption" },
-                                            react_1.default.createElement(core_1.Box, { style: { color: 'white', textAlign: 'center' }, mt: 4, ml: 2 }, "Level 1")),
-                                        react_1.default.createElement(core_1.Grid, { item: true, direction: "row", justify: "center", alignItems: "center", style: { margin: 'auto', width: 'fit-content' } },
-                                            react_1.default.createElement(EmployeeCard, { name: `${firstName} ${lastName}`, role: primaryServiceLine, experience: paroTenure, location: `${city}, ${stateAbbreviation}`, imageUrl: imageUrl }))))),
-                            react_1.default.createElement(core_1.Box, { style: { width: '25%' } }, uniqueServicesExists &&
-                                react_1.default.createElement(core_1.Box, null,
-                                    react_1.default.createElement(core_1.Grid, { item: true },
-                                        react_1.default.createElement(core_1.Typography, { variant: "body1" },
-                                            react_1.default.createElement(core_1.Box, { style: { color: 'white' } }, "Services Offered:")),
-                                        react_1.default.createElement("ul", null, uniqueServices === null || uniqueServices === void 0 ? void 0 : uniqueServices.map((service) => {
-                                            return react_1.default.createElement("li", { style: { color: 'white' } },
-                                                react_1.default.createElement(core_1.Typography, { variant: "caption" },
-                                                    react_1.default.createElement(core_1.Box, { style: { color: 'white', } }, service)));
-                                        }))))))
-                        :
-                            react_1.default.createElement(react_1.default.Fragment, null,
-                                react_1.default.createElement(core_1.Typography, { variant: "caption" },
-                                    react_1.default.createElement(core_1.Box, { style: { color: 'white', textAlign: 'center' }, mt: 4, ml: 2 }, "Level 1")),
-                                react_1.default.createElement(core_1.Grid, { item: true, direction: "row", justify: "center", alignItems: "center", style: { margin: 'auto', width: 'fit-content' } },
-                                    react_1.default.createElement(EmployeeCard, { name: `${firstName} ${lastName}`, role: primaryServiceLine, experience: paroTenure, location: `${city}, ${stateAbbreviation}`, imageUrl: imageUrl }))), sortedLevels === null || sortedLevels === void 0 ? void 0 :
-                    sortedLevels.map((level, levelIndex) => {
-                        var _a;
-                        return (react_1.default.createElement(core_1.Grid, { item: true, key: level, justify: "center", alignItems: "center", style: { width: 'auto' } },
-                            react_1.default.createElement(core_1.Grid, { container: true, direction: "row", justify: "center", alignItems: "center", spacing: 2, wrap: "nowrap" }, (_a = groupedEmployees[level]) === null || _a === void 0 ? void 0 : _a.map((obj, index) => {
-                                var _a, _b, _c, _d, _e, _f;
-                                return (react_1.default.createElement(core_1.Grid, { item: true, key: obj.id, style: { flexShrink: 0 } },
-                                    ((_a = groupedEmployees[level]) === null || _a === void 0 ? void 0 : _a.length) > 1 && index < ((_b = groupedEmployees[level]) === null || _b === void 0 ? void 0 : _b.length) - 1 && (react_1.default.createElement(HorizontalLine, null)),
-                                    react_1.default.createElement(VerticalLine, { isBottomLine: false }),
-                                    react_1.default.createElement(EmployeeCard, { name: isPublicProfile ? `Firm Member ${firmMemberCounter++}` : obj === null || obj === void 0 ? void 0 : obj.employeeName, role: obj === null || obj === void 0 ? void 0 : obj.firmRole, experience: `${obj === null || obj === void 0 ? void 0 : obj.yearsWithFirm} years`, location: obj === null || obj === void 0 ? void 0 : obj.employeeLocation }),
-                                    levelIndex !== (sortedLevels === null || sortedLevels === void 0 ? void 0 : sortedLevels.length) - 1 && react_1.default.createElement(VerticalLine, { isBottomLine: true }),
-                                    ((_c = groupedEmployees[level]) === null || _c === void 0 ? void 0 : _c.length) > 1 && index < ((_d = groupedEmployees[level]) === null || _d === void 0 ? void 0 : _d.length) - 1 && levelIndex !== (sortedLevels === null || sortedLevels === void 0 ? void 0 : sortedLevels.length) - 1 && ((_e = groupedEmployees[level]) === null || _e === void 0 ? void 0 : _e.length) !== ((_f = groupedEmployees[level + 1]) === null || _f === void 0 ? void 0 : _f.length) && (react_1.default.createElement(HorizontalLine, null))));
-                            }))));
-                    }))))));
-};
-exports.OrganizationChart = OrganizationChart;
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.OrganizationChart = void 0;
+const react_1 = __importStar(require("react"));
+const core_1 = require("@material-ui/core");
+const Dialog_1 = __importDefault(require("@material-ui/core/Dialog"));
+const Close_1 = __importDefault(require("@material-ui/icons/Close"));
+const cdn_1 = require("../shared/constants/cdn");
+const styled_components_1 = __importDefault(require("styled-components"));
+const defaultAvatar = cdn_1.CDN_URL + 'defaultAvatar.png';
+const ProfilePhotoPreview = styled_components_1.default.img `
+  height: 86px;
+  width: 86px;
+  border: 1px solid #e4e5e4;
+  border-radius: 50%;
+  object-fit: cover;
+  object-position: top;
+`;
+const CustomDialog = (0, core_1.styled)(Dialog_1.default)(({ theme }) => ({
+    '& .MuiDialog-paper': {
+        backgroundColor: '#060821',
+        width: '50vw',
+        maxWidth: '80vw',
+        height: '80vh',
+        justifyContent: 'center',
+        alignItems: 'center',
+        overflow: 'hidden',
+        [theme.breakpoints.down('md')]: {
+            width: '100vw',
+            maxWidth: '100vw',
+        },
+    }
+}));
+const InformationRow = ({ label, value }) => {
+    return (react_1.default.createElement(core_1.Grid, { item: true, container: true, justify: "flex-start", alignItems: "center" },
+        react_1.default.createElement(core_1.Box, { style: {
+                backgroundColor: '#248384',
+                color: 'white',
+                textAlign: 'center',
+                margin: '2px',
+                padding: '4px',
+                width: '120px',
+                borderRadius: '6px',
+                fontSize: '10px'
+            } },
+            react_1.default.createElement("b", null, label)),
+        react_1.default.createElement(core_1.Box, { ml: 0.5 }, value !== null && value !== void 0 ? value : 'N/A')));
+};
+const EmployeeCard = ({ name, role, experience, location, imageUrl }) => {
+    return (react_1.default.createElement(core_1.Card, { style: {
+            backgroundColor: '#d9efef',
+            borderRadius: '12px',
+            width: 'max-content',
+            padding: '4px 20px',
+            margin: '8px'
+        } },
+        imageUrl && (react_1.default.createElement(core_1.Grid, { item: true, justify: "center", style: { display: 'flex', justifyContent: 'center' } },
+            react_1.default.createElement(ProfilePhotoPreview, { src: imageUrl || defaultAvatar, alt: 'Profile Photo' }))),
+        react_1.default.createElement(core_1.Typography, { variant: "subtitle2", align: "center" },
+            react_1.default.createElement("b", null, name)),
+        react_1.default.createElement(core_1.Grid, { item: true, justify: "center", alignItems: "center" },
+            react_1.default.createElement(InformationRow, { label: "Role", value: role }),
+            react_1.default.createElement(InformationRow, { label: "Experience", value: experience }),
+            react_1.default.createElement(InformationRow, { label: "Location", value: location }))));
+};
+const HorizontalLine = () => (react_1.default.createElement(core_1.Grid, { item: true, alignContent: "center", style: {
+        position: 'relative',
+        background: '#FFFFFF',
+        width: 'calc(105% - 1px)',
+        height: '2px',
+        top: 0,
+        right: 0,
+        left: '50%',
+        transform: 'translateX(0)'
+    } }));
+const VerticalLine = ({ isBottomLine }) => (react_1.default.createElement(core_1.Grid, { item: true, style: {
+        position: 'relative',
+        background: '#FFFFFF',
+        width: '2px',
+        height: '30px',
+        top: 0,
+        left: '50%',
+        transform: 'translateX(-50%)'
+    } }, !isBottomLine && react_1.default.createElement("div", { style: {
+        content: '',
+        position: 'absolute',
+        bottom: 0,
+        left: '50%',
+        transform: 'translateX(-50%)',
+        borderStyle: 'solid',
+        borderWidth: '6px 6px 0 6px',
+        borderColor: '#FFFFFF transparent transparent transparent'
+    } })));
+const parseServices = (services) => {
+    var _a;
+    const uniqueArray = (_a = Array.from(new Set(services === null || services === void 0 ? void 0 : services.map(item => JSON.stringify(item))))) === null || _a === void 0 ? void 0 : _a.map(str => JSON.parse(str));
+    return uniqueArray;
+};
+const checkEmployeeLocation = (data) => {
+    let hasOffshore = false;
+    let hasOnshore = false;
+    data === null || data === void 0 ? void 0 : data.forEach(employee => {
+        var _a;
+        const location = (_a = employee === null || employee === void 0 ? void 0 : employee.employeeLocation) === null || _a === void 0 ? void 0 : _a.toLowerCase();
+        if (location === null || location === void 0 ? void 0 : location.includes("offshore")) {
+            hasOffshore = true;
+        }
+        if (location === null || location === void 0 ? void 0 : location.includes("onshore")) {
+            hasOnshore = true;
+        }
+    });
+    if (hasOffshore && hasOnshore) {
+        return "Offshore & Onshore Team";
+    }
+    else if (hasOffshore) {
+        return "Offshore Team";
+    }
+    else if (hasOnshore) {
+        return "Onshore Team";
+    }
+    else {
+        return "none";
+    }
+};
+const getTotalYearsWithFirm = (data) => {
+    return data === null || data === void 0 ? void 0 : data.reduce((total, employee) => total + employee.yearsWithFirm, 0);
+};
+const OrganizationChart = ({ openModal, setOpenModal, expertFirms, firstName, lastName, imageUrl, primaryServiceLine, city, stateAbbreviation, paroTenure, isPublicProfile }) => {
+    var _a, _b;
+    const services = (_a = expertFirms === null || expertFirms === void 0 ? void 0 : expertFirms.expertFirmClientReferences) === null || _a === void 0 ? void 0 : _a.flatMap((obj) => { var _a; return (_a = obj === null || obj === void 0 ? void 0 : obj.services) !== null && _a !== void 0 ? _a : []; });
+    const uniqueServices = parseServices(services);
+    const employeeLocation = checkEmployeeLocation(expertFirms === null || expertFirms === void 0 ? void 0 : expertFirms.expertFirmEmployees);
+    const getTotalYears = getTotalYearsWithFirm(expertFirms === null || expertFirms === void 0 ? void 0 : expertFirms.expertFirmEmployees);
+    let firmMemberCounter = 1;
+    const groupedEmployees = (_b = expertFirms === null || expertFirms === void 0 ? void 0 : expertFirms.expertFirmEmployees) === null || _b === void 0 ? void 0 : _b.reduce((acc, obj) => {
+        if (!acc[obj.level]) {
+            acc[obj.level] = [];
+        }
+        acc[obj.level].push(obj);
+        return acc;
+    }, {});
+    const [scale, setScale] = (0, react_1.useState)((groupedEmployees === null || groupedEmployees === void 0 ? void 0 : groupedEmployees.length) >= 2 ? 0.3 : 0.5); // checking no of levels & zooming out to fit content
+    const [position, setPosition] = (0, react_1.useState)({ x: 0, y: (groupedEmployees === null || groupedEmployees === void 0 ? void 0 : groupedEmployees.length) >= 2 ? -100 : 0 }); // negative value to align content maximum zoom out and center
+    const [isDragging, setIsDragging] = (0, react_1.useState)(false);
+    const [lastMousePos, setLastMousePos] = (0, react_1.useState)(null);
+    const sortedLevels = Object.keys(groupedEmployees || {})
+        .map(Number)
+        .sort((a, b) => a - b);
+    const MAX_ZOOM_IN = 5;
+    const MAX_ZOOM_OUT = 0.2;
+    const CONTENT_SIZE = 10;
+    // to center the content
+    const centerContent = (newScale) => {
+        const centerX = (CONTENT_SIZE * newScale) / 2;
+        const centerY = (CONTENT_SIZE * newScale) / 2;
+        setPosition({ x: centerX, y: centerY });
+    };
+    const handleWheel = (event) => {
+        event.preventDefault();
+        const zoomFactor = 0.1;
+        if (event.deltaY < 0) {
+            setScale((prev) => Math.min(prev + zoomFactor, MAX_ZOOM_IN));
+        }
+        else {
+            setScale((prev) => {
+                const newScale = Math.max(prev - zoomFactor, MAX_ZOOM_OUT);
+                if (newScale === MAX_ZOOM_OUT) {
+                    centerContent(newScale); // Center content when zoomed out fully
+                }
+                return newScale;
+            });
+        }
+    };
+    const handleMouseDown = (event) => {
+        setIsDragging(true);
+        setLastMousePos({ x: event.clientX, y: event.clientY });
+    };
+    const handleMouseMove = (event) => {
+        if (isDragging && lastMousePos) {
+            const dx = event.clientX - lastMousePos.x;
+            const dy = event.clientY - lastMousePos.y;
+            setPosition((prev) => ({
+                x: prev.x + dx,
+                y: prev.y + dy,
+            }));
+            setLastMousePos({ x: event.clientX, y: event.clientY });
+        }
+    };
+    const handleMouseUp = () => {
+        setIsDragging(false);
+    };
+    // to center the content on double click
+    const handleDoubleClick = () => {
+        const newScale = 1;
+        setScale(newScale);
+        centerContent(newScale);
+    };
+    const highlightsExists = ((expertFirms === null || expertFirms === void 0 ? void 0 : expertFirms.employeeCount) > 0 || employeeLocation !== 'none' || getTotalYears > 0);
+    const uniqueServicesExists = (uniqueServices === null || uniqueServices === void 0 ? void 0 : uniqueServices.length) > 1;
+    return (react_1.default.createElement(CustomDialog, { open: openModal, onClose: () => setOpenModal(false), fullScreen: true, scroll: 'paper' },
+        react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: "row", justify: "space-between", alignItems: "center" },
+                react_1.default.createElement(core_1.Box, { p: 2 },
+                    react_1.default.createElement(core_1.Typography, { variant: "subtitle1" },
+                        react_1.default.createElement(core_1.Box, { style: { color: 'white' } }, "Organizational Structure & Services")),
+                    react_1.default.createElement(core_1.Typography, { variant: "caption" },
+                        react_1.default.createElement(core_1.Box, { style: { color: 'white' } }, "See what services the organization offers and where they're located"))),
+                react_1.default.createElement(core_1.Box, { style: { alignSelf: 'flex-end' } },
+                    react_1.default.createElement(core_1.IconButton, { onClick: () => setOpenModal(false) },
+                        react_1.default.createElement(core_1.Box, { style: { color: 'white' } },
+                            react_1.default.createElement(Close_1.default, null))))),
+            react_1.default.createElement(core_1.DialogContent, { onWheel: handleWheel, onMouseMove: handleMouseMove, onMouseUp: handleMouseUp, onMouseLeave: handleMouseUp, onDoubleClick: handleDoubleClick, style: {
+                    overflow: 'hidden',
+                    width: '100%',
+                    height: '100vh',
+                    position: 'relative',
+                } },
+                react_1.default.createElement("div", { onMouseDown: handleMouseDown, style: {
+                        transform: `translate(${position.x}px, ${position.y}px) scale(${scale})`,
+                        transformOrigin: 'center',
+                        transition: 'transform 0.1s',
+                        width: '100%',
+                        height: '100%',
+                        position: 'relative',
+                        cursor: isDragging ? 'grabbing' : 'grab',
+                        userSelect: 'none',
+                    } },
+                    isPublicProfile ?
+                        react_1.default.createElement(core_1.Grid, { item: true, container: true, direction: "row", justify: "flex-start", alignItems: 'center', wrap: 'nowrap', spacing: 4, style: { width: '100%' } },
+                            react_1.default.createElement(core_1.Box, { style: { width: '25%' } }, highlightsExists &&
+                                react_1.default.createElement(core_1.Box, null,
+                                    react_1.default.createElement(core_1.Grid, { item: true },
+                                        react_1.default.createElement(core_1.Typography, { variant: "subtitle1" },
+                                            react_1.default.createElement(core_1.Box, { style: { color: 'white' } }, "Highlights:")),
+                                        react_1.default.createElement("ul", null,
+                                            (expertFirms === null || expertFirms === void 0 ? void 0 : expertFirms.employeeCount) > 0 && react_1.default.createElement("li", { style: { color: 'white' } },
+                                                react_1.default.createElement(core_1.Typography, { variant: "caption" },
+                                                    react_1.default.createElement(core_1.Box, { style: { color: 'white', } }, expertFirms === null || expertFirms === void 0 ? void 0 :
+                                                        expertFirms.employeeCount,
+                                                        " Team Members"))),
+                                            employeeLocation !== 'none' && react_1.default.createElement("li", { style: { color: 'white' } },
+                                                react_1.default.createElement(core_1.Typography, { variant: "caption" },
+                                                    react_1.default.createElement(core_1.Box, { style: { color: 'white', } }, employeeLocation))),
+                                            getTotalYears > 0 && react_1.default.createElement("li", { style: { color: 'white' } },
+                                                react_1.default.createElement(core_1.Typography, { variant: "caption" },
+                                                    react_1.default.createElement(core_1.Box, { style: { color: 'white', } },
+                                                        getTotalYears,
+                                                        " years of combined experience"))))))),
+                            react_1.default.createElement(core_1.Box, { style: { width: '50%' } },
+                                react_1.default.createElement(core_1.Grid, { item: true },
+                                    react_1.default.createElement(core_1.Box, null,
+                                        react_1.default.createElement(core_1.Typography, { variant: "caption" },
+                                            react_1.default.createElement(core_1.Box, { style: { color: 'white', textAlign: 'center' }, mt: 4, ml: 2 }, "Level 1")),
+                                        react_1.default.createElement(core_1.Grid, { item: true, direction: "row", justify: "center", alignItems: "center", style: { margin: 'auto', width: 'fit-content' } },
+                                            react_1.default.createElement(EmployeeCard, { name: `${firstName} ${lastName}`, role: primaryServiceLine, experience: paroTenure, location: `${city}, ${stateAbbreviation}`, imageUrl: imageUrl }))))),
+                            react_1.default.createElement(core_1.Box, { style: { width: '25%' } }, uniqueServicesExists &&
+                                react_1.default.createElement(core_1.Box, null,
+                                    react_1.default.createElement(core_1.Grid, { item: true },
+                                        react_1.default.createElement(core_1.Typography, { variant: "body1" },
+                                            react_1.default.createElement(core_1.Box, { style: { color: 'white' } }, "Services Offered:")),
+                                        react_1.default.createElement("ul", null, uniqueServices === null || uniqueServices === void 0 ? void 0 : uniqueServices.map((service) => {
+                                            return react_1.default.createElement("li", { style: { color: 'white' } },
+                                                react_1.default.createElement(core_1.Typography, { variant: "caption" },
+                                                    react_1.default.createElement(core_1.Box, { style: { color: 'white', } }, service)));
+                                        }))))))
+                        :
+                            react_1.default.createElement(react_1.default.Fragment, null,
+                                react_1.default.createElement(core_1.Typography, { variant: "caption" },
+                                    react_1.default.createElement(core_1.Box, { style: { color: 'white', textAlign: 'center' }, mt: 4, ml: 2 }, "Level 1")),
+                                react_1.default.createElement(core_1.Grid, { item: true, direction: "row", justify: "center", alignItems: "center", style: { margin: 'auto', width: 'fit-content' } },
+                                    react_1.default.createElement(EmployeeCard, { name: `${firstName} ${lastName}`, role: primaryServiceLine, experience: paroTenure, location: `${city}, ${stateAbbreviation}`, imageUrl: imageUrl }))), sortedLevels === null || sortedLevels === void 0 ? void 0 :
+                    sortedLevels.map((level, levelIndex) => {
+                        var _a;
+                        return (react_1.default.createElement(core_1.Grid, { item: true, key: level, justify: "center", alignItems: "center", style: { width: 'auto' } },
+                            react_1.default.createElement(core_1.Grid, { container: true, direction: "row", justify: "center", alignItems: "center", spacing: 2, wrap: "nowrap" }, (_a = groupedEmployees[level]) === null || _a === void 0 ? void 0 : _a.map((obj, index) => {
+                                var _a, _b, _c, _d, _e, _f;
+                                return (react_1.default.createElement(core_1.Grid, { item: true, key: obj.id, style: { flexShrink: 0 } },
+                                    ((_a = groupedEmployees[level]) === null || _a === void 0 ? void 0 : _a.length) > 1 && index < ((_b = groupedEmployees[level]) === null || _b === void 0 ? void 0 : _b.length) - 1 && (react_1.default.createElement(HorizontalLine, null)),
+                                    react_1.default.createElement(VerticalLine, { isBottomLine: false }),
+                                    react_1.default.createElement(EmployeeCard, { name: isPublicProfile ? `Firm Member ${firmMemberCounter++}` : obj === null || obj === void 0 ? void 0 : obj.employeeName, role: obj === null || obj === void 0 ? void 0 : obj.firmRole, experience: `${obj === null || obj === void 0 ? void 0 : obj.yearsWithFirm} years`, location: obj === null || obj === void 0 ? void 0 : obj.employeeLocation }),
+                                    levelIndex !== (sortedLevels === null || sortedLevels === void 0 ? void 0 : sortedLevels.length) - 1 && react_1.default.createElement(VerticalLine, { isBottomLine: true }),
+                                    ((_c = groupedEmployees[level]) === null || _c === void 0 ? void 0 : _c.length) > 1 && index < ((_d = groupedEmployees[level]) === null || _d === void 0 ? void 0 : _d.length) - 1 && levelIndex !== (sortedLevels === null || sortedLevels === void 0 ? void 0 : sortedLevels.length) - 1 && ((_e = groupedEmployees[level]) === null || _e === void 0 ? void 0 : _e.length) !== ((_f = groupedEmployees[level + 1]) === null || _f === void 0 ? void 0 : _f.length) && (react_1.default.createElement(HorizontalLine, null))));
+                            }))));
+                    }))))));
+};
+exports.OrganizationChart = OrganizationChart;