Skip to content

Responsiveness on Admin Home Page #207

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
T-Rops merged 1 commit into from
Dec 21, 2024
Merged

Responsiveness on Admin Home Page #207

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
6 changes: 3 additions & 3 deletions frontend/src/components/AdminHeader.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,17 +89,17 @@ const AdminHeader = () => {
<span
onClick={handleViolators}
className="z-50 block px-4 py-2 hover:bg-buttongreen cursor-pointer hover:rounded-t-md">
Violator's List
Violators List
</span>
<span
onClick={handleDrivers}
className=" z-50 block px-4 py-2 hover:bg-buttongreen cursor-pointer">
Driver's List
Drivers List
</span>
<span
onClick={handleRegistrations}
className="z-50 block px-4 py-2 hover:bg-buttongreen cursor-pointer hover:rounded-b-md">
Registration's List
Registrations List
</span>
</div>
)}
Expand Down
3 changes: 2 additions & 1 deletion frontend/src/hooks/useLogin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,8 @@ const useLogin = () => {
// To either navigate to the previous page where they go logged off or the landing page
navigate(userInfo.isAdmin ? "/admin" : "/homepage");
} catch (error) {
alert(error);
const errorMessage = (error as Error).message;
toast.error(errorMessage);
} finally {
// stop the loadings
setAppLoading!(false);
Expand Down
65 changes: 42 additions & 23 deletions frontend/src/pages/AddViolationPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,17 @@ import { useNavigate } from "react-router-dom";
import AdminHeader from "../components/AdminHeader";
import { useState } from "react";
import { toast } from "react-toastify";
import useCheckLicenseNumber from "../hooks/car-hooks/useCheckLicenseNumber";
import useCheckLicenseNumber from "../hooks/car-hooks/useCheckLicenseNumber";
import { DriverWithVandC } from "../types/datatypes";
import AddViolationComponent from "../components/AddViolationComponent";

const AddViolation = () => {
const navigate = useNavigate();
const { checkLicenseNumber, loading } = useCheckLicenseNumber();
const { checkLicenseNumber, loading } = useCheckLicenseNumber();

const [currentStep, setCurrentStep] = useState(1);
const [licenseNumber, setLicenseNumber] = useState("");
const [driverProfile, setDriverProfile] = useState<DriverWithVandC>();
const [driverProfile, setDriverProfile] = useState<DriverWithVandC>();
const [violationModalActive, setViolationModalActive] = useState(false);

const handleCancelButton = () => {
Expand Down Expand Up @@ -47,14 +47,19 @@ const AddViolation = () => {
<div className="w-full max-w-lg px-6 py-5 bg-gray-400 rounded-md bg-clip-padding backdrop-filter backdrop-blur-sm bg-opacity-10">
<div className="text-left font-syke-light text-white">
<div className="text-textgreen">
<h1 className="text-2xl md:text-4xl font-syke-bold">Adding a Violation</h1>
<h1 className="text-2xl md:text-4xl font-syke-bold">
Adding a Violation
</h1>
<p>Find the driver by searching for the license number.</p>
</div>

<div className="mt-4">
<form className="space-y-5">
<div>
<label htmlFor="license_number" className="text-white font-syke-light text-lg">
<label
htmlFor="license_number"
className="text-white font-syke-light text-lg"
>
License Number
</label>
<input
Expand All @@ -77,21 +82,27 @@ const AddViolation = () => {
<div className="w-full max-w-xl px-6 py-5 bg-gray-400 rounded-md bg-clip-padding backdrop-filter backdrop-blur-sm bg-opacity-10">
<div className="text-left font-syke-light text-white">
<div className="text-textgreen">
<h1 className="text-2xl md:text-4xl font-syke-bold">Driver Found</h1>
<h1 className="text-2xl md:text-4xl font-syke-bold">
Driver Found
</h1>
<p>Driver details are shown below.</p>
</div>

<div className="mt-4">
<form className="space-y-4">
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
<div>
<h1 className="text-white font-syke-light text-xl">Last Name</h1>
<h1 className="text-white font-syke-light text-xl">
Last Name
</h1>
<h1 className="text-textgreen font-syke-medium text-lg md:text-3xl">
{driverProfile.last_name}
</h1>
</div>
<div>
<h1 className="text-white font-syke-light text-xl">First Name</h1>
<h1 className="text-white font-syke-light text-xl">
First Name
</h1>
<h1 className="text-textgreen font-syke-medium text-lg md:text-3xl">
{driverProfile.first_name}
</h1>
Expand All @@ -104,25 +115,33 @@ const AddViolation = () => {
</h1>
</div>
<div>
<h1 className="text-white font-syke-light text-xl">Date of Birth</h1>
<h1 className="text-white font-syke-light text-xl">
Date of Birth
</h1>
<h1 className="text-textgreen font-syke-medium text-lg md:text-3xl">
{driverProfile.date_of_birth}
</h1>
</div>
<div>
<h1 className="text-white font-syke-light text-xl">Driver Type</h1>
<h1 className="text-white font-syke-light text-xl">
Driver Type
</h1>
<h1 className="text-textgreen font-syke-medium text-lg md:text-3xl">
{driverProfile.driver_type}
</h1>
</div>
<div>
<h1 className="text-white font-syke-light text-xl">License Number</h1>
<h1 className="text-white font-syke-light text-xl">
License Number
</h1>
<h1 className="text-textgreen font-syke-medium text-lg md:text-3xl">
{driverProfile.license_number}
</h1>
</div>
<div>
<h1 className="text-white font-syke-light text-xl">License Expiration Date</h1>
<h1 className="text-white font-syke-light text-xl">
License Expiration Date
</h1>
<h1 className="text-textgreen font-syke-medium text-lg md:text-3xl">
{driverProfile.license_expiration_date}
</h1>
Expand Down Expand Up @@ -166,21 +185,21 @@ const AddViolation = () => {
<button
type="button"
className="w-32 bg-buttongreen font-syke-medium text-white py-2 hover:bg-[#33471a] font-syke-regular transition-colors rounded-sm"
onClick={() => setViolationModalActive(true)}>
onClick={() => setViolationModalActive(true)}
>
Add Violation
</button>
</div>
</div>
)}
{violationModalActive && (
<AddViolationComponent
driverId={driverProfile!.id!}
setViolationModalActive={setViolationModalActive}
/>
)}
</>
)}
{violationModalActive && (
<AddViolationComponent
driverId={driverProfile!.id!}
setViolationModalActive={setViolationModalActive}
/>
)}
</div>
</div>
);
};

export default AddViolation;

81 changes: 43 additions & 38 deletions frontend/src/pages/AdminHomePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,50 +21,55 @@ const AdminLandingPage = () => {
};

return (
<div className="flex flex-col items-center bg-adminlanding-bg bg-cover bg-center sm:bg-cover md:bg-contain lg:bg-cover h-screen">
<div className="flex flex-col items-center bg-adminlanding-bg bg-cover bg-center sm:bg-cover md:bg-contain lg:bg-cover h-full">
<div>
<AdminHeader />
</div>

<div className="flex space-x-2 p-5">
<h1 className="text-3xl text-textgreen font-syke-bold">Welcome,</h1>
<h1 className="text-3xl text-white font-syke-bold">
{user?.user.first_name}
</h1>
</div>
<div className="flex flex-col items-center justify-center h-full p-6">
<div className="flex space-x-2 p-5">
<h1 className="text-3xl text-textgreen font-syke-bold">Welcome,</h1>
<h1 className="text-3xl text-white font-syke-bold">
{user?.user.first_name}
</h1>
</div>

<div className="text-xl md:text-md sm-text-sm text-white font-syke-light text-center m-2 w-[3/12]">
Your dashboard to monitor, manage, and maintain order within the university premises is ready.
<p>Let's create a safer and more organized school environment together. </p>
</div>
<div className="text-xl md:text-md sm-text-sm text-white font-syke-light text-center m-2 w-[3/12]">
Your dashboard to monitor, manage, and maintain order within the
university premises is ready.
<p>
Let's create a safer and more organized school environment together.{" "}
</p>
</div>

<div className="font-syke-medium items-center text-3xl mt-10">
<button
className="transition-transform w-full max-w-md h-12 duration-300 hover:scale-105 text-white px-5 py-4 rounded-lg bg-buttongreen active:bg-colorhover font-syke-medium"
onClick={handleEncodeButton}
>
Encode
</button>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 font-syke-medium text-3xl gap-5 mt-6 w-full max-w-4xl">
<button
className="transition-transform duration-300 hover:scale-105 text-white px-5 py-4 rounded-md bg-buttongreen active:bg-colorhover font-syke-medium"
onClick={handleAddDriverButton}
>
View Drivers
</button>
<button
className="transition-transform duration-300 hover:scale-105 text-white px-5 py-4 rounded-md bg-buttongreen active:bg-colorhover font-syke-medium"
onClick={handleAddViolationButton}
>
View Violators
</button>
<button
className="transition-transform duration-300 hover:scale-105 text-white px-5 py-4 rounded-md bg-buttongreen active:bg-colorhover font-syke-medium"
onClick={handleRegistrationList}
>
View Registration List
</button>
<div className="font-syke-medium items-center lg:text-3xl md:text-2xl text-xl md:w-1/3 w-1/2 mb-4">
<button
className="transition-transform w-full h-full duration-300 hover:scale-105 text-white px-5 py-4 rounded-lg bg-buttongreen active:bg-colorhover font-syke-medium"
onClick={handleEncodeButton}
>
Encode
</button>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 font-syke-medium lg:text-3xl md:text-2xl text-xl gap-5 w-full max-w-4xl">
<button
className="transition-transform duration-300 hover:scale-105 text-white px-5 py-4 rounded-md bg-buttongreen active:bg-colorhover font-syke-medium"
onClick={handleAddDriverButton}
>
View Drivers
</button>
<button
className="transition-transform duration-300 hover:scale-105 text-white px-5 py-4 rounded-md bg-buttongreen active:bg-colorhover font-syke-medium"
onClick={handleAddViolationButton}
>
View Violators
</button>
<button
className="transition-transform duration-300 hover:scale-105 text-white px-5 py-4 rounded-md bg-buttongreen active:bg-colorhover font-syke-medium"
onClick={handleRegistrationList}
>
View Registration List
</button>
</div>
</div>
</div>
);
Expand Down
Loading