A PROPOSED DESIGN AND IMPLEMENTATION

DSN4096-CAPSTONE PROJECT PHASE-II

Phase – II Report

Submitted by

Ojas Gupta (20BCE10590)

Manas Makde (20BCE10697)

Kartik Sharma (20BCE10099)

Satwik Srivastava (20BCE10576)

Page | 1
 in partial fulfillment for the award of the
degree of
BACHELOR OF TECHNOLOGY
in

COMPUTER SCIENCE AND ENGINEERING

SCHOOL OF COMPUTING SCIENCE AND ENGINEERING

VIT BHOPAL UNIVERSITY

SEHORE, MADHYA PRADESH - 466114

MAY 2024

Page | 2
 VIT BHOPAL UNIVERSITY, KOTHRIKALAN, SEHORE
MADHYA PRADESH – 466114

BONAFIDE CERTIFICATE

Certified that this project report titled “Sportzfy Web And App” is the

bonafide work of “Ojas Gupta (20BCE10590), Manas Makde (20BCE10697),

Kartik Sharma (20BCE10099), Satwik Srivastava (20BCE10576)” who carried out

the project work (DSN4096- Capstone Project phase-II) under my supervision.

Certified further that to the best of my knowledge the work reported at this time does

not form part of any other project/research work based on which a degree or award

was conferred on an earlier occasion on this or any other candidate.

PROGRAM CHAIR PROJECT GUIDE

Dr J. Manikandan, Dr. Anand Motwani,
Senior Assistant Professor (Gr-2), Senior Assistant Professor (Gr-17) ,
School of Computing Science and Engineering, School of Computing Science and Engineering,
VIT BHOPAL UNIVERSITY. VIT BHOPAL UNIVERSITY.

The DSN4096-Capstone Project phase-II Viva Voce Examination is held on ____________

Page | 3
 ACKNOWLEDGEMENT

First and foremost, we would like to thank the Lord Almighty for His presence and immense

blessings throughout the project work.

We would like to thank my internal guide Dr. Anand Motwani, for continually guiding and actively

participating in our project, and giving valuable suggestions to complete the project works.

We wish to express our heartfelt gratitude to Dr. J. Manikandan, Head of the Department, School of

Computing Science and Engineering for much of his valuable support and encouragement in

carrying out this work.

We wish to express our heartfelt gratitude to Dr. S. Poonkuntran, Professor and Dean, School of

Computing Science and Engineering for much of his valuable support and encouragement in

carrying out this work.

We would like to thank all the technical and teaching staff of the School of Computing Science and

Engineering, who extended directly or indirectly all support.

Last, but not least, We are deeply indebted to our parents who have been the greatest support while

we worked day and night for the project to make it a success.

Page | 4
 LIST OF FIGURES

FIGURE NO. TITLE PAGE

NO.
1.0 System Design 23
2.0 Home Page 25
3.0 Booking Calendar 26
4.0 View Booking Box 27
5.0 Log Book 28
6.0 Search integration 29
7.0 Web Editor 30
8.0 Setting Menu 31
9.0 Website 32
10.0 Component Testing 38
11.0 ER Diagram 39
12.0 UML Class Diagram 40
13.0 UML Interaction Diagram 41

Page | 5
 ABSTRACT

Sportzfy is a comprehensive digital solution comprising both a mobile application and a website, meticulously
crafted to streamline the daily operations of turf owners. With an intuitive interface and robust features,
Sportzfy empowers turf owners to effortlessly manage their booking slots, exercise full control over
reservations, and meticulously monitor every aspect of the booking process. The Sportzfy mobile application
and website serve as a centralized hub for turf management activities, offering owners unprecedented
convenience and efficiency in overseeing their turf facilities. Through Sportzfy, owners can seamlessly handle
the complexities of scheduling, ensuring optimal utilization of their turf resources while minimizing
administrative burdens. Key Features are given below:-

Easy Booking Management: Sportzfy simplifies the process of managing daily booking slots, allowing owners
to efficiently organize and allocate turf resources based on demand on the calendar.

Comprehensive Control: Owners have complete authority over bookings, with the functionalities like add,
modify, or cancel slot as needed, ensuring adherence to operational preferences and availability.

Detailed Monitoring: Sportzfy provides owners with real-time insights into booking activities, enabling them to
manage areas and turd, get updated information, and make informed decisions to enhance operational
efficiency.

Customizable Settings: The platform offers customizable settings to accommodate varying business
requirements, allowing owners to configure parameters such as pricing, availability, and booking rules with ease
and also updates latest information on the website.

User-Friendly Interface: Sportzfy has an intuitive and user-friendly interface, ensuring a seamless experience for
both owners and supervisors, thereby fostering enhanced monitoring and transparency.

Page | 6
 TABLE OF CONTENTS

CHAPTER TITLE PAGE NO.

NO.
List of Figures 5

Abstract
6

1 CHAPTER-1:
PROJECT DESCRIPTION AND OUTLINE 10
1.1 Introduction 10
1.2 Motivation for the work
11
1.3 Problem Statement 11
1.4 Objective of the work 12
1.5 Summary
CHAPTER-2: RELATED WORK INVESTIGATION
2.1 Existing Approaches/Methods 13
2.2 Pros and cons of the stated Approaches/Methods 14-15

Page | 7
 3 CHAPTER-3: REQUIREMENT ARTIFACTS
3.1 Introduction 16
16-17
3.2 Hardware and Software requirements
3.3 Specific Project requirements 17-18
3.3.1 Data requirement
3.3.2 Functions requirement
3.3.3 Performance and security requirement
3.3.4 Look and Feel Requirements
3.4 Summary 19

4 CHAPTER-4: DESIGN METHODOLOGY

AND ITS NOVELTY

4.1 Methodology and goal 11

4.2 Functional modules design and analysis
12-13
4.3 Software Architectural designs
13-15
4.4 UI Diagram
4.5 Summary 15-17

17
5 CHAPTER-5: TECHNICAL IMPLEMENTATION
& ANALYSIS
5.1 Outline 34-35

5.2 Technical coding and code solutions 36-39

5.3 Prototype submission
39-41
5.4 Summary 42

Page | 8
 6 CHAPTER-6: PROJECT OUTCOME AND
APPLICABILITY

6.1 key implementations outline of the System 43-44

6.2 Significant project outcomes 44-45
6.3 Project applicability on Real-world applications 45-46
6.4 Inference 46

7 CHAPTER-7: CONCLUSIONS AND

RECOMMENDATION

7.1 Outline 47
7.2 Limitation/Constraints of the System 48
7.3 Future Enhancements 48-49
7.4 Inference 49

APPENDIX A – Screen Shots 50-52

APPENDIX B – Coding 53-61

REFERENCES 62

Page | 1
 CHAPTER 1
PROJECT DESCRIPTION AND OUTLINE

1.1 INTRODUCTION

Sportzfy is an app designed specifically for turf owners to efficiently manage all aspects of bookings
with unparalleled control and monitoring. Sportzfy gives a comprehensive solution tailored to streamline
the complexities of turf management, empowering owners to oversee rates, discounts, time allocations,
canteen costs, payment statuses, and more, all from one intuitive platform. With Sportzfy, owners can
effortlessly adjust rates and apply discounts to attract customers and maximize revenue. Sportzfy allows
owners to efficiently allocate time slots based on demand and resource availability. By optimizing turf
utilization, owners can ensure a seamless booking experience for customers while maximizing
profitability. Sportzfy simplifies financial management by seamlessly integrating canteen costs into the
booking process. Owners can accurately calculate total costs for customers,

1.2 MOTIVATION FOR WORK

After frequent visits to the nearby turf, we developed a strong rapport with the turf owner. Recognizing
the challenges they faced in managing bookings and enhancing their online presence, we extended an
offer to assist them in developing an innovative solution. With our experience in technology and a
shared vision for improving turf management, we proposed the creation of Sportzfy – an intuitive app
designed to streamline operations and expand their reach in the digital realm.

Page | 1
 1.3 PROBLEM STATEMENT

In the business of turf management, turf owners face numerous challenges in efficiently managing
bookings and optimizing operational processes. These challenges stem from the absence of a centralized
platform tailored to their specific needs, resulting in inefficiencies, administrative burdens, and missed
opportunities for revenue generation. Without a dedicated solution in place, turf owners struggle to
maintain control over booking schedules, regulate pricing structures, monitor payment statuses, and
enhance their online presence.
Moreover, traditional methods of managing bookings, such as manual paperwork or fragmented digital
systems, lack the agility and flexibility required to adapt to evolving market demands and customer
preferences. Turf owners are often overwhelmed by the complexity of juggling multiple tasks
simultaneously, leading to scheduling conflicts, inaccurate financial tracking, and suboptimal resource
utilization.

1.4 OBJECTIVE OF THE WORK

The primary objective of the Sportzfy project is to design and implement a comprehensive app for turf
booking and management, aimed at enhancing the overall experience for turf owners and customers
alike. The following specific objectives outline the scope and goals of the project:

 Conduct an in-depth analysis of the current turf booking system and its limitations, including
challenges related to manual booking processes, scheduling conflicts, and lack of real-time
visibility into turf availability.

 Identify the needs and expectations of turf owners and customers, including preferences for
booking methods, scheduling flexibility, pricing structures, and user interface preferences.

 Develop a user-friendly and intuitive mobile application that caters to the unique requirements of
turf booking and management, prioritizing ease of use, accessibility, and functionality for both
turf owners and customers.

 Implement key features within the app, such as seamless booking functionality, real-time
availability updates, flexible pricing options, web editor, and booking log for turf owners.

Page |
  Evaluate the performance and effectiveness of the Sportzfy app through rigorous testing, user
feedback analysis, and performance metrics tracking, with a focus on identifying any usability
issues, technical glitches, or areas for improvement.

1.5 SUMMARY

Sportzfy is a revolutionary mobile application designed to transform the landscape of turf booking and
management. With a focus on enhancing the experience for both turf owners and customers, Sportzfy
offers a comprehensive solution to streamline operations, optimize resource utilization, and elevate the
overall customer experience. By conducting thorough analysis of the current challenges faced in turf
management, Sportzfy addresses common pain points such as manual booking processes, scheduling
conflicts, and lack of real-time visibility. Through user feedback and meticulous testing, Sportzfy
ensures that its user-friendly interface and intuitive features meet the diverse needs and expectations of
turf owners.

Page |
 CHAPTER 2
RELATED WORK INVESTIGATION

2.1 EXISTING APPROACHES/METHODS

In the segment of turf management, various app and web options exist, each offering unique features and
functionalities tailored to the needs of turf owners and customers. Some existing options include platforms
like Sporloc, which aim to streamline the booking process, optimize resource utilization, and enhance the
overall customer experience.

Sporloc provides turf owners with a comprehensive suite of tools to manage bookings, track availability,
and process payments seamlessly. Its user-friendly interface and intuitive features make it a popular
choice among turf owners looking to streamline their operations and improve customer satisfaction. While
these existing options provide valuable solutions for turf management, each comes with its own set of
strengths and limitations.

it's essential for turf owners to carefully evaluate their needs and preferences before selecting the most
suitable app or web option for their turf management needs. By leveraging the capabilities of these
innovative applications and web-based solutions, turf owners can optimize their operations, improve
customer engagement, and stay competitive in the ever-evolving turf industry landscape.

Page |
2.1 PROS AND CONS OF THE STATED APPROACHES/ METHODS
While turf management sites like Sporloc offer numerous benefits, they also come with their share of
drawbacks and limitations. Below are some potential cons associated with these platforms:
1.
Complexity of Implementation: Implementing a new turf management system can be a complex and
time-consuming process. Turf owners may encounter challenges related to data migration, system
integration, and staff training, which can disrupt operations and incur additional costs.

2. Cost Considerations: The upfront cost of acquiring and implementing a turf management platform can
be prohibitive for some turf owners, particularly smaller facilities with limited budgets. Additionally,
ongoing subscription fees and maintenance costs may further strain financial resources over time.

3. Learning Curve: Transitioning to a new turf management system may require a significant learning
curve for both turf owners and supervisor. Navigating the platform's interface, understanding its features
and functionalities, and adapting to new workflows can be challenging, leading to productivity dips and
potential user frustration.

4. Limited Customization Options: While turf management platforms offer a range of features and
functionalities, they may lack the flexibility to accommodate specific business requirements or unique
operational workflows. Turf owners may find themselves constrained by the platform's predefined
settings and limited customization options, which can hinder their ability to tailor the system to their
needs.

5. Technical Issues and Downtime: Like any software solution, turf management platforms are susceptible
to technical glitches, bugs, and system downtime. These issues can disrupt operations, impact customer
service, and erode trust in the platform's reliability and performance.

6. Technical Support: The quality of customer support provided by turf management platform vendors can
vary widely. Turf owners may encounter challenges in accessing timely assistance, receiving satisfactory
resolutions to their issues, or accessing resources and documentation to troubleshoot problems
independently.

Page |
 7. Scalability Constraints: As turf facilities grow and evolve, they may require a turf management platform
that can scale alongside their business. Some platforms may have limitations in terms of scalability,
hindering their ability to accommodate increasing booking volumes, expanding facilities, or new
business ventures.

Page |
 CHAPTER-3
REQUIREMENT ARTIFACTS

3.1 INTRODUCTION
For Sportzfy, ensuring the success of its app and website requires careful attention to a diverse range of
requirements across three key categories: functional, non-functional, and usability. Functional requirements
dictate the core features and capabilities of the app and website, encompassing functionalities such as booking
management, real-time availability updates, payment status, and communication channels between turf
owners and customers.
Non-functional requirements are equally critical, focusing on aspects such as performance, security, and
scalability. These requirements ensure that the Sportzfy platform can handle high volumes of bookings
securely, provide responsive performance even during peak usage times, and protect sensitive user data.
Usability requirements play a vital role in shaping the overall user experience of the Sportzfy app and website.
Intuitive navigation, clear and concise interfaces, and seamless user interactions are essential elements that
contribute to user satisfaction and engagement. By prioritizing usability, Sportzfy aims to create an accessible
and user-friendly platform that caters to the needs and preferences of both turf owners and customers.

3.2 HARDWARE AND SOFTWARE REQUIREMENTS

The hardware requirements for Sportzfy App and Web are:

● Server: The app needs a server to run the website and handle requests from users.
● Storage: The website will need a database to store user details, order records, and menu
information
● Network: The website require a dependable network connection to ensure rapid response times
and avoid any interruptions in service.

Page |
 The requirement to these hardware prerequisites is crucial for optimizing the performance, stability, and
security of both the app and website. By fulfilling these prerequisites, Sportzfy can deliver a smooth and
secure booking experience for its clients. Furthermore, scalability stands as a pivotal factor in determining
hardware needs. As the business expands and encounters heightened traffic, the inclusion of extra servers and
hardware may become necessary to sustain optimal performance and avoid downtime.
The software requirements for Sportzfy App and Web are:

● Node.js
● Express
● React native
● MongoDB
● VScode
● Programming languages like: JavaScript, CSS, HTML.

Meeting these software needs is crucial to create a working and safe booking system on the Sportzfy App. By
fulfilling these needs, the website can offer a smooth and secure experience for its clients.

3.3 SPECIFIC PROJECT REQUIREMENTS

3.3.1 Data Requirements:

● The app must store different user profiles to allow different levels of content access.
● The app must store a log of all bookings, along with the name, phone numbers, slot time, area booked,
rate, discount etc.
● The app must store Booking details of all customers, including payment status and amount to be
paid.

Page |
3.3.2 Functionality Requirements:

● The app must allow different access mode for different users.
● The app must allow clients to navigate between all features like calendar, search, log book, web editor.
● The app must allow clients to check slot available and book it.
● The app must provide a slot confirmation box and link to external messaging applications for
confirmation (e.g. WhatsApp or Sms).
● The app must have search integration to simplify the process of going through all data.
● The app must allow clients to edit details and images in the website via the app

3.3.3 Performance Requirements:

 The app needs to respond well and load fast on both computers and phones.
 The app should manage many users at once without getting slower.
 The app should manage bookings even during busy times.

3.3.4 Security Requirements:

 The App must use secure authentication protocols to prevent unauthorized access to customer
accounts.
 The server must sanitize the incoming data to prevent any form of malicious data attack.
 Different type of access control should be provided with different access codes.

3.3.5 Looks and Feel Requirements:

● The app and website must have a clean and modern design that is visually appealing.
● The app must be easy to navigate and use, with clear labels and instructions.
● The app must have multiple views for daily booking data.

These requirements are important to ensure that the Sportzfy app is functional, reliable, and user-friendly,
while also maintaining security and performance standards. By meeting these requirements, the app can
provide a positive experience for clients and help to build a strong brand presence in the online domain.

Page |
3.4 SUMMARY

By making and following the listed requirement documents, we can ensure that our app "Sportzfy" for the turf
is made and used to meet what the business and users want. It will also work well, be safe, and easy to use. All
the requirement were carefully picked but sustain the whole process.

Page |
 CHAPTER-4
DESIGN METHODOLOGY AND ITS NOVELTY

4.1 METHODOLOGY AND GOAL

For the Sportzfy project, we're using a design method called User-Centered Design (UCD). This means
we're focusing on what the users need and like when we're designing the app. Our goal is to make an app
that's easy and enjoyable for people to use when they want to book turf slots.

With UCD, we're doing a bunch of steps to make sure we're on the right track. First, we're talking to
users and learning about what they want. Then, we're making up "personas" to represent different types
of users. After that, we're making prototypes of the app and testing them out to see if they work well.
We're doing all of this to make sure that the final app is something that users will like and find useful.

On the technical side, we're using a method called agile software development. This means we're
working in small steps and making changes as we go along. We're getting feedback from users regularly
and making improvements based on what they say. This way, we can make sure that the app we're
building is always getting better and meeting the needs of the users.

By using UCD and agile software development together, we're making sure that Sportzfy is a great app
that people will love to use. We want to create something that's helpful and easy to use for everyone
involved, and these methods help us do just that.

Page |
4.1 FUNCTIONAL MODULES DESIGN AND ANALYSIS

Functional Modules for this project are:

● Login Module:

This module allows users to login with the app by providing their different credentials like a
username and password. Different set of credential are given to the owner and the supervisor for
having different level of access to the functions.

● Home Page and Analytics Module:

The Home page and Analytics module shows user different option on the screen like calendar,
search, web editor, signout, log book and also show the earning from current month and earning of
all time.

● Booking Calendar Module:

Within the app, the booking calendar module serves as a valuable tool for clients, facilitating the
process of finding and reserving available slots on the calendar. This feature ease the booking
experience, allowing users to conveniently browse through the calendar to identify open slots that align
with their scheduling needs.

● Log Book Module:

Through this module clients can effortlessly view all bookings made for a particular day, including
details such as name, contact number, booking time, and payment status, eliminating the need to
navigate through the calendar repeatedly.

● Search Integration Module:

Owners and managers can efficiently search for specific logs by entering the number, retrieving all
bookings associated with that particular number for quick reference and management.

Page |
 ● Web Editor Module:

With the Web Editor module, users gain the capability to modify images, update announcements, and
provide new information showcased on the website. This feature empowers users to maintain the
website's relevance and freshness by easily making edits without requiring technical expertise.

● Setting Module:

Within the Setting module, users possess the ability to adjust the default booking rates for various areas
and customize the messages sent to customers upon confirming their bookings. By providing flexibility
and customization options, the Setting module enables users to effectively manage and optimize their
booking processes to align with their business objectives.

Design:

The Sportzfy app has a modern and easy-to-use design, with a neat and simple layout. It mostly uses
white and blue colors, with some grey for important parts. The website works well on both computers
and phones, so it's easy to use no matter what device you're using.

The Sportzfy app is made with React-Native, and the website uses HTML, CSS, and JavaScript. The
backend part is supported by Node.js, Express, and MongoDB. The design is made in a way where each
part is separate and can be easily put together into the whole system.

4.2 SOFTWARE ARCHITECTURAL DESIGNS

For the project's architecture, we'll use Node.js and Express to create the server-side part. It'll handle requests
from the client-side. The App will be made with React-Native, making it easy to use and understand. We'll
store and get data from MongoDB, with MongoDB Atlas helping the server-side talk to the database. The
website will be built using conventional languages like JavaScript, CSS, and HTML.

Fig 1.0

Page |
 Fig 1.0

Page |
 The architectural design includes the following components:

● Client-Side:
1. React Components: Every page in the app is split into reusable parts made with React.
2. State Management: We handle the data's status using the React Context API, which lets us share
information between parts.

● Server-Side:
1. Node.js and Express: We use Node.js and the Express framework to build the server-side part.
2. API Endpoints: The server-side offers access points for the app, allowing it to get and save data.
3. MongoDB Atlas: We use MongoDB for the database, along with a MongoDB driver to talk to it
from the server-side.
4. Authentication: The server-side manages user logins and access to secure areas.

Development Tools:
1. Vscode: A code editor that was compatible with every envirnment.

2. Git: A version control system that is used to track changes to the codebase

3. Gimp: a Linux based software for gathering initial designs from the clients.

This setup offers a flexible and organized structure for the website, making it simple to upkeep and grow
in the future.

Page |
4.3 USER-INTERFACE DESIGNS

The Sportzfy Turf App homepage serves as the central page for users to navigate and utilize various features
aimed at streamlining booking related activities. The homepage focuses on its design, functionality, and user
experience.
Key Features Analysis:
Booking Calendar: The booking calendar feature allows users to
schedule turf slots effortlessly, facilitating efficient planning and
reservation of playing times.
Logbook: Users can track their sports activities, including workouts
and match results, ensuring organized record-keeping and progress
monitoring.
Search Integration: With search integration, users can easily discover
nearby sports facilities, enhancing accessibility and convenience in
finding suitable venues for games.
Web Editor: The web editor feature enables users to customize their
profiles and manage team details, providing flexibility and
personalization options.
Settings: Users have the ability to customize their Sportzfy
experience through the settings menu, allowing for tailored
preferences and notifications.
Logout: The logout option ensures secure account management,
offering users peace of mind when ending their sessions.
Fig 2.0

Page |
The Booking Calendar

The booking calendar feature in the Sportzfy turf app offers a comprehensive solution for managing turf
bookings efficiently. The calendar divides the entire day into equal time slots, typically by the hour, providing
users with a clear and structured view of available time intervals. This segmentation enables users to easily
identify open slots and select the desired start and end times to
define the duration of their booking.
By allowing users to specify the starting and ending
slots, the booking calendar empowers them to customize
the duration of their bookings according to their specific
needs and preferences. Whether it's a brief practice
session, a friendly match, or a full-fledged tournament,
users have the flexibility to book turf facilities for the
duration that best suits their requirements. Moreover, the
booking calendar feature enhances user experience by
offering intuitive navigation and seamless interaction.
Users can effortlessly scroll through the calendar,
visually inspecting available time slots and making
selections with just a few taps or clicks. This streamlined
process eliminates the need for manual calculations or
guesswork, ensuring a hassle-free booking experience for
both turf owners and customers. Additionally, the
booking calendar serves as a centralized hub for
managing all turf bookings, providing turf owners with a
comprehensive overview of scheduled activities
throughout the day. This visibility enables turf owners to
optimize resource allocation, minimize scheduling
conflicts, and maximize revenue opportunities by efficiently utilizing available time slots.
Fig 3.0 Overall, the booking calendar feature in the Sportzfy turf app
plays a pivotal role in facilitating seamless turf booking experiences, empowering users to easily schedule and
manage their activities while enhancing operational efficiency for turf owners. Its user-friendly interface,
customizable duration settings, and comprehensive scheduling capabilities make it a valuable tool for both turf
owners and customers alike.

Page |
The View Booking Dialog Box

In the Sportzfy app, the "view booking" dialog box is a pivotal

component that facilitates the booking process by prompting users to
input essential information before confirming a slot reservation. This
dialog box appears when users select an available slot on the app's
interface.
Within this dialog box, users are required to fill out several fields to
complete the booking transaction comprehensively:
1. Name: Users are prompted to input their full name, providing the turf
owner with a clear identification of the individual making the booking.
2. Number: Contact information in the form of a phone number is
requested, enabling the turf owner to establish communication with the
user if necessary.
3. Time: Users select the desired time slot for their booking from the
available options displayed in the app's calendar interface.
4. Description: A brief description of the booking purpose is entered,
offering clarity to the turf owner regarding the nature of the reservation,
whether it pertains to a training session, match, or other activities.
Fig 4.0
5. Area Booked: Users specify the particular area of the turf they intend to book, such as a specific field, court,
or pitch, ensuring accurate allocation of resources by the turf owner.
6. Rate: The rate for the booking is entered, often determined by factors like duration and time of day,
providing transparency regarding the associated costs.
7. Discount: Users may input any applicable discount codes or promotional offers to avail reduced rates,
enhancing affordability and incentivizing bookings.
8. Canteen Cost: Anticipated expenses for canteen purchases during the booking period are recorded, enabling
comprehensive financial tracking and reconciliation.
9. Payment Status: Users indicate the current payment status of the booking, specifying whether payment has

Page |
been successfully processed or is pending.
By meticulously filling out these fields, users ensure that all pertinent information required for the booking
transaction is accurately captured and communicated to the turf owner.

The Log Book

The log book feature in the Sportzfy app serves as a comprehensive record-
keeping tool, providing users with a centralized repository to review all
bookings made for a given day, along with pertinent details associated with
each reservation.
Upon accessing the log book within the app, users are presented with a
detailed overview of all bookings scheduled for the selected day. This
information-rich interface typically includes the all details for each
booking.
By consolidating these details within the log book interface, users can
efficiently review and manage all bookings made for the day, facilitating
effective communication, financial tracking, and operational planning for
turf owners and administrators. This centralized record-keeping
functionality enhances transparency, accountability, and efficiency within
the booking process, ultimately contributing to a seamless and well-
managed turf management experience for all stakeholders involved.

Fig 5.0

Page |
 The Search Integration

The Search Integration feature in the Sportzfy app enhances user accessibility and facilitates efficient booking
management by enabling users to retrieve specific booking details through a streamlined search functionality.
This feature empowers users to effortlessly locate all bookings associated
with a particular individual by simply entering their contact number into the
search bar.
Upon accessing the Search Integration feature within the app, users are
presented with a user-friendly interface that prompts them to input the
contact number associated with the desired bookings. Once the contact
number is entered, the app leverages its integrated search algorithm to scan
the database and retrieve all relevant booking records linked to the provided
number.
The search results are then displayed in a comprehensive and organized
manner, presenting users with a detailed overview of all bookings attributed
to the specified contact number. Each booking entry typically includes a
range of pertinent details, such as the booking time, client name, reserved
time slot, description of the booking, booked area, booking rate, applied
discounts, canteen expenses, and payment status.

Fig 6.0 This detailed presentation of booking information empowers users to swiftly
review and manage all bookings made by a specific individual, facilitating effective communication, financial
tracking, and operational planning for turf owners and administrators. Moreover, the Search Integration feature
contributes to enhanced transparency, accountability, and efficiency within the booking process, ultimately
enhancing the overall user experience and facilitating seamless turf management operations.

Page |
 The Web Editor

The Web Editor feature within the Sportzfy app empowers users with the capability to dynamically modify and
update website content, facilitating real-time dissemination of information, announcements, and updates
pertaining to tournaments, events, and news. This feature serves as a
versatile tool for users to exercise creative control over their online
presence, enabling them to curate engaging and relevant content that
resonates with their target audience.
Upon accessing the Web Editor feature within the app, users are
greeted with an intuitive and user-friendly interface that provides
seamless navigation and robust editing capabilities. The feature
typically encompasses a range of functionalities: -
Content Editing: Users can modify and update textual content
displayed on the website, allowing for the addition of tournament
schedules, event announcements, news articles, and other relevant
information. This flexibility enables users to keep their audience
informed and engaged with the latest updates and developments within
the turf community.
Photo Management: The Web Editor feature enables users to upload,
edit, and manage photos and images showcased on the website. Users
can easily swap out outdated images, add visuals to complement
textual content, and maintain a visually appealing and dynamic online
presence.
Fig 7.0
Announcement Creation: Users can create and publish announcements or alerts directly through the Web Editor
interface, notifying visitors of upcoming tournaments, special events, promotions, or other noteworthy updates.
Overall, the Web Editor feature empowers users to exercise creative autonomy and maintain a dynamic and
engaging online presence for their turf facilities. By providing robust editing capabilities and customization
options, this feature facilitates effective communication, community engagement

Page |
 The Setting Menu

The Settings menu within the Sportzfy app serves as a

comprehensive platform for users to customize and manage
various aspects of their turf facility operations, ranging from
adjusting default rates to configuring automated messaging
protocols and establishing rules and regulations. This feature
empowers users with granular control over critical parameters,
ensuring alignment with organizational objectives and operational
preferences.
Upon accessing the Settings menu within the app, users encounter
a meticulously designed interface that facilitates intuitive
navigation and seamless configuration of key settings. The feature
typically encompasses a diverse array of functionalities, including
but not limited to:
Rate Management: Users have the ability to customize default
booking rates for different areas or facilities within their turf
venue. This includes setting hourly rates, daily rates, or special
pricing structures for peak hours, weekends, or holidays. By
adjusting rates through the Settings menu, users can optimize
revenue generation strategies and maintain competitiveness within
the market.

Fig 8.0
Messaging Customization: The Settings menu enables users to tailor automated messages that are sent to
customers upon confirming their bookings. Users can personalize message content, including booking
confirmations, reminders, and updates, to reflect their brand identity and communication style. This
customization fosters a professional and engaging customer experience while providing pertinent information to
booking parties.
Rules and Regulations: Users can establish and enforce rules and regulations governing turf facility usage
through the Settings menu. This may include specifying booking policies, cancellation procedures, code of
Page |
conduct guidelines, and safety protocols. By clearly articulating rules and regulations, users promote
transparency, mitigate risks, and ensure compliance with legal and operational standards.

The Website Design

The Sportzfy website, meticulously crafted and seamlessly integrated with the accompanying app, offers users a
dynamic platform to access and manage a myriad of information pertaining to turf facilities. With a user-
friendly interface and robust functionality, the website serves as a comprehensive hub for users to stay
informed, engaged, and connected with their turf community. At the core of the Sportzfy website lies a wealth
of essential features and resources designed to cater to the diverse needs of users. Users can effortlessly navigate
through a repository of announcements, updates, and event schedules, ensuring they are always up-to-date with
the latest news and developments within the turf community. Additionally, comprehensive information
regarding turf facilities,
including rules, regulations,
and booking policies, is readily
available to users, fostering
transparency and clarity in
facility operations.
The website also boasts an
extensive gallery showcasing
the turf facilities in all their
glory.
Fig 9.0
It allowing users to visually explore and appreciate the amenities and offerings available. From pristine playing
fields to state-of-the-art facilities, the gallery provides a compelling glimpse into the world of turf sports.
Furthermore, users can access vital contact information, facilitating seamless communication with turf
administrators and management teams. Whether seeking assistance, making inquiries, or providing feedback,
users can easily connect with the relevant stakeholders through the website's intuitive contact features. One of
the standout features of the Sportzfy website is its seamless integration with the accompanying app, enabling
users to make real-time updates and modifications to information and images directly from their mobile devices.

Page |
4.4 SUMMARY
The project was organized using a waterfall methodology, which means each stage flowed into the next,
starting from requirements gathering all the way to software design. The app we proposed to the client offers a
fresh way to handle turf bookings and monitoring. With this app, turf management can be handled from
anywhere, giving users a lot of flexibility and control. It's designed to be user-friendly, making it easy for turf
owners to manage their facilities and keep track of bookings remotely.

Page |
 CHAPTER-5
TECHNICAL IMPLEMENTATION & ANALYSIS

5.1 OUTLINE

I. Front-End Implementation
A. Website UI Design
1. Created prototype design
2. Building wireframes for initiation
3. Implementing UI using HTML, CSS, JavaScript
B. React-native app implementation
1. Setup react native project using create-react-native-app
2. Implement context for global state management
3. Implement multi-page navigation
4. Create basic widget components
5. Created base page components
6. Added functionality using hooks

II. Back-End Implementation

A. MERN implementation
1. Created environment using npm-init
2. Set-up Node.js and Express server
3. Configuring MongoDB Atlas for data storage
4. Use Express middleware for error handling and logging
5. Create API endpoints for data retrieval and manipulation
6. Establishing connection with mobile application
B. Authentication
1. Create endpoints for user registration and login
C. Database
1. Defining MongoDB database schema
2. Created dummy collections for testing
3. Implement CRUD operations for database manipulation

Page |
 III. Testing and Validation
A. Unit Testing
B. Integration Testing
C.Component Testing

IV. Deployment
A. Set up server deployment on cyclic.sh
B. Ensure proper scaling and performance of the application
C. Set-up front end hosting on Netlify and connecting with git

Page |
 5.2 TECHNICAL CODING AND CODE SOLUTIONS

1. Setting up the Development Environment:

● Install Node.js: This provided us with the runtime environment for executing JavaScript code
on the server-side.

● Install MongoDB: Used to set up the database for our project.

● Install VScode: Used this as your code editor for writing the project code.

● Set up React-Native: This gave us a basic project structure to start with.

2. Front-end Development:

● Create React Components: We built reusable and modular React components for different
sections of our application’s user interface.

● Implement HTML, CSS and JavaScript: We constructed the fundamental framework

using HTML, then enhanced its appearance with CSS, and added functionality using
JavaScript

● Implement Routing on server: created separate routes for handling various request for
either web or app.

● Fetch Data from APIs: Implement http request in app to fetch data from the server

3. Back-end Development :

● Establish Express Server: We created an Express server to manage requests from the client-
side and generate corresponding responses.
● Define API Endpoints: We devised and deployed RESTful API endpoints within Express,
catering to diverse functionalities including user authentication, data retrieval, creation, and
deletion.
● Connect to MongoDB Atlas: Leveraging a MongoDB driver like Mongoose, we established
seamless connectivity between our Express server and the MongoDB database.
● Define Data Structures: We outlined structured data formats for storing booking and setting
values, ensuring efficient data management within the system.

Page |
 4. Database Management:

● Set up MongoDB Collections: We built and establish MongoDB collections to store data
pertinent to various entities within the application.
● Execute CRUD Operations: We integrated Create, Read, Update, and Delete functionalities
within Atlas, enabling seamless interaction with the database collections .

5. Testing:

The testing process for the prototype started by evaluating the functionality of individual units in isolation.
Subsequently, additional units were integrated, and then combined performance was assessed . Finally,
comprehensive validation was conducted on the entire component to ensure its overall operational
integrity. The detailed testing phase are given below:-

1. Unit Testing : Unit tests focus on examining small sections of code, such as individual functions or
classes. One advantage of unit tests is their efficiency in both writing and execution. This means you
receive immediate feedback on whether your tests are successful as you progress with your work.
func send_message(string content){
}
In the prototype version, the function named "send_message" is tasked with sending booking
confirmations to customers. Testing this function was conducted with complete isolation to ensure its
functionality is thoroughly evaluated.

2. Integration Testing: Integration testing involves combining real individual units, as seen in the
application, and testing them together to confirm their combined functionality meets expectations. When
developing larger software systems, various components must interact seamlessly with each other. The
example relating to this testing is mentioned below
func retrieve_booking_data(username, password, route){

let res: any = await fetch(route, {

method: "GET",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
username: username,
password: password
})

Page |
 res = await res.json()

return res
}

const booking_data=retrieve_booking_data(mock_username, mock_password, mock_route)

let message=`Thank you for choosing Sportzfy Turf!

your booking Id is ${booking_data.id}`

send_message(booking_data.phone_number, message)

This code defines a function called `retrieve_booking_data` that retrieves booking information from a
specified route. It takes three parameters: `username`, `password`, and `route`. It sends a GET request to
the specified route using the provided credentials (username and password)
After defining the function, it invokes `retrieve_booking_data` with values for `username`, `password`,
and `route`, and stores the result in `booking_data`.Then, it createss a message string using the retrieved
booking data. The message thanks the user for choosing Sportzfy Turf and includes their booking ID.
Finally, it calls function `send_message` with the phone number extracted from `booking_data` and the
create a message. Combining both unit worked accordingly and the test was successful.

3. Component Testing: Component testing involves assembling different sets of units that are tested
individually and along with other units and assessing whether the entire module functions properly
when integrated. This component exhibits
functionality where the `retrieve_booking_data`
function is automatically triggered upon loading,
likely to fetch booking information. Additionally,
when users interact by pressing the send message
button, it initiates the `send_message` function,
presumably to communicate booking details to the
user.

Through rigorous testing procedures, the component

underwent thorough examination to validate its proper
functioning. As a result, it successfully met the
anticipated behavior and performance criteria.

Page |
 6. Deployment: Fig 10.0

● Hosting Setup: We opted for the hosting service provider

Cyclic.sh to deploy our application and make it available online.
● Environment Variables Configuration: We established environment variables to safeguard
sensitive data such as database connection strings or API keys.

5.3 Database Design and Working Principles

The ER diagram of the database is shown below, which is a type of diagram that illustrates the relationship
between entities in a
database. The ER data
model specifies an
enterprise schema that
represents the overall
logical structure of a
database graphically. In this
case, there are three
entities: user, setting, and
booking_data.
booking_data has unique
attributes such as phone
number, description, client
name, from_date, till_date,
and expenses, which
includes attributes such as
advance_payment, discount, and rate_per_hour.

The user entity has attributes such as username, password, and type, while setting has attributes such
as default_rate, default_duration, and WhatsApp messages. The relationships depicted are user books
the data and modifies setting.
Page |
 UML Class Diagram – The UML class diagram for the Sportzfy Turf app depicts the structural
design of the application in a clear and concise manner. It illustrates the various classes involved and
their relationships, facilitating developers to understand the system's architecture. In simple terms, it
outlines the different components of the app, such as User, Booking, Turf, Payment, and Schedule.
Each class represents
a distinct entity
within the system,
with attributes and
methods defining
their behavior.
Relationships
between classes, like
associations and
dependencies, are
depicted through
connecting lines,
indicating how they
interact with each
other. This diagram
serves as a blueprint for developers, guiding them in the implementation process and ensuring the
app's functionality aligns with the intended design.

Fig 12.0

Page |
UML Interaction Diagram

Fig 13.0

The UML class interaction diagram of Sportzfy Turf app illustrates how different classes within the app interact
with each other to fulfill various functionalities. This diagram presents a clear visual representation of the
relationships and dependencies among classes, aiding in understanding the app's architecture and flow of data.
Through simple words, it showcases how user interactions, data processing, and system behaviors are organized
within the app, enabling developers and stakeholders to grasp its structure and functionality efficiently.

Page |
 5.4 SUMMARY

The technical approach taken for Sportzfy involved leveraging a combination of backend and frontend
technologies, along with database management and design tools. Here's a breakdown of the key
components used:
● Backend Development: Node.js and Express were employed to handle server-side operations. Node.js
facilitates running JavaScript code on servers, while Express simplifies API and web service development,
managing HTTP requests and routing. These technologies ensured efficient handling of server-side tasks
and interactions with MongoDB for data management.
● Frontend Development: React, along with JavaScript, CSS, and HTML, formed the foundation of
frontend development. React, a widely-used JavaScript library, enabled the creation of reusable UI
components, enhancing user interface functionality. JavaScript, CSS, and HTML were utilized to further
refine and style the application's frontend interface.
● Database: MongoDB Atlas served as the project's database, storing and retrieving data pertinent to
Sportzfy's features and functionalities. MongoDB Atlas provided a reliable and scalable database solution,
facilitating seamless data management within the application.
● Integrated Development Environment (IDE): Visual Studio Code (VS Code) served as the primary IDE
for coding tasks. VS Code offers a range of features and extensions, including syntax highlighting,
debugging tools, and source control integration, enhancing the development experience and productivity.
● Design and Prototyping: Gimp, a collaborative design tool, was utilized for designing and prototyping
Sportzfy's user interface. Gimp facilitated the creation of interactive prototypes, allowing for feedback and
review from stakeholders, thereby ensuring the development of a user-friendly and intuitive application.
By leveraging these technologies and tools, the Sportzfy project achieved efficient backend functionality, a
responsive frontend interface, seamless database integration, and effective design and prototyping. This
approach enabled streamlined development, code reusability, and the creation of a robust and user-centric
application.

Page |
 CHAPTER-6
PROJECT OUTCOME AND APPLICABILITY

6.1 KEY IMPLEMENTATION OUTLINES OF THE SYSTEM

● User Management:

A. Implement user registration and authentication using Node.js, Express.js, and MongoDB.

B. Create different user profile with set of credentials.

C. Enable concurrent access for owners and supervisors.

● Booking Calendar:

A. Develop a calendar format slot booking page.

B. Implement easy navigation in year months and dates.

C. Include add and cancel feature for slot booking.

● Log Book:

A. Design a listed of tab of the booked entities.

B. Allow user to view all details of the booked slot like name, slot, time, date, etc.

C. Create different Section for different areas.

● Web Editor:

A. Enable users to edit website from app.

B. Create a dashboard for update information and changing images on the website.

● Setting:

A. Create a user dashboard for changing app’s default rates.

B. Implement default message text field which can be modified in the setting menu

● Search Integration:

A. Allow user to search a particular slot by entering number of the customer.

Page |
 B. Display all the entries made by the customer in chronological order.

● Web Development:

A. Develop a web page for marketing purposes.

B. Display all the details like photos, dimensions contact information, rules etc.

C. Optimize load time and response time of the app and web integration.

These key implementations will form the core functionalities of the system, providing a robust and
user-friendly food ordering and delivering platform.

6.2 SIGNIFICANT PROJECT OUTCOMES

 Enhanced User Control: The ability for users to modify website content through the Sportzfy app
significantly empowered turf owners and administrators. This feature allowed them to swiftly
update announcements, adjust booking rates, and upload new images directly from their mobile
devices. As a result, users could promptly adapt to changing circumstances, ensuring that their
online presence remained current and informative.
 Improved User Engagement: By enabling users to actively participate in website management,
Sportzfy fostered a sense of ownership and engagement among turf owners. The interactive
nature of this feature encouraged users to regularly update their website content, resulting in a
dynamic and engaging online platform. Visitors were more likely to return to the website to
access the latest information, fostering a stronger connection between turf facilities and their
clientele.
 Streamlined Communication: The seamless integration between the Sportzfy app and website
facilitated streamlined communication between turf owners and their audience. Users could
effortlessly disseminate announcements, share updates, and communicate important information
directly through the website. This direct channel of communication improved transparency and
responsiveness, enhancing the overall user experience and satisfaction.
 Increased Operational Efficiency: The feature allowing users to make website changes via the
app contributed to improved operational efficiency for turf owners. Rather than relying on
external web developers or cumbersome content management systems, users could quickly and
easily update their website content on the go. This streamlined process reduced administrative
overheads, minimized delays in information dissemination, and optimized resource utilization
within turf facilities.
Page |
  Competitive Advantage: Sportzfy's innovative approach to website management conferred a
significant competitive advantage to turf facilities utilizing the platform. By empowering users
with the tools to maintain a dynamic and up-to-date online presence, Sportzfy distinguished itself
as a forward-thinking solution in the turf management industry. This feature not only enhanced
user satisfaction but also positioned turf facilities as proactive and responsive to customer needs,
thereby strengthening their competitive position in the market.

6.3 PROJECT APPLICABILITY ON REAL-

WORLD APPLICATIONS

The Sportzfy turf app has demonstrated its practical viability in real-world scenarios by effectively
enhancing operational efficiency and client satisfaction within turf management. Its seamless integration
into day-to-day operations has yielded tangible benefits, particularly in terms of revenue generation and
client retention. One of the primary advantages of the Sportzfy app lies in its capability to enable remote
management of turf facilities. This feature empowers turf owners to oversee and administer their venues
from any location, facilitating swift decision-making and proactive management.
By remotely managing bookings, updating facility information, and communicating with clients, turf
owners can optimize resource utilization and maximize revenue potential. The app's impact on revenue is
significant, as it enables turf owners to capitalize on opportunities and respond promptly to client inquiries
or booking requests.
By leveraging the app's functionalities, turf facilities can ensure optimal utilization of available slots,
leading to increased earnings over time. Furthermore, the ability to remotely manage turf facilities allows
owners to minimize operational costs and streamline administrative processes, further contributing to
bottom-line profitability. Client satisfaction is another key aspect of the Sportzfy app's real-world
applicability. Clients appreciate the convenience and flexibility afforded by the app, which simplifies the
booking process and enhances communication with turf owners. The app's user-friendly interface and
intuitive features contribute to a seamless booking experience, fostering positive client relationships and
promoting repeat business.

Page |
 6.4 INFERENCE
The Sportzfy turf app has proven its worth in the real world by boosting earnings and keeping clients
satisfied through remote management capabilities. By enabling turf owners to oversee operations from
anywhere, the app maximizes revenue potential and ensures efficient resource utilization. Clients
appreciate the convenience and seamless booking experience offered by the app, leading to enhanced
satisfaction and repeat business. Considering its success, there are plans to develop a similar app for other
turf owners, extending the benefits of streamlined management and improved client relations to a broader
audience

Page |
 CHAPTER-7
CONCLUSIONS AND RECOMMENDATION

7.1 OUTLINE

The Sportzfy turf management app has successfully achieved its objectives of revolutionizing the booking
and management process for turf owners and users alike. Key outcomes and achievements of this project
include:
 Development of a comprehensive app that streamlines turf booking, management, and
communication processes.
 Implementation of user-friendly features such as booking calendars, log books, and search
integration for seamless navigation and efficient operation.
 Integration with payment status updates to rectify payment with defaulter.
 Design and development of an intuitive and responsive user interface, enhancing user experience
and satisfaction.
 Implementation of administrative tools for turf owners to manage bookings, settings, and user
accounts with ease.
 Deployment of the app on a reliable platform, ensuring accessibility and reliability for users.

Throughout the project, we learned valuable lessons about the importance of planning, communication, and
thorough testing. These elements were essential in ensuring the success and functionality of the Sportzfy
app.
Looking ahead, there are areas for improvement that we plan to address, including:
● Integration of web editor access integration with React-Native components.
● Optimization of app performance to enhance speed and responsiveness.
In conclusion, the Sportzfy turf management app represents a significant advancement in the turf
management industry, providing users with a convenient, efficient, and user-friendly platform for booking
and managing turf facilities. We are proud of the outcomes and achievements of this project and remain
committed to further enhancing the app's functionality and user experience in the future.

Page |
 7.2 LIMITATIONS/ CONSTRAINTS OF THE SYSTEM

While the Sportzfy turf management system offers numerous benefits and functionalities, it also has some
limitations that need to be addressed. Some of these limitations include:

Limited Payment Gateway Integration: One of the main limitations of Sportzfy is the absence of payment
gateway options. This limitation could potentially inconvenience users who prefer to use online payment
method leading to a less than optimal user experience.

Lack of Advanced Analytics: Another limitation of Sportzfy is the absence of advanced analytics features.
While the system provides basic booking and management functionalities, it may lack robust analytics
capabilities. Advanced analytics features, such as detailed reporting and data visualization tools, could
provide valuable insights into turf utilization patterns.

7.3 FUTURE ENHANCEMENTS

In order to further enhance the Sportzfy turf management system and provide users with an even more
comprehensive and seamless experience, several future enhancements are planned. These enhancements
include:

 Implementation of Cashback System: Introducing a cashback system within Sportzfy will

incentivize users to make bookings and engage with the platform regularly. By offering cashback
rewards for bookings or referrals, turf owners can encourage repeat business and foster loyalty
among their clientele. This feature will not only attract new users but also retain existing ones,
ultimately driving increased usage and revenue generation.

 Advanced Analytics Capabilities: Enhancing Sportzfy's analytics capabilities will enable turf owners
to gain deeper insights into their operations and make data-driven decisions. Advanced analytics
features, such as detailed reporting, predictive analytics, and trend analysis, will provide valuable
insights into turf utilization patterns, customer behavior, and revenue trends. By leveraging these
insights, turf owners can optimize their operations, improve customer satisfaction, and maximize
profitability.

Page |
  Improved User Interface (UI): Enhancing Sportzfy's user interface (UI) will elevate the overall user
experience and make the platform more intuitive and visually appealing. By incorporating modern
design principles, streamlined navigation, and interactive elements, the UI will provide users with a
seamless and enjoyable booking experience. Additionally, implementing responsive design
techniques will ensure that Sportzfy is accessible and optimized for use across various devices and
screen sizes.

7.4 INFERENCE

In summary, the future enhancements planned for the Sportzfy app aim to elevate its functionality and user
experience. These include the implementation of a cashback system to incentivize bookings, advanced
analytics capabilities for data-driven decision-making, and improvements to the user interface for enhanced
usability.
However, it's important to acknowledge the current limitations of the Sportzfy app, such as the absence of
payment gateway options, advance analytics, and reward system. Addressing these limitations will be essential
to ensuring the continued success and effectiveness of the Sportzfy

Page |
 Appendix - A (Screenshots)

Page |
Page |
Page |
 Appendix – B (Coding)
Attaching coding for only Admin page because of confidentiality purpose.
GitHub links for the whole project are attached below.

import { forwardRef, memo, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react"
import { Text, StyleSheet, TouchableOpacity, Modal, View, Appearance } from "react-native";
import Slots from "./Slots";
import { isEqual } from "lodash";
import Logging from "../LoggingPage";
import AppContext from "../../Context";
import { AREA_TYPE, BOOKING_EDITOR_ADD, DATA_STATUS_TYPE, DATE_TIME_OPTIONS,
DEFAULT_SELECTION_PARAM, DateIND, GET_BOOKING_ROUTE, STYLES, THEME_COLORS, USER_TYPE,
capitalFirst, control_fetch, kill_control_fetch } from "../../GLOBAL";
import { DateTimePickerAndroid } from "@react-native-community/datetimepicker";
import UtilBtn from "../Widgets/UtilBtn";
import { Dropdown } from "react-native-element-dropdown";

function load_data({ usernameRef, passwordRef, ControllerRef, selectedMonthYear, setMonthlyData, setBookingIdData,

setBookingStatus, setErrorMsg }: any) {

setBookingStatus(DATA_STATUS_TYPE.PENDING)

control_fetch(ControllerRef, GET_BOOKING_ROUTE + `?month=${selectedMonthYear.month}&year=$

{selectedMonthYear.year}`, {
method: "GET",
headers: {
"Content-Type": "application/json",
username: usernameRef.current,
password: passwordRef.current,
}
})
.then(res => res.json())
.then(res => {
// console.log(res)

if (res.is_valid) {

for (let d in res.booking_data) {

res.booking_data[d].from = new Date(res.booking_data[d].from)
res.booking_data[d].till = new Date(res.booking_data[d].till)
}

Page |
setMonthlyData({ ...res.monthly_data })
setBookingIdData({ ...res.booking_data })
setBookingStatus(DATA_STATUS_TYPE.SET)
}
else {
setErrorMsg("Server Error:\n" + res.error)
setBookingStatus(DATA_STATUS_TYPE.ERROR)
}
})
.catch(err => {
if (err.name === "AbortError")
return

setErrorMsg("Error:" + err.message)
setBookingStatus(DATA_STATUS_TYPE.ERROR)
})

return () => {
kill_control_fetch(ControllerRef)
}
}

const NewBookingPopup = forwardRef(({ setBookingEditorParam, selectedArea, setSelectedArea }: any, ref: any) => {

const DATE_TIME_COLOR = Appearance.getColorScheme() === "dark" ? "white" : "black"

const [startDate, setStartDate] = useState(DateIND())

const [durationMinutes, setDurationMinutes] = useState(30)
const [visible, setVisible] = useState(false)

const fromDate = useMemo(() => {

return startDate.toLocaleString('en-nz', DATE_TIME_OPTIONS as any)
}, [startDate, durationMinutes])

useEffect(() => {
let slot_date = DateIND()
slot_date.setMilliseconds(0)
slot_date.setSeconds(0)
slot_date.setMinutes((Math.ceil(slot_date.getMinutes() / 30) - 1) * 30)
setStartDate(slot_date)
}, [])

useImperativeHandle(ref, () => ({
setVisible
}), [])

const tillDate = useMemo(() => {

Page |
let endDate = new Date(startDate.getTime())
endDate.setMinutes(endDate.getMinutes() + durationMinutes)

return endDate.toLocaleString('en-nz', DATE_TIME_OPTIONS as any)

}, [startDate, durationMinutes])

const duration = useMemo(() => {

let hours = Math.floor(durationMinutes / 60)

let minutes = durationMinutes % 60

return `${hours} hrs ${String(minutes).padStart(2, '0')} mins`

}, [durationMinutes])

return (<Modal
visible={visible}
transparent={true}
animationType="fade"
onRequestClose={() => setVisible(false)}
>
<View style={{ backgroundColor: 'rgba(0,0,0,0.8)', flex: 1, alignItems: 'center', justifyContent: 'center' }}>

<View style={{ width: "95%", backgroundColor: 'white', borderRadius: 10, alignItems: "center" }}>
<Text style={styles.edit_title}>New Booking</Text>

<View style={{ flexDirection: 'row', marginBottom: 15 }}>

<Text style={[styles.edit_label, { marginRight: 15 }]}>Start</Text>

<Text
style={styles.edit_input}
onPress={() => DateTimePickerAndroid.open({
value: new Date(startDate.getTime() + startDate.getTimezoneOffset() * 60000),
mode: "date",
is24Hour: true,
negativeButton: {
textColor: DATE_TIME_COLOR
},
positiveButton: {
label: "Confirm",
textColor: DATE_TIME_COLOR
},
onChange: (val) => {
if (val.type == "set")
setStartDate(new Date(val.nativeEvent.timestamp + val.nativeEvent.utcOffset * 60000))
},

Page |
})}
>
{startDate.toLocaleDateString('en-nz', { year: 'numeric', month: '2-digit', day: '2-digit', timeZone: 'UTC' })}
</Text>

<Text
style={[styles.edit_input, { marginLeft: 5 }]}
onPress={() => DateTimePickerAndroid.open({
value: new Date(startDate.getTime() + startDate.getTimezoneOffset() * 60000),
mode: "time",
display: "spinner",
minuteInterval: 30,
is24Hour: false,
negativeButton: {
textColor: DATE_TIME_COLOR
},
positiveButton: {
label: "Confirm",
textColor: DATE_TIME_COLOR
},
onChange: (val) => {
if (val.type == "set")
setStartDate(new Date(val.nativeEvent.timestamp + val.nativeEvent.utcOffset * 60000))
},
})}
>
{startDate.toLocaleTimeString('en-nz', { hour: '2-digit', minute: '2-digit', timeZone: 'UTC' })}
</Text>
</View>

<View style={{ flexDirection: "row", marginBottom: 15 }}>

<Text style={styles.edit_label}>Duration</Text>

<View style={{ width: "60%", height: 40, marginLeft: 10, flexDirection: "row" }}>
<Text
style={[styles.edit_input, { width: "100%" }]}
onPress={() => DateTimePickerAndroid.open({
value: new Date(new Date().setHours(0, durationMinutes, 0, 0)),
mode: "time",
display: "spinner",
minuteInterval: 30,
is24Hour: true,
negativeButton: {
textColor: DATE_TIME_COLOR
},
positiveButton: {
label: "Confirm",
textColor: DATE_TIME_COLOR
Page |
},
onChange: (val) => {
if (val.type == "set") {
let confirm_date = new Date(val.nativeEvent.timestamp)
setDurationMinutes(confirm_date.getHours() * 60 + confirm_date.getMinutes())
}
},
})}
> {duration}</Text>
</View>

</View>

<View style={{ flexDirection: "row", marginBottom: 30 }}>

<Text style={styles.edit_label}>Area</Text>

<Dropdown
iconStyle={{ width: 0 }}
style={[styles.edit_input, { width: "60%", height: 40 }]} //, DropboxStyle]}
itemTextStyle={{ textAlign: 'center' }}
selectedTextStyle={{ textAlign: 'center', color: 'darkblue', fontWeight: 'bold' }}
itemContainerStyle={{ color: 'red' } as any}
data={
Object.keys(AREA_TYPE).map((val) => ({
value: val,
label: capitalFirst(val)
}))
}
labelField="label"
valueField="value"
maxHeight={200}
onChange={({ value }: any) => { setSelectedArea(value) }}
value={selectedArea}
/>

</View>

<View style={{ flexDirection: "row" }}>

<Text style={styles.edit_label}>From:</Text>
<Text style={[styles.edit_label, { width: "60%", marginLeft: 10 }]}>
{fromDate}
</Text>
</View>

<View style={{ flexDirection: "row", marginBottom: 30 }}>

<Text style={styles.edit_label}>Till:</Text>
<Text style={[styles.edit_label, { width: "60%", marginLeft: 10 }]}>
Page |
{tillDate}
</Text>
</View>

<View style={{ flexDirection: "row", width: "100%", justifyContent: "space-evenly", marginVertical: 30 }}>
<UtilBtn
Title={"Continue"}
onManualPress={() => {

setVisible(false)

setBookingEditorParam({
...BOOKING_EDITOR_ADD,
from: startDate,
till: new Date(startDate.getTime() + durationMinutes * 60000),
area: selectedArea
})
}}
/>
<UtilBtn
Title={"Cancel"}
style={{ backgroundColor: "red" }}
onPress={() => setVisible(false)}
/>
</View>

</View>
</View>
</Modal>)
})

const AddBookingBtn = ({ onPress }: any) => {

return (<TouchableOpacity style={styles.add_btn} onPress={onPress}>

<Text style={{ color: "white", fontSize: 50 }} adjustsFontSizeToFit={true} numberOfLines={1}>+</Text>
</TouchableOpacity>)
}

const BookingPage = ({
slotMode,
reloadingRef,
BookingScrollRef,
monthlyData, setMonthlyData,
bookingIdData, setBookingIdData, selectedMonthYear,
selectedDate,
setBookingEditorParam
}: any) => {
const { usernameRef, passwordRef, usertypeRef } = useContext(AppContext);
Page |
const [selectedArea, setSelectedArea] = useState(AREA_TYPE.turf) // Switch Buttons
const [bookingStatus, setBookingStatus] = useState(DATA_STATUS_TYPE.NONE)
const [errorMsg, setErrorMsg] = useState('')
const [selectedSlots, setSelectedSlots] = useState<any>({ ...DEFAULT_SELECTION_PARAM })

// SLOTS
const ControllerRef = useRef()
const NewBookingRef: any = useRef(null)

useEffect(() => {
load_data({ usernameRef, passwordRef, ControllerRef, selectedMonthYear, setMonthlyData, setBookingIdData,
setBookingStatus, setErrorMsg })

reloadingRef.current = () => {
load_data({ usernameRef, passwordRef, ControllerRef, selectedMonthYear, setMonthlyData, setBookingIdData,
setBookingStatus, setErrorMsg })
setSelectedSlots({ ...DEFAULT_SELECTION_PARAM })
}
}, [selectedMonthYear])

useEffect(() => {
setSelectedSlots({ ...DEFAULT_SELECTION_PARAM })
}, [slotMode])

return (<>
{
bookingStatus == DATA_STATUS_TYPE.ERROR ? <Text style={styles.error_text}>{errorMsg}</Text> :
slotMode ?
<Slots
isLoading={bookingStatus == DATA_STATUS_TYPE.PENDING}

{...{
selectedArea, setSelectedArea,
selectedSlots, setSelectedSlots,
selectedMonthYear,
selectedDate,
BookingScrollRef,
setBookingEditorParam,
monthlyData,
bookingIdData
}}
/>
:
<Logging
isLoading={bookingStatus == DATA_STATUS_TYPE.PENDING}

{...{
Page |
selectedMonthYear, selectedDate,
BookingScrollRef,
setBookingEditorParam,
monthlyData,
bookingIdData
}}
/>
}

{usertypeRef.current != USER_TYPE.VIEWER && <NewBookingPopup ref={NewBookingRef} {...{

setBookingEditorParam, selectedArea, setSelectedArea }} />}
{usertypeRef.current != USER_TYPE.VIEWER && <AddBookingBtn onPress={() => {
if (selectedSlots.visible && selectedSlots.from && selectedSlots.till)
setBookingEditorParam({
...BOOKING_EDITOR_ADD,
from: selectedSlots.from < selectedSlots.till ? selectedSlots.from : selectedSlots.till,
till: new Date((selectedSlots.from > selectedSlots.till ? selectedSlots.from : selectedSlots.till).getTime() + 30 * 60 * 1000),
area: selectedArea
})
else
NewBookingRef.current.setVisible(true)
}} />}
</>)
}

export default memo(BookingPage, isEqual)

const styles: any = StyleSheet.create({

edit_title: {
width: "100%",
padding: 20,
fontWeight: 'bold',
textAlign: 'center',
fontSize: 20,
borderBottomColor: 'lightgray',
borderBottomWidth: 2,
marginBottom: 30,

},
edit_label: {
...STYLES.text,
height: "100%",
width: 100,
textAlign: 'center',
},
edit_input: {
...STYLES.textInput,
Page |
textAlign: "center",
textAlignVertical: "center",
width: "30%",
padding: 10,
color: 'dodgerblue',
fontWeight: 'bold',
backgroundColor: "ghostwhite"
},
error_text: {
flex: 1,
textAlign: 'center',
textAlignVertical: 'center',
fontWeight: 'bold',
color: 'red'
},
add_btn: {
position: "absolute",
height: 60,
width: 60,
backgroundColor: THEME_COLORS.blue,
bottom: 10,
right: 10,
borderRadius: 50,
elevation: 5,
alignItems: "center",
justifyContent: "center",
}
});

Page |
REFERENCES
https://core.ac.uk/download/pdf/268103004.pdf
https://learn.microsoft.com/en-us/xamarin/cross-platform/get-started/introduction-to-
mobile-sdlc#inception
https://reactnative.dev/docs/speeding-ci-builds
https://reactnative.dev/docs/flexbox
https://www.mongodb.com/scale/nosql-database-implementation
https://groovetechnology.com/blog/how-to-connect-react-native-with-node-js-a-simple-
guide/
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/
Using_multiple_backgrounds
https://michiel.wordpress.com/2009/08/21/a-dead-simple-lightweight-javascript-calendar/
https://nodejs.org/api/fs.html
https://expressjs.com/en/4x/api.html#express.json
https://reactnative.dev/docs/testing-overview

Page |