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,52 +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"
-                        id={asset.filename}
-                        title={asset.filename}
-                      >
-                        <img
-                          src={asset?.thumbnail}
-                          alt={asset.filename}
-                          className="asset-image"
-                        />
-
-                        <div className="asset-name">
-                          {asset.filename
-                            .split("_")
-                            .map(
-                              (word: any) =>
-                                word.charAt(0).toUpperCase() + word.slice(1)
-                            )
-                            .join(" ")}
-                        </div>
-                      </div>
-                    ))}
-                </div>
-              </div>
-            </div>
-          ) : selectedCategory ? (
-            <div className="assets-wrapper">
-              <h2>
-                {selectedCategory}{" "}
-                <div
-                  className="back-button"
-                  id="asset-backButtom"
-                  onClick={() => {
-                    setSelectedCategory(null);
-                    setCategoryAssets([]);
-                  }}
-                >
-                  ← Back
-                </div>
-              </h2>
-              <div className="assets-container">
-                {categoryAssets &&
-                  categoryAssets?.map((asset: any, index: number) => (
                     <div
                       key={index}
                       className="assets"
@@ -206,16 +173,6 @@ const Assets: React.FC = () => {
                         src={asset?.thumbnail}
                         alt={asset.filename}
                         className="asset-image"
-                        onPointerDown={() => {
-                          setSelectedItem({
-                            name: asset.filename,
-                            id: asset.AssetID,
-                            type:
-                              asset.type === "undefined"
-                                ? undefined
-                                : asset.type,
-                          });
-                        }}
                       />
 
                       <div className="asset-name">
@@ -229,37 +186,94 @@ const Assets: React.FC = () => {
                       </div>
                     </div>
                   ))}
+                </div>
               </div>
             </div>
           ) : (
-            <div className="assets-wrapper">
+            <>
-              <h2>Categories</h2>
+              {selectedCategory ? (
-              <div className="categories-container">
+                <div className="assets-wrapper">
-                {Array.from(
+                  <h2>
-                  new Set(categoryList.map((asset) => asset.category))
+                    {selectedCategory}{" "}
-                ).map((category, index) => {
-                  const categoryInfo = categoryList.find(
-                    (asset) => asset.category === category
-                  );
-                  return (
                     <div
-                      key={index}
+                      className="back-button"
-                      className="category"
+                      id="asset-backButtom"
-                      id={category}
+                      onClick={() => {
-                      onClick={() => fetchCategoryAssets(category)}
+                        setSelectedCategory(null);
+                        setCategoryAssets([]);
+                      }}
                     >
-                      <img
+                      ← Back
-                        src={categoryInfo?.categoryImage || ""}
-                        alt={category}
-                        className="category-image"
-                        draggable={false}
-                      />
-                      <div className="category-name">{category}</div>
                     </div>
-                  );
+                  </h2>
-                })}
+                  <div className="assets-container">
-              </div>
+                    {categoryAssets &&
-            </div>
+                      categoryAssets?.map((asset: any, index: number) => (
+                        <div
+                          key={index}
+                          className="assets"
+                          id={asset.filename}
+                          title={asset.filename}
+                        >
+                          <img
+                            src={asset?.thumbnail}
+                            alt={asset.filename}
+                            className="asset-image"
+                            onPointerDown={() => {
+                              setSelectedItem({
+                                name: asset.filename,
+                                id: asset.AssetID,
+                                type:
+                                  asset.type === "undefined"
+                                    ? undefined
+                                    : asset.type,
+                              });
+                            }}
+                          />
+                          <div className="asset-name">
+                            {asset.filename
+                              .split("_")
+                              .map(
+                                (word: any) =>
+                                  word.charAt(0).toUpperCase() + word.slice(1)
+                              )
+                              .join(" ")}
+                          </div>
+                        </div>
+                      ))}
+                  </div>
+                </div>
+              ) : (
+                <div className="assets-wrapper">
+                  <h2>Categories</h2>
+                  <div className="categories-container">
+                    {Array.from(
+                      new Set(categoryList.map((asset) => asset.category))
+                    ).map((category, index) => {
+                      const categoryInfo = categoryList.find(
+                        (asset) => asset.category === category
+                      );
+                      return (
+                        <div
+                          key={index}
+                          className="category"
+                          id={category}
+                          onClick={() => fetchCategoryAssets(category)}
+                        >
+                          <img
+                            src={categoryInfo?.categoryImage || ""}
+                            alt={category}
+                            className="category-image"
+                            draggable={false}
+                          />
+                          <div className="category-name">{category}</div>
+                        </div>
+                      );
+                    })}
+                  </div>
+                </div>
+              )}
+            </>
           )}
         </section>
       </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 {
@@ -953,4 +947,14 @@
     opacity: 0;
     transform: scaleY(0);
   }
-}
+}
+@keyframes scaleFadeIn {
+  from {
+    scale: 0;
+    opacity: 0;
+  }
+  to {
+    scale: 1;
+    opacity: 1;
+  }
+}