Skip to content
Snippets Groups Projects
Commit 73bddaa1 authored by sush202020's avatar sush202020
Browse files

Admin Chnages actual

parent 18f0ef47
No related branches found
No related tags found
1 merge request!10Sushant branch
Hide whitespace changes
Inline Side-by-side
frontend/src/components/AdminHome/AdminHome.css
+ 159
− 0
View file @ 73bddaa1
......@@ -163,3 +163,162 @@ input[type="file"] {
cursor: pointer;
}
/* Back button styling */
.back-button {
padding: 10px 20px;
margin-bottom: 20px;
background-color: red;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
.back-button:hover {
background-color: #e9e9e9;
}
/* Search bar styling */
.search-bar {
padding: 10px;
width: 100%;
margin-bottom: 20px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 16px;
}
/* User table styling */
.user-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.user-table th, .user-table td {
padding: 10px;
text-align: left;
border: 1px solid #ddd;
}
.user-table th {
background-color: #f4f4f4;
}
.user-table tr:nth-child(even) {
background-color: #f9f9f9;
}
.user-table tr:hover {
background-color: #e9e9e9;
}
/* Adjust dashboard layout when viewing users */
.dashboard {
display: block;
}
.user-list {
width: 100%;
}
.dashboard-item {
background-color: white;
border: 2px solid #ddd;
padding: 20px;
font-size: 20px;
text-align: center;
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: background-color 0.3s, box-shadow 0.3s;
}
.dashboard-item:hover {
background-color: #f0f0f0;
box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.2);
}
input[type="file"] {
display: block;
margin: 10px auto;
cursor: pointer;
}
/* Delete button styling */
.delete-button {
background-color: #ff4d4d; /* Red background */
color: white;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
}
.delete-button:hover {
background-color: #ff1a1a; /* Darker red on hover */
}
/* Update button styling */
.update-button {
background-color: #4CAF50; /* Green background */
color: white;
border: none;
padding: 5px 10px;
border-radius: 4px;
cursor: pointer;
}
.update-button:hover {
background-color: #45a049; /* Darker green on hover */
}
/* Update form styling */
.update-form {
margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
.update-form input {
display: block;
margin: 10px 0;
padding: 8px;
width: calc(100% - 16px);
border: 1px solid #ccc;
border-radius: 4px;
}
.update-form button {
margin-right: 10px;
}
/* Search area styling */
.search-area {
margin: 20px 0;
display: flex;
gap: 10px;
}
.search-input {
padding: 10px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 4px;
}
.search-button {
background-color: #007BFF;
color: white;
border: none;
padding: 10px 20px;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
}
.search-button:hover {
background-color: #0056b3;
}
frontend/src/components/AdminHome/AdminHome.js
+ 244
− 27
View file @ 73bddaa1
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import React, { useState } from "react";
import { useNavigate } from "react-router-dom"; // Use useNavigate instead
import "./AdminHome.css";
function AdminHome() {
const navigate = useNavigate(); // Initialize useNavigate hook
const [isSidebarOpen, setSidebarOpen] = useState(true);
const [viewingUsers, setViewingUsers] = useState(false);
const [firstName, setFirstName] = useState(""); // State for first name input
const [lastName, setLastName] = useState(""); // State for last name input
const [editingUser, setEditingUser] = useState(null);
const [userData, setUserData] = useState({ name: "", email: "" });
// Mock user data for demonstration
const [users, setUsers] = useState([
{
id: 1,
firstName: "John",
lastName: "Doe",
middleName: "M.",
suffix: "Jr.",
maidenName: "Smith",
nickname: "Johnny",
gender: "male",
techAlumChapter: "Chapter A",
classYear: "2022",
gradYear: "2023",
gradSemester: "Fall",
degrees: [
{
subject: "Computer Science",
degreeType: "BS",
degreeYear: "2022",
degreeDescription: "Bachelor of Science in Computer Science",
degreeDepartment: "Computer Science",
degreeCollege: "College of Engineering",
}
],
addresses: [
{
address1: "123 Main St",
address2: "Apt 4B",
city: "Blacksburg",
state: "VA",
country: "USA",
zipCode: "24060",
preferredAddress: true,
}
],
contacts: [
{
contactNumber: "555-123-4567",
contactType: "phone",
preferredContact: true,
}
],
involvements: ["Alumni Association", "Volunteering"],
},
{
id: 2,
firstName: "Jane",
lastName: "Smith",
middleName: "A.",
suffix: "Sr.",
maidenName: "Doe",
nickname: "Janie",
gender: "female",
techAlumChapter: "Chapter B",
classYear: "2021",
gradYear: "2022",
gradSemester: "Spring",
degrees: [
{
subject: "Biology",
degreeType: "BS",
degreeYear: "2021",
degreeDescription: "Bachelor of Science in Biology",
degreeDepartment: "Biology",
degreeCollege: "College of Science",
}
],
addresses: [
{
address1: "456 Elm St",
address2: "",
city: "Roanoke",
state: "VA",
country: "USA",
zipCode: "24012",
preferredAddress: false,
}
],
contacts: [
{
contactNumber: "555-987-6543",
contactType: "email",
preferredContact: true,
}
],
involvements: ["Mentoring", "Research Group"],
},
]);
const toggleSidebar = () => {
setSidebarOpen(!isSidebarOpen);
};
const handleViewUsersClick = () => {
setViewingUsers(true);
};
const handleBackClick = () => {
setViewingUsers(false);
setEditingUser(null);
};
const handleCreateUser = () => {
navigate('/MyAdminAccountView');
};
// Handle the search and redirect to results page
const handleSearchSubmit = (e) => {
e.preventDefault();
const filteredUsers = users.filter(
(user) =>
user.firstName.toLowerCase().startsWith(firstName.toLowerCase()) &&
user.lastName.toLowerCase().startsWith(lastName.toLowerCase())
);
// Redirect to the search results page with the filtered users
navigate("/search-results", { state: { users: filteredUsers } }); // Use navigate instead
// Reset the search inputs
setFirstName("");
setLastName("");
};
const handleSaveUser = (e) => {
e.preventDefault();
setUsers(
users.map((user) =>
user.id === editingUser
? {
...user,
firstName: userData.name.split(" ")[0],
lastName: userData.name.split(" ")[1],
email: userData.email,
}
: user
)
);
setEditingUser(null);
setUserData({ name: "", email: "" });
};
return (
<div className="admin-page">
{/* Navbar */}
<nav className="navbar">
<div className="navbar-links">
<a href="#">Home</a>
<a href="#">Browse</a>
<a href="#">Search</a>
<a href="#">Messages</a>
<a href="#a">Home</a>
<a href="#b">Browse</a>
<a href="#c">Search</a>
{/* <a href="#d">Messages</a> */}
</div>
</nav>
{/* Main content wrapper */}
<div className="main-content">
{/* Sidebar */}
<div className={`sidebar ${isSidebarOpen ? "open" : "closed"}`}>
......@@ -30,33 +174,106 @@ function AdminHome() {
</button>
{isSidebarOpen && (
<ul className="sidebar-menu">
<li><a href="#">Account Settings</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">More...</a></li>
<li><a href="#e">Account Settings</a></li>
<li><a href="#f">Privacy Policy</a></li>
<li><a href="#g">What the app does?</a></li>
<li><a href="#g">How can you use this app?</a></li>
<li><a href="#g">Cadet Mission Statement </a></li>
</ul>
)}
</div>
{/* Dashboard area */}
{/* Dashboard */}
<div className="content">
<h1>Welcome to Admin Page</h1>
<div className="dashboard">
<div className="dashboard-item" onClick={() => console.log("Viewing Users")}>
<span>View Users</span>
</div>
<div className="dashboard-item" onClick={() => console.log("Editing Users")}>
<span>Edit Users</span>
</div>
<div className="dashboard-item" onClick={() => console.log("Deleting Users")}>
<span>Delete Users</span>
</div>
<div className="dashboard-item">
<input type="file" onChange={() => console.log("CSV Uploaded")} />
<span>Upload CSV</span>
</div>
<div className="dashboard-item" onClick={() => console.log("Tracking Page Visits")}>
<span>Track Application Activity</span>
</div>
{viewingUsers ? (
<>
<button className="back-button" onClick={handleBackClick}>
← Back to Dashboard
</button>
{/* Search by First Name and Last Name */}
<form className="search-area" onSubmit={handleSearchSubmit}>
<input
type="text"
placeholder="First Name"
className="search-input"
value={firstName}
onChange={(e) => setFirstName(e.target.value)}
/>
<input
type="text"
placeholder="Last Name"
className="search-input"
value={lastName}
onChange={(e) => setLastName(e.target.value)}
/>
<button
type="submit"
className="search-button"
>
Submit
</button>
<button
type="New User"
className="search-button"
onClick={handleCreateUser}
>
Create New User
</button>
</form>
{/* Update User Form */}
{editingUser && (
<div className="update-form">
<h3>Update User</h3>
<form onSubmit={handleSaveUser}>
<input
type="text"
placeholder="Name"
value={userData.name}
onChange={(e) =>
setUserData({ ...userData, name: e.target.value })
}
required
/>
<input
type="email"
placeholder="Email"
value={userData.email}
onChange={(e) =>
setUserData({ ...userData, email: e.target.value })
}
required
/>
<button type="submit">Save</button>
<button
type="button"
onClick={() => setEditingUser(null)}
>
Cancel
</button>
</form>
</div>
)}
</>
) : (
<>
<div className="dashboard-item" onClick={handleViewUsersClick}>
<span>View Users</span>
</div>
<div className="dashboard-item">
<input type="file" onChange={() => console.log("CSV Uploaded")} />
<span>Upload CSV</span>
</div>
<div className="dashboard-item" onClick={() => console.log("Tracking Page Visits")}>
<span>Track Application Activity</span>
</div>
</>
)}
</div>
</div>
</div>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment