working on material and table
This commit is contained in:
zadit frontend
@@ -4,7 +4,7 @@ import {
|
||||
getMaterials,
|
||||
createMaterial,
|
||||
deleteMaterial,
|
||||
} from "../helpers/materialHelpers"; // Update import
|
||||
} from "../helpers/materialHelpers";
|
||||
|
||||
const MaterialList = ({ cafeId }) => {
|
||||
const [materials, setMaterials] = useState([]);
|
||||
@@ -14,7 +14,7 @@ const MaterialList = ({ cafeId }) => {
|
||||
const [deleting, setDeleting] = useState(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [error, setError] = useState(null);
|
||||
const [showForm, setShowForm] = useState(false); // For form visibility
|
||||
const [showForm, setShowForm] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchMaterials = async () => {
|
||||
@@ -22,7 +22,7 @@ const MaterialList = ({ cafeId }) => {
|
||||
try {
|
||||
const data = await getMaterials(cafeId);
|
||||
setMaterials(data);
|
||||
setError(null); // Clear any previous error
|
||||
setError(null);
|
||||
} catch (error) {
|
||||
console.error("Error fetching materials:", error);
|
||||
setError("Failed to fetch materials.");
|
||||
@@ -41,6 +41,7 @@ const MaterialList = ({ cafeId }) => {
|
||||
const formData = new FormData();
|
||||
formData.append("name", newMaterialName);
|
||||
formData.append("unit", newMaterialUnit);
|
||||
console.log(newMaterialImage);
|
||||
if (newMaterialImage) {
|
||||
formData.append("image", newMaterialImage);
|
||||
}
|
||||
@@ -50,10 +51,10 @@ const MaterialList = ({ cafeId }) => {
|
||||
setNewMaterialName("");
|
||||
setNewMaterialUnit("kilogram");
|
||||
setNewMaterialImage(null);
|
||||
setShowForm(false); // Hide the form after successful creation
|
||||
setShowForm(false);
|
||||
const data = await getMaterials(cafeId);
|
||||
setMaterials(data);
|
||||
setError(null); // Clear any previous error
|
||||
setError(null);
|
||||
} catch (error) {
|
||||
console.error("Error creating material:", error);
|
||||
setError("Failed to create material.");
|
||||
@@ -69,7 +70,7 @@ const MaterialList = ({ cafeId }) => {
|
||||
setMaterials(
|
||||
materials.filter((material) => material.materialId !== materialId)
|
||||
);
|
||||
setError(null); // Clear any previous error
|
||||
setError(null);
|
||||
} catch (error) {
|
||||
console.error("Error deleting material:", error);
|
||||
setError("Failed to delete material.");
|
||||
@@ -80,7 +81,7 @@ const MaterialList = ({ cafeId }) => {
|
||||
|
||||
return (
|
||||
<div style={styles.container}>
|
||||
<h2>Materials List</h2>
|
||||
<h1 style={styles.heading}>Materials List</h1>
|
||||
|
||||
{/* Display error message if any */}
|
||||
{error && <p style={styles.error}>{error}</p>}
|
||||
@@ -126,9 +127,13 @@ const MaterialList = ({ cafeId }) => {
|
||||
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}>
|
||||
@@ -142,7 +147,7 @@ const MaterialList = ({ cafeId }) => {
|
||||
style={styles.input}
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" style={styles.button} disabled={loading}>
|
||||
<button type="submit" style={styles.submitButton} disabled={loading}>
|
||||
{loading ? "Creating..." : "Create Material"}
|
||||
</button>
|
||||
</form>
|
||||
@@ -152,17 +157,20 @@ const MaterialList = ({ cafeId }) => {
|
||||
{loading ? (
|
||||
<p>Loading materials...</p>
|
||||
) : (
|
||||
<ul style={styles.list}>
|
||||
<div style={styles.materialList}>
|
||||
{materials.map((material) => (
|
||||
<li key={material.materialId} style={styles.listItem}>
|
||||
{material.name} - {material.unit}
|
||||
<div key={material.materialId} style={styles.materialCard}>
|
||||
{material.image && (
|
||||
<img
|
||||
src={`${API_BASE_URL}/uploads/${material.image}`}
|
||||
src={`${API_BASE_URL}/${material.image}`}
|
||||
alt={material.name}
|
||||
style={styles.image}
|
||||
/>
|
||||
)}
|
||||
<div style={styles.cardContent}>
|
||||
<h3 style={styles.cardTitle}>{material.name}</h3>
|
||||
<p>{material.unit}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleDeleteMaterial(material.materialId)}
|
||||
disabled={deleting === material.materialId || loading}
|
||||
@@ -170,9 +178,9 @@ const MaterialList = ({ cafeId }) => {
|
||||
>
|
||||
{deleting === material.materialId ? "Deleting..." : "Delete"}
|
||||
</button>
|
||||
</li>
|
||||
</div>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
@@ -182,22 +190,24 @@ const MaterialList = ({ cafeId }) => {
|
||||
const styles = {
|
||||
container: {
|
||||
padding: "20px",
|
||||
maxWidth: "600px",
|
||||
maxWidth: "800px",
|
||||
margin: "0 auto",
|
||||
backgroundColor: "#f9f9f9",
|
||||
borderRadius: "8px",
|
||||
boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
|
||||
},
|
||||
heading: {
|
||||
textAlign: "center",
|
||||
},
|
||||
toggleButton: {
|
||||
marginBottom: "20px",
|
||||
padding: "10px 15px",
|
||||
display: "block",
|
||||
width: "100%",
|
||||
padding: "10px",
|
||||
borderRadius: "5px",
|
||||
border: "none",
|
||||
borderRadius: "4px",
|
||||
backgroundColor: "#007bff",
|
||||
color: "#fff",
|
||||
cursor: "pointer",
|
||||
color: "white",
|
||||
fontSize: "16px",
|
||||
transition: "background-color 0.3s",
|
||||
cursor: "pointer",
|
||||
marginBottom: "20px",
|
||||
transition: "background-color 0.3s ease",
|
||||
},
|
||||
formContainer: {
|
||||
transition: "height 0.5s ease-in-out",
|
||||
@@ -207,56 +217,77 @@ const styles = {
|
||||
marginBottom: "20px",
|
||||
},
|
||||
formGroup: {
|
||||
marginBottom: "10px",
|
||||
marginBottom: "15px",
|
||||
},
|
||||
label: {
|
||||
display: "block",
|
||||
marginBottom: "5px",
|
||||
fontWeight: "bold",
|
||||
fontWeight: "600",
|
||||
},
|
||||
input: {
|
||||
width: "100%",
|
||||
padding: "8px",
|
||||
padding: "10px",
|
||||
border: "1px solid #ddd",
|
||||
borderRadius: "4px",
|
||||
borderRadius: "8px",
|
||||
boxSizing: "border-box",
|
||||
},
|
||||
button: {
|
||||
padding: "10px 15px",
|
||||
submitButton: {
|
||||
padding: "12px 20px",
|
||||
border: "none",
|
||||
borderRadius: "4px",
|
||||
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: "5px 10px",
|
||||
padding: "8px 15px",
|
||||
border: "none",
|
||||
borderRadius: "4px",
|
||||
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)",
|
||||
},
|
||||
list: {
|
||||
listStyleType: "none",
|
||||
padding: "0",
|
||||
margin: "0",
|
||||
},
|
||||
listItem: {
|
||||
padding: "10px",
|
||||
borderBottom: "1px solid #ddd",
|
||||
materialList: {
|
||||
display: "flex",
|
||||
flexWrap: "wrap",
|
||||
gap: "15px",
|
||||
justifyContent: "center",
|
||||
maxHeight: "500px", // Adjust the height as needed
|
||||
overflowY: "auto", // Makes the container scrollable vertically
|
||||
},
|
||||
materialCard: {
|
||||
flex: "1 1 200px",
|
||||
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",
|
||||
justifyContent: "space-between",
|
||||
textAlign: "center",
|
||||
},
|
||||
cardContent: {
|
||||
marginBottom: "10px",
|
||||
},
|
||||
cardTitle: {
|
||||
fontSize: "18px",
|
||||
fontWeight: "600",
|
||||
marginBottom: "5px",
|
||||
},
|
||||
image: {
|
||||
marginLeft: "10px",
|
||||
height: "50px",
|
||||
width: "50px",
|
||||
width: "80px",
|
||||
height: "80px",
|
||||
objectFit: "cover",
|
||||
borderRadius: "8px",
|
||||
marginBottom: "10px",
|
||||
},
|
||||
error: {
|
||||
color: "#dc3545",
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
// src/pages/MaterialMutationPage.js
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { getMaterials } from "../helpers/materialHelpers";
|
||||
import {
|
||||
@@ -6,9 +5,145 @@ import {
|
||||
getMaterialMutations,
|
||||
} from "../helpers/materialMutationHelpers";
|
||||
|
||||
// Keyframes for grow animation
|
||||
const growKeyframes = `
|
||||
@keyframes grow {
|
||||
0% {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-top-left-radius: 50%;
|
||||
border-bottom-left-radius: 50%;
|
||||
}
|
||||
100% {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-top-left-radius: 20px;
|
||||
border-bottom-left-radius: 20px;
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
// Styles
|
||||
const styles = {
|
||||
container: {
|
||||
padding: "20px",
|
||||
maxWidth: "800px",
|
||||
margin: "0 auto",
|
||||
},
|
||||
heading: {
|
||||
textAlign: "center",
|
||||
},
|
||||
button: {
|
||||
display: "block",
|
||||
width: "100%",
|
||||
padding: "10px",
|
||||
borderRadius: "5px",
|
||||
border: "none",
|
||||
backgroundColor: "#007bff",
|
||||
color: "white",
|
||||
fontSize: "16px",
|
||||
cursor: "pointer",
|
||||
marginBottom: "20px",
|
||||
transition: "background-color 0.3s ease",
|
||||
},
|
||||
buttonHover: {
|
||||
backgroundColor: "#0056b3",
|
||||
},
|
||||
expandingContainer: (expanded) => ({
|
||||
overflow: "hidden",
|
||||
transition: "all 0.3s ease",
|
||||
animation: expanded ? "grow 0.5s forwards" : "none",
|
||||
marginBottom: "20px",
|
||||
}),
|
||||
materialSelection: {
|
||||
padding: "10px",
|
||||
},
|
||||
materialList: {
|
||||
display: "flex",
|
||||
flexDirection: "row",
|
||||
overflowX: "auto", // Enable horizontal scrolling
|
||||
overflowY: "hidden", // Prevent vertical scrolling
|
||||
whiteSpace: "nowrap", // Prevent wrapping of items
|
||||
gap: "10px", // Space between items
|
||||
padding: "10px 0", // Padding for better appearance
|
||||
},
|
||||
|
||||
materialCard: (selected) => ({
|
||||
flex: "0 0 auto", // Prevent growing or shrinking
|
||||
minWidth: "100px", // Minimum width of the card
|
||||
maxWidth: "150px", // Maximum width of the card
|
||||
padding: "15px",
|
||||
borderRadius: "10px",
|
||||
border: "1px solid #ddd",
|
||||
backgroundColor: selected ? "#007bff" : "#f9f9f9",
|
||||
color: selected ? "white" : "black",
|
||||
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
|
||||
cursor: "pointer",
|
||||
transition: "background-color 0.3s ease",
|
||||
textAlign: "center", // Center text horizontally
|
||||
display: "flex", // Flexbox for vertical centering
|
||||
alignItems: "center", // Center text vertically
|
||||
justifyContent: "center", // Center text horizontally
|
||||
}),
|
||||
mutationDetails: {
|
||||
padding: "10px",
|
||||
},
|
||||
detailInput: {
|
||||
marginBottom: "15px",
|
||||
},
|
||||
detailLabel: {
|
||||
display: "block",
|
||||
marginBottom: "5px",
|
||||
},
|
||||
detailInputField: {
|
||||
width: "100%",
|
||||
padding: "10px",
|
||||
borderRadius: "5px",
|
||||
border: "1px solid #ddd",
|
||||
},
|
||||
btnSubmit: {
|
||||
width: "100%",
|
||||
padding: "10px",
|
||||
borderRadius: "5px",
|
||||
border: "none",
|
||||
backgroundColor: "#28a745",
|
||||
color: "white",
|
||||
fontSize: "16px",
|
||||
cursor: "pointer",
|
||||
transition: "background-color 0.3s ease",
|
||||
},
|
||||
btnSubmitHover: {
|
||||
backgroundColor: "#218838",
|
||||
},
|
||||
message: {
|
||||
textAlign: "center",
|
||||
fontSize: "16px",
|
||||
},
|
||||
successMessage: {
|
||||
color: "#28a745",
|
||||
},
|
||||
errorMessage: {
|
||||
color: "#dc3545",
|
||||
},
|
||||
mutationList: {
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
gap: "10px",
|
||||
maxHeight: "400px", // Set the desired height
|
||||
overflowY: "auto", // Enable vertical scrolling
|
||||
},
|
||||
mutationCard: {
|
||||
padding: "15px",
|
||||
borderRadius: "10px",
|
||||
border: "1px solid #ddd",
|
||||
backgroundColor: "#f9f9f9",
|
||||
boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
|
||||
},
|
||||
};
|
||||
|
||||
const MaterialMutationPage = ({ cafeId }) => {
|
||||
const [materials, setMaterials] = useState([]);
|
||||
const [materialMutations, setMaterialMutations] = useState([]);
|
||||
const [mutations, setMutations] = useState([]);
|
||||
const [selectedMaterialId, setSelectedMaterialId] = useState("");
|
||||
const [oldStock, setOldStock] = useState("");
|
||||
const [newStock, setNewStock] = useState("");
|
||||
@@ -16,8 +151,8 @@ const MaterialMutationPage = ({ cafeId }) => {
|
||||
const [reason, setReason] = useState("");
|
||||
const [successMessage, setSuccessMessage] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
const [expanded, setExpanded] = useState(false);
|
||||
|
||||
// Fetch materials when the component mounts
|
||||
useEffect(() => {
|
||||
const fetchMaterials = async () => {
|
||||
try {
|
||||
@@ -28,31 +163,30 @@ const MaterialMutationPage = ({ cafeId }) => {
|
||||
}
|
||||
};
|
||||
|
||||
fetchMaterials();
|
||||
}, [cafeId]);
|
||||
|
||||
// Fetch material mutations when the component mounts
|
||||
useEffect(() => {
|
||||
const fetchMaterialMutations = async () => {
|
||||
const fetchMutations = async () => {
|
||||
try {
|
||||
const data = await getMaterialMutations(cafeId);
|
||||
setMaterialMutations(data);
|
||||
setMutations(data);
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
}
|
||||
};
|
||||
|
||||
fetchMaterialMutations();
|
||||
fetchMaterials();
|
||||
fetchMutations();
|
||||
}, [cafeId]);
|
||||
|
||||
// Handle form submission
|
||||
const handleSubmit = async (e) => {
|
||||
e.preventDefault();
|
||||
if (!selectedMaterialId) {
|
||||
setError("Please select a material.");
|
||||
return;
|
||||
}
|
||||
const handleToggle = () => setExpanded(!expanded);
|
||||
const handleCancel = () => {
|
||||
setSelectedMaterialId(null);
|
||||
handleToggle();
|
||||
};
|
||||
|
||||
const handleMaterialSelect = (materialId) => {
|
||||
setSelectedMaterialId(materialId);
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
try {
|
||||
const data = { oldStock, newStock, changeDate, reason };
|
||||
await createMaterialMutation(selectedMaterialId, data);
|
||||
@@ -62,118 +196,140 @@ const MaterialMutationPage = ({ cafeId }) => {
|
||||
setChangeDate("");
|
||||
setReason("");
|
||||
setSelectedMaterialId("");
|
||||
|
||||
// Refresh material mutations list after creation
|
||||
// Refresh the mutations list
|
||||
const updatedMutations = await getMaterialMutations(cafeId);
|
||||
setMaterialMutations(updatedMutations);
|
||||
setMutations(updatedMutations);
|
||||
} catch (err) {
|
||||
setError(err.message);
|
||||
}
|
||||
};
|
||||
|
||||
// Filtered mutations based on selected material
|
||||
const filteredMutations = selectedMaterialId
|
||||
? mutations.filter((mutation) => mutation.materialId === selectedMaterialId)
|
||||
: mutations;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<h1>Material Mutations</h1>
|
||||
<div style={styles.container}>
|
||||
<h1 style={styles.heading}>Material Mutations</h1>
|
||||
|
||||
<h2>Create Material Mutation</h2>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div>
|
||||
<label>
|
||||
Select Material:
|
||||
<select
|
||||
value={selectedMaterialId}
|
||||
onChange={(e) => setSelectedMaterialId(e.target.value)}
|
||||
required
|
||||
>
|
||||
<option value="">Select a material</option>
|
||||
<button style={styles.button} onClick={handleCancel}>
|
||||
{expanded ? "Cancel" : "Create Material Mutation"}
|
||||
</button>
|
||||
|
||||
<div style={styles.expandingContainer(expanded)}>
|
||||
{!expanded && (
|
||||
<div style={styles.materialSelection}>
|
||||
<div style={styles.materialList}>
|
||||
<div
|
||||
style={styles.materialCard(selectedMaterialId === "")}
|
||||
onClick={() => handleMaterialSelect("")}
|
||||
>
|
||||
All
|
||||
</div>
|
||||
{materials.map((material) => (
|
||||
<option key={material.materialId} value={material.materialId}>
|
||||
<div
|
||||
key={material.materialId}
|
||||
style={styles.materialCard(
|
||||
selectedMaterialId === material.materialId
|
||||
)}
|
||||
onClick={() => handleMaterialSelect(material.materialId)}
|
||||
>
|
||||
{material.name}
|
||||
</option>
|
||||
</div>
|
||||
))}
|
||||
</select>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
{expanded && !selectedMaterialId && (
|
||||
<div style={styles.materialSelection}>
|
||||
<div style={styles.materialList}>
|
||||
{materials.map((material) => (
|
||||
<div
|
||||
key={material.materialId}
|
||||
style={styles.materialCard(
|
||||
selectedMaterialId === material.materialId
|
||||
)}
|
||||
onClick={() => handleMaterialSelect(material.materialId)}
|
||||
>
|
||||
{material.name}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div>
|
||||
<label>
|
||||
Old Stock:
|
||||
<input
|
||||
type="number"
|
||||
value={oldStock}
|
||||
onChange={(e) => setOldStock(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
{expanded && selectedMaterialId && (
|
||||
<div style={styles.mutationDetails}>
|
||||
<div style={styles.detailInput}>
|
||||
<label style={styles.detailLabel}>Old Stock:</label>
|
||||
<input
|
||||
type="number"
|
||||
style={styles.detailInputField}
|
||||
value={oldStock}
|
||||
onChange={(e) => setOldStock(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>
|
||||
New Stock:
|
||||
<input
|
||||
type="number"
|
||||
value={newStock}
|
||||
onChange={(e) => setNewStock(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div style={styles.detailInput}>
|
||||
<label style={styles.detailLabel}>New Stock:</label>
|
||||
<input
|
||||
type="number"
|
||||
style={styles.detailInputField}
|
||||
value={newStock}
|
||||
onChange={(e) => setNewStock(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>
|
||||
Change Date:
|
||||
<input
|
||||
type="datetime-local"
|
||||
value={changeDate}
|
||||
onChange={(e) => setChangeDate(e.target.value)}
|
||||
required
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div style={styles.detailInput}>
|
||||
<label style={styles.detailLabel}>Change Date:</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
style={styles.detailInputField}
|
||||
value={changeDate}
|
||||
onChange={(e) => setChangeDate(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label>
|
||||
Reason:
|
||||
<textarea
|
||||
value={reason}
|
||||
onChange={(e) => setReason(e.target.value)}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
<div style={styles.detailInput}>
|
||||
<label style={styles.detailLabel}>Reason:</label>
|
||||
<textarea
|
||||
style={styles.detailInputField}
|
||||
value={reason}
|
||||
onChange={(e) => setReason(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit">Create Mutation</button>
|
||||
</form>
|
||||
<button style={styles.btnSubmit} onClick={handleSubmit}>
|
||||
Create Mutation
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{successMessage && <p>{successMessage}</p>}
|
||||
{error && <p>Error: {error}</p>}
|
||||
|
||||
<h2>Existing Material Mutations</h2>
|
||||
{materialMutations.length > 0 ? (
|
||||
<ul>
|
||||
{materialMutations.map((mutation) => (
|
||||
<li key={mutation.mutationId}>
|
||||
<p>
|
||||
<strong>Material ID:</strong> {mutation.materialId}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Old Stock:</strong> {mutation.oldStock}
|
||||
</p>
|
||||
<p>
|
||||
<strong>New Stock:</strong> {mutation.newStock}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Change Date:</strong>{" "}
|
||||
{new Date(mutation.changeDate).toLocaleString()}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Reason:</strong> {mutation.reason}
|
||||
</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
) : (
|
||||
<p>No material mutations found.</p>
|
||||
{successMessage && (
|
||||
<p style={{ ...styles.message, ...styles.successMessage }}>
|
||||
{successMessage}
|
||||
</p>
|
||||
)}
|
||||
{error && (
|
||||
<p style={{ ...styles.message, ...styles.errorMessage }}>
|
||||
Error: {error}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div style={styles.mutationList}>
|
||||
{filteredMutations.map((mutation) => (
|
||||
<div key={mutation.mutationId} style={styles.mutationCard}>
|
||||
<h3>
|
||||
{mutation.Material.name}-{mutation.reason}
|
||||
</h3>
|
||||
<p>Old Stock: {mutation.oldStock}</p>
|
||||
<p>New Stock: {mutation.newStock}</p>
|
||||
<p>Change Date: {new Date(mutation.changeDate).toLocaleString()}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
84
src/pages/ScanMeja.js
Normal file
84
src/pages/ScanMeja.js
Normal file
@@ -0,0 +1,84 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { QrReader } from "react-qr-reader"; // Import QrReader as named import
|
||||
import styles from "./GuestSideLogin.module.css"; // Import module CSS file for styles
|
||||
|
||||
import { getLocalStorage } from "../helpers/localStorageHelpers";
|
||||
|
||||
const GuestSideLogin = ({ socket }) => {
|
||||
const navigate = useNavigate();
|
||||
const [qrCode, setQRCode] = useState(""); // State to store QR code
|
||||
|
||||
socket.on("qrCode_readSuccess", (response) => {
|
||||
const { shopId } = response;
|
||||
console.log("qr has been read");
|
||||
navigate("/" + shopId);
|
||||
});
|
||||
|
||||
const setLoginGuestSide = () => {
|
||||
const token = getLocalStorage("auth");
|
||||
socket.emit("read_qrCode", { qrCode, token });
|
||||
};
|
||||
|
||||
// Function to handle QR code scan
|
||||
const handleScan = (data) => {
|
||||
if (data) {
|
||||
setQRCode(data.text); // Set scanned QR code to state
|
||||
setLoginGuestSide(); // Send QR code to backend
|
||||
}
|
||||
};
|
||||
|
||||
// Function to handle QR scan error
|
||||
const handleError = (err) => {
|
||||
console.error(err);
|
||||
};
|
||||
|
||||
// Function to handle manual input
|
||||
const handleManualInput = (e) => {
|
||||
setQRCode(e.target.value);
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (qrCode.length === 11) {
|
||||
const timer = setTimeout(() => {
|
||||
setLoginGuestSide();
|
||||
}, 1000); // Delay of 1 second (1000 milliseconds)
|
||||
|
||||
return () => clearTimeout(timer); // Cleanup the timer if qrCode changes before the delay completes
|
||||
}
|
||||
}, [qrCode]);
|
||||
|
||||
return (
|
||||
<div className={styles.qrisReaderContainer}>
|
||||
<div className={styles.qrScannerContainer}>
|
||||
<QrReader
|
||||
constraints={{ facingMode: "environment" }}
|
||||
delay={500}
|
||||
onResult={handleScan}
|
||||
onError={handleError}
|
||||
videoId="video"
|
||||
className={styles.qrReader} // Apply the class
|
||||
videoContainerStyle={{
|
||||
width: "100vw",
|
||||
height: "100vh",
|
||||
paddingTop: "0px",
|
||||
}}
|
||||
videoStyle={{ width: "100%", height: "100%" }}
|
||||
/>
|
||||
|
||||
<div className={styles.focusSquare}></div>
|
||||
</div>
|
||||
<div className={styles.inputContainer}>
|
||||
{/* Manual input form */}
|
||||
<input
|
||||
type="text"
|
||||
value={qrCode}
|
||||
onChange={handleManualInput}
|
||||
placeholder="Enter QRIS Code"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default GuestSideLogin;
|
||||
Reference in New Issue
Block a user