update 14 files

src/App.js

@@ -146,7 +146,7 @@ function App() {
 
         {/* <Feedback /> */}
 
-        <Alert />
+        {/* <Alert /> */}
         {/* <Toast /> */}
 
         {/* <ProductSuggestion /> */}

src/components/ProductImage/index.js

@@ -1,3 +1,5 @@
+// it has style inside index.scss ---> // Start ProductImage && end ProductImage
+
 import React from "react";
 
 import "./index.scss";

src/components/ProductImage/index.scss

@@ -1,9 +0,0 @@
-.no-scrollbar::-webkit-scrollbar {
-  display: none;
-}
-
-/* Hide scrollbar for IE, Edge and Firefox */
-.no-scrollbar {
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-}

src/components/ReactTable4/index.js

@@ -1,3 +1,5 @@
+// it has style inside index.scss ---> // Start ReactTable4 && end ReactTable4
+
 import React, { useRef, useState } from "react";
 
 import BasicTable from "./BasicTable";

src/components/ReactTable4/index.scss

@@ -1,17 +0,0 @@
-.customeClass1 .customeClass2 input {
-  display: none !important;
-}
-.customeClass1 .customeClass2 span {
-  display: none !important;
-}
-.no-scrollbar {
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-}
-.tabbar {
-  cursor: pointer;
-}
-.active2,
-.active2 li a {
-  cursor: move !important;
-}

src/components/ReactTable5/index.js

@@ -1,3 +1,5 @@
+// it has style inside index.scss ---> // Start ReactTable5 && end ReactTable5
+
 import React, { useRef, useState } from "react";
 
 import BasicTable from "./BasicTable";

src/components/ReactTable5/index.scss

@@ -1,17 +0,0 @@
-.customeClass1 .customeClass2 input {
-  display: none !important;
-}
-.customeClass1 .customeClass2 span {
-  display: none !important;
-}
-.no-scrollbar {
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-}
-.tabbar {
-  cursor: pointer;
-}
-.active2,
-.active2 li a {
-  cursor: move !important;
-}

src/components/SelectYear/index.js

@@ -1,3 +1,5 @@
+// it has style inside index.scss ---> // Start SelectYear && end SelectYear
+
 import React, { useState, useRef } from "react";
 import ScrollContainer from "react-indiana-drag-scroll";
 
@@ -10,16 +12,16 @@ import Month from "./Month.js";
 const SelectYear = ({ items }) => {
   const [selectedYear, setSelectedYear] = useState(null);
   const yearEl = useRef(null);
-const h = 40
+  const h = 40;
   const up = () => {
     if (yearEl.current) yearEl.current.scrollTop -= h;
   };
   const down = () => {
     if (yearEl.current) yearEl.current.scrollTop += h;
   };
-  const scrollTo = (index)=>{
+  const scrollTo = (index) => {
-    yearEl.current.scrollTop = (index-1)*h
+    yearEl.current.scrollTop = (index - 1) * h;
-  }
+  };
 
   return (
     <section className="flex flex-row items-center mx-auto w-8/12 my-20">
@@ -28,7 +30,9 @@ const h = 40
 
         <div
           ignoreElements={"#not-work-drag"}
-          className={`overflow-y-hidden	 transition-all ease-in-out delay-150 scroll-smooth h-[${3*h}px] mb-2`}
+          className={`overflow-y-hidden	 transition-all ease-in-out delay-150 scroll-smooth h-[${
+            3 * h
+          }px] mb-2`}
           ref={yearEl}
         >
           {/* <div
@@ -49,7 +53,7 @@ const h = 40
                 id={item.id}
                 // href={`#${item.id}`}
                 onClick={() => {
-                  scrollTo(index)
+                  scrollTo(index);
                   setSelectedYear(item);
                   // if(index<items.length-2) setTimeout(up, 1);
                 }}
@@ -65,7 +69,7 @@ const h = 40
             ))}
           </div>
         </div>
-        <img src={arrowDown} onClick={down}  alt= ""/>
+        <img src={arrowDown} onClick={down} alt="" />
       </div>
       <div className="bg-[#06BACE] w-1.5 h-96 mx-4 rounded"></div>
       <div className={`flex flex-col items-center`}>

src/components/SelectYear/index.scss

@@ -1,11 +0,0 @@
-.no-scrollbar {
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-}
-.tabbar {
-  cursor: pointer;
-}
-.active2,
-.active2 li a {
-  cursor: move !important;
-}

src/components/SemiDonut/index.js

@@ -1,3 +1,5 @@
+// it has style inside index.scss ---> // Start SemiDonut && end SemiDonut
+
 import React, { Component } from "react";
 
 import "./index.scss";

src/components/SemiDonut/index.scss

@@ -1,32 +0,0 @@
-.apexcharts-legend {
-  display: flex;
-  overflow: auto;
-  padding: 0 10px;
-  position: absolute !important;
-  left: 0px;
-  top: 200px !important;
-  justify-content: center !important;
-}
-
-.apexcharts-canvas {
-  top: -54px !important;
-}
-
-.apexcharts-legend-text {
-  margin-right: 5px !important;
-  font-family: iransans-medium !important;
-}
-
-.apexcharts-legend-marker {
-  border-radius: 0px !important;
-  width: 15px !important;
-  height: 15px !important;
-}
-
-.apexcharts-legend-series {
-  margin-top: 10px !important;
-}
-
-.apexcharts-datalabels {
-  display: none !important;
-}

src/components/Sidebar/SidebarDesign2/index.js

@@ -1,3 +1,5 @@
+// it has style inside index.scss ---> // Start Sidebar/SidebarDesign2 && end Sidebar/SidebarDesign2
+
 import React, { useState } from "react";
 
 import "./index.scss";

src/components/Sidebar/SidebarDesign2/index.scss

@@ -1,9 +0,0 @@
-.no-scrollbar::-webkit-scrollbar {
-  display: none;
-}
-
-/* Hide scrollbar for IE, Edge and Firefox */
-.no-scrollbar {
-  -ms-overflow-style: none; /* IE and Edge */
-  scrollbar-width: none; /* Firefox */
-}

src/index.scss

@@ -577,9 +577,11 @@ $red: #e92424;
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
 }
+
 .tabbar {
   cursor: pointer;
 }
+
 .active2,
 .active2 li a {
   cursor: move !important;
@@ -668,6 +670,137 @@ l.leaflet-popup-content,
 
 // * end PopupCard Component
 
+// TODO  Start ProductImage Component
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.no-scrollbar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+// * end PopupCard ProductImage
+
+// TODO  Start ReactTable4 Component
+
+.customeClass1 .customeClass2 input {
+  display: none !important;
+}
+.customeClass1 .customeClass2 span {
+  display: none !important;
+}
+.no-scrollbar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+.tabbar {
+  cursor: pointer;
+}
+.active2,
+.active2 li a {
+  cursor: move !important;
+}
+
+// * end PopupCard ReactTable4
+
+// TODO  Start ReactTable5 Component
+
+.customeClass1 .customeClass2 input {
+  display: none !important;
+}
+
+.customeClass1 .customeClass2 span {
+  display: none !important;
+}
+
+.no-scrollbar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+.tabbar {
+  cursor: pointer;
+}
+
+.active2,
+.active2 li a {
+  cursor: move !important;
+}
+
+// * end PopupCard ReactTable5
+
+// TODO  Start ReactTable5 Component
+
+.no-scrollbar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+.tabbar {
+  cursor: pointer;
+}
+
+.active2,
+.active2 li a {
+  cursor: move !important;
+}
+
+// * end PopupCard SelectYear
+
+// TODO  Start SemiDonut Component
+
+.apexcharts-legend {
+  display: flex;
+  overflow: auto;
+  padding: 0 10px;
+  position: absolute !important;
+  left: 0px;
+  top: 200px !important;
+  justify-content: center !important;
+}
+
+.apexcharts-canvas {
+  top: -54px !important;
+}
+
+.apexcharts-legend-text {
+  margin-right: 5px !important;
+  font-family: iransans-medium !important;
+}
+
+.apexcharts-legend-marker {
+  border-radius: 0px !important;
+  width: 15px !important;
+  height: 15px !important;
+}
+
+.apexcharts-legend-series {
+  margin-top: 10px !important;
+}
+
+.apexcharts-datalabels {
+  display: none !important;
+}
+
+// * end PopupCard SemiDonut
+
+// TODO  Start Sidebar/SidebarDesign2 Component
+
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+.no-scrollbar {
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
+}
+
+// * end PopupCard Sidebar/SidebarDesign2
+
 // ? class for selectbox inside -->> CustomSelectBox  <<--
 .customizeSelect {
   background-position: left 0.5rem center;