ok
This commit is contained in:
zadit
@@ -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 {
|
||||
@@ -58,31 +82,7 @@ const MaterialList = ({ cafeId, handleClose }) => {
|
||||
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.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
|
||||
|
||||
style={{
|
||||
width: "200px",
|
||||
border: isEditCurrentPrice ? "1px solid #ccc" : "1px solid transparent",
|
||||
backgroundColor: isEditCurrentPrice ? "white" : "transparent",
|
||||
}}
|
||||
disabled={!isEditCurrentPrice}
|
||||
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>
|
||||
|
||||
{!loading && (
|
||||
<button
|
||||
onClick={() => setShowForm(!showForm)}
|
||||
style={styles.toggleButton}
|
||||
disabled={loading}
|
||||
>
|
||||
{showForm ? "Batalkan" : "Tambah barang"}
|
||||
<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
|
||||
style={{
|
||||
...styles.formContainer,
|
||||
height: showForm ? "auto" : "0",
|
||||
overflow: "hidden",
|
||||
}}
|
||||
>
|
||||
<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}
|
||||
/>
|
||||
</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>
|
||||
|
||||
{!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}
|
||||
>
|
||||
-
|
||||
</button>
|
||||
<button style={styles.quantityDisplay}>
|
||||
{currentQuantity + quantityChange}
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => handleQuantityChange(1)}
|
||||
style={styles.quantityButton}
|
||||
>
|
||||
+
|
||||
</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"}
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
<p>No materials available.</p>
|
||||
)}
|
||||
</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 style={styles.buttonContainer}>
|
||||
<button style={styles.saveButton}>
|
||||
Laporkan {quantityChange > 0 ? 'penambahan' : 'stok sekarang'} {quantityChange < 1 ? currentQuantity + quantityChange : quantityChange} {materials[selectedMaterialId]?.unit}
|
||||
</button>
|
||||
</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 style={styles.historyContainer}>
|
||||
<h3> > Riwayat stok</h3>
|
||||
</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