ok
This commit is contained in:
zadit
55
src/components/Carousel.js
Normal file
55
src/components/Carousel.js
Normal file
@@ -0,0 +1,55 @@
|
||||
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 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
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className={styles.carouselContainer}>
|
||||
<div className={styles.carousel}>
|
||||
{/* Previous Item */}
|
||||
<div
|
||||
className={`${styles.carouselItem} ${styles.prev}`}
|
||||
onClick={moveToPrev}
|
||||
style={{ visibility: selectedIndex === -1 ? "hidden" : "visible" }}
|
||||
>
|
||||
{selectedIndex === -1 ? "+" : items[selectedIndex - 1]?.name || "+"}
|
||||
</div>
|
||||
|
||||
{/* Current Item */}
|
||||
<div className={`${styles.carouselItem} ${styles.center}`}>
|
||||
{selectedIndex >= 0 ? items[selectedIndex]?.name : "+"}
|
||||
</div>
|
||||
|
||||
{/* Next Item */}
|
||||
<div
|
||||
className={`${styles.carouselItem} ${styles.next}`}
|
||||
onClick={moveToNext}
|
||||
style={{
|
||||
visibility: selectedIndex === items.length -1 ? "hidden" : "visible",
|
||||
}}
|
||||
>
|
||||
{selectedIndex < items.length - 1 && items[selectedIndex + 1]?.name}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default Carousel;
|
||||
75
src/components/Carousel.module.css
Normal file
75
src/components/Carousel.module.css
Normal file
@@ -0,0 +1,75 @@
|
||||
/* Carousel.module.css */
|
||||
.carouselContainer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.carousel {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.carouselItem {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transition: transform 0.3s ease-in-out;
|
||||
height: 200px;
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.carouselItem.prev,
|
||||
.carouselItem.next {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
|
||||
.carouselItem.center {
|
||||
transform: scale(1);
|
||||
width: 134%;
|
||||
}
|
||||
|
||||
.prevBtn,
|
||||
.nextBtn {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background-color: #007bff;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
font-size: 16px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.prevBtn {
|
||||
left: 10px;
|
||||
}
|
||||
|
||||
.nextBtn {
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.carouselItem {
|
||||
font-size: 18px;
|
||||
height: 110px;
|
||||
}
|
||||
|
||||
.prevBtn,
|
||||
.nextBtn {
|
||||
padding: 8px 15px;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
@@ -219,7 +219,7 @@ const Child = styled.div`
|
||||
|
||||
const Header = ({
|
||||
HeaderText,
|
||||
HeaderSize='6vw',
|
||||
HeaderSize = '6vw',
|
||||
shopId,
|
||||
shopName,
|
||||
shopImage,
|
||||
@@ -235,7 +235,7 @@ const Header = ({
|
||||
removeConnectedGuestSides,
|
||||
setIsEditMode,
|
||||
isEditMode,
|
||||
HeaderMargin='25px'
|
||||
HeaderMargin = '25px'
|
||||
}) => {
|
||||
const { goToLogin, goToGuestSideLogin, goToAdminCafes } =
|
||||
useNavigationHelpers(shopId, tableCode);
|
||||
@@ -316,9 +316,9 @@ const Header = ({
|
||||
</Title>
|
||||
<div style={{ visibility: showProfile ? "visible" : "hidden" }}>
|
||||
<ProfileImage
|
||||
src={user.username == undefined? shopImage || 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-DjX_bGBax4NL14ULvkAdU4FP3FKoWXWu5w&s': "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-DjX_bGBax4NL14ULvkAdU4FP3FKoWXWu5w&s"}
|
||||
src={user.username == undefined ? shopImage || 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-DjX_bGBax4NL14ULvkAdU4FP3FKoWXWu5w&s' : "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS-DjX_bGBax4NL14ULvkAdU4FP3FKoWXWu5w&s"}
|
||||
alt="Profile"
|
||||
onClick={user.username !== undefined?handleImageClick: null}
|
||||
onClick={user.username !== undefined ? handleImageClick : null}
|
||||
animate={showRectangle && animate}
|
||||
/>
|
||||
<ProfileName animate={showRectangle && animate}>
|
||||
@@ -346,7 +346,6 @@ const Header = ({
|
||||
<>
|
||||
<Child hasChildren>
|
||||
{shopName}
|
||||
|
||||
<Child>
|
||||
Mode edit
|
||||
<Switch
|
||||
@@ -355,16 +354,11 @@ const Header = ({
|
||||
onChange={() => setIsEditMode(!isEditMode)}
|
||||
/>
|
||||
</Child>
|
||||
|
||||
<Child onClick={() => setModal("welcome_config")}>
|
||||
Halaman sambutan
|
||||
</Child>
|
||||
<Child onClick={() => setModal("reports")}>Laporan</Child>
|
||||
<Child onClick={() => setModal("add_material")}>
|
||||
Stok
|
||||
</Child>
|
||||
<Child onClick={() => setModal("edit_tables")}>
|
||||
Denah meja
|
||||
</Child>
|
||||
|
||||
<Child hasChildren>
|
||||
Kasir
|
||||
<Child onClick={() => setModal("create_clerk")}>
|
||||
@@ -386,11 +380,18 @@ const Header = ({
|
||||
</Child>
|
||||
))}
|
||||
</Child>
|
||||
<Child onClick={() => setModal("payment_option")}>
|
||||
Opsi pembayaran
|
||||
<Child hasChildren>
|
||||
Konfigurasi
|
||||
<Child onClick={() => setModal("welcome_config")}>
|
||||
Desain kafe
|
||||
</Child>
|
||||
<Child onClick={() => setModal("edit_tables")}>
|
||||
Daftar meja
|
||||
</Child>
|
||||
<Child onClick={() => setModal("payment_option")}>
|
||||
Metode pembayaran
|
||||
</Child>
|
||||
</Child>
|
||||
|
||||
<Child onClick={() => setModal("reports")}>Laporan</Child>
|
||||
</Child>
|
||||
</>
|
||||
)}
|
||||
|
||||
@@ -6,27 +6,27 @@ import {
|
||||
saveCafeDetails,
|
||||
setConfirmationStatus,
|
||||
} from "../helpers/cafeHelpers";
|
||||
import Switch from "react-switch";
|
||||
import Switch from "react-switch"; // Import the Switch component
|
||||
|
||||
// Main Component
|
||||
const SetPaymentQr = ({ shopId }) => {
|
||||
const [qrPosition, setQrPosition] = useState([50, 50]);
|
||||
const [qrSize, setQrSize] = useState(50);
|
||||
const [qrPayment, setQrPayment] = useState();
|
||||
const [qrCodeDetected, setQrCodeDetected] = useState(false);
|
||||
const [isNeedConfirmationState, setIsNeedConfirmationState] = useState(0);
|
||||
const qrPaymentInputRef = useRef(null);
|
||||
const qrCodeContainerRef = useRef(null);
|
||||
const [isNeedConfirmation, setIsNeedConfirmation] = useState(false);
|
||||
const [cafe, setCafe] = useState({});
|
||||
|
||||
// Fetch cafe details on mount or shopId change
|
||||
useEffect(() => {
|
||||
const fetchCafe = async () => {
|
||||
try {
|
||||
const response = await getCafe(shopId);
|
||||
setCafe(response);
|
||||
setQrPayment(getImageUrl(response.qrPayment));
|
||||
setIsNeedConfirmation(response.needsConfirmation);
|
||||
console.log(response.needsConfirmation);
|
||||
|
||||
setIsNeedConfirmationState(response.needsConfirmation === true ? 1 : 0); // Set state based on fetched data
|
||||
setQrPosition([response.xposition, response.yposition]);
|
||||
setQrSize(response.scale);
|
||||
} catch (error) {
|
||||
@@ -88,28 +88,32 @@ const SetPaymentQr = ({ shopId }) => {
|
||||
} catch (error) {
|
||||
console.error("Error saving cafe details:", error);
|
||||
}
|
||||
};
|
||||
|
||||
// Toggle confirmation status
|
||||
const handleChange = async () => {
|
||||
try {
|
||||
const response = await setConfirmationStatus(
|
||||
cafe.cafeId,
|
||||
!isNeedConfirmation
|
||||
);
|
||||
setIsNeedConfirmation(response.needsConfirmation);
|
||||
const response = await setConfirmationStatus(cafe.cafeId, isNeedConfirmationState === 1);
|
||||
setIsNeedConfirmationState(response.needsConfirmation ? 1 : 0); // Update state after saving
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
setIsNeedConfirmation(cafe.needsConfirmation);
|
||||
setIsNeedConfirmationState(cafe.needsConfirmation ? 1 : 0); // Fallback to initial value
|
||||
}
|
||||
};
|
||||
|
||||
// Handle Switch toggle
|
||||
const handleChange = (checked) => {
|
||||
setIsNeedConfirmationState(checked ? 1 : 0); // Toggle state based on the switch
|
||||
};
|
||||
|
||||
const handleError = () => {
|
||||
setQrPayment('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSPsNr0TPq8dHT3nBwDQ6OHQQTrqzVFoeBOmuWfgyErrLbJi6f6CnnYhpNHEvkJ_2X-kyI&usqp=CAU'); // Set your fallback image here
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<h2 style={styles.title}>QR pembayaran</h2>
|
||||
<h3 style={styles.title}>Konfigurasi pembayaran</h3>
|
||||
<div
|
||||
id="qr-code-container"
|
||||
ref={qrCodeContainerRef}
|
||||
onClick={() => qrPaymentInputRef.current.click()}
|
||||
style={{
|
||||
...styles.qrCodeContainer,
|
||||
backgroundImage: `url(${qrPayment})`,
|
||||
@@ -118,12 +122,12 @@ const SetPaymentQr = ({ shopId }) => {
|
||||
backgroundSize: "contain",
|
||||
}}
|
||||
>
|
||||
<div
|
||||
style={styles.overlayText}
|
||||
onClick={() => qrPaymentInputRef.current.click()}
|
||||
>
|
||||
Click To Change
|
||||
</div>
|
||||
<img
|
||||
src={qrPayment}
|
||||
onError={handleError}
|
||||
alt="QR Payment"
|
||||
style={{ maxWidth: '100%',visibility: 'hidden' }} // hide the img element
|
||||
/>
|
||||
<input
|
||||
type="file"
|
||||
accept="image/*"
|
||||
@@ -132,20 +136,36 @@ const SetPaymentQr = ({ shopId }) => {
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
</div>
|
||||
<div style={styles.resultMessage}>
|
||||
{qrCodeDetected ? <p>QR Code Detected</p> : <p>Tidak ada qr yang terdeteksi</p>}
|
||||
<div style={styles.uploadMessage}>
|
||||
<p>Klik untuk unggah QRIS</p>
|
||||
</div>
|
||||
<div style={styles.buttonContainer}>
|
||||
<button onClick={handleSave} style={styles.saveButton}>
|
||||
Save
|
||||
</button>
|
||||
<div style={styles.resultMessage}>
|
||||
{qrCodeDetected && qrPayment !== 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSPsNr0TPq8dHT3nBwDQ6OHQQTrqzVFoeBOmuWfgyErrLbJi6f6CnnYhpNHEvkJ_2X-kyI&usqp=CAU' ? <p>QR terdeteksi</p> : <p>Tidak ada qr terdeteksi</p>}
|
||||
{qrCodeDetected && qrPayment !== 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSPsNr0TPq8dHT3nBwDQ6OHQQTrqzVFoeBOmuWfgyErrLbJi6f6CnnYhpNHEvkJ_2X-kyI&usqp=CAU' ? <div
|
||||
onClick={() => qrPaymentInputRef.current.click()} style={styles.uploadButton}>Ganti</div> : <div
|
||||
onClick={() => qrPaymentInputRef.current.click()} style={styles.uploadButton}>Unggah</div>}
|
||||
</div>
|
||||
<div style={styles.switchContainer}>
|
||||
<h3>Pengecekan ketersediaan ganda</h3>
|
||||
<p style={styles.description}>
|
||||
Nyalakan agar kasir memeriksa kembali ketersediaan produk sebelum pelanggan membayar.
|
||||
</p>
|
||||
<Switch onChange={handleChange} checked={isNeedConfirmation} />
|
||||
<Switch
|
||||
onChange={handleChange}
|
||||
checked={isNeedConfirmationState === 1} // Convert to boolean
|
||||
offColor="#888"
|
||||
onColor="#4CAF50"
|
||||
uncheckedIcon={false}
|
||||
checkedIcon={false}
|
||||
height={25}
|
||||
width={50}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div style={styles.buttonContainer}>
|
||||
<button onClick={handleSave} style={styles.saveButton}>
|
||||
Simpan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -162,40 +182,42 @@ const styles = {
|
||||
},
|
||||
title: {
|
||||
marginBottom: "20px",
|
||||
fontSize: "24px",
|
||||
fontWeight: "bold",
|
||||
},
|
||||
qrCodeContainer: {
|
||||
backgroundColor: '#999999',
|
||||
borderRadius: '20px',
|
||||
position: "relative",
|
||||
width: "300px",
|
||||
height: "300px",
|
||||
width: "100%",
|
||||
height: "200px",
|
||||
backgroundSize: "contain",
|
||||
border: "1px solid #ddd",
|
||||
overflow: "hidden",
|
||||
margin: "0 auto", // Center the QR code container
|
||||
},
|
||||
overlayText: {
|
||||
position: "absolute",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
fontSize: "550%",
|
||||
uploadMessage: {
|
||||
fontWeight: 600,
|
||||
textAlign: "left",
|
||||
top: "50%",
|
||||
left: "50%",
|
||||
transform: "translate(-50%, -50%)",
|
||||
backgroundColor: "rgba(0, 0, 0, 0.5)",
|
||||
color: "rgba(256, 256, 256, 0.5)",
|
||||
padding: "10px",
|
||||
borderRadius: "5px",
|
||||
cursor: "pointer",
|
||||
},
|
||||
uploadButton: {
|
||||
paddingRight: '10px',
|
||||
backgroundColor: 'green',
|
||||
borderRadius: '30px',
|
||||
color: 'white',
|
||||
fontWeight: 700,
|
||||
height: '36px',
|
||||
lineHeight: '36px',
|
||||
paddingLeft: '10px',
|
||||
paddingHeight: '10px',
|
||||
},
|
||||
resultMessage: {
|
||||
marginTop: "20px",
|
||||
textAlign: "center",
|
||||
marginTop: "-24px",
|
||||
textAlign: "left",
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between'
|
||||
},
|
||||
buttonContainer: {
|
||||
marginTop: "20px",
|
||||
textAlign: "center",
|
||||
textAlign: "left",
|
||||
},
|
||||
saveButton: {
|
||||
padding: "10px 20px",
|
||||
@@ -203,13 +225,13 @@ const styles = {
|
||||
backgroundColor: "#28a745",
|
||||
color: "#fff",
|
||||
border: "none",
|
||||
borderRadius: "4px",
|
||||
borderRadius: "30px",
|
||||
cursor: "pointer",
|
||||
transition: "background-color 0.3s",
|
||||
},
|
||||
switchContainer: {
|
||||
marginTop: "20px",
|
||||
textAlign: "center",
|
||||
textAlign: "left",
|
||||
},
|
||||
description: {
|
||||
margin: "10px 0",
|
||||
|
||||
@@ -861,7 +861,7 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
diskon 50%
|
||||
gratis 3 bulan pertama
|
||||
</div>
|
||||
:
|
||||
<div className={styles.mainHeading}>
|
||||
@@ -873,7 +873,7 @@ const sortedMaterials = allMaterials.sort((a, b) => new Date(a.date) - new Date(
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
diskon 50%
|
||||
Gratis 3 bulan pertama
|
||||
</div>
|
||||
}
|
||||
<div className={styles.subHeading}>
|
||||
|
||||
@@ -256,6 +256,7 @@
|
||||
border: 1px solid #ccc;
|
||||
margin-top: 5px;
|
||||
margin-bottom: 15px;
|
||||
text-transform: lowercase;
|
||||
}
|
||||
|
||||
.usernameInputError {
|
||||
|
||||
@@ -1,5 +1,12 @@
|
||||
import React, { useState, useEffect, useRef } from "react";
|
||||
import API_BASE_URL from "../config.js";
|
||||
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,
|
||||
@@ -10,7 +17,10 @@ import {
|
||||
getMaterialMutations,
|
||||
} from "../helpers/materialMutationHelpers";
|
||||
|
||||
const MaterialList = ({ cafeId, handleClose }) => {
|
||||
import Switch from "react-switch"; // Import the Switch component
|
||||
import Carousel from '../components/Carousel'
|
||||
|
||||
const SetPaymentQr = ({ cafeId }) => {
|
||||
const [materials, setMaterials] = useState([]);
|
||||
const [mutations, setMutations] = useState([]);
|
||||
const [newMaterialName, setNewMaterialName] = useState("");
|
||||
@@ -22,11 +32,24 @@ const MaterialList = ({ cafeId, handleClose }) => {
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
const [selectedMaterialId, setSelectedMaterialId] = useState(null);
|
||||
const [latestMutation, setLatestMutation] = useState([]);
|
||||
const [currentQuantity, setCurrentQuantity] = useState(0);
|
||||
const [currentQuantity, setCurrentQuantity] = useState(-1);
|
||||
const [currentPrice, setCurrentPrice] = useState(0);
|
||||
const [quantityChange, setQuantityChange] = useState(0);
|
||||
const [sortOrder, setSortOrder] = useState("desc");
|
||||
const priceInputRef = useRef(null);
|
||||
const [isEditCurrentPrice, setIsEditCurrentPrice] = useState(false);
|
||||
|
||||
|
||||
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);
|
||||
setCurrentPrice(formattedValue);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
const fetchMaterials = async () => {
|
||||
@@ -34,10 +57,8 @@ const MaterialList = ({ cafeId, handleClose }) => {
|
||||
try {
|
||||
const data = await getMaterials(cafeId);
|
||||
setMaterials(data);
|
||||
console.log(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.");
|
||||
@@ -48,6 +69,9 @@ const MaterialList = ({ cafeId, handleClose }) => {
|
||||
try {
|
||||
const data = await getMaterialMutations(cafeId);
|
||||
setMutations(data);
|
||||
if (data.length > 0) {
|
||||
setSelectedMaterialId(0);
|
||||
}
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
} finally {
|
||||
@@ -59,30 +83,6 @@ const MaterialList = ({ cafeId, handleClose }) => {
|
||||
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.createdAt) > new Date(latest.createdAt)
|
||||
? current
|
||||
: 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]);
|
||||
|
||||
const handleSortChange = (e) => {
|
||||
setSortOrder(e.target.value);
|
||||
};
|
||||
@@ -122,7 +122,7 @@ const MaterialList = ({ cafeId, handleClose }) => {
|
||||
setMaterials(data);
|
||||
setError(null);
|
||||
if (data.length > 0) {
|
||||
setSelectedMaterialId(data[0].materialId);
|
||||
setSelectedMaterialId(0);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error creating material:", error);
|
||||
@@ -181,10 +181,34 @@ const MaterialList = ({ cafeId, handleClose }) => {
|
||||
const handleQuantityChange = (change) => {
|
||||
setQuantityChange((prev) => prev + change);
|
||||
};
|
||||
// useEffect to log the latest quantityChange value
|
||||
|
||||
useEffect(() => {
|
||||
if(quantityChange >= latestMutation.newStock) priceInputRef.current.focus();
|
||||
}, [quantityChange]);
|
||||
setQuantityChange(0);
|
||||
console.log(selectedMaterialId)
|
||||
if (selectedMaterialId > -1) {
|
||||
const materialMutations = mutations.filter(
|
||||
(mutation) => mutation.materialId === materials[selectedMaterialId]?.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));
|
||||
} else {
|
||||
setCurrentQuantity(0); // Default value if no mutations exist
|
||||
setLatestMutation({newStock: 0});
|
||||
setCurrentPrice(0);
|
||||
}
|
||||
}
|
||||
|
||||
}, [selectedMaterialId]);
|
||||
|
||||
const handleUpdateStock = async () => {
|
||||
if (selectedMaterialId) {
|
||||
@@ -219,406 +243,135 @@ const MaterialList = ({ cafeId, handleClose }) => {
|
||||
return date.toLocaleString();
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<h1 style={styles.heading}>Stok barang</h1>
|
||||
<h3 style={styles.title}>Stok</h3>
|
||||
<Carousel items={materials} onSelect={(e)=>setSelectedMaterialId(e)}/>
|
||||
<div style={styles.uploadMessage}>
|
||||
<p>harga per {materials && materials[selectedMaterialId]?.unit} sekarang</p>
|
||||
</div>
|
||||
<div style={styles.resultMessage}>
|
||||
|
||||
{error && <p style={styles.error}>{error}</p>}
|
||||
{loading && <p>Loading materials and mutations...</p>}
|
||||
<input
|
||||
|
||||
{!loading && (
|
||||
<button
|
||||
onClick={() => setShowForm(!showForm)}
|
||||
style={styles.toggleButton}
|
||||
disabled={loading}
|
||||
>
|
||||
{showForm ? "Batalkan" : "Tambah barang"}
|
||||
</button>
|
||||
)}
|
||||
|
||||
<div
|
||||
style={{
|
||||
...styles.formContainer,
|
||||
height: showForm ? "auto" : "0",
|
||||
overflow: "hidden",
|
||||
width: "200px",
|
||||
border: isEditCurrentPrice ? "1px solid #ccc" : "1px solid transparent",
|
||||
backgroundColor: isEditCurrentPrice ? "white" : "transparent",
|
||||
}}
|
||||
>
|
||||
<form onSubmit={handleCreateMaterial} style={styles.form}>
|
||||
<div style={styles.formGroup}>
|
||||
<label htmlFor="materialName" style={styles.label}>
|
||||
Name:
|
||||
</label>
|
||||
<input
|
||||
id="materialName"
|
||||
type="text"
|
||||
value={newMaterialName}
|
||||
onChange={(e) => setNewMaterialName(e.target.value)}
|
||||
required
|
||||
style={styles.input}
|
||||
disabled={!isEditCurrentPrice}
|
||||
value={currentPrice}
|
||||
onChange={handleChange}
|
||||
placeholder="Enter amount"
|
||||
/>
|
||||
<div onClick={() => setIsEditCurrentPrice(!isEditCurrentPrice)} style={styles.uploadButton}>{isEditCurrentPrice ? 'Terapkan' : 'Ganti'}</div>
|
||||
</div>
|
||||
<div style={styles.formGroup}>
|
||||
<label htmlFor="materialUnit" style={styles.label}>
|
||||
Unit:
|
||||
</label>
|
||||
<select
|
||||
id="materialUnit"
|
||||
value={newMaterialUnit}
|
||||
onChange={(e) => setNewMaterialUnit(e.target.value)}
|
||||
style={styles.input}
|
||||
>
|
||||
<option value="gram">Gram</option>
|
||||
<option value="ons">Ons</option>
|
||||
<option value="kilogram">Kilogram</option>
|
||||
<option value="kuintal">Kuintal</option>
|
||||
<option value="liter">Liter</option>
|
||||
<option value="piece">Piece</option>
|
||||
<option value="meter">Meter</option>
|
||||
</select>
|
||||
</div>
|
||||
<div style={styles.formGroup}>
|
||||
<label htmlFor="materialImage" style={styles.label}>
|
||||
Image:
|
||||
</label>
|
||||
<input
|
||||
id="materialImage"
|
||||
type="file"
|
||||
onChange={(e) => setNewMaterialImage(e.target.files[0])}
|
||||
style={styles.input}
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" style={styles.submitButton} disabled={loading}>
|
||||
{loading ? "Creating..." : "Create Material"}
|
||||
</button>
|
||||
</form>
|
||||
<div style={styles.switchContainer}>
|
||||
<h3>Stok sekarang {currentQuantity}</h3>
|
||||
</div>
|
||||
|
||||
{!loading && (
|
||||
<div style={styles.navigationContainer}>
|
||||
<button
|
||||
onClick={handlePrevious}
|
||||
disabled={
|
||||
!selectedMaterialId ||
|
||||
materials.findIndex(
|
||||
(material) => material.materialId === selectedMaterialId
|
||||
) === 0
|
||||
}
|
||||
style={{...styles.navigationButton,
|
||||
backgroundColor:
|
||||
!selectedMaterialId ||
|
||||
materials.findIndex((material) => material.materialId === selectedMaterialId) === 0
|
||||
? '#a3a3a3'
|
||||
: '#5b81ff',
|
||||
}}
|
||||
>
|
||||
{"<"}
|
||||
</button>
|
||||
<div style={styles.materialCardContainer}>
|
||||
{currentMaterial ? (
|
||||
<div style={styles.materialCard}>
|
||||
{currentMaterial.image && (
|
||||
<img
|
||||
src={`${API_BASE_URL}/${currentMaterial.image}`}
|
||||
alt={currentMaterial.name}
|
||||
style={styles.image}
|
||||
/>
|
||||
)}
|
||||
<div style={styles.cardContent}>
|
||||
<h3 style={styles.cardTitle}>{currentMaterial.name}</h3>
|
||||
</div>
|
||||
<div style={styles.buttonContainer}>
|
||||
<button
|
||||
onClick={() => handleQuantityChange(-1)}
|
||||
style={styles.quantityButton}
|
||||
>
|
||||
<div style={styles.stokContainer}>
|
||||
<button onClick={() => handleQuantityChange(currentQuantity + quantityChange > 0 ? -1 : 0)} style={styles.saveButton}>
|
||||
-
|
||||
</button>
|
||||
<button style={styles.quantityDisplay}>
|
||||
{currentQuantity + quantityChange}
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => handleQuantityChange(1)}
|
||||
style={styles.quantityButton}
|
||||
>
|
||||
<p>{currentQuantity + quantityChange}</p>
|
||||
<button onClick={() => handleQuantityChange(1)} style={styles.saveButton}>
|
||||
+
|
||||
</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}
|
||||
>
|
||||
Update Stock
|
||||
</button>
|
||||
<button
|
||||
onClick={() =>
|
||||
handleDeleteMaterial(currentMaterial.materialId)
|
||||
}
|
||||
disabled={deleting === currentMaterial.materialId || loading}
|
||||
style={styles.deleteButton}
|
||||
>
|
||||
{deleting === currentMaterial.materialId
|
||||
? "Deleting..."
|
||||
: "Delete"}
|
||||
<div style={styles.buttonContainer}>
|
||||
<button style={styles.saveButton}>
|
||||
Laporkan {quantityChange > 0 ? 'penambahan' : 'stok sekarang'} {quantityChange < 1 ? currentQuantity + quantityChange : quantityChange} {materials[selectedMaterialId]?.unit}
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<p>No materials available.</p>
|
||||
)}
|
||||
<div style={styles.historyContainer}>
|
||||
<h3> > Riwayat stok</h3>
|
||||
</div>
|
||||
<button
|
||||
onClick={handleNext}
|
||||
disabled={
|
||||
!selectedMaterialId ||
|
||||
materials.findIndex(
|
||||
(material) => material.materialId === selectedMaterialId
|
||||
) ===
|
||||
materials.length - 1
|
||||
}
|
||||
style={{...styles.navigationButton,
|
||||
backgroundColor:
|
||||
!selectedMaterialId ||
|
||||
materials.findIndex((material) => material.materialId === selectedMaterialId) === materials.length - 1
|
||||
? '#a3a3a3'
|
||||
: '#5b81ff',
|
||||
}}
|
||||
>
|
||||
{">"}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={styles.sortContainer}>
|
||||
<label htmlFor="sortOrder">Sort by : </label>
|
||||
<select
|
||||
id="sortOrder"
|
||||
value={sortOrder}
|
||||
onChange={handleSortChange}
|
||||
style={styles.sortSelect}
|
||||
>
|
||||
<option value="desc">latest</option>
|
||||
<option value="asc">oldest</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{selectedMaterialId && !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 class="ItemLister_PaymentOption__YZlDL"><div style={{marginTop:'20px'}} onClick={handleClose} class="ItemLister_Pay2Button__+MIxX">Kembali</div></div>
|
||||
<div style={{marginTop:'58px'}} ></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
// Styles
|
||||
const styles = {
|
||||
container: {
|
||||
position: 'fixed',
|
||||
height: '100vh',
|
||||
width: '100vw',
|
||||
top: 0,
|
||||
right: 0,
|
||||
backgroundColor: 'rgb(207, 207, 207)',
|
||||
overflowY: 'auto'
|
||||
width: '100%',
|
||||
backgroundColor: "white",
|
||||
padding: "20px",
|
||||
borderRadius: "8px",
|
||||
boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)",
|
||||
textAlign: "center", // Center text and children
|
||||
},
|
||||
heading: {
|
||||
textAlign: "center",
|
||||
},
|
||||
toggleButton: {
|
||||
display: "block",
|
||||
width: "100%",
|
||||
padding: "10px",
|
||||
borderRadius: "5px",
|
||||
border: "none",
|
||||
backgroundColor: "#007bff",
|
||||
color: "white",
|
||||
fontSize: "16px",
|
||||
cursor: "pointer",
|
||||
title: {
|
||||
marginBottom: "20px",
|
||||
transition: "background-color 0.3s ease",
|
||||
fontWeight: "bold",
|
||||
},
|
||||
formContainer: {
|
||||
transition: "height 0.5s ease-in-out",
|
||||
overflow: "hidden",
|
||||
},
|
||||
form: {
|
||||
marginBottom: "20px",
|
||||
},
|
||||
formGroup: {
|
||||
marginBottom: "15px",
|
||||
},
|
||||
label: {
|
||||
display: "block",
|
||||
marginBottom: "5px",
|
||||
fontWeight: "600",
|
||||
},
|
||||
input: {
|
||||
width: "100%",
|
||||
padding: "10px",
|
||||
border: "1px solid #ddd",
|
||||
borderRadius: "8px",
|
||||
boxSizing: "border-box",
|
||||
},
|
||||
submitButton: {
|
||||
padding: "12px 20px",
|
||||
border: "none",
|
||||
borderRadius: "8px",
|
||||
backgroundColor: "#28a745",
|
||||
color: "#fff",
|
||||
cursor: "pointer",
|
||||
fontSize: "16px",
|
||||
transition: "background-color 0.3s, transform 0.3s",
|
||||
boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
|
||||
},
|
||||
deleteButton: {
|
||||
marginLeft: "10px",
|
||||
padding: "8px 15px",
|
||||
border: "none",
|
||||
borderRadius: "8px",
|
||||
backgroundColor: "#dc3545",
|
||||
color: "#fff",
|
||||
cursor: "pointer",
|
||||
fontSize: "14px",
|
||||
transition: "background-color 0.3s, transform 0.3s",
|
||||
boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
|
||||
},
|
||||
navigationContainer: {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
marginTop: "20px",
|
||||
qrCodeContainer: {
|
||||
backgroundColor: '#999999',
|
||||
borderRadius: '20px',
|
||||
position: "relative",
|
||||
width: "100%",
|
||||
height: "200px",
|
||||
backgroundSize: "contain",
|
||||
overflow: "hidden",
|
||||
margin: "0 auto", // Center the QR code container
|
||||
},
|
||||
navigationButton: {
|
||||
padding: "10px",
|
||||
border: "none",
|
||||
borderRadius: "5px",
|
||||
backgroundColor: "#007bff",
|
||||
color: "white",
|
||||
fontSize: "18px",
|
||||
cursor: "pointer",
|
||||
margin: "0 5px",
|
||||
transition: "background-color 0.3s ease",
|
||||
uploadMessage: {
|
||||
fontWeight: 600,
|
||||
textAlign: "left",
|
||||
},
|
||||
materialCardContainer: {
|
||||
flex: "1",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
transition: "opacity 0.5s ease-in-out",
|
||||
uploadButton: {
|
||||
paddingRight: '10px',
|
||||
backgroundColor: 'green',
|
||||
borderRadius: '30px',
|
||||
color: 'white',
|
||||
fontWeight: 700,
|
||||
height: '36px',
|
||||
lineHeight: '36px',
|
||||
paddingLeft: '10px',
|
||||
paddingHeight: '10px',
|
||||
},
|
||||
materialCard: {
|
||||
padding: "15px",
|
||||
borderRadius: "8px",
|
||||
border: "1px solid #ddd",
|
||||
backgroundColor: "#fff",
|
||||
boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
textAlign: "center",
|
||||
resultMessage: {
|
||||
marginTop: "-13px",
|
||||
textAlign: "left",
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between'
|
||||
},
|
||||
cardContent: {
|
||||
marginBottom: "10px",
|
||||
},
|
||||
cardTitle: {
|
||||
fontSize: "18px",
|
||||
fontWeight: "600",
|
||||
marginBottom: "5px",
|
||||
},
|
||||
image: {
|
||||
width: "100px",
|
||||
height: "100px",
|
||||
borderRadius: '50%',
|
||||
objectFit: "contain",
|
||||
marginBottom: "10px",
|
||||
},
|
||||
error: {
|
||||
color: "#dc3545",
|
||||
marginBottom: "15px",
|
||||
},
|
||||
mutationContainer: {
|
||||
stokContainer: {
|
||||
display: 'flex',
|
||||
justifyContent: 'space-evenly',
|
||||
alignItems: 'center',
|
||||
marginTop: '20px',
|
||||
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",
|
||||
textAlign: "left",
|
||||
},
|
||||
buttonContainer: {
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
marginTop: "10px",
|
||||
marginTop: "20px",
|
||||
textAlign: "left",
|
||||
},
|
||||
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",
|
||||
},
|
||||
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",
|
||||
border: "none",
|
||||
borderRadius: "8px",
|
||||
backgroundColor: "#007bff",
|
||||
saveButton: {
|
||||
padding: "10px 20px",
|
||||
fontSize: "3.5vw",
|
||||
backgroundColor: "#28a745",
|
||||
color: "#fff",
|
||||
border: "none",
|
||||
borderRadius: "30px",
|
||||
cursor: "pointer",
|
||||
fontSize: "16px",
|
||||
transition: "background-color 0.3s, transform 0.3s",
|
||||
boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)",
|
||||
transition: "background-color 0.3s",
|
||||
},
|
||||
switchContainer: {
|
||||
marginTop: "20px",
|
||||
textAlign: "left",
|
||||
},
|
||||
historyContainer: {
|
||||
marginTop: "20px",
|
||||
textAlign: "left",
|
||||
},
|
||||
description: {
|
||||
margin: "10px 0",
|
||||
fontSize: "14px",
|
||||
color: "#666",
|
||||
},
|
||||
};
|
||||
|
||||
export default MaterialList;
|
||||
export default SetPaymentQr;
|
||||
|
||||
Reference in New Issue
Block a user