Skip to content
This repository was archived by the owner on Sep 22, 2025. It is now read-only.

Add files via upload #348

Open
s223060317 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add files via upload #348

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
153 changes: 134 additions & 19 deletions guardian-admin-dashboard/src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,43 +1,158 @@
/* General Styles */
body {
margin: 0;
font-family: 'Segoe UI', sans-serif;
background: #f0f2f5;
margin: 0;
padding: 0;
background-color: #f4f6f8;
color: #333;
}

/* Login Page */
.login-container {
max-width: 400px;
width: 320px;
margin: 100px auto;
padding: 30px;
padding: 25px;
background: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
border-radius: 8px;
border-radius: 12px;
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
text-align: center;
}

.login-container h2 {
margin-bottom: 20px;
}

.login-form input {
width: 100%;
padding: 10px;
width: 90%;
margin: 10px 0;
padding: 12px;
border-radius: 6px;
border: 1px solid #ccc;
border-radius: 4px;
}

.login-form button {
width: 100%;
padding: 10px;
background-color: #3f51b5;
background-color: #0066cc;
color: white;
border: none;
padding: 12px 25px;
margin-top: 10px;
border-radius: 6px;
cursor: pointer;
}

.login-form button:hover {
background-color: #004d99;
}

/* Dashboard Layout */
.dashboard {
display: flex;
height: 100vh;
}

/* Sidebar */
.sidebar {
width: 240px;
background-color: #0d47a1;
color: white;
padding: 30px 20px;
}

.sidebar h2 {
font-size: 22px;
margin-bottom: 40px;
}

.sidebar nav button {
display: block;
width: 100%;
background: none;
border: none;
color: white;
font-size: 16px;
padding: 12px 0;
text-align: left;
cursor: pointer;
}

.sidebar nav button:hover {
background-color: #1565c0;
border-radius: 4px;
}

/* Main Content */
.main-content {
flex: 1;
padding: 30px 40px;
overflow-y: auto;
background-color: #f9f9f9;
}

.main-content h2 {
margin-bottom: 20px;
}

/* Card Grid */
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
margin-bottom: 30px;
}

.card {
background-color: #ffffff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
text-align: center;
font-weight: bold;
}

/* Assignment Button */
.create-button {
background-color: #009688;
color: white;
padding: 12px 20px;
border: none;
border-radius: 6px;
font-size: 14px;
margin-bottom: 20px;
cursor: pointer;
transition: background 0.3s;
}

.login-form button:hover {
background-color: #303f9f;
.create-button:hover {
background-color: #00796b;
}

/* Assignment Form */
.assignment-form {
background-color: #fff;
padding: 20px;
border-radius: 10px;
width: 100%;
max-width: 600px;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.assignment-form h3 {
margin-bottom: 20px;
}

.assignment-form select,
.assignment-form input {
width: 100%;
padding: 10px;
margin-bottom: 15px;
border-radius: 6px;
border: 1px solid #ccc;
}

.assignment-form button {
background-color: #4caf50;
color: white;
padding: 10px 18px;
border: none;
border-radius: 6px;
cursor: pointer;
}

.assignment-form button:hover {
background-color: #388e3c;
}
136 changes: 48 additions & 88 deletions guardian-admin-dashboard/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,92 +1,52 @@
import React, { useState } from 'react';
import './App.css';

function App() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [otp, setOtp] = useState('');
const [step, setStep] = useState('login'); // login → otp → dashboard
const [isAuthenticated, setIsAuthenticated] = useState(false);

const handleLogin = (e) => {
e.preventDefault();
// Simulate backend login credentials (admin only)
if (email === 'dominicdiona@gmail.com' && password === 'admin123') {
setStep('otp'); // Go to 2FA step
} else {
alert('Invalid credentials. Please contact backend for admin login.');
}
};


const handleOTPVerify = (e) => {
e.preventDefault();
// Simulated OTP check (normally generated backend)
if (otp === '123456') {
setIsAuthenticated(true);
} else {
alert('Invalid OTP');
}
};

if (isAuthenticated) {
return (
<div className="login-container">
<img
src="/logo_guardian.png"
alt="Guardian Logo"
style={{ width: '100px', marginBottom: '20px' }}
/>
<h2>Admin Dashboard</h2>
<p>Welcome, {email}</p>
{/* Add admin dashboard components here */}
</div>
);
}

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Login from "./Login";
import Dashboard from "./Dashboard";
import Patients from "./Patients";
import Staff from "./Staff";
import Assignments from "./Assignments";
import ProtectedRoute from "./ProtectedRoute";

const App = () => {
return (
<div className="login-container">
<img
src="/logo_guardian.png"
alt="Guardian Logo"
style={{ width: '100px', marginBottom: '20px' }}
/>
<h2>Guardian Admin Login</h2>

{step === 'login' && (
<form onSubmit={handleLogin} className="login-form">
<input
type="email"
placeholder="Admin Email"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
/>
<input
type="password"
placeholder="Password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
/>
<button type="submit">Login</button>
</form>
)}

{step === 'otp' && (
<form onSubmit={handleOTPVerify} className="login-form">
<input
type="text"
placeholder="Enter 2FA OTP"
value={otp}
onChange={(e) => setOtp(e.target.value)}
required
/>
<button type="submit">Verify OTP</button>
</form>
)}
</div>
<Router>
<Routes>
<Route path="/" element={<Login />} />
<Route
path="/dashboard"
element={
<ProtectedRoute>
<Dashboard />
</ProtectedRoute>
}
/>
<Route
path="/patients"
element={
<ProtectedRoute>
<Patients />
</ProtectedRoute>
}
/>
<Route
path="/staff"
element={
<ProtectedRoute>
<Staff />
</ProtectedRoute>
}
/>
<Route
path="/assignments"
element={
<ProtectedRoute>
<Assignments />
</ProtectedRoute>
}
/>
</Routes>
</Router>
);
}
};

export default App;
Loading