From 2864a00814049b17d6bf53442ce4166d98eef8e3 Mon Sep 17 00:00:00 2001 From: zadit <75159257+insvrgent@users.noreply.github.com> Date: Sun, 12 Jan 2025 18:16:16 +0700 Subject: [PATCH] ok --- src/components/Carousel.js | 11 +- src/components/Carousel.module.css | 1 - src/components/Header.js | 4 +- src/pages/MaterialList.js | 297 ++++++++++++++++++++--------- 4 files changed, 212 insertions(+), 101 deletions(-) diff --git a/src/components/Carousel.js b/src/components/Carousel.js index 7573573..820b3a9 100644 --- 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 }) => {
0 ? "hidden" : "visible" , backgroundColor: items.length < 1 ? '#919191':'#007bff'}} > - {selectedIndex === -1 ? "+" : items[selectedIndex - 1]?.name || "+"} + {selectedIndex === -1 ? (items.length > 0 ? "+" : "") : items[selectedIndex - 1]?.name || "+"}
{/* 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} diff --git a/src/components/Carousel.module.css b/src/components/Carousel.module.css index b3b786f..a6cbe11 100644 --- 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; diff --git a/src/components/Header.js b/src/components/Header.js index a74a5b0..43f29f6 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -354,9 +354,9 @@ const Header = ({ onChange={() => setIsEditMode(!isEditMode)} /> - setModal("reports")}>Laporan + setModal("reports")}>Lihat laporan setModal("add_material")}> - Stok + Kelola bahan baku diff --git a/src/pages/MaterialList.js b/src/pages/MaterialList.js index 1d6aa98..87b4933 100644 --- 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 { @@ -82,17 +86,15 @@ const SetPaymentQr = ({ cafeId }) => { fetchMaterials(); fetchMutations(); }, [cafeId]); - + const handleSortChange = (e) => { 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,40 +204,40 @@ 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 newStock = currentQuantity + quantityChange; - const formData = new FormData(); - formData.append("newStock", newStock); - formData.append("priceAtp", currentPrice); - formData.append("reason", "Stock update"); + setLoading(true); + try { + const newPrice = convertToInteger(currentPrice) + const newStock = currentQuantity + quantityChange; + const formData = new FormData(); + formData.append("newStock", newStock); + formData.append("priceAtp", newPrice); + formData.append("reason", "Stock update"); - await createMaterialMutation(selectedMaterialId, 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); - } + 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 === selectedMaterialId + (material) => material.materialId === selectedMaterialIndex ); const formatDate = (timestamp) => { const date = new Date(timestamp); @@ -246,48 +247,130 @@ const SetPaymentQr = ({ cafeId }) => { return (
-

Stok

- setSelectedMaterialId(e)}/> -
-

harga per {materials && materials[selectedMaterialId]?.unit} sekarang

-
-
+ {loading ? + <> + + : + <> +

Bahan baku

+ setSelectedMaterialIndex(e)} selectedIndex={selectedMaterialIndex} /> + {selectedMaterialIndex != -1 ? + <> +
+

Stok sekarang {currentQuantity}

+
- -
setIsEditCurrentPrice(!isEditCurrentPrice)} style={styles.uploadButton}>{isEditCurrentPrice ? 'Terapkan' : 'Ganti'}
-
-
-

Stok sekarang {currentQuantity}

-
+
+ +

{currentQuantity + quantityChange}

+ +
+
+

harga per {materials && materials[selectedMaterialIndex]?.unit} sekarang

+
+
-
- -

{currentQuantity + quantityChange}

- -
-
- -
-
-

> Riwayat stok

-
+ +
quantityChange < 1 ? null : setIsEditCurrentPrice(!isEditCurrentPrice)} style={quantityChange < 1 ? styles.changeButtonDisabled : styles.changeButtonEnabled}>{isEditCurrentPrice ? 'Terapkan' : 'Ganti'}
+
+
+ +
+
setIsViewingHistory(!isViewingHistory)} style={styles.historyTab}> +

{isViewingHistory ? '˅' : '˃'} Riwayat stok

+
+ {selectedMaterialIndex != -1 && isViewingHistory && !loading && ( +
+ {sortedMutations.length > 0 ? ( + sortedMutations.map((mutation) => ( +
+

+ {formatDate(mutation.createdAt)} +

+

Details: {mutation.reason}

+

stok {mutation.newStock}

+
+ )) + ) : ( +

No mutations available.

+ )} +
+ )} +
+
+ : + <> +
+
ⓘ
+
+ Fitur ini mempermudah mengelola biaya dan memantau pengeluaran bahan. +
+
+ +
+

Buat bahan baru

+
+
+ + setNewMaterialName(event.target.value)} + placeholder="Masukkan nama barang" + /> +
+ + + +
+ +
+ + } + + }
); }; @@ -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;