diff --git a/src/components/Carousel.js b/src/components/Carousel.js
new file mode 100644
index 0000000..7573573
--- /dev/null
+++ b/src/components/Carousel.js
@@ -0,0 +1,55 @@
+import React, { useState } from "react";
+import styles from "./Carousel.module.css"; // Import CSS module
+
+const Carousel = ({ items, onSelect }) => {
+  const [selectedIndex, setSelectedIndex] = useState(0); // Start at the first item
+
+  const moveToNext = () => {
+    console.log('aa')
+    if (selectedIndex < items.length - 1) {
+        console.log('bb')
+      setSelectedIndex(selectedIndex + 1);
+      onSelect(selectedIndex + 1); // Send the next index to the parent
+    }
+  };
+
+  const moveToPrev = () => {
+    if (selectedIndex > -1) {
+      setSelectedIndex(selectedIndex - 1);
+      onSelect(selectedIndex - 1); // Send the previous index to the parent
+    }
+  };
+
+  return (
+    <div className={styles.carouselContainer}>
+      <div className={styles.carousel}>
+        {/* Previous Item */}
+        <div
+          className={`${styles.carouselItem} ${styles.prev}`}
+          onClick={moveToPrev}
+          style={{ visibility: selectedIndex === -1 ? "hidden" : "visible" }}
+        >
+          {selectedIndex === -1 ? "+" : items[selectedIndex - 1]?.name || "+"}
+        </div>
+
+        {/* Current Item */}
+        <div className={`${styles.carouselItem} ${styles.center}`}>
+          {selectedIndex >= 0 ? items[selectedIndex]?.name : "+"}
+        </div>
+
+        {/* Next Item */}
+        <div
+          className={`${styles.carouselItem} ${styles.next}`}
+          onClick={moveToNext}
+          style={{
+            visibility: selectedIndex === items.length -1 ? "hidden" : "visible",
+          }}
+        >
+          {selectedIndex < items.length - 1 && items[selectedIndex + 1]?.name}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Carousel;
diff --git a/src/components/Carousel.module.css b/src/components/Carousel.module.css
new file mode 100644
index 0000000..b3b786f
--- /dev/null
+++ b/src/components/Carousel.module.css
@@ -0,0 +1,75 @@
+/* Carousel.module.css */
+.carouselContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+}
+
+.carousel {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  max-width: 600px;
+  overflow: hidden;
+  position: relative;
+}
+
+.carouselItem {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: transform 0.3s ease-in-out;
+  height: 200px;
+  background-color: #007bff;
+  color: white;
+  font-size: 24px;
+  width: 100%;
+  border-radius: 8px;
+}
+
+.carouselItem.prev,
+.carouselItem.next {
+  transform: scale(0.8);
+}
+
+.carouselItem.center {
+  transform: scale(1);
+  width: 134%;
+}
+
+.prevBtn,
+.nextBtn {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: #007bff;
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  font-size: 16px;
+  border-radius: 8px;
+  cursor: pointer;
+}
+
+.prevBtn {
+  left: 10px;
+}
+
+.nextBtn {
+  right: 10px;
+}
+
+@media (max-width: 600px) {
+  .carouselItem {
+    font-size: 18px;
+    height: 110px;
+  }
+
+  .prevBtn,
+  .nextBtn {
+    padding: 8px 15px;
+    font-size: 14px;
+  }
+}
diff --git a/src/components/Header.js b/src/components/Header.js
index b922b7d..a74a5b0 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -34,10 +34,10 @@ const ProfileName = styled.h2`
   overflow: hidden;
   white-space: nowrap;
   animation: ${(props) => {
-      if (props.animate === "grow") return gg;
-      if (props.animate === "shrink") return ss;
-      return nn;
-    }}
+    if (props.animate === "grow") return gg;
+    if (props.animate === "shrink") return ss;
+    return nn;
+  }}
     0.5s forwards;
     text-align: left;
 `;
@@ -96,10 +96,10 @@ const ProfileImage = styled.img`
   cursor: pointer;
   z-index: 199;
   animation: ${(props) => {
-      if (props.animate === "grow") return g;
-      if (props.animate === "shrink") return s;
-      return "none";
-    }}
+    if (props.animate === "grow") return g;
+    if (props.animate === "shrink") return s;
+    return "none";
+  }}
     0.5s forwards;
 `;
 
@@ -219,7 +219,7 @@ const Child = styled.div`
 
 const Header = ({
   HeaderText,
-  HeaderSize='6vw',
+  HeaderSize = '6vw',
   shopId,
   shopName,
   shopImage,
@@ -235,7 +235,7 @@ const Header = ({
   removeConnectedGuestSides,
   setIsEditMode,
   isEditMode,
-  HeaderMargin='25px'
+  HeaderMargin = '25px'
 }) => {
   const { goToLogin, goToGuestSideLogin, goToAdminCafes } =
     useNavigationHelpers(shopId, tableCode);
@@ -316,9 +316,9 @@ const Header = ({
       </Title>
       <div style={{ visibility: showProfile ? "visible" : "hidden" }}>
         <ProfileImage
-          src={user.username == undefined? shopImage || 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-DjX_bGBax4NL14ULvkAdU4FP3FKoWXWu5w&s': "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-DjX_bGBax4NL14ULvkAdU4FP3FKoWXWu5w&s"}
+          src={user.username == undefined ? shopImage || 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-DjX_bGBax4NL14ULvkAdU4FP3FKoWXWu5w&s' : "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-DjX_bGBax4NL14ULvkAdU4FP3FKoWXWu5w&s"}
           alt="Profile"
-          onClick={user.username !== undefined?handleImageClick: null}
+          onClick={user.username !== undefined ? handleImageClick : null}
           animate={showRectangle && animate}
         />
         <ProfileName animate={showRectangle && animate}>
@@ -338,7 +338,7 @@ const Header = ({
                 </Child>
               )}
               {shopId && user.roleId == 1 && (
-                    <Child onClick={goToAdminCafes}>Dashboard</Child>)}
+                <Child onClick={goToAdminCafes}>Dashboard</Child>)}
               {shopId &&
                 user.userId == shopOwnerId &&
                 user.username !== undefined &&
@@ -346,25 +346,19 @@ const Header = ({
                   <>
                     <Child hasChildren>
                       {shopName}
-
                       <Child>
                         Mode edit &nbsp;
                         <Switch
-                        borderRadius={0}
+                          borderRadius={0}
                           checked={isEditMode}
                           onChange={() => setIsEditMode(!isEditMode)}
                         />
                       </Child>
-
-                      <Child onClick={() => setModal("welcome_config")}>
-                        Halaman sambutan
-                      </Child>
+                      <Child onClick={() => setModal("reports")}>Laporan</Child>
                       <Child onClick={() => setModal("add_material")}>
                         Stok
                       </Child>
-                      <Child onClick={() => setModal("edit_tables")}>
-                        Denah meja
-                      </Child>
+
                       <Child hasChildren>
                         Kasir
                         <Child onClick={() => setModal("create_clerk")}>
@@ -386,11 +380,18 @@ const Header = ({
                             </Child>
                           ))}
                       </Child>
-                      <Child onClick={() => setModal("payment_option")}>
-                        Opsi pembayaran
+                      <Child hasChildren>
+                        Konfigurasi
+                      <Child onClick={() => setModal("welcome_config")}>
+                        Desain kafe
+                      </Child>
+                      <Child onClick={() => setModal("edit_tables")}>
+                        Daftar meja
+                      </Child>
+                        <Child onClick={() => setModal("payment_option")}>
+                          Metode pembayaran
+                        </Child>
                       </Child>
-
-                      <Child onClick={() => setModal("reports")}>Laporan</Child>
                     </Child>
                   </>
                 )}
@@ -400,14 +401,14 @@ const Header = ({
                   <Child hasChildren>
                     {shopName}
 
-                      <Child>
-                        Mode edit&nbsp;
-                        <Switch
+                    <Child>
+                      Mode edit&nbsp;
+                      <Switch
                         borderRadius={0}
-                          checked={isEditMode}
-                          onChange={() => setIsEditMode(!isEditMode)}
-                        />
-                      </Child>
+                        checked={isEditMode}
+                        onChange={() => setIsEditMode(!isEditMode)}
+                      />
+                    </Child>
                     <Child onClick={() => setModal("add_material")}>
                       stok
                     </Child>
diff --git a/src/components/PaymentOptions.js b/src/components/PaymentOptions.js
index 05c715b..d1f766a 100644
--- a/src/components/PaymentOptions.js
+++ b/src/components/PaymentOptions.js
@@ -6,27 +6,27 @@ import {
   saveCafeDetails,
   setConfirmationStatus,
 } from "../helpers/cafeHelpers";
-import Switch from "react-switch";
+import Switch from "react-switch"; // Import the Switch component
 
-// Main Component
 const SetPaymentQr = ({ shopId }) => {
   const [qrPosition, setQrPosition] = useState([50, 50]);
   const [qrSize, setQrSize] = useState(50);
   const [qrPayment, setQrPayment] = useState();
   const [qrCodeDetected, setQrCodeDetected] = useState(false);
+  const [isNeedConfirmationState, setIsNeedConfirmationState] = useState(0);
   const qrPaymentInputRef = useRef(null);
   const qrCodeContainerRef = useRef(null);
-  const [isNeedConfirmation, setIsNeedConfirmation] = useState(false);
   const [cafe, setCafe] = useState({});
 
-  // Fetch cafe details on mount or shopId change
   useEffect(() => {
     const fetchCafe = async () => {
       try {
         const response = await getCafe(shopId);
         setCafe(response);
         setQrPayment(getImageUrl(response.qrPayment));
-        setIsNeedConfirmation(response.needsConfirmation);
+        console.log(response.needsConfirmation);
+
+        setIsNeedConfirmationState(response.needsConfirmation === true ? 1 : 0); // Set state based on fetched data
         setQrPosition([response.xposition, response.yposition]);
         setQrSize(response.scale);
       } catch (error) {
@@ -88,28 +88,32 @@ const SetPaymentQr = ({ shopId }) => {
     } catch (error) {
       console.error("Error saving cafe details:", error);
     }
-  };
 
-  // Toggle confirmation status
-  const handleChange = async () => {
     try {
-      const response = await setConfirmationStatus(
-        cafe.cafeId,
-        !isNeedConfirmation
-      );
-      setIsNeedConfirmation(response.needsConfirmation);
+      const response = await setConfirmationStatus(cafe.cafeId, isNeedConfirmationState === 1);
+      setIsNeedConfirmationState(response.needsConfirmation ? 1 : 0); // Update state after saving
     } catch (error) {
       console.error(error);
-      setIsNeedConfirmation(cafe.needsConfirmation);
+      setIsNeedConfirmationState(cafe.needsConfirmation ? 1 : 0); // Fallback to initial value
     }
   };
 
+  // Handle Switch toggle
+  const handleChange = (checked) => {
+    setIsNeedConfirmationState(checked ? 1 : 0); // Toggle state based on the switch
+  };
+
+  const handleError = () => {
+    setQrPayment('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSPsNr0TPq8dHT3nBwDQ6OHQQTrqzVFoeBOmuWfgyErrLbJi6f6CnnYhpNHEvkJ_2X-kyI&usqp=CAU'); // Set your fallback image here
+  };
+
   return (
     <div style={styles.container}>
-      <h2 style={styles.title}>QR pembayaran</h2>
+      <h3 style={styles.title}>Konfigurasi pembayaran</h3>
       <div
         id="qr-code-container"
         ref={qrCodeContainerRef}
+        onClick={() => qrPaymentInputRef.current.click()}
         style={{
           ...styles.qrCodeContainer,
           backgroundImage: `url(${qrPayment})`,
@@ -118,12 +122,12 @@ const SetPaymentQr = ({ shopId }) => {
           backgroundSize: "contain",
         }}
       >
-        <div
-          style={styles.overlayText}
-          onClick={() => qrPaymentInputRef.current.click()}
-        >
-          Click To Change
-        </div>
+        <img
+          src={qrPayment}
+          onError={handleError}
+          alt="QR Payment"
+          style={{ maxWidth: '100%',visibility: 'hidden' }} // hide the img element
+        />
         <input
           type="file"
           accept="image/*"
@@ -132,20 +136,36 @@ const SetPaymentQr = ({ shopId }) => {
           onChange={handleFileChange}
         />
       </div>
-      <div style={styles.resultMessage}>
-        {qrCodeDetected ? <p>QR Code Detected</p> : <p>Tidak ada qr yang terdeteksi</p>}
+      <div style={styles.uploadMessage}>
+        <p>Klik untuk unggah QRIS</p>
       </div>
-      <div style={styles.buttonContainer}>
-        <button onClick={handleSave} style={styles.saveButton}>
-          Save
-        </button>
+      <div style={styles.resultMessage}>
+        {qrCodeDetected && qrPayment !== 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSPsNr0TPq8dHT3nBwDQ6OHQQTrqzVFoeBOmuWfgyErrLbJi6f6CnnYhpNHEvkJ_2X-kyI&usqp=CAU' ? <p>QR terdeteksi</p> : <p>Tidak ada qr terdeteksi</p>}
+        {qrCodeDetected && qrPayment !== 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSPsNr0TPq8dHT3nBwDQ6OHQQTrqzVFoeBOmuWfgyErrLbJi6f6CnnYhpNHEvkJ_2X-kyI&usqp=CAU' ? <div 
+          onClick={() => qrPaymentInputRef.current.click()} style={styles.uploadButton}>Ganti</div> : <div 
+          onClick={() => qrPaymentInputRef.current.click()} style={styles.uploadButton}>Unggah</div>}
       </div>
       <div style={styles.switchContainer}>
         <h3>Pengecekan ketersediaan ganda</h3>
         <p style={styles.description}>
-        Nyalakan agar kasir memeriksa kembali ketersediaan produk sebelum pelanggan membayar.
+          Nyalakan agar kasir memeriksa kembali ketersediaan produk sebelum pelanggan membayar.
         </p>
-        <Switch onChange={handleChange} checked={isNeedConfirmation} />
+        <Switch
+          onChange={handleChange}
+          checked={isNeedConfirmationState === 1} // Convert to boolean
+          offColor="#888"
+          onColor="#4CAF50"
+          uncheckedIcon={false}
+          checkedIcon={false}
+          height={25}
+          width={50}
+        />
+      </div>
+
+      <div style={styles.buttonContainer}>
+        <button onClick={handleSave} style={styles.saveButton}>
+          Simpan
+        </button>
       </div>
     </div>
   );
@@ -162,40 +182,42 @@ const styles = {
   },
   title: {
     marginBottom: "20px",
-    fontSize: "24px",
     fontWeight: "bold",
   },
   qrCodeContainer: {
+    backgroundColor: '#999999',
+    borderRadius: '20px',
     position: "relative",
-    width: "300px",
-    height: "300px",
+    width: "100%",
+    height: "200px",
     backgroundSize: "contain",
-    border: "1px solid #ddd",
     overflow: "hidden",
     margin: "0 auto", // Center the QR code container
   },
-  overlayText: {
-    position: "absolute",
-    width: "100%",
-    height: "100%",
-    fontSize: "550%",
+  uploadMessage: {
+    fontWeight: 600,
     textAlign: "left",
-    top: "50%",
-    left: "50%",
-    transform: "translate(-50%, -50%)",
-    backgroundColor: "rgba(0, 0, 0, 0.5)",
-    color: "rgba(256, 256, 256, 0.5)",
-    padding: "10px",
-    borderRadius: "5px",
-    cursor: "pointer",
+  },
+  uploadButton: {
+    paddingRight: '10px',
+    backgroundColor: 'green',
+    borderRadius: '30px',
+    color: 'white',
+    fontWeight: 700,
+    height: '36px',
+    lineHeight: '36px',
+    paddingLeft: '10px',
+    paddingHeight: '10px',
   },
   resultMessage: {
-    marginTop: "20px",
-    textAlign: "center",
+    marginTop: "-24px",
+    textAlign: "left",
+    display: 'flex',
+    justifyContent: 'space-between'
   },
   buttonContainer: {
     marginTop: "20px",
-    textAlign: "center",
+    textAlign: "left",
   },
   saveButton: {
     padding: "10px 20px",
@@ -203,13 +225,13 @@ const styles = {
     backgroundColor: "#28a745",
     color: "#fff",
     border: "none",
-    borderRadius: "4px",
+    borderRadius: "30px",
     cursor: "pointer",
     transition: "background-color 0.3s",
   },
   switchContainer: {
     marginTop: "20px",
-    textAlign: "center",
+    textAlign: "left",
   },
   description: {
     margin: "10px 0",
diff --git a/src/pages/Dashboard.js b/src/pages/Dashboard.js
index e05935f..e919e69 100644
--- a/src/pages/Dashboard.js
+++ b/src/pages/Dashboard.js
@@ -861,7 +861,7 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
                   ))}
                 </div>
               </div>
-              diskon 50%
+              gratis 3 bulan pertama
             </div> 
             : 
             <div className={styles.mainHeading}>
@@ -873,7 +873,7 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
                   ))}
                 </div>
               </div>
-              diskon 50%
+              Gratis 3 bulan pertama
             </div>
             }
             <div className={styles.subHeading}>
diff --git a/src/pages/LinktreePage.module.css b/src/pages/LinktreePage.module.css
index 8bd57a6..95cb719 100644
--- a/src/pages/LinktreePage.module.css
+++ b/src/pages/LinktreePage.module.css
@@ -256,6 +256,7 @@
   border: 1px solid #ccc;
   margin-top: 5px;
   margin-bottom: 15px;
+  text-transform: lowercase;
 }
 
 .usernameInputError {
diff --git a/src/pages/MaterialList.js b/src/pages/MaterialList.js
index 5c29d88..1d6aa98 100644
--- a/src/pages/MaterialList.js
+++ b/src/pages/MaterialList.js
@@ -1,5 +1,12 @@
-import React, { useState, useEffect, useRef } from "react";
-import API_BASE_URL from "../config.js";
+import React, { useState, useRef, useEffect } from "react";
+import jsQR from "jsqr";
+import { getImageUrl } from "../helpers/itemHelper";
+import {
+  getCafe,
+  saveCafeDetails,
+  setConfirmationStatus,
+} from "../helpers/cafeHelpers";
+
 import {
   getMaterials,
   createMaterial,
@@ -10,7 +17,10 @@ import {
   getMaterialMutations,
 } from "../helpers/materialMutationHelpers";
 
-const MaterialList = ({ cafeId, handleClose }) => {
+import Switch from "react-switch"; // Import the Switch component
+import Carousel from '../components/Carousel'
+
+const SetPaymentQr = ({ cafeId }) => {
   const [materials, setMaterials] = useState([]);
   const [mutations, setMutations] = useState([]);
   const [newMaterialName, setNewMaterialName] = useState("");
@@ -22,11 +32,24 @@ const MaterialList = ({ cafeId, handleClose }) => {
   const [showForm, setShowForm] = useState(false);
   const [selectedMaterialId, setSelectedMaterialId] = useState(null);
   const [latestMutation, setLatestMutation] = useState([]);
-  const [currentQuantity, setCurrentQuantity] = useState(0);
+  const [currentQuantity, setCurrentQuantity] = useState(-1);
   const [currentPrice, setCurrentPrice] = useState(0);
   const [quantityChange, setQuantityChange] = useState(0);
   const [sortOrder, setSortOrder] = useState("desc");
-  const priceInputRef = useRef(null);
+  const [isEditCurrentPrice, setIsEditCurrentPrice] = useState(false);
+
+
+  const formatCurrency = (value) => {
+    if (!value) return "";
+    // Remove existing formatting (dots) and format again
+    const numericValue = value.toString().replace(/\D/g, ""); // Keep only digits
+    return numericValue.replace(/\B(?=(\d{3})+(?!\d))/g, "."); // Add dot as thousands separator
+  };
+
+  const handleChange = (e) => {
+    const formattedValue = formatCurrency(e.target.value);
+    setCurrentPrice(formattedValue);
+  };
 
   useEffect(() => {
     const fetchMaterials = async () => {
@@ -34,10 +57,8 @@ const MaterialList = ({ cafeId, handleClose }) => {
       try {
         const data = await getMaterials(cafeId);
         setMaterials(data);
+        console.log(data)
         setError(null);
-        if (data.length > 0 && !selectedMaterialId) {
-          setSelectedMaterialId(data[0].materialId);
-        }
       } catch (error) {
         console.error("Error fetching materials:", error);
         setError("Failed to fetch materials.");
@@ -48,6 +69,9 @@ const MaterialList = ({ cafeId, handleClose }) => {
       try {
         const data = await getMaterialMutations(cafeId);
         setMutations(data);
+        if (data.length > 0) {
+          setSelectedMaterialId(0);
+        }
       } catch (err) {
         setError(err.message);
       } finally {
@@ -58,31 +82,7 @@ const MaterialList = ({ cafeId, handleClose }) => {
     fetchMaterials();
     fetchMutations();
   }, [cafeId]);
-
-  useEffect(() => {
-    if (selectedMaterialId) {
-      const materialMutations = mutations.filter(
-        (mutation) => mutation.materialId === selectedMaterialId
-      );
-      if (materialMutations.length > 0) {
-        const latestMutation = materialMutations.reduce(
-          (latest, current) =>
-            new Date(current.createdAt) > new Date(latest.createdAt)
-              ? current
-              : latest,
-          materialMutations[0]
-        );
-        setLatestMutation(latestMutation);
-        setCurrentQuantity(latestMutation.newStock);
-        setCurrentPrice(latestMutation.priceAtp);
-      } else {
-        setCurrentQuantity(0); // Default value if no mutations exist
-        setLatestMutation({newStock: 0});
-        setCurrentPrice(0);
-      }
-    }
-  }, [selectedMaterialId, mutations]);
-
+  
   const handleSortChange = (e) => {
     setSortOrder(e.target.value);
   };
@@ -122,7 +122,7 @@ const MaterialList = ({ cafeId, handleClose }) => {
       setMaterials(data);
       setError(null);
       if (data.length > 0) {
-        setSelectedMaterialId(data[0].materialId);
+        setSelectedMaterialId(0);
       }
     } catch (error) {
       console.error("Error creating material:", error);
@@ -181,10 +181,34 @@ const MaterialList = ({ cafeId, handleClose }) => {
   const handleQuantityChange = (change) => {
     setQuantityChange((prev) => prev + change);
   };
-  // useEffect to log the latest quantityChange value
+
   useEffect(() => {
-    if(quantityChange >= latestMutation.newStock) priceInputRef.current.focus();
-  }, [quantityChange]);
+    setQuantityChange(0);
+    console.log(selectedMaterialId)
+    if (selectedMaterialId > -1) {
+      const materialMutations = mutations.filter(
+        (mutation) => mutation.materialId === materials[selectedMaterialId]?.materialId
+      );
+      console.log(materialMutations)
+      if (materialMutations.length > 0) {
+        const latestMutation = materialMutations.reduce(
+          (latest, current) =>
+            new Date(current.createdAt) > new Date(latest.createdAt)
+              ? current
+              : latest,
+          materialMutations[0]
+        );
+        setLatestMutation(latestMutation);
+        setCurrentQuantity(latestMutation.newStock);
+        setCurrentPrice(formatCurrency(latestMutation.priceAtp));
+      } else {
+        setCurrentQuantity(0); // Default value if no mutations exist
+        setLatestMutation({newStock: 0});
+        setCurrentPrice(0);
+      }
+    }
+
+  }, [selectedMaterialId]);
 
   const handleUpdateStock = async () => {
     if (selectedMaterialId) {
@@ -219,406 +243,135 @@ const MaterialList = ({ cafeId, handleClose }) => {
     return date.toLocaleString();
   };
 
+
   return (
     <div style={styles.container}>
-      <h1 style={styles.heading}>Stok barang</h1>
+      <h3 style={styles.title}>Stok</h3>
+      <Carousel items={materials} onSelect={(e)=>setSelectedMaterialId(e)}/>
+      <div style={styles.uploadMessage}>
+        <p>harga per {materials && materials[selectedMaterialId]?.unit} sekarang</p>
+      </div>
+      <div style={styles.resultMessage}>
 
-      {error && <p style={styles.error}>{error}</p>}
-      {loading && <p>Loading materials and mutations...</p>}
+    <input
+      
+      style={{
+        width: "200px",
+        border: isEditCurrentPrice ? "1px solid #ccc" : "1px solid transparent",
+        backgroundColor: isEditCurrentPrice ? "white" : "transparent",
+      }}
+      disabled={!isEditCurrentPrice}
+      value={currentPrice}
+      onChange={handleChange}
+      placeholder="Enter amount"
+    />
+        <div onClick={() => setIsEditCurrentPrice(!isEditCurrentPrice)} style={styles.uploadButton}>{isEditCurrentPrice ? 'Terapkan' : 'Ganti'}</div>
+      </div>
+      <div style={styles.switchContainer}>
+        <h3>Stok sekarang {currentQuantity}</h3>
+      </div>
 
-      {!loading && (
-        <button
-          onClick={() => setShowForm(!showForm)}
-          style={styles.toggleButton}
-          disabled={loading}
-        >
-          {showForm ? "Batalkan" : "Tambah barang"}
+      <div style={styles.stokContainer}>
+        <button onClick={() => handleQuantityChange(currentQuantity + quantityChange > 0 ? -1 : 0)} style={styles.saveButton}>
+          -
+        </button>
+        <p>{currentQuantity + quantityChange}</p>
+        <button onClick={() => handleQuantityChange(1)} style={styles.saveButton}>
+          +
         </button>
-      )}
-
-      <div
-        style={{
-          ...styles.formContainer,
-          height: showForm ? "auto" : "0",
-          overflow: "hidden",
-        }}
-      >
-        <form onSubmit={handleCreateMaterial} style={styles.form}>
-          <div style={styles.formGroup}>
-            <label htmlFor="materialName" style={styles.label}>
-              Name:
-            </label>
-            <input
-              id="materialName"
-              type="text"
-              value={newMaterialName}
-              onChange={(e) => setNewMaterialName(e.target.value)}
-              required
-              style={styles.input}
-            />
-          </div>
-          <div style={styles.formGroup}>
-            <label htmlFor="materialUnit" style={styles.label}>
-              Unit:
-            </label>
-            <select
-              id="materialUnit"
-              value={newMaterialUnit}
-              onChange={(e) => setNewMaterialUnit(e.target.value)}
-              style={styles.input}
-            >
-              <option value="gram">Gram</option>
-              <option value="ons">Ons</option>
-              <option value="kilogram">Kilogram</option>
-              <option value="kuintal">Kuintal</option>
-              <option value="liter">Liter</option>
-              <option value="piece">Piece</option>
-              <option value="meter">Meter</option>
-            </select>
-          </div>
-          <div style={styles.formGroup}>
-            <label htmlFor="materialImage" style={styles.label}>
-              Image:
-            </label>
-            <input
-              id="materialImage"
-              type="file"
-              onChange={(e) => setNewMaterialImage(e.target.files[0])}
-              style={styles.input}
-            />
-          </div>
-          <button type="submit" style={styles.submitButton} disabled={loading}>
-            {loading ? "Creating..." : "Create Material"}
-          </button>
-        </form>
       </div>
-
-      {!loading && (
-        <div style={styles.navigationContainer}>
-          <button
-            onClick={handlePrevious}
-            disabled={
-              !selectedMaterialId ||
-              materials.findIndex(
-                (material) => material.materialId === selectedMaterialId
-              ) === 0
-            }
-            style={{...styles.navigationButton, 
-              backgroundColor: 
-                !selectedMaterialId ||
-                materials.findIndex((material) => material.materialId === selectedMaterialId) === 0
-                  ? '#a3a3a3'
-                  : '#5b81ff',
-            }}
-          >
-            {"<"}
-          </button>
-          <div style={styles.materialCardContainer}>
-            {currentMaterial ? (
-              <div style={styles.materialCard}>
-                {currentMaterial.image && (
-                  <img
-                    src={`${API_BASE_URL}/${currentMaterial.image}`}
-                    alt={currentMaterial.name}
-                    style={styles.image}
-                  />
-                )}
-                <div style={styles.cardContent}>
-                  <h3 style={styles.cardTitle}>{currentMaterial.name}</h3>
-                </div>
-                <div style={styles.buttonContainer}>
-                  <button
-                    onClick={() => handleQuantityChange(-1)}
-                    style={styles.quantityButton}
-                  >
-                    -
-                  </button>
-                  <button style={styles.quantityDisplay}>
-                    {currentQuantity + quantityChange}
-                  </button>
-                    
-                  <button
-                    onClick={() => handleQuantityChange(1)}
-                    style={styles.quantityButton}
-                  >
-                    +
-                  </button>
-                </div>
-                  <p>harga per {currentMaterial.unit}</p>
-                  <input ref={priceInputRef} disabled={(currentQuantity+quantityChange) <= latestMutation.newStock} value={currentPrice} onChange={(e)=>setCurrentPrice(e.target.value)} style={styles.priceAtp}/>
-                <button
-                  onClick={handleUpdateStock}
-                  style={styles.updateMutation}
-                >
-                  Update Stock
-                </button>
-                <button
-                  onClick={() =>
-                    handleDeleteMaterial(currentMaterial.materialId)
-                  }
-                  disabled={deleting === currentMaterial.materialId || loading}
-                  style={styles.deleteButton}
-                >
-                  {deleting === currentMaterial.materialId
-                    ? "Deleting..."
-                    : "Delete"}
-                </button>
-              </div>
-            ) : (
-              <p>No materials available.</p>
-            )}
-          </div>
-          <button
-            onClick={handleNext}
-            disabled={
-              !selectedMaterialId ||
-              materials.findIndex(
-                (material) => material.materialId === selectedMaterialId
-              ) ===
-                materials.length - 1
-            }
-            style={{...styles.navigationButton, 
-              backgroundColor: 
-                !selectedMaterialId ||
-                materials.findIndex((material) => material.materialId === selectedMaterialId) === materials.length - 1
-                  ? '#a3a3a3'
-                  : '#5b81ff',
-            }}
-          >
-            {">"}
-          </button>
-        </div>
-      )}
-
-      <div style={styles.sortContainer}>
-        <label htmlFor="sortOrder">Sort by : </label>
-        <select
-          id="sortOrder"
-          value={sortOrder}
-          onChange={handleSortChange}
-          style={styles.sortSelect}
-        >
-          <option value="desc">latest</option>
-          <option value="asc">oldest</option>
-        </select>
+      <div style={styles.buttonContainer}>
+        <button  style={styles.saveButton}>
+          Laporkan {quantityChange > 0 ? 'penambahan' : 'stok sekarang'} {quantityChange < 1 ? currentQuantity + quantityChange : quantityChange} {materials[selectedMaterialId]?.unit} 
+        </button>
       </div>
-
-      {selectedMaterialId && !loading && (
-        <div style={styles.mutationContainer}>
-          {sortedMutations.length > 0 ? (
-            sortedMutations.map((mutation) => (
-              <div key={mutation.id} style={styles.mutationCard}>
-                <h4 style={styles.mutationTitle}>
-                  {formatDate(mutation.createdAt)}
-                </h4>
-                <p>Details: {mutation.reason}</p>
-                <p>stok {mutation.newStock}</p>
-              </div>
-            ))
-          ) : (
-            <p>No mutations available.</p>
-          )}
+      <div style={styles.historyContainer}>
+        <h3> &gt; Riwayat stok</h3>
         </div>
-      )}
-      <div class="ItemLister_PaymentOption__YZlDL"><div style={{marginTop:'20px'}} onClick={handleClose} class="ItemLister_Pay2Button__+MIxX">Kembali</div></div>
-      <div style={{marginTop:'58px'}} ></div>
     </div>
   );
 };
 
+// Styles
 const styles = {
   container: {
-    position: 'fixed',
-    height: '100vh',
-    width: '100vw',
-    top: 0,
-    right: 0,
-    backgroundColor: 'rgb(207, 207, 207)',
-    overflowY: 'auto'
+    width: '100%',
+    backgroundColor: "white",
+    padding: "20px",
+    borderRadius: "8px",
+    boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)",
+    textAlign: "center", // Center text and children
   },
-  heading: {
-    textAlign: "center",
-  },
-  toggleButton: {
-    display: "block",
-    width: "100%",
-    padding: "10px",
-    borderRadius: "5px",
-    border: "none",
-    backgroundColor: "#007bff",
-    color: "white",
-    fontSize: "16px",
-    cursor: "pointer",
+  title: {
     marginBottom: "20px",
-    transition: "background-color 0.3s ease",
+    fontWeight: "bold",
   },
-  formContainer: {
-    transition: "height 0.5s ease-in-out",
-    overflow: "hidden",
-  },
-  form: {
-    marginBottom: "20px",
-  },
-  formGroup: {
-    marginBottom: "15px",
-  },
-  label: {
-    display: "block",
-    marginBottom: "5px",
-    fontWeight: "600",
-  },
-  input: {
-    width: "100%",
-    padding: "10px",
-    border: "1px solid #ddd",
-    borderRadius: "8px",
-    boxSizing: "border-box",
-  },
-  submitButton: {
-    padding: "12px 20px",
-    border: "none",
-    borderRadius: "8px",
-    backgroundColor: "#28a745",
-    color: "#fff",
-    cursor: "pointer",
-    fontSize: "16px",
-    transition: "background-color 0.3s, transform 0.3s",
-    boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
-  },
-  deleteButton: {
-    marginLeft: "10px",
-    padding: "8px 15px",
-    border: "none",
-    borderRadius: "8px",
-    backgroundColor: "#dc3545",
-    color: "#fff",
-    cursor: "pointer",
-    fontSize: "14px",
-    transition: "background-color 0.3s, transform 0.3s",
-    boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
-  },
-  navigationContainer: {
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    marginTop: "20px",
+  qrCodeContainer: {
+    backgroundColor: '#999999',
+    borderRadius: '20px',
     position: "relative",
+    width: "100%",
+    height: "200px",
+    backgroundSize: "contain",
+    overflow: "hidden",
+    margin: "0 auto", // Center the QR code container
   },
-  navigationButton: {
-    padding: "10px",
-    border: "none",
-    borderRadius: "5px",
-    backgroundColor: "#007bff",
-    color: "white",
-    fontSize: "18px",
-    cursor: "pointer",
-    margin: "0 5px",
-    transition: "background-color 0.3s ease",
+  uploadMessage: {
+    fontWeight: 600,
+    textAlign: "left",
   },
-  materialCardContainer: {
-    flex: "1",
-    display: "flex",
-    justifyContent: "center",
-    transition: "opacity 0.5s ease-in-out",
+  uploadButton: {
+    paddingRight: '10px',
+    backgroundColor: 'green',
+    borderRadius: '30px',
+    color: 'white',
+    fontWeight: 700,
+    height: '36px',
+    lineHeight: '36px',
+    paddingLeft: '10px',
+    paddingHeight: '10px',
   },
-  materialCard: {
-    padding: "15px",
-    borderRadius: "8px",
-    border: "1px solid #ddd",
-    backgroundColor: "#fff",
-    boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
-    display: "flex",
-    flexDirection: "column",
-    alignItems: "center",
-    textAlign: "center",
+  resultMessage: {
+    marginTop: "-13px",
+    textAlign: "left",
+    display: 'flex',
+    justifyContent: 'space-between'
   },
-  cardContent: {
-    marginBottom: "10px",
-  },
-  cardTitle: {
-    fontSize: "18px",
-    fontWeight: "600",
-    marginBottom: "5px",
-  },
-  image: {
-    width: "100px",
-    height: "100px",
-    borderRadius: '50%',
-    objectFit: "contain",
-    marginBottom: "10px",
-  },
-  error: {
-    color: "#dc3545",
-    marginBottom: "15px",
-  },
-  mutationContainer: {
+  stokContainer: {
+    display: 'flex',
+    justifyContent: 'space-evenly',
+    alignItems: 'center',
+    marginTop: '20px',
     marginTop: "20px",
-    padding: "10px",
-    borderRadius: "8px",
-    border: "1px solid #ddd",
-    backgroundColor: "#f8f9fa",
-    boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
-  },
-  mutationCard: {
-    padding: "10px",
-    borderRadius: "8px",
-    border: "1px solid #ddd",
-    backgroundColor: "#fff",
-    marginBottom: "10px",
-    boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
-  },
-  mutationTitle: {
-    fontSize: "16px",
-    fontWeight: "600",
+    textAlign: "left",
   },
   buttonContainer: {
-    display: "flex",
-    alignItems: "center",
-    marginTop: "10px",
+    marginTop: "20px",
+    textAlign: "left",
   },
-  quantityButton: {
-    padding: "8px 12px",
-    border: "none",
-    borderRadius: "5px",
-    backgroundColor: "#007bff",
-    color: "white",
-    fontSize: "16px",
-    cursor: "pointer",
-    margin: "0 5px",
-    transition: "background-color 0.3s ease",
-  },
-  quantityDisplay: {
-    padding: "8px 12px",
-    border: "1px solid #ddd",
-    borderRadius: "5px",
-    backgroundColor: "#fff",
-    color: "#000",
-    fontSize: "16px",
-    textAlign: "center",
-    margin: "0 5px",
-  },
-  priceAtp: {
-    padding: "8px 12px",
-    border: "1px solid #ddd",
-    borderRadius: "5px",
-    textAlign: 'left',
-    backgroundColor: "#fff",
-    color: "#000",
-    fontSize: "16px",
-    margin: "0 5px",
-  },
-  updateMutation: {
-    marginTop: "10px",
-    padding: "12px 20px",
-    border: "none",
-    borderRadius: "8px",
-    backgroundColor: "#007bff",
+  saveButton: {
+    padding: "10px 20px",
+    fontSize: "3.5vw",
+    backgroundColor: "#28a745",
     color: "#fff",
+    border: "none",
+    borderRadius: "30px",
     cursor: "pointer",
-    fontSize: "16px",
-    transition: "background-color 0.3s, transform 0.3s",
-    boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
+    transition: "background-color 0.3s",
+  },
+  switchContainer: {
+    marginTop: "20px",
+    textAlign: "left",
+  },
+  historyContainer: {
+    marginTop: "20px",
+    textAlign: "left",
+  },
+  description: {
+    margin: "10px 0",
+    fontSize: "14px",
+    color: "#666",
   },
 };
 
-export default MaterialList;
+export default SetPaymentQr;