working on material and table

src/pages/MaterialMutationsPage.js

@@ -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>
   );
 };