refactor: update Analysis component input types, adjust SelectFloorPlan layout, and enhance dashboard and scene styles for improved UI

app/package-lock.json

@@ -2026,7 +2026,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"
       },
@@ -2038,7 +2038,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"
@@ -4180,25 +4180,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==",
-      "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",
@@ -4310,25 +4291,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",
@@ -9082,7 +9063,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",
@@ -9959,7 +9940,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"
       }
@@ -15343,7 +15324,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",
@@ -20820,7 +20801,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",
@@ -20863,7 +20844,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"
       },
@@ -20875,7 +20856,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",
@@ -21371,7 +21352,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",
@@ -22430,7 +22411,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"
       }

app/src/components/layout/sidebarRight/analysis/Analysis.tsx

@@ -19,7 +19,7 @@ const Analysis: React.FC = () => {
       { type: "default", inputs: { label: "Machine uptime", activeOption: "%" } },
     ],
     "Production capacity": [
-      { type: "default", inputs: { label: "Shift length", activeOption: "hr" } },
+      { type: "range", inputs: { label: "Shift length", activeOption: "hr" } },
       { type: "default", inputs: { label: "Shifts / day", activeOption: "unit" } },
       { type: "default", inputs: { label: "Working days / year", activeOption: "days" } },
       { type: "default", inputs: { label: "Yield rate", activeOption: "%" } },

app/src/components/layout/sidebarRight/analysis/RenderAnalysisInputs.tsx

@@ -31,7 +31,7 @@ const RenderAnalysisInputs: React.FC<InputRendererProps> = ({ keyName, presets,i
               key={index}
               label={preset.inputs.label}
               min={0}
-              max={0}
+              max={8}
               value={5}
             />
           );

app/src/components/temporary/SelectFloorPlan.tsx

@@ -4,12 +4,14 @@ import { useDfxUpload } from "../../store/builder/store";
 import DxfParser from "dxf-parser";
 import { getWallPointsFromBlueprint } from "../../modules/builder/dfx/functions/getWallPointsFromBlueprint";
 import { convertDXFToThree } from "../../modules/builder/dfx/functions/convertDxfToThree";
-type DXFData = any
+import { AIIcon } from "../icons/ExportCommonIcons";
+type DXFData = any;
 const SelectFloorPlan: React.FC = () => {
   // Access layout state and state setters
   const { currentLayout, setLayout } = useLayoutStore();
   // Access DXF-related states and setters
-  const { setDfxUploaded, setDfxGenerate, setObjValue, objValue } = useDfxUpload();
+  const { setDfxUploaded, setDfxGenerate, setObjValue, objValue } =
+    useDfxUpload();
 
   // Local state to store the parsed DXF file
   const [parsedFile, setParsedFile] = useState<DXFData | undefined>(undefined);
@@ -18,7 +20,9 @@ const SelectFloorPlan: React.FC = () => {
   const [generate, setGenerate] = useState<boolean>(false);
 
   // Handles file upload and DXF parsing
-  const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
+  const handleFileUpload = async (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
     setLayout(null); // Reset current layout
     setParsedFile(undefined); // Clear any previously parsed file
     const file = event.target.files?.[0];
@@ -52,15 +56,54 @@ const SelectFloorPlan: React.FC = () => {
   // Trigger wall point generation when `generate` flag changes
   useEffect(() => {
     if (parsedFile !== undefined) {
-      getWallPointsFromBlueprint({ parsedData: parsedFile, setDfxGenerate, objValue });
+      getWallPointsFromBlueprint({
+        parsedData: parsedFile,
+        setDfxGenerate,
+        objValue,
+      });
     }
   }, [generate]);
 
-
   return (
     <div className="select-floorplane-wrapper">
-      Preset Layouts
+      Upload Layouts
+      <div className="presets-container">
+        <input
+          type="file"
+          id="file-upload"
+          accept=".dxf"
+          style={{ display: "none", width: "10px" }}
+          onChange={handleFileUpload}
+        />
 
+        <label
+          htmlFor="file-upload"
+          className="preset upload-btn"
+          style={{
+            cursor: "pointer",
+            padding: "10px 48px",
+          }}
+        >
+          Upload
+        </label>
+
+        {parsedFile && (
+          <button
+            type="button"
+            id="generate-upload"
+            className="generate-walls-btn"
+            onClick={() => {
+              setDfxUploaded([]);
+              setLayout(null);
+              setGenerate(!generate);
+            }}
+          >
+            <AIIcon />
+            Generate
+          </button>
+        )}
+      </div>
+      or
       <div className="presets-container">
         <button
           className={`preset ${currentLayout === "layout1" ? "active" : ""}`}
@@ -83,40 +126,9 @@ const SelectFloorPlan: React.FC = () => {
         >
           Preset 2
         </button>
-
-        <input
-          type="file"
-          id="file-upload"
-          accept=".dxf"
-          style={{ display: "none", width: "10px" }}
-          onChange={handleFileUpload}
-        />
-
-        <label
-          htmlFor="file-upload"
-          className="preset"
-          style={{
-            cursor: "pointer",
-            padding: "10px 48px",
-          }}
-        >
-          Upload
-        </label>
-
-        <button
-          type="button"
-          id="generate-upload"
-          onClick={() => {
-            setDfxUploaded([]);
-            setLayout(null);
-            setGenerate(!generate);
-          }}
-        >
-          Generate
-        </button>
       </div>
     </div>
   );
 };
 
-export default SelectFloorPlan;
+export default SelectFloorPlan;

app/src/styles/pages/dashboard.scss

@@ -14,7 +14,6 @@
     display: flex;
     flex-direction: column;
     gap: 16px;
-    // border-right: 1px solid var(--border-color);
     background: var(--background-color);
     backdrop-filter: blur(20px);
     border-radius: 30px;
@@ -33,8 +32,8 @@
           line-height: 32px;
           text-align: center;
           font-weight: var(--font-weight-medium);
-          background: var(--accent-color);
+          background: var(--background-color-accent);
-          color: var(--primary-color);
+          color: var(--text-button-color);
           border-radius: #{$border-radius-circle};
         }
 
@@ -165,10 +164,8 @@
   position: relative;
   border: 1px solid var(--border-color);
   border-radius: #{$border-radius-extra-large};
-  overflow: hidden;
   cursor: pointer;
   overflow: visible;
-  position: relative;
 
   .dashboard-card-wrapper {
     width: 100%;
@@ -199,7 +196,6 @@
     width: 100%;
     padding: 13px 16px;
     background: var(--background-color);
-    // backdrop-filter: blur(18px);
 
     border-radius: #{$border-radius-xlarge};
     // transform: translateY(100%);///////hovered
@@ -247,7 +243,6 @@
     border-radius: 8px;
     z-index: 100;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    display: flex;
     flex-direction: column;
     transform: translate(100%, 100%);
     overflow: hidden;

app/src/styles/scene/scene.scss

@@ -66,7 +66,7 @@
 
   .presets-container {
     @include flex-center;
-    gap: 4px;
+    gap: 6px;
 
     .preset {
       background: var(--background-color);
@@ -74,7 +74,17 @@
       border-radius: #{$border-radius-large};
       outline: 1px solid var(--border-color);
     }
-
+    .upload-btn{
+      padding: 4px 16px !important;
+    }
+    .generate-walls-btn{
+      padding: 4px 16px;
+      @include flex-center;
+      gap: 4px;
+      color: var(--text-button-color);
+      background: var(--background-color-button);
+      border-radius: #{$border-radius-extra-large};
+    }
     .active {
       background: var(--background-color-accent);
       color: var(--text-button-color);
@@ -82,17 +92,11 @@
   }
 }
 
-
-
 .label-toogler {
   position: fixed;
   bottom: 4%;
   right: 1.5%;
   z-index: 10;
-
-  // background: var(--background-color);
-  // backdrop-filter: blur(10px);
-  // outline: 1px solid var(--border-color);
   border-radius: 8px;
 
   .input-toggle-container {
@@ -113,4 +117,4 @@
       }
     }
   }
-}
+}