faet: end up all spending section

Author: UndeadMe

src/pages/Overview.jsx

@@ -62,6 +62,7 @@ export default function Overview() {
                         <h1 className={styles["spending-wrap__header-title"]}>All Spending</h1>
                         <More size="28" />
                     </div>
+                    
                     <div className={styles["spending-wrap__header-amounts"]}>
                         <div className={styles["spending-wrap__header-amount-box"]}>
                             <h3>Weekly</h3>
@@ -78,6 +79,7 @@ export default function Overview() {
                             <h6>$28.985.56.<span>00</span></h6>
                         </div>
                     </div>
+                    
                     <div className={styles["circular-chart"]}>
                         <div className={styles["overlay"]}>
                             <div className={`${styles["circular-chart-inner"]} ${styles["second-circular"]}`}>
@@ -94,6 +96,30 @@ export default function Overview() {
                             </div>
                         </div>
                     </div>
+                    
+                    <div className={styles["total-income-percents"]}>
+                        <div className={styles["total-income-percent-item"]}>
+                            <div>
+                                <div className={`${styles["total-income-percent-item-circle"]} ${styles["blue"]}`}></div>
+                                Workspace
+                            </div>
+                            <span>45%</span>
+                        </div>
+                        <div className={styles["total-income-percent-item"]}>
+                            <div>
+                            <div className={`${styles["total-income-percent-item-circle"]} ${styles["orange"]}`}></div>
+                                Employee Salary
+                            </div>
+                            <span>52%</span>
+                        </div>
+                        <div className={styles["total-income-percent-item"]}>
+                            <div>
+                            <div className={`${styles["total-income-percent-item-circle"]} ${styles["lightblue"]}`}></div>
+                                Shopping
+                            </div>
+                            <span>24%</span>
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>

src/pages/Overview.module.css

@@ -113,4 +113,34 @@
 }
 .third-circular {
     background-image: -webkit-linear-gradient(50deg, #eef5f7 50%, transparent  50%), -webkit-linear-gradient(right, lightblue  50%, #eef5f7 50%);
+}
+.total-income-percent-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.total-income-percent-item div {
+    display: flex;
+    align-items: center;
+}
+.total-income-percent-item:not(:last-child) {
+    margin-bottom: 20px;
+}
+.total-income-percent-item-circle {
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    margin-right: 20px;
+}
+.total-income-percent-item-circle.blue {
+    background-color: blue;
+}
+.total-income-percent-item-circle.orange {
+    background-color: #ec7027;
+}
+.total-income-percent-item-circle.lightblue {
+    background-color: lightblue;
+}
+.total-income-percent-item span {
+    font-weight: bolder;
 }