mantab

src/components/Footer.js

@@ -114,7 +114,7 @@ export default function Footer({
           </span>
           {table.length == 0 && (
             <img
-              src="https://static-00.iconduck.com/assets.00/qr-scan-icon-2048x2048-aeh36n7y.png"
+              src="https://i.ibb.co.com/Pt2s8N8/qr-scan-icon-2048x2048-aeh36n7y.png"
               alt="QR Code"
               className={styles.qrIcon}
             />

src/components/Footer.module.css

@@ -1,3 +1,6 @@
+.footerContainer {
+  margin-top: 40px;
+}
 .footer-rect {
   height: 75px;
   background-color: #fff;

src/components/Header.js

@@ -284,7 +284,7 @@ const Header = ({
       <Title>{HeaderText}</Title>
       <div style={{ visibility: showProfile ? "visible" : "hidden" }}>
         <ProfileImage
-          src="https://static-00.iconduck.com/assets.00/profile-major-icon-1024x1024-9rtgyx30.png"
+          src="https://i.ibb.co.com/fpg1v8J/profile-major-icon-1024x1024-9rtgyx30.png"
           alt="Profile"
           onClick={handleImageClick}
           animate={showRectangle && animate}
@@ -349,6 +349,8 @@ const Header = ({
                       <Child onClick={() => setModal("payment_option")}>
                         payment options
                       </Child>
+
+                      <Child onClick={() => setModal("reports")}>reports</Child>
                     </Child>
                   </>
                 )}
@@ -385,6 +387,8 @@ const Header = ({
                             ))}
                         </Child>
                       )}
+
+                    <Child onClick={() => setModal("reports")}>reports</Child>
                   </Child>
                 )}
               {user.username !== undefined && (

src/components/Modal.js

@@ -10,6 +10,7 @@ import Transaction_success from "../pages/Transaction_success";
 import Transaction_failed from "../pages/Transaction_failed";
 import MaterialList from "../pages/MaterialList.js";
 import MaterialMutationsPage from "../pages/MaterialMutationsPage.js";
+import Reports from "../pages/Reports.js";
 
 const Modal = ({ shop, isOpen, onClose, modalContent }) => {
   if (!isOpen) return null;
@@ -51,6 +52,9 @@ const Modal = ({ shop, isOpen, onClose, modalContent }) => {
         {modalContent === "update_stock" && (
           <MaterialMutationsPage cafeId={shop.cafeId} />
         )}
+        {modalContent === "reports" && (
+          <Reports cafeId={shop.cafeId} />
+        )}
       </div>
     </div>
   );

src/components/MusicPlayer.css

@@ -90,8 +90,8 @@
 }
 
 .expandable-container.expanded {
-  -ms-overflow-style: none;  /* IE and Edge */
-  scrollbar-width: none;  /* Firefox */
+  -ms-overflow-style: none; /* IE and Edge */
+  scrollbar-width: none; /* Firefox */
   position: relative;
   max-height: 400px;
   /* Adjust the max-height as needed */
@@ -101,12 +101,11 @@
 
 .expand-button {
   font-size: 20px;
-  padding-bottom: 10px;
   position: relative;
   left: 0;
   right: 0;
-  height: 25px;
   background-color: rgb(108, 255, 128);
+  /* background-color: rgb(218 163 99); */
   border-radius: 0 0 15px 15px;
   /* Rounded corners at the bottom */
   cursor: pointer;
@@ -116,7 +115,9 @@
 }
 
 .expand-button h5 {
+  font-weight: 500;
   margin-top: 0px;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.36);
 }
 
 .expand-button:hover {