vne53821: Create ui components for new mentor Dashboard

server/src/components/AddNewStudentPopup.tsx

@@ -0,0 +1,98 @@
+"use client";
+
+import React, { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+
+interface AddNewStudentPopupProps {
+    isOpen: boolean;
+    onClose: () => void;
+}
+
+const AddNewStudentPopup: React.FC<AddNewStudentPopupProps> = ({ isOpen, onClose }) => {
+    const [newStudent, setNewStudent] = useState({
+        name: "",
+        email: "",
+        projects: "",
+    });
+
+    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        const { name, value } = e.target;
+        setNewStudent((prevState) => ({
+            ...prevState,
+            [name]: value,
+        }));
+    };
+
+    const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+        setNewStudent((prevState) => ({
+            ...prevState,
+            projects: e.target.value,
+        }));
+    };
+
+    const handleAddStudent = () => {
+        // Logic to add the student to the list
+        console.log("New student added:", newStudent);
+        onClose();
+    };
+
+    return (
+        <Dialog open={isOpen} onOpenChange={onClose}>
+            <DialogContent className="max-w-md w-full p-6 bg-white rounded-lg shadow-lg">
+                <DialogHeader>
+                    <DialogTitle className="text-xl font-bold text-gray-800">👤 Add New Student</DialogTitle>
+                </DialogHeader>
+
+                <div className="space-y-4">
+                    <div>
+                        <label className="block text-sm font-medium text-gray-700">Name</label>
+                        <Input
+                            name="name"
+                            placeholder="Enter student's name"
+                            value={newStudent.name}
+                            onChange={handleInputChange}
+                            className="mt-1"
+                        />
+                    </div>
+
+                    <div>
+                        <label className="block text-sm font-medium text-gray-700">Email</label>
+                        <Input
+                            name="email"
+                            placeholder="Enter student's email"
+                            value={newStudent.email}
+                            onChange={handleInputChange}
+                            className="mt-1"
+                        />
+                    </div>
+
+                    <div>
+                        <label className="block text-sm font-medium text-gray-700">Project Name</label>
+                        <select
+                            name="projects"
+                            value={newStudent.projects}
+                            onChange={handleSelectChange}
+                            className="mt-1 w-full border border-gray-300 rounded-md p-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                        >
+                            <option value="">Select a project</option>
+                            <option value="Project A">Project A</option>
+                            <option value="Project B">Project B</option>
+                            <option value="Project C">Project C</option>
+                            <option value="Project D">Project D</option>
+                        </select>
+                    </div>
+                </div>
+
+                <div className="mt-6 flex justify-end">
+                    <Button onClick={handleAddStudent} className="bg-blue-600 hover:bg-blue-500 text-white px-6 py-2 rounded-lg">
+                        Add Student
+                    </Button>
+                </div>
+            </DialogContent>
+        </Dialog>
+    );
+};
+
+export default AddNewStudentPopup;

server/src/components/NewProjectPopup.tsx

@@ -0,0 +1,134 @@
+import React, { useState } from 'react';
+
+interface Student {
+  id: number;
+  name: string;
+  role: string;
+}
+
+interface NewProjectPopupProps {
+  closePopup: () => void;
+}
+
+const NewProjectPopup: React.FC<NewProjectPopupProps> = ({ closePopup }) => {
+  const [projectName, setProjectName] = useState<string>('');
+  const [teamId, setTeamId] = useState<string>('');
+  const [startDate, setStartDate] = useState<string>('');
+  const [endDate, setEndDate] = useState<string>('');
+  const [selectedStudent, setSelectedStudent] = useState<string>('');
+  const [selectedRole, setSelectedRole] = useState<string>('');
+  const [students, setStudents] = useState<Student[]>([]);
+
+  const sampleStudents = [
+    { id: 1, name: 'Nimal Perera' },
+    { id: 2, name: 'Piyal Alwis' },
+    { id: 3, name: 'Suneera Gamage' },
+    { id: 4, name: 'Ryan Perera' },
+  ];
+
+  const handleAddStudent = () => {
+    if (selectedStudent && selectedRole) {
+      const studentExists = students.some(student => student.name === selectedStudent);
+      if (!studentExists) {
+        setStudents([...students, { id: students.length + 1, name: selectedStudent, role: selectedRole }]);
+        setSelectedStudent('');
+        setSelectedRole('');
+      }
+    }
+  };
+
+  const handleRemoveStudent = (id: number) => {
+    setStudents(students.filter(student => student.id !== id));
+  };
+
+  const handleCreate = () => {
+    console.log('New project created:', { projectName, teamId, startDate, endDate, students });
+    closePopup();
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-75 flex justify-center items-center z-50">
+      <div className="bg-white p-6 rounded-md shadow-lg z-50">
+        <h2 className="text-xl font-semibold mb-4">📋 Create New Project</h2>
+
+        {/* Project Name */}
+        <div className="mb-4">
+          <label className="block text-sm font-semibold">Project Name</label>
+          <input type="text" className="w-full mt-2 px-4 py-2 border border-gray-300 rounded-md" value={projectName} onChange={(e) => setProjectName(e.target.value)} />
+        </div>
+
+        {/* Team ID */}
+        <div className="mb-4">
+          <label className="block text-sm font-semibold">Team ID</label>
+          <input type="text" className="w-full mt-2 px-4 py-2 border border-gray-300 rounded-md" value={teamId} onChange={(e) => setTeamId(e.target.value)} />
+        </div>
+
+        {/* Start Date and End Date */}
+        <div className="grid grid-cols-2 gap-4 mb-4">
+          <div>
+            <label className="block text-sm font-semibold">Start Date</label>
+            <input type="date" className="w-full mt-2 px-4 py-2 border border-gray-300 rounded-md" value={startDate} onChange={(e) => setStartDate(e.target.value)} />
+          </div>
+          <div>
+            <label className="block text-sm font-semibold">End Date</label>
+            <input type="date" className="w-full mt-2 px-4 py-2 border border-gray-300 rounded-md" value={endDate} onChange={(e) => setEndDate(e.target.value)} />
+          </div>
+        </div>
+
+        {/* Add Student */}
+        <label className="block text-sm font-semibold mb-4">Select Student</label>
+        <div className="flex gap-2 mb-4">
+          <select className="w-full px-4 py-2 border border-gray-300 rounded-md" value={selectedStudent} onChange={(e) => setSelectedStudent(e.target.value)}>
+            <option value="">Select Student</option>
+            {sampleStudents.map((student) => (
+              <option key={student.id} value={student.name}>{student.name}</option>
+            ))}
+          </select>
+          <select className="w-full px-4 py-2 border border-gray-300 rounded-md" value={selectedRole} onChange={(e) => setSelectedRole(e.target.value)}>
+            <option value="">Select Role</option>
+            <option value="Team Leader">Team Leader</option>
+            <option value="Member">Member</option>
+          </select>
+          <button className="bg-blue-500 text-white px-4 py-2 rounded-md" onClick={handleAddStudent}>Add</button>
+        </div>
+
+        {/* Students Table */}
+<div className="mb-4">
+  <table className="w-full border-collapse">
+    <thead>
+      <tr className="bg-gray-100">
+        <th className="py-2 px-4 text-left">Name</th>
+        <th className="py-2 px-4 text-left">Role</th>
+        <th className="py-2 px-4 text-left">Action</th>
+      </tr>
+    </thead>
+  </table>
+  <div className="max-h-32 overflow-y-auto">
+    <table className="w-full border-collapse">
+      <tbody>
+        {students.map((student) => (
+          <tr key={student.id} className="border-b">
+            <td className="py-2 px-2">{student.name}</td>
+            <td className="py-2 px-4">{student.role}</td>
+            <td className="py-2 px-6">
+              <button className="bg-pink-900 text-white rounded-full p-1 hover:bg-red-800" onClick={() => handleRemoveStudent(student.id)}>❌</button>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  </div>
+</div>
+
+
+        {/* Buttons */}
+        <div className="flex justify-end mt-4">
+          <button className="bg-gray-500 text-white px-4 py-2 rounded-md mr-2" onClick={closePopup}>Cancel</button>
+          <button className="bg-green-500 text-white px-4 py-2 rounded-md" onClick={handleCreate}>Create</button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NewProjectPopup;