ok banget

src/pages/MaterialList.js

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 import API_BASE_URL from "../config.js";
 import {
   getMaterials,
@@ -10,7 +10,7 @@ import {
   getMaterialMutations,
 } from "../helpers/materialMutationHelpers";
 
-const MaterialList = ({ cafeId }) => {
+const MaterialList = ({ cafeId, handleClose }) => {
   const [materials, setMaterials] = useState([]);
   const [mutations, setMutations] = useState([]);
   const [newMaterialName, setNewMaterialName] = useState("");
@@ -21,9 +21,12 @@ const MaterialList = ({ cafeId }) => {
   const [error, setError] = useState(null);
   const [showForm, setShowForm] = useState(false);
   const [selectedMaterialId, setSelectedMaterialId] = useState(null);
+  const [latestMutation, setLatestMutation] = useState([]);
   const [currentQuantity, setCurrentQuantity] = useState(0);
+  const [currentPrice, setCurrentPrice] = useState(0);
   const [quantityChange, setQuantityChange] = useState(0);
   const [sortOrder, setSortOrder] = useState("desc");
+  const priceInputRef = useRef(null);
 
   useEffect(() => {
     const fetchMaterials = async () => {
@@ -69,9 +72,13 @@ const MaterialList = ({ cafeId }) => {
               : 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]);
@@ -174,6 +181,10 @@ const MaterialList = ({ cafeId }) => {
   const handleQuantityChange = (change) => {
     setQuantityChange((prev) => prev + change);
   };
+  // useEffect to log the latest quantityChange value
+  useEffect(() => {
+    if(quantityChange >= latestMutation.newStock) priceInputRef.current.focus();
+  }, [quantityChange]);
 
   const handleUpdateStock = async () => {
     if (selectedMaterialId) {
@@ -182,6 +193,7 @@ const MaterialList = ({ cafeId }) => {
         const newStock = currentQuantity + quantityChange;
         const formData = new FormData();
         formData.append("newStock", newStock);
+        formData.append("priceAtp", currentPrice);
         formData.append("reason", "Stock update");
 
         await createMaterialMutation(selectedMaterialId, formData);
@@ -209,7 +221,7 @@ const MaterialList = ({ cafeId }) => {
 
   return (
     <div style={styles.container}>
-      <h1 style={styles.heading}>Materials List</h1>
+      <h1 style={styles.heading}>Stok barang</h1>
 
       {error && <p style={styles.error}>{error}</p>}
       {loading && <p>Loading materials and mutations...</p>}
@@ -220,7 +232,7 @@ const MaterialList = ({ cafeId }) => {
           style={styles.toggleButton}
           disabled={loading}
         >
-          {showForm ? "Hide Form" : "Add New Material"}
+          {showForm ? "Batalkan" : "Tambah barang"}
         </button>
       )}
 
@@ -291,7 +303,13 @@ const MaterialList = ({ cafeId }) => {
                 (material) => material.materialId === selectedMaterialId
               ) === 0
             }
-            style={styles.navigationButton}
+            style={{...styles.navigationButton, 
+              backgroundColor: 
+                !selectedMaterialId ||
+                materials.findIndex((material) => material.materialId === selectedMaterialId) === 0
+                  ? '#a3a3a3'
+                  : '#5b81ff',
+            }}
           >
             {"<"}
           </button>
@@ -319,6 +337,7 @@ const MaterialList = ({ cafeId }) => {
                   <button style={styles.quantityDisplay}>
                     {currentQuantity + quantityChange}
                   </button>
+                    
                   <button
                     onClick={() => handleQuantityChange(1)}
                     style={styles.quantityButton}
@@ -326,6 +345,8 @@ const MaterialList = ({ cafeId }) => {
                     +
                   </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}
@@ -357,7 +378,13 @@ const MaterialList = ({ cafeId }) => {
               ) ===
                 materials.length - 1
             }
-            style={styles.navigationButton}
+            style={{...styles.navigationButton, 
+              backgroundColor: 
+                !selectedMaterialId ||
+                materials.findIndex((material) => material.materialId === selectedMaterialId) === materials.length - 1
+                  ? '#a3a3a3'
+                  : '#5b81ff',
+            }}
           >
             {">"}
           </button>
@@ -394,19 +421,19 @@ const MaterialList = ({ cafeId }) => {
           )}
         </div>
       )}
+      <div class="ItemLister_PaymentOption__YZlDL"><div style={{marginTop:'20px'}} onClick={handleClose} class="ItemLister_Pay2Button__+MIxX">Kembali</div></div>
     </div>
   );
 };
 
 const styles = {
   container: {
-    paddingLeft: "10px",
-    paddingRight: "10px",
-    maxWidth: "800px",
-    margin: "0 auto",
-    height: "100%", // Adjust height based on your needs
-    overflowY: "auto", // Enables vertical scrolling
-    backgroundColor: "white",
+    position: 'fixed',
+    height: '100vh',
+    width: '100vw',
+    top: 0,
+    right: 0,
+    backgroundColor: 'rgb(207, 207, 207)'
   },
   heading: {
     textAlign: "center",
@@ -569,6 +596,16 @@ const styles = {
     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",