0% found this document useful (0 votes)

131 views

Chapter V

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

Available Formats

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

0% found this document useful (0 votes)

131 views

Chapter V

Uploaded by

Eugene San Lorenzo

Available Formats

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

You are on page 1/ 125

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. https://www.motadata.com/blog/service-request-management/

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 http://ejournals.ph/form/cite.php?id=10922

Basney, J., Humphrey, M., & Welch, V. (2005). The MyProxy online credential
repository. Software: Practice and Experience, 35(9), 801–
816. https://doi.org/10.1002/spe.688

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

Colegio de San Juan de Letran Calamba. https://ejournals.ph/article.php?id=147
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[today.month()]}, {today.year()}
</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(today.month(today.month()
- 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(today.month(today.month()
+ 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">

{days.map((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(today.month(), today.year()).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" : "")}>

{date.date()}

</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="http://www.w3.org/2000/svg" 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="http://www.w3.org/2000/svg" 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 (doc.exists) {

const activities = doc.data().barangay_activities

setActivities(activities)

} else {
// doc.data() will be undefined in this case

}
}).catch(function(error) {
console.log("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">
{act.title}
</h1>
<h1 className="font-poppins text-
white text-normal">
{"("}{act.date}{")"}
</h1>
</div>
<p className="text-white font-poppins
top-2 text-center">
{act.content}
</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="http://www.w3.org/2000/svg" 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="http://www.w3.org/2000/svg" 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 .414.336.75.75.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.376.023.75.05 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="http://www.w3.org/2000/svg" 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) {

e.preventDefault()

try {
setLoading(true)
setError("")
await login(emailRef.current.value, passRef.current.value)
navigate("/home")
}
catch{
setError('Failed to sign in')
}

setLoading(false)
}

async function handleResetSubmit(e) {

e.preventDefault()

try {
setMessage("")
setResetLoading(true)
setError("")
await resetPassword(emailResetRef.current.value)
setMessage("Check your email to complete this proccess")
}
catch(err){
setResetError('Failed to Reset')
console.log(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="http://www.w3.org/2000/svg"
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="http://www.w3.org/2000/svg"
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="http://www.w3.org/2000/svg"
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="http://www.w3.org/2000/svg" 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="http://www.w3.org/2000/svg" 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="http://www.w3.org/2000/svg" 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="http://www.w3.org/2000/svg" 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="http://www.w3.org/2000/svg" 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="http://www.w3.org/2000/svg" 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) {
e.preventDefault()

if (passRef.current.value !== passConfirmRef.current.value){

return setError('Password do not match')
}
try {
const userName = userNameRef.current.value
const email = emailRef.current.value
const userStatus = userStatusRef.current.value
const userContact = userContactRef.current.value
const upperCaseUserStatus = userStatus.charAt(0).toUpperCase() +
userStatus.slice(1)

setLoading(true)
setError("")

await auth.createUserWithEmailAndPassword(emailRef.current.value,
passRef.current.value).then(cred => {

return addDoc(colRef, {
userId: cred.user.uid,
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`}>
{purokNames.map((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 = []
snapshot.docs.forEach((doc) => {
users.push({ ...doc.data(), id: doc.id})

users.map((user) => {

const userId = user.id

const strUserId = userId.toString()
setUserID(strUserId)

setUserFound(true)
})

})

})
useEffect(() => {

if (userFound == true) {

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

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

if (doc.exists) {

const user_name = doc.data().userName
const fisrtLetter = Array.from(user_name)[0]
const upperCase = fisrtLetter.toUpperCase()
setProfile(upperCase)

const currentUser = upperCase + user_name.slice(1)

setUserName(currentUser)

const userReq = doc.data().userRequest

const reverseUserReq = userReq.slice(0).reverse()
setReqDoc(reverseUserReq)

} else {
console.log("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="http://www.w3.org/2000/svg" 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">{req.document}</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="http://www.w3.org/2000/svg" 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="http://www.w3.org/2000/svg" fill="none"

</div>

</div>
)
}

export default Welcome

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

import { auth } from '../firebase'
const AuthContext = React.createContext()

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 auth.signInWithEmailAndPassword(email, password)
}

function logout() {
return auth.signOut()
}

function resetPassword(email) {
return auth.sendPasswordResetEmail(email)
}

useEffect(() => {
const unsubscribe = auth.onAuthStateChanged(user => {
setCurrentUser(user)
// setUserId(user.uid)
setLoading(false)
})
return unsubscribe
}, [])

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

return (
<AuthContext.Provider value={value}>
{!loading && children}
</AuthContext.Provider>
)
}

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 (doc.exists) {

const activities = doc.data().barangay_activities

setActivities(activities)

} else {
// doc.data() will be undefined in this case

}
}).catch(function(error) {
console.log("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">
{act.day}
</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">
{act.title}
</h1>
<h1 className="font-poppins text-white
text-normal">
{"("}{act.date}{")"}
</h1>
</div>
<p className="text-white font-poppins top-
2 text-center">
{act.content}
</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) => {

e.preventDefault();
emailjs.sendForm('service_1g19nsi', 'template_s94515n', form.current,
'VV5VcT-KmR6FqT3GP')
.then((result) => {

setSubmitEmail(true)

}, (error) => {
console.log(error.text);
});
e.target.reset()
};

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[today.month()]}, {today.year()}
</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(today.month(today.month()
- 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(today.month(today.month()
+ 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">

{days.map((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(today.month(), today.year()).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" : "")}>

{date.date()}

</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="http://www.w3.org/2000/svg" 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 = []
snapshot.docs.forEach((doc) => {
users.push({ ...doc.data(), id: doc.id})

users.map((user) => {
setUserID(user.id)
})
if (userFound === true) {
userData()
}
console.log(requestDoc)

})

})

function userData(){

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

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

const userReq = doc.data().userRequest

setReqDoc(userReq)

// Object.values(userReq).map((user) => {
// })

// console.log(requestDoc)

} else {
// doc.data() will be undefined in this case
console.log("No such document!");
}
}).catch(function(error) {
console.log("Error getting document:", error);
});
setUserFound(false)

}

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 = []
snapshot.docs.forEach((doc) => {
users.push({ ...doc.data(), id: doc.id})

users.map((user) => {

const userId = user.id

const strUserId = userId.toString()
setUserID(strUserId)
setUserFound(true)
})

})

useEffect(() => {

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

if (doc.exists) {

const user_name = doc.data().userName
setUserName(user_name)
const fisrtLetter = Array.from(userName)[0]
const upperCase = fisrtLetter.toUpperCase()
setProfile(upperCase)

const user_email = doc.data().userEmail
setUserEmail(user_email)

const user_status = doc.data().userStatus
setUserStatus(user_status)

const user_contact_num = doc.data().userCotactNum
setUserContactNum(user_contact_num)

const user_address = doc.data().userAddress
setUserAddress(user_address)

const user_request = doc.data("Barangay Cedula")
setUserRequest(user_request)

} else {
console.log("No such document!");
}
}).catch(function(error) {
console.log("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 = []
snapshot.docs.forEach((doc) => {
users.push({ ...doc.data(), id: doc.id})
})

users.map((user) => {
setUserID(user.id)
setRequestTime(true)
})
if (requestTime === true){
dateToday()
}

})

//Send Email
const sendEmail = (e) => {
e.preventDefault();

emailjs.sendForm('service_1g19nsi', 'template_4ji04x8', form.current,

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

}, (error) => {
console.log(error.text);
});
e.target.reset()
};
//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 = year.toString()
const strMonth = monthName.toString()
const strDay = day.toString()
const strHour = hour.toString()
const strMinute = minute.toString()

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 (doc.exists) {

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

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

})

console.log("Success")

} else {
console.log("No such document!");
}
}).catch(function(error) {
console.log("Error getting document:", error);
});

}

// const userAct = () =>{

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

// getDoc(docRef).then(function(doc) {
// if (doc.exists) {

// // 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.'
// },
// )

// })

// console.log("Success")

// } else {
// console.log("No such document!");
// }
// }).catch(function(error) {
// console.log("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="http://www.w3.org/2000/svg" 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 .414.336.75.75.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.376.023.75.05 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=" [email protected]"
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("https://fonts.googleapis.com/css2?
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) {

e.preventDefault()

try {
setLoading(true)
setError("")
await login(emailRef.current.value, passRef.current.value)
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 './index.css'

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'

ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>

<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>

</React.StrictMode>
)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<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/main.jsx"></script>
</body>
</html>

/** @type {import('tailwindcss').Config} */

module.exports = {
content: ["./index.html", "./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": "https://malon0825.github.io/DeploymentCapstoneApp/",
"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'

// https://vitejs.dev/config/
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. “barangayesperanza.com”

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

Tactile Graphics Using 3D Printing: A Literature Review: Shreeraam G, Mrs. K.K.Naga Chandrika
No ratings yet
Tactile Graphics Using 3D Printing: A Literature Review: Shreeraam G, Mrs. K.K.Naga Chandrika
23 pages
Prci 08 Ta Hot Tap PDF
100% (1)
Prci 08 Ta Hot Tap PDF
2 pages
Poets
From Everand
Poets
Jose Trejo Maya
No ratings yet
A Teacher's Guide to Celebrating Positive Racial Identity
From Everand
A Teacher's Guide to Celebrating Positive Racial Identity
Bianca Sapara-Grant
No ratings yet
Evie and Jack
From Everand
Evie and Jack
Glenn Haybittle
No ratings yet
Poetic Insights
From Everand
Poetic Insights
Laura Buck
No ratings yet
calendario
No ratings yet
calendario
3 pages
Operation Ragnarok
From Everand
Operation Ragnarok
Kevin Coolidge
No ratings yet
Poems For The Weeping Kind
From Everand
Poems For The Weeping Kind
Althea Davis
No ratings yet
A Mighty Tree: An Illustrated Epic
From Everand
A Mighty Tree: An Illustrated Epic
Chris Vandeleur
No ratings yet
Web Tech
No ratings yet
Web Tech
14 pages
Spirits n' Chai
From Everand
Spirits n' Chai
D. Allyson Howlett
No ratings yet
Jakey's Fork
From Everand
Jakey's Fork
Richard Little
No ratings yet
Lab Manual
No ratings yet
Lab Manual
66 pages
React JS TOC_SFJBS_Saratha
No ratings yet
React JS TOC_SFJBS_Saratha
2 pages
Essential n8n Playbook
From Everand
Essential n8n Playbook
Leandro Calado
No ratings yet
FSD_Lab_Manual_1736308175
No ratings yet
FSD_Lab_Manual_1736308175
45 pages
In Between Worlds: A collection of poems
From Everand
In Between Worlds: A collection of poems
Carla M Peters
No ratings yet
Grounded Theory
From Everand
Grounded Theory
Dan Remenyi
No ratings yet
Wally Goes Outside: Scavenger Hunt!
From Everand
Wally Goes Outside: Scavenger Hunt!
Andrew Corsaro
No ratings yet
Off the Grid - Getting Started
From Everand
Off the Grid - Getting Started
Wayne J Lutz
No ratings yet
Masters Among Us: An Exploration of Supernal Encounters and Miraculous Phenomena
From Everand
Masters Among Us: An Exploration of Supernal Encounters and Miraculous Phenomena
Thomas Curley
No ratings yet
Dating Advice Book
From Everand
Dating Advice Book
Taylor S. Westbrook
No ratings yet
Tom Roberts "Go forward, dear": A horseman's life and legacy
From Everand
Tom Roberts "Go forward, dear": A horseman's life and legacy
Andrew McLean
No ratings yet
FSWD GLOB-1 (1) (1)
No ratings yet
FSWD GLOB-1 (1) (1)
17 pages
One Week to An MBA How to Get an Online Ivy League Education for Little or No Cost
From Everand
One Week to An MBA How to Get an Online Ivy League Education for Little or No Cost
James Abbott
No ratings yet
The Adventures of Mitee Mite: The Entire First Edition Collection
From Everand
The Adventures of Mitee Mite: The Entire First Edition Collection
David John
No ratings yet
Future-Proofing Manufacturing & the Supply Chain Post COVID-19
From Everand
Future-Proofing Manufacturing & the Supply Chain Post COVID-19
Lisa Anderson
No ratings yet
FS LAB RECORD
No ratings yet
FS LAB RECORD
15 pages
Angular Shopping Store: From Scratch to Successful Payment
From Everand
Angular Shopping Store: From Scratch to Successful Payment
Abdelfattah Ragab
No ratings yet
THERE AIN'T NO SUCH THING AS HELL: Or The Devil, Demons, Sin, Armageddon, The Antichrist, and Other Such Nonsenseageddon, The Antichrist, and
From Everand
THERE AIN'T NO SUCH THING AS HELL: Or The Devil, Demons, Sin, Armageddon, The Antichrist, and Other Such Nonsenseageddon, The Antichrist, and
Jim Hoffine
No ratings yet
Service Request Management System
No ratings yet
Service Request Management System
12 pages
You and Me Dancing to Gershwin
From Everand
You and Me Dancing to Gershwin
Christine Miles
No ratings yet
Things - Random
From Everand
Things - Random
kamal m Elkhalil
No ratings yet
Summer Intern Project Report: in Partial Fulfillment of The Requirements For The Degree of
No ratings yet
Summer Intern Project Report: in Partial Fulfillment of The Requirements For The Degree of
26 pages
FSD (part -1)
No ratings yet
FSD (part -1)
10 pages
IAT I III YEAR
No ratings yet
IAT I III YEAR
19 pages
To Live Again
From Everand
To Live Again
Jeffrey W. Massey
No ratings yet
Wrestleville: The Pro Wrestling Vault - Volume 2
From Everand
Wrestleville: The Pro Wrestling Vault - Volume 2
Vinny Berry
No ratings yet
code 1
No ratings yet
code 1
8 pages
Laughter Is My Superpower: Laughter Is My Superpower
From Everand
Laughter Is My Superpower: Laughter Is My Superpower
Latricia Scriven
No ratings yet
ABC Dogs - Learn the Alphabet with Dogs!
From Everand
ABC Dogs - Learn the Alphabet with Dogs!
P.G. Hibbert
No ratings yet
Words Matter
From Everand
Words Matter
Robert Byrum
No ratings yet
bullet-journal-app.tsx
No ratings yet
bullet-journal-app.tsx
6 pages
DevGrover Report
No ratings yet
DevGrover Report
72 pages
Staubs and Ditchwater: A Friendly and Useful Introduction to Hillfolks' Hoodoo
From Everand
Staubs and Ditchwater: A Friendly and Useful Introduction to Hillfolks' Hoodoo
H. Byron Ballard
3/5 (5)
Alok yada 1221609
No ratings yet
Alok yada 1221609
69 pages
Snipets
No ratings yet
Snipets
2 pages
Sudoku A Game of Mathematicians 320 Puzzles Medium Difficulty
From Everand
Sudoku A Game of Mathematicians 320 Puzzles Medium Difficulty
Kelly Johnson
No ratings yet
Silver Linings in Dark Clouds
From Everand
Silver Linings in Dark Clouds
Silverline Dennis Dic-Fiberesima
No ratings yet
The Road from Hyperpapalism to Catholicism: Volume 1: Theological Reflections on the Rock of the Church
From Everand
The Road from Hyperpapalism to Catholicism: Volume 1: Theological Reflections on the Rock of the Church
Peter A. Kwasniewski
No ratings yet
- - بسم الله الرحمان الرحيم -
No ratings yet
- - بسم الله الرحمان الرحيم -
31 pages
MongoDB Query
No ratings yet
MongoDB Query
9 pages
Snow
No ratings yet
Snow
59 pages
React Portfolio App Development: Increase your online presence and create your personal brand
From Everand
React Portfolio App Development: Increase your online presence and create your personal brand
Abdelfattah Ragab
No ratings yet
Thirty Things To Do After You Die: An epic fantasy novel for atheists
From Everand
Thirty Things To Do After You Die: An epic fantasy novel for atheists
Colon Lazars
No ratings yet
The Write Direction: The Ultimate Guide to Writing your Memoir
From Everand
The Write Direction: The Ultimate Guide to Writing your Memoir
Rodney Walker
No ratings yet
React concepts
No ratings yet
React concepts
9 pages
React
No ratings yet
React
39 pages
Benefits of Going Through the Great Tribulation
From Everand
Benefits of Going Through the Great Tribulation
Elwood Trost
No ratings yet
Pure Guidance
From Everand
Pure Guidance
Master Rashid
No ratings yet
IT230 - Assignment 2
No ratings yet
IT230 - Assignment 2
10 pages
Project Details 2023-2024 New 1 Marc 24
No ratings yet
Project Details 2023-2024 New 1 Marc 24
30 pages
Information Search and Analysis Skills (ISAS)
No ratings yet
Information Search and Analysis Skills (ISAS)
20 pages
Apple 10 12 2021 07 14 57 24 Lista
No ratings yet
Apple 10 12 2021 07 14 57 24 Lista
7 pages
Knowledge Check 2
No ratings yet
Knowledge Check 2
8 pages
Axpert Max II Manual 20210416
No ratings yet
Axpert Max II Manual 20210416
82 pages
Lesson 6
No ratings yet
Lesson 6
92 pages
Nakul Thesiespdf PDF
No ratings yet
Nakul Thesiespdf PDF
59 pages
Control Core Services v9.4 Release Notes: Foxboro Evo Process Automation System
No ratings yet
Control Core Services v9.4 Release Notes: Foxboro Evo Process Automation System
136 pages
Toc
No ratings yet
Toc
7 pages
Readme
No ratings yet
Readme
6 pages
The Official Full Circle Magazine Index - Full Circle Index
No ratings yet
The Official Full Circle Magazine Index - Full Circle Index
96 pages
SAP Navigation
No ratings yet
SAP Navigation
24 pages
A Framework of Sensor - Cloud Integration Opportunities and Challenges
No ratings yet
A Framework of Sensor - Cloud Integration Opportunities and Challenges
9 pages
EliteDataEngineeringProgramCurriculum (1)
No ratings yet
EliteDataEngineeringProgramCurriculum (1)
38 pages
Codd's Rule
No ratings yet
Codd's Rule
17 pages
Truvision NVR 22 SP User Manual PDF
No ratings yet
Truvision NVR 22 SP User Manual PDF
175 pages
cnpm2.05 LeManhCuong Baitap4.v2
No ratings yet
cnpm2.05 LeManhCuong Baitap4.v2
28 pages
7330
No ratings yet
7330
26 pages
ITR Report Format
No ratings yet
ITR Report Format
13 pages
Veracode RPA+BI DetailedReport A2019 6 Mar 2021 Patch Build 8122
No ratings yet
Veracode RPA+BI DetailedReport A2019 6 Mar 2021 Patch Build 8122
182 pages
Fixes: Possible Sa Anumang Error Na Na-Encounter Niyo After Mag-Install NG Software Na Offer Ko
No ratings yet
Fixes: Possible Sa Anumang Error Na Na-Encounter Niyo After Mag-Install NG Software Na Offer Ko
2 pages
Automate LinkedIn Tasks with the Apollo Chrome Extension – Apollo.io
No ratings yet
Automate LinkedIn Tasks with the Apollo Chrome Extension – Apollo.io
10 pages
POSEIDON - Licence
No ratings yet
POSEIDON - Licence
2 pages
Aleksandr Egorov jptv20
No ratings yet
Aleksandr Egorov jptv20
8 pages
02 - Computer Evolution and Performance
No ratings yet
02 - Computer Evolution and Performance
57 pages
Scada Pro - 1 - Example - Concrete - EN PDF
No ratings yet
Scada Pro - 1 - Example - Concrete - EN PDF
105 pages
Anushka Yadav (INDTRIAL)
No ratings yet
Anushka Yadav (INDTRIAL)
81 pages
Id: R4a Pass: 123456789
No ratings yet
Id: R4a Pass: 123456789
4 pages