364 lines
14 KiB
JavaScript
364 lines
14 KiB
JavaScript
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,
|
||
deleteMaterial,
|
||
} from "../helpers/materialHelpers";
|
||
import {
|
||
createMaterialMutation,
|
||
getMaterialMutations,
|
||
} from "../helpers/materialMutationHelpers";
|
||
|
||
import Switch from "react-switch"; // Import the Switch component
|
||
import Carousel from '../components/Carousel'
|
||
import styles from './MaterialList.module.css'; // Import the CSS Module
|
||
|
||
const SetPaymentQr = ({ cafeId }) => {
|
||
// All your state and logic goes here (unchanged)
|
||
const [materials, setMaterials] = useState([]);
|
||
const [mutations, setMutations] = useState([]);
|
||
const [newMaterialName, setNewMaterialName] = useState("");
|
||
const [newMaterialUnit, setNewMaterialUnit] = useState("kilogram");
|
||
const [newMaterialImage, setNewMaterialImage] = useState(null);
|
||
const [deleting, setDeleting] = useState(null);
|
||
const [loading, setLoading] = useState(true);
|
||
const [error, setError] = useState(null);
|
||
const [showForm, setShowForm] = useState(false);
|
||
const [selectedMaterialIndex, setSelectedMaterialIndex] = useState(-1);
|
||
const [latestMutation, setLatestMutation] = useState([]);
|
||
const [currentQuantity, setCurrentQuantity] = useState(-1);
|
||
const [currentPrice, setCurrentPrice] = useState(0);
|
||
const [newPrice, setNewPrice] = 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 "";
|
||
// 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);
|
||
setNewPrice(formattedValue);
|
||
};
|
||
|
||
useEffect(() => {
|
||
const fetchMaterials = async () => {
|
||
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.");
|
||
}
|
||
};
|
||
|
||
const fetchMutations = async () => {
|
||
try {
|
||
const data = await getMaterialMutations(cafeId);
|
||
setMutations(data);
|
||
} catch (err) {
|
||
setError(err.message);
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
fetchMaterials();
|
||
fetchMutations();
|
||
}, [cafeId]);
|
||
|
||
const filteredMutations = mutations.filter((mutation) => mutation.materialId === materials[selectedMaterialIndex]?.materialId) || [];
|
||
|
||
const sortedMutations = filteredMutations
|
||
.filter((mutation) => mutation.materialId === materials[selectedMaterialIndex].materialId)
|
||
.sort((a, b) => {
|
||
if (sortOrder === "asc") {
|
||
return new Date(a.createdAt) - new Date(b.createdAt);
|
||
} else {
|
||
return new Date(b.createdAt) - new Date(a.createdAt);
|
||
}
|
||
});
|
||
|
||
const handleCreateMaterial = async (e) => {
|
||
e.preventDefault();
|
||
setLoading(true);
|
||
|
||
const formData = new FormData();
|
||
formData.append("name", newMaterialName);
|
||
formData.append("unit", newMaterialUnit);
|
||
if (newMaterialImage) {
|
||
formData.append("image", newMaterialImage);
|
||
}
|
||
|
||
try {
|
||
await createMaterial(cafeId, formData);
|
||
setNewMaterialName("");
|
||
setNewMaterialUnit("kilogram");
|
||
setNewMaterialImage(null);
|
||
setShowForm(false);
|
||
const data = await getMaterials(cafeId);
|
||
setMaterials(data);
|
||
setError(null);
|
||
if (data.length > 0) {
|
||
setSelectedMaterialIndex(0);
|
||
}
|
||
} catch (error) {
|
||
console.error("Error creating material:", error);
|
||
setError("Failed to create material.");
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const handleDeleteMaterial = async (materialId) => {
|
||
setDeleting(materialId);
|
||
try {
|
||
await deleteMaterial(materialId);
|
||
const updatedMaterials = materials.filter(
|
||
(material) => material.materialId !== materialId
|
||
);
|
||
setMaterials(updatedMaterials);
|
||
setError(null);
|
||
if (selectedMaterialIndex === materialId) {
|
||
setSelectedMaterialIndex(
|
||
updatedMaterials.length > 0 ? updatedMaterials[0].materialId : null
|
||
);
|
||
}
|
||
} catch (error) {
|
||
console.error("Error deleting material:", error);
|
||
setError("Failed to delete material.");
|
||
} finally {
|
||
setDeleting(null);
|
||
}
|
||
};
|
||
|
||
const handleQuantityChange = (change) => {
|
||
setQuantityChange((prev) => prev + change);
|
||
if (quantityChange + change < 1) setNewPrice(currentPrice);
|
||
|
||
setIsEditCurrentPrice(false);
|
||
};
|
||
|
||
useEffect(() => {
|
||
setQuantityChange(0);
|
||
if (materials.length > 0 || selectedMaterialIndex > -1) {
|
||
const materialMutations = mutations.filter(
|
||
(mutation) => mutation.materialId === materials[selectedMaterialIndex]?.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));
|
||
setNewPrice(formatCurrency(latestMutation.priceAtp));
|
||
} else {
|
||
setCurrentQuantity(0); // Default value if no mutations exist
|
||
setLatestMutation({ newStock: 0 });
|
||
setCurrentPrice(0);
|
||
setNewPrice(0);
|
||
}
|
||
}
|
||
|
||
|
||
setIsViewingHistory(false);
|
||
}, [materials, mutations, selectedMaterialIndex]);
|
||
|
||
const handleUpdateStock = async () => {
|
||
setLoading(true);
|
||
try {
|
||
const newprice = convertToInteger(newPrice)
|
||
const newStock = currentQuantity + quantityChange;
|
||
const formData = new FormData();
|
||
formData.append("newStock", newStock);
|
||
formData.append("priceAtp", newprice);
|
||
formData.append("reason", "Stock update");
|
||
|
||
await createMaterialMutation(materials[selectedMaterialIndex].materialId, formData);
|
||
setQuantityChange(0);
|
||
const updatedMutations = await getMaterialMutations(cafeId);
|
||
setMutations(updatedMutations);
|
||
setCurrentQuantity(newStock);
|
||
setError(null);
|
||
} catch (error) {
|
||
console.error("Error updating stock:", error);
|
||
setError("Failed to update stock.");
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const currentMaterial = materials.find(
|
||
(material) => material.materialId === selectedMaterialIndex
|
||
);
|
||
const formatDate = (timestamp) => {
|
||
const date = new Date(timestamp);
|
||
return date.toLocaleString();
|
||
};
|
||
|
||
return (
|
||
<div className={styles.container}>
|
||
{loading ? (
|
||
<></>
|
||
) : (
|
||
<>
|
||
<h3 className={styles.title}>Bahan baku</h3>
|
||
<Carousel items={materials} onSelect={(e) => setSelectedMaterialIndex(e)} selectedIndex={selectedMaterialIndex} />
|
||
{selectedMaterialIndex !== -1 ? (
|
||
<>
|
||
<div className={styles.switchContainer}>
|
||
<h3>Stok sekarang {currentQuantity}</h3>
|
||
</div>
|
||
|
||
<div className={styles.stokContainer}>
|
||
<button onClick={() => handleQuantityChange(currentQuantity + quantityChange > 0 ? -1 : 0)} className={styles.stockButton}>
|
||
-
|
||
</button>
|
||
<p>{currentQuantity + quantityChange}</p>
|
||
<button onClick={() => handleQuantityChange(1)} className={styles.stockButton}>
|
||
+
|
||
</button>
|
||
</div>
|
||
<div className={styles.uploadMessage}>
|
||
<p>harga per {materials && materials[selectedMaterialIndex]?.unit} sekarang</p>
|
||
</div>
|
||
<div className={styles.resultMessage}>
|
||
<input
|
||
className={styles.resultMessageInput} // Replace inline style with CSS module class
|
||
disabled={!isEditCurrentPrice || quantityChange < 1}
|
||
value={newPrice}
|
||
onChange={handleChange}
|
||
placeholder="Enter amount"
|
||
/>
|
||
<div onClick={() => quantityChange < 1 ? null : setIsEditCurrentPrice(!isEditCurrentPrice)} className={quantityChange < 1 ? styles.changeButtonDisabled : styles.changeButtonEnabled}>
|
||
{isEditCurrentPrice ? 'Terapkan' : 'Ganti'}
|
||
</div>
|
||
</div>
|
||
<div className={styles.buttonContainer}>
|
||
<button onClick={handleUpdateStock} className={styles.saveButton}>
|
||
Laporkan {quantityChange > 0 ? 'penambahan' : 'stok sekarang'} {quantityChange < 1 ? currentQuantity + quantityChange : quantityChange} {materials[selectedMaterialIndex]?.unit}
|
||
</button>
|
||
</div>
|
||
<div className={styles.historyTab}>
|
||
<h3 onClick={() => setIsViewingHistory(!isViewingHistory)}> {isViewingHistory ? '˅' : '˃'} Riwayat stok</h3>
|
||
{selectedMaterialIndex !== -1 && isViewingHistory && !loading && (
|
||
<>
|
||
<div className={styles.sorter} onClick={() => setSortOrder(sortOrder == 'asc' ? 'desc' : 'asc')}>
|
||
Urutkan: {sortOrder === 'asc' ? "terlama" : "terbaru"} <div style={{ transform: 'rotate(90deg)' }}><></div>
|
||
</div>
|
||
<div className={styles.historyContainer}>
|
||
<div className={styles.mutationContainer}>
|
||
{sortedMutations.length > 0 ? (
|
||
sortedMutations.map((mutation) => (
|
||
<div key={mutation.id} className={styles.mutationCard}>
|
||
<div style={{ width: '42px', backgroundColor: '#b9b9b9', borderRadius: '10px', padding: '3px', paddingBottom: '0' }}>
|
||
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
||
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
|
||
<g id="SVGRepo_iconCarrier">
|
||
<g id="Interface / Book">
|
||
<path id="Vector" d="M5 19.5002V6.2002C5 5.08009 5 4.51962 5.21799 4.0918C5.40973 3.71547 5.71547 3.40973 6.0918 3.21799C6.51962 3 7.08009 3 8.2002 3H17.4002C17.9602 3 18.2407 3 18.4546 3.10899C18.6427 3.20487 18.7948 3.35774 18.8906 3.5459C18.9996 3.75981 19 4.04005 19 4.6001V16.4001C19 16.9601 18.9996 17.2398 18.8906 17.4537C18.7948 17.6419 18.6429 17.7952 18.4548 17.8911C18.2411 18 17.961 18 17.402 18H7.25C6.00736 18 5 19.0074 5 20.25C5 20.6642 5.33579 21 5.75 21H16.402C16.961 21 17.2411 21 17.4548 20.8911C17.6429 20.7952 17.7948 20.642 17.8906 20.4538C17.9996 20.2399 18 19.9601 18 19.4V18" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path>
|
||
</g>
|
||
</g>
|
||
</svg>
|
||
</div>
|
||
<div className={styles.mutationTitle}>
|
||
<h4>{formatDate(mutation.createdAt)}</h4>
|
||
<p>Total stok: {mutation.newStock} || +{mutation.newStock - mutation.oldStock} || {formatCurrency((mutation.newStock - mutation.oldStock) * mutation.priceAtp)}</p>
|
||
</div>
|
||
</div>
|
||
))
|
||
) : (
|
||
<p>Tidak ada laporan perubahan stok.</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
</>
|
||
) : (
|
||
<>
|
||
<div className={styles.description}>
|
||
<div style={{ marginRight: "5px", fontSize: "1.2em" }}>ⓘ</div>
|
||
<h6 style={{ margin: 0, textAlign: "left", fontSize: '12px' }}>
|
||
Fitur ini mempermudah mengelola biaya dan memantau pengeluaran bahan.
|
||
</h6>
|
||
</div>
|
||
|
||
<div className={styles.switchContainer}>
|
||
<h3>Buat bahan baru</h3>
|
||
</div>
|
||
<div className={styles.resultMessage}>
|
||
<input
|
||
className={styles.resultMessageInput}
|
||
value={newMaterialName}
|
||
onChange={(event) => setNewMaterialName(event.target.value)}
|
||
placeholder="Masukkan nama barang"
|
||
style={{width: '100%', height: '31px'}}
|
||
/>
|
||
</div>
|
||
|
||
<select
|
||
id="materialUnit"
|
||
value={newMaterialUnit}
|
||
onChange={(e) => setNewMaterialUnit(e.target.value)}
|
||
className={styles.unit}
|
||
style={{height: '37px'}}
|
||
>
|
||
<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 className={styles.buttonContainer}>
|
||
<button className={styles.saveButton} onClick={handleCreateMaterial}>
|
||
Buat bahan baku
|
||
</button>
|
||
</div>
|
||
</>
|
||
)}
|
||
</>
|
||
)}
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export default SetPaymentQr;
|