diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index f4eabd0..79937c4 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -24,6 +24,10 @@ import Protocols from "./pages/Policies/Protocols.tsx"; import Rules from "./pages/Policies/Rules.tsx"; import ChangePassword from "./pages/ChangePassword.tsx"; +import About from "./pages/LogOut/About.tsx"; +import Rule from "./pages/LogOut/Rule.tsx"; +import Protocol from "./pages/LogOut/Proto.tsx"; + import RequireAuth from "./components/RequireAuth.tsx"; import PersistLogin from "./components/PersistLogin.tsx"; @@ -47,6 +51,14 @@ const Main = () => { } /> + } /> + } /> + } /> + + } /> + } /> + } /> + } /> }> @@ -57,10 +69,8 @@ const Main = () => { {/* USER ROUTES */} }> } /> - } /> } /> - } /> - } /> + {/* ADMIN ROUTES */} diff --git a/frontend/src/components/AboutComp.tsx b/frontend/src/components/AboutComp.tsx new file mode 100644 index 0000000..be56769 --- /dev/null +++ b/frontend/src/components/AboutComp.tsx @@ -0,0 +1,101 @@ +const AboutComp = () => { + return ( +
+
+

About Us

+ +

+ Welcome to CodeGreen Gateway, the official parking management system + for our school. We strive to maintain an organized, secure,
+ and efficient parking environment on campus, ensuring that both + students and staff have access to safe parking spaces. +

+ +

+ Our Mission +

+ +

+ Our mission is to provide a streamlined, digital platform to manage + parking within the campus. By creating a comprehensive system for + tracking parking +
violations and organizing parking spaces, we aim to enhance + the overall campus experience and ensure safety and convenience for + all members of our community. +

+ +

+ What We Do +

+ +

+ At CodeGreen Gateway, we offer a secure and easy-to-use platform for + the administration to manage parking within the school campus. Our + system allows
administrators to track, report, and address + parking violations, ensuring that parking regulations are enforced + effectively. The website allows for: +

+ +
    +
  • + + Parking Violation Reporting : + + Administrators can input violators' details into the system via a + simple form. This includes details such as the vehicle's license +
    + plate number, the type of violation, and the action taken. This + helps maintain a record of all violations and ensures that + necessary actions are taken in a timely manner. +
    • + +
  • + + Violation Management : + + The system categorizes and organizes the data on parking + violations, making it easier +
    + to review, analyze, and address issues in a systematic manner. +
    • + +
  • + + Efficiency & Transparency : + + By moving the process of parking violation documentation online, + we enhance transparency +
    + and streamline the process, allowing for quick and accurate + record-keeping. +
    • +
+ +

+ Our Goals +

+

+ As our school grows, so does the need for a smarter way to manage + parking. With CodeGreen Gateway, we hope to: +

+
    +
  • Improve parking compliance and reduce violations
    • + +
  • Foster a safer parking environment for everyone on campus
    • + +
  • + Provide an easy-to-access system for parking violation + documentation +
    • + +
  • + Help maintain an organized, well-managed parking facility for + students, faculty, and staff +
    • +
+
+
+ ) +} + +export default AboutComp; \ No newline at end of file diff --git a/frontend/src/components/LandingPageHeader.tsx b/frontend/src/components/LandingPageHeader.tsx new file mode 100644 index 0000000..ee9fcf0 --- /dev/null +++ b/frontend/src/components/LandingPageHeader.tsx @@ -0,0 +1,220 @@ +import { useState, useRef, useEffect } from "react"; +import { Link, useNavigate } from "react-router-dom"; + +const LandingPageHeader = () => { + const navigate = useNavigate(); + const [isDropdownOpen, setDropdownOpen] = useState(false); + const [isDropdownOpenPolicies, setDropdownOpenPolicies] = useState(false); + const [isMobileMenuOpen, setMobileMenuOpen] = useState(false); + const [isWideScreen, setIsWideScreen] = useState(window.innerWidth >= 768); // Track if the screen is wide + + const dropdownRef = useRef(null); + const dropdownRefPolicies = useRef(null); + + useEffect(() => { + const handleResize = () => { + setIsWideScreen(window.innerWidth >= 768); + }; + + window.addEventListener("resize", handleResize); + + return () => { + window.removeEventListener("resize", handleResize); + }; + }, []); + + const handleProtocols = () => { + navigate("/outprotocols"); + }; + + const handleRules = () => { + navigate("/outrules"); + }; + + const toggleDropdown = () => { + setDropdownOpen((prevState) => !prevState); + }; + + const toggleDropdownPolicies = () => { + setDropdownOpenPolicies((prevState) => !prevState); + }; + + const toggleMobileMenu = () => { + setMobileMenuOpen((prev) => !prev); + }; + + const handleDefaultPage = () => { + navigate("/login"); + }; + + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if ( + dropdownRef.current && + !dropdownRef.current.contains(event.target as Node) + ) { + setDropdownOpen(false); + } + if ( + dropdownRefPolicies.current && + !dropdownRefPolicies.current.contains(event.target as Node) + ) { + setDropdownOpenPolicies(false); + } + }; + + document.addEventListener("mousedown", handleClickOutside); + + return () => { + document.removeEventListener("mousedown", handleClickOutside); + }; + }, []); + + return ( +
+
+
+ Logo +

+ CodeGreen Gateway +

+
+ + {isWideScreen ? ( + + ) : ( + + )} +
+ + {!isWideScreen && isMobileMenuOpen && ( + + )} +
+ ); +}; + +export default LandingPageHeader; diff --git a/frontend/src/components/ProtocolComp.tsx b/frontend/src/components/ProtocolComp.tsx new file mode 100644 index 0000000..04941a2 --- /dev/null +++ b/frontend/src/components/ProtocolComp.tsx @@ -0,0 +1,109 @@ +const ProtocolComp = () => { + + return( + +
+
+

+ CPU Traffic Protocol and Decorum +

+ +
+

+ 1. + All vehicle owner/drivers are required to open their windows for + visual inspection and identification when going in and out of the + CPU campus. +

+ +

+ 2. + The speed limit inside the campus is 15KPH. OVERTAKING is not + allowed. +

+ +

+ 3. + All vehicles/motorcycles must park properly at designated parking + areas. Illegal parking and Blocking of Driveway are not allowed. + Observe No Loading/Unloading signs on designated areas. +

+ +

+ 4. + Blowing horns, loud noise, and blaring sounds of all + vehicles/motorcycles are not allowed. +

+ +

+ 5. + All vehicles/motorcycles must follow all implementing traffic + routes and road signs on campus. +

+ +

+ 6. + The following are not allowed inside the campus: +
+

+ a. + Smoking belching vehicles. +

+ +

+ b. + Vehicles suspected of carrying bombs, dangerous chemicals or + contaminated by hazardous elements. +

+ +

+ c. + Vehicle suspected of being used by criminal elements or used + for Kidnap for Ransom (KFR). +

+ +

+ d. + Tricycles, pedicabs or tri-sikads and similar types of + transportation (except when the owner is issued a special + permit by the CPU Administration). +

+
+

+ +

+ 7. + Vehicles involved in accidents inside the campus will be held by + the CPU guards for inspection and upon verification from the + proper authorities. +

+ +

+ 8. + Any vehicle suspected or found bringing illegal drugs, fireams, + deadly weapons, alcoholic drinks, or prographic materials inside + the campus will be held by the CPU guards for inspection and + proper disposition of the CPU Administration and PNP or any + related Law Enforcement Agencies. +

+ +

+ 9. The CPU + Administration through the Campus Traffic, Security and Safety + Office has the discretion to allow or prevent any vehicle or + motorcycle entry to the CPU campus if it compromises the safety + and security of the University. +

+ +

+ 10. + All drivers should follow CPU administrative policies, especially + those concerning health and safety protocols. +

+
+
+
+ ) +} + +export default ProtocolComp; \ No newline at end of file diff --git a/frontend/src/components/ruleComp.tsx b/frontend/src/components/ruleComp.tsx new file mode 100644 index 0000000..f7782b8 --- /dev/null +++ b/frontend/src/components/ruleComp.tsx @@ -0,0 +1,74 @@ +const RulesComponents = () => { + + return ( +
+
+

+ Parking Rules and Regulations +

+ +
+

+ 1. + All vehicles/motorcycles are required to park properly at + designated parking areas. +

+ +

+ 2. + Avoid parking on roadsides and gutters on campus. +

+ +

+ 3. + Any damage caused by a vehicle/motorcycle to any CPU property + shall be properly assessed and the owner will be charged the + amount equivalent to its current cost. +

+ +

+ 4. + Vehicles/motorcycles with car passes are given priority in parking + areas while non-car pass vehicles are limited to only 3 hours on + parking inside the campus unless it is used for official purposes + and sanctioned by the University Administration. All + vehicles/motorcycles owners must follow 10:00 PM to 5:00 AM curfew + hours inside the campus. +

+ +

+ 5. A + vehicle/motorcycle who wants to park overnight inside the campus + must ask permission from CPU Administration. +

+ +

+ 6. + The CPU Administration is not liable for any loss or damage that + may happen to any vehicle/motorcycle while parked inside the + campus. +

+ +

+ 7. + The CPU Administration has the right to revoke parking privileges + to any vehicle/motorcycle as necessary to protect the University + in +
+ accordance with the University standing policies for security and + safety reasons. +

+ +

+ 8. + Parking inside the CPU Campus is only a privilege given by the + Administration and not a right given to any individual or group + regardless of his position or affiliation. +

+
+
+
+ ) +} + +export default RulesComponents; \ No newline at end of file diff --git a/frontend/src/pages/AboutPage.tsx b/frontend/src/pages/AboutPage.tsx index 08fd8c4..d214725 100644 --- a/frontend/src/pages/AboutPage.tsx +++ b/frontend/src/pages/AboutPage.tsx @@ -1,106 +1,17 @@ import Header from "../components/Header"; - +import AboutComp from "../components/AboutComp"; const AboutPage = () => { return (
-
+ +
-
-
-

About Us

- -

- Welcome to CodeGreen Gateway, the official parking management system - for our school. We strive to maintain an organized, secure,
- and efficient parking environment on campus, ensuring that both - students and staff have access to safe parking spaces. -

- -

- Our Mission -

- -

- Our mission is to provide a streamlined, digital platform to manage - parking within the campus. By creating a comprehensive system for - tracking parking -
violations and organizing parking spaces, we aim to enhance - the overall campus experience and ensure safety and convenience for - all members of our community. -

- -

- What We Do -

- -

- At CodeGreen Gateway, we offer a secure and easy-to-use platform for - the administration to manage parking within the school campus. Our - system allows
administrators to track, report, and address - parking violations, ensuring that parking regulations are enforced - effectively. The website allows for: -

-
    -
  • - - Parking Violation Reporting : - - Administrators can input violators' details into the system via a - simple form. This includes details such as the vehicle's license -
    - plate number, the type of violation, and the action taken. This - helps maintain a record of all violations and ensures that - necessary actions are taken in a timely manner. -
    • + -
  • - - Violation Management : - - The system categorizes and organizes the data on parking - violations, making it easier -
    - to review, analyze, and address issues in a systematic manner. -
    • - -
  • - - Efficiency & Transparency : - - By moving the process of parking violation documentation online, - we enhance transparency -
    - and streamline the process, allowing for quick and accurate - record-keeping. -
    • -
- -

- Our Goals -

-

- As our school grows, so does the need for a smarter way to manage - parking. With CodeGreen Gateway, we hope to: -

-
    -
  • Improve parking compliance and reduce violations
    • - -
  • Foster a safer parking environment for everyone on campus
    • - -
  • - Provide an easy-to-access system for parking violation - documentation -
    • - -
  • - Help maintain an organized, well-managed parking facility for - students, faculty, and staff -
    • -
-
-
); }; diff --git a/frontend/src/pages/LogOut/About.tsx b/frontend/src/pages/LogOut/About.tsx new file mode 100644 index 0000000..51c959d --- /dev/null +++ b/frontend/src/pages/LogOut/About.tsx @@ -0,0 +1,19 @@ +import AboutComp from "../../components/AboutComp"; +import LandingPageHeader from "../../components/LandingPageHeader"; +const About = () => { + return ( +
+ +
+ +
+ + + +
+ ); +}; + +export default About; diff --git a/frontend/src/pages/LogOut/Proto.tsx b/frontend/src/pages/LogOut/Proto.tsx new file mode 100644 index 0000000..e5042de --- /dev/null +++ b/frontend/src/pages/LogOut/Proto.tsx @@ -0,0 +1,17 @@ +import LandingPageHeader from "../../components/LandingPageHeader"; +import ProtocolComp from "../../components/ProtocolComp"; +const Protocol = () => { + return ( +
+ +
+ +
+ +
+ ); +}; + +export default Protocol; diff --git a/frontend/src/pages/LogOut/Rule.tsx b/frontend/src/pages/LogOut/Rule.tsx new file mode 100644 index 0000000..d51d2bf --- /dev/null +++ b/frontend/src/pages/LogOut/Rule.tsx @@ -0,0 +1,15 @@ +import LandingPageHeader from "../../components/LandingPageHeader"; +import RulesComponents from "../../components/ruleComp"; +const Rule = () => { + return ( +
+
+ +
+ + +
+ ); +}; + +export default Rule; diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx index 17fe761..c893ab7 100644 --- a/frontend/src/pages/LoginPage.tsx +++ b/frontend/src/pages/LoginPage.tsx @@ -2,7 +2,7 @@ import React, { useState } from "react"; import { useNavigate } from "react-router-dom"; import useLogin from "../hooks/useLogin"; import { Spinner } from "react-activity"; - +import LandingPageHeader from "../components/LandingPageHeader"; const LoginPage = () => { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); @@ -19,7 +19,14 @@ const LoginPage = () => { }; return ( -
+
+ +
+ +
+

diff --git a/frontend/src/pages/Policies/Protocols.tsx b/frontend/src/pages/Policies/Protocols.tsx index a91d82c..5d56093 100644 --- a/frontend/src/pages/Policies/Protocols.tsx +++ b/frontend/src/pages/Policies/Protocols.tsx @@ -1,112 +1,15 @@ import Header from "../../components/Header"; - +import ProtocolComp from "../../components/ProtocolComp"; const Protocols = () => { return (
-
-
-
-
-
-

- CPU Traffic Protocol and Decorum -

- -
-

- 1. - All vehicle owner/drivers are required to open their windows for - visual inspection and identification when going in and out of the - CPU campus. -

- -

- 2. - The speed limit inside the campus is 15KPH. OVERTAKING is not - allowed. -

- -

- 3. - All vehicles/motorcycles must park properly at designated parking - areas. Illegal parking and Blocking of Driveway are not allowed. - Observe No Loading/Unloading signs on designated areas. -

- -

- 4. - Blowing horns, loud noise, and blaring sounds of all - vehicles/motorcycles are not allowed. -

- -

- 5. - All vehicles/motorcycles must follow all implementing traffic - routes and road signs on campus. -

- -

- 6. - The following are not allowed inside the campus: -
-

- a. - Smoking belching vehicles. -

- -

- b. - Vehicles suspected of carrying bombs, dangerous chemicals or - contaminated by hazardous elements. -

- -

- c. - Vehicle suspected of being used by criminal elements or used - for Kidnap for Ransom (KFR). -

- -

- d. - Tricycles, pedicabs or tri-sikads and similar types of - transportation (except when the owner is issued a special - permit by the CPU Administration). -

-
-

- -

- 7. - Vehicles involved in accidents inside the campus will be held by - the CPU guards for inspection and upon verification from the - proper authorities. -

- -

- 8. - Any vehicle suspected or found bringing illegal drugs, fireams, - deadly weapons, alcoholic drinks, or prographic materials inside - the campus will be held by the CPU guards for inspection and - proper disposition of the CPU Administration and PNP or any - related Law Enforcement Agencies. -

- -

- 9. The CPU - Administration through the Campus Traffic, Security and Safety - Office has the discretion to allow or prevent any vehicle or - motorcycle entry to the CPU campus if it compromises the safety - and security of the University. -

-

- 10. - All drivers should follow CPU administrative policies, especially - those concerning health and safety protocols. -

-
-
+
+
+
); }; diff --git a/frontend/src/pages/Policies/Rules.tsx b/frontend/src/pages/Policies/Rules.tsx index 978f355..c0ac85d 100644 --- a/frontend/src/pages/Policies/Rules.tsx +++ b/frontend/src/pages/Policies/Rules.tsx @@ -1,78 +1,17 @@ import Header from "../../components/Header"; - +import RulesComponents from "../../components/ruleComp"; const Rules = () => { return (
-
+ +
-
-
-

- Parking Rules and Regulations -

- -
-

- 1. - All vehicles/motorcycles are required to park properly at - designated parking areas. -

- -

- 2. - Avoid parking on roadsides and gutters on campus. -

- -

- 3. - Any damage caused by a vehicle/motorcycle to any CPU property - shall be properly assessed and the owner will be charged the - amount equivalent to its current cost. -

-

- 4. - Vehicles/motorcycles with car passes are given priority in parking - areas while non-car pass vehicles are limited to only 3 hours on - parking inside the campus unless it is used for official purposes - and sanctioned by the University Administration. All - vehicles/motorcycles owners must follow 10:00 PM to 5:00 AM curfew - hours inside the campus. -

- -

- 5. A - vehicle/motorcycle who wants to park overnight inside the campus - must ask permission from CPU Administration. -

- -

- 6. - The CPU Administration is not liable for any loss or damage that - may happen to any vehicle/motorcycle while parked inside the - campus. -

- -

- 7. - The CPU Administration has the right to revoke parking privileges - to any vehicle/motorcycle as necessary to protect the University - in -
- accordance with the University standing policies for security and - safety reasons. -

- -

- 8. - Parking inside the CPU Campus is only a privilege given by the - Administration and not a right given to any individual or group - regardless of his position or affiliation. -

-
-
-
+ +
); }; diff --git a/frontend/src/pages/SignUpPage.tsx b/frontend/src/pages/SignUpPage.tsx index 0c1b6c6..82e3669 100644 --- a/frontend/src/pages/SignUpPage.tsx +++ b/frontend/src/pages/SignUpPage.tsx @@ -3,6 +3,7 @@ import { useNavigate } from "react-router-dom"; import { UserSignUp } from "../types/user.types"; import useSignUp from "../hooks/useSignUp"; import { Spinner } from "react-activity"; +import LandingPageHeader from "../components/LandingPageHeader"; const initialFormData = { last_name: "", @@ -36,7 +37,14 @@ const SignUpPage = () => { }; return ( -
+
+ +
+ +
+

Stay compliant.