added form for next round

src/App.jsx

@@ -13,6 +13,7 @@ import PlacementCellPage from "./Modules/PlacementCell";
 import JobApplicationForm from "./Modules/PlacementCell/ApplyForPlacementForm";
 import AddPlacementRecordForm from "./Modules/PlacementCell/components/AddPlacementRecordForm";
 import AddPlacementEventForm from "./Modules/PlacementCell/components/AddPlacementEventForm";
+import PlacementEventHandeling from "./Modules/PlacementCell/components/PlacementEventHandeling";
 
 export default function App() {
   const location = useLocation();
@@ -59,6 +60,14 @@ export default function App() {
               <JobApplicationForm />
             </Layout>
           }
+        />
+         <Route
+          path="/placement-cell/view"
+          element={
+            <Layout>
+              <PlacementEventHandeling />
+            </Layout>
+          }
         />
         <Route
           path="/profile"

src/Modules/PlacementCell/components/AppliedStudentDetails.jsx

@@ -0,0 +1,150 @@
+import React, { useEffect, useState } from "react";
+import { Table, Pagination, Select, Card, Title, Container, Button, Loader, Alert, TextInput } from "@mantine/core";
+import { useSelector } from "react-redux";
+
+function JobApplicationsTable() {
+    const role = useSelector((state) => state.user.role);
+
+    // Sample data for job applications
+    const [applications, setApplications] = useState([
+        {
+            id: 1,
+            name: "John Doe",
+            rollno: "CS202401",
+            email: "student1@example.com",
+            cpi: 8.5,
+            batch: "2024",
+            branch: "CSE", // Computer Science
+            status: "pending",
+        },
+        {
+            id: 2,
+            name: "Jane Smith",
+            rollno: "ME202402",
+            email: "student2@example.com",
+            cpi: 7.9,
+            batch: "2024",
+            branch: "ME", // Mechanical Engineering
+            status: "pending",
+        },
+        {
+            id: 3,
+            name: "Alice Johnson",
+            rollno: "EE202303",
+            email: "student3@example.com",
+            cpi: 9.1,
+            batch: "2023",
+            branch: "EE", // Electrical Engineering
+            status: "pending",
+        },
+        {
+            id: 4,
+            name: "Bob Brown",
+            rollno: "CE202504",
+            email: "student4@example.com",
+            cpi: 8.0,
+            batch: "2025",
+            branch: "CE", // Civil Engineering
+            status: "pending",
+        },
+        {
+            id: 5,
+            name: "Emily Davis",
+            rollno: "EC202305",
+            email: "student5@example.com",
+            cpi: 8.8,
+            batch: "2023",
+            branch: "EC", // Electronics
+            status: "pending",
+        },
+    ]);
+
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState(null);
+    const [activePage, setActivePage] = useState(1);
+    const recordsPerPage = 10;
+
+    const paginatedApplications = applications.slice(
+        (activePage - 1) * recordsPerPage,
+        activePage * recordsPerPage
+    );
+
+    const handleStatusChange = (applicationId, status) => {
+        console.log(`Application ${applicationId} updated to: ${status}`);
+        // Update the status in the local state
+        setApplications((prevApplications) =>
+            prevApplications.map((application) =>
+                application.id === applicationId ? { ...application, status } : application
+            )
+        );
+    };
+
+    if (loading) return <Loader />;
+    if (error) return <Alert color="red">{error}</Alert>;
+
+    return (
+        <Container>
+            <Card shadow="sm" padding="md" radius="md" withBorder>
+                {/*  add job name to title */}
+                <Title order={3} style={{ marginBottom: '12px' }}>Student Job Applications</Title>
+                <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '12px', gap: '8px' }}>
+                    <TextInput
+                        placeholder="Search"
+                        icon="🔍"
+                        style={{ width: '180px', fontSize: '14px' }}
+                    />
+                </div>
+                <Table highlightOnHover>
+                    <thead>
+                        <tr>
+                            <th>Name</th>
+                            <th>Roll No</th>
+                            <th>Email</th>
+                            <th>CPI</th>
+                            <th>Batch</th>
+                            <th>Branch</th>
+                            <th>Status</th>
+                            {/* <th>Action</th> */}
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {paginatedApplications.map((application) => (
+                            <tr key={application.id}>
+                                <td>{application.name}</td>
+                                <td>{application.rollno}</td>
+                                <td>{application.email}</td>
+                                <td>{application.cpi}</td>
+                                <td>{application.batch}</td>
+                                <td>{application.branch}</td>
+                                <td>
+                                    <Select
+                                        data={[
+                                            { value: 'accept', label: 'Accept' },
+                                            { value: 'reject', label: 'Reject' },
+                                        ]}
+                                        placeholder="Select"
+                                        value={application.status}
+                                        onChange={(value) => handleStatusChange(application.id, value)}
+                                    />
+                                </td>
+                                <td>
+                                    {/* <Button variant="outline" color="blue" size="xs" onClick={() => console.log('Add next round details')}>
+                    Add Next Round
+                  </Button> */}
+                                </td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </Table>
+                <Pagination
+                    total={Math.ceil(applications.length / recordsPerPage)}
+                    page={activePage}
+                    onChange={setActivePage}
+                    style={{ marginTop: '12px' }}
+                />
+            </Card>
+        </Container>
+    );
+}
+
+export default JobApplicationsTable;

src/Modules/PlacementCell/components/CreateNextRoundForm.jsx

@@ -0,0 +1,101 @@
+import React, { useState } from "react";
+import { Modal, Button, TextInput, Select, Textarea, Card, Container } from "@mantine/core";
+
+function CreateNextRoundForm() {
+  const [modalOpened, setModalOpened] = useState(false);
+  const [roundName, setRoundName] = useState("");
+  const [date, setDate] = useState("");
+  const [time, setTime] = useState("");
+  const [location, setLocation] = useState("");
+  const [description, setDescription] = useState("");
+  const [roundType, setRoundType] = useState("");
+
+  const handleSubmit = () => {
+    const nextRoundDetails = {
+      roundName,
+      date,
+      time,
+      location,
+      description,
+      roundType,
+    };
+
+    console.log("Next Round Details:", nextRoundDetails);
+    setModalOpened(false);
+    // Reset form fields
+    setRoundName("");
+    setDate("");
+    setTime("");
+    setLocation("");
+    setDescription("");
+    setRoundType("");
+  };
+
+  return (
+    <Container>
+      <Button onClick={() => setModalOpened(true)}>Create Next Round</Button>
+      <Modal
+        opened={modalOpened}
+        onClose={() => setModalOpened(false)}
+        title="Add Next Round Details"
+      >
+        <Card shadow="sm" padding="md" radius="md">
+          <form onSubmit={(e) => { e.preventDefault(); handleSubmit(); }}>
+            <TextInput
+              label="Round Name"
+              placeholder="Enter round name"
+              value={roundName}
+              onChange={(e) => setRoundName(e.target.value)}
+              required
+            />
+            <TextInput
+              label="Date"
+              placeholder="YYYY-MM-DD"
+              value={date}
+              onChange={(e) => setDate(e.target.value)}
+              required
+            />
+            <TextInput
+              label="Time"
+              placeholder="HH:MM (24-hour format)"
+              value={time}
+              onChange={(e) => setTime(e.target.value)}
+              required
+            />
+            <TextInput
+              label="Location"
+              placeholder="Enter location"
+              value={location}
+              onChange={(e) => setLocation(e.target.value)}
+              required
+            />
+            <Textarea
+              label="Description"
+              placeholder="Enter a brief description"
+              value={description}
+              onChange={(e) => setDescription(e.target.value)}
+            />
+            <Select
+              label="Round Type"
+              placeholder="Select round type"
+              data={[
+                { value: 'technical', label: 'Technical' },
+                { value: 'hr', label: 'HR' },
+                { value: 'group_discussion', label: 'Group Discussion' },
+                { value: 'coding', label: 'Coding' },
+              ]}
+              value={roundType}
+              onChange={setRoundType}
+              required
+            />
+            <Button type="submit" style={{ marginTop: '12px' }} fullWidth>
+              Save Round Details
+            </Button>
+          </form>
+        </Card>
+      </Modal>
+    </Container>
+  );
+}
+
+export default CreateNextRoundForm;

src/Modules/PlacementCell/components/PlacementEventHandeling.jsx

@@ -0,0 +1,25 @@
+// combine the table, also add the create next round form
+import React from 'react';
+import JobApplicationsTable from './AppliedStudentDetails';
+import CreateNextRoundForm from './CreateNextRoundForm';
+
+function PlacementEventHandeling() {
+
+    return (
+        <div
+        style={{
+            padding: '20px',
+            display: 'flex',
+            flexDirection: 'column',
+
+        }}
+        >
+            <CreateNextRoundForm />
+            <JobApplicationsTable />
+        </div>
+    );
+}
+
+export default PlacementEventHandeling;
+
+

src/Modules/PlacementCell/components/PlacementScheduleCard.jsx

@@ -1,7 +1,7 @@
 
 import React, { useState } from "react";
 import { Card, Text, Badge, Group, Button, Image, ActionIcon } from "@mantine/core";
-import { Clock, MapPin, Trash, Pencil } from "@phosphor-icons/react";
+import { Clock, MapPin, Trash, Pencil, Eye } from "@phosphor-icons/react";
 import { useNavigate } from "react-router-dom";
 import { useSelector } from 'react-redux';
 
@@ -28,6 +28,12 @@ function PlacementScheduleCard({
     );
   };
 
+  const handelViewClick = () => {
+    navigate(
+      `/placement-cell/view?companyName=${encodeURIComponent(companyName)}&companyLogo=${encodeURIComponent(companyLogo)}`,
+    );
+  };
+
   const handleDeleteClick = () => {
     setVisible(false);
   };
@@ -120,6 +126,11 @@ function PlacementScheduleCard({
             <ActionIcon onClick={handleEditClick} color="blue" size="md" variant="light">
               <Pencil size={22} />
             </ActionIcon>
+
+            <ActionIcon onClick={handelViewClick} color="blue" size="md" variant="light">
+              <Eye size={22} />
+            </ActionIcon>
+
             <ActionIcon onClick={handleDeleteClick} color="red" size="md" variant="light">
               <Trash size={22} />
             </ActionIcon>

src/Modules/PlacementCell/index.jsx

@@ -53,9 +53,7 @@ function PlacementCellPage() {
         {tabs.map((tab) => (
 
           <Tabs.Panel key={tab.value} value={tab.value}>
-
             {tab.component || <Text>No content available.</Text>}
-
           </Tabs.Panel>
         ))}