ok

2025-01-12 18:16:16 +07:00
parent da411bd3d2
commit 2864a00814
4 changed files with 212 additions and 101 deletions
--- a/src/components/Carousel.js
+++ b/src/components/Carousel.js
@@ -1,21 +1,18 @@
 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 Carousel = ({ selectedIndex, items, onSelect }) => {

  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
    }
  };
@@ -27,9 +24,9 @@ const Carousel = ({ items, onSelect }) => {
        <div
          className={`${styles.carouselItem} ${styles.prev}`}
          onClick={moveToPrev}
-          style={{ visibility: selectedIndex === -1 ? "hidden" : "visible" }}
+          style={{ visibility: selectedIndex === -1 && items.length > 0 ? "hidden" : "visible" , backgroundColor: items.length < 1 ? '#919191':'#007bff'}}
        >
-          {selectedIndex === -1 ? "+" : items[selectedIndex - 1]?.name || "+"}
+          {selectedIndex === -1 ?  (items.length > 0 ? "+" : "") : items[selectedIndex - 1]?.name || "+"}
        </div>

        {/* Current Item */}
@@ -42,7 +39,7 @@ const Carousel = ({ items, onSelect }) => {
          className={`${styles.carouselItem} ${styles.next}`}
          onClick={moveToNext}
          style={{
-            visibility: selectedIndex === items.length -1 ? "hidden" : "visible",
+            visibility: selectedIndex === items.length -1 && items.length > 0 ? "hidden" : "visible", backgroundColor: items.length < 1 ? '#919191':'#007bff'
          }}
        >
          {selectedIndex < items.length - 1 && items[selectedIndex + 1]?.name}
--- a/src/components/Carousel.module.css
+++ b/src/components/Carousel.module.css
@@ -44,7 +44,6 @@
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
-  background-color: #007bff;
  color: white;
  border: none;
  padding: 10px 20px;
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -354,9 +354,9 @@ const Header = ({
                          onChange={() => setIsEditMode(!isEditMode)}
                        />
                      </Child>
-                      <Child onClick={() => setModal("reports")}>Laporan</Child>
+                      <Child onClick={() => setModal("reports")}>Lihat laporan</Child>
                      <Child onClick={() => setModal("add_material")}>
-                        Stok
+                        Kelola bahan baku
                      </Child>

                      <Child hasChildren>
--- a/src/pages/MaterialList.js
+++ b/src/pages/MaterialList.js
@@ -30,14 +30,19 @@ const SetPaymentQr = ({ cafeId }) => {
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [showForm, setShowForm] = useState(false);
-  const [selectedMaterialId, setSelectedMaterialId] = useState(null);
+  const [selectedMaterialIndex, setSelectedMaterialIndex] = useState(-1);
  const [latestMutation, setLatestMutation] = useState([]);
  const [currentQuantity, setCurrentQuantity] = useState(-1);
  const [currentPrice, setCurrentPrice] = useState(0);
  const [quantityChange, setQuantityChange] = useState(0);
  const [sortOrder, setSortOrder] = useState("desc");
  const [isEditCurrentPrice, setIsEditCurrentPrice] = useState(false);
+  const [isViewingHistory, setIsViewingHistory] = useState(false);

+  const convertToInteger = (formattedValue) => {
+    // Remove dots and convert to integer
+    return parseInt(formattedValue.replace(/\./g, ""), 10);
+  };

  const formatCurrency = (value) => {
    if (!value) return "";
@@ -53,12 +58,14 @@ const SetPaymentQr = ({ cafeId }) => {

  useEffect(() => {
    const fetchMaterials = async () => {
-      setLoading(true);
      try {
        const data = await getMaterials(cafeId);
        setMaterials(data);
        console.log(data)
        setError(null);
+        if (data.length > 0) {
+          setSelectedMaterialIndex(0);
+        }
      } catch (error) {
        console.error("Error fetching materials:", error);
        setError("Failed to fetch materials.");
@@ -69,9 +76,6 @@ const SetPaymentQr = ({ cafeId }) => {
      try {
        const data = await getMaterialMutations(cafeId);
        setMutations(data);
-        if (data.length > 0) {
-          setSelectedMaterialId(0);
-        }
      } catch (err) {
        setError(err.message);
      } finally {
@@ -87,12 +91,10 @@ const SetPaymentQr = ({ cafeId }) => {
    setSortOrder(e.target.value);
  };

-  const filteredMutations = selectedMaterialId
-    ? mutations.filter((mutation) => mutation.materialId === selectedMaterialId)
-    : [];
+  const filteredMutations = mutations.filter((mutation) => mutation.materialId === materials[selectedMaterialIndex].materialId) || [];

  const sortedMutations = filteredMutations
-    .filter((mutation) => mutation.materialId === selectedMaterialId)
+    .filter((mutation) => mutation.materialId === materials[selectedMaterialIndex].materialId)
    .sort((a, b) => {
      if (sortOrder === "asc") {
        return new Date(a.createdAt) - new Date(b.createdAt);
@@ -122,7 +124,7 @@ const SetPaymentQr = ({ cafeId }) => {
      setMaterials(data);
      setError(null);
      if (data.length > 0) {
-        setSelectedMaterialId(0);
+        setSelectedMaterialIndex(0);
      }
    } catch (error) {
      console.error("Error creating material:", error);
@@ -141,8 +143,8 @@ const SetPaymentQr = ({ cafeId }) => {
      );
      setMaterials(updatedMaterials);
      setError(null);
-      if (selectedMaterialId === materialId) {
-        setSelectedMaterialId(
+      if (selectedMaterialIndex === materialId) {
+        setSelectedMaterialIndex(
          updatedMaterials.length > 0 ? updatedMaterials[0].materialId : null
        );
      }
@@ -155,25 +157,25 @@ const SetPaymentQr = ({ cafeId }) => {
  };

  const handlePrevious = () => {
-    if (selectedMaterialId) {
+    if (selectedMaterialIndex) {
      setQuantityChange(0);
      const currentIndex = materials.findIndex(
-        (material) => material.materialId === selectedMaterialId
+        (material) => material.materialId === selectedMaterialIndex
      );
      if (currentIndex > 0) {
-        setSelectedMaterialId(materials[currentIndex - 1].materialId);
+        setSelectedMaterialIndex(materials[currentIndex - 1].materialId);
      }
    }
  };

  const handleNext = () => {
-    if (selectedMaterialId) {
+    if (selectedMaterialIndex) {
      setQuantityChange(0);
      const currentIndex = materials.findIndex(
-        (material) => material.materialId === selectedMaterialId
+        (material) => material.materialId === selectedMaterialIndex
      );
      if (currentIndex < materials.length - 1) {
-        setSelectedMaterialId(materials[currentIndex + 1].materialId);
+        setSelectedMaterialIndex(materials[currentIndex + 1].materialId);
      }
    }
  };
@@ -184,10 +186,9 @@ const SetPaymentQr = ({ cafeId }) => {

  useEffect(() => {
    setQuantityChange(0);
-    console.log(selectedMaterialId)
-    if (selectedMaterialId > -1) {
+    if (materials.length > 0 || selectedMaterialIndex > -1) {
      const materialMutations = mutations.filter(
-        (mutation) => mutation.materialId === materials[selectedMaterialId]?.materialId
+        (mutation) => mutation.materialId === materials[selectedMaterialIndex]?.materialId
      );
      console.log(materialMutations)
      if (materialMutations.length > 0) {
@@ -203,24 +204,25 @@ const SetPaymentQr = ({ cafeId }) => {
        setCurrentPrice(formatCurrency(latestMutation.priceAtp));
      } else {
        setCurrentQuantity(0); // Default value if no mutations exist
-        setLatestMutation({newStock: 0});
+        setLatestMutation({ newStock: 0 });
        setCurrentPrice(0);
      }
    }

-  }, [selectedMaterialId]);
+
+  }, [materials, mutations, selectedMaterialIndex]);

  const handleUpdateStock = async () => {
-    if (selectedMaterialId) {
    setLoading(true);
    try {
+      const newPrice = convertToInteger(currentPrice)
      const newStock = currentQuantity + quantityChange;
      const formData = new FormData();
      formData.append("newStock", newStock);
-        formData.append("priceAtp", currentPrice);
+      formData.append("priceAtp", newPrice);
      formData.append("reason", "Stock update");

-        await createMaterialMutation(selectedMaterialId, formData);
+      await createMaterialMutation(materials[selectedMaterialIndex].materialId, formData);
      setQuantityChange(0);
      const updatedMutations = await getMaterialMutations(cafeId);
      setMutations(updatedMutations);
@@ -232,11 +234,10 @@ const SetPaymentQr = ({ cafeId }) => {
    } finally {
      setLoading(false);
    }
-    }
  };

  const currentMaterial = materials.find(
-    (material) => material.materialId === selectedMaterialId
+    (material) => material.materialId === selectedMaterialIndex
  );
  const formatDate = (timestamp) => {
    const date = new Date(timestamp);
@@ -246,10 +247,30 @@ const SetPaymentQr = ({ cafeId }) => {

  return (
    <div style={styles.container}>
-      <h3 style={styles.title}>Stok</h3>
-      <Carousel items={materials} onSelect={(e)=>setSelectedMaterialId(e)}/>
+      {loading ?
+        <>
+        </>
+        :
+        <>
+          <h3 style={styles.title}>Bahan baku</h3>
+          <Carousel items={materials} onSelect={(e) => setSelectedMaterialIndex(e)} selectedIndex={selectedMaterialIndex} />
+          {selectedMaterialIndex != -1 ?
+            <>
+              <div style={styles.switchContainer}>
+                <h3>Stok sekarang {currentQuantity}</h3>
+              </div>
+
+              <div style={styles.stokContainer}>
+                <button onClick={() => handleQuantityChange(currentQuantity + quantityChange > 0 ? -1 : 0)} style={styles.stockButton}>
+                  -
+                </button>
+                <p>{currentQuantity + quantityChange}</p>
+                <button onClick={() => handleQuantityChange(1)} style={styles.stockButton}>
+                  +
+                </button>
+              </div>
              <div style={styles.uploadMessage}>
-        <p>harga per {materials && materials[selectedMaterialId]?.unit} sekarang</p>
+                <p>harga per {materials && materials[selectedMaterialIndex]?.unit} sekarang</p>
              </div>
              <div style={styles.resultMessage}>

@@ -260,34 +281,96 @@ const SetPaymentQr = ({ cafeId }) => {
                    border: isEditCurrentPrice ? "1px solid #ccc" : "1px solid transparent",
                    backgroundColor: isEditCurrentPrice ? "white" : "transparent",
                  }}
-      disabled={!isEditCurrentPrice}
+                  disabled={!isEditCurrentPrice || quantityChange < 1}
                  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>
-
-      <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 onClick={() => quantityChange < 1 ? null : setIsEditCurrentPrice(!isEditCurrentPrice)} style={quantityChange < 1 ? styles.changeButtonDisabled : styles.changeButtonEnabled}>{isEditCurrentPrice ? 'Terapkan' : 'Ganti'}</div>
              </div>
              <div style={styles.buttonContainer}>
-        <button  style={styles.saveButton}>
-          Laporkan {quantityChange > 0 ? 'penambahan' : 'stok sekarang'} {quantityChange < 1 ? currentQuantity + quantityChange : quantityChange} {materials[selectedMaterialId]?.unit} 
+                <button onClick={handleUpdateStock} style={styles.saveButton}>
+                  Laporkan {quantityChange > 0 ? 'penambahan' : 'stok sekarang'} {quantityChange < 1 ? currentQuantity + quantityChange : quantityChange} {materials[selectedMaterialIndex]?.unit}
                </button>
              </div>
+              <div onClick={() => setIsViewingHistory(!isViewingHistory)} style={styles.historyTab}>
+                <h3> {isViewingHistory ? '˅' : '˃'} Riwayat stok</h3>
                <div style={styles.historyContainer}>
-        <h3> &gt; Riwayat stok</h3>
+                  {selectedMaterialIndex != -1 && isViewingHistory && !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>
+                  )}
+                </div>
+              </div>
+            </> :
+            <>
+              <div
+                style={{ display: "flex", alignItems: "center", margin: "10px", marginTop: '17px', marginBottom: '34px' }}
+              >
+                <div style={{ marginRight: "5px", fontSize: "1.2em" }}>ⓘ</div>
+                <h6 style={{ margin: 0, textAlign: "left" }}>
+                  Fitur ini mempermudah mengelola biaya dan memantau pengeluaran bahan.
+                </h6>
+              </div>
+
+              <div style={styles.switchContainer}>
+                <h3>Buat bahan baru</h3>
+              </div>
+              <div style={styles.resultMessage}>
+
+                <input
+
+                  style={{
+                    width: "100%",
+                    height: '31px',
+                    border: "1px solid #ccc"
+                  }}
+                  value={newMaterialName}
+                  onChange={(event) => setNewMaterialName(event.target.value)}
+                  placeholder="Masukkan nama barang"
+                />
+              </div>
+
+              <select
+                id="materialUnit"
+                value={newMaterialUnit}
+                onChange={(e) => setNewMaterialUnit(e.target.value)}
+                style={styles.unit}
+              >
+                <option value="gram">Satuan: gram</option>
+                <option value="ons">Satuan: ons</option>
+                <option value="kilogram">Satuan: kilogram</option>
+                <option value="kuintal">Satuan: kuintal</option>
+                <option value="liter">Satuan: liter</option>
+                <option value="piece">Satuan: piece</option>
+                <option value="meter">Satuan: meter</option>
+                <option value="pack">Satuan: pack</option>
+                <option value="sachet">Satuan: sachet</option>
+                <option value="box">Satuan: box</option>
+              </select>
+
+              <div style={styles.buttonContainer}>
+                <button style={styles.saveButton}>
+                  Buat bahan baku
+                </button>
+              </div>
+            </>
+          }
+        </>
+      }
    </div>
  );
 };
@@ -296,6 +379,7 @@ const SetPaymentQr = ({ cafeId }) => {
 const styles = {
  container: {
    width: '100%',
+    minHeight: '50vh',
    backgroundColor: "white",
    padding: "20px",
    borderRadius: "8px",
@@ -320,7 +404,7 @@ const styles = {
    fontWeight: 600,
    textAlign: "left",
  },
-  uploadButton: {
+  changeButtonEnabled: {
    paddingRight: '10px',
    backgroundColor: 'green',
    borderRadius: '30px',
@@ -331,6 +415,17 @@ const styles = {
    paddingLeft: '10px',
    paddingHeight: '10px',
  },
+  changeButtonDisabled: {
+    paddingRight: '10px',
+    backgroundColor: '#a1a1a1',
+    borderRadius: '30px',
+    color: 'white',
+    fontWeight: 700,
+    height: '36px',
+    lineHeight: '36px',
+    paddingLeft: '10px',
+    paddingHeight: '10px',
+  },
  resultMessage: {
    marginTop: "-13px",
    textAlign: "left",
@@ -341,15 +436,26 @@ const styles = {
    display: 'flex',
    justifyContent: 'space-evenly',
    alignItems: 'center',
-    marginTop: '20px',
-    marginTop: "20px",
+    marginTop: '18px',
+    marginBottom: "6px",
    textAlign: "left",
  },
  buttonContainer: {
-    marginTop: "20px",
+    marginTop: "11px",
    textAlign: "left",
  },
+  stockButton: {
+    padding: "10px 20px",
+    fontSize: "3.5vw",
+    backgroundColor: "#28a745",
+    color: "#fff",
+    border: "none",
+    borderRadius: "30px",
+    cursor: "pointer",
+    transition: "background-color 0.3s",
+  },
  saveButton: {
+    width: '100%',
    padding: "10px 20px",
    fontSize: "3.5vw",
    backgroundColor: "#28a745",
@@ -363,15 +469,24 @@ const styles = {
    marginTop: "20px",
    textAlign: "left",
  },
-  historyContainer: {
-    marginTop: "20px",
+  historyTab: {
    textAlign: "left",
  },
+  historyContainer: {
+    textAlign: "left",
+    maxHeight: '200px',
+    overflowY: 'auto'
+  },
  description: {
    margin: "10px 0",
    fontSize: "14px",
    color: "#666",
  },
+  unit: {
+    marginTop: '11px',
+    width: '100%',
+    height: '31px',
+  },
 };

 export default SetPaymentQr;