From 696ac38e33007d54b8c018a941c0ac2ce57f1362 Mon Sep 17 00:00:00 2001 From: client perkafean Date: Thu, 15 Aug 2024 07:43:23 +0000 Subject: [PATCH] ok --- src/components/Modal.js | 2 +- src/helpers/materialMutationHelpers.js | 3 +- src/helpers/transactionHelpers.js | 2 +- src/pages/MaterialList.js | 357 +++++++++++++++++++++---- src/pages/MaterialMutationsPage.js | 1 + src/pages/Transaction_confirmed.js | 2 +- src/pages/Transactions.js | 5 +- src/pages/Transactions.module.css | 20 +- 8 files changed, 333 insertions(+), 59 deletions(-) diff --git a/src/components/Modal.js b/src/components/Modal.js index 223553a..ec9aea8 100644 --- a/src/components/Modal.js +++ b/src/components/Modal.js @@ -25,7 +25,7 @@ const Modal = ({ shop, isOpen, onClose, modalContent }) => { // Prevent click event from propagating to the overlay event.stopPropagation(); }; - + console.log(shop.qrPayment) return (
diff --git a/src/helpers/materialMutationHelpers.js b/src/helpers/materialMutationHelpers.js index 58dde76..575ae31 100644 --- a/src/helpers/materialMutationHelpers.js +++ b/src/helpers/materialMutationHelpers.js @@ -2,7 +2,8 @@ import API_BASE_URL from "../config.js"; // Function to retrieve the authentication token from localStorage function getAuthToken() { - return localStorage.getItem("auth"); + if (localStorage.getItem("auth")) return localStorage.getItem("auth"); + return null; } // Helper function to get headers with authentication token diff --git a/src/helpers/transactionHelpers.js b/src/helpers/transactionHelpers.js index d20d712..ed091b7 100644 --- a/src/helpers/transactionHelpers.js +++ b/src/helpers/transactionHelpers.js @@ -274,7 +274,7 @@ export const handlePaymentFromGuestDevice = async ( // Handle success response console.log("Transaction successful!"); const data = await response.json(); - updateLocalStorage("auth", data.auth); + if (data.newUser) updateLocalStorage("auth", data.auth); // Optionally return response data or handle further actions upon success return true; } else { diff --git a/src/pages/MaterialList.js b/src/pages/MaterialList.js index 47008de..a4cdafc 100644 --- a/src/pages/MaterialList.js +++ b/src/pages/MaterialList.js @@ -5,16 +5,24 @@ import { createMaterial, deleteMaterial, } from "../helpers/materialHelpers"; +import { + createMaterialMutation, + getMaterialMutations, +} from "../helpers/materialMutationHelpers"; const MaterialList = ({ cafeId }) => { 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(false); + const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [showForm, setShowForm] = useState(false); + const [selectedMaterialId, setSelectedMaterialId] = useState(null); + const [currentQuantity, setCurrentQuantity] = useState(0); + const [quantityChange, setQuantityChange] = useState(0); useEffect(() => { const fetchMaterials = async () => { @@ -23,17 +31,54 @@ const MaterialList = ({ cafeId }) => { const data = await getMaterials(cafeId); setMaterials(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."); + } + }; + + const fetchMutations = async () => { + try { + const data = await getMaterialMutations(cafeId); + setMutations(data); + } catch (err) { + setError(err.message); } finally { setLoading(false); } }; 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.timestamp) > new Date(latest.timestamp) + ? current + : latest, + materialMutations[0] + ); + setCurrentQuantity(latestMutation.newStock); + } else { + setCurrentQuantity(0); // Default value if no mutations exist + } + } + }, [selectedMaterialId, mutations]); + + const filteredMutations = selectedMaterialId + ? mutations.filter((mutation) => mutation.materialId === selectedMaterialId) + : []; + const handleCreateMaterial = async (e) => { e.preventDefault(); setLoading(true); @@ -41,7 +86,6 @@ const MaterialList = ({ cafeId }) => { const formData = new FormData(); formData.append("name", newMaterialName); formData.append("unit", newMaterialUnit); - console.log(newMaterialImage); if (newMaterialImage) { formData.append("image", newMaterialImage); } @@ -55,6 +99,9 @@ const MaterialList = ({ cafeId }) => { const data = await getMaterials(cafeId); setMaterials(data); setError(null); + if (data.length > 0) { + setSelectedMaterialId(data[0].materialId); + } } catch (error) { console.error("Error creating material:", error); setError("Failed to create material."); @@ -67,10 +114,16 @@ const MaterialList = ({ cafeId }) => { setDeleting(materialId); try { await deleteMaterial(materialId); - setMaterials( - materials.filter((material) => material.materialId !== materialId) + const updatedMaterials = materials.filter( + (material) => material.materialId !== materialId ); + setMaterials(updatedMaterials); setError(null); + if (selectedMaterialId === materialId) { + setSelectedMaterialId( + updatedMaterials.length > 0 ? updatedMaterials[0].materialId : null + ); + } } catch (error) { console.error("Error deleting material:", error); setError("Failed to delete material."); @@ -79,23 +132,80 @@ const MaterialList = ({ cafeId }) => { } }; + const handlePrevious = () => { + if (selectedMaterialId) { + setQuantityChange(0); + const currentIndex = materials.findIndex( + (material) => material.materialId === selectedMaterialId + ); + if (currentIndex > 0) { + setSelectedMaterialId(materials[currentIndex - 1].materialId); + } + } + }; + + const handleNext = () => { + if (selectedMaterialId) { + setQuantityChange(0); + const currentIndex = materials.findIndex( + (material) => material.materialId === selectedMaterialId + ); + if (currentIndex < materials.length - 1) { + setSelectedMaterialId(materials[currentIndex + 1].materialId); + } + } + }; + + const handleQuantityChange = (change) => { + setQuantityChange((prev) => prev + change); + }; + + const handleUpdateStock = async () => { + if (selectedMaterialId) { + setLoading(true); + try { + const newStock = currentQuantity + quantityChange; + const formData = new FormData(); + formData.append("materialId", selectedMaterialId); + formData.append("newStock", newStock); + formData.append("reason", "Stock update"); + + await createMaterialMutation(cafeId, 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 + ); + return (

Materials List

- {/* Display error message if any */} {error &&

{error}

} + {loading &&

Loading materials and mutations...

} - {/* Button to toggle the form */} - + {!loading && ( + + )} - {/* Create Material Form */}
{
- {/* Materials List */} - {loading ? ( -

Loading materials...

- ) : ( -
- {materials.map((material) => ( -
- {material.image && ( - {material.name} - )} -
-

{material.name}

-

{material.unit}

+ {!loading && ( +
+ +
+ {currentMaterial ? ( +
+ {currentMaterial.image && ( + {currentMaterial.name} + )} +
+

{currentMaterial.name}

+

{currentMaterial.unit}

+
+
+ + + +
+ +
- -
- ))} + ) : ( +

No materials available.

+ )} +
+ +
+ )} + + {selectedMaterialId && !loading && ( +
+ {filteredMutations.length > 0 ? ( + filteredMutations.map((mutation) => ( +
+

Mutation ID: {mutation.id}

+

Details: {mutation.reason}

+

dari {mutation.oldStock}

+

ke {mutation.newStock}

+
+ )) + ) : ( +

No mutations available.

+ )}
)}
); }; -// Styles const styles = { container: { - padding: "20px", + paddingLeft: "10px", + paddingRight: "10px", maxWidth: "800px", margin: "0 auto", + height: "100%", // Adjust height based on your needs + overflowY: "auto", // Enables vertical scrolling }, heading: { textAlign: "center", @@ -254,16 +436,31 @@ const styles = { transition: "background-color 0.3s, transform 0.3s", boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)", }, - materialList: { + navigationContainer: { display: "flex", - flexWrap: "wrap", - gap: "15px", + alignItems: "center", justifyContent: "center", - maxHeight: "500px", // Adjust the height as needed - overflowY: "auto", // Makes the container scrollable vertically + marginTop: "20px", + position: "relative", + }, + navigationButton: { + padding: "10px", + border: "none", + borderRadius: "5px", + backgroundColor: "#007bff", + color: "white", + fontSize: "18px", + cursor: "pointer", + margin: "0 5px", + transition: "background-color 0.3s ease", + }, + materialCardContainer: { + flex: "1", + display: "flex", + justifyContent: "center", + transition: "opacity 0.5s ease-in-out", }, materialCard: { - flex: "1 1 200px", padding: "15px", borderRadius: "8px", border: "1px solid #ddd", @@ -283,9 +480,9 @@ const styles = { marginBottom: "5px", }, image: { - width: "80px", - height: "80px", - objectFit: "cover", + width: "250px", + height: "150px", + objectFit: "contain", borderRadius: "8px", marginBottom: "10px", }, @@ -293,6 +490,64 @@ const styles = { color: "#dc3545", marginBottom: "15px", }, + mutationContainer: { + 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", + }, + buttonContainer: { + display: "flex", + alignItems: "center", + marginTop: "10px", + }, + 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", + }, + updateMutation: { + marginTop: "10px", + padding: "12px 20px", + border: "none", + borderRadius: "8px", + backgroundColor: "#007bff", + color: "#fff", + cursor: "pointer", + fontSize: "16px", + transition: "background-color 0.3s, transform 0.3s", + boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)", + }, }; export default MaterialList; diff --git a/src/pages/MaterialMutationsPage.js b/src/pages/MaterialMutationsPage.js index d486a11..6bff12f 100644 --- a/src/pages/MaterialMutationsPage.js +++ b/src/pages/MaterialMutationsPage.js @@ -158,6 +158,7 @@ const MaterialMutationPage = ({ cafeId }) => { try { const data = await getMaterials(cafeId); setMaterials(data); + console.log(data); } catch (err) { setError(err.message); } diff --git a/src/pages/Transaction_confirmed.js b/src/pages/Transaction_confirmed.js index d30ed54..19eab4a 100644 --- a/src/pages/Transaction_confirmed.js +++ b/src/pages/Transaction_confirmed.js @@ -113,7 +113,6 @@ export default function Transaction_pending({ paymentUrl }) {
{/* Generate QR code */}
-

Generated QR Code from Data

+
diff --git a/src/pages/Transactions.js b/src/pages/Transactions.js index a8142a2..ade4b08 100644 --- a/src/pages/Transactions.js +++ b/src/pages/Transactions.js @@ -154,7 +154,10 @@ export default function Transactions({ propsShopId, sendParam, deviceType }) {
{transaction.confirmed == 0 && ( -
handleDecline(transaction.transactionId)}> +
handleDecline(transaction.transactionId)} + > decline
)} diff --git a/src/pages/Transactions.module.css b/src/pages/Transactions.module.css index 9887054..079d25b 100644 --- a/src/pages/Transactions.module.css +++ b/src/pages/Transactions.module.css @@ -1,5 +1,6 @@ .Transactions { - overflow-x: hidden; + overflow-x: auto; + height: 100%; background-color: white; display: flex; flex-direction: column; @@ -62,10 +63,23 @@ margin: 0 auto; cursor: pointer; display: block; /* Centering the button */ - margin-bottom: 23px; text-align: center; } - +.DeclineButton { + font-family: "Poppins", sans-serif; + font-weight: 500; + font-style: normal; + font-size: 20px; + padding: 12px 24px; /* Add some padding for spacing */ + color: rgba(88, 55, 50, 1); + background-color: transparent; /* No background */ + border: none; /* No border */ + margin: 0 auto; /* Center horizontally */ + cursor: pointer; + display: block; /* Center the text horizontally */ + text-align: center; /* Center the text within the button */ + margin-bottom: 23px; /* Space at the bottom to match the PayButton */ +} .RoundedRectangle { border-radius: 20px; padding: 15px; /* Adjusted for better spacing */