diff --git a/app/docs/documents/projectStructure.md b/app/docs/documents/projectStructure.md index 1e12346..234dabb 100644 --- a/app/docs/documents/projectStructure.md +++ b/app/docs/documents/projectStructure.md @@ -1,10 +1,13 @@ -# Project Folder Structure +# **Project Folder Structure Maintenance** -This document provides a detailed description of the purpose of each folder in the project by root level, along with the folder hierarchy. +This document outlines the project’s folder structure, describing the purpose of each folder and file. It also includes guidelines for development, collaboration, and scalability. -## Folder Hierarchy +--- + +## **Folder Hierarchy** ``` +πŸ“ .github πŸ“ src β”œβ”€β”€ πŸ“ assets β”œβ”€β”€ πŸ“ components @@ -14,94 +17,195 @@ This document provides a detailed description of the purpose of each folder in t β”‚ β”œβ”€β”€ πŸ“ builder β”‚ β”œβ”€β”€ πŸ“ simulation β”‚ └── πŸ“ visualization +β”œβ”€β”€ πŸ“ pages β”œβ”€β”€ πŸ“ services β”œβ”€β”€ πŸ“ store β”œβ”€β”€ πŸ“ styles β”œβ”€β”€ πŸ“ tests β”œβ”€β”€ πŸ“ types β”œβ”€β”€ πŸ“ utils +β”œβ”€β”€ πŸ“ temp β”œβ”€β”€ App.css β”œβ”€β”€ App.tsx β”œβ”€β”€ index.css β”œβ”€β”€ main.tsx -└── vite-env.d.ts +β”œβ”€β”€ Dockerfile +└── nginx.conf ``` --- -## Description of Each Folder +## **Folder and File Descriptions** -### πŸ“ `src` -The root directory for all source code related to the application. - -#### πŸ“ `assets` -- **Purpose:** Contains static assets such as images, icons, fonts, or other resources. -- **Example:** - - `react.svg`: A static SVG file used in the project. - -#### πŸ“ `components` -- **Purpose:** Contains reusable React components, serving as building blocks for the user interface. -- **Example:** - - Buttons, modals, headers, and forms. - -#### πŸ“ `functions` -- **Purpose:** Stores pure functions or logic that can be reused across the application. -- **Example:** - - Utility functions for data transformation or computation. - -#### πŸ“ `hooks` -- **Purpose:** Holds custom React hooks for managing specific logic or behaviors. -- **Example:** - - Hooks for state management, API calls, or reusable effects. - -#### πŸ“ `modules` -- **Purpose:** Organizes high-level, feature-specific code into subdirectories. - - **πŸ“ builder:** Manages functionalities and components related to building or configuring features. - - **πŸ“ simulation:** Handles processes or logic related to simulations or dynamic scenarios. - - **πŸ“ visualization:** Focuses on displaying data visually, such as charts, graphs, or interactive UI elements. - -#### πŸ“ `services` -- **Purpose:** Encapsulates external service interactions, such as API calls or library integrations. -- **Example:** - - REST API clients or authentication handlers. - -#### πŸ“ `store` -- **Purpose:** Contains state management logic and configurations for tools like Redux or Zustand. -- **Example:** - - Redux slices, context providers, or global state stores. - -#### πŸ“ `styles` -- **Purpose:** Includes global CSS, SCSS, or theming resources. -- **Example:** - - Global styles, theme variables, or resets. - -#### πŸ“ `tests` -- **Purpose:** Stores test files for unit testing, integration testing, and mock data. -- **Example:** - - Test files (`*.test.tsx`, `*.spec.ts`) or mock utilities. - -#### πŸ“ `types` -- **Purpose:** Contains shared TypeScript type definitions and interfaces. -- **Example:** - - Type declarations for props, data models, or API responses. - -#### πŸ“ `utils` -- **Purpose:** Includes general-purpose utility files that don’t fit into other specific folders. -- **Example:** - - Helper functions like debouncers or date formatters. +### πŸ“ **`src`** +The root directory for all application source code. --- -## Root-Level Files +### πŸ“ **`assets`** +- **Purpose:** Static assets like images, fonts, and icons. +- **Examples:** + - Subfolders for `images`, `icons`, and `fonts`. + - Use descriptive file names (e.g., `logo.svg`, `Roboto-Regular.ttf`). -### `App.tsx` -- **Purpose:** The root React component, initializing the main application layout and logic. +--- -### `index.css` -- **Purpose:** Contains global styles applied throughout the application. +### πŸ“ **`components`** +- **Purpose:** Reusable React components forming the building blocks of the UI. +- **Examples:** + - Buttons, modals, input fields, and headers. + - Organize larger components into folders (e.g., `Button/`). -### `main.tsx` -- **Purpose:** The entry point of the app, rendering the React application and setting up the React DOM. +--- -### `vite-env.d.ts` -- **Purpose:** TypeScript environment configuration file for Vite. +### πŸ“ **`functions`** +- **Purpose:** Pure functions and reusable logic. +- **Examples:** + - `formatDate.ts`: Format dates into readable strings. + - `calculateTotal.ts`: Logic for cart total calculation. + +--- + +### πŸ“ **`hooks`** +- **Purpose:** Custom React hooks encapsulating reusable logic. +- **Examples:** + - `useAuth.ts`: Manages authentication logic. + - `useFetch.ts`: Fetches data from APIs. + +--- + +### πŸ“ **`modules`** +- **Purpose:** Feature-specific code organized into subfolders. +- **Subfolders:** + - **`builder`**: For UI components and logic related to building features. + - **`simulation`**: Code for running simulations. + - **`visualization`**: Visualization components like charts and graphs. + +--- + +### πŸ“ **`pages`** +- **Purpose:** Pages that represent routes in the application. +- **Examples:** + - `HomePage.tsx`: Home route. + - `DashboardPage.tsx`: Dashboard route. + +--- + +### πŸ“ **`services`** +- **Purpose:** External API interactions and third-party service logic. +- **Examples:** + - `apiClient.ts`: Wrapper for HTTP requests. + - `authService.ts`: Authentication services. + +--- + +### πŸ“ **`store`** +- **Purpose:** State management logic using tools like Redux or Context API. +- **Examples:** + - `authSlice.ts`: Authentication-related state management. + - `cartSlice.ts`: Shopping cart state management. + +--- + +### πŸ“ **`styles`** +- **Purpose:** Global and modular styles. +- **Examples:** + - `global.css`: Global styles. + - `theme.scss`: Theme variables. + +--- + +### πŸ“ **`tests`** +- **Purpose:** Test files for unit, integration, and E2E testing. +- **Examples:** + - `Button.test.tsx`: Tests for the `Button` component. + - `mockData.ts`: Mock API responses. + +--- + +### πŸ“ **`types`** +- **Purpose:** Shared TypeScript type definitions and interfaces. +- **Examples:** + - `User.ts`: User-related type definitions. + - `ApiResponse.ts`: API response types. + +--- + +### πŸ“ **`utils`** +- **Purpose:** General-purpose utility functions and constants. +- **Examples:** + - `debounce.ts`: Debounce function. + - `constants.ts`: Shared constants. + +--- + +### πŸ“ **`temp`** +- **Purpose:** A temporary directory for experimental or work-in-progress code. +- **Guidelines:** + - This folder is included in `.gitignore` to prevent its contents from affecting the main project. + - Move any experimental work here to isolate it from production-ready code. + +--- + +### **Root-Level Files** + +- **`App.tsx`**: Root React component. +- **`main.tsx`**: Entry point for the app. +- **`Dockerfile`**: Docker configuration for containerizing the application. +- **`nginx.conf`**: Configuration for the Nginx server. + +--- + +## **Development Guidelines** + +### **Environment Management** +- **`.env.local`**: Use this file for testing and development-specific variables. +- **`.env`**: Should only contain variables required for deployed services (e.g., API base URLs). + +### **Collaboration Best Practices** +1. **Use the `temp` Folder for Experiments:** + Any experimental work should be isolated in the `temp` folder. Avoid committing temporary code to the main repository. + +2. **Documentation:** + - Read the shared documentation in the `docify` and `.github` folders before starting work. + - Follow any guidelines or standards outlined in these documents. + +3. **Branching Rules:** + - Do not merge other branches into your branch without proper code review or necessity. + - Use meaningful branch names (e.g., `feature/auth-module`, `fix/header-bug`). + +4. **Code Reviews:** + - Ensure all code undergoes peer review before merging. + - Use PR templates provided in the `.github` folder to document changes. + +--- + +## **Additional Instructions for Large-Scale Projects** + +1. **Folder Depth:** + - Avoid excessive nesting of folders to maintain simplicity. + - Refactor large folders into modules or domains as the project scales. + +2. **Dependency Management:** + - Regularly review and update dependencies. + - Remove unused or deprecated libraries to reduce technical debt. + +3. **Automate Workflows:** + - Use CI/CD pipelines to automate testing, building, and deployment processes. + - Integrate tools like Prettier, ESLint, and Husky to enforce code quality. + +4. **Versioning and Change Logs:** + - Maintain a changelog to track major updates. + - Use semantic versioning (`x.y.z`) for releases. + +5. **Performance Monitoring:** + - Regularly monitor and optimize app performance. + - Use tools like Lighthouse, React DevTools, and browser profilers. + +6. **Error Handling:** + - Centralize error handling using utilities or middleware. + - Log errors in both the frontend and backend for debugging. + +7. **Documentation:** + - Continuously update this document to reflect structural or procedural changes. + - Ensure all team members are familiar with the documentation. diff --git a/app/package-lock.json b/app/package-lock.json index a820896..8be748e 100644 --- a/app/package-lock.json +++ b/app/package-lock.json @@ -29,6 +29,7 @@ "chartjs-plugin-annotation": "^3.1.0", "glob": "^11.0.0", "gsap": "^3.12.5", + "html2canvas": "^1.4.1", "leva": "^0.10.0", "mqtt": "^5.10.4", "postprocessing": "^6.36.4", @@ -2019,7 +2020,7 @@ "version": "0.8.1", "resolved": "https://registry.npmjs.org/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz", "integrity": "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw==", - "devOptional": true, + "dev": true, "dependencies": { "@jridgewell/trace-mapping": "0.3.9" }, @@ -2031,7 +2032,7 @@ "version": "0.3.9", "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz", "integrity": "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==", - "devOptional": true, + "dev": true, "dependencies": { "@jridgewell/resolve-uri": "^3.0.3", "@jridgewell/sourcemap-codec": "^1.4.10" @@ -4134,26 +4135,6 @@ "url": "https://github.com/sponsors/gregberge" } }, - "node_modules/@testing-library/dom": { - "version": "10.4.0", - "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz", - "integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==", - "license": "MIT", - "peer": true, - "dependencies": { - "@babel/code-frame": "^7.10.4", - "@babel/runtime": "^7.12.5", - "@types/aria-query": "^5.0.1", - "aria-query": "5.3.0", - "chalk": "^4.1.0", - "dom-accessibility-api": "^0.5.9", - "lz-string": "^1.5.0", - "pretty-format": "^27.0.2" - }, - "engines": { - "node": ">=18" - } - }, "node_modules/@testing-library/jest-dom": { "version": "5.17.0", "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz", @@ -4265,25 +4246,25 @@ "version": "1.0.11", "resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz", "integrity": "sha512-DcRjDCujK/kCk/cUe8Xz8ZSpm8mS3mNNpta+jGCA6USEDfktlNvm1+IuZ9eTcDbNk41BHwpHHeW+N1lKCz4zOw==", - "devOptional": true + "dev": true }, "node_modules/@tsconfig/node12": { "version": "1.0.11", "resolved": "https://registry.npmjs.org/@tsconfig/node12/-/node12-1.0.11.tgz", "integrity": "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag==", - "devOptional": true + "dev": true }, "node_modules/@tsconfig/node14": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/@tsconfig/node14/-/node14-1.0.3.tgz", "integrity": "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow==", - "devOptional": true + "dev": true }, "node_modules/@tsconfig/node16": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/@tsconfig/node16/-/node16-1.0.4.tgz", "integrity": "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA==", - "devOptional": true + "dev": true }, "node_modules/@turf/along": { "version": "7.2.0", @@ -8047,6 +8028,15 @@ "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz", "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==" }, + "node_modules/base64-arraybuffer": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz", + "integrity": "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==", + "license": "MIT", + "engines": { + "node": ">= 0.6.0" + } + }, "node_modules/base64-js": { "version": "1.5.1", "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz", @@ -9017,7 +9007,7 @@ "version": "1.1.1", "resolved": "https://registry.npmjs.org/create-require/-/create-require-1.1.1.tgz", "integrity": "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ==", - "devOptional": true + "dev": true }, "node_modules/cross-env": { "version": "7.0.3", @@ -9102,6 +9092,15 @@ "postcss": "^8.4" } }, + "node_modules/css-line-break": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz", + "integrity": "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==", + "license": "MIT", + "dependencies": { + "utrie": "^1.0.2" + } + }, "node_modules/css-loader": { "version": "6.11.0", "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.11.0.tgz", @@ -9885,7 +9884,7 @@ "version": "4.0.2", "resolved": "https://registry.npmjs.org/diff/-/diff-4.0.2.tgz", "integrity": "sha512-58lmxKSA4BNyLz+HHMUzlOEpg09FV+ev6ZMe3vJihgdxzgcwZ8VoEEPmALCZG9LmqfVoNMMKpttIYTVG6uDY7A==", - "devOptional": true, + "dev": true, "engines": { "node": ">=0.3.1" } @@ -12489,6 +12488,19 @@ } } }, + "node_modules/html2canvas": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz", + "integrity": "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==", + "license": "MIT", + "dependencies": { + "css-line-break": "^2.1.0", + "text-segmentation": "^1.0.3" + }, + "engines": { + "node": ">=8.0.0" + } + }, "node_modules/htmlparser2": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-6.1.0.tgz", @@ -15235,7 +15247,7 @@ "version": "1.3.6", "resolved": "https://registry.npmjs.org/make-error/-/make-error-1.3.6.tgz", "integrity": "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==", - "devOptional": true + "dev": true }, "node_modules/makeerror": { "version": "1.0.12", @@ -20434,6 +20446,15 @@ "node": "*" } }, + "node_modules/text-segmentation": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz", + "integrity": "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==", + "license": "MIT", + "dependencies": { + "utrie": "^1.0.2" + } + }, "node_modules/text-table": { "version": "0.2.0", "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz", @@ -20694,7 +20715,7 @@ "version": "10.9.2", "resolved": "https://registry.npmjs.org/ts-node/-/ts-node-10.9.2.tgz", "integrity": "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==", - "devOptional": true, + "dev": true, "dependencies": { "@cspotcode/source-map-support": "^0.8.0", "@tsconfig/node10": "^1.0.7", @@ -20737,7 +20758,7 @@ "version": "8.3.4", "resolved": "https://registry.npmjs.org/acorn-walk/-/acorn-walk-8.3.4.tgz", "integrity": "sha512-ueEepnujpqee2o5aIYnvHU6C0A42MNdsIDeqy5BydrkuC5R1ZuUFnm27EeFJGoEHJQgn3uleRvmTXaJgfXbt4g==", - "devOptional": true, + "dev": true, "dependencies": { "acorn": "^8.11.0" }, @@ -20749,7 +20770,7 @@ "version": "4.1.3", "resolved": "https://registry.npmjs.org/arg/-/arg-4.1.3.tgz", "integrity": "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA==", - "devOptional": true + "dev": true }, "node_modules/tsconfig-paths": { "version": "3.15.0", @@ -21220,6 +21241,15 @@ "node": ">= 0.4.0" } }, + "node_modules/utrie": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz", + "integrity": "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==", + "license": "MIT", + "dependencies": { + "base64-arraybuffer": "^1.0.2" + } + }, "node_modules/uuid": { "version": "9.0.1", "resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.1.tgz", @@ -21236,7 +21266,7 @@ "version": "3.0.1", "resolved": "https://registry.npmjs.org/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz", "integrity": "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg==", - "devOptional": true + "dev": true }, "node_modules/v8-to-istanbul": { "version": "8.1.1", @@ -22295,7 +22325,7 @@ "version": "3.1.1", "resolved": "https://registry.npmjs.org/yn/-/yn-3.1.1.tgz", "integrity": "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q==", - "devOptional": true, + "dev": true, "engines": { "node": ">=6" } diff --git a/app/package.json b/app/package.json index 66e3b39..ce5c7d3 100644 --- a/app/package.json +++ b/app/package.json @@ -24,6 +24,7 @@ "chartjs-plugin-annotation": "^3.1.0", "glob": "^11.0.0", "gsap": "^3.12.5", + "html2canvas": "^1.4.1", "leva": "^0.10.0", "mqtt": "^5.10.4", "postprocessing": "^6.36.4", diff --git a/app/src/assets/image/feneration.png b/app/src/assets/image/categories/feneration.png similarity index 100% rename from app/src/assets/image/feneration.png rename to app/src/assets/image/categories/feneration.png diff --git a/app/src/assets/image/categories/machines.png b/app/src/assets/image/categories/machines.png new file mode 100644 index 0000000..a441d48 Binary files /dev/null and b/app/src/assets/image/categories/machines.png differ diff --git a/app/src/assets/image/vehicles.png b/app/src/assets/image/categories/vehicles.png similarity index 100% rename from app/src/assets/image/vehicles.png rename to app/src/assets/image/categories/vehicles.png diff --git a/app/src/assets/image/categories/workStation.png b/app/src/assets/image/categories/workStation.png new file mode 100644 index 0000000..43221ae Binary files /dev/null and b/app/src/assets/image/categories/workStation.png differ diff --git a/app/src/assets/image/categories/worker.png b/app/src/assets/image/categories/worker.png new file mode 100644 index 0000000..e2287e7 Binary files /dev/null and b/app/src/assets/image/categories/worker.png differ diff --git a/app/src/assets/image/machines.png b/app/src/assets/image/machines.png deleted file mode 100644 index 199870d..0000000 Binary files a/app/src/assets/image/machines.png and /dev/null differ diff --git a/app/src/assets/image/userImage.png b/app/src/assets/image/userImage.png deleted file mode 100644 index 51af26c..0000000 Binary files a/app/src/assets/image/userImage.png and /dev/null differ diff --git a/app/src/assets/image/workStation.png b/app/src/assets/image/workStation.png deleted file mode 100644 index 6345487..0000000 Binary files a/app/src/assets/image/workStation.png and /dev/null differ diff --git a/app/src/assets/image/worker.png b/app/src/assets/image/worker.png deleted file mode 100644 index 7067644..0000000 Binary files a/app/src/assets/image/worker.png and /dev/null differ diff --git a/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx b/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx index b56350a..d6980b3 100644 --- a/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx +++ b/app/src/components/layout/3D-cards/cards/ProductionCapacity.tsx @@ -168,7 +168,7 @@ const ProductionCapacity: React.FC = ({ const response = await axios.get( `http://${process.env.REACT_APP_SERVER_REST_API_BASE_URL}/api/v2/widget3D/${id}/${organization}` ); - + if (response.status === 200) { setmeasurements(response.data.Data.measurements); setDuration(response.data.Data.duration); @@ -190,29 +190,23 @@ const ProductionCapacity: React.FC = ({ }, [chartMeasurements, chartDuration, widgetName]); useEffect(() => { }, [rotation]); - const rotationDegrees = { - x: (rotation[0] * 180) / Math.PI, - y: (rotation[1] * 180) / Math.PI, - z: (rotation[2] * 180) / Math.PI, - }; - const transformStyle = { - transform: `rotateX(${rotationDegrees.x}deg) rotateY(${rotationDegrees.y}deg) rotateZ(${rotationDegrees.z}deg) translate(-50%, -50%)`, - }; + return ( { e.preventDefault(); e.stopPropagation(); @@ -223,7 +217,7 @@ const ProductionCapacity: React.FC = ({ }} wrapperClass="pointer-none" - > + >
setSelectedChartId({ id: id, type: type })} @@ -232,7 +226,7 @@ const ProductionCapacity: React.FC = ({ style={{ width: "300px", // Original width height: "300px", // Original height - transform: transformStyle.transform, + // transform: transformStyle.transform, transformStyle: "preserve-3d", position: "absolute", }} diff --git a/app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx b/app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx index 86734f7..16bb8dd 100644 --- a/app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx +++ b/app/src/components/layout/3D-cards/cards/ReturnOfInvestment.tsx @@ -233,15 +233,16 @@ const ReturnOfInvestment: React.FC = ({ return (
= ({ return (
= ({ return (
{ templateData(); }, []); - const handleDeleteTemplate = async (id: string) => { + const handleDeleteTemplate = async ( + e: React.MouseEvent, + id: string + ) => { try { + e.stopPropagation(); const email = localStorage.getItem("email") || ""; + const organization = email?.split("@")[1]?.split(".")[0]; let deleteTemplate = { organization: organization, @@ -49,7 +54,6 @@ const Templates = () => { const handleLoadTemplate = async (template: any) => { try { if (selectedZone.zoneName === "") return; - const email = localStorage.getItem("email") || ""; const organization = email?.split("@")[1]?.split(".")[0]; @@ -88,27 +92,27 @@ const Templates = () => { return (
{templates.map((template, index) => ( -
+
handleLoadTemplate(template)} + > {template?.snapshot && (
{`${template.name} handleLoadTemplate(template)} />
)}
-
handleLoadTemplate(template)} - className="template-name" - > +
{/* {`Template ${index + 1}`} */}