diff --git a/src/App.js b/src/App.js
index e62a01b..0161a64 100644
--- a/src/App.js
+++ b/src/App.js
@@ -177,7 +177,7 @@ function App() {
           // shopClerks is can only be obtained by the shop owner
           // so every user that is admin will try to getting shopClerks, even not yet proven that this is their shop
           const shopClerks = await getClerks(shopId);
-          setShopClerks(shopClerks);
+          if (shopClerks != null) setShopClerks(shopClerks);
         }
       }
     });
diff --git a/src/components/Footer.js b/src/components/Footer.js
index ab197fd..e56c515 100644
--- a/src/components/Footer.js
+++ b/src/components/Footer.js
@@ -114,7 +114,7 @@ export default function Footer({
           </span>
           {table.length == 0 && (
             <img
-              src="https://i.ibb.co.com/y0FWnbh/qr-scan-icon-2048x2048-aeh36n7y.png"
+              src="https://i.imgur.com/I44LpDO.png"
               alt="QR Code"
               className={styles.qrIcon}
             />
diff --git a/src/components/Header.js b/src/components/Header.js
index 3b7f919..7165b6d 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -314,15 +314,15 @@ const Header = ({
                 user.roleId === 1 && (
                   <>
                     <Child onClick={goToAdminCafes}>see your other cafes</Child>
-                    
+
                     {/* <Child onClick={() => setModal("update_stock")}>
                       update stock
                     </Child> */}
                     <Child hasChildren>
                       {shopName}
                       <Child onClick={() => setModal("add_material")}>
-                      stock
-                    </Child>
+                        stock
+                      </Child>
                       <Child onClick={() => setModal("edit_tables")}>
                         table maps
                       </Child>
@@ -360,8 +360,8 @@ const Header = ({
                 user.roleId === 2 && (
                   <Child hasChildren>
                     {shopName}
-                    <Child onClick={() => setModal("update_stock")}>
-                      update stock
+                    <Child onClick={() => setModal("add_material")}>
+                      stock
                     </Child>
                     {user.username !== undefined &&
                       user.roleId == 2 &&
diff --git a/src/components/RouletteWheel.js b/src/components/RouletteWheel.js
index 591ee5f..9d72d94 100644
--- a/src/components/RouletteWheel.js
+++ b/src/components/RouletteWheel.js
@@ -1,223 +1,243 @@
-import React, { useState, useRef, useEffect } from 'react';
-import './RouletteWheel.css';
-import coffeeImage from './coffee.png'; // Update the path to your image
+import React, { useState, useRef, useEffect } from "react";
+import "./RouletteWheel.css";
+import coffeeImage from "./coffee.png"; // Update the path to your image
 
 const RouletteWheel = ({ isForRegister, onSign }) => {
-    const [rotation, setRotation] = useState(0);
-    const [isDragging, setIsDragging] = useState(false);
-    const startAngleRef = useRef(0);
-    const startRotationRef = useRef(0);
-    const wheelRef = useRef(null);
+  const [rotation, setRotation] = useState(0);
+  const [isDragging, setIsDragging] = useState(false);
+  const startAngleRef = useRef(0);
+  const startRotationRef = useRef(0);
+  const wheelRef = useRef(null);
 
-    const [email, setEmail] = useState('');
-    const [username, setUsername] = useState('');
-    const [password, setPassword] = useState('');
+  const [email, setEmail] = useState("");
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
 
-    const emailInputRef = useRef(null);
-    const usernameInputRef = useRef(null);
-    const passwordInputRef = useRef(null);
+  const emailInputRef = useRef(null);
+  const usernameInputRef = useRef(null);
+  const passwordInputRef = useRef(null);
 
-    const handleSign = () => {
-        onSign(email, username, password);
+  const handleSign = () => {
+    onSign(email, username, password);
+  };
+
+  const handleStart = (x, y) => {
+    setIsDragging(true);
+    startAngleRef.current = getAngle(x, y);
+    startRotationRef.current = rotation;
+  };
+
+  const handleMove = (x, y) => {
+    if (isDragging) {
+      const angle = getAngle(x, y);
+      const deltaAngle = angle - startAngleRef.current;
+      setRotation(startRotationRef.current + deltaAngle);
+      if (isForRegister) {
+        if (rotation + deltaAngle > 30 || rotation + deltaAngle < -210)
+          handleEnd();
+      } else {
+        if (rotation + deltaAngle > 30 || rotation + deltaAngle < -120)
+          handleEnd();
+      }
+    }
+  };
+
+  const handleEnd = () => {
+    setIsDragging(false);
+    setRotation((prevRotation) => {
+      const snappedRotation = Math.round(prevRotation / 90) * 90;
+      return snappedRotation;
+    });
+  };
+
+  const handleMouseDown = (e) => {
+    handleStart(e.clientX, e.clientY);
+  };
+
+  const handleMouseMove = (e) => {
+    handleMove(e.clientX, e.clientY);
+  };
+
+  const handleMouseUp = () => {
+    handleEnd();
+  };
+
+  const handleTouchStart = (e) => {
+    const touch = e.touches[0];
+    handleStart(touch.clientX, touch.clientY);
+  };
+
+  const handleTouchMove = (e) => {
+    if (!isDragging) return;
+    e.preventDefault();
+    const touch = e.touches[0];
+    handleMove(touch.clientX, touch.clientY);
+  };
+
+  const handleTouchEnd = (e) => {
+    e.preventDefault();
+    handleEnd();
+  };
+
+  const handleChildMouseDown = (e) => {
+    e.stopPropagation();
+  };
+
+  const handleChildTouchStart = (e) => {
+    e.stopPropagation();
+  };
+
+  const getAngle = (x, y) => {
+    const rect = wheelRef.current.getBoundingClientRect();
+    const centerX = rect.left + rect.width / 2;
+    const centerY = rect.top + rect.height / 2;
+    const dx = x - centerX;
+    const dy = y - centerY;
+    return Math.atan2(dy, dx) * (180 / Math.PI);
+  };
+
+  useEffect(() => {
+    if (isDragging) {
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
+      document.addEventListener("touchmove", handleTouchMove, {
+        passive: false,
+      });
+      document.addEventListener("touchend", handleTouchEnd, { passive: false });
+    } else {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.removeEventListener("touchmove", handleTouchMove);
+      document.removeEventListener("touchend", handleTouchEnd);
+    }
+
+    return () => {
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("mouseup", handleMouseUp);
+      document.removeEventListener("touchmove", handleTouchMove);
+      document.removeEventListener("touchend", handleTouchEnd);
     };
+  }, [isDragging]);
 
-    const handleStart = (x, y) => {
-        setIsDragging(true);
-        startAngleRef.current = getAngle(x, y);
-        startRotationRef.current = rotation;
-    };
+  const inputPositions = [-90, 0, 90, 180]; // Positions for the inputs
 
-    const handleMove = (x, y) => {
-        if (isDragging) {
-            const angle = getAngle(x, y);
-            const deltaAngle = angle - startAngleRef.current;
-            setRotation(startRotationRef.current + deltaAngle);
-            if(isForRegister) {if (rotation + deltaAngle > 30 || rotation + deltaAngle < - 210) handleEnd();}
-            else {if (rotation + deltaAngle > 30 || rotation + deltaAngle < - 120) handleEnd();} 
-        }
-    };
+  const isVisible = (angle) => {
+    const modAngle = ((angle % 360) + 360) % 360;
+    return modAngle % 90 === 0;
+  };
 
-    const handleEnd = () => {
-        setIsDragging(false);
-        setRotation((prevRotation) => {
-            const snappedRotation = Math.round(prevRotation / 90) * 90;
-            return snappedRotation;
-        });
-    };
+  useEffect(() => {
+    if (isForRegister) {
+      if (isVisible(rotation % 360 !== -0)) {
+        emailInputRef.current.focus();
+      } else if (isVisible(rotation % 360 !== -90)) {
+        usernameInputRef.current.focus();
+      } else if (isVisible(rotation % 360 !== -180)) {
+        passwordInputRef.current.focus();
+      }
+    } else {
+      if (isVisible(rotation % 360 !== -0)) {
+        usernameInputRef.current.focus();
+      } else if (isVisible(rotation % 360 !== -90)) {
+        passwordInputRef.current.focus();
+      }
+    }
+  }, [rotation]);
 
-    const handleMouseDown = (e) => {
-        handleStart(e.clientX, e.clientY);
-    };
-
-    const handleMouseMove = (e) => {
-        handleMove(e.clientX, e.clientY);
-    };
-
-    const handleMouseUp = () => {
-        handleEnd();
-    };
-
-    const handleTouchStart = (e) => {
-        const touch = e.touches[0];
-        handleStart(touch.clientX, touch.clientY);
-    };
-
-    const handleTouchMove = (e) => {
-        if (!isDragging) return;
-        e.preventDefault();
-        const touch = e.touches[0];
-        handleMove(touch.clientX, touch.clientY);
-    };
-
-    const handleTouchEnd = (e) => {
-        e.preventDefault();
-        handleEnd();
-    };
-
-    const handleChildMouseDown = (e) => {
-        e.stopPropagation();
-    };
-
-    const handleChildTouchStart = (e) => {
-        e.stopPropagation();
-    };
-
-    const getAngle = (x, y) => {
-        const rect = wheelRef.current.getBoundingClientRect();
-        const centerX = rect.left + rect.width / 2;
-        const centerY = rect.top + rect.height / 2;
-        const dx = x - centerX;
-        const dy = y - centerY;
-        return Math.atan2(dy, dx) * (180 / Math.PI);
-    };
-
-    useEffect(() => {
-        if (isDragging) {
-            document.addEventListener('mousemove', handleMouseMove);
-            document.addEventListener('mouseup', handleMouseUp);
-            document.addEventListener('touchmove', handleTouchMove, { passive: false });
-            document.addEventListener('touchend', handleTouchEnd, { passive: false });
-        } else {
-            document.removeEventListener('mousemove', handleMouseMove);
-            document.removeEventListener('mouseup', handleMouseUp);
-            document.removeEventListener('touchmove', handleTouchMove);
-            document.removeEventListener('touchend', handleTouchEnd);
-        }
-
-        return () => {
-            document.removeEventListener('mousemove', handleMouseMove);
-            document.removeEventListener('mouseup', handleMouseUp);
-            document.removeEventListener('touchmove', handleTouchMove);
-            document.removeEventListener('touchend', handleTouchEnd);
-        };
-    }, [isDragging]);
-
-    const inputPositions = [-90, 0, 90, 180]; // Positions for the inputs
-
-    const isVisible = (angle) => {
-        const modAngle = ((angle % 360) + 360) % 360;
-        return modAngle % 90 === 0;
-    };
-
-    useEffect(() => {
-        if(isForRegister){
-            if (isVisible(rotation % 360 !== -0)) {
-                emailInputRef.current.focus();
-            } else if (isVisible(rotation % 360 !== -90)) {
-                usernameInputRef.current.focus();
-            } else if (isVisible(rotation % 360 !== -180)) {
-                passwordInputRef.current.focus();
-            }
-        }
-        else{
-            if (isVisible(rotation % 360 !== -0)) {
-                usernameInputRef.current.focus();
-            } else if (isVisible(rotation % 360 !== -90)) {
-                passwordInputRef.current.focus();
-            }
-        }
-    }, [rotation]);
-
-    return (
-        <div className="roulette-wheel-container">
-            <div
-                className="roulette-wheel"
-                ref={wheelRef}
-                onMouseDown={handleMouseDown}
-                onTouchStart={handleTouchStart}
-                style={{ transform: `rotate(${rotation}deg)` }}
+  return (
+    <div className="roulette-wheel-container">
+      <div
+        className="roulette-wheel"
+        ref={wheelRef}
+        onMouseDown={handleMouseDown}
+        onTouchStart={handleTouchStart}
+        style={{ transform: `rotate(${rotation}deg)` }}
+      >
+        {!isForRegister ? (
+          <>
+            <input
+              className={`roulette-input ${
+                isVisible(rotation % 360 !== -0) ? "" : "hidden"
+              }`}
+              placeholder="Username"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              ref={usernameInputRef}
+              style={{ transform: "translate(90%, -120%) rotate(0deg)" }}
+            />
+            <input
+              className={`roulette-input ${
+                isVisible(rotation % 360 !== -90) ? "" : "hidden"
+              }`}
+              placeholder="Password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              ref={passwordInputRef}
+              style={{ transform: "translate(30%, 350%) rotate(90deg)" }}
+            />
+            <button
+              className={`roulette-input ${
+                isVisible(rotation % 360 !== -90) ? "" : "hidden"
+              }`}
+              onClick={handleSign}
+              onMouseDown={handleChildMouseDown}
+              onTouchStart={handleChildTouchStart}
+              style={{ transform: "translate(10%, 320%) rotate(90deg)" }}
             >
-                {!isForRegister ? (
-                    <>
-                        <input
-                            className={`roulette-input ${isVisible(rotation % 360 !== -0) ? '' : 'hidden'}`}
-                            placeholder="Username"
-                            value={username}
-                            onChange={(e) => setUsername(e.target.value)}
-                            ref={usernameInputRef}
-                            style={{ transform: "translate(90%, -120%) rotate(0deg)" }}
-                        />
-                        <input
-                            className={`roulette-input ${isVisible(rotation % 360 !== -90) ? '' : 'hidden'}`}
-                            placeholder="Password"
-                            type="password"
-                            value={password}
-                            onChange={(e) => setPassword(e.target.value)}
-                            ref={passwordInputRef}
-                            style={{ transform: "translate(30%, 350%) rotate(90deg)" }}
-                        />
-                        <button
-                            className={`roulette-input ${isVisible(rotation % 360 !== -90) ? '' : 'hidden'}`}
-                            onClick={handleSign}
-                            onMouseDown={handleChildMouseDown}
-                            onTouchStart={handleChildTouchStart}
-                            style={{ transform: "translate(10%, 320%) rotate(90deg)" }}
-                        >Sign in</button>
-                    </>)
-                    : (
-                        <>
-                            <input
-                                className={`roulette-input ${isVisible(rotation % 360 !== -0) ? '' : 'hidden'}`}
-                                placeholder="Email"
-                                value={email}
-                                onChange={(e) => setEmail(e.target.value)}
-                                ref={emailInputRef}
-                                style={{ transform: "translate(90%, -120%) rotate(0deg)" }}
-                            />
-                            <input
-                                className={`roulette-input ${isVisible(rotation % 360 !== -90) ? '' : 'hidden'}`}
-                                placeholder="Username"
-                                value={username}
-                                onChange={(e) => setUsername(e.target.value)}
-                                ref={usernameInputRef}
-                                style={{ transform: "translate(30%, 350%) rotate(90deg)" }}
-                            />
-                            <input
-                                className={`roulette-input ${isVisible(rotation % 360 !== -180) ? '' : 'hidden'}`}
-                                placeholder="Password"
-                                type="password"
-                                value={password}
-                                onChange={(e) => setPassword(e.target.value)}
-                                ref={passwordInputRef}
-                                style={{ transform: "translate(-90%, 115%) rotate(180deg)" }}
-                            />
-                            <button
-                                className={`roulette-button ${isVisible(rotation % 360 !== -180) ? '' : 'hidden'}`}
-                                onClick={handleSign}
-                                onMouseDown={handleChildMouseDown}
-                                onTouchStart={handleChildTouchStart}
-                                style={{ transform: "translate(-90%, 30%) rotate(180deg)" }}
-                            >Sign up</button>
-                        </>
-                    )}
-                <img
-                    src={coffeeImage}
-                    className="roulette-image"
-                    alt="Coffee"
-                />
-            </div>
-        </div>
-    );
+              Sign in
+            </button>
+          </>
+        ) : (
+          <>
+            <input
+              className={`roulette-input ${
+                isVisible(rotation % 360 !== -0) ? "" : "hidden"
+              }`}
+              placeholder="Email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              ref={emailInputRef}
+              style={{ transform: "translate(90%, -120%) rotate(0deg)" }}
+            />
+            <input
+              className={`roulette-input ${
+                isVisible(rotation % 360 !== -90) ? "" : "hidden"
+              }`}
+              placeholder="Username"
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              ref={usernameInputRef}
+              style={{ transform: "translate(30%, 350%) rotate(90deg)" }}
+            />
+            <input
+              className={`roulette-input ${
+                isVisible(rotation % 360 !== -180) ? "" : "hidden"
+              }`}
+              placeholder="Password"
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              ref={passwordInputRef}
+              style={{ transform: "translate(-90%, 115%) rotate(180deg)" }}
+            />
+            <button
+              className={`roulette-button ${
+                isVisible(rotation % 360 !== -180) ? "" : "hidden"
+              }`}
+              onClick={handleSign}
+              onMouseDown={handleChildMouseDown}
+              onTouchStart={handleChildTouchStart}
+              style={{ transform: "translate(-90%, 30%) rotate(180deg)" }}
+            >
+              Sign up
+            </button>
+          </>
+        )}
+        <img src={coffeeImage} className="roulette-image" alt="Coffee" />
+      </div>
+    </div>
+  );
 };
 
 export default RouletteWheel;
diff --git a/src/config.js b/src/config.js
index 7e45018..6a8f339 100644
--- a/src/config.js
+++ b/src/config.js
@@ -1,5 +1,5 @@
 // src/config.js
 
-const API_BASE_URL = "https://8h8rx8-5000.csb.app"; // Replace with your actual backend URL
+const API_BASE_URL = "https://5n2rcx-5000.csb.app"; // Replace with your actual backend URL
 
 export default API_BASE_URL;
diff --git a/src/helpers/transactionHelpers.js b/src/helpers/transactionHelpers.js
index c88852f..c9b0dd1 100644
--- a/src/helpers/transactionHelpers.js
+++ b/src/helpers/transactionHelpers.js
@@ -343,10 +343,15 @@ export const getFavourite = async (cafeId) => {
   return response.json();
 };
 
-export const getAnalytics = async (cafeId) => {
+export const getAnalytics = async (cafeId, filter) => {
   const response = await fetch(
-    `${API_BASE_URL}/transaction/get-analytics/${cafeId}`,
-    getHeaders()
+    API_BASE_URL + "/transaction/get-analytics/" + cafeId + "?type=" + filter,
+    {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    }
   );
   return response.json();
 };
diff --git a/src/pages/Reports.js b/src/pages/Reports.js
index 24e6e2d..ba51624 100644
--- a/src/pages/Reports.js
+++ b/src/pages/Reports.js
@@ -85,7 +85,7 @@ const RoundedRectangle = ({
           {percentage != undefined && "%"}
           {percentage != undefined && (
             <span style={arrowStyle}>
-              {percentage > 0 ? "↗" : percentage == 0 ? "-" : "↘"}
+              {percentage > 0 ? "↗" : percentage === 0 ? "-" : "↘"}
             </span>
           )}
         </div>
@@ -102,25 +102,23 @@ const App = ({ cafeId }) => {
   const [colors, setColors] = useState([]);
   const [viewStock, setViewStock] = useState(false);
 
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        setLoading(true);
-        const items = await getFavourite(cafeId);
-        const analyticsData = await getAnalytics(cafeId);
-        const incomeData = await getIncome(cafeId);
-        if (items) setFavouriteItems(items);
-        if (analyticsData) setAnalytics(analyticsData);
-        console.log(analyticsData);
-      } catch (error) {
-        console.error("Error fetching data:", error);
-      } finally {
-        setLoading(false);
-      }
-    };
+  const fetchData = async (filter) => {
+    try {
+      setLoading(true);
+      // Fetch the analytics data with the selected filter
+      const analyticsData = await getAnalytics(cafeId, filter);
+      console.log(analyticsData);
+      if (analyticsData) setAnalytics(analyticsData);
+    } catch (error) {
+      console.error("Error fetching data:", error);
+    } finally {
+      setLoading(false);
+    }
+  };
 
-    fetchData();
-  }, [cafeId]);
+  useEffect(() => {
+    fetchData(filter); // Fetch data when filter changes
+  }, [filter]);
 
   useEffect(() => {
     const getRandomColor = () => {
@@ -239,7 +237,7 @@ const App = ({ cafeId }) => {
             value={sold}
             percentage={percentage}
           />
-          {filteredItems[0]?.Item != undefined && (
+          {filteredItems[0]?.Item !== undefined && (
             <RoundedRectangle
               bgColor="#E5ECF6"
               title={filteredItems[0]?.Item.name}
@@ -247,7 +245,7 @@ const App = ({ cafeId }) => {
               percentage={filteredItems[0]?.percentageByPreviousPeriod}
             />
           )}
-          {filteredItems[0]?.Item == undefined && (
+          {filteredItems[0]?.Item === undefined && (
             <RoundedRectangle
               bgColor="#8989897a"
               title={"No fav item"}
@@ -257,8 +255,8 @@ const App = ({ cafeId }) => {
           <RoundedRectangle
             bgColor={viewStock ? "#979797" : "#E5ECF6"}
             title="Stok"
-            value={viewStock ? "‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ˅" : "‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ˄"} // Corrected ternary operator syntax
-            onClick={() => setViewStock(!viewStock)} // onClick should be a function
+            value={viewStock ? "‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ˅" : "‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ‎ ˄"}
+            onClick={() => setViewStock(!viewStock)}
           />
           <RoundedRectangle
             bgColor="#E3F5FF"