Refactor code structure for improved readability and maintainability

app/src/components/layout/sidebarLeft/Assets.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from "react";
+import React, { useEffect, useState } from "react";
 import Search from "../../ui/inputs/Search";
 import { getCategoryAsset } from "../../../services/factoryBuilder/assest/assets/getCategoryAsset";
 import arch from "../../../assets/gltf-glb/arch.glb";
@@ -11,8 +11,13 @@ import { useSelectedItem } from "../../../store/store";
 import vehicle from "../../../assets/image/categories/vehicles.png";
 import workStation from "../../../assets/image/categories/workStation.png";
 import machines from "../../../assets/image/categories/machines.png";
-import feneration from "../../../assets/image/categories/feneration.png";
 import worker from "../../../assets/image/categories/worker.png";
+import storage from "../../../assets/image/categories/storage.png";
+import office from "../../../assets/image/categories/office.png";
+import safety from "../../../assets/image/categories/safety.png";
+import feneration from "../../../assets/image/categories/feneration.png";
+import archThumbnail from "../../../assets/image/localAssets/arch.png";
+import windowThumbnail from "../../../assets/image/localAssets/window.png";
 // -------------------------------------
 
 interface AssetProp {
@@ -21,12 +26,12 @@ interface AssetProp {
   category: string;
   description?: string;
   tags: string;
-  url?: String;
+  url?: string;
   uploadDate?: number;
   isArchieve?: boolean;
   animated?: boolean;
   price?: number;
-  CreatedBy?: String;
+  CreatedBy?: string;
 }
 interface CategoryListProp {
   assetImage?: string;
@@ -102,6 +107,9 @@ const Assets: React.FC = () => {
       { category: "Workstation", categoryImage: workStation },
       { category: "Machines", categoryImage: machines },
       { category: "Workers", categoryImage: worker },
+      { category: "Storage", categoryImage: storage },
+      { category: "Safety", categoryImage: safety },
+      { category: "Office", categoryImage: office },
     ]);
   }, []);
   const fetchCategoryAssets = async (asset: any) => {
@@ -112,6 +120,7 @@ const Assets: React.FC = () => {
           filename: "arch",
           category: "Feneration",
           url: arch,
+          thumbnail: archThumbnail,
           tags: "arch",
         },
         {
@@ -125,6 +134,7 @@ const Assets: React.FC = () => {
           filename: "window",
           category: "Feneration",
           url: window,
+          thumbnail: windowThumbnail,
           tags: "window",
         },
       ];
@@ -135,7 +145,9 @@ const Assets: React.FC = () => {
         const res = await getCategoryAsset(asset);
         setCategoryAssets(res);
         setFiltereredAssets(res);
-      } catch (error) {}
+      } catch (error) {
+        console.log(error);
+      }
     }
   };
   return (
@@ -150,8 +162,7 @@ const Assets: React.FC = () => {
                   <p>Results for {searchValue}</p>
                 </div>
                 <div className="assets-container">
-                  {categoryAssets &&
+                  {categoryAssets?.map((asset: any, index: number) => (
-                    categoryAssets?.map((asset: any, index: number) => (
                     <div
                       key={index}
                       className="assets"
@@ -178,7 +189,9 @@ const Assets: React.FC = () => {
                 </div>
               </div>
             </div>
-          ) : selectedCategory ? (
+          ) : (
+            <>
+              {selectedCategory ? (
                 <div className="assets-wrapper">
                   <h2>
                     {selectedCategory}{" "}
@@ -217,7 +230,6 @@ const Assets: React.FC = () => {
                               });
                             }}
                           />
-
                           <div className="asset-name">
                             {asset.filename
                               .split("_")
@@ -261,6 +273,8 @@ const Assets: React.FC = () => {
                   </div>
                 </div>
               )}
+            </>
+          )}
         </section>
       </div>
     </div>

app/src/styles/components/input.scss

@@ -516,7 +516,6 @@ input[type="number"] {
       -webkit-appearance: none;
       width: 100%;
       height: 6px;
-      background: var(--background-color-secondary);
       border-radius: #{$border-radius-medium};
       outline: none;
       margin: 12px 8px;

app/src/styles/layout/sidebar.scss

@@ -1275,49 +1275,49 @@
         }
 
         &:nth-child(1),
-        &:nth-child(9) {
+        &:nth-child(8) {
           &::after {
             @include gradient-by-child(1); // First child uses the first color
           }
         }
 
         &:nth-child(2),
-        &:nth-child(10) {
+        &:nth-child(9) {
           &::after {
             @include gradient-by-child(2); // Second child uses the second color
           }
         }
 
         &:nth-child(3),
-        &:nth-child(11) {
+        &:nth-child(10) {
           &::after {
             @include gradient-by-child(3); // Third child uses the third color
           }
         }
 
         &:nth-child(4),
-        &:nth-child(12) {
+        &:nth-child(11) {
           &::after {
             @include gradient-by-child(4); // Fourth child uses the fourth color
           }
         }
 
         &:nth-child(5),
-        &:nth-child(13) {
+        &:nth-child(12) {
           &::after {
             @include gradient-by-child(5); // Fifth child uses the fifth color
           }
         }
 
         &:nth-child(6),
-        &:nth-child(14) {
+        &:nth-child(13) {
           &::after {
             @include gradient-by-child(6); // Fifth child uses the fifth color
           }
         }
 
         &:nth-child(7),
-        &:nth-child(15) {
+        &:nth-child(14) {
           &::after {
             @include gradient-by-child(7); // Fifth child uses the fifth color
           }

app/src/styles/pages/realTimeViz.scss

@@ -212,7 +212,7 @@
         background: var(--background-color);
         position: relative;
         padding: 0 10px;
-
+        animation: scaleFadeIn 0.4s forwards;
         .kebab {
           width: 30px;
           height: 30px;
@@ -237,7 +237,6 @@
           gap: 6px;
           border-radius: #{$border-radius-small};
 
-
           box-shadow: var(--box-shadow-medium);
 
           .btn {
@@ -390,7 +389,6 @@
       width: 18px;
       height: 18px;
       border-radius: #{$border-radius-small};
-
     }
 
     .active {
@@ -414,7 +412,6 @@
     color: var(--background-color);
     border-radius: #{$border-radius-small};
 
-
     .add-icon {
       @include flex-center;
       transition: rotate 0.2s;
@@ -434,7 +431,7 @@
 
       path {
         stroke: #f65648;
-        strokeWidth: 1.3;
+        strokewidth: 1.3;
       }
     }
   }
@@ -530,7 +527,6 @@
           height: 10px;
           background: var(--primary-color);
           border-radius: #{$border-radius-circle};
-
         }
       }
     }
@@ -553,7 +549,6 @@
         border: none;
         outline: none;
         border-radius: #{$border-radius-circle};
-
       }
     }
   }
@@ -615,7 +610,6 @@
     gap: 6px;
     border-radius: #{$border-radius-small};
 
-
     box-shadow: var(--box-shadow-medium);
 
     .icon {
@@ -954,3 +948,13 @@
     transform: scaleY(0);
   }
 }
+@keyframes scaleFadeIn {
+  from {
+    scale: 0;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}