modified assignment page

src/pages/AssignmentPage.jsx

@@ -2,6 +2,10 @@ import React, { useState } from "react";
 import "../scss/components/_assignment.scss";
 
 const AssignmentPage = () => {
+  const [studentName, setStudentName] = useState("");
+  const [campID, setCampID] = useState("");
+  const [programID, setProgramID] = useState("");
+  const [password, setPassword] = useState("");
   const [title, setTitle] = useState("");
   const [description, setDescription] = useState("");
   const [file, setFile] = useState(null);
@@ -9,34 +13,54 @@ const AssignmentPage = () => {
   const [showModal, setShowModal] = useState(false);
   const [editingIndex, setEditingIndex] = useState(null);
 
-  const handleSubmit = async (e) => {
+  const resetForm = () => {
-    e.preventDefault();
+    setStudentName("");
-
+    setCampID("");
-    const formData = new FormData();
+    setProgramID("");
-    formData.append("title", title);
+    setPassword("");
-    formData.append("description", description);
-    formData.append("file", file);
-
-    try {
-      const res = await fetch("/api/assignments", {
-        method: "POST",
-        body: formData,
-      });
-
-      if (res.ok) {
-        alert("Successfully Uploaded!");
-        setProjects([...projects, { title, description }]);
     setTitle("");
     setDescription("");
     setFile(null);
-        setShowModal(false);
+    setEditingIndex(null);
+  };
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    const newProject = {
+      studentName,
+      campID,
+      programID,
+      title,
+      description,
+      fileName: file ? file.name : null,
+    };
+
+    if (editingIndex !== null) {
+      // Edit mode: update the project at the index
+      const updatedProjects = [...projects];
+      updatedProjects[editingIndex] = newProject;
+      setProjects(updatedProjects);
     } else {
-        alert("Fail Uploading!");
+      // New submission
-      }
+      setProjects([...projects, newProject]);
-    } catch (err) {
-      console.error(err);
-      alert("Server Error!");
     }
+
+    alert(editingIndex !== null ? "Assignment updated!" : "Assignment submitted!");
+    resetForm();
+    setShowModal(false);
+  };
+
+  const handleEdit = (index) => {
+    const project = projects[index];
+    setStudentName(project.studentName);
+    setCampID(project.campID);
+    setProgramID(project.programID);
+    setTitle(project.title);
+    setDescription(project.description);
+    setFile(null); // File can't be set again for editing, usually. You could add note about this.
+    setEditingIndex(index);
+    setShowModal(true);
   };
 
   const handleDelete = (index) => {
@@ -47,13 +71,53 @@ const AssignmentPage = () => {
   return (
     <div className="assignment-page">
       <h2>📘 Assignments</h2>
-      <button onClick={() => setShowModal(true)}>➕ Create New</button>
+      <button onClick={() => { resetForm(); setShowModal(true); }}>➕ Add New</button>
 
       {showModal && (
         <div className="modal-overlay">
           <div className="modal">
             <h3>{editingIndex !== null ? "Edit Assignment" : "New Assignment"}</h3>
-            <form onSubmit={handleSubmit} encType="multipart/form-data">
+            <form onSubmit={handleSubmit}>
+              <div>
+                <label>Student Name</label>
+                <input
+                  type="text"
+                  value={studentName}
+                  onChange={(e) => setStudentName(e.target.value)}
+                  required
+                />
+              </div>
+
+              <div>
+                <label>Camp ID</label>
+                <input
+                  type="text"
+                  value={campID}
+                  onChange={(e) => setCampID(e.target.value)}
+                  required
+                />
+              </div>
+
+              <div>
+                <label>Program ID</label>
+                <input
+                  type="text"
+                  value={programID}
+                  onChange={(e) => setProgramID(e.target.value)}
+                  required
+                />
+              </div>
+
+              <div>
+                <label>Password</label>
+                <input
+                  type="password"
+                  value={password}
+                  onChange={(e) => setPassword(e.target.value)}
+                  required
+                />
+              </div>
+
               <div>
                 <label>Assignment Title</label>
                 <input
@@ -74,23 +138,20 @@ const AssignmentPage = () => {
               </div>
 
               <div>
-                <label>File Upload</label>
+                <label>File Upload (optional)</label>
                 <input
                   type="file"
                   onChange={(e) => setFile(e.target.files[0])}
-                  required
                 />
               </div>
 
               <div className="modal-buttons">
-                <button type="submit">Upload</button>
+                <button type="submit">{editingIndex !== null ? "Update" : "Submit"}</button>
                 <button
                   type="button"
                   onClick={() => {
+                    resetForm();
                     setShowModal(false);
-                    setTitle("");
-                    setDescription("");
-                    setFile(null);
                   }}
                 >
                   Cancel
@@ -105,13 +166,24 @@ const AssignmentPage = () => {
   <h3>📋 Projects</h3>
   {projects.map((project, index) => (
     <div key={index} className="project-item">
+      <div className="project-meta">
+        <strong>Student Name: {project.studentName}</strong> | CampID: {project.campID} | ProgramID: {project.programID}
+      </div>
       <h4>{project.title}</h4>
       <p>{project.description}</p>
-            <button onClick={() => alert("Edit not implemented in modal mode")}>✏️ Edit</button>
+      {project.fileName && (
+        <p><strong>Uploaded File:</strong> {project.fileName}</p>
+      )}
+
+      <div className="action-buttons">
+        <button onClick={() => handleEdit(index)}>✏️ Edit</button>
         <button onClick={() => handleDelete(index)}>🗑️ Delete</button>
+        <button onClick={() => alert("QR feature coming soon!")}>📎 QR</button>
+      </div>
     </div>
   ))}
-      </div>
+</div>
+
     </div>
   );
 };

src/scss/components/_assignment.scss

@@ -45,106 +45,190 @@
   }
 
   .project-list {
-    margin-top: 30px;
+    margin-top: 2rem;
   
     .project-item {
-      border: 1px solid #ddd;
+      background: #ffffff;
-      padding: 12px;
+      border: 1px solid #e0e0e0;
-      margin-bottom: 10px;
+      border-radius: 12px;
-      border-radius: 6px;
+      padding: 1.5rem;
-      background-color: #f9f9f9;
+      margin-bottom: 1.5rem;
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
+      transition: transform 0.2s ease, box-shadow 0.2s ease;
+  
+      // &:hover {
+      //   transform: translateY(-2px);
+      //   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
+      // }
+  
+      .project-meta {
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 0.75rem;
+        flex-wrap: wrap;
+  
+        strong {
+          color: #34495e;
+        }
+      }
   
       h4 {
-        margin: 0 0 5px 0;
+        margin: 0.5rem 0;
+        font-size: 1.2rem;
+        color: #2d3436;
       }
   
+      p {
+        margin: 0.25rem 0;
+        color: #555;
+        line-height: 1.4;
+  
+        strong {
+          color: #2d3436;
+        }
+      }
+  
+      .action-buttons {
+        display: flex;
+        gap: 0.5rem;
+        margin-top: 0.75rem;
+  
         button {
-        margin-right: 10px;
+          background-color: #f4f4f4;
-        padding: 6px 10px;
+          border: 1px solid #ddd;
-        border: none;
+          border-radius: 6px;
-        border-radius: 4px;
+          padding: 0.4rem 0.8rem;
           cursor: pointer;
-
+          font-size: 0.9rem;
-        &:first-of-type {
+          transition: background-color 0.2s ease;
-          background-color: #ffa500;
-          color: white;
   
           &:hover {
-            background-color: #e59400;
+            background-color: #e9ecef;
+          }
+  
+          &:nth-child(1) {
+            color: #2c3e50;
+          }
+  
+          &:nth-child(2) {
+            color: #c0392b;
+          }
+  
+          &:nth-child(3) {
+            color: #16a085;
+          }
+        }
+      }
     }
   }
   
-        &:last-of-type {
-          background-color: #e74c3c;
-          color: white;
-
-          &:hover {
-            background-color: #c0392b;
-          }
-        }
-      }
-    }
-  }
 
   .modal-overlay {
     position: fixed;
     top: 0;
     left: 0;
-    right: 0;
+    width: 100%;
-    bottom: 0;
+    height: 100%;
-    background: rgba(0, 0, 0, 0.5);
+    background: rgba(0, 0, 0, 0.6);
     display: flex;
     align-items: center;
     justify-content: center;
-
+    z-index: 1000;
-    .modal {
-      background: white;
-      padding: 20px;
-      border-radius: 10px;
-      width: 300px;
-
-      h3 {
-        margin-bottom: 10px;
   }
   
-      input,
+  .modal {
-      textarea {
+    background: #fff;
+    padding: 2rem;
+    border-radius: 12px;
+    max-width: 500px;
     width: 100%;
-        margin-bottom: 10px;
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
-        padding: 8px;
+    animation: fadeIn 0.3s ease;
+  }
+  
+  .modal h3 {
+    margin-bottom: 1rem;
+    font-size: 1.5rem;
+    font-weight: 600;
+    color: #333;
+  }
+  
+  .modal form > div {
+    margin-bottom: 1rem;
+  }
+  
+  .modal label {
+    display: block;
+    font-size: 0.9rem;
+    font-weight: 500;
+    margin-bottom: 0.4rem;
+    color: #555;
+  }
+  
+  .modal input[type="text"],
+  .modal input[type="password"],
+  .modal input[type="file"],
+  .modal textarea {
+    width: 100%;
+    padding: 0.6rem 0.8rem;
     border: 1px solid #ccc;
-        border-radius: 4px;
+    border-radius: 6px;
+    font-size: 0.95rem;
+    transition: border-color 0.2s ease;
+  
+    &:focus {
+      border-color: #007bff;
+      outline: none;
+    }
+  }
+  
+  .modal textarea {
+    resize: vertical;
+    min-height: 80px;
   }
   
   .modal-buttons {
     display: flex;
-        justify-content: space-between;
+    justify-content: flex-end;
+    gap: 1rem;
+    margin-top: 1.5rem;
+  }
   
-        button {
+  .modal-buttons button {
-          padding: 6px 12px;
+    padding: 0.6rem 1.2rem;
+    font-size: 0.95rem;
     border: none;
-          border-radius: 4px;
+    border-radius: 6px;
     cursor: pointer;
+    transition: background 0.2s ease;
+  }
   
-          &:first-of-type {
+  .modal-buttons button[type="submit"] {
-            background-color: #28a745;
+    background-color: #ff4b2b;
-            color: white;
+    color: #fff;
   
     &:hover {
-              background-color: #218838;
+      background-color: #FF2600;
     }
   }
   
-          &:last-of-type {
+  .modal-buttons button[type="button"] {
-            background-color: #6c757d;
+    background-color: #e0e0e0;
-            color: white;
+    color: #333;
   
     &:hover {
-              background-color: #5a6268;
+      background-color: #cfcfcf;
-            }
     }
   }
+  
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+      transform: translateY(-10px);
     }
+    to {
+      opacity: 1;
+      transform: translateY(0);
     }
   }
 }