update App.js and src/components/ProductSalesAmount/Design2/index.js

src/App.js

@@ -105,11 +105,8 @@ function App() {
         {/* <VodProductDesign /> */}
         {/* <VodProduct /> */}
         {/* <VodProductNew /> */}
-
         {/* <BookDesign /> */}
-
         {/* <HeaderDesign1 /> */}
-
         {/* <Blogs /> */}
         {/* ----------------------------$$$ start---------------------------- */}
         {/* <BlogDesign1 />
@@ -118,56 +115,37 @@ function App() {
         <BlogDesign4 />
         <BlogDesign5 />
         <BlogDesign6 /> */}
-
         {/* <Button /> */}
         {/* <ButtonDivTag /> */}
-
         {/* ---------------------------- not usable ---------------------------- */}
         {/* <ButtonDesign /> */}
         {/* ---------------------------- not usable ---------------------------- */}
         {/* <ButtonNewDesign /> */}
-
         {/* ---------------------------- not usable ---------------------------- */}
         {/* <ProductTags /> */}
         {/* <NewTagDesign /> */}
-
         {/* <CounterDesign /> */}
-
         {/* <AnimatedProgressBar /> */}
         {/* ----------------------------$$$ end---------------------------- */}
-
         {/* <ContactInfoSection /> */}
         {/* <Testttt /> */}
-
         {/* <Design2D /> */}
-
         {/* <Features /> */}
-
         {/* <Feedback /> */}
-
         {/* <Alert /> */}
         {/* <Toast /> */}
-
         {/* <ProductSuggestion /> */}
-
         {/* <ProductImage /> */}
-
         {/* <ProductTab /> */}
-
         {/* <ProductStatusCard /> */}
-
         {/* <AdvertisementDesign1 /> */}
         {/* <AdvertisementDesign2 /> */}
         {/* <AdvertisementDesign3 /> */}
-
         {/* <CourseChapter /> */}
-
         {/* <Design1 /> */}
-        {/* <Design2 /> */}
-
-        {/* <SidebarMenu /> */}
+        <Design2 />
+        <SidebarMenu />
         {/* <SidebarDesign2 /> */}
-
         {/* <SidebarDesign2 className="w-1/5" /> */}
         {/* <TableDesign1 /> */}
         {/* <div className="flex">
@@ -177,20 +155,16 @@ function App() {
             <FooterDesign1 />
           </span>
         </div> */}
-
         {/* <ReactTable2 /> */}
         {/* <ReactTable3 /> */}
-
         {/* ----------------------------$$$ start---------------------------- */}
         {/* <BreadCrumb /> */}
         {/* <SearchBox /> */}
         {/* <TitleSubtitle /> */}
         {/* <FolderTree /> */}
         {/* ----------------------------$$$ end---------------------------- */}
-
         {/* <ReactTable4 /> */}
-        {/* <ReactTable5 /> */}
-
+        <ReactTable5 />
         {/* ----------------------------$$$ start---------------------------- */}
         {/* <Playlist /> */}
         {/* <Folderlists /> */}
@@ -201,76 +175,52 @@ function App() {
         {/* <BarChartApex /> */}
         {/* <SemiDonut /> */}
         {/* ----------------------------$$$ end---------------------------- */}
-
         {/* ----------------------------$$$ start---------------------------- */}
         {/* <OutlineInput /> */}
         {/* <OutlineTextarea /> */}
         {/* <CancleIcon /> */}
         {/* <ProfilePicNextToEachOther />  */}
         {/* ----------------------------$$$ end---------------------------- */}
-
         {/* <FileManager /> */}
-
         {/* <GridListTable /> */}
-
         {/* <PopupCard /> */}
-
         {/* ----------------------------$$$ start---------------------------- */}
         {/* <CircleInCircle /> */}
         {/* <TimeLine /> */}
         {/* <SelectYear /> */}
         {/* ----------------------------$$$ end---------------------------- */}
-
         {/* <TimeLineComponent /> */}
-
         {/* <CardTrelloDesign /> */}
-
         {/* <ReligiousTimes /> */}
-
         {/* <DistributedData /> */}
-
         {/* ----------------------------$$$ start---------------------------- */}
         {/* <IconText /> */}
         {/* <CustomToast /> */}
         {/* ----------------------------$$$ end---------------------------- */}
-
         {/* <CardDesign1 /> */}
-
         {/* ----------------------------$$$ start---------------------------- */}
         {/* <IndianaDragScroll /> */}
         {/* ----------------------------$$$ end---------------------------- */}
-
         {/* <CardDesign2 /> */}
-
         {/* ----------------------------$$$ start---------------------------- */}
         {/* <CustomToast2 /> */}
         {/* ----------------------------$$$ end---------------------------- */}
-
         {/* <CardDesign3 /> */}
-
         {/* ----------------------------$$$ start---------------------------- */}
         {/* <DateTime /> */}
         {/* <CurrentTime /> */}
         {/* <CurrentDateShamsi /> */}
         {/* <ProfileInfo /> */}
-        {/* ----------------------------$$$ end---------------------------- */}
-
+        {/* ----------------------------$$$ end---------------------------- */}‍
         {/* <UserProfileInfo /> */}
-
         {/* <BoxNextToEachOther /> */}
-
         {/* <ContactUsInfoCard /> */}
-
         {/* <RoomCardInfo /> */}
-
         {/* ----------------------------$$$ start---------------------------- */}
         {/* <DateRangePicker /> */}
         {/* ----------------------------$$$ end---------------------------- */}
-
         <FormInput />
-
         {/* <LeafletMap /> */}
-
         {/* <Digikala /> */}
         {/* <TestComponentNew /> */}
       </div>

src/components/ProductSalesAmount/Design2/index.js

@@ -13,8 +13,12 @@ const Design2 = ({ incomes }) => {
       {incomes.map((income, index) => (
         <div key={index} className="flex flex-row items-center mt-4">
           <img src={income.image} alt="" className="w-14 rounded-full" />
-          {income.progressBar}
-          <p>{income.percentNumb}</p>
+          <AnimatedProgressBar
+            rangeWidth={`${Math.min(100, income.percent)}%`}
+            parentBg={"bg-[#E3E3E3] mx-2"}
+            childBg={"bg-[#06BACE]"}
+          />
+          <p>{income.percent}%</p>
         </div>
       ))}
     </div>
@@ -29,53 +33,25 @@ Design2.defaultProps = {
       image: ellipse,
       bgColor: "#26E58C",
       width: "96%",
-      percentNumb: "110",
-      progressBar: (
-        <AnimatedProgressBar
-          rangeWidth={"10%"}
-          parentBg={"bg-[#E3E3E3] mx-2"}
-          childBg={"bg-[#06BACE]"}
-        />
-      ),
+      percent: "110",
     },
     {
       image: ellipse,
       bgColor: "#FFEE00",
       width: "44%",
-      percentNumb: "72",
-      progressBar: (
-        <AnimatedProgressBar
-          rangeWidth={"26%"}
-          parentBg={"bg-[#E3E3E3] mx-2"}
-          childBg={"bg-[#06BACE]"}
-        />
-      ),
+      percent: "72",
     },
     {
       image: ellipse,
       bgColor: "#EC4C19",
       width: "2%",
-      percentNumb: "20",
-      progressBar: (
-        <AnimatedProgressBar
-          rangeWidth={"90%"}
-          parentBg={"bg-[#E3E3E3] mx-2"}
-          childBg={"bg-[#06BACE]"}
-        />
-      ),
+      percent: "20",
     },
     {
       image: ellipse,
       bgColor: "#0077FF",
       width: "33%",
-      percentNumb: "80",
-      progressBar: (
-        <AnimatedProgressBar
-          rangeWidth={"99%"}
-          parentBg={"bg-[#E3E3E3] mx-2"}
-          childBg={"bg-[#06BACE]"}
-        />
-      ),
+      percent: "80",
     },
   ],
 };