diff --git a/app/src/components/icons/ContextMenuIcons.tsx b/app/src/components/icons/ContextMenuIcons.tsx index f48cf3b..e249bad 100644 --- a/app/src/components/icons/ContextMenuIcons.tsx +++ b/app/src/components/icons/ContextMenuIcons.tsx @@ -9,31 +9,31 @@ export function FlipXAxisIcon() { > @@ -52,37 +52,38 @@ export function FlipYAxisIcon() { > ); } + export function FlipZAxisIcon() { return ( ); diff --git a/app/src/components/icons/DashboardIcon.tsx b/app/src/components/icons/DashboardIcon.tsx index 314a3c8..f1f4d7d 100644 --- a/app/src/components/icons/DashboardIcon.tsx +++ b/app/src/components/icons/DashboardIcon.tsx @@ -9,13 +9,13 @@ export function NotificationIcon() { > @@ -34,7 +34,7 @@ export function HomeIcon() { > ); @@ -51,7 +51,7 @@ export function ProjectsIcon() { > ); @@ -70,103 +70,103 @@ export function TutorialsIcon() { cx="8.157" cy="8.35866" r="6.17928" - stroke="var(--icon-default-color)" + stroke="var(--text-color)" strokeWidth="0.562865" /> @@ -184,12 +184,12 @@ export function DocumentationIcon() { > @@ -208,7 +208,7 @@ export function HelpIcon() { @@ -236,17 +236,17 @@ export function LogoutIcon() { > diff --git a/app/src/components/icons/ExportCommonIcons.tsx b/app/src/components/icons/ExportCommonIcons.tsx index c78261e..eaa7701 100644 --- a/app/src/components/icons/ExportCommonIcons.tsx +++ b/app/src/components/icons/ExportCommonIcons.tsx @@ -24,7 +24,7 @@ export function ArrowIcon() { fill="none" xmlns="http://www.w3.org/2000/svg" > - + ); } @@ -40,14 +40,14 @@ export function FocusIcon() { > @@ -65,7 +65,7 @@ export function LockIcon({ isLocked }: { isLocked: boolean }) { > @@ -80,7 +80,7 @@ export function LockIcon({ isLocked }: { isLocked: boolean }) { > @@ -100,7 +100,7 @@ export function EyeIcon({ isClosed }: { isClosed: boolean }) { @@ -119,13 +119,13 @@ export function EyeIcon({ isClosed }: { isClosed: boolean }) { > @@ -142,9 +142,9 @@ export function KebebIcon() { fill="none" xmlns="http://www.w3.org/2000/svg" > - - - + + + ); } @@ -160,7 +160,7 @@ export function AddIcon() { > @@ -179,12 +179,12 @@ export function CloseIcon() { > @@ -203,11 +203,11 @@ export function SettingsIcon() { @@ -255,7 +255,7 @@ export function TrashIcon() { @@ -280,32 +280,32 @@ export function FilterIcon() { > @@ -324,7 +324,7 @@ export function EyeDroperIcon({ isActive }: { isActive: boolean }) { @@ -442,7 +442,7 @@ export function RemoveIcon() { fill="none" xmlns="http://www.w3.org/2000/svg" > - + ); } @@ -462,7 +462,7 @@ export function InfoIcon() { /> { cy="1.35112" rx="1.4993" ry="1.27477" - fill="var(--icon-default-color)" + fill="var(--text-color)" /> ); @@ -562,31 +562,31 @@ export const DeleteIcon = () => { > @@ -607,7 +607,7 @@ export const HourlySimulationIcon = () => { fillRule="evenodd" clipRule="evenodd" d="M9.22794 8.29297C9.22794 9.1131 9.69975 9.49575 10.1561 9.86512C10.7275 10.3286 11.371 10.8503 11.4375 12.4462H5.91087C5.97732 10.8503 6.62079 10.3286 7.19228 9.86512C7.64859 9.49575 8.1204 9.1131 8.1204 8.29297C8.1204 7.47284 7.64859 7.09018 7.19228 6.72082C6.62079 6.25732 5.97732 5.73567 5.91087 4.13971H11.4375C11.371 5.73567 10.7275 6.25732 10.1561 6.72082C9.69975 7.09018 9.22794 7.47284 9.22794 8.29297ZM10.5049 7.15054C11.1694 6.61173 11.9968 5.94112 11.9968 3.86282V3.58594H5.35156V3.86282C5.35156 5.94112 6.17889 6.61173 6.84342 7.15054C7.27867 7.50385 7.56663 7.73699 7.56663 8.29297C7.56663 8.84895 7.27867 9.08209 6.84342 9.4354C6.17889 9.97421 5.35156 10.6448 5.35156 12.7231V13H11.9968V12.7231C11.9968 10.6448 11.1695 9.97421 10.5049 9.4354C10.0697 9.08209 9.78171 8.84895 9.78171 8.29297C9.78171 7.73699 10.0697 7.50385 10.5049 7.15054ZM8.54764 9.83582L7.71588 10.5109C7.3515 10.806 7.03751 11.0602 6.86916 11.6156H10.4792C10.3108 11.0602 9.99685 10.806 9.63247 10.5109L8.80071 9.83582C8.72706 9.77602 8.62129 9.77602 8.54764 9.83582Z" - fill="#2B3344" + fill="var(--text-color)" /> ); @@ -624,15 +624,15 @@ export const DailyProductionIcon = () => { > ); @@ -649,14 +649,14 @@ export const MonthlyROI = () => { > ); }; -export const ExpandIcon = () => { - return ( +export const ExpandIcon = ({ isActive }: { isActive: boolean }) => { + return isActive ? ( { > + + ) : ( + + + + ); @@ -691,21 +721,21 @@ export const StartIcon = () => { > { > { /> { fillRule="evenodd" clipRule="evenodd" d="M9.55992 9.81727L4.10352 6.17969V14.7664L9.55992 11.1288V14.7664L16 10.4731L9.55992 6.17969V9.81727ZM5.1948 12.7273V8.21877L8.57624 10.4731L5.1948 12.7273ZM10.6512 12.7273V8.21877L14.0326 10.4731L10.6512 12.7273Z" - fill="#2B3344" + fill="var(--text-color)" /> ); }; -// export const DublicateIcon = () => { -// return ( -// -// -// -// ); -// }; diff --git a/app/src/components/icons/ExportModuleIcons.tsx b/app/src/components/icons/ExportModuleIcons.tsx index 1dda323..c1a8432 100644 --- a/app/src/components/icons/ExportModuleIcons.tsx +++ b/app/src/components/icons/ExportModuleIcons.tsx @@ -10,7 +10,7 @@ export function BuilderIcon({ isActive }: { isActive: boolean }) { > @@ -29,41 +29,41 @@ export function SimulationIcon({ isActive }: { isActive: boolean }) { > @@ -81,19 +81,19 @@ export function VisualizationIcon({ isActive }: { isActive: boolean }) { > @@ -112,20 +112,20 @@ export function CartIcon({ isActive }: { isActive: boolean }) { > diff --git a/app/src/components/icons/HeaderIcons.tsx b/app/src/components/icons/HeaderIcons.tsx index ef02f02..c2a0f62 100644 --- a/app/src/components/icons/HeaderIcons.tsx +++ b/app/src/components/icons/HeaderIcons.tsx @@ -9,7 +9,7 @@ export function ProjectIcon() { > @@ -31,26 +31,26 @@ export function ToggleSidebarIcon() { width="17" height="13.7273" rx="3.59091" - stroke="var(--accent-color)" + stroke="var(--text-color)" /> ); diff --git a/app/src/components/icons/RealTimeVisulationIcons.tsx b/app/src/components/icons/RealTimeVisulationIcons.tsx index d418247..84d8cca 100644 --- a/app/src/components/icons/RealTimeVisulationIcons.tsx +++ b/app/src/components/icons/RealTimeVisulationIcons.tsx @@ -10,43 +10,43 @@ export function CleanPannel() { diff --git a/app/src/components/icons/SimulationIcons.tsx b/app/src/components/icons/SimulationIcons.tsx index b4aa881..ef23c8f 100644 --- a/app/src/components/icons/SimulationIcons.tsx +++ b/app/src/components/icons/SimulationIcons.tsx @@ -9,13 +9,17 @@ export function AnalysisIcon({ isActive }: { isActive: boolean }) { > @@ -34,11 +38,15 @@ export function MechanicsIcon({ isActive }: { isActive: boolean }) { > ); @@ -55,15 +63,21 @@ export function PropertiesIcon({ isActive }: { isActive: boolean }) { > ); @@ -82,13 +96,17 @@ export function SimulationIcon({ isActive }: { isActive: boolean }) { fillRule="evenodd" clipRule="evenodd" d="M6.44104 7.04762C6.57815 6.98413 6.73614 6.98413 6.87325 7.04762L12.0161 9.42958C12.198 9.51377 12.3143 9.69589 12.3143 9.89624V15.8512C12.3143 16.0347 12.2165 16.2043 12.0577 16.2962L6.9148 19.2736C6.75547 19.3659 6.55881 19.3659 6.39949 19.2736L1.25661 16.2962C1.09779 16.2043 1 16.0347 1 15.8512V9.89624C1 9.69589 1.11635 9.51377 1.29815 9.42958L6.44104 7.04762ZM2.02857 10.7297L6.14286 12.794V17.9366L2.02857 15.5546V10.7297ZM7.17143 17.9366L11.2857 15.5546V10.7297L7.17143 12.794V17.9366ZM6.65714 11.9013L10.6163 9.91477L6.65714 8.08106L2.69798 9.91477L6.65714 11.9013Z" - fill={"var(--icon-default-color-active)"} + fill={ + isActive ? "var(--icon-default-color-active)" : "var(--text-color)" + } /> ); diff --git a/app/src/components/icons/analysis.tsx b/app/src/components/icons/analysis.tsx index d081a86..591df60 100644 --- a/app/src/components/icons/analysis.tsx +++ b/app/src/components/icons/analysis.tsx @@ -31,7 +31,7 @@ export function ProductionCapacityIcon() { fillRule="evenodd" clipRule="evenodd" d="M13.9063 12.9046L14.2265 13.86L14.4378 14.5073C14.9906 16.2239 15.2594 17.2662 15.2594 17.7299C15.2594 18.8219 14.3742 19.7072 13.2822 19.7072C12.1902 19.7072 11.305 18.8219 11.305 17.7299C11.305 17.2106 11.6422 15.9654 12.3379 13.86L12.658 12.9046C12.8604 12.3082 13.704 12.3082 13.9063 12.9046ZM13.2822 7.84375C16.9222 7.84375 19.873 10.7945 19.873 14.4345C19.873 15.7565 19.4823 17.0219 18.7621 18.0974C18.5596 18.3999 18.1502 18.4809 17.8478 18.2784C17.5453 18.0758 17.4643 17.6665 17.6668 17.364C18.2428 16.5038 18.5548 15.4933 18.5548 14.4345C18.5548 11.5225 16.1942 9.16191 13.2822 9.16191C10.3702 9.16191 8.00956 11.5225 8.00956 14.4345C8.00956 15.4933 8.32153 16.5038 8.89752 17.364C9.10005 17.6665 9.01904 18.0758 8.71659 18.2784C8.41414 18.4809 8.00477 18.3999 7.80224 18.0974C7.08206 17.0219 6.69141 15.7565 6.69141 14.4345C6.69141 10.7945 9.6422 7.84375 13.2822 7.84375ZM13.2822 15.2247L13.0657 15.9238L12.9161 16.4319C12.7219 17.111 12.6231 17.5509 12.6231 17.7299C12.6231 18.0939 12.9182 18.389 13.2822 18.389C13.6462 18.389 13.9413 18.0939 13.9413 17.7299C13.9413 17.511 13.7936 16.9022 13.5044 15.9428L13.2822 15.2247Z" - fill="white" + fill="var(--text-color)" /> ); diff --git a/app/src/components/icons/marketPlaceIcons.tsx b/app/src/components/icons/marketPlaceIcons.tsx index 6952ae1..5a9f293 100644 --- a/app/src/components/icons/marketPlaceIcons.tsx +++ b/app/src/components/icons/marketPlaceIcons.tsx @@ -52,13 +52,13 @@ export function EyeIconBig() { > @@ -80,7 +80,7 @@ export function CommentsIcon() { fillRule="evenodd" clipRule="evenodd" d="M8 13C7.416 13 6.852 12.932 6.31 12.8165L3.956 14.2315L3.9875 11.912C2.183 10.827 1 9.033 1 7C1 3.6865 4.134 1 8 1C11.866 1 15 3.6865 15 7C15 10.314 11.866 13 8 13ZM8 0C3.582 0 0 3.1345 0 7C0 9.2095 1.1725 11.177 3 12.4595V16L6.5045 13.8735C6.9895 13.9535 7.4885 14 8 14C12.418 14 16 10.866 16 7C16 3.1345 12.418 0 8 0ZM11.5 5.5H4.5C4.224 5.5 4 5.724 4 6C4 6.2765 4.224 6.5 4.5 6.5H11.5C11.776 6.5 12 6.2765 12 6C12 5.724 11.776 5.5 11.5 5.5ZM10.5 8.5H5.5C5.224 8.5 5 8.7235 5 9C5 9.2765 5.224 9.5 5.5 9.5H10.5C10.776 9.5 11 9.2765 11 9C11 8.7235 10.776 8.5 10.5 8.5Z" - fill="var(--icon-default-color)" + fill="var(--text-color)" /> @@ -131,7 +131,7 @@ export function StarsIconSmall() { ); } -export function FiileedStarsIconSmall() { +export function FilledStarsIconSmall() { return ( { } }; return ( -
+
- {searchValue ? ( -
-
-
-

Results for {searchValue}

+
+
+ {searchValue ? ( +
+
+
+

Results for {searchValue}

+
+
+ {categoryAssets && + categoryAssets?.map((asset: any, index: number) => ( +
+ {asset.filename} + +
+ {asset.filename + .split("_") + .map( + (word: any) => + word.charAt(0).toUpperCase() + word.slice(1) + ) + .join(" ")} +
+
+ ))} +
+
-
-
- {categoryAssets && - categoryAssets?.map((asset: any, index: number) => ( + ) : selectedCategory ? ( +
+

+ {selectedCategory}{" "}
{ + setSelectedCategory(null); + setCategoryAssets([]); + }} > - {asset.filename} + ← Back +
+

+
+ {categoryAssets && + categoryAssets?.map((asset: any, index: number) => ( +
+ {asset.filename} { + setSelectedItem({ + name: asset.filename, + id: asset.AssetID, + type: + asset.type === "undefined" + ? undefined + : asset.type, + }); + }} + /> -
- {asset.filename - .split("_") - .map( - (word: any) => - word.charAt(0).toUpperCase() + word.slice(1) - ) - .join(" ")} -
-
- ))} -
-
- ) : selectedCategory ? ( -
-
{ - setSelectedCategory(null); - setCategoryAssets([]); - }} - > - ← Back -
-

{selectedCategory}

-
- {categoryAssets && - categoryAssets?.map((asset: any, index: number) => ( -
- {asset.filename} { - setSelectedItem({ - name: asset.filename, - id: asset.AssetID, - type: - asset.type === "undefined" ? undefined : asset.type, - }); - }} - /> - -
- {asset.filename - .split("_") - .map( - (word: any) => - word.charAt(0).toUpperCase() + word.slice(1) - ) - .join(" ")} -
-
- ))} -
-
- ) : ( -
-

Categories

-
- {Array.from( - new Set(categoryList.map((asset) => asset.category)) - ).map((category, index) => { - const categoryInfo = categoryList.find( - (asset) => asset.category === category - ); - return ( -
fetchCategoryAssets(category)} - > - {category} -
{category}
-
- ); - })} -
-
- )} +
+ {asset.filename + .split("_") + .map( + (word: any) => + word.charAt(0).toUpperCase() + word.slice(1) + ) + .join(" ")} +
+
+ ))} +
+
+ ) : ( +
+

Categories

+
+ {Array.from( + new Set(categoryList.map((asset) => asset.category)) + ).map((category, index) => { + const categoryInfo = categoryList.find( + (asset) => asset.category === category + ); + return ( +
fetchCategoryAssets(category)} + > + {category} +
{category}
+
+ ); + })} +
+
+ )} + +
); }; diff --git a/app/src/components/layout/sidebarLeft/Outline.tsx b/app/src/components/layout/sidebarLeft/Outline.tsx index 417f069..152c357 100644 --- a/app/src/components/layout/sidebarLeft/Outline.tsx +++ b/app/src/components/layout/sidebarLeft/Outline.tsx @@ -11,7 +11,7 @@ const Outline: React.FC = () => { }; const dropdownItems = [ - { id: "1", name: "Ground Floor" }, + { id: "1", name: "Ground Floor", active: true }, // { id: "2", name: "Floor 1" }, ]; // Example dropdown items diff --git a/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx b/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx index 3b2549a..1434446 100644 --- a/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx +++ b/app/src/components/layout/sidebarRight/properties/eventProperties/trigger/Trigger.tsx @@ -91,44 +91,42 @@ const Trigger: React.FC = () => {
{selectedTrigger}
setActiveOption(option)} />
-
- { - const newModel = [...triggeredModel]; - newModel[0] = option; - setTriggeredModel(newModel); - }} - /> -
-
- { - const newPoint = [...triggeredPoint]; - newPoint[0] = option; - setTriggeredPoint(newPoint); - }} - /> -
-
- { - const newAction = [...triggeredAction]; - newAction[0] = option; - setTriggeredAction(newAction); - }} - /> -
+ { + const newModel = [...triggeredModel]; + newModel[0] = option; + setTriggeredModel(newModel); + }} + /> + { + const newPoint = [...triggeredPoint]; + newPoint[0] = option; + setTriggeredPoint(newPoint); + }} + /> + { + const newAction = [...triggeredAction]; + newAction[0] = option; + setTriggeredAction(newAction); + }} + />
diff --git a/app/src/components/ui/analysis/ProductionCapacity.tsx b/app/src/components/ui/analysis/ProductionCapacity.tsx index 192e009..31c3a02 100644 --- a/app/src/components/ui/analysis/ProductionCapacity.tsx +++ b/app/src/components/ui/analysis/ProductionCapacity.tsx @@ -2,7 +2,7 @@ import React, { useState } from "react"; import { ProductionCapacityIcon } from "../../icons/analysis"; const ProductionCapacity = ({ - progressPercent = 10, + progressPercent = 50, avgProcessTime = "28.4 Secs/unit", machineUtilization = "78%", throughputValue = 128, diff --git a/app/src/components/ui/analysis/ThroughputSummary.tsx b/app/src/components/ui/analysis/ThroughputSummary.tsx index b92a82d..e9946ae 100644 --- a/app/src/components/ui/analysis/ThroughputSummary.tsx +++ b/app/src/components/ui/analysis/ThroughputSummary.tsx @@ -8,6 +8,7 @@ import { PointElement, } from "chart.js"; import { PowerIcon, ThroughputSummaryIcon } from "../../icons/analysis"; +import { getAvatarColor } from "../../../modules/collaboration/functions/getAvatarColor"; ChartJS.register(LineElement, CategoryScale, LinearScale, PointElement); @@ -142,13 +143,13 @@ const ThroughputSummary = () => {
{/* Dynamically create progress bars based on shiftUtilization array */} - {shiftUtilization.map((shift) => ( + {shiftUtilization.map((shift, index) => (
))} @@ -156,11 +157,11 @@ const ThroughputSummary = () => {
{/* Dynamically create shift indicators with random colors */} - {shiftUtilization.map((shift) => ( + {shiftUtilization.map((shift, index) => (
diff --git a/app/src/components/ui/list/DropDownList.tsx b/app/src/components/ui/list/DropDownList.tsx index d0b62e8..0d93d72 100644 --- a/app/src/components/ui/list/DropDownList.tsx +++ b/app/src/components/ui/list/DropDownList.tsx @@ -3,7 +3,6 @@ import List from "./List"; import { AddIcon, ArrowIcon, FocusIcon } from "../../icons/ExportCommonIcons"; import KebabMenuListMultiSelect from "./KebebMenuListMultiSelect"; import { useFloorItems, useZones } from "../../../store/store"; -import { useSelectedZoneStore } from "../../../store/visualization/useZoneStore"; interface DropDownListProps { value?: string; // Value to display in the DropDownList @@ -17,6 +16,17 @@ interface DropDownListProps { remove?: boolean; } +interface Zone { + zoneId: string; + zoneName: string; + points: [number, number, number][]; // polygon vertices +} +interface ZoneData { + id: string; + name: string; + assets: { id: string; name: string; position?: []; rotation?: {} }[]; +} + const DropDownList: React.FC = ({ value = "Dropdown", items = [], @@ -33,38 +43,30 @@ const DropDownList: React.FC = ({ remove, }) => { const [isOpen, setIsOpen] = useState(defaultOpen); - const { zones, setZones } = useZones(); + const { zones } = useZones(); const handleToggle = () => { setIsOpen((prev) => !prev); // Toggle the state }; - interface Asset { - id: string; - name: string; - position: [number, number, number]; // x, y, z - } - interface Zone { - zoneId: string; - zoneName: string; - points: [number, number, number][]; // polygon vertices - } - interface ZoneData { - id: string; - name: string; - assets: { id: string; name: string; position?: []; rotation?: {} }[]; - } const [zoneDataList, setZoneDataList] = useState([]); const { floorItems } = useFloorItems(); - const isPointInsidePolygon = (point: [number, number], polygon: [number, number][]) => { + const isPointInsidePolygon = ( + point: [number, number], + polygon: [number, number][] + ) => { let inside = false; for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) { - const xi = polygon[i][0], zi = polygon[i][1]; - const xj = polygon[j][0], zj = polygon[j][1]; + const xi = polygon[i][0], + zi = polygon[i][1]; + const xj = polygon[j][0], + zj = polygon[j][1]; - const intersect = ((zi > point[1]) !== (zj > point[1])) && - (point[0] < (xj - xi) * (point[1] - zi) / (zj - zi + 0.000001) + xi); + const intersect = + // eslint-disable-next-line no-mixed-operators + zi > point[1] !== zj > point[1] && + point[0] < ((xj - xi) * (point[1] - zi)) / (zj - zi + 0.000001) + xi; if (intersect) inside = !inside; } @@ -73,18 +75,21 @@ const DropDownList: React.FC = ({ useEffect(() => { const updatedZoneList: ZoneData[] = zones?.map((zone: Zone) => { - const polygon2D = zone.points.map((p: [number, number, number]) => [p[0], p[2]]) as [number, number][]; + const polygon2D = zone.points.map((p: [number, number, number]) => [ + p[0], + p[2], + ]); const assetsInZone = floorItems .filter((item: any) => { const [x, , z] = item.position; - return isPointInsidePolygon([x, z], polygon2D); + return isPointInsidePolygon([x, z], polygon2D as [number, number][]); }) .map((item: any) => ({ id: item.modelUuid, name: item.modelName, position: item.position, - rotation: item.rotation + rotation: item.rotation, })); return { @@ -99,9 +104,9 @@ const DropDownList: React.FC = ({ return (
-
+
+
{showFocusIcon && (
@@ -118,13 +123,13 @@ const DropDownList: React.FC = ({
)} -
-
+
{isOpen && ( diff --git a/app/src/components/ui/list/List.tsx b/app/src/components/ui/list/List.tsx index cdd2a53..eebcaa7 100644 --- a/app/src/components/ui/list/List.tsx +++ b/app/src/components/ui/list/List.tsx @@ -12,7 +12,6 @@ import { LockIcon, RemoveIcon, } from "../../icons/ExportCommonIcons"; -import { useThree } from "@react-three/fiber"; import { useFloorItems, useZoneAssetId, useZones } from "../../../store/store"; import { zoneCameraUpdate } from "../../../services/visulization/zone/zoneCameraUpdation"; import { setFloorItemApi } from "../../../services/factoryBuilder/assest/floorAsset/setFloorItemApi"; @@ -32,20 +31,19 @@ interface ZoneItem { interface ListProps { items?: ZoneItem[]; - placeholder?: string; remove?: boolean; } const List: React.FC = ({ items = [], remove }) => { - const { activeModule, setActiveModule } = useModuleStore(); + const { activeModule } = useModuleStore(); const { selectedZone, setSelectedZone } = useSelectedZoneStore(); const { zoneAssetId, setZoneAssetId } = useZoneAssetId(); - const { zones, setZones } = useZones(); + const { zones } = useZones(); const { setSubModule } = useSubModuleStore(); const [expandedZones, setExpandedZones] = useState>( {} ); - const { floorItems, setFloorItems } = useFloorItems(); + const { setFloorItems } = useFloorItems(); useEffect(() => { useSelectedZoneStore.getState().setSelectedZone({ @@ -70,39 +68,36 @@ const List: React.FC = ({ items = [], remove }) => { async function handleSelectZone(id: string) { try { if (selectedZone?.zoneId === id) { - return; } setSubModule("zoneProperties"); const email = localStorage.getItem("email"); - const organization = email?.split("@")[1]?.split(".")[0] || ""; + const organization = email?.split("@")[1]?.split(".")[0] ?? ""; let response = await getZoneData(id, organization); setSelectedZone({ zoneName: response?.zoneName, - activeSides: response?.activeSides || [], - panelOrder: response?.panelOrder || [], - lockedPanels: response?.lockedPanels || [], - widgets: response?.widgets || [], + activeSides: response?.activeSides ?? [], + panelOrder: response?.panelOrder ?? [], + lockedPanels: response?.lockedPanels ?? [], + widgets: response?.widgets ?? [], zoneId: response?.zoneId, - zoneViewPortTarget: response?.viewPortCenter || [], - zoneViewPortPosition: response?.viewPortposition || [], + zoneViewPortTarget: response?.viewPortCenter ?? [], + zoneViewPortPosition: response?.viewPortposition ?? [], }); - - } catch (error) { - + console.log(error); } } function handleAssetClick(asset: Asset) { - setZoneAssetId(asset) + setZoneAssetId(asset); } async function handleZoneNameChange(newName: string) { - const email = localStorage.getItem("email") || ""; + const email = localStorage.getItem("email") ?? ""; const organization = email?.split("@")[1]?.split(".")[0]; const isDuplicate = zones.some( @@ -128,12 +123,16 @@ const List: React.FC = ({ items = [], remove }) => { } async function handleZoneAssetName(newName: string) { - const email = localStorage.getItem("email") || ""; + const email = localStorage.getItem("email") ?? ""; const organization = email?.split("@")[1]?.split(".")[0]; if (zoneAssetId?.id) { - let response = await setFloorItemApi(organization, zoneAssetId.id, newName) - console.log('response: ', response); + let response = await setFloorItemApi( + organization, + zoneAssetId.id, + newName + ); + console.log("response: ", response); setFloorItems((prevFloorItems: any[]) => prevFloorItems.map((floorItems) => floorItems.modelUuid === zoneAssetId.id @@ -160,7 +159,7 @@ const List: React.FC = ({ items = [], remove }) => {
  • -
    handleSelectZone(item.id)} > @@ -169,8 +168,7 @@ const List: React.FC = ({ items = [], remove }) => { onRename={handleZoneNameChange} checkDuplicate={checkZoneNameDuplicate} /> - -
    +
    @@ -185,12 +183,12 @@ const List: React.FC = ({ items = [], remove }) => {
    )} {item.assets && item.assets.length > 0 && ( -
    toggleZoneExpansion(item.id)} > -
    + )}
    @@ -206,20 +204,26 @@ const List: React.FC = ({ items = [], remove }) => { className="list-container asset-item" >
    -
    handleAssetClick(asset)} > - -
    +
    -
    +
    -
    + +
    + {remove && ( -
    +
    + )}
    diff --git a/app/src/components/ui/menu/menu.tsx b/app/src/components/ui/menu/menu.tsx index a416c2c..39508b6 100644 --- a/app/src/components/ui/menu/menu.tsx +++ b/app/src/components/ui/menu/menu.tsx @@ -28,7 +28,7 @@ const MenuBar: React.FC = ({ setOpenMenu }) => { window.location.reload(); } - const savedTheme: string | null = localStorage.getItem("theme") || "light"; + const savedTheme: string | null = localStorage.getItem("theme") ?? "light"; return (
    { + const MAX_SPEED = 8; // Maximum speed + + const [expand, setExpand] = useState(true); + const { speed, setSpeed } = useAnimationPlaySpeed(); const [playSimulation, setPlaySimulation] = useState(false); const { setIsPlaying } = usePlayButtonStore(); @@ -29,8 +34,7 @@ const SimulationPlayer: React.FC = () => { // Button functions const handleReset = () => { - setReset(true); - // setReset(!isReset); + setReset(!isReset); setSpeed(1); }; const handlePlayStop = () => { @@ -49,7 +53,7 @@ const SimulationPlayer: React.FC = () => { }; const calculateHandlePosition = () => { - return ((speed - 0.5) / (8 - 0.5)) * 100; + return ((speed - 0.5) / (MAX_SPEED - 0.5)) * 100; }; const handleMouseDown = () => { @@ -99,7 +103,6 @@ const SimulationPlayer: React.FC = () => { { 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"; @@ -121,11 +124,11 @@ const SimulationPlayer: React.FC = () => { const intervals = [10, 20, 30, 40, 50, 60]; // in minutes const totalSegments = intervals.length; - const progress = 80; // percent (example) + const progress = 20; // percent (example) const processPlayerRef = useRef(null); const processWrapperRef = useRef(null); - const [playerPosition, setPlayerPosition] = useState(0); + const [playerPosition, setPlayerPosition] = useState(20); // initial position const handleProcessMouseDown = (e: React.MouseEvent) => { if (!processWrapperRef.current) return; @@ -204,7 +207,7 @@ const SimulationPlayer: React.FC = () => {
    • -
    { handleReset(); @@ -212,8 +215,8 @@ const SimulationPlayer: React.FC = () => { > Reset -
    -
    +
    -
    +
    -
    +
    + +
    @@ -295,7 +298,7 @@ const SimulationPlayer: React.FC = () => { Speed
    -
    0X
    +
    0.5X
    @@ -306,53 +309,57 @@ const SimulationPlayer: React.FC = () => {
    -
    {speed.toFixed(1)}x -
    +
    -
    8x
    +
    4x
    -
    +
    00:00
    +
    24:00
    - {process.map((item, index) => ( -
    - ))} +
    + {process.map((item, index) => ( +
    +
    +
    + ))} +
    -
    diff --git a/app/src/modules/market/AssetPreview.tsx b/app/src/modules/market/AssetPreview.tsx index 1d39920..a53a60d 100644 --- a/app/src/modules/market/AssetPreview.tsx +++ b/app/src/modules/market/AssetPreview.tsx @@ -1,6 +1,6 @@ import React, { Suspense, useEffect } from "react"; import assetImage from "../../assets/image/image.png"; -import { FiileedStarsIconSmall } from "../../components/icons/marketPlaceIcons"; +import { FilledStarsIconSmall } from "../../components/icons/marketPlaceIcons"; import { Canvas, useThree } from "@react-three/fiber"; import { ContactShadows, OrbitControls, Text } from "@react-three/drei"; import GltfLoader from "./GltfLoader"; @@ -98,7 +98,7 @@ const AssetPreview: React.FC = ({
    - + {selectedCard.rating}
    {selectedCard.views} views
    diff --git a/app/src/modules/market/Card.tsx b/app/src/modules/market/Card.tsx index ec9db06..a7010cc 100644 --- a/app/src/modules/market/Card.tsx +++ b/app/src/modules/market/Card.tsx @@ -3,6 +3,7 @@ import { CommentsIcon, DownloadIcon, EyeIconBig, + FilledStarsIconSmall, StarsIconSmall, VerifiedIcon, } from "../../components/icons/marketPlaceIcons"; @@ -80,7 +81,13 @@ const Card: React.FC = ({
    {[...Array(5)].map((_, index) => ( - + <> + {index < 3 ? ( + + ) : ( + + )} + ))}
    diff --git a/app/src/modules/visualization/RealTimeVisulization.tsx b/app/src/modules/visualization/RealTimeVisulization.tsx index 05f7371..caf37a1 100644 --- a/app/src/modules/visualization/RealTimeVisulization.tsx +++ b/app/src/modules/visualization/RealTimeVisulization.tsx @@ -11,10 +11,7 @@ import { useDroppedObjectsStore, useFloatingWidget, } from "../../store/visualization/useDroppedObjectsStore"; -import { - useSocketStore, - useWidgetSubOption, -} from "../../store/store"; +import { useSocketStore, useWidgetSubOption } from "../../store/store"; import { getZone2dData } from "../../services/visulization/zone/getZoneData"; import { generateUniqueId } from "../../functions/generateUniqueId"; import { determinePosition } from "./functions/determinePosition"; @@ -69,13 +66,17 @@ const RealTimeVisulization: React.FC = () => { const { selectedZone, setSelectedZone } = useSelectedZoneStore(); const { setRightSelect } = useRightSelected(); - const { editWidgetOptions, setEditWidgetOptions } = useEditWidgetOptionsStore(); + const { editWidgetOptions, setEditWidgetOptions } = + useEditWidgetOptionsStore(); const { rightClickSelected, setRightClickSelected } = useRightClickSelected(); const [openConfirmationPopup, setOpenConfirmationPopup] = useState(false); const { setFloatingWidget } = useFloatingWidget(); const { widgetSubOption } = useWidgetSubOption(); const { visualizationSocket } = useSocketStore(); const { setSelectedChartId } = useWidgetStore(); + const [waitingPanels, setWaitingPanels] = useState(null); + + console.log("waitingPanels: ", waitingPanels); OuterClick({ contextClassName: [ @@ -377,6 +378,8 @@ const RealTimeVisulization: React.FC = () => { setHiddenPanels={setHiddenPanels} selectedZone={selectedZone} setSelectedZone={setSelectedZone} + waitingPanels={waitingPanels} + setWaitingPanels={setWaitingPanels} /> )} @@ -385,6 +388,7 @@ const RealTimeVisulization: React.FC = () => { setSelectedZone={setSelectedZone} hiddenPanels={hiddenPanels} setZonesData={setZonesData} + waitingPanels={waitingPanels} /> )} diff --git a/app/src/modules/visualization/widgets/panel/AddButtons.tsx b/app/src/modules/visualization/widgets/panel/AddButtons.tsx index 4877824..6968c2e 100644 --- a/app/src/modules/visualization/widgets/panel/AddButtons.tsx +++ b/app/src/modules/visualization/widgets/panel/AddButtons.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState } from "react"; import { CleanPannel, EyeIcon, @@ -6,8 +6,6 @@ import { } from "../../../../components/icons/RealTimeVisulationIcons"; import { AddIcon } from "../../../../components/icons/ExportCommonIcons"; import { useSocketStore } from "../../../../store/store"; -import { clearPanel } from "../../../../services/visulization/zone/clearPanel"; -import { lockPanel } from "../../../../services/visulization/zone/lockPanel"; // Define the type for `Side` type Side = "top" | "bottom" | "left" | "right"; @@ -57,6 +55,8 @@ interface ButtonsProps { >; hiddenPanels: HiddenPanels; // Updated prop type setHiddenPanels: React.Dispatch>; // Updated prop type + waitingPanels: any; + setWaitingPanels: any; } const AddButtons: React.FC = ({ @@ -64,6 +64,8 @@ const AddButtons: React.FC = ({ setSelectedZone, setHiddenPanels, hiddenPanels, + waitingPanels, + setWaitingPanels, }) => { const { visualizationSocket } = useSocketStore(); @@ -174,65 +176,62 @@ const AddButtons: React.FC = ({ // Function to handle "+" button click const handlePlusButtonClick = async (side: Side) => { + const zoneId = selectedZone.zoneId; + if (selectedZone.activeSides.includes(side)) { - console.log("open"); - // Panel already exists: Remove widgets from that side and update activeSides - const email = localStorage.getItem("email") || ""; - const organization = email?.split("@")[1]?.split(".")[0]; // Fallback value + // Already active: Schedule removal - // Remove all widgets associated with the side and update active sides - const cleanedWidgets = selectedZone.widgets.filter( - (widget) => widget.panel !== side - ); - const newActiveSides = selectedZone.activeSides.filter((s) => s !== side); + setWaitingPanels(side); // Mark as waiting - const updatedZone = { - ...selectedZone, - widgets: cleanedWidgets, - activeSides: newActiveSides, - panelOrder: newActiveSides, - }; + setTimeout(() => { + console.log("Removing after wait..."); - let deletePanel = { - organization: organization, - panelName: side, - zoneId: selectedZone.zoneId, - }; - if (visualizationSocket) { - visualizationSocket.emit("v2:viz-panel:delete", deletePanel); - } - setSelectedZone(updatedZone); - - if (hiddenPanels[selectedZone.zoneId]?.includes(side)) { - setHiddenPanels((prev) => ({ - ...prev, - [selectedZone.zoneId]: prev[selectedZone.zoneId].filter( - (s) => s !== side - ), - })); - } - - // if(hiddenPanels[selectedZone.zoneId].includes(side)) - - // API call to delete the panel - // try { - // const response = await deletePanelApi(selectedZone.zoneId, side, organization); - // - // if (response.message === "Panel deleted successfully") { - // } else { - // - // } - // } catch (error) { - // - // } - } else { - // Panel does not exist: Create panel - try { - // Get email and organization safely with a default fallback const email = localStorage.getItem("email") || ""; - const organization = email?.split("@")[1]?.split(".")[0]; + const organization = email?.split("@")[1]?.split(".")[0] || ""; + + // Remove widgets for that side + const cleanedWidgets = selectedZone.widgets.filter( + (widget) => widget.panel !== side + ); + const newActiveSides = selectedZone.activeSides.filter( + (s) => s !== side + ); + + const updatedZone = { + ...selectedZone, + widgets: cleanedWidgets, + activeSides: newActiveSides, + panelOrder: newActiveSides, + }; + + const deletePanel = { + organization, + panelName: side, + zoneId, + }; + + if (visualizationSocket) { + visualizationSocket.emit("v2:viz-panel:delete", deletePanel); + } + + setSelectedZone(updatedZone); + + if (hiddenPanels[zoneId]?.includes(side)) { + setHiddenPanels((prev) => ({ + ...prev, + [zoneId]: prev[zoneId].filter((s) => s !== side), + })); + } + + // Remove from waiting state + setWaitingPanels(null); + }, 500); // Wait for 2 seconds + } else { + // Panel does not exist: Add it + try { + const email = localStorage.getItem("email") || ""; + const organization = email?.split("@")[1]?.split(".")[0] || ""; - // Prevent duplicate side entries const newActiveSides = selectedZone.activeSides.includes(side) ? [...selectedZone.activeSides] : [...selectedZone.activeSides, side]; @@ -242,32 +241,31 @@ const AddButtons: React.FC = ({ activeSides: newActiveSides, panelOrder: newActiveSides, }; - let addPanel = { - organization: organization, - zoneId: selectedZone.zoneId, + + const addPanel = { + organization, + zoneId, panelOrder: newActiveSides, }; + if (visualizationSocket) { visualizationSocket.emit("v2:viz-panel:add", addPanel); } - setSelectedZone(updatedZone); - // API call to create panels - // const response = await panelData(organization, selectedZone.zoneId, newActiveSides); - // - // if (response.message === "Panels created successfully") { - // } else { - // - // } - } catch (error) {} + setSelectedZone(updatedZone); + } catch (error) { + console.error("Error adding panel:", error); + } } }; + return ( <>
    {(["top", "right", "bottom", "left"] as Side[]).map((side) => (
    {/* "+" Button */} +