0% found this document useful (0 votes)

12 views125 pages

Online Credential Request System

The researchers developed a web-based credentials request system for Barangay Esperanza to allow online credential requests. Users tested the system and were satisfied with its performance in replacing the manual request process. The researchers recommend improving security and privacy, expanding credential types offered over time, and hiring IT experts for ongoing maintenance to maximize the system's benefits long-term.

Uploaded by

Eugene San Lorenzo

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

12 views125 pages

Online Credential Request System

Uploaded by

Eugene San Lorenzo

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

Chapter V

Conclusions and Recommendations

Summary

The Web-Based Credentials Request System is a web application designed to

facilitate online requests for credentials. It aims to meet the needs of the modern era by
providing instant feedback and allowing users to manage their time efficiently. The
project aims to develop an online request system for credential transactions in
Barangay Esperanza, Koronadal City, in order to reduce the burden of waiting in line for
transactions to be completed. By allowing users to request credentials online, it
eliminates the need for physical attendance, and users only need to show up to obtain
the finished credentials they have requested.
Conclusion

The researchers have finished gathering all the data needed. We came to the
conclusion that the respondents are satisfied with the overall performance of the
system. The researchers compared the existing manual process of releasing credentials
to the new system that will be implemented in Barangay Esperanza. It is found that the
system achieves its purpose to be the medium of requesting credentials made online.
The system allows for more efficient and convenient access to credentials, as users are
no longer required to engage in time-consuming manual processes or wait in line for
their results. Additionally, the system also addresses potential emergencies as users
only need to come to the barangay to obtain their finished credentials.

Recommendation

The researchers acknowledge that there is always room for improvement in the
system they have developed. As a newly built website, it is natural for users to have
doubts about its security and privacy. To address this, the researchers suggest bringing
in IT experts to improve the system's security and privacy features. This will not only
increase the trust of users but also protect the system from potential security breaches.

At present, the barangay has restrictions on the types of credentials that can be
requested through the online system. However, if the system can establish a strong
reputation for reliability and credibility, it is feasible to expand the types of credentials
offered, in order to optimize the overall functionality of the web application.

Additional features, such as tutorials, can be included for elderly users who may
have difficulty navigating the newly developed web app, particularly if it is their first time
using it.

Hiring IT experts to maintain the system’s performance is highly recommended to

prolong its purpose. This would benefit the users of the web application for a long period
of time.
For the time being the email account of barangay Esperanza will be standing as
server for the web-based credentials request system. It will receive the request and of
clients inquiries for credential request. It is possible to make a stand alone server for the
web application.

References

Gupta, A. (2023, January 4). A Guide to Service Request Management.

Motadata. [Link]

Gabilla, J. R., Calpito, G. V., Perez, R. N. & Ferrera, F. C.. (2015). IHELP: AN
INTRANET-BASED JOB REQUEST SERVICE FOR ITS TECHNICAL UNIT OF
MANAGEMENT INFORMATION SYSTEMS DEPARTMENT OF COLEGIO DE SAN
JUAN DE LETRAN CALAMBA. Ani: Letran Calamba Research Report, 2(1). Retrieved
from [Link]

Basney, J., Humphrey, M., & Welch, V. (2005). The MyProxy online credential
repository. Software: Practice and Experience, 35(9), 801–
816. [Link]

Abarcar, V. . F. H. (2011). Purchase Request Service System of the Finance Office of

Colegio de San Juan de Letran Calamba. [Link]
Appendices

Appendix A – Source Codes

import React from 'react'

import { useState } from 'react'
import dayjs from 'dayjs'
import { useNavigate } from 'react-router'
import { generateDate, months } from '../constants/Calendar'
import cn from '../constants/CN'

// Main Function
const Activity = () => {

let navigate = useNavigate()

const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]

const currentDate = dayjs()

const [today, setToday] = useState(currentDate)

return (
<div className="relative w-full">

<div className="md:mt-0 mt-6 sm:ml-20 sm:mr-20 lg:ml-10 lg:mr-10 mr-

10 ml-10 flex flex-col sm:gap-0 gap-6 relative xl:items-start items-
end">

<a className="sm:text-white text-fontColor sm:text-2xl text-xl font-

poppins
transition-all duration-3000 cursor-pointer
hover:text-fontColor ease-in-out"
onClick={() => (navigate('/activity'))}>
Activities
</a>

<div className="bg-gray-700 bg-opacity-25 flex flex-col h-[305px]

sm:w-[550px] lg:w-[400px] xl:w-[600px] w-full sm:mt-8 rounded-2xl">

<div className="relative sm:mt-6 mt-8 flex items-start w-full">

<h1 className="text-white sm:text-xl font-poppins hover:scale-

110 ml-6
hover:text-fontColor transition-all
duration-300
ease-linear">
{months[[Link]()]}, {[Link]()}
</h1>

<div className="absolute right-6 flex flex-row gap-3">

<button className="text-white sm:text-xl font-poppins

sm:hover:scale-150
transition-all duration-300 ease-in-
out"
onClick={() => {setToday([Link]([Link]()
- 1))}}>
<
</button>

<button className="flex text-fontColor font-poppins

sm:text-xl
sm:hover:bg-slate-700 rounded-lg
transition-all ease-in-out duration-300"
onClick={() => {setToday(currentDate)}}>
Today
</button>

<button className="text-white sm:text-xl font-poppins

sm:hover:scale-150
transition-all duration-300 ease-in-
out"
onClick={() => {setToday([Link]([Link]()
+ 1))}}>
>
</button>

</div>

</div> <button></button>

<div className="relative flex flex-col mt-3 m-5 gap-2">

<div className="w-full grid grid-cols-7">

{[Link]((day, index) => {

return <h1 className="flex justify-center font-poppins
text-fontColor sm:text-lg"
key={index}>
{day}
</h1>
})}
</div>

<div className="w-full grid grid-cols-7 calendar-num-style gap-

1">

{generateDate([Link](), [Link]()).map(({ date,

currentMonth, today }, index) => {

return (

<div className="flex justify-center border-t-2 border-t-

primary calendar-hover-glow"
key={index}>

<h1 className={cn(currentMonth ? "" : "text-

gray-600",
today ? "calendar-num-style-
today" : "")}>

{[Link]()}

</h1>

</div>
)
})}
</div>
</div>

</div>
</div>

</div>
)
}

export default Activity

import React from 'react'

const History = () => {

return (
<div className="">

<div className="relative flex flex-col sm:items-center gap-10 sm:ml-24

sm:mt-16 mb-16 items-end">

<div className="h-24 w-72 flex items-center flex-row-reverse group">

<div className="relative h-[85px] w-[270px] left-[-20px]

rounded-xl
bg-slate-700 bg-opacity-25 z-0 flex items-center
group-hover:bg-slate-700 transition-all
duration-300 ease-in-out">

<h1 className="text-xl ml-10 text-white

font-poppins group-hover:text-
fontColor
group-hover:scale-125 transition-
all
duration-300 ease-in-out">
Follow us..!
</h1>

</div>
<div className="h-[85px] w-[130px] z-0 rounded-full bg-primary
flex items-center">

<svg xmlns="[Link] width="24"

height="24" viewBox="0 0 24 24"
className="absolute w-full h-full stroke-
fontColor scale-90 fill-fontColor
hover:fill-white hover:stroke-white
hover:bg-instagram hover:scale-110
transition-all duration-300 ease-in-
out">
<path d="M12 2.163c3.204 0 3.584.012 4.85.07
3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012
3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-
3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-
1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919
1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-
6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072
4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0
3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-
4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-
1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162
6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-
4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796
0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-
1.44-1.439-1.44z"/>
</svg>
</a>
</div>

</div>

<div className="h-24 w-72 flex items-center flex-row-reverse group">

<div className="relative h-[85px] w-[270px] left-[-20px]

rounded-xl
bg-slate-700 bg-opacity-25 z-10 flex items-
center
group-hover:bg-slate-700 transition-all
duration-300 ease-in-out">

<h1 className="text-xl ml-10 text-white

font-poppins group-hover:text-
fontColor
group-hover:scale-125
transition-all
duration-300 ease-in-out">
Find us..!
</h1>

</div>

<div className="h-[85px] w-[130px] z-30 rounded-full bg-

primary flex items-center">

<svg xmlns="[Link] width="24"

height="24" viewBox="0 0 24 24"
className="absolute w-full h-full stroke-
fontColor scale-105 fill-primary
hover:fill-blue-700 hover:stroke-white
hover:scale-125
transition-all duration-300 ease-in-
out">
<path d="M22.675 0h-21.35c-.732 0-1.325.593-
1.325 1.325v21.351c0 .731.593 1.324 1.325 1.324h11.495v-9.294h-3.128v-
3.622h3.128v-2.671c0-3.1 1.893-4.788 4.659-4.788 1.325 0 2.463.099
2.795.143v3.24l-1.918.001c-1.504 0-1.795.715-1.795 1.763v2.313h3.587l-.467
3.622h-3.12v9.293h6.116c.73 0 1.323-.593 1.323-1.325v-21.35c0-.732-.593-1.325-
1.325-1.325z"/>
</svg>
</a>
</div>
</div>

<div className="h-24 w-72 flex items-center flex-row-reverse group">

<div className="relative h-[85px] w-[270px] left-[-20px]

rounded-xl
bg-slate-700 bg-opacity-25 z-10 flex items-center
group-hover:bg-slate-700 transition-all
duration-300 ease-in-out">

<h1 className="text-xl ml-10 text-white

font-poppins group-hover:text-
fontColor
group-hover:scale-125 transition-
all
duration-300 ease-in-out">
Follow us..!
</h1>

</div>

<div className="h-[85px] w-[130px] z-30 rounded-full bg-primary

flex items-center">

</div>

</div>

</div>
)
}

export default History

import React from 'react'

import { LandingNavbar, LandingWelcomePage } from '../components'
import { useEffect, useState } from 'react'
import { getFirestore, getDoc, doc } from 'firebase/firestore'

const LandingActivities = () => {

const db = getFirestore()
const [activities, setActivities] = useState()

const docRef = doc(db, 'activities', 'activity')

useEffect(() => {

getDoc(docRef).then(function(doc) {
if ([Link]) {

const activities = [Link]().barangay_activities

setActivities(activities)

} else {
// [Link]() will be undefined in this case

}
}).catch(function(error) {
[Link]("Error getting document:", error);
});
},[])

return (

<aside className="md:flex hidden h-screen sticky top-0">

<aside className="md:hidden flex sticky top-0 z-10 bg-primary">

<h1 className="text-fontColor sm:text-4xl text-xl font-poppins

sm:font-semibold
transition-all duration-300 cursor-
pointer xs:text-center xs:m-0 ml-10
hover:text-slate-300 ease-in-out">
Barangay Halloween Activity
</h1>
</div>

<ul className="relative lg:m-20 grid lg:grid-cols-2 sm:gid-rows-6

xl:grid-cols-3
xl:grid-rows-4 md:gap-14 gap-4 justify-center">

{activities ?.map((act, index) => (

<div className="flex relative rounded-lg

h-[150px]
overflow-hidden w-
[150px] ml-3">

<div className="relative sm:h-

[200px] sm:w-[200px] h-[150px] w-[150px] bg-navbar flex justify-center text-
center flex-col">

<div className="absolute h-5 w-5

rounded-full bg-slate-700 bg-opacity-25 top-3 left-3"></div>
<div className="absolute h-5 w-5
rounded-full bg-slate-700 bg-opacity-25 top-3 right-3"></div>

</div>

<div className="relative flex flex-col

ml-2 h-40 sm:w-56 w-32 items-center justify-center">

<div className="relative flex flex-row

gap-2 items-center">

<h1 className="font-poppins text-

fontColor text-xl">
{[Link]}
</h1>
<h1 className="font-poppins text-
white text-normal">
{"("}{[Link]}{")"}
</h1>
</div>
<p className="text-white font-poppins
top-2 text-center">
{[Link]}
</p>
</div>

</div>

</li>
))}

</ul>

</div>

</div>
)
}

export default LandingActivities

import React, { useState } from 'react'

import { useNavigate } from 'react-router';
import { logo } from '../assets'

const LandingNavbar = () => {

const [hover, setHover] = useState(false)
const [hover_Act, setAct] = useState(false)
const [hover_Tour, setTour] = useState(false)

let navigate = useNavigate()

return (

<div className="relative hidden h-screen w-[250px] md:flex flex-col

gap-10
items-center bg-navbar">

</div>

<div className="flex mt-16">

<div className="flex flex-col gap-12">

<svg xmlns="[Link] fill="none"

viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
className={`${hover ? 'hover-text' : 'navbar-icon'}
relative top-[-10px]`}>
<path stroke-linecap="round" stroke-linejoin="round"
d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5
9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-
1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-
1.125V9.75M8.25 21h8.25" />
</svg>

<svg xmlns="[Link] fill="none"

viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
className={`${hover_Act ? 'hover-text' : 'navbar-
icon'} relative top-[-10px]`}>
<path stroke-linecap="round" stroke-linejoin="round"
d="M11.35 3.836c-.065.21-.1.433-.1.664 0 .[Link].75h4.5a.75.75 0 00.75-.75
2.25 2.25 0 00-.1-.664m-5.8 0A2.251 2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15
1.586m-5.8 0c-.376.023-.75.05-1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-
4.414c.[Link] 1.124.08 1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0
0118 18.75h-2.25m-7.5-10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504
1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0
1.125.504 1.125 1.125v9.375m-8.25-3l1.5 1.5 3-3.75" />
</svg>

<svg xmlns="[Link] fill="none"

viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
className={`${hover_Tour ? 'hover-text' : 'navbar-
icon'} relative top-[-10px]`}>
<path stroke-linecap="round" stroke-linejoin="round"
d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27
20.876L5.999 12zm0 0h7.5" />
</svg>

</div>

<li className="navbar-text">
<a onClick={() => navigate("/")}
onPointerEnter={() => setHover (true)}
onPointerLeave={() => setHover (false)}
>Home</ a>
</li>

<li className="navbar-text">
<a onClick={() => navigate("/landingactivities")}
onPointerEnter={() => setAct (true)}
onPointerLeave={() => setAct (false)}
>Activities</a>
</li>

<li className="navbar-text">
<a onClick={() => navigate("/landingtour")}
onPointerEnter={() => setTour (true)}
onPointerLeave={() => setTour (false)}
>Tour</a>
</li>

</ul>

</div>

)
}
export default LandingNavbar
import React from 'react'
import { tour1, tour2, tour3, tour } from '../assets'
import { LandingNavbar, LandingWelcomePage } from '../components'

const LandingTour = () => {

return (

<div className="relative flex md:flex-row flex-col w-full bg-primary">

<aside className="md:flex hidden h-screen sticky top-0">

<aside className="md:hidden flex sticky top-0 z-10 bg-primary">

<div className="flex flex-col w-full md:mt-20 gap-10">

<h1 className="text-fontColor sm:text-4xl text-xl font-

poppins sm:font-semibold
transition-all duration-300
cursor-pointer xs:text-center xs:m-0 ml-10
hover:text-slate-300 ease-in-out">
Barangay Halloween Activity
</h1>
</div>

<div className="relative md:mt-20 grid lg:grid-cols-2

lg:grid-rows-2 gap-14 cursor-pointer xl:ml-28 justify-center lg:m-10">

<div className="relative sm:h-[300px] sm:w-[500px] w-80

h-48 bg-slate-700 gap-2
bg-opacity-25 rounded-xl flex flex-row
items-center">

<div className="h-44 w-40 sm:w-[250px] sm:h-

[285px] overflow-hidden
rounded-xl m-2 shrink-0">
<img src={tour1}
className="flex w-full h-full
hover:scale-125
transition-all duration-500 ease-in-
out
cursor-pointer"/>
</div>

<div className="relative flex flex-col text-

center gap-1 sm:m-1">

<h1 className="font-poppins text-fontColor

sm:text-2xl">
Place Name
</h1>

<p className="text-white font-poppins">

Place discription, overview and history.
</p>

</div>

<div className="relative sm:h-[300px] sm:w-[500px] w-80

h-48 bg-slate-700 gap-2
bg-opacity-25 rounded-xl flex flex-row
items-center">

<div className="h-44 w-40 sm:w-[250px] sm:h-

[285px] overflow-hidden
rounded-xl m-2 shrink-0">

<div className="relative flex flex-col text-

center gap-1 sm:m-1">
<h1 className="font-poppins text-fontColor
sm:text-2xl">
Place Name
</h1>

<p className="text-white font-poppins">

Place discription, overview and history.
</p>

</div>

<div className="relative sm:h-[300px] sm:w-[500px] w-80

h-48 bg-slate-700 gap-2
bg-opacity-25 rounded-xl flex flex-row
items-center">

<div className="h-44 w-40 sm:w-[250px] sm:h-

[285px] overflow-hidden
rounded-xl m-2 shrink-0">

<div className="relative flex flex-col text-

center gap-1 sm:m-1">

<h1 className="font-poppins text-fontColor

sm:text-2xl">
Place Name
</h1>

<p className="text-white font-poppins">

Place discription, overview and history.
</p>

</div>

</div>
<div className="relative sm:h-[300px] sm:w-[500px] w-80
h-48 bg-slate-700 gap-2
bg-opacity-25 rounded-xl flex flex-row
items-center">

<div className="h-44 w-40 sm:w-[250px] sm:h-

[285px] overflow-hidden
rounded-xl m-2 shrink-0">

<div className="relative flex flex-col text-

center gap-1 sm:m-1">

<h1 className="font-poppins text-fontColor

sm:text-2xl">
Place Name
</h1>

<p className="text-white font-poppins">

Place discription, overview and history.
</p>

</div>

</div>
)
}

export default LandingTour

import React, { useRef, useState } from 'react'
import { useAuth } from '../context/AuthContext'
import { useNavigate } from 'react-router'

const LandingWelcomePage = () => {

const [toggle, setToggle] = useState()

const { resetPassword } = useAuth()
const emailRef = useRef()
const { login } = useAuth()
const emailResetRef = useRef()
const passRef = useRef()
const [error, setError] = useState('')
const [resetError, setResetError] = useState()
const [laoding, setLoading] = useState(false)
const [resetLaoding, setResetLoading] = useState(false)
const [resetTab, setResetTab] = useState()
const [message, setMessage] = useState()

const [navbar, setNavbar] = useState(false)

let navigate = useNavigate()

async function handleSubmit(e) {

[Link]()

try {
setLoading(true)
setError("")
await login([Link], [Link])
navigate("/home")
}
catch{
setError('Failed to sign in')
}

setLoading(false)
}

async function handleResetSubmit(e) {

[Link]()

try {
setMessage("")
setResetLoading(true)
setError("")
await resetPassword([Link])
setMessage("Check your email to complete this proccess")
}
catch(err){
setResetError('Failed to Reset')
[Link](err)
}

setResetLoading(false)
}

return (

<div className="relative w-full">

{/*
<div className={`${toggleLogin ? 'absolute' : 'hidden'} z-50 w-screen
h-screen bg-primary bg-opacity-90 cursor-pointer`}>

<div className="absolute flex right-2 top-2 text-fontColor

font-poppins w-10 h-10 bg-slate-700 justify-center items-center
text-2xl rounded-full"
onClick={() => setToggleLogin(false)}>
X
</div>

<div className="w-screen h-screen flex justify-center">

<path stroke-linecap="round" stroke-

linejoin="round" d="M19 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 11-
6.75 0 3.375 3.375 0 016.75 0zM4 19.235v-.11a6.375 6.375 0 0112.75 0v.109A12.318
12.318 0 0110.374 21c-2.331 0-4.512-.645-6.374-1.766z" />
</svg>

</div>
</div> */}

<ul className={`${navbar ? 'flex' : 'hidden'} flex-col items-center

justify-center gap-3 font-poppins absolute z-40 w-[150px] h-[200px] bg-navbar
text-white md:top-12 sm:top-28 top-20 sm:right-20
right-10 rounded-2xl border-fontColor border-2 sidebar bg-opacity-9 cursor-
pointer`}>

<a onClick={() => navigate('/')}>Home</a>

<a onClick={() =>
navigate('/landingactivities')}>Activities</a>
<a onClick={() => navigate('/landingtour')}>Tour</a>
<a onClick={() => setToggle(true)}>Login</a>

</ul>

<div className={`${resetTab ? 'toggleOn' : 'toggleOff'} absolute z-

[60] sm:w-[400px] sm:h-[500px] w-72 h-96 bg-navbar
text-primary sm:top-14 sm:right-20 right-10 top-10
rounded-3xl border-fontColor border-2 sidebar`}>

<div className="z-20 md:hidden absolute flex right-2 top-2

text-fontColor font-poppins w-10 h-10 bg-slate-900 justify-center items-center
text-2xl rounded-full border-
slate-700 border-2 cursor-pointer"
onClick={() => setResetTab(false)}>
X
</div>

<div className="flex w-full relative flex-col gap-10 items-

center sm:m-10">

<div className="font-poppins text-fontColor flex

flex-col relative top-10 gap-2">

<label>
Enter your email here:
</label>

</div>

<div className={`${resetError ? "flex" :

"hidden"} font-poppins absolute bottom-16 bg-primary rounded-lg border-2
border-fontColor
flex flex-row items-center`}>

<svg xmlns="[Link]
fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
className="w-8 h-8 stroke-red-600">
<path stroke-linecap="round" stroke-
linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9
3.75h.008v.008H12v-.008z" />
</svg>

<h1 className="text-red-600">
{resetError}
</h1>
</div>

<div className={`${message ? "flex" : "hidden"}

font-poppins absolute sm:bottom-12 bottom-8 bg-primary rounded-lg border-2
border-fontColor
flex flex-col items-center text-center sm:w-full w-48`}>
<svg xmlns="[Link]
fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
className="w-8 h-8 stroke-fontColor">
<path stroke-linecap="round" stroke-
linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-
2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5
0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25
2.25 0 01-1.07-1.916V6.75" />
</svg>

<h1 className="text-white">
{message}
</h1>
</div>

<div className="w-full flex flex-row justify-

center gap-10 relative mt-10">

<button className="font-poppins text-white

font-semibold rounded-xl
text-lg hover:font-
semibold bg-slate-700 w-20 h-8
transition-all duration-
300 ease-in-out"
onClick={() =>
{setResetTab(false)}}>
Go back
</button>

<button onClick={handleResetSubmit}
disabled= {resetLaoding}
className="font-poppins text-white
font-semibold rounded-xl
text-lg hover:font-
semibold bg-fontColor w-20 h-8
transition-all duration-
300 ease-in-out">
Confirm
</button>

</div>

<div className="absolute bottom-3 left-3 flex

flex-row gap-2">

<h1 className="text-sm font-poppins text-

fontColor ">
Don't have an account?
</h1>
<h1 className="text-sm font-poppins text-white
hover:scale-110 hover:-translate-y-1
transition-all duration-300
ease-in-out cursor-pointer"
onClick={() => navigate('/landingsignup')}>
Click here!
</h1>
</div>
</div>

</div>

<div className={`${toggle ? 'flex' : 'hidden'} z-50 absolute md:w-

[400px] md:h-[500px] w-72 h-96 bg-navbar bg-opacity-95
text-primary sm:top-14 sm:right-20 right-10 top-10
rounded-3xl border-slate-700 border-2 sidebar`}>

<div className="z-20 md:hidden absolute flex right-2

top-2 text-fontColor font-poppins w-10 h-10 bg-slate-900 justify-center items-
center
text-2xl rounded-full border-
slate-700 border-2"
onClick={() => setToggle(false)}>
X
</div>

<div className="z-10 flex md:gap-8 w-full relative

flex-col items-center">

<path stroke-linecap="round" stroke-

<div className="shrink-0 flex md:gap-14 gap-

10 flex-col text-center">

<label>
Email
</label>

</div>

<div className="sign-up-text mt-1">

<label>
Password
</label>

</div>

</div>

<div className="flex gap-11 flex-col">

</div>

<div className={`${error ? "flex" : "hidden"}

font-poppins relative md:top-8 top-16 m-4 bg-primary rounded-lg border-2
border-fontColor flex
flex-row items-center`}>

<svg xmlns="[Link]
fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
className="w-8 h-8 stroke-red-600">
<path stroke-linecap="round" stroke-
linejoin="round" d="M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9
3.75h.008v.008H12v-.008z" />
</svg>
<h1 className="text-red-600">
{error}
</h1>

</div>

<div className={`${error ? "relative mt-16" :

"absolute bottom-32"} bg-fontColor md:w-28 md:h-9 w-20 flex items-center
justify-center rounded-2xl
hover:scale-110
transition-all duration-300
ease-in-out`}>

<button onClick={handleSubmit}
disabled= {laoding}
className="font-poppins text-white
font-semibold
md:text-lg text-sm
hover:font-semibold
transition-all duration-
300 ease-in-out">
Confirm
</button>

</div>

<div className={`${error ? "flex" : "hidden"}`}>

<span className="text-white">Forgot
password?</span>
<h1 className="text-fontColor cursor-pointer
hover:scale-110 hover:-translate-y-1
transition-all duration-
300 ease-in-out"
onClick={() =>
{setResetTab(true)}}>Click here!</h1>
<span className="text-white">to
reset.</span>

</div>

</div>

<div className="absolute bottom-3 left-3 flex

flex-row gap-2">

<h1 className="md:text-base text-xs font-

poppins text-fontColor ">
Don't have an account?
</h1>
<a className="md:text-base text-xs font-
poppins text-white hover:scale-110 hover:-translate-y-1
transition-all duration-300
ease-in-out cursor-pointer"
onClick={() => navigate('/landingsignup')}>
Click here!
</a>
</div>
</div>

</div>

<div className="relative md:m-10 xs:m-20 m-10 z-0">

<div className="relative flex flex-col">

<div className="w-60 sm:w-full">

<h1 className="sm:text-white text-fontColor sm:text-4xl
text-3xl font-poppins font-semibold
transition-all duration-500 hover:bg-gray-
700
rounded-lg cursor-none hover:scale-x-110
hover:text-fontColor ease-in-out"
onClick={() => navigate('/')}

>Welcome to Esperanza
</h1>
</div>

<div>
<h2 className="text-white text-lg font-poppins
transition-all duration-300 hover:bg-gray-
700
rounded-lg cursor-none hover:scale-x-110
hover:text-fontColor ease-in-out"
>Enjoy every moment spent here
</h2>
</div>

</div>

<div className="absolute md:flex hidden right-0 gap-6 items-

center">

<h1 className={`${toggle ? 'hover-text-landing' : 'normal-

text-landing'} cursor-pointer`}
onClick={() => setToggle((prev) => !prev)}
>Login here!
</h1>

<svg xmlns="[Link] fill="none"

viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
className={`${toggle ? 'hover-icon-landing' : 'normal-
icon-landing'} flex items-center cursor-pointer`}
onClick={() => setToggle((prev) => !prev)}>

<path stroke-linecap="round" stroke-linejoin="round"

d="M19 7.5v3m0 0v3m0-3h3m-3 0h-3m-2.25-4.125a3.375 3.375 0 11-6.75 0 3.375 3.375
0 016.75 0zM4 19.235v-.11a6.375 6.375 0 0112.75 0v.109A12.318 12.318 0 0110.374
21c-2.331 0-4.512-.645-6.374-1.766z" />
</svg>

</div>

<div className="md:hidden flex h-auto absolute right-0">

<svg xmlns="[Link] fill="none"

viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
className={`${navbar ? 'flex' : 'hidden'} w-10 h-10
stroke-fontColor cursor-pointer`}
onClick={() => setNavbar((prev) => !prev)}>
<path stroke-linecap="round" stroke-linejoin="round"
d="M3.75 9h16.5m-16.5 6.75h16.5" />
</svg>

</div>

</div>
)
}

export default LandingWelcomePage

import React, { useState } from 'react'

import { useNavigate } from 'react-router';
import { logo } from '../assets'
import { useAuth } from '../context/AuthContext';

const Navbar = () => {

const [hover, setHover] = useState(false);
const [hover_Req, setReq] = useState(false);
const [hover_Act, setAct] = useState(false);
const [hover_Tour, setTour] = useState(false);
const [hover_Log, setLog] = useState(false);
const { logout } = useAuth()
const [error, setError] = useState()
let navigate = useNavigate()

async function handleLogOut() {

setError('')

try {
await logout()
navigate("/")
}catch {
}
}

return (

<div className="relative hidden h-screen w-[250px] md:flex flex-col

gap-10
items-center bg-navbar">

</div>

<div className="flex mt-16">

<div className="flex flex-col gap-12">

<svg xmlns="[Link] fill="none"

viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
className={`${hover_Req ? 'hover-text' : 'navbar-
icon'} relative top-[-10px]`}>
<path stroke-linecap="round" stroke-linejoin="round"
d="M16.862 4.487l1.687-1.688a1.875 1.875 0 112.652 2.652L10.582 16.07a4.5 4.5 0
01-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 011.13-1.897l8.932-8.931zm0 0L19.5 7.125M18
14v4.75A2.25 2.25 0 0115.75 21H5.25A2.25 2.25 0 013 18.75V8.25A2.25 2.25 0 015.25
6H10" />
</svg>

<svg xmlns="[Link] fill="none"

</div>

<ul className="flex flex-col gap-16 cursor-pointer">
<li className="navbar-text">
<a onClick={() => navigate("/home")}
onPointerEnter={() => setHover (true)}
onPointerLeave={() => setHover (false)}
>Home</ a>
</li>

<li className="navbar-text">

<a onClick={() => navigate("/request")}
onPointerEnter={() => setReq (true)}
onPointerLeave={() => setReq (false)}
>Request</a>
</li>

<li className="navbar-text">
<a onClick={() => navigate("/activity")}
onPointerEnter={() => setAct (true)}
onPointerLeave={() => setAct (false)}
>Activities</a>
</li>

<li className="navbar-text">
<a onClick={() => navigate("/tour")}
onPointerEnter={() => setTour (true)}
onPointerLeave={() => setTour (false)}
>Tour</a>
</li>

</ul>

</div>

<div className="absolute flex flex-row bottom-12">

<svg xmlns="[Link] fill="none"

viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
className={`${hover_Log ? 'hover-text' : 'navbar-icon'}
mr-4`}>
<path stroke-linecap="round" stroke-linejoin="round"
d="M15.75 9V5.25A2.25 2.25 0 0013.5 3h-6a2.25 2.25 0 00-2.25 2.25v13.5A2.25 2.25
0 007.5 21h6a2.25 2.25 0 002.25-2.25V15M12 9l-3 3m0 0l3 3m-3-3h12.75" />
</svg>
<button className="navbar-text"
onClick={handleLogOut}
onPointerEnter={() => setLog (true)}
onPointerLeave={() => setLog (false)}
>Logout</button>
</div>

</div>
)
}
export default Navbar

import React from 'react';

import { Navigate, Outlet } from 'react-router-dom';
import { useAuth } from '../context/AuthContext'

const PrivateRoute = () => {

const { currentUser } = useAuth()

// determine if authorized, from context or however you're doing it

// If authorized, return an outlet that will render child elements

// If not, return element that will navigate to login page
return currentUser? <Outlet /> : <Navigate to="/" />;
}
export default PrivateRoute

import React, { useState } from 'react'

import { clearance } from '../assets'
import { useNavigate } from 'react-router'

const Request = () => {

const [toggle, setToggle] = useState(false)

let navigate = useNavigate()

return (

<div className="relative w-full">

<div className="xs:ml-20 xs:mr-20 lg:mr-10 lg:ml-10 ml-10 mr-10 flex

flex-col xs:gap-10 gap-5">

<div className="relative sm:top-2">

<a className="sm:text-white text-fontColor sm:text-2xl

text-xl font-poppins
transition-all duration-300 cursor-pointer
hover:text-fontColor ease-in-out"
onClick={() => navigate("/request")}>
Make a request
</a>

</div>

<div className="relative flex bg-gray-700 bg-opacity-25 xs:w-

[600px] xs:h-[250px] w-[310px] h-[150px]
rounded-2xl">

<div className="relative mt-2 ml-2 rounded-lg xs:w-[235px]
xs:h-[235px] w-[135px] h-[135px] overflow-hidden shrink-0">

<div className={`${toggle ? 'toggleOn' : 'toggleOff'}

absolute z-30 w-full h-full bg-navbar bg-opacity-90
rounded-lg border-fontColor border-2 sidebar items-
center justify-center`}>

<h1 className="font-poppins text-fontColor text-

center xs:text-2xl text-xs font-medium">
Please login first..!
</h1>

</div>

<img src={clearance} alt="Barangay Clearance Photo"

className="flex absolute w-full h-full hover:scale-125
transition-all duration-500 ease-in-out
cursor-pointer"/>

</div>

<div className="realtive w-full flex flex-col items-center

xs:justify-start justify-center">
<div className="relative sm:m-6 m-2 flex flex-col gap-
1">

<h1 className="text-white font-poppins xs:text-xl

text-sm md:text-start text-center
top-8 hover:text-fontColor
transition-all duration-300 ease-in-out"
>Certificate of Barangay
Clearance:
</h1>

<p className="sm:flex hidden text-slate-400 font-

poppins text-sm md:text-base
sm:text-center md:text-start
hover:text-slate-300 transition-all duration-300 ease-in-out"
>Barangay Clearance is a
prerequisite document in acquiring a
Mayor's Permit. It is obtained
from the barangay where your
business is located.
</p>

</div>

<button className="text-white bg-fontColor font-

poppins rounded-xl
hover:bg-slate-700 hover:text-
fontColor transition-all relative sm:left-5
duration-300 ease-in-out lg:w-52
sm:w-44 w-24 sm:text-xl text-sm"
onClick={() => setToggle((prev) => !prev)}
>View detail
</button>

<svg xmlns="[Link] fill="none"
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="xs:flex hidden w-10 h-10 mx-8 cursor-pointer
hover:bg-slate-700 rounded-lg hover:scale-110
hover:stroke-fontColor transition-all
duration-500 ease-linear">
<path stroke-linecap="round" stroke-linejoin="round"
d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-
1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z" />
</svg>

</div>

</div>
</div>
</div>
</div>

</div>
)
}

export default Request

import React, { useRef, useState, useEffect } from 'react'

import { sign_up_bg } from '../assets'
import { useNavigate } from 'react-router'
import { getFirestore, addDoc, collection } from 'firebase/firestore'
import { auth } from '../firebase'

const Signup = () => {

const emailRef = useRef()
const passRef = useRef()
const passConfirmRef = useRef()
const userNameRef = useRef()
const userStatusRef = useRef()
const userContactRef = useRef()

const [error, setError] = useState('')
const [laoding, setLoading] = useState(false)
const [dropDownAdd, setDropDownAdd] = useState()
const [address, setAddress] = useState()
const [page, setPage] = useState()

let navigate = useNavigate()

const db = getFirestore()
const colRef = collection(db, 'users')
async function handleSubmit(e) {
[Link]()

setLoading(true)
setError("")

await [Link]([Link],
[Link]).then(cred => {

return addDoc(colRef, {
userId: [Link],
userName: userName,
userEmail: email,
userStatus: upperCaseUserStatus,
userCotactNum: userContact,
userAddress: address,
userRequest: ''
})

})

}
catch{
setError('Failed to create an account')
}
setPage(true)
setLoading(false)
}

useEffect(() => {

if(page == true){
navigate('/home')
}
})

const purokNames = [
"Purok Maki-angayon",
"Purok Pag-asa",
"Purok Luzviminda",
"Purok Paraiso",
"Purok New Society",
"Purok Matamis",
]

return (
<div className="relative h-screen flex items-center justify-center">

<img className="h-full w-full blur-lg scale-110 hover:scale-125

transition-all duration-500 ease-in-out bg-primary"
src={sign_up_bg} alt="" />

</div>

<div className="z-20 bg-none rounded-2xl sm:w-[1000px] sm:h-[600px] h-

[620px] flex sm:bg-navbar sm:bg-opacity-60
flex-row overflow-hidden drop-shadow-xl">

<div className="bg-green-300 h-full w-[500px] overflow-hidden sm:flex

hidden">

<img className="h-full w-full hover:scale-125 hover:translate-x-10

transition-all duration-500 ease-in-out
cursor-pointer"
src={sign_up_bg} alt="" />
</div>

<div className="sm:w-[500px] flex flex-col items-center">

<div className="sm:hidden w-[200px] flex justify-center text-center

relative sm:top-0 top-[25px]
bg-primary rounded-3xl bg-opacity-80">
<h1 className="font-poppins text-2xl font-semibold text-
fontColor
relative m-5">
Sign Up
</h1>

</div>

<div className="sm:w-[400px] sm:h-[500px] w-full flex justify-

center items-center
flex-col relative gap-10 m-5">

<div className="w-full mt-10 sm:flex hidden justify-center">

<h1 className="font-poppins text-2xl font-semibold text-

fontColor
relative mt-5">
Sign Up
</h1>

</div>

<div className=" flex flex-row gap-4 w-full items-center
rounded-2xl justify-center bg-primary bg-opacity-95 sm:bg-transparent h-[420px]">

<div className="shrink-0 flex gap-7 flex-col">

</div>

<div className="sign-up-text relative top-3">

<label>
Email
</label>

</div>
<div className="sign-up-text relative top-4">

<label>
Password
</label>

</div>

<div className="sign-up-text relative top-2">

<label>
Confirm
<br></br>
Password
</label>

</div>

<label>
Status
</label>

</div>

<div className="sign-up-text relative top-1">

<label>
Contact #
</label>

</div>

<label>
Purok
<br></br>
Address
</label>

</div>
</div>

<div className="flex gap-5 flex-col ">

<input className="sign-up-input-tab" type="name"

ref={userNameRef} required />

<input className="sign-up-input-tab-1" type="email"

ref={emailRef} required />

<input className="sign-up-input-tab" type="password"

ref={passRef} required />

<input className="sign-up-input-tab-1" type="password"

ref={passConfirmRef} required />

<input className="sign-up-input-tab" type="status"

ref={userStatusRef} required />

<input className="sign-up-input-tab-1" type="contact"

ref={userContactRef} required />

<label className="sign-up-input-tab cursor-pointer flex

items-center relative" htmlFor=""
onClick={() => setDropDownAdd((prev) => !prev)}>

<h1>{address}</h1>
<h1 className={`${dropDownAdd ? "absolute" :
"hidden"} sidebar flex flex-col bottom-9 bg-navbar
border-2 border-
fontColor rounded-xl bg-opacity-80 w-full`}>
{[Link]((names, index) => {

return <li className="relative m-3"

onClick={() =>
setAddress(names)}>
{names}
</li>
})}
</h1>

</label>

</div>
</div>

<div className= "text-red-600 font-poppins absolute bottom-8

text-lg">
{error}
</div>

<div className="sm:w-full w-[280px] sm:h-auto h-16 items-center

flex flex-row gap-4 justify-center sm:bg-transparent
bg-opacity-80 bg-primary rounded-3xl relative
sm:top-0 top-[-45px]">

<div className="w-24 h-10 flex items-center bg-slate-800

justify-center rounded-2xl hover:scale-110
transition-all duration-300 ease-in-out">

<button className="font-poppins text-white font-semibold

text-lg"
onClick={() => {navigate('/')}}
>Cancel
</button>

</div>

<div className="bg-fontColor w-24 h-10 flex items-center

justify-center rounded-2xl hover:scale-110
transition-all duration-300 ease-in-out
bg-opacity-80">

<button onClick={handleSubmit}
disabled= {laoding}
className="font-poppins text-white font-semibold
text-lg">
Confirm
</button>

</div>

</div>
</div>

</div>

</div>
)
}

export default Signup

import React from 'react'

import { tour, tour1, tour2 } from '../assets'
import { useNavigate } from 'react-router'

const Tour = () => {

let navigate = useNavigate()

return (
<div className="relative sm:w-[55vw] w-screen">

<div className="sm:ml-24 md:ml-8 m-10 flex flex-col sm:gap-0 gap-6">

<div className="relative flex flex-row sm:ml-10 md:ml-20 lg:ml-10 w-

[48vw]">

<a className="sm:text-white text-fontColor sm:text-2xl text-xl

font-poppins
transition-all duration-3000 cursor-pointer
hover:text-fontColor ease-in-out"
onClick={() => (navigate('/tour'))}
>Explore our place
</a>

<a onClick={() => (navigate('/tour'))}

className="sm:flex absolute hidden right-0 text-lg font-
poppins text-white
hover:text-fontColor transition-all ease-in-
out
duration-300"
>See all
</a>
</div>
<div className="flex flex-row gap-4 sm:overflow-auto overflow-scroll
xs:scrollbar xl:overflow-hidden sm:ml-10 md:ml-20 lg:ml-10 xl:ml-10">

<div className="flex flex-row relative

sm:mt-6 rounded-2xl">

<div className="relative w-[200px] sm:h-[400px] h-[380px]

rounded-xl bg-gray-700 bg-opacity-25
xl:w-[300px] lg:w-[250px] md:w-[220px]">

<div className="h-[200px] overflow-hidden

rounded-xl m-2">

<img src={tour} alt=""

className="flex w-full h-full hover:scale-125
transition-all duration-500 ease-in-out
cursor-pointer"/>

</div>

<div className="flex flex-col m-3 gap-3">

<h1 className="font-poppins text-white

sm:text-base
hover:text-fontColor ease-linear
transition-all duration-300">
Barangay Plaza
</h1>

<p className="text-slate-400 font-poppins

sm:text-sm text-xs
hover:text-slate-300 ease-
linear
transition-all duration-300
overflow-hidden">
Our plaza is one of the most safest place
from young
hunters. We implement strong rules against
lolicons
in our place.
</p>

</div>

</div>

</div>

<div className="flex flex-row relative

sm:mt-6 rounded-2xl">

<div className="relative w-[200px] sm:h-[400px] h-[380px]

rounded-xl bg-gray-700 bg-opacity-25
xl:w-[300px] lg:w-[250px] md:w-[220px]">

<div className="h-[200px] overflow-hidden

rounded-xl m-2">

<img src={tour2} alt=""

className="flex w-full h-full hover:scale-125
transition-all duration-500 ease-in-out
cursor-pointer"/>

</div>

<div className="flex flex-col m-3 gap-3">

<h1 className="font-poppins text-white

sm:text-base
hover:text-fontColor ease-linear
transition-all duration-300">
Esperanza National High School
</h1>

<p className="text-slate-400 font-poppins

</div>

</div>

</div>

<div className="flex flex-row

sm:mt-6 rounded-2xl">

<div className="relative w-[200px] sm:h-[400px] h-[380px]

rounded-xl bg-gray-700 bg-opacity-25
xl:w-[300px] lg:w-[250px] md:w-[220px]">

<div className="h-[200px] overflow-hidden

rounded-xl m-2">

<img src={tour1} alt=""

className="flex w-full h-full hover:scale-125
transition-all duration-500 ease-in-out
cursor-pointer"/>

</div>

<div className="flex flex-col m-3 gap-3">

<h1 className="font-poppins text-white

sm:text-base
hover:text-fontColor ease-linear
transition-all duration-300">
Esperanza Elementary School
</h1>

<p className="text-slate-400 font-poppins

</div>

</div>

</div>

</div>
</div>

</div>
)
}

export default Tour

import React from 'react'

import { useAuth } from '../context/AuthContext'
import { getFirestore, getDoc, doc, query, where, collection, onSnapshot } from
'firebase/firestore'
import { useState, useEffect } from 'react'
import { useNavigate } from 'react-router'

const Welcome = () => {

const [userName, setUserName] = useState()

const [userId, setUserID] = useState()
const { currentUserId } = useAuth()
const [profile, setProfile] = useState()
const [userFound, setUserFound] = useState(false)
const [requestDoc, setReqDoc] = useState()
const [toggle, setToggle] = useState()
const [error, setError] = useState()
const [navbar, setNavbar] = useState(false)

let navigate = useNavigate()

const { logout } = useAuth()

const db = getFirestore()

useEffect(() => {
const colRef = collection(db, 'users')
const q = query(colRef, where("userId", "==", currentUserId))

onSnapshot(q, (snapshot) => {

let users = []
[Link]((doc) => {
[Link]({ ...[Link](), id: [Link]})

[Link]((user) => {

const userId = [Link]

const strUserId = [Link]()
setUserID(strUserId)

setUserFound(true)
})

})

})
useEffect(() => {

if (userFound == true) {

const docRef = doc(db, 'users', userId)

getDoc(docRef).then(function(doc) {

if ([Link]) {

const user_name = [Link]().userName
const fisrtLetter = [Link](user_name)[0]
const upperCase = [Link]()
setProfile(upperCase)

const currentUser = upperCase + user_name.slice(1)

setUserName(currentUser)

const userReq = [Link]().userRequest

const reverseUserReq = [Link](0).reverse()
setReqDoc(reverseUserReq)

} else {
[Link]("No such document!");
}
}).catch(function(error) {

})
}

setUserFound(false)

})

async function handleLogOut() {

setError('')

try {
await logout()
navigate("/")
}catch {
}
}

return (

<div className="relative w-full">

<div className={`${navbar ? 'flex' : 'hidden'} flex-col items-

center justify-center gap-3 font-poppins absolute z-50 w-[150px] h-[280px] bg-
navbar
text-white sm:top-32 md:top-20 top-12 sm:right-20
right-10 rounded-2xl border-fontColor border-2 sidebar bg-opacity-9 cursor-
pointer`}>

<li onClick={() => navigate('/home')}>Home</li>

<li onClick={() =>
navigate('/request')}>Request</li>
<li onClick={() =>
navigate('/activity')}>Activities</li>
<li onClick={() => navigate('/tour')}>Tour</li>
<li onClick={() =>
navigate('/profile')}>Profile</li>
<li onClick={() =>
navigate('/emailpage')}>Feedback</li>
<li onClick={handleLogOut}>Logout</li>
</div>

<div className={`${toggle ? 'toggleOn' : 'toggleOff'} absolute z-

30 md:w-[400px] md:h-[500px] w-[200px] h-[250px] bg-navbar bg-opacity-90
text-primary md:top-16 xs:top-32 top-12 sm:right-
20 right-10 rounded-xl border-fontColor border-2 sidebar`}>

<div className="w-full flex items-center flex-col md:m-10 md:mt-10

mt-2 gap-5">

<h1 className="relative font-bold font-poppins md:text-2xl

text-fontColor">
Recent Request
</h1>

<div className="text-opacity-90 font-poppins grid grid-flow-
row gap-5 text-center overflow-auto
xs:scrollbar">

{requestDoc ?.map((req, index) => {

return <li className="border-t-2 md:border-t-fontColor
border-slate-700 bg-slate-900 bg-opacity-60 rounded-lg flex flex-col items-center
cursor-pointer gap-1"
key={index}>

<div className="flex md:flex-row flex-col

text-sm gap-1 items-center justify-center m-2 ">

<div className="w-6 h-6 md:flex hidden

items-center justify-center bg-slate-700 rounded-full">
<svg
xmlns="[Link] fill="none" viewBox="0 0 24 24" stroke-
width="1.5" stroke="currentColor"
className="w-5 h-5 text-
fontColor">
<path stroke-linecap="round"
stroke-linejoin="round" d="M18.375 12.739l-7.693 7.693a4.5 4.5 0 01-6.364-
6.364l10.94-10.94A3 3 0 1119.5 7.372L8.552 18.32m.009-.01l-.01.01m5.699-9.941l-
7.81 7.81a1.5 1.5 0 002.112 2.13" />
</svg>
</div>
<h1 className = "flex flex-row gap-1">

</h1>

<h1 className = "flex flex-row gap-1

</h1>
</div>

<h1 className = "flex flex-col md:gap-2

gap-1">

<span className="text-fontColor
text-sm">You have requested:</span>
<span className="text-white rounded-
lg md:rounded-none border-b-2 md:border-fontColor border-slate-700 md:text-xl
text-lg">{[Link]}</span>

</h1>

</li>
})}

</div>

<div className="relative md:m-10 xs:m-20 m-10 z-0">

<div className="w-[230px] sm:w-full">

<h1 className="sm:text-white text-fontColor sm:text-4xl
text-3xl font-poppins font-semibold
transition-all duration-500 hover:bg-gray-
700
rounded-lg cursor-none hover:scale-x-110
hover:text-fontColor ease-in-out"
onClick={() => navigate('/home')}
>Hello {userName}
</h1>
</div>

<div className="">
<h2 className="text-white text-lg font-poppins
transition-all duration-300 hover:bg-gray-
700
rounded-lg cursor-none hover:scale-x-110
hover:text-fontColor ease-in-out"
>Welcome back, ready to request now?
</h2>
</div>

</div>

<div className="flex flex-row gap-5 h-auto absolute md:right-20

right-14">

<button onClick={() => navigate('/emailpage')}

className="relative md:flex hidden overflow-
hidden bg-gray-700 justify-center items-center rounded-full
h-14 w-14 hover:-translate-y-3
hover:scale-110 transition-all duration-500 ease-in-out">

</button>

<button onClick={() => setToggle((prev) => !prev)}

className={`${toggle ? 'bg-gray-700 -translate-
y-3 scale-110' : 'bg-navbar'} rounded-full md:h-14 md:w-14 h-10 w-10 flex items-
center justify-center
transition-all duration-500 ease-
linear relative`}>

<path stroke-linecap="round" stroke-

linejoin="round" d="M14.857 17.082a23.848 23.848 0 005.454-1.31A8.967 8.967 0
0118 9.75v-.7V9A6 6 0 006 9v.75a8.967 8.967 0 01-2.312 6.022c1.733.64 3.56 1.085
5.455 1.31m5.714 0a24.255 24.255 0 01-5.714 0m5.714 0a3 3 0 11-5.714 0M3.124
7.5A8.969 8.969 0 015.292 3m13.416 0a8.969 8.969 0 012.168 4.5" />
</svg>
</button>

</div>

<div className="md:flex hidden h-auto absolute right-0">

<a onClick={() => navigate('/profile')}

className="relative flex overflow-hidden bg-gray-700
justify-center items-center rounded-full
h-14 w-14 hover:-translate-y-3
hover:scale-110 transition-all duration-500 ease-in-out">

<div className="hover:scale-125 text-

[50px] text-fontColor text-lg
transition-all duration-
500 ease-in-out font-bold
cursor-pointer ">
{profile}
</div>

</a>
</div>

<div className="md:hidden flex h-auto absolute right-0">

<svg xmlns="[Link] fill="none"

viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
className={`${navbar? 'hidden' : 'flex'} w-10 h-10
stroke-fontColor cursor-pointer`}
onClick={() => setNavbar((prev) => !prev)}>
<path stroke-linecap="round" stroke-linejoin="round"
d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>

<svg xmlns="[Link] fill="none"

</div>

</div>
)
}

export default Welcome

import React, {useContext, useState, useEffect } from 'react'

import { auth } from '../firebase'
const AuthContext = [Link]()

export function useAuth(){

return useContext(AuthContext)
}

export function AuthProvider({children}) {

const [currentUser, setCurrentUser] = useState()

const [currentUserId, setUserId] = useState()
const [loading, setLoading] = useState(true)

function login (email, password) {

return [Link](email, password)
}

function logout() {
return [Link]()
}

function resetPassword(email) {
return [Link](email)
}

useEffect(() => {
const unsubscribe = [Link](user => {
setCurrentUser(user)
// setUserId([Link])
setLoading(false)
})
return unsubscribe
}, [])

[Link]((user) => {
if (user) {
// User logged in already or has just logged in.
setUserId([Link])
} else {
// User not logged in or has just logged out.
}
});
const value = {
currentUserId,
currentUser,
login,
logout,
resetPassword
}

return (
<[Link] value={value}>
{!loading && children}
</[Link]>
)
}

import React from 'react'

import { Navbar, Welcome } from '../components'
import { useEffect, useState } from 'react'
import { getFirestore, getDoc, doc } from 'firebase/firestore'

const ActivityPage = () => {

const db = getFirestore()
const [activities, setActivities] = useState()

const docRef = doc(db, 'activities', 'activity')

useEffect(() => {

getDoc(docRef).then(function(doc) {
if ([Link]) {

const activities = [Link]().barangay_activities

setActivities(activities)

} else {
// [Link]() will be undefined in this case

}
}).catch(function(error) {
[Link]("Error getting document:", error);
});
},[])

return (

<aside className="md:flex hidden h-screen sticky top-0">

<aside className="md:hidden flex sticky top-0 z-10 bg-primary">

<h1 className="text-fontColor sm:text-4xl text-xl font-poppins

sm:font-semibold
transition-all duration-300 cursor-pointer
xs:text-center xs:m-0 ml-10
hover:text-slate-300 ease-in-out">
Barangay Halloween Activity
</h1>
</div>

<ul className="relative lg:m-20 grid lg:grid-cols-2 sm:gid-rows-6

xl:grid-cols-3
xl:grid-rows-4 md:gap-14 gap-4 justify-center">

{activities ?.map((act, index) => (

<div className="relative sm:w-[400px] sm:h-[173px] w-

[310px] h-[173px] bg-slate-700
bg-opacity-25 rounded-xl sm:ml-3 flex
flex-row items-center">

<div className="flex relative rounded-lg h-

[150px]
overflow-hidden w-[150px]
ml-3">

<div className="relative sm:h-[200px]

sm:w-[200px] h-[150px] w-[150px] bg-navbar flex justify-center text-center flex-
col">

<div className="absolute h-5 w-5

rounded-full bg-slate-700 bg-opacity-25 top-3 left-3"></div>
<div className="absolute h-5 w-5
rounded-full bg-slate-700 bg-opacity-25 top-3 right-3"></div>

<h1 className="font-poppins text-4xl

font-bold text-fontColor">
Day
</h1>

<h1 className="font-poppins text-5xl

font-bold text-fontColor">
{[Link]}
</h1>
</div>

</div>

<div className="relative flex flex-col ml-2

h-40 sm:w-56 w-32 items-center justify-center">

<div className="relative flex flex-row

gap-2 items-center">

<h1 className="font-poppins text-

fontColor text-xl">
{[Link]}
</h1>
<h1 className="font-poppins text-white
text-normal">
{"("}{[Link]}{")"}
</h1>
</div>
<p className="text-white font-poppins top-
2 text-center">
{[Link]}
</p>
</div>

</div>

</li>
))}

</ul>

</div>

</div>
)
}

export default ActivityPage

import React from 'react'

import {email_bg, email_bg_1, email_bg_2} from '../assets'
import emailjs from '@emailjs/browser'
import { useRef } from 'react'
import { useNavigate } from 'react-router'
import { useState } from 'react'

const EmailPage = () => {

const [submitEmail, setSubmitEmail] = useState(false)

let navigate = useNavigate()

const form = useRef()

const sendFeedbackEmail = (e) => {

[Link]();
[Link]('service_1g19nsi', 'template_s94515n', [Link],
'VV5VcT-KmR6FqT3GP')
.then((result) => {

setSubmitEmail(true)

}, (error) => {
[Link]([Link]);
});
[Link]()
};

return (

<div className="w-screen h-screen bg-[rgba(255,246,230,0.66)] flex items-

center justify-center overflow-hidden">

<div className={`${submitEmail ? 'flex' : 'hidden'} absolute z-30 w-full
h-full bg-[rgba(255,246,230,0.66)] flex items-center justify-center`}>

<div className="sm:w-[400px] w-[300px] h-[400px] drop-shadow-2xl

shadow-xl shadow-slate-400 border-[#171c35] rounded-lg border-2 bg-slate-200 bg-
opacity-90
flex flex-col gap-5 items-center justify-center
overflow-hidden">

<img src={email_bg_2} alt="" className="absolute bottom-0

hover:scale-125 hover:translate-y-10 transition-all duration-300 ease-in-out"/>

<h1 className="text-3xl font-poppins font-semibold z-40">

Thank You
</h1>

<button className="bg-[#f0c46a] text-xl font-poppins w-28

rounded-2xl font-semibold hover:scale-125
transition-all duration-300 ease-in-out z-40"
onClick={() => navigate('/home')}>
Continue
</button>

</div>

</div>
<div className="w-full h-full overflow-hidden absolute z-0 flex items-
center justify-center">
<img src={email_bg} alt=""
className=""/>
</div>

<form className="sm:w-[550px] sm:h-[800px] w-[350px] drop-shadow-2xl

shadow-xl shadow-slate-400 border-[#171c35] rounded-lg border-2 bg-slate-200 bg-
opacity-90
z-10 flex flex-col items-center"
ref={form} onSubmit={sendFeedbackEmail}>

<button className="absolute right-5 top-5 w-8 h-8 rounded-full text-xl

font-semibold bg-[#f0c46a]"
onClick={() => navigate('/home')}>
X
</button>

<h1 className="sm:text-3xl text-xl font-poppins font-semibold ">

Feedback
</h1>

<div className="flex flex-row mt-10 sm:ml-10 gap-2">

<h2 className="text-center w-[100px] sm:text-xl text-base text-
[#f0c46a] font-poppins font-semibold">
from:
</h2>
<input type="text" name="userName" required
className="sm:text-xl text-base sm:w-[340px] w-[200px]
font-poppins font-semibold bg-transparent border-b-2 border-[#171c35]" />
</div>
<div className="flex flex-row mt-10 sm:ml-10 gap-2">
<h2 className="text-center w-[100px] sm:text-xl text-base text-
[#f0c46a] font-poppins font-semibold">
email:
</h2>
<input type="text" name="userEmail" required
className="sm:text-xl text-base sm:w-[340px] w-[200px]
font-poppins font-semibold bg-transparent border-b-2 border-[#171c35]" />
</div>

<div className="flex flex-row mt-10 sm:ml-10 ml-2 gap-2">

<h2 className="sm:text-xl text-base text-[#f0c46a] font-poppins
font-semibold">
message:
</h2>
<textarea name="userMessage" id="" cols="30" rows="5"
className="sm:flex hidden text-xl font-poppins font-
semibold bg-transparent border-b-2 border-[#171c35]">
</textarea>

<textarea name="userMessage" id="" cols="23" rows="3"

className="sm:hidden flex text-base font-poppins font-
semibold bg-transparent border-b-2 border-[#171c35]">
</textarea>
</div>

</div>

<button className="bg-[#f0c46a] text-xl font-poppins sm:mt-10 sm:mb-0

mt-5 mb-5 w-28 rounded-2xl font-semibold hover:scale-125
transition-all duration-300 ease-in-out"
type="submit">
Submit
</button>

</form>

</div>
)
}

export default EmailPage

import React from 'react'
import { useState } from 'react'
import dayjs from 'dayjs'
import { generateDate, months } from '../constants/Calendar'
import cn from '../constants/CN'
import { useNavigate } from 'react-router'

// Main Function
const LandingActivitiesTab = () => {

let navigate = useNavigate()

const days = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]

const currentDate = dayjs()

const [today, setToday] = useState(currentDate)

return (

<div className="relative w-full">

<div className="md:mt-0 mt-6 sm:ml-20 sm:mr-20 lg:ml-10 lg:mr-10 mr-10 ml-

10 flex flex-col sm:gap-0 gap-6 relative xl:items-start items-end">

<a className="sm:text-white text-fontColor sm:text-2xl text-xl font-

poppins
transition-all duration-3000 cursor-pointer
hover:text-fontColor ease-in-out"
onClick={() => (navigate('/landingactivities'))}>
Activities
</a>

<div className="bg-gray-700 bg-opacity-25 flex flex-col h-[305px]

sm:w-[550px] lg:w-[400px] xl:w-[600px] w-full sm:mt-8 rounded-2xl">

<div className="relative sm:mt-6 mt-8 flex items-start w-full">

<h1 className="text-white sm:text-xl font-poppins hover:scale-

110 ml-6
hover:text-fontColor transition-all
duration-300
ease-linear">
{months[[Link]()]}, {[Link]()}
</h1>

<div className="absolute right-6 flex flex-row gap-3">

<button className="text-white sm:text-xl font-poppins

sm:hover:scale-150
transition-all duration-300 ease-in-
out"
onClick={() => {setToday([Link]([Link]()
- 1))}}>
<
</button>

<button className="flex text-fontColor font-poppins

sm:text-xl
sm:hover:bg-slate-700 rounded-lg
transition-all ease-in-out duration-300"
onClick={() => {setToday(currentDate)}}>
Today
</button>

<button className="text-white sm:text-xl font-poppins

sm:hover:scale-150
transition-all duration-300 ease-in-
out"
onClick={() => {setToday([Link]([Link]()
+ 1))}}>
>
</button>

</div>

</div> <button></button>

<div className="relative flex flex-col mt-3 m-5 gap-2">

<div className="w-full grid grid-cols-7">

{[Link]((day, index) => {

return <h1 className="flex justify-center font-poppins
text-fontColor sm:text-lg"
key={index}>
{day}
</h1>
})}
</div>

<div className="w-full grid grid-cols-7 calendar-num-style gap-

1">

{generateDate([Link](), [Link]()).map(({ date,

currentMonth, today }, index) => {

return (

<div className="flex justify-center border-t-2 border-t-

primary calendar-hover-glow"
key={index}>

<h1 className={cn(currentMonth ? "" : "text-

gray-600",
today ? "calendar-num-style-
today" : "")}>

{[Link]()}

</h1>

</div>
)
})}
</div>

</div>

</div>
</div>

</div>
)
}

export default LandingActivitiesTab

import React from 'react'
import { useState } from 'react'
import { clearance } from '../assets'

const LandingRequestTab = () => {

const [toggle, setToggle] = useState(false)

return (
<div className="relative w-full">

<div className="xs:ml-20 xs:mr-20 lg:mr-10 lg:ml-10 ml-10 mr-10 flex

flex-col xs:gap-10 gap-5">

<div className="relative sm:top-2">

<div className="sm:text-white text-fontColor sm:text-2xl

text-xl font-poppins
transition-all duration-300 cursor-pointer
hover:text-fontColor ease-in-out"
onClick={() => setToggle((prev) => !prev)}>
Make a request
</div>

</div>

<div className="relative flex bg-gray-700 bg-opacity-25 xs:w-

[600px] xs:h-[250px] w-[310px] h-[150px]
rounded-2xl">

<div className="relative mt-2 ml-2 rounded-lg xs:w-[235px]
xs:h-[235px] w-[135px] h-[135px] overflow-hidden shrink-0">

<div className={`${toggle ? 'toggleOn' : 'toggleOff'}

absolute z-30 w-full h-full bg-navbar bg-opacity-90
rounded-lg border-fontColor border-2 sidebar items-
center justify-center`}>
<h1 className="font-poppins text-fontColor text-
center xs:text-2xl text-xs font-medium">
Please login first..!
</h1>

</div>

<img src={clearance} alt="Barangay Clearance Photo"

className="flex absolute w-full h-full hover:scale-125
transition-all duration-500 ease-in-out
cursor-pointer"/>

</div>

<div className="realtive w-full flex flex-col items-center

xs:justify-start justify-center">

<div className="relative sm:m-6 m-2 flex flex-col gap-

1">

<h1 className="text-white font-poppins xs:text-xl

text-sm md:text-start text-center
top-8 hover:text-fontColor
transition-all duration-300 ease-in-out"
>Certificate of Barangay
Clearance:
</h1>

<p className="sm:flex hidden text-slate-400 font-

</div>

<div className="flex flex-row xs:absolute bottom-8
md:bottom-2">
<button className="text-white bg-fontColor font-
poppins rounded-xl
hover:bg-slate-700 hover:text-
fontColor transition-all relative sm:left-5
duration-300 ease-in-out lg:w-52
sm:w-44 w-24 sm:text-xl text-sm"
onClick={() => setToggle((prev) => !prev)}
>View detail
</button>

<svg xmlns="[Link] fill="none"
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
class="xs:flex hidden w-10 h-10 mx-8 cursor-pointer
hover:bg-slate-700 rounded-lg hover:scale-110
hover:stroke-fontColor transition-all
duration-500 ease-linear">
<path stroke-linecap="round" stroke-linejoin="round"
d="M17.593 3.322c1.1.128 1.907 1.077 1.907 2.185V21L12 17.25 4.5 21V5.507c0-
1.108.806-2.057 1.907-2.185a48.507 48.507 0 0111.186 0z" />
</svg>

</div>

</div>
</div>
</div>
</div>

</div>
)
}

export default LandingRequestTab

import React from 'react'

import { tour, tour1, tour2 } from '../assets'
import { useNavigate } from 'react-router'

const LandingTourTab = () => {

let navigate = useNavigate()

return (
<div className="relative sm:w-[55vw] w-screen">

<div className="sm:ml-24 md:ml-8 m-10 flex flex-col sm:gap-0 gap-6">

<div className="relative flex flex-row sm:ml-10 md:ml-20 lg:ml-10 w-

[48vw]">

<a className="sm:text-white text-fontColor sm:text-2xl text-xl

font-poppins
transition-all duration-3000 cursor-pointer
hover:text-fontColor ease-in-out"
onClick={() => (navigate('/landingtour'))}
>Explore our place
</a>

<a onClick={() => (navigate('/landingtour'))}

className="sm:flex absolute hidden right-0 text-lg font-
poppins text-white
hover:text-fontColor transition-all ease-in-
out
duration-300"
>See all
</a>
</div>

<div className="flex flex-row gap-4 sm:overflow-auto overflow-scroll

xs:scrollbar xl:overflow-hidden sm:ml-10 md:ml-20 lg:ml-10 xl:ml-10">

<div className="flex flex-row relative

sm:mt-6 rounded-2xl">

<div className="relative w-[200px] sm:h-[400px] h-[380px]

rounded-xl bg-gray-700 bg-opacity-25
xl:w-[300px] lg:w-[250px] md:w-[220px]">

<div className="h-[200px] overflow-hidden

rounded-xl m-2">

<img src={tour} alt=""

className="flex w-full h-full hover:scale-125
transition-all duration-500 ease-in-out
cursor-pointer"/>

</div>

<div className="flex flex-col m-3 gap-3">

<h1 className="font-poppins text-white

sm:text-base
hover:text-fontColor ease-linear
transition-all duration-300">
Barangay Plaza
</h1>

<p className="text-slate-400 font-poppins

</div>

</div>

</div>

<div className="flex flex-row relative

sm:mt-6 rounded-2xl">

<div className="relative w-[200px] sm:h-[400px] h-[380px]

rounded-xl bg-gray-700 bg-opacity-25
xl:w-[300px] lg:w-[250px] md:w-[220px]">

<div className="h-[200px] overflow-hidden

rounded-xl m-2">

<img src={tour2} alt=""

className="flex w-full h-full hover:scale-125
transition-all duration-500 ease-in-out
cursor-pointer"/>

</div>

<div className="flex flex-col m-3 gap-3">

<h1 className="font-poppins text-white

sm:text-base
hover:text-fontColor ease-linear
transition-all duration-300">
Esperanza National High School
</h1>

<p className="text-slate-400 font-poppins

</div>

</div>

</div>

<div className="flex flex-row

sm:mt-6 rounded-2xl">

<div className="relative w-[200px] sm:h-[400px] h-[380px]

rounded-xl bg-gray-700 bg-opacity-25
xl:w-[300px] lg:w-[250px] md:w-[220px]">

<div className="h-[200px] overflow-hidden

rounded-xl m-2">

<img src={tour1} alt=""

className="flex w-full h-full hover:scale-125
transition-all duration-500 ease-in-out
cursor-pointer"/>

</div>

<div className="flex flex-col m-3 gap-3">

<h1 className="font-poppins text-white

sm:text-base
hover:text-fontColor ease-linear
transition-all duration-300">
Esperanza Elementary School
</h1>

<p className="text-slate-400 font-poppins

</div>

</div>

</div>

</div>
</div>

</div>
)
}

export default LandingTourTab

import React, { useState } from 'react'

import { Navbar } from '../components'
import { useAuth } from '../context/AuthContext'
import { getFirestore, getDoc, doc, query, where, collection, onSnapshot } from
'firebase/firestore'

const NotificationPage = () => {

const [userId, setUserID] = useState()

const { currentUserId } = useAuth()
const [userFound, setUserFound] = useState(true)
const [requestDoc, setReqDoc] = useState()

const db = getFirestore()

const colRef = collection(db, 'users')

const q = query(colRef, where("userId", "==", currentUserId))

onSnapshot(q, (snapshot) => {

let users = []
[Link]((doc) => {
[Link]({ ...[Link](), id: [Link]})

[Link]((user) => {
setUserID([Link])
})
if (userFound === true) {
userData()
}
[Link](requestDoc)

})

})

function userData(){

const docRef = doc(db, 'users', userId)

getDoc(docRef).then(function(doc) {
if ([Link]) {

return (

<div className="relative flex w-full h-full bg-primary scroll-auto">

<aside className="h-screen sticky top-0">

<div>
<div className="font-bold font-poppins text-4xl m-20 text-
fontColor">
Notifications
</div>

<div className="relative mr-36 ml-36 flex flex-col gap-10">

<div className="w-[1360px] h-[300px] bg-slate-700 relative flex

bg-opacity-25 rounded-xl items-center flex-
col">

<h1 className="relative font-bold font-poppins text-2xl

text-fontColor">
Recent Notification
</h1>

<div>

<ul className="text-fontColor font-poppins text-xl">
{requestDoc ?.map((req, index) => {

return <li key = {index}>
{req}
</li>
})}

</ul>
</div>
</div>
</div>
</div>

</div>

</div>
)
}

export default NotificationPage

import React from 'react'

import { useState, useEffect } from 'react'
import { Navbar, Welcome } from '../components'
import { useAuth } from '../context/AuthContext'
import { getFirestore, getDoc, doc, query, where, collection, onSnapshot } from
'firebase/firestore'

const ProfilePage = () => {

const [userId, setUserID] = useState()

const { currentUserId } = useAuth()
const [userName, setUserName] = useState()
const [userEmail, setUserEmail] = useState()
const [userStatus, setUserStatus] = useState()
const [userContactNum, setUserContactNum] = useState()
const [userAddress, setUserAddress] = useState()
const [profile, setProfile] = useState()
const [userFound, setUserFound] = useState(false)
const [userRequest, setUserRequest] = useState()

const db = getFirestore()

const colRef = collection(db, 'users')

const q = query(colRef, where("userId", "==", currentUserId))

onSnapshot(q, (snapshot) => {

let users = []
[Link]((doc) => {
[Link]({ ...[Link](), id: [Link]})

[Link]((user) => {

const userId = [Link]

const strUserId = [Link]()
setUserID(strUserId)
setUserFound(true)
})

})

useEffect(() => {

if (userFound == true) {
const docRef = doc(db, 'users', userId)
getDoc(docRef).then(function(doc) {

if ([Link]) {

const user_name = [Link]().userName
setUserName(user_name)
const fisrtLetter = [Link](userName)[0]
const upperCase = [Link]()
setProfile(upperCase)

const user_email = [Link]().userEmail
setUserEmail(user_email)

const user_status = [Link]().userStatus
setUserStatus(user_status)

const user_contact_num = [Link]().userCotactNum
setUserContactNum(user_contact_num)

const user_address = [Link]().userAddress
setUserAddress(user_address)

const user_request = [Link]("Barangay Cedula")
setUserRequest(user_request)

} else {
[Link]("No such document!");
}
}).catch(function(error) {
[Link]("Error getting document:", error)
})
}

setUserFound(false)

})

return (

<div className="relative flex md:flex-row flex-col w-full h-full bg-primary">

<aside className="md:flex hidden h-screen sticky top-0">

<aside className="md:hidden flex sticky top-0 z-10 bg-primary">

<div className="relative w-full">

<div className="relative md:w-64 md:h-64 w-44 h-44 bg-gray-700

rounded-full bg-opacity-25 flex items-center justify-center
hover:bg-fontColor hover:scale-110 transition-
all duration-500 hover:-translate-x-10
ease-in-out">

<div className="md:w-60 md:h-60 w-40 h-40

rounded-full hover:border-2 flex items-center justify-center hover:truncate
border-primary hover:scale-
110 transition-all duration-300 hover:translate-x-16">

<h1 className="md:text-[280px] text-

[150px] hover:scale-125 font-semibold transition-all duration-500
text-fontColor hover:text-
white -translate-y-1 font-poppins cursor-pointer">
{profile}
</h1>

</div>

</div>
<h1 className="relative font-poppins sm:text-4xl text-2xl
font-bold text-fontColor mt-5 cursor-pointer">
Profile
</h1>

<div className="relative flex flex-col md:mt-20 mt-10 gap-10

items-center">

{/*
Name###########################################################################
*/}

<div className="sm:h-20 h-12 sm:w-[40vw] w-[50vw] bg-

fontColor bg-opacity-80 rounded-xl
flex items-center justify-center
hover:scale-110 transition-all
duration-300 ease-in-out">

<div className="font-poppins sm:text-2xl font-semibold

flex flex-row">
<h1 className="">
Name:
</h1>

<h1 className="relative sm:ml-5 ml-2 text-white">

{userName}
</h1>
</div>

</div>

{/*
Email###########################################################################
*/}

<div className="sm:h-20 h-12 sm:w-[50vw] w-[60vw] bg-slate-

700 bg-opacity-25 rounded-xl
flex items-center justify-center
hover:scale-110 transition-all
duration-300 ease-in-out">

<div className="font-poppins sm:text-2xl font-semibold

flex flex-row">
<h1 className="text-fontColor">
Email:
</h1>

<h1 className="relative sm:ml-5 ml-2 text-white">

{userEmail}
</h1>
</div>

</div>

{/*
Role###########################################################################
*/}

<div className="sm:h-20 h-12 sm:w-[60vw] w-[70vw] bg-

fontColor bg-opacity-80 rounded-xl
flex items-center justify-center
hover:scale-110 transition-all
duration-300 ease-in-out">
<div className="font-poppins sm:text-2xl font-semibold
flex flex-row">
<h1 className="">
Status:
</h1>

<h1 className="relative sm:ml-5 ml-2 text-white">

{userStatus}
</h1>
</div>

</div>

{/*
Contact#########################################################################
## */}

<div className="sm:h-20 h-12 sm:w-[50vw] w-[60vw] bg-slate-

700 bg-opacity-25 rounded-xl
flex items-center justify-center
hover:scale-110 transition-all
duration-300 ease-in-out">

<div className="font-poppins sm:text-2xl font-semibold

flex flex-row">
<h1 className="text-fontColor">
Contact:
</h1>

<h1 className="relative sm:ml-5 ml-2 text-white">

{userContactNum}
</h1>
</div>

</div>

{/* Purok
Address#########################################################################
## */}

<div className="sm:h-20 h-12 sm:w-[40vw] w-[50vw] bg-

<h1 className="relative sm:ml-5 ml-2 text-white">

{userAddress}
</h1>
</div>

</div>
</div>

</div>

</div>
</div>
)
}

export default ProfilePage

import React, { useRef, useState } from 'react'

import { clearance } from '../assets'
import { Navbar, Welcome } from '../components'
import emailjs from '@emailjs/browser'
import dayjs from "dayjs"
import { useAuth } from '../context/AuthContext'
import { getFirestore, getDoc, doc, query, where, collection, onSnapshot,
updateDoc, arrayUnion } from 'firebase/firestore'

const RequestPage = () => {

const [userId, setUserID] = useState()

const { currentUserId } = useAuth()

const [toggleClear, setToggleClear] = useState(false)

const [toggleMessage, setToggleMessage] = useState(false)

const [date, setDate] = useState()

const [time, setTime] = useState()
const [credType, setCredType] = useState()
const [requestTime, setRequestTime] = useState(false)

const form = useRef()

//Access Database
const db = getFirestore()
const colRef = collection(db, 'users')
const q = query(colRef, where("userId", "==", currentUserId))

onSnapshot(q, (snapshot) => {

let users = []
[Link]((doc) => {
[Link]({ ...[Link](), id: [Link]})
})

[Link]((user) => {
setUserID([Link])
setRequestTime(true)
})
if (requestTime === true){
dateToday()
}

})

//Send Email
const sendEmail = (e) => {
[Link]();

[Link]('service_1g19nsi', 'template_4ji04x8', [Link],

'VV5VcT-KmR6FqT3GP')
.then((result) => {
userData()
setToggleMessage(true)
setToggleClear(false)

}, (error) => {
[Link]([Link]);
});
[Link]()
};
//Request Date
const dateToday = () => {

setCredType("Barangay Clearance")

const year = dayjs().year()

const month = dayjs().month()
const monthName = months[month]

const day = dayjs().date()

const hour = dayjs().hour()
const minute = dayjs().minute()

const strYear = [Link]()
const strMonth = [Link]()
const strDay = [Link]()
const strHour = [Link]()
const strMinute = [Link]()

const time = strHour + ":" + strMinute

const date = strMonth + " " + strDay + "," + " " + strYear

setTime(time)
setDate(date)
}

//Update Documents in Database

const userData = () =>{

const docRef = doc(db, 'users', userId)

getDoc(docRef).then(function(doc) {
if ([Link]) {

// setDoc(docRef, {
// [date] : credType
// },{merge:true}

updateDoc(docRef, {
userRequest: arrayUnion({
time: time,
date: date,
document: credType
})

})

[Link]("Success")

} else {
[Link]("No such document!");
}
}).catch(function(error) {
[Link]("Error getting document:", error);
});

}

// const userAct = () =>{

// const docRef = doc(db, 'activities', 'activity')

// getDoc(docRef).then(function(doc) {
// if ([Link]) {

// // setDoc(docRef, {
// // [date] : credType
// // },{merge:true}

// updateDoc(docRef, {
// barangay_activities: arrayUnion(
// {
// title: 'Title',
// date: 'Dec 10',
// day: '1',
// content: 'Content of todays event.'
// },
// {
// title: 'Title',
// date: 'Dec 11',
// day: '2',
// content: 'Content of todays event.'
// },
// {
// title: 'Title',
// date: 'Dec 12',
// day: '3',
// content: 'Content of todays event.'
// },
// {
// title: 'Title',
// date: 'Dec 13',
// day: '4',
// content: 'Content of todays event.'
// },
// {
// title: 'Title',
// date: 'Dec 14',
// day: '5',
// content: 'Content of todays event.'
// },
// {
// title: 'Title',
// date: 'Dec 15',
// day: '6',
// content: 'Content of todays event.'
// },
// {
// title: 'Title',
// date: 'Dec 16',
// day: '7',
// content: 'Content of todays event.'
// },
// {
// title: 'Title',
// date: 'Dec 17',
// day: '8',
// content: 'Content of todays event.'
// },
// {
// title: 'Title',
// date: 'Dec 18',
// day: '9',
// content: 'Content of todays event.'
// },
// {
// title: 'Title',
// date: 'Dec 19',
// day: '10',
// content: 'Content of todays event.'
// },
// {
// title: 'Title',
// date: 'Dec 20',
// day: '11',
// content: 'Content of todays event.'
// },
// {
// title: 'Title',
// date: 'Dec 21',
// day: '12',
// content: 'Content of todays event.'
// },
// )

// })

// [Link]("Success")

// } else {
// [Link]("No such document!");
// }
// }).catch(function(error) {
// [Link]("Error getting document:", error);
// });

// }

//Array of Months
const months = [

"January",
"Febuary",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December"
]

return (
<div className="relative flex md:flex-row flex-col w-full h-full bg-primary">

<aside className="md:flex hidden h-screen sticky top-0">

<aside className="md:hidden w-full sticky top-0 z-20 bg-primary">

<div className={`${toggleMessage ? 'flex' : 'hidden'} absolute w-full h-

full z-10 items-center justify-center
sidebar bg-primary bg-opacity-50`}>

<div className="relative w-[500px] h-[300px] bg-primary border-2

border-fontColor rounded-2xl">

<div className="w-full h-full flex justify-center items-center

flex-col gap-4">

<div className="flex flex-row items-center gap-2">

<div className="w-12 h-12 absolute left-5 top-5 bg-slate-

700 rounded-full flex items-center justify-center">

<svg xmlns="[Link] fill="none"

viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
className="w-10 h-10 stroke-fontColor">
<path stroke-linecap="round" stroke-
linejoin="round" d="M11.35 3.836c-.065.21-.1.433-.1.664
0 .[Link].75h4.5a.75.75 0 00.75-.75 2.25 2.25 0 00-.1-.664m-5.8 0A2.251
2.251 0 0113.5 2.25H15c1.012 0 1.867.668 2.15 1.586m-5.8 0c-.376.023-.75.05-
1.124.08C9.095 4.01 8.25 4.973 8.25 6.108V8.25m8.9-4.414c.[Link] 1.124.08
1.131.094 1.976 1.057 1.976 2.192V16.5A2.25 2.25 0 0118 18.75h-2.25m-7.5-
10.5H4.875c-.621 0-1.125.504-1.125 1.125v11.25c0 .621.504 1.125 1.125
1.125h9.75c.621 0 1.125-.504 1.125-1.125V18.75m-7.5-10.5h6.375c.621 0 1.125.504
1.125 1.125v9.375m-8.25-3l1.5 1.5 3-3.75" />
</svg>

</div>
<h1 className="font-poppins text-fontColor text-2xl font-
semibold relative -top-2">
Request Succesful
</h1>
</div>

<p className="text-white font-poppins text-xl">

Please wait for our message and <br/>
prepar a valid Identification Card<br/>
to claim your requested credential<br/>
in our Barangay Hall.
</p>

<button className="relativ w-32 h-10 bg-slate-700 rounded-

full font-poppins
text-xl text-fontColor font-semibold
hover:bg-fontColor
hover:text-white hover:scale-105
transition-all duration-300
ease-in-out"
onClick={() => setToggleMessage(false)}>
Continue
</button>
</div>

</div>

</div>

<div className="relative flex w-screen">

<form ref={form} onSubmit={sendEmail}

className={`${toggleClear ? 'flex' : 'hidden'} absolute w-full
h-full z-10 justify-center
sideba bg-opacity-50`}>

<div className="absolute sm:w-[700px] sm:h-[500px] w-[380px] bg-

primary border-2 border-fontColor rounded-2xl sm:top-48">

<button className="absolute right-5 top-5 h-10 w-10 rounded-full

bg-slate-700 font-poppins text-2xl
text-fontColor hover:bg-fontColor
hover:text-white transition-all duration-300
ease-in-out"
onClick={() => setToggleClear(false)}>
X
</button>

<div className="flex flex-col items-center gap-2">

<label className="w-max relative m-14 font-poppins text-

fontColor text-2xl font-semibold">
Barangay Clearance
</label>

<div className="flex relative w-full h-full justify-center

gap-8">

<div className="sm:flex hidden flex-col gap-11">

<label className="request-text"
htmlFor="">Name</label>
<label className="request-text relative top-2"
htmlFor="">Email</label>
<label className="request-text"
htmlFor="">Purok<br></br>Address</label>

</div>

<div className="flex flex-col sm:gap-10 gap-2">

<label className="request-text sm:hidden flex"

htmlFor="">Name</label>
<input className="request-input-tab" type="name"
name="userName" placeholder=" Real name is required!" required />

<label className="request-text sm:hidden flex"

htmlFor="">Email</label>
<input className="request-input-tab" type="email"
name="userEmail" placeholder=" sample@[Link]"
required />

<label className="request-text sm:hidden flex"

htmlFor="">Purok Address</label>
<input className="request-input-tab" type="address"
name="userAddress" placeholder=" Purok Sample"
required />

</div>
</div>

<div className="flex justify-center relative m-8">

<button className="relativ w-32 h-10 bg-slate-700

rounded-full font-poppins
text-xl text-fontColor font-semibold
hover:bg-fontColor
hover:text-white hover:scale-105
transition-all duration-300
ease-in-out"
type="submit">
Submit
</button>

</div>

</div>

</form>

<div className="relative flex flex-col sm:gap-20 sm:margin m-10 w-full

overflow-hidden">

<h1 className="text-fontColor sm:text-4xl text-xl font-poppins

sm:font-semibold
transition-all duration-300 cursor-pointer
md:text-center
hover:text-slate-300 ease-in-out">
Choose the document
</h1>

<div className="relative flex justify-center flex-col items-

center">

<div className="relative m-10 grid lg:grid-cols-2 lg:grid-

rows-2 sm:gap-14 gap-6">
<div className="relative flex flex-col gap-8 items-center
sm:items-start">

<h1 className="text-white sm:text-xl font-poppins

transition-all duration-3000 cursor-
pointer
hover:text-fontColor ease-in-out">
Barangay Clearance
</h1>

<div className="relative lg:w-[400px] xl:w-[500px] sm:w-

[500px] w-72 sm:h-[173px] h-36 bg-slate-700
bg-opacity-25 rounded-xl sm:ml-3 flex
flex-row items-center">

<div className="flex relative rounded-lg sm:h-

[150px] h-[120px] left-3
overflow-hidden sm:w-[200px] w-
36">

<img src={clearance} alt="Barangay Clearance

Photo"
className="flex absolute w-full h-full
hover:scale-125
transition-all duration-500 ease-in-out
cursor-pointer"/>

</div>

<button className="relative text-white bg-

fontColor font-poppins sm:h-20 h-28 sm:w-40 w-28 rounded-2xl
hover:bg-slate-700 hover:text-
fontColor transition-all xl:ml-16 lg:ml-6 sm:ml-20 ml-5
text-xl font-semibold
only:duration-300 ease-in-out"
onClick={() => setToggleClear(true)}>
Request

</button>

</div>
</div>
<div className="relative flex flex-col gap-8 items-center
sm:items-start">

<h1 className="text-white sm:text-xl font-poppins

transition-all duration-3000 cursor-
pointer
hover:text-fontColor ease-in-out">
Barangay Clearance
</h1>

<div className="relative lg:w-[400px] xl:w-[500px] sm:w-

[500px] w-72 sm:h-[173px] h-36 bg-slate-700
bg-opacity-25 rounded-xl sm:ml-3 flex
flex-row items-center">

<div className="flex relative rounded-lg sm:h-

[150px] h-[120px] left-3
overflow-hidden sm:w-[200px] w-
36">

<img src={clearance} alt="Barangay Clearance

Photo"
className="flex absolute w-full h-full
hover:scale-125
transition-all duration-500 ease-in-out
cursor-pointer"/>

</div>

<button className="relative text-white bg-

</button>

</div>
</div>
<div className="relative flex flex-col gap-8 items-center
sm:items-start">

<h1 className="text-white sm:text-xl font-poppins

transition-all duration-3000 cursor-
pointer
hover:text-fontColor ease-in-out">
Barangay Clearance
</h1>

<div className="relative lg:w-[400px] xl:w-[500px] sm:w-

[500px] w-72 sm:h-[173px] h-36 bg-slate-700
bg-opacity-25 rounded-xl sm:ml-3 flex
flex-row items-center">

<div className="flex relative rounded-lg sm:h-

[150px] h-[120px] left-3
overflow-hidden sm:w-[200px] w-
36">

<img src={clearance} alt="Barangay Clearance

Photo"
className="flex absolute w-full h-full
hover:scale-125
transition-all duration-500 ease-in-out
cursor-pointer"/>

</div>

<button className="relative text-white bg-

</button>

</div>
</div>
<div className="relative flex flex-col gap-8 items-center
sm:items-start">

<h1 className="text-white sm:text-xl font-poppins

transition-all duration-3000 cursor-
pointer
hover:text-fontColor ease-in-out">
Barangay Clearance
</h1>

<div className="relative lg:w-[400px] xl:w-[500px] sm:w-

[500px] w-72 sm:h-[173px] h-36 bg-slate-700
bg-opacity-25 rounded-xl sm:ml-3 flex
flex-row items-center">

<div className="flex relative rounded-lg sm:h-

[150px] h-[120px] left-3
overflow-hidden sm:w-[200px] w-
36">

<img src={clearance} alt="Barangay Clearance

Photo"
className="flex absolute w-full h-full
hover:scale-125
transition-all duration-500 ease-in-out
cursor-pointer"/>

</div>

<button className="relative text-white bg-

</button>

</div>
</div>

</div>

</div>
)
}

export default RequestPage

import React from 'react'

import { tour1, tour2, tour3, tour } from '../assets'
import { Navbar, Welcome } from '../components'

const TourPage = () => {

return (

<div className="relative flex md:flex-row flex-col w-full bg-primary">

<aside className="md:flex hidden h-screen sticky top-0">

<aside className="md:hidden flex sticky top-0 z-10 bg-primary">

<div className="flex flex-col w-full md:mt-20 mb-10 md:mb-0 gap-10">

<div className="w-full">
<h1 className="text-fontColor sm:text-4xl text-xl font-
poppins sm:font-semibold
transition-all duration-300
cursor-pointer xs:text-center xs:m-0 ml-10
hover:text-slate-300 ease-in-out">
Barangay Halloween Activity
</h1>
</div>

<div className="relative md:mt-20 grid lg:grid-cols-2

lg:grid-rows-2 gap-14 cursor-pointer xl:ml-28 justify-center lg:m-10">

<div className="relative sm:h-[300px] sm:w-[500px] w-80

h-48 bg-slate-700 gap-2
bg-opacity-25 rounded-xl flex flex-row
items-center">

<div className="h-44 w-40 sm:w-[250px] sm:h-

[285px] overflow-hidden
rounded-xl m-2 shrink-0">

<div className="relative flex flex-col text-

center gap-1 sm:m-1">

<h1 className="font-poppins text-fontColor

sm:text-2xl">
Place Name
</h1>

<p className="text-white font-poppins">

Place discription, overview and history.
</p>

</div>

</div>
<div className="relative sm:h-[300px] sm:w-[500px] w-80
h-48 bg-slate-700 gap-2
bg-opacity-25 rounded-xl flex flex-row
items-center">

<div className="h-44 w-40 sm:w-[250px] sm:h-

[285px] overflow-hidden
rounded-xl m-2 shrink-0">

<div className="relative flex flex-col text-

center gap-1 sm:m-1">

<h1 className="font-poppins text-fontColor

sm:text-2xl">
Place Name
</h1>

<p className="text-white font-poppins">

Place discription, overview and history.
</p>

</div>

<div className="relative sm:h-[300px] sm:w-[500px] w-80

h-48 bg-slate-700 gap-2
bg-opacity-25 rounded-xl flex flex-row
items-center">

<div className="h-44 w-40 sm:w-[250px] sm:h-

[285px] overflow-hidden
rounded-xl m-2 shrink-0">

<div className="relative flex flex-col text-

center gap-1 sm:m-1">

<h1 className="font-poppins text-fontColor

sm:text-2xl">
Place Name
</h1>

<p className="text-white font-poppins">

Place discription, overview and history.
</p>

</div>

<div className="relative sm:h-[300px] sm:w-[500px] w-80

h-48 bg-slate-700 gap-2
bg-opacity-25 rounded-xl flex flex-row
items-center">

<div className="h-44 w-40 sm:w-[250px] sm:h-

[285px] overflow-hidden
rounded-xl m-2 shrink-0">

<div className="relative flex flex-col text-

center gap-1 sm:m-1">

<h1 className="font-poppins text-fontColor

sm:text-2xl">
Place Name
</h1>

<p className="text-white font-poppins">

Place discription, overview and history.
</p>

</div>

</div>
)
}

export default TourPage

import React from 'react'

import { Navbar, Welcome, Request, Activity, Tour, History } from "./components";

const App = () => {

return (

<div className="relative flex w-full bg-primary">

<aside className="h-screen sticky top-0">

<div className="flex w-full flex-col overflow-hidden">

<aside className="w-full sticky top-0 z-10 bg-primary">

<div className="flex lg:flex-row flex-col md:gap-0 gap-0

justify-center xl:justify-evenly w-full">
<div>
<Request />
</div>
<div className="">
<Activity/>
</div>
</div>

<div className="flex sm:flex-row flex-col xl:gap-14 gap-
0 justify-center w-full">
<div>
<Tour />
</div>
<div>
<History />
</div>
</div>
</div>

</div>

)
}

export default App

@import url("[Link]
family=Poppins:wght@400;500;600;700;800;900&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {

.navbar-text {
@apply font-poppins text-white hover:text-fontColor transition-all duration-
300 ease-linear
}
.navbar-icon{
@apply h-10 w-10 mr-4 text-slate-300 transition-all ease-linear duration-300
}
.hover-text{
@apply stroke-fontColor rounded-lg h-10 w-10 bg-gray-700
transition-all duration-300 ease-linear scale-125
}
.calendar-num-style {
@apply h-7 w-12 font-poppins sm:text-lg flex justify-center text-fontColor
cursor-pointer
}
.calendar-num-style-today{
@apply bg-fontColor border-2 border-primary text-white rounded-xl text-lg
flex justify-center w-full font-poppins
hover:scale-110 hover:bg-opacity-60 hover:text-white transition-all
scale-110 font-semibold
duration-100 ease-in-out
}
.calendar-hover-glow{
@apply hover:bg-slate-800 rounded-t-xl hover:text-fontColor hover:scale-110
hover:rounded-xl transition-all duration-300 ease-in-out cursor-
pointer
}
.sign-up-text {
@apply font-poppins text-fontColor font-medium
}
.request-text {
@apply font-poppins text-fontColor sm:text-xl font-medium
}
.sign-up-input {
@apply font-poppins w-[260px] h-9 sm:bg-fontColor bg-slate-700 text-white
rounded-md outline-fontColor focus:bg-slate-500
hover:bg-slate-500 hover:text-white hover:bg-opacity-40
focus:text-white transition-all duration-300 ease-in-out
focus:bg-opacity-5
}
.sign-up-input-sm {
@apply font-poppins w-40 bg-slate-700 text-white
rounded-md outline-fontColor focus:bg-slate-500
hover:bg-slate-500 hover:text-white hover:bg-opacity-40
focus:text-white transition-all duration-300 ease-in-out
focus:bg-opacity-5
}
.sign-up-input-tab {
@apply font-poppins sm:w-[260px] h-9 bg-fontColor bg-opacity-20 text-white
rounded-md outline-fontColor focus:bg-slate-500
hover:bg-slate-500 hover:text-white hover:bg-opacity-40
focus:text-white transition-all duration-300 ease-in-out
focus:bg-opacity-5
}
.request-input-tab {
@apply font-poppins sm:w-[460px] w-[250px] h-9 bg-fontColor bg-opacity-20
text-white
rounded-md outline-fontColor focus:bg-slate-500
hover:bg-slate-500 hover:text-white hover:bg-opacity-40
focus:text-white transition-all duration-300 ease-in-out
focus:bg-opacity-5
}
.sign-up-input-tab-1 {
@apply font-poppins sm:w-[260px] h-9 bg-fontColor bg-opacity-40 text-white
rounded-md outline-fontColor focus:bg-slate-500
hover:bg-slate-500 hover:text-white hover:bg-opacity-40
focus:text-white transition-all duration-300 ease-in-out
focus:bg-opacity-5
}
.hover-text-landing{
@apply text-fontColor text-2xl font-poppins rounded-xl
bg-gray-700 -translate-y-3 scale-110
transition-all ease-in-out duration-300
}
.normal-text-landing{
@apply text-white text-2xl font-poppins
transition-all duration-300 ease-linear
}
.hover-icon-landing{
@apply rounded-full h-14 w-14 bg-gray-700
-translate-y-3 scale-110 stroke-fontColor
transition-all duration-300 ease-linear
}
.normal-icon-landing{
@apply bg-navbar rounded-full h-14 w-14 stroke-slate-300
transition-all duration-300 ease-linear
}
.toggleOn{
@apply flex transition-all duration-300 ease-linear
}
.toggleOff{
@apply hidden transition-all duration-300 ease-linear
}
.margin{
@apply ml-20 mr-20 mb-20
}

.sidebar {
-webkit-animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
animation: slide-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@-webkit-keyframes slide-top {
0% {
-webkit-transform: translateY(100px);
transform: translateY(100px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}

@keyframes slide-top {
0% {
-webkit-transform: translateY(100px);
transform: translateY(100px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
.scrollbar::-webkit-scrollbar {
width: 15px;
height: 15px;
}

.scrollbar::-webkit-scrollbar-track {
border-radius: 100vh;
background: #121212;
}

.scrollbar::-webkit-scrollbar-thumb {
background: #0A0A0A;
border-radius: 100vh;
border: 3px solid #00CCCB;
}

.scrollbar::-webkit-scrollbar-thumb:hover {
background: #334155;
}

}
.textOver {
overflow: hidden;
font-size: 0px;
}
.grid-rows-7 {
grid-template-rows: repeat(7, minmax(0, 1fr));
}
.grid-col-7 {
grid-template-rows: repeat(7, minmax(0, 1fr));
}
.over-flow{
overflow-y: scroll;
overflow-x: hidden;
}

import React from 'react'

import { LandingNavbar, LandingWelcomePage, History } from "./components"
import LandingRequestTab from './pages/LandingRequestTab'
import LandingActivitiesTab from './pages/LandingActivitiesTab'
import LandingTourTab from './pages/LandingTourTab'
import { intro_bg, intro_bg_2, intro_bg_3 } from './assets'
import { useState } from 'react'

const LandingPage = () => {

const [firstGetStart, setFirstGetStart] = useState(true)
const [secGetStart, setSecGetStart] = useState(true)
const [thirdGetStart, setThirdGetStart] = useState(true)

return (

<div className="relative flex w-full bg-primary">

<div className={`${thirdGetStart ? 'flex' : 'hidden'} absolute z-50 w-full

h-full bg-primary bg-opacity-80 overflow-hidden`}>

<div className={`${thirdGetStart ? 'flex' : 'hidden'} h-screen w-

screen justify-center items-center bg-primary bg-opacity-50`}>

<div className={`${thirdGetStart ? 'flex' : 'hidden'} absolute

h-[600px] md:w-[800px] w-[350px] border-2 border-fontColor bg-navbar flex-col
items-center rounded-lg`}>

<div className="absolute mt-10 flex flex-row gap-2">

<div className="md:w-48 md:h-48 w-20 h-20 bg-slate-700

md:mt-24 mt-16 rounded-full bg-opacity-80
hover:bg-fontColor hover:scale-90 hover:-
translate-x-20 transition-all duration-500 ease-in-out">
<img className="md:w-52 md:h-52 h-28 w-32
hover:scale-125 hover:translate-x-44 hover:-translate-y-5 transition-all
duration-500 ease-in-out"
src={intro_bg_3} alt="" />
</div>

<h1 className="text-fontColor md:mt-3 mt-8 font-poppins

md:text-2xl text-xl font-bold">
Disclaimer!
</h1>
<h2 className="text-slate-700 font-poppins md:text-lg
text-sm md:w-[550px] text-center m-4">
This site is up for testing and still in production,
please report any bugs or errors that you may encounter. We appreciate your
time and will make sure to give credit to those people
who drop their feedback.
(You will see your names in the credit section when we
deploy our final version)
</h2>

<button className="bg-slate-700 md:mt-2 mt-10 md:text-

3xl text-xl font-poppins font-medium text-fontColor md:w-52 md:h-12 w-44 h-10
rounded-lg
hover:bg-fontColor hover:scale-110
hover:font-semibold hover:text-slate-700 transition-all duration-500 ease-in-out"
onClick={() =>
setThirdGetStart(false)}>
I'm in!
</button>

</div>

<div className={`${secGetStart ? 'flex' : 'hidden'} absolute

h-[600px] md:w-[800px] w-[350px] border-2 border-fontColor bg-navbar flex-col
items-center rounded-lg`}>

<div className="absolute mt-10 flex flex-row gap-2">

<div className="md:w-48 md:h-48 w-20 h-20 bg-slate-700

md:mt-24 mt-16 rounded-full bg-opacity-80
hover:bg-fontColor hover:scale-90
transition-all duration-500 ease-in-out">
<img className="md:w-52 md:h-52 h-28 w-32
hover:scale-125 hover:translate-x-10 hover:-translate-y-10 transition-all
duration-500 ease-in-out"
src={intro_bg_2} alt="" />
</div>
<h1 className="text-fontColor md:mt-3 mt-8 font-poppins
md:text-2xl text-xl font-bold">
Try out Different Things!
</h1>

<h2 className="text-slate-700 font-poppins md:text-lg

text-sm md:w-[550px] text-center m-4">
Try to login on our site, and also try requesting
a document after you login. It's safe and simple.
</h2>

<button className="bg-slate-700 mt-10 md:text-3xl text-

xl font-poppins font-medium text-fontColor md:w-52 md:h-12 w-44 h-10 rounded-lg
hover:bg-fontColor hover:scale-110
hover:font-semibold hover:text-slate-700 transition-all duration-500 ease-in-out"
onClick={() => setSecGetStart(false)}>
Continue
</button>

</div>

<div className={`${firstGetStart ? 'flex' : 'hidden'} absolute

h-[600px] md:w-[800px] w-[350px] border-2 border-fontColor bg-navbar flex-col
items-center rounded-lg`}>

<div className="absolute mt-10 flex flex-row gap-2">

<div className="md:w-48 md:h-48 w-20 h-20 bg-slate-700

md:mt-24 mt-16 rounded-full bg-opacity-80
hover:bg-fontColor hover:scale-90
transition-all duration-500 ease-in-out">
<img className="md:w-52 md:h-52 h-28 w-32
hover:scale-125 hover:translate-x-10 hover:-translate-y-10 transition-all
duration-500 ease-in-out"
src={intro_bg} alt="" />
</div>
<h1 className="text-fontColor md:mt-3 mt-8 font-poppins
md:text-2xl text-xl font-bold">
Welcome to our Website!
</h1>

<h2 className="text-slate-700 font-poppins md:text-lg

text-sm md:w-[550px] text-center m-4">
Please take a tour and consider droping feedback
to our email. We provide a feedback button at
bottom-left of your screen if your on PC and at
the burger bar icon if your on mobile.
</h2>

<button className="bg-slate-700 mt-10 md:text-3xl text-

xl font-poppins font-medium text-fontColor md:w-52 md:h-12 w-44 h-10 rounded-lg
hover:bg-fontColor hover:scale-110
hover:font-semibold hover:text-slate-700 transition-all duration-500 ease-in-out"
onClick={() =>
setFirstGetStart(false)}>
Get started
</button>

</div>

</div>

</div>

<aside className="h-screen sticky top-0">

<div className="flex w-full flex-col overflow-hidden">

<aside className="w-full sticky top-0 z-10">

<div className='w-full bg-primary'>

</div>

)
}

export default LandingPage

import React, { useRef, useState } from 'react'

import { sign_up_bg } from './assets'
import { useAuth } from './context/AuthContext'
import { useNavigate } from 'react-router'

const Login = () => {

const emailRef = useRef()
const passRef = useRef()
const { login } = useAuth()
const [error, setError] = useState('')
const [laoding, setLoading] = useState(false)
let navigate = useNavigate()

async function handleSubmit(e) {

[Link]()

try {
setLoading(true)
setError("")
await login([Link], [Link])
navigate("/")
}
catch{
setError('Failed to sign in')
}

setLoading(false)
}
return (
<div className="relative h-screen flex items-center justify-center">

<img className="h-full w-full blur-lg scale-110 hover:scale-125

transition-all duration-500 ease-in-out"
src={sign_up_bg} alt="" />

</div>

<div className="z-20 bg-none rounded-2xl w-[1000px] h-[600px] flex bg-

fontColor bg-opacity-10
flex-row overflow-hidden drop-shadow-xl">

<div className="bg-green-300 h-full w-[500px] overflow-hidden">

<img className="h-full w-full hover:scale-125 hover:translate-x-10

transition-all duration-500 ease-in-out
cursor-pointer"
src={sign_up_bg} alt="" />
</div>

<div className="w-[400px] h-[500px] flex justify-center items-

center
flex-col relative gap-10">

<div className="w-full flex justify-center">

<h1 className="font-poppins text-3xl font-semibold text-

fontColor">
Login
</h1>

</div>

<div className=" flex flex-row gap-4 w-full justify-center">

<div className="shrink-0 flex gap-7 flex-col">

<label>
Email
</label>

</div>

<label>
Password
</label>

</div>

<div className= "text-black font-poppins">
{error}
</div>

</div>
<div className="flex gap-5 flex-col">

<input className="sign-up-input" type="email"

ref={emailRef} required />

<input className="sign-up-input" type="password"

ref={passRef} required />

</div>

<div className="w-full flex flex-row gap-4 justify-center">

<div className="w-24 h-10 flex items-center bg-slate-800

justify-center rounded-2xl hover:scale-110
transition-all duration-300 ease-in-out">

<a className="font-poppins text-white font-semibold

text-lg hover:font-bold
transition-all duration-300 ease-in-
out"
href='/signup'>
Create
</a>

</div>

<div className="bg-fontColor w-24 h-10 flex items-center

justify-center rounded-2xl hover:scale-110
transition-all duration-300 ease-in-out">

<button onClick={handleSubmit}
disabled= {laoding}
className="font-poppins text-white font-semibold
text-lg hover:font-bold
transition-all duration-300 ease-in-
out">
Confirm
</button>
</div>

</div>

</div>

</div>

</div>
)
}

export default Login

import React from 'react'

import ReactDOM from 'react-dom/client'

import { BrowserRouter as Router, Routes as Switch, Route, } from "react-router-

dom"
import App from './App'
import { AuthProvider } from './context/AuthContext'
import './[Link]'

import Signup from './components/Signup'

import RequestPage from './pages/RequestPage'
import ActivityPage from './pages/ActivityPage'
import TourPage from './pages/TourPage'
import NotificationPage from './pages/NotificationPage'
import ProfilePage from './pages/ProfilePage'
import PrivateRoute from './components/PrivateRoute'
import LandingPage from './LandingPage'
import LandingActivities from './components/LandingActivities'
import LandingTour from './components/LandingTour'
import EmailPage from './pages/EmailPage'

[Link]([Link]('root')).render(
<[Link]>

<Router>
<AuthProvider>

<Route path="/" element={<LandingPage />} />

<Route path="/landingsignup" element={<Signup />} />

<Route path="/landingactivities" element={<LandingActivities

/>} />

<Route path="/landingtour" element={<LandingTour />} />

<Route path='/home' element={<PrivateRoute/>}>

<Route path='/emailpage' element={<PrivateRoute/>}>

<Route path='/request' element={<PrivateRoute/>}>

<Route path='/activity' element={<PrivateRoute/>}>

<Route path='/tour' element={<PrivateRoute/>}>

<Route path='/notification' element={<PrivateRoute/>}>

<Route path='/profile' element={<PrivateRoute/>}>

</AuthProvider>

</Router>

</[Link]>
)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/[Link]" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Capstone Web</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/[Link]"></script>
</body>
</html>

/** @type {import('tailwindcss').Config} */

[Link] = {
content: ["./[Link]", "./src/**/*.{js,jsx}"],
mode: "jit",
theme: {
extend: {
colors: {
navbar: "#0A0A0A",
fontColor: "#00CCCB",
primary: "#121212",
content: "#1E1E1E",
instagram: "#db565b",
instaBorder: "#a9267b",
instaStroke: "#fed778",
twitter: "#1b96e2",
},
fontFamily: {
poppins: ["Poppins", "sans-serif"],
},
},
borderWidth: {
DEFAULT: '1px',
'0': '0',
'2': '2px',
'3': '3px',
'4': '4px',
'6': '6px',
'8': '8px',
},
screens: {
xs: "480px",
ss: "620px",
sm: "768px",
md: "1200px",
lg: "1400px",
xl: "1600px",
},
},
plugins: [],
};

{
"homepage": "[Link]
"name": "capstone_app_deploy",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d dist",
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"@emailjs/browser": "^3.10.0",
"dayjs": "^1.11.7",
"firebase": "^9.14.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.4.5"
},
"devDependencies": {
"@types/react": "^18.0.24",
"@types/react-dom": "^18.0.8",
"@vitejs/plugin-react": "^2.2.0",
"autoprefixer": "^10.4.13",
"gh-pages": "^4.0.0",
"postcss": "^8.4.19",
"tailwindcss": "^3.2.4",
"vite": "^3.2.3"
}
}

import { defineConfig } from 'vite'

import react from '@vitejs/plugin-react'

// [Link]
export default defineConfig({
plugins: [react()],
build: {
chunkSizeWarningLimit: 1600,
},
})
Appendix B – User’s Manual

User Manual

Here is the process for how to request your barangay credentials through our website.

Please read and follow the instruction we provided below.

Step 1. Open your browser on the device you use. Examples are Google Chrome, Opera Browser, or
your device’s default browser.

Step 2. Click the search bar on the top left of your screen.
Step 3. Type the following domain name of the website. “[Link]”

Step 4. Navigate to the landing page and click login on the top right of your screen.

Step 5. On the bottom of the window, click “Click here!”.

Step 6. Fill up the necessary details and click confirm.

Step 7. On the upper right of your screen, click “Login here!” once again and type your user name and
password then click the “Confirm” button.
Step 8. On the home page click the “Request” button at the upper left of the screen located at the
navigation bar.

Step 9. Choose the document you want to request and click the “Request” button.
Step 10. Fill up the necessary details and click “Submit”.

Step 11. A small message box will appear indicating that your request is received by the barangay
secretary and is being processed.

Step 12. If your request is ready, you will receive an email from the barangay indicating that your
request is complete and that you will be able to claim it in your barangay hall.
Curriculum Vitae

React Props, State, and Styling Guide
No ratings yet
React Props, State, and Styling Guide
23 pages
Facebook Primuim
No ratings yet
Facebook Primuim
8 pages
React HTML Rendering and Components Guide
No ratings yet
React HTML Rendering and Components Guide
24 pages
HTTP Header Management in Servlets
No ratings yet
HTTP Header Management in Servlets
13 pages
Flexbox and Grid CSS Examples
No ratings yet
Flexbox and Grid CSS Examples
7 pages
Retrieve Client IP with JavaScript
No ratings yet
Retrieve Client IP with JavaScript
14 pages
Node.js PDF Form Filling Course
No ratings yet
Node.js PDF Form Filling Course
58 pages
React Hours and Days Calculator
No ratings yet
React Hours and Days Calculator
2 pages
Week3Tutorial 170380
No ratings yet
Week3Tutorial 170380
9 pages
Responsive Layout for Societal App
No ratings yet
Responsive Layout for Societal App
42 pages
WebViewer Hotspot Control Interface
No ratings yet
WebViewer Hotspot Control Interface
6 pages
AJAX Time Fetcher and Feedback App
No ratings yet
AJAX Time Fetcher and Feedback App
16 pages
Install NodeJS and Create React App
No ratings yet
Install NodeJS and Create React App
54 pages
Societal App Layout Development
No ratings yet
Societal App Layout Development
45 pages
Simple To-Do List with Analytics Project
No ratings yet
Simple To-Do List with Analytics Project
13 pages
ToolHive: Single-File SPA Toolkit
No ratings yet
ToolHive: Single-File SPA Toolkit
31 pages
Login and Registration Form Lab Report
No ratings yet
Login and Registration Form Lab Report
6 pages
FSWD LAB Programs 2026
No ratings yet
FSWD LAB Programs 2026
44 pages
Hospital (Frontend)
No ratings yet
Hospital (Frontend)
48 pages
HTML JavaScript Calendar Example
No ratings yet
HTML JavaScript Calendar Example
3 pages
Figma Web App Design and Implementation
No ratings yet
Figma Web App Design and Implementation
21 pages
FSD Assi 5
No ratings yet
FSD Assi 5
71 pages
Student Record Management System
No ratings yet
Student Record Management System
32 pages
CV of M. Amjad Ali Khan
No ratings yet
CV of M. Amjad Ali Khan
23 pages
100+ Free Online Tools Directory
100% (1)
100+ Free Online Tools Directory
5 pages
Ежедневный календарь с задачами
No ratings yet
Ежедневный календарь с задачами
13 pages
مشروع تبرج
No ratings yet
مشروع تبرج
105 pages
Django User Authentication System
No ratings yet
Django User Authentication System
9 pages
User Login Form HTML Template
No ratings yet
User Login Form HTML Template
2 pages
Simple Web Projects with React & HTML
No ratings yet
Simple Web Projects with React & HTML
10 pages
Personal Portfolio Webpage Design
No ratings yet
Personal Portfolio Webpage Design
54 pages
Introduction to React Library Basics
No ratings yet
Introduction to React Library Basics
9 pages
Complete JSX HTML Web Design Mastercourse
No ratings yet
Complete JSX HTML Web Design Mastercourse
26 pages
Web-Based Work Order Management System
No ratings yet
Web-Based Work Order Management System
95 pages
Lab Template
No ratings yet
Lab Template
21 pages
Registro de Asistencia Técnica
No ratings yet
Registro de Asistencia Técnica
16 pages
User Management API and Templating Setup
No ratings yet
User Management API and Templating Setup
20 pages
23 Bce 9683
No ratings yet
23 Bce 9683
14 pages
Web-Based Student Counseling System
No ratings yet
Web-Based Student Counseling System
25 pages
Business Management System Overview
No ratings yet
Business Management System Overview
29 pages
Modern React Bootcamp Overview
No ratings yet
Modern React Bootcamp Overview
5 pages
Modern Web Design CSS Guide
No ratings yet
Modern Web Design CSS Guide
33 pages
HTML Login Page with CSS Design
No ratings yet
HTML Login Page with CSS Design
4 pages
Code3 Interface Design Overview
No ratings yet
Code3 Interface Design Overview
5 pages
Full Stack Web Development Lab Record
No ratings yet
Full Stack Web Development Lab Record
44 pages
Angular Project Setup Guide
No ratings yet
Angular Project Setup Guide
30 pages
FSD Assi 5
No ratings yet
FSD Assi 5
70 pages
Responsive Layout for Societal App
No ratings yet
Responsive Layout for Societal App
65 pages
Full Stack Web Development Lab Guide
No ratings yet
Full Stack Web Development Lab Guide
30 pages
Task Management App: Create/Edit Tasks
No ratings yet
Task Management App: Create/Edit Tasks
11 pages
React App Development Guide
No ratings yet
React App Development Guide
30 pages
Login Page Design for Book Store
No ratings yet
Login Page Design for Book Store
9 pages
HTML & CSS for Login/Registration Pages
No ratings yet
HTML & CSS for Login/Registration Pages
20 pages
Web Page for CV and Skills Showcase
No ratings yet
Web Page for CV and Skills Showcase
47 pages
React Props, State, and Event Handling Guide
No ratings yet
React Props, State, and Event Handling Guide
31 pages
Overview of Computer Software Types
No ratings yet
Overview of Computer Software Types
2 pages
ISO 9001 Clause 8.3.4 Explained
No ratings yet
ISO 9001 Clause 8.3.4 Explained
7 pages
Amazon SQS Overview and Features Guide
No ratings yet
Amazon SQS Overview and Features Guide
6 pages
AI Stock Market Simulator Overview
No ratings yet
AI Stock Market Simulator Overview
12 pages
Windows OS Installation Guide
No ratings yet
Windows OS Installation Guide
7 pages
Cypress Automation Testing Guide
No ratings yet
Cypress Automation Testing Guide
19 pages
Full-Stack Developer Resume: PHP & Angular
No ratings yet
Full-Stack Developer Resume: PHP & Angular
3 pages
ADO.NET Overview and Examples
No ratings yet
ADO.NET Overview and Examples
19 pages
AWS EC2 Compute Services Overview
No ratings yet
AWS EC2 Compute Services Overview
23 pages
Software Engineering: Design and Analysis Concepts
No ratings yet
Software Engineering: Design and Analysis Concepts
46 pages
Understanding Database Management Systems
No ratings yet
Understanding Database Management Systems
32 pages
OpenCL and PyOpenCL Installation Manual
No ratings yet
OpenCL and PyOpenCL Installation Manual
6 pages
Understanding Computer Security and Viruses
No ratings yet
Understanding Computer Security and Viruses
4 pages
Difference Between char s[] and char *s
No ratings yet
Difference Between char s[] and char *s
5 pages
Software Testing Techniques Syllabus
No ratings yet
Software Testing Techniques Syllabus
24 pages
Deepak Chanana: IT Consultant Profile
No ratings yet
Deepak Chanana: IT Consultant Profile
10 pages
PH Installationen Fujitsu Primergy en
No ratings yet
PH Installationen Fujitsu Primergy en
179 pages
Python String and Date Manipulation
No ratings yet
Python String and Date Manipulation
9 pages
Importance of Database Normalization
No ratings yet
Importance of Database Normalization
6 pages
5 CalcGraf - Graphical Formula Editor
No ratings yet
5 CalcGraf - Graphical Formula Editor
92 pages
Sample Multi-Page Scribd Document
No ratings yet
Sample Multi-Page Scribd Document
12 pages
Graphical Software System Representation
No ratings yet
Graphical Software System Representation
16 pages
Understanding Classes and Objects in OOP
No ratings yet
Understanding Classes and Objects in OOP
9 pages
Angular: Table Ofcontents
No ratings yet
Angular: Table Ofcontents
75 pages
Safedata: Master Data API Middleware
No ratings yet
Safedata: Master Data API Middleware
8 pages
Oracle Conversion Function Quiz
No ratings yet
Oracle Conversion Function Quiz
3 pages
Kafka Producer Configuration Guide
No ratings yet
Kafka Producer Configuration Guide
31 pages
(Ebook) Java Programming by Joyce Farrell ISBN 9781285856919, 1285856910 Download Full Chapters
No ratings yet
(Ebook) Java Programming by Joyce Farrell ISBN 9781285856919, 1285856910 Download Full Chapters
81 pages
Billing Document Manager Test Report
No ratings yet
Billing Document Manager Test Report
17 pages
Multithreading in C++ Lab Guide
No ratings yet
Multithreading in C++ Lab Guide
5 pages