-
+
+
+
)}
diff --git a/app/src/components/layout/sidebarRight/Header.tsx b/app/src/components/layout/sidebarRight/Header.tsx
index f9f48fb..a88baee 100644
--- a/app/src/components/layout/sidebarRight/Header.tsx
+++ b/app/src/components/layout/sidebarRight/Header.tsx
@@ -1,14 +1,14 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
import { AppDockIcon } from "../../icons/HeaderIcons";
import orgImg from "../../../assets/orgTemp.png";
import { useActiveUsers } from "../../../store/store";
-import { getAvatarColor } from "../../../functions/users/functions/getAvatarColor";
import { ActiveUser } from "../../../types/users";
import CollaborationPopup from "../../templates/CollaborationPopup";
+import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor";
const Header: React.FC = () => {
const { activeUsers } = useActiveUsers();
- const userName = localStorage.getItem("userName") || "Anonymous";
+ const userName = localStorage.getItem("userName") ?? "Anonymous";
const guestUsers: ActiveUser[] = activeUsers.filter(
(user: ActiveUser) => user.userName !== userName
@@ -23,14 +23,14 @@ const Header: React.FC = () => {
)}
-
{
setUserManagement(true);
}}
>
Share
-
+
{/*
+
diff --git a/app/src/components/layout/sidebarRight/customInput/PositionInputs.tsx b/app/src/components/layout/sidebarRight/customInput/PositionInputs.tsx
index 01b4ab3..8cc47d7 100644
--- a/app/src/components/layout/sidebarRight/customInput/PositionInputs.tsx
+++ b/app/src/components/layout/sidebarRight/customInput/PositionInputs.tsx
@@ -22,7 +22,7 @@ const PositionInput: React.FC = ({
value2 = "number",
disabled = false, // Default disabled value
isEyedrop = false, // Default isEyedrop value
- handleEyeDropClick = () => { }, // Default function for eye drop click
+ handleEyeDropClick = () => {}, // Default function for eye drop click
}) => {
return (
Create Analysis
@@ -39,6 +39,7 @@ const PositionInput: React.FC = ({
disabled={disabled} // Apply disabled prop
/>
+
Y :
{
{/* Name */}
+ {}}
+ value1={selectedFloorItem.position.x.toFixed(5)}
+ value2={selectedFloorItem.position.z.toFixed(5)}
+ />
+ {}}
+ value={parseFloat(
+ THREE.MathUtils.radToDeg(selectedFloorItem.rotation.y).toFixed(5)
+ )}
+ />
+
- {}}
- value1={selectedFloorItem.position.x.toFixed(5)}
- value2={selectedFloorItem.position.z.toFixed(5)}
- />
- {}}
- value={parseFloat(
- THREE.MathUtils.radToDeg(selectedFloorItem.rotation.y).toFixed(5)
- )}
- />
+
+
-
-
- (40);
@@ -224,66 +222,66 @@ const GlobalProperties: React.FC = () => {
// }
return (
{selectedFloorItem.userData.name}
+ Render settings
+ User Data
-
- {/* Map through userData and render InputWithDropDown for each entry */}
- {userData.map((data) => (
-
- handleUserDataChange(data.id, newValue)} // Pass the change handler
- />
-
);
};
diff --git a/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx b/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx
index 568783c..8b91afc 100644
--- a/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/GlobalProperties.tsx
@@ -32,9 +32,7 @@ const GlobalProperties: React.FC = () => {
const { renderDistance, setRenderDistance } = useRenderDistance();
const { setPlaneValue, setGridValue, planeValue, gridValue } =
useTileDistance();
- useEffect(() => {
-
- }, [gridValue, planeValue]);
+ useEffect(() => {}, [gridValue, planeValue]);
const { socket } = useSocketStore();
const { limitDistance, setLimitDistance } = useLimitDistance();
const [distance, setDistance] = useState handleRemoveUserData(data.id)}
- >
-
+
- ))}
+ ))}
- {/* Add new user data */}
- User Data
+ {userData.map((data) => (
+
+ handleUserDataChange(data.id, newValue)} // Pass the change handler
+ />
+
- handleRemoveUserData(data.id)}
+ >
+
- + Add
-
+ {/* Add new user data */}
+
+ + Add
+
+
-
+ {
- // setLimitDistance(!limitDistance);
- // // setDistance(75);
- // // setRenderDistance(75);
- // }}
- onClick={async () => {
- await limitRenderDistance(); // Call the function here
- }}
- />
- updateDistance(value)}
- onPointerUp={updatedDist}
- key={"6"}
- />
-
-
+
+ {/* //visibleEdgeColor={CONSTANTS.outlineConfig.assetDeleteColor} */}
+ {
+ // setLimitDistance(!limitDistance);
+ // // setDistance(75);
+ // // setRenderDistance(75);
+ // }}
+ onClick={async () => {
+ await limitRenderDistance(); // Call the function here
+ }}
+ />
+ updateDistance(value)}
+ onPointerUp={updatedDist}
+ key={"6"}
+ />
+ {/*
{
max={5}
onChange={(value: number) => updateGridDistance(value)}
onPointerUp={updatedGrid}
- />
+ /> */}
+
);
};
diff --git a/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx b/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx
index a9f8cc0..1bb9400 100644
--- a/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx
+++ b/app/src/components/layout/sidebarRight/properties/ZoneProperties.tsx
@@ -2,7 +2,12 @@ import React, { useEffect, useState } from "react";
import RenameInput from "../../../ui/inputs/RenameInput";
import Vector3Input from "../customInput/Vector3Input";
import { useSelectedZoneStore } from "../../../../store/visualization/useZoneStore";
-import { useEditPosition, usezonePosition, useZones, usezoneTarget } from "../../../../store/store";
+import {
+ useEditPosition,
+ usezonePosition,
+ useZones,
+ usezoneTarget,
+} from "../../../../store/store";
import { zoneCameraUpdate } from "../../../../services/visulization/zone/zoneCameraUpdation";
const ZoneProperties: React.FC = () => {
@@ -13,9 +18,9 @@ const ZoneProperties: React.FC = () => {
const { zones, setZones } = useZones();
useEffect(() => {
- setZonePosition(selectedZone.zoneViewPortPosition)
- setZoneTarget(selectedZone.zoneViewPortTarget)
- }, [selectedZone?.zoneViewPortPosition, selectedZone?.zoneViewPortTarget])
+ setZonePosition(selectedZone.zoneViewPortPosition);
+ setZoneTarget(selectedZone.zoneViewPortTarget);
+ }, [selectedZone?.zoneViewPortPosition, selectedZone?.zoneViewPortTarget]);
async function handleSetView() {
try {
@@ -25,7 +30,7 @@ const ZoneProperties: React.FC = () => {
let zonesdata = {
zoneId: selectedZone.zoneId,
viewPortposition: zonePosition,
- viewPortCenter: zoneTarget
+ viewPortCenter: zoneTarget,
};
let response = await zoneCameraUpdate(zonesdata, organization);
@@ -34,14 +39,11 @@ const ZoneProperties: React.FC = () => {
} else {
// console.log(response);
}
-
- } catch (error) {
-
- }
+ } catch (error) {}
}
function handleEditView() {
- setEdit(!Edit); // This will toggle the `Edit` state correctly
+ setEdit(!Edit); // This will toggle the `Edit` state correctly
}
async function handleZoneNameChange(newName: string) {
@@ -49,11 +51,11 @@ const ZoneProperties: React.FC = () => {
const organization = email?.split("@")[1]?.split(".")[0];
const zonesdata = {
zoneId: selectedZone.zoneId,
- zoneName: newName
+ zoneName: newName,
};
// Call your API to update the zone
let response = await zoneCameraUpdate(zonesdata, organization);
- console.log('response: ', response);
+ console.log("response: ", response);
if (response.message === "updated successfully") {
setZones((prevZones: any[]) =>
prevZones.map((zone) =>
@@ -66,7 +68,10 @@ const ZoneProperties: React.FC = () => {
// console.log(response?.message);
}
}
- function handleVectorChange(key: "zoneViewPortTarget" | "zoneViewPortPosition", newValue: [number, number, number]) {
+ function handleVectorChange(
+ key: "zoneViewPortTarget" | "zoneViewPortPosition",
+ newValue: [number, number, number]
+ ) {
setSelectedZone((prev) => ({ ...prev, [key]: newValue }));
}
const checkZoneNameDuplicate = (name: string) => {
@@ -79,33 +84,40 @@ const ZoneProperties: React.FC = () => {
return (
Environment
-
-
+ Environment
+
+
-
+
-
-
- handleVectorChange("zoneViewPortTarget", value)}
- header="Viewport Target"
- value={zoneTarget as [number, number, number]}
- disabled={!Edit}
- />
- handleVectorChange("zoneViewPortPosition", value)}
- header="Viewport Position"
- value={zonePosition as [number, number, number]}
- disabled={!Edit}
- />
+ handleVectorChange("zoneViewPortTarget", value)}
+ header="Viewport Target"
+ value={zoneTarget as [number, number, number]}
+ disabled={!Edit}
+ />
+
+ handleVectorChange("zoneViewPortPosition", value)
+ }
+ header="Viewport Position"
+ value={zonePosition as [number, number, number]}
+ disabled={!Edit}
+ />
- {Edit && (
-
);
};
export default ZoneProperties;
-
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/conveyorMechanics.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/conveyorMechanics.tsx
index 61c9c6c..6437311 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/conveyorMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/conveyorMechanics.tsx
@@ -113,86 +113,87 @@ function ConveyorMechanics() {
return (
<>
- {selectedEventData && (
- <>
-
- {Edit ? "Cancel" : "Edit"}
+
+
-
+
-
+ {Edit ? "Cancel" : "Edit"}
+
- Set View
-
- )}
+ {Edit && (
+
+ Set View
+
+ )}
+
-
+
-
+
- { }}
- onChange={handleSpeedChange}
- />
-
-
+
+
+
+
+ { }}
+ onChange={handleSpeedChange}
+ />
+
-
-
-
-
+
+
-
+
)}
);
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx
index 811a676..faea93d 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/roboticArmMechanics.tsx
@@ -104,61 +104,58 @@ function RoboticArmMechanics() {
return (
<>
- {selectedEventData && selectedPointData && (
- <>
-
+ {selectedUser && (
+ // eslint-disable-next-line
+
+ );
+};
+
+export default FollowPerson;
diff --git a/app/src/components/ui/FileMenu.tsx b/app/src/components/ui/FileMenu.tsx
index a7c876d..da85e54 100644
--- a/app/src/components/ui/FileMenu.tsx
+++ b/app/src/components/ui/FileMenu.tsx
@@ -1,25 +1,53 @@
-import React, { useState } from "react";
+import React, { useState, useEffect, useRef } from "react";
import RenameInput from "./inputs/RenameInput";
import { ArrowIcon } from "../icons/ExportCommonIcons";
import MenuBar from "./menu/menu";
+import { ProjectIcon } from "../icons/HeaderIcons";
const FileMenu: React.FC = () => {
const [openMenu, setOpenMenu] = useState(false);
+ const containerRef = useRef(null);
+ let clickTimeout: NodeJS.Timeout | null = null;
+
+ const handleClick = () => {
+ if (clickTimeout) return;
+ setOpenMenu((prev) => !prev);
+ clickTimeout = setTimeout(() => {
+ clickTimeout = null;
+ }, 800);
+ };
+
+ useEffect(() => {
+ const handleClickOutside = (event: MouseEvent) => {
+ if (
+ containerRef.current &&
+ !containerRef.current.contains(event.target as Node)
+ ) {
+ setOpenMenu(false);
+ }
+ };
+
+ document.addEventListener("mousedown", handleClickOutside);
+ return () => document.removeEventListener("mousedown", handleClickOutside);
+ }, []);
+
return (
-
+
-
-
+
+
-
- )}
+
+
+
);
}
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/machineMechanics.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/machineMechanics.tsx
index 8d128af..266eb39 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/machineMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/machineMechanics.tsx
@@ -78,7 +78,7 @@ function MachineMechanics() {
return (
<>
{selectedEventData && (
- <>
+
- ();
- const { selectedEventData } = useSelectedEventData();
- const { getPointByUuid, updateEvent, updateAction } = useProductStore();
- const { selectedProduct } = useSelectedProduct();
+ const [activeOption, setActiveOption] = useState<"default" | "travel">(
+ "default"
+ );
+ const [selectedPointData, setSelectedPointData] = useState<
+ VehiclePointSchema | undefined
+ >();
+ const { selectedEventData } = useSelectedEventData();
+ const { getPointByUuid, updateEvent, updateAction } = useProductStore();
+ const { selectedProduct } = useSelectedProduct();
- useEffect(() => {
- if (selectedEventData) {
- const point = getPointByUuid(
- selectedProduct.productId,
- selectedEventData.data.modelUuid,
- selectedEventData.selectedPoint
- ) as VehiclePointSchema | undefined;
+ useEffect(() => {
+ if (selectedEventData) {
+ const point = getPointByUuid(
+ selectedProduct.productId,
+ selectedEventData.data.modelUuid,
+ selectedEventData.selectedPoint
+ ) as VehiclePointSchema | undefined;
- if (point) {
- setSelectedPointData(point);
- setActiveOption(point.action.actionType as "travel");
- }
- }
- }, [selectedProduct, selectedEventData, getPointByUuid]);
+ if (point) {
+ setSelectedPointData(point);
+ setActiveOption(point.action.actionType as "travel");
+ }
+ }
+ }, [selectedProduct, selectedEventData, getPointByUuid]);
- const handleSpeedChange = (value: string) => {
- if (!selectedEventData) return;
- updateEvent(selectedProduct.productId, selectedEventData.data.modelUuid, {
- speed: parseFloat(value),
- });
- };
+ const handleSpeedChange = (value: string) => {
+ if (!selectedEventData) return;
+ updateEvent(selectedProduct.productId, selectedEventData.data.modelUuid, {
+ speed: parseFloat(value),
+ });
+ };
- const handleActionTypeChange = (option: string) => {
- if (!selectedEventData || !selectedPointData) return;
- const validOption = option as "travel";
- setActiveOption(validOption);
+ const handleActionTypeChange = (option: string) => {
+ if (!selectedEventData || !selectedPointData) return;
+ const validOption = option as "travel";
+ setActiveOption(validOption);
- updateAction(selectedPointData.action.actionUuid, {
- actionType: validOption,
- });
- };
+ updateAction(selectedPointData.action.actionUuid, {
+ actionType: validOption,
+ });
+ };
- const handleRenameAction = (newName: string) => {
- if (!selectedPointData) return;
- updateAction(selectedPointData.action.actionUuid, { actionName: newName });
- };
+ const handleRenameAction = (newName: string) => {
+ if (!selectedPointData) return;
+ updateAction(selectedPointData.action.actionUuid, { actionName: newName });
+ };
- const handleLoadCapacityChange = (value: string) => {
- if (!selectedPointData) return;
- updateAction(selectedPointData.action.actionUuid, {
- loadCapacity: parseFloat(value),
- });
- };
+ const handleLoadCapacityChange = (value: string) => {
+ if (!selectedPointData) return;
+ updateAction(selectedPointData.action.actionUuid, {
+ loadCapacity: parseFloat(value),
+ });
+ };
- const handleUnloadDurationChange = (value: string) => {
- if (!selectedPointData) return;
- updateAction(selectedPointData.action.actionUuid, {
- unLoadDuration: parseFloat(value),
- });
- };
+ const handleUnloadDurationChange = (value: string) => {
+ if (!selectedPointData) return;
+ updateAction(selectedPointData.action.actionUuid, {
+ unLoadDuration: parseFloat(value),
+ });
+ };
- const handlePickPointChange = (value: string) => {
- if (!selectedPointData) return;
- };
+ const handlePickPointChange = (value: string) => {
+ if (!selectedPointData) return;
+ };
- const handleUnloadPointChange = (value: string) => {
- if (!selectedPointData) return;
- };
+ const handleUnloadPointChange = (value: string) => {
+ if (!selectedPointData) return;
+ };
- // Get current values from store
- const currentSpeed =
- selectedEventData?.data.type === "vehicle"
- ? selectedEventData.data.speed.toString()
- : "0.5";
+ // Get current values from store
+ const currentSpeed =
+ selectedEventData?.data.type === "vehicle"
+ ? selectedEventData.data.speed.toString()
+ : "0.5";
- const currentActionName = selectedPointData
- ? selectedPointData.action.actionName
- : "Action Name";
+ const currentActionName = selectedPointData
+ ? selectedPointData.action.actionName
+ : "Action Name";
- const currentLoadCapacity = selectedPointData
- ? selectedPointData.action.loadCapacity.toString()
- : "1";
+ const currentLoadCapacity = selectedPointData
+ ? selectedPointData.action.loadCapacity.toString()
+ : "1";
- const currentUnloadDuration = selectedPointData
- ? selectedPointData.action.unLoadDuration.toString()
- : "1";
+ const currentUnloadDuration = selectedPointData
+ ? selectedPointData.action.unLoadDuration.toString()
+ : "1";
- const currentPickPoint = selectedPointData?.action.pickUpPoint;
+ const currentPickPoint = selectedPointData?.action.pickUpPoint;
- const currentUnloadPoint = selectedPointData?.action.unLoadPoint;
+ const currentUnloadPoint = selectedPointData?.action.unLoadPoint;
- const availableActions = {
- defaultOption: "travel",
- options: ["travel"],
- };
+ const availableActions = {
+ defaultOption: "travel",
+ options: ["travel"],
+ };
- return (
+ return (
+ <>
+ {selectedEventData && (
<>
- {selectedEventData && (
- <>
-
- {
- if (option === "Add to Product") {
- handleAddEventToProduct({
- event: getEventByModelUuid(selectedAsset.modelUuid),
- addEvent,
- selectedProduct,
- clearSelectedAsset
- });
- } else {
- handleRemoveEventFromProduct();
- }
- }}
- />
-
- )}
- );
+ )
};
export default Simulations;
diff --git a/app/src/components/templates/FollowPerson.tsx b/app/src/components/templates/FollowPerson.tsx
new file mode 100644
index 0000000..a85d0c9
--- /dev/null
+++ b/app/src/components/templates/FollowPerson.tsx
@@ -0,0 +1,29 @@
+import React from "react";
+import RenderOverlay from "./Overlay";
+import { useSelectedUserStore } from "../../store/useCollabStore";
+import { useCamMode } from "../../store/store";
+
+const FollowPerson: React.FC = () => {
+ // Get the selected user from the store
+ const { selectedUser, clearSelectedUser } = useSelectedUserStore();
+ const { setCamMode } = useCamMode();
+ return (
+
-
+
);
}
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/storageMechanics.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/storageMechanics.tsx
index b295519..f22ec37 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/storageMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/storageMechanics.tsx
@@ -67,7 +67,7 @@ function StorageMechanics() {
return (
<>
{selectedEventData && (
- <>
+
-
+
)}
);
diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx
index 93fa3c7..d8456e5 100644
--- a/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx
+++ b/app/src/components/layout/sidebarRight/properties/eventProperties/mechanics/vehicleMechanics.tsx
@@ -4,182 +4,186 @@ import RenameInput from "../../../../../ui/inputs/RenameInput";
import LabledDropdown from "../../../../../ui/inputs/LabledDropdown";
import Trigger from "../trigger/Trigger";
import {
- useSelectedEventData,
- useSelectedProduct,
+ useSelectedEventData,
+ useSelectedProduct,
} from "../../../../../../store/simulation/useSimulationStore";
import { useProductStore } from "../../../../../../store/simulation/useProductStore";
import TravelAction from "../actions/TravelAction";
import ActionsList from "../components/ActionsList";
function VehicleMechanics() {
- const [activeOption, setActiveOption] = useState<"default" | "travel">(
- "default"
- );
- const [selectedPointData, setSelectedPointData] = useState
- { }}
- onChange={handleSpeedChange}
- />
-
+
+
+
+
+
+ { }}
+ onChange={handleSpeedChange}
+ />
+
+
+
-
-
+
+
+ { }}
+ disabled={true}
+ />
+
+
+
-
- )}
-
- )}
+ )}
+
-
-
- { }}
- disabled={true}
- />
-
-
-
-
-
-
-
-
- { }}
- onChange={handleSpeedChange}
- />
-
-
-
+
-
-
-
+
+
+
+
+
+
+ {}}
+ onChange={handleSpeedChange}
+ />
+
+
+
-
+
+
+
-
-
-
- )}
+ {activeOption === "travel" && (
+
+
+
- );
+ )}
+
+ );
}
export default VehicleMechanics;
diff --git a/app/src/components/layout/sidebarRight/simulation/Simulations.tsx b/app/src/components/layout/sidebarRight/simulation/Simulations.tsx
index bad955b..5b375a7 100644
--- a/app/src/components/layout/sidebarRight/simulation/Simulations.tsx
+++ b/app/src/components/layout/sidebarRight/simulation/Simulations.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from "react";
+import React, { useEffect, useRef, useState } from "react";
import {
AddIcon,
ArrowIcon,
@@ -45,6 +45,7 @@ const Simulations: React.FC = () => {
const { selectedAsset, clearSelectedAsset } = useSelectedAsset();
const email = localStorage.getItem('email')
const organization = (email!.split("@")[1]).split(".")[0];
+ const [openObjects, setOpenObjects] = useState(true);
const handleAddProduct = () => {
const id = generateUUID();
@@ -111,7 +112,7 @@ const Simulations: React.FC = () => {
Simulations
-
-
-
+
+ {
+ if (option === "Add to Product") {
+ handleAddEventToProduct({
+ event: getEventByModelUuid(selectedAsset.modelUuid),
+ addEvent,
+ selectedProduct,
+ clearSelectedAsset
+ });
+ } else {
+ handleRemoveEventFromProduct();
+ }
+ }}
+ />
+
)}
))}
-
- Products
@@ -152,73 +153,56 @@ const Simulations: React.FC = () => {
/>
{products.length > 1 && (
- handleRemoveProduct(product.productId)}
- >
-
+ <>
+ handleRemoveProduct(product.productId)}
+ >
+
+
+
+
+ {openObjects && events.map((event, index) =>
+
+ )}
+
+ {selectedAsset && (
+ handleResize(e, productsContainerRef)}
- >
-
-
-
-
-
-
- {events.map((event, index) => (
- Events
-
-
-
-
- Need to Compare Layout?
-
-
- Click 'Compare' to review and analyze the layout
- differences between them.
-
-
-
{
+ clearSelectedUser();
+ setCamMode("FirstPerson");
+ }}
+ style={{ "--user-color": selectedUser.color } as React.CSSProperties}
+ >
+
+ )}
+ {selectedUser.name}
+
+
);
};
diff --git a/app/src/components/ui/analysis/ProductionCapacity.tsx b/app/src/components/ui/analysis/ProductionCapacity.tsx
index 268ea81..192e009 100644
--- a/app/src/components/ui/analysis/ProductionCapacity.tsx
+++ b/app/src/components/ui/analysis/ProductionCapacity.tsx
@@ -1,10 +1,14 @@
-import React from "react";
+import React, { useState } from "react";
import { ProductionCapacityIcon } from "../../icons/analysis";
-const ProductionCapacity = () => {
+const ProductionCapacity = ({
+ progressPercent = 10,
+ avgProcessTime = "28.4 Secs/unit",
+ machineUtilization = "78%",
+ throughputValue = 128,
+ timeRange = { startTime: "08:00 AM", endTime: "09:00 AM" },
+}) => {
const totalBars = 6;
- const progressPercent = 50;
-
const barsToFill = Math.floor((progressPercent / 100) * totalBars);
const partialFillPercent =
((progressPercent / 100) * totalBars - barsToFill) * 100;
@@ -14,8 +18,10 @@ const ProductionCapacity = () => {
-
Throughput Summary
- 08:00 - 09:00 AM
+ Production Capacity
+
+ {timeRange.startTime} - {timeRange.endTime}
+
- 128 Units/hour
+ {throughputValue} Units/hour
- {/* Progress Bar */}
+ {/* Dynamic Progress Bar */}
{[...Array(totalBars)].map((_, i) => (
@@ -47,11 +53,11 @@ const ProductionCapacity = () => {
diff --git a/app/src/components/ui/analysis/ROISummary.tsx b/app/src/components/ui/analysis/ROISummary.tsx
index 331eaaf..11101fd 100644
--- a/app/src/components/ui/analysis/ROISummary.tsx
+++ b/app/src/components/ui/analysis/ROISummary.tsx
@@ -1,10 +1,71 @@
-import React from "react";
+import React, { useState } from "react";
import { ROISummaryIcon } from "../../icons/analysis";
+import SemiCircleProgress from "./SemiCircleProgress";
+
+const ROISummary = ({
+ roiSummaryData = {
+ productName: "Product name",
+ roiPercentage: 133,
+ paybackPeriod: 50.3,
+ totalCost: "₹ 1,20,000",
+ revenueGenerated: "₹ 2,80,000",
+ netProfit: "₹ 1,60,000",
+ costBreakdown: [
+ {
+ item: "Raw Material A",
+ unitCost: "₹ 10/unit",
+ laborCost: "₹ 0",
+ totalCost: "₹ 1000",
+ sellingPrice: "₹ 1500",
+ },
+ {
+ item: "Labor",
+ unitCost: "₹ 10/unit",
+ laborCost: "₹ 500",
+ totalCost: "₹ 500",
+ sellingPrice: "N/A",
+ },
+ {
+ item: "Product 1",
+ unitCost: "₹ 10/unit",
+ laborCost: "₹ 200",
+ totalCost: "₹ 200",
+ sellingPrice: "₹ 2000",
+ },
+ {
+ item: "Machine",
+ unitCost: "-",
+ laborCost: "-",
+ totalCost: "₹ 20,000",
+ sellingPrice: "N/A",
+ },
+ {
+ item: "Total",
+ unitCost: "-",
+ laborCost: "-",
+ totalCost: "₹ 1,20,000",
+ sellingPrice: "-",
+ },
+ {
+ item: "Net Profit",
+ unitCost: "-",
+ laborCost: "-",
+ totalCost: "₹ 1,60,000",
+ sellingPrice: "-",
+ },
+ ],
+ },
+}) => {
+ const [isTableOpen, setIsTableOpen] = useState(false); // State to handle the table open/close
+
+ // Function to toggle the breakdown table visibility
+ const toggleTable = () => {
+ setIsTableOpen(!isTableOpen);
+ };
-const ROISummary = () => {
return (
-
Avg. Process Time
- 28.4 Secs/unit
+ {avgProcessTime}
Machine Utilization
- 78%
+ {machineUtilization}
-
+
= ({
-
+
);
diff --git a/app/src/components/ui/analysis/SemiCircleProgress.tsx b/app/src/components/ui/analysis/SemiCircleProgress.tsx
new file mode 100644
index 0000000..084636b
--- /dev/null
+++ b/app/src/components/ui/analysis/SemiCircleProgress.tsx
@@ -0,0 +1,27 @@
+import React from "react";
+
+const SemiCircleProgress = () => {
+ const progress = 50;
+ const clampedProgress = Math.min(Math.max(progress, 0), 100);
+ const gradientProgress = clampedProgress * 0.5;
+
+ return (
+ ROI Summary
@@ -14,6 +75,111 @@ const ROISummary = () => {
+
+ Product :
+ {roiSummaryData.productName}
+
+
+
+
+ +{roiSummaryData.roiPercentage}% ROI with payback in
+ just {roiSummaryData.paybackPeriod} months
+
+
+
+
+
+
+ you're on track to hit it by
+
+ July 2029
+
+
+
+
+
+ Total Cost Incurred
+ {roiSummaryData.totalCost}
+
+
+ Revenue Generated
+
+ {roiSummaryData.revenueGenerated}
+
+
+
+ Net Profit
+ {roiSummaryData.netProfit}
+
+
+
+
+
+
+ â‘
+ Cost Breakdown
+
+
+
+ {isTableOpen ? "⌵" : "⌵"}
+
+
+
+
+
+
+ | Item | +Unit Cost | +Labor Cost | +Total Cost | +Selling Price | +
|---|---|---|---|---|
| {row.item} | +{row.unitCost} | +{row.laborCost} | +{row.totalCost} | +{row.sellingPrice} | +
+
+ 💡
+ How to improve ROI?
+
+
+ Increase CNC utilization by 10%{" "}
+ to shave 0.5 months of payback
+ period
+
+
+
+
+ );
+};
+
+export default SemiCircleProgress;
diff --git a/app/src/components/ui/analysis/ThroughputSummary.tsx b/app/src/components/ui/analysis/ThroughputSummary.tsx
index cb4fac5..b92a82d 100644
--- a/app/src/components/ui/analysis/ThroughputSummary.tsx
+++ b/app/src/components/ui/analysis/ThroughputSummary.tsx
@@ -11,21 +11,57 @@ import { PowerIcon, ThroughputSummaryIcon } from "../../icons/analysis";
ChartJS.register(LineElement, CategoryScale, LinearScale, PointElement);
+// Helper function to generate random colors
+const getRandomColor = () => {
+ const letters = "0123456789ABCDEF";
+ let color = "#";
+ for (let i = 0; i < 6; i++) {
+ color += letters[Math.floor(Math.random() * 16)];
+ }
+ return color;
+};
+
const ThroughputSummary = () => {
- const data = {
+ // Define all data internally within the component
+ const timeRange = {
+ startTime: "08:00 AM",
+ endTime: "09:00 AM",
+ };
+
+ const throughputData = {
labels: ["08:00", "08:10", "08:20", "08:30", "08:40", "08:50", "09:00"],
+ data: [100, 120, 110, 130, 125, 128, 132],
+ totalThroughput: 1240,
+ assetUsage: 85,
+ };
+
+ const energyConsumption = {
+ energyConsumed: 456,
+ unit: "KWH",
+ };
+
+ // Dynamic shift data
+ const shiftUtilization = [
+ { shift: 1, percentage: 30 },
+ { shift: 2, percentage: 40 },
+ { shift: 3, percentage: 30 },
+ ];
+
+ // Chart data configuration
+ const chartData = {
+ labels: throughputData.labels,
datasets: [
{
label: "Units/hour",
- data: [100, 120, 110, 130, 125, 128, 132],
+ data: throughputData.data,
borderColor: "#B392F0",
tension: 0.4,
- pointRadius: 0, // hide points
+ pointRadius: 0, // Hide points
},
],
};
- const options = {
+ const chartOptions = {
responsive: true,
scales: {
x: {
@@ -57,19 +93,15 @@ const ThroughputSummary = () => {
},
};
- const shiftUtilization = {
- "shift 1": 25,
- "shift 2": 45,
- "shift 3": 15,
- };
-
return (
+
+
+
+
+ {clampedProgress}%
+ Years
+ you're on track to hit it by July 2029
+ Throughput Summary
- 08:00 - 09:00 AM
+
+ {timeRange.startTime} - {timeRange.endTime}
+
- 1240 Units/hour
+ {throughputData.totalThroughput}{" "}
+ Units/hour
Asset usage
- 85%
+ {throughputData.assetUsage}%
-
456
- KWH
+ {energyConsumption.energyConsumed}
+ {energyConsumption.unit}
Shift Utilization
-
85%
+ {throughputData.assetUsage}%
-
-
-
+ {/* Dynamically create progress bars based on shiftUtilization array */}
+ {shiftUtilization.map((shift) => (
+
+ ))}
+
-
-
-
-
-
-
-
-
-
-
-
-
+ {/* Dynamically create shift indicators with random colors */}
+ {shiftUtilization.map((shift) => (
+
+
+
+
+ ))}
+
diff --git a/app/src/components/ui/simulation/simulationPlayer.tsx b/app/src/components/ui/simulation/simulationPlayer.tsx
index fb59d3a..a23652b 100644
--- a/app/src/components/ui/simulation/simulationPlayer.tsx
+++ b/app/src/components/ui/simulation/simulationPlayer.tsx
@@ -7,6 +7,15 @@ import {
usePlayButtonStore,
useResetButtonStore,
} from "../../../store/usePlayButtonStore";
+import {
+ DailyProductionIcon,
+ EndIcon,
+ ExpandIcon,
+ HourlySimulationIcon,
+ MonthlyROI,
+ SpeedIcon,
+ StartIcon,
+} from "../../icons/ExportCommonIcons";
const SimulationPlayer: React.FC = () => {
const { speed, setSpeed } = useAnimationPlaySpeed();
@@ -31,7 +40,7 @@ const SimulationPlayer: React.FC = () => {
const handleExit = () => {
setPlaySimulation(false);
setIsPlaying(false);
- setActiveTool("cursor")
+ setActiveTool("cursor");
};
// Slider functions starts
@@ -73,70 +82,277 @@ const SimulationPlayer: React.FC = () => {
}, []);
// Slider function ends
+ // UI-Part
+ const hourlySimulation = 25;
+ const dailyProduction = 75;
+ const monthlyROI = 50;
+
+ const process = [
+ { name: "process 1", completed: 0 }, // 0% completed
+ { name: "process 2", completed: 20 }, // 20% completed
+ { name: "process 3", completed: 40 }, // 40% completed
+ { name: "process 4", completed: 60 }, // 60% completed
+ { name: "process 5", completed: 80 }, // 80% completed
+ { name: "process 6", completed: 100 }, // 100% completed
+ { name: "process 7", completed: 0 }, // 0% completed
+ { name: "process 8", completed: 50 }, // 50% completed
+ { name: "process 9", completed: 90 }, // 90% completed
+ { name: "process 10", completed: 30 }, // 30% completed
+ ];
+ const [expand, setExpand] = useState(false);
+ // Move getRandomColor out of render
+ const getRandomColor = () => {
+ const letters = "0123456789ABCDEF";
+ let color = "#";
+ for (let i = 0; i < 6; i++) {
+ color += letters[Math.floor(Math.random() * 16)];
+ }
+ return color;
+ };
+
+ // Store colors for each process item
+ const [processColors, setProcessColors] = useState([]);
+
+ // Generate colors on mount or when process changes
+ useEffect(() => {
+ const generatedColors = process.map(() => getRandomColor());
+ setProcessColors(generatedColors);
+ }, []);
+
+ const intervals = [10, 20, 30, 40, 50, 60]; // in minutes
+ const totalSegments = intervals.length;
+ const progress = 80; // percent (example)
+
+ const processPlayerRef = useRef(null);
+ const processWrapperRef = useRef(null);
+ const [playerPosition, setPlayerPosition] = useState(0);
+
+ const handleProcessMouseDown = (e: React.MouseEvent) => {
+ if (!processWrapperRef.current) return;
+
+ const rect = processWrapperRef.current.getBoundingClientRect();
+ let x = e.clientX - rect.left;
+ x = Math.max(0, Math.min(x, rect.width));
+ setPlayerPosition(x);
+
+ const onMouseMove = (e: MouseEvent) => {
+ if (!processWrapperRef.current) return;
+ const newRect = processWrapperRef.current.getBoundingClientRect();
+ let newX = e.clientX - newRect.left;
+ newX = Math.max(0, Math.min(newX, newRect.width));
+ setPlayerPosition(newX);
+
+ const progressPercent = (newX / newRect.width) * 100;
+ console.log(`Dragging at progress: ${progressPercent.toFixed(1)}%`);
+ };
+
+ const onMouseUp = () => {
+ document.removeEventListener("mousemove", onMouseMove);
+ document.removeEventListener("mouseup", onMouseUp);
+ };
+
+ document.addEventListener("mousemove", onMouseMove);
+ document.addEventListener("mouseup", onMouseUp);
+ };
+
return (
-
+
-
- {
- handleReset();
- }}
- >
-
- {
- handlePlayStop();
- }}
- >
-
- {
- handleExit();
- }}
- >
-
-
- = ({
- userImage,
- userName,
- color,
-}) => {
- return (
- {
const navigate = useNavigate();
@@ -20,13 +20,14 @@ const CamModelsGroup = () => {
const { socket } = useSocketStore();
const { activeModule } = useModuleStore();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
const loader = new GLTFLoader();
const dracoLoader = new DRACOLoader();
dracoLoader.setDecoderPath("three/examples/jsm/libs/draco/gltf/");
loader.setDRACOLoader(dracoLoader);
const [cams, setCams] = useState([]);
- const [models, setModels] = useState>({});
+ const [models, setModels] = useState>({});
const dedupeCams = (cams: any[]) => {
const seen = new Set();
@@ -102,6 +103,7 @@ const CamModelsGroup = () => {
});
socket.on("cameraUpdateResponse", (data: any) => {
+
if (
!groupRef.current ||
socket.id === data.socketId ||
@@ -122,6 +124,11 @@ const CamModelsGroup = () => {
data.data.rotation.y,
data.data.rotation.z
),
+ target: new THREE.Vector3(
+ data.data.target.x,
+ data.data.target.y,
+ data.data.target.z
+ ),
},
}));
});
@@ -131,7 +138,7 @@ const CamModelsGroup = () => {
socket.off("userDisConnectResponse");
socket.off("cameraUpdateResponse");
};
- }, [socket]);
+ }, [email, loader, navigate, setActiveUsers, socket]);
useFrame(() => {
if (!groupRef.current) return;
@@ -217,9 +224,11 @@ const CamModelsGroup = () => {
position={[-0.015, 0, 0.7]}
>
0.5x
-
-
-
-
-
-
-
-
-
-
-
diff --git a/app/src/functions/collabUserIcon.tsx b/app/src/functions/collabUserIcon.tsx
deleted file mode 100644
index 9e6802b..0000000
--- a/app/src/functions/collabUserIcon.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from "react";
-import CustomAvatar from "./users/Avatar";
-
-interface CollabUserIconProps {
- userName: string;
- userImage?: string;
- color: string;
-}
-
-const CollabUserIcon: React.FC
-
- {speed.toFixed(1)}x
+
+
+ {/* hourlySimulation */}
+
-
+
+ {/* dailyProduction */}
+
+
-
+
+
+ Hourly Simulation
+
+
+
+
+ {/* monthlyROI */}
+
+
+
+
+ Daily Production
+
+
+
+
+
+
+
+
+ Monthly ROI
+
+
+
{" "}
8x
+
+
+ {
+ handleReset();
+ }}
+ >
+
+ {
+ handlePlayStop();
+ }}
+ >
+
+ {
+ handleExit();
+ }}
+ >
+
+ setExpand(!expand)}
+ >
+
+
+
+
+
+
+
+
+
+
+
+ 23 April ,25
+ 04:41 PM
+
+
+
+
+ {intervals.map((label, index) => {
+ const segmentProgress = (index / totalSegments) * 100;
+ const isFilled = progress >= segmentProgress;
+ return (
+
+
+ );
+ })}
+
+
+
+ {index < intervals.length - 1 && (
+ {label} mins
+
+ = ((index + 1) / totalSegments) * 100
+ ? "filled"
+ : ""
+ }`}
+ >
+ )}
+
+
+
+
+ 00:10:20
+
+
+
+
+
+
+
+
+ Speed
+
+
+ 0X
+
+
+
+
+
+
+
+
+
+
+
+
+ {speed.toFixed(1)}x
+
+
+ 8x
+
+
+
+ {process.map((item, index) => (
+
+ ))}
+
+
-
- );
-};
-
-export default CollabUserIcon;
diff --git a/app/src/modules/builder/groups/zoneGroup.tsx b/app/src/modules/builder/groups/zoneGroup.tsx
index d218534..1eadd24 100644
--- a/app/src/modules/builder/groups/zoneGroup.tsx
+++ b/app/src/modules/builder/groups/zoneGroup.tsx
@@ -69,7 +69,9 @@ const ZoneGroup: React.FC = () => {
},
transparent: true,
depthWrite: false,
- }), []);
+ }),
+ []
+ );
useEffect(() => {
const fetchZones = async () => {
@@ -148,6 +150,7 @@ const ZoneGroup: React.FC = () => {
}
}, [toolMode, toggleView]);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
const addZoneToBackend = async (zone: {
zoneId: string;
zoneName: string;
@@ -503,6 +506,15 @@ const ZoneGroup: React.FC = () => {
draggedSphere,
movePoint,
activeLayer,
+ raycaster,
+ pointer,
+ controls,
+ plane,
+ setZones,
+ setZonePoints,
+ addZoneToBackend,
+ handleDeleteZone,
+ updateZoneToBackend,
]);
useFrame(() => {
@@ -551,6 +563,7 @@ const ZoneGroup: React.FC = () => {
key={index}
position={midpoint}
rotation={[0, -angle, 0]}
+ visible={false}
>
- {userImage ? (
- 
- ) : (
-
-
- {userName}
-
-