Initial Commit

README.md

@@ -0,0 +1,8 @@
+# BearlyPassing
+
+For details, please view the [writeup](https://owenryan.us/projects/bearlypassing) or the README files in the frontend and backend folders.
+
+## Licensing
+
+- The frontend is licensed under AGPL-3.0
+- The Backend is licensed under the GLWT (Good Luck With That) Public License

backend/.gitignore

@@ -0,0 +1,241 @@
+### JetBrains+all template
+# Covers JetBrains IDEs: IntelliJ, RubyMine, PhpStorm, AppCode, PyCharm, CLion, Android Studio, WebStorm and Rider
+# Reference: https://intellij-support.jetbrains.com/hc/en-us/articles/206544839
+
+# User-specific stuff
+.idea/**/workspace.xml
+.idea/**/tasks.xml
+.idea/**/usage.statistics.xml
+.idea/**/dictionaries
+.idea/**/shelf
+
+# AWS User-specific
+.idea/**/aws.xml
+
+# Generated files
+.idea/**/contentModel.xml
+
+# Sensitive or high-churn files
+.idea/**/dataSources/
+.idea/**/dataSources.ids
+.idea/**/dataSources.local.xml
+.idea/**/sqlDataSources.xml
+.idea/**/dynamic.xml
+.idea/**/uiDesigner.xml
+.idea/**/dbnavigator.xml
+
+# Gradle
+.idea/**/gradle.xml
+.idea/**/libraries
+
+# Gradle and Maven with auto-import
+# When using Gradle or Maven with auto-import, you should exclude module files,
+# since they will be recreated, and may cause churn.  Uncomment if using
+# auto-import.
+# .idea/artifacts
+# .idea/compiler.xml
+# .idea/jarRepositories.xml
+# .idea/modules.xml
+# .idea/*.iml
+# .idea/modules
+# *.iml
+# *.ipr
+
+# CMake
+cmake-build-*/
+
+# Mongo Explorer plugin
+.idea/**/mongoSettings.xml
+
+# File-based project format
+*.iws
+
+# IntelliJ
+out/
+
+# mpeltonen/sbt-idea plugin
+.idea_modules/
+
+# JIRA plugin
+atlassian-ide-plugin.xml
+
+# Cursive Clojure plugin
+.idea/replstate.xml
+
+# SonarLint plugin
+.idea/sonarlint/
+
+# Crashlytics plugin (for Android Studio and IntelliJ)
+com_crashlytics_export_strings.xml
+crashlytics.properties
+crashlytics-build.properties
+fabric.properties
+
+# Editor-based Rest Client
+.idea/httpRequests
+
+# Android studio 3.1+ serialized cache file
+.idea/caches/build_file_checksums.ser
+
+### Python template
+# Byte-compiled / optimized / DLL files
+__pycache__/
+*.py[cod]
+*$py.class
+
+# C extensions
+*.so
+
+# Distribution / packaging
+.Python
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+wheels/
+share/python-wheels/
+*.egg-info/
+.installed.cfg
+*.egg
+MANIFEST
+
+# PyInstaller
+#  Usually these files are written by a python script from a template
+#  before PyInstaller builds the exe, so as to inject date/other infos into it.
+*.manifest
+*.spec
+
+# Installer logs
+pip-log.txt
+pip-delete-this-directory.txt
+
+# Unit test / coverage reports
+htmlcov/
+.tox/
+.nox/
+.coverage
+.coverage.*
+.cache
+nosetests.xml
+coverage.xml
+*.cover
+*.py,cover
+.hypothesis/
+.pytest_cache/
+cover/
+
+# Translations
+*.mo
+*.pot
+
+# Django stuff:
+*.log
+local_settings.py
+db.sqlite3
+db.sqlite3-journal
+
+# Flask stuff:
+instance/
+.webassets-cache
+
+# Scrapy stuff:
+.scrapy
+
+# Sphinx documentation
+docs/_build/
+
+# PyBuilder
+.pybuilder/
+target/
+
+# Jupyter Notebook
+.ipynb_checkpoints
+
+# IPython
+profile_default/
+ipython_config.py
+
+# pyenv
+#   For a library or package, you might want to ignore these files since the code is
+#   intended to run in multiple environments; otherwise, check them in:
+# .python-version
+
+# pipenv
+#   According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
+#   However, in case of collaboration, if having platform-specific dependencies or dependencies
+#   having no cross-platform support, pipenv may install dependencies that don't work, or not
+#   install all needed dependencies.
+#Pipfile.lock
+
+# poetry
+#   Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
+#   This is especially recommended for binary packages to ensure reproducibility, and is more
+#   commonly ignored for libraries.
+#   https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
+#poetry.lock
+
+# pdm
+#   Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
+#pdm.lock
+#   pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
+#   in version control.
+#   https://pdm.fming.dev/#use-with-ide
+.pdm.toml
+
+# PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
+__pypackages__/
+
+# Celery stuff
+celerybeat-schedule
+celerybeat.pid
+
+# SageMath parsed files
+*.sage.py
+
+# Environments
+.env
+.venv
+env/
+venv/
+ENV/
+env.bak/
+venv.bak/
+
+# Spyder project settings
+.spyderproject
+.spyproject
+
+# Rope project settings
+.ropeproject
+
+# mkdocs documentation
+/site
+
+# mypy
+.mypy_cache/
+.dmypy.json
+dmypy.json
+
+# Pyre type checker
+.pyre/
+
+# pytype static type analyzer
+.pytype/
+
+# Cython debug symbols
+cython_debug/
+
+# PyCharm
+#  JetBrains specific template is maintained in a separate JetBrains.gitignore that can
+#  be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
+#  and can be added to the global gitignore or merged into this file.  For a more nuclear
+#  option (not recommended) you can uncomment the following to ignore the entire idea folder.
+.idea/
+

backend/LICENSE

@@ -0,0 +1,25 @@
+               GLWT(Good Luck With That) Public License
+                 Copyright (c) Everyone, except Author
+
+Everyone is permitted to copy, distribute, modify, merge, sell, publish,
+sublicense or whatever they want with this software but at their OWN RISK.
+
+                            Preamble
+
+The author has absolutely no clue what the code in this project does.
+It might just work or not, there is no third option.
+
+
+                GOOD LUCK WITH THAT PUBLIC LICENSE
+   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION, AND MODIFICATION
+
+  0. You just DO WHATEVER YOU WANT TO as long as you NEVER LEAVE A
+TRACE TO TRACK THE AUTHOR of the original product to blame for or hold
+responsible.
+
+IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
+DEALINGS IN THE SOFTWARE.
+
+Good luck and Godspeed.

backend/README.md

@@ -0,0 +1,28 @@
+# BearlyPassing backend
+
+_This small backend server acts as a translation layer between the frontend's REST API for fetching data, and PowerSchool's ancient SOAP API
+
+Note: Some instances of PowerSchool no longer have a SOAP API, at this point it's a coin toss if your instance still supports it.
+
+## Running_
+
+```shell
+python3 main.py
+```
+By default, it will listen for connections at `127.0.0.1:8080`. This can be changed by settings the `--address` and
+`--port` arguments
+
+This program supports sending CORS headers. Set the frontend-domain argument to the domain that you're hosting this
+publicly on (read this whole section before deciding on hosting this)
+
+```sh
+python3 main.py --frontend-domain example.com
+```
+
+This backend should probably not be run in production, but if you do, for the love of all that is holy:
+
+- Grep for todos in the code, there is some bounds checks we didn't add for simplicity
+- Run this behind a reverse proxy
+- Be extremely vigilant for unauthorised access
+
+This program is licensed under GLWTPL, so don't point the finger at me if you get sued.

backend/requirements.txt

@@ -0,0 +1,4 @@
+aiohttp
+aiohttp_basicauth
+zeep
+requests

backend/src/main.py

@@ -0,0 +1,141 @@
+import asyncio
+import json
+import typing as t
+from concurrent.futures import ProcessPoolExecutor
+from functools import partial
+from os import name
+from urllib.parse import urlparse
+from argparse import ArgumentParser
+
+from aiohttp import web
+
+from pywerschool import (
+    Client,
+    PSConnectionError,
+    PSIncorrectAPICredentials,
+    PSIncorrectLogin,
+)
+
+if name != "nt":
+    import uvloop
+
+    asyncio.set_event_loop_policy(uvloop.EventLoopPolicy())
+
+
+app = web.Application()
+app.logger.setLevel("DEBUG")
+routes = web.RouteTableDef()
+
+frontend_domain: str
+
+
+def url_is_powerschool_subdomain(url: str) -> bool:
+    """Check that a URL is a valid PowerSchool subdomain"""
+    parsed_url = urlparse(f"{url}")
+    return (
+            parsed_url.netloc.endswith(".powerschool.com")
+            and parsed_url.path == "/"
+            and parsed_url.scheme == "https"
+    )
+
+
+@routes.options("/get_data")
+async def data_cors_route(_: web.Request) -> web.Response:
+    """Send a CORS header"""
+    global frontend_domain
+
+    return web.Response(
+        headers={
+            "Access-Control-Allow-Origin": f"https://{frontend_domain}",
+            "Access-Control-Allow-Methods": "POST",
+            "Access-Control-Allow-Headers": "Content-Type",
+        }
+    )
+
+
+@routes.post("/get_data")
+async def data_route(request: web.Request):
+    app.logger.info("Received request")
+
+    # Try to parse request body JSON
+    try:
+        body_json = await request.json()
+    except json.decoder.JSONDecodeError:
+        app.logger.error("Invalid JSON")
+        return web.Response(status=400, body="JSON Decode Error")
+
+    # Try to get URL from body
+    if (subdomain := body_json.get("url")) is None:
+        app.logger.error("Missing subdomain")
+        return web.Response(status=400, body="Missing URL")
+
+    # TODO: Limit subdomain to only letters and numbers
+    url = f"https://{subdomain}.powerschool.com/"
+
+    # Ensure the domain is powerschool
+    if not url_is_powerschool_subdomain(url):
+        app.logger.error(f"Invalid domain: {url}")
+        return web.Response(status=400, body="Invalid URL")
+
+    # Get username
+    if (username := body_json.get("username")) is None:
+        app.logger.error("Missing username")
+        return web.Response(status=400, body="Missing username")
+
+    # Get password
+    if (password := body_json.get("password")) is None:
+        app.logger.error("Missing password")
+        return web.Response(status=400, body="Missing password")
+
+    # Create censored username for logging
+    censored_username = username[0:2] + ("*" * (len(username) - 2))
+
+    # Fetch data in non-blocking executor
+    loop = asyncio.get_running_loop()
+    app.logger.debug(f"Fetching data for {censored_username} on subdomain {subdomain}")
+    try:
+        data = await loop.run_in_executor(p, blocking_fetch, username, password, url)
+    except PSConnectionError:
+        app.logger.error(f"Connection failed to: {url}")
+        return web.Response(status=500, body="Connection failed")
+        # TODO: Let client know that URL is invalid
+    except PSIncorrectAPICredentials:
+        app.logger.error(f"SOAP API has unknown credentials for {url}")
+        return web.Response(status=500, body="API Error")
+        # TODO: Let client know that URL won't work
+    except PSIncorrectLogin:
+        app.logger.error(f"Invalid credentials for {censored_username}")
+        return web.Response(status=500, body="Invalid credentials")
+        # TODO: Let client know username and password are incorrect
+    app.logger.debug("Fetch successful")
+    app.logger.info(f"Successful fetch for subdomain {subdomain}")
+
+    return web.json_response(data, dumps=partial(json.dumps, default=str))
+
+
+def blocking_fetch(username: str, password: str, url: str) -> dict[str, t.Any]:
+    """
+    Get student data from SOAP API using provided credentials
+    This function call is synchronous/blocking
+    """
+
+    # These credentials are abundantly available online, but are slowly being phased out
+    client = Client(url, api_username="pearson", api_password="m0bApP5")
+
+    return client.getStudent(username, password, toDict=True)
+
+
+p = ProcessPoolExecutor(2)
+
+if __name__ == "__main__":
+    parser = ArgumentParser("BearlyPassing Backend")
+    parser.add_argument("--port", dest="port", type=int, default=8080)
+    parser.add_argument("--address", dest="address", default="127.0.0.1")
+    parser.add_argument("--frontend-domain", dest="domain", default="localhost")
+
+    args = parser.parse_args()
+
+    frontend_domain = args.domain
+
+    app.add_routes(routes)
+    web.run_app(app, host=args.address, port=args.port)

backend/src/pywerschool.py

@@ -0,0 +1,81 @@
+"""
+Script for pulling data from PowerSchool
+Modified single-file version of https://github.com/reteps/pywerschool
+MIT License
+"""
+
+import logging
+
+import requests
+import zeep
+import zeep.helpers
+
+
+class PSConnectionError(Exception):
+    """Triggered when the SOAP API url is inaccessible"""
+
+    pass
+
+
+class PSIncorrectAPICredentials(Exception):
+    """Triggered when the API credentials are invalid"""
+
+    pass
+
+
+class PSIncorrectLogin(Exception):
+    """Triggered when the provided username and password are invalid"""
+
+    pass
+
+
+class Client:
+    """
+    The client for connecting to PowerSchool
+    """
+
+    def __init__(self, base_url, api_username, api_password):
+        logging.basicConfig(level=logging.CRITICAL)
+
+        # Setup HTTP basic auth, will be passed into the SOAP api wrapper
+        session = requests.session()
+        session.auth = requests.auth.HTTPDigestAuth(api_username, api_password)
+
+        # Format API url
+        if base_url[:-1] != "/":
+            base_url += "/"
+        self.url = base_url + "pearson-rest/services/PublicPortalServiceJSON"
+
+        # Attempt to start SOAP API connection. Might fail
+        try:
+            self.client = zeep.Client(
+                wsdl=self.url + "?wsdl",
+                transport=zeep.transports.Transport(session=session),
+            )
+        except requests.exceptions.ConnectionError:
+            raise PSConnectionError
+        except requests.exceptions.HTTPError:
+            raise PSIncorrectAPICredentials
+
+    def getStudent(self, username, password, toDict=False):
+        """Get student data"""
+        service = self.client.create_service(
+            "{http://publicportal.rest.powerschool.pearson.com/}PublicPortalServiceJSONSoap12Binding",
+            self.url,
+        )
+        result = service.loginToPublicPortal(username, password)["userSessionVO"]
+        if result["userId"] == None:
+            raise PSIncorrectLogin()
+        userSessionVO = {
+            "userId": result["userId"],
+            "serviceTicket": result["serviceTicket"],
+            "serverInfo": {"apiVersion": result["serverInfo"]["apiVersion"]},
+            "serverCurrentTime": result["serverCurrentTime"],
+            "userType": result["userType"],
+        }
+        student = service.getStudentData(
+            userSessionVO, result["studentIDs"][0], {"includes": "1"}
+        )["studentDataVOs"][0]
+        if toDict:
+            return zeep.helpers.serialize_object(student, target_cls=dict)
+        return student

frontend/.env

@@ -0,0 +1 @@
+GENERATE_SOURCEMAP=false

frontend/.gitignore

@@ -0,0 +1,27 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.idea
+
+.vale-styles

frontend/.vale.ini

@@ -0,0 +1,6 @@
+StylesPath = .vale-styles
+
+MinAlertLevel = suggestion
+
+[*.md]
+BasedOnStyles = Vale

frontend/LICENSE

@@ -0,0 +1,661 @@
+                    GNU AFFERO GENERAL PUBLIC LICENSE
+                       Version 3, 19 November 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU Affero General Public License is a free, copyleft license for
+software and other kinds of works, specifically designed to ensure
+cooperation with the community in the case of network server software.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+our General Public Licenses are intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  Developers that use our General Public Licenses protect your rights
+with two steps: (1) assert copyright on the software, and (2) offer
+you this License which gives you legal permission to copy, distribute
+and/or modify the software.
+
+  A secondary benefit of defending all users' freedom is that
+improvements made in alternate versions of the program, if they
+receive widespread use, become available for other developers to
+incorporate.  Many developers of free software are heartened and
+encouraged by the resulting cooperation.  However, in the case of
+software used on network servers, this result may fail to come about.
+The GNU General Public License permits making a modified version and
+letting the public access it on a server without ever releasing its
+source code to the public.
+
+  The GNU Affero General Public License is designed specifically to
+ensure that, in such cases, the modified source code becomes available
+to the community.  It requires the operator of a network server to
+provide the source code of the modified version running there to the
+users of that server.  Therefore, public use of a modified version, on
+a publicly accessible server, gives the public access to the source
+code of the modified version.
+
+  An older license, called the Affero General Public License and
+published by Affero, was designed to accomplish similar goals.  This is
+a different license, not a version of the Affero GPL, but Affero has
+released a new version of the Affero GPL which permits relicensing under
+this license.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU Affero General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Remote Network Interaction; Use with the GNU General Public License.
+
+  Notwithstanding any other provision of this License, if you modify the
+Program, your modified version must prominently offer all users
+interacting with it remotely through a computer network (if your version
+supports such interaction) an opportunity to receive the Corresponding
+Source of your version by providing access to the Corresponding Source
+from a network server at no charge, through some standard or customary
+means of facilitating copying of software.  This Corresponding Source
+shall include the Corresponding Source for any work covered by version 3
+of the GNU General Public License that is incorporated pursuant to the
+following paragraph.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the work with which it is combined will remain governed by version
+3 of the GNU General Public License.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU Affero General Public License from time to time.  Such new versions
+will be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU Affero General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU Affero General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU Affero General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If your software can interact with users remotely through a computer
+network, you should also make sure that it provides a way for users to
+get its source.  For example, if your program is a web application, its
+interface could display a "Source" link that leads users to an archive
+of the code.  There are many ways you could offer source, and different
+solutions will be better for different programs; see section 13 for the
+specific requirements.
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU AGPL, see
+<https://www.gnu.org/licenses/>.

frontend/README.md

@@ -0,0 +1,45 @@
+# BearlyPassing web app
+
+## Installing dependencies
+
+```shell
+npm install
+```
+
+## Running
+
+```sh
+npm start
+```
+
+## Building
+
+```sh
+npm run build
+```
+
+## Notes for future maintainers
+
+### React
+
+This was built using React 18. There are `useMemo`s everywhere.
+[React has stated that they are working on a compiler](https://react.dev/blog/2024/02/15/react-labs-what-we-have-been-working-on-february-2024#react-compiler),
+so a significant amount of this codebase will have to be modified when it comes out.
+
+Also, this project uses [Million.js](https://million.dev/).
+This might not be required in the future and should probably be removed at some point.
+
+### Page Routing
+
+BearlyPassing was designed to be a single-page application, so private school information would only be contained in the
+tab, and would be deleted (garbage collected) the second they closed the page.
+`react-router` had a bit too much overhead, so instead pages are controlled by the `currentPage` and `selectedSection`
+variables in [App.tsx](src/App.tsx)
+
+### Authentication and data fetching
+
+Data fetching is extremely rudimentary, and there isn't any error handling above a generic error.
+
+### Final note
+
+There's still some incomplete and missing stuff. Grep for TODOs and good luck!

frontend/craco.config.js

@@ -0,0 +1,6 @@
+const million = require('million/compiler');
+module.exports = {
+    webpack: {
+        plugins: {add: [million.webpack({auto: true})]}
+    }
+};

frontend/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "bearlypassing-frontend",
+  "version": "1.0.0",
+  "private": false,
+  "dependencies": {
+    "@million/lint": "latest",
+    "@types/jest": "^27.5.2",
+    "@types/node": "^16.18.50",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
+    "bootstrap": "^5.3.2",
+    "bun": "^1.1.4",
+    "million": "latest",
+    "react": "latest",
+    "react-bootstrap": "^2.8.0",
+    "react-bootstrap-icons": "^1.10.3",
+    "react-dom": "latest",
+    "react-scripts": "^5.0.1",
+    "sass": "^1.68.0"
+  },
+  "scripts": {
+    "start": "craco start",
+    "build": "craco build",
+    "test": "craco test"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ],
+    "plugins": [
+      "html"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
+    "@craco/craco": "^7.1.0",
+    "eslint-plugin-html": "^7.1.0",
+    "typescript": "^4.9.5"
+  }
+}

frontend/public/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html class="h-100" lang="en" data-bs-theme="dark">
+<head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#983744" />
+    <meta
+      name="description"
+      content="The super rad way to check your grades"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <title>Bearly Passing</title>
+</head>
+<body class="d-flex flex-column h-100">
+    <!-- These tags need to be duplicated or the header won't be at the bottom of the screen. This is cursed.-->
+    <div id="root" class="d-flex flex-column h-100"></div>
+</body>
+</html>

frontend/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "Bearly Passing",
+  "name": "Bearly Passing Web App",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#983744",
+  "background_color": "#212529"
+}

frontend/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

frontend/src/App.tsx

@@ -0,0 +1,66 @@
+import React, {ReactNode} from 'react';
+import {useState} from 'react';
+import {PowerSchoolData, Section, Page} from "./interfaces";
+import {Container} from "react-bootstrap";
+import TeacherInterface from "./views/Teachers";
+import Header from "./components/navigation/Header";
+import Footer from "./components/navigation/Footer";
+import LoginInterface from "./views/Login";
+import SectionsInterface from "./views/Sections";
+import DashboardInterface from "./views/Dashboard";
+import ScheduleInterface from "./views/Schedule";
+import GradesInterface from "./views/Grades";
+import {globalContext} from "./contexts";
+
+export const App = () => {
+    // State holding the PowerSchool data object. This has everything that needs to be displayed
+    const [psData, setPsData] = useState<PowerSchoolData | null>(null);
+
+    // States for page routing
+    const [currentPage, setCurrentPage] = useState<Page>(Page.login);
+    const [selectedSection, setSelectedSection] = useState<Section>();
+
+    // Set page to login if no data is loaded
+    if (psData === null && currentPage !== Page.login) {
+        setCurrentPage(Page.login)
+    }
+
+    // Redirect from login to dashboard if data has been loaded
+    if (psData !== null && currentPage === Page.login) {
+        setCurrentPage(Page.dashboard)
+    }
+
+    // If the grads page has been selected but no section has been defined, redirect to the sections page to avoid an error
+    if (currentPage === Page.sectionGrades && selectedSection === undefined) {
+        setCurrentPage(Page.sections)
+    }
+
+    // Mapping the page enum to page components
+    const router: { [K in Page]: ReactNode } = {
+        [Page.login]: <LoginInterface setPsData={setPsData}/>,
+        [Page.dashboard]: <DashboardInterface/>,
+        [Page.sections]: <SectionsInterface/>,
+        // @ts-ignore
+        [Page.sectionGrades]: <GradesInterface section={selectedSection}/>,
+        [Page.schedule]: <ScheduleInterface/>,
+        [Page.teachers]: <TeacherInterface/>
+    };
+
+    return (
+        <>
+            {/* @ts-ignore */}
+            <globalContext.Provider value={{psData: psData, currentPage: currentPage, setCurrentPage: setCurrentPage, setCurrentSection: setSelectedSection}}>
+                <Header signOutFunction={() => {
+                    setPsData(null);
+                    setCurrentPage(Page.login);
+                }}/>
+                <Container className="App mb-4 flex-shrink-0">
+                    {router[currentPage]}
+                </Container>
+                <Footer/>
+            </globalContext.Provider>
+        </>
+    );
+};
+
+export default App;

frontend/src/components/GradeScore.tsx

@@ -0,0 +1,24 @@
+import {Assignment} from "../interfaces";
+
+/**
+ * Format an assignment's grade
+ * @param assignment Assignment's grade to display
+ */
+export default function GradeScore({assignment}: { assignment: Assignment }) {
+    // TODO: Refactor
+    if (assignment.pointspossible <= 0 && assignment.score !== null && assignment.score !== undefined) {
+        return (
+            <>{Number(assignment.score?.score)}/{assignment.pointspossible}</>
+        )
+    }
+
+    if (assignment.score?.percent !== null && assignment.score?.percent !== undefined) {
+        return (
+            <>{Number.parseFloat(assignment?.score.percent).toFixed(0)}%</>
+        )
+    }
+
+    return (
+        <></>
+    )
+};

frontend/src/components/InfoHover.tsx

@@ -0,0 +1,18 @@
+import {OverlayTrigger, Tooltip} from "react-bootstrap";
+import {InfoCircleFill} from "react-bootstrap-icons";
+import {ReactNode} from "react";
+
+/**
+ * Little (i) icon that will display the child node when the user hovers over this
+ * @param children Stuff to show
+ */
+export default function InfoHover({children}: { children: ReactNode }) {
+    return (
+        <OverlayTrigger delay={{show: 250, hide: 500}} placement="bottom"
+                        overlay={(props: any) =>
+                            <Tooltip {...props}>{children}</Tooltip>
+                        }>
+            <InfoCircleFill className="ms-2"/>
+        </OverlayTrigger>
+    )
+}

frontend/src/components/TeacherCardRow.tsx

@@ -0,0 +1,34 @@
+import {Term} from "../interfaces";
+import {useContext, useMemo} from "react";
+import {globalContext} from "../contexts";
+import {isHiddenTeacher, sectionsTaughtThisTerm} from "../lib/teachers";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
+import TeacherCard from "./cards/TeacherCard";
+
+export default function TeacherCardRow({selectedTerm, hideTeachers}: { selectedTerm: Term, hideTeachers: boolean }) {
+    const {psData} = useContext(globalContext);
+
+    const teachersThisTerm = useMemo(() => psData.teachers
+            .filter(t => sectionsTaughtThisTerm(t, selectedTerm).length > 0)
+        , [psData.teachers, selectedTerm]);
+
+    // Filter to get an array of teachers that have at least one class with an assignment
+    const teachersWithGradedClasses = useMemo(() => teachersThisTerm
+            .filter(t => !isHiddenTeacher(t, selectedTerm))
+        , [teachersThisTerm, selectedTerm]);
+
+    // Array of teachers to display to user
+    // Will teachersWithGradedClasses if the hide teachers checkmark is clicked, otherwise will be teachersThisTerm
+    const teachersToDisplay = hideTeachers ? teachersWithGradedClasses : teachersThisTerm;
+
+    return (
+        <Row className="row-cols-1 row-cols-md-2 g-4">
+            {teachersToDisplay.map(teacher =>
+                <Col key={teacher.id}>
+                    <TeacherCard teacher={teacher} sections={sectionsTaughtThisTerm(teacher, selectedTerm)}/>
+                </Col>
+            )}
+        </Row>
+    )
+};

frontend/src/components/cards/ControlCard.tsx

@@ -0,0 +1,20 @@
+import {ReactNode} from "react";
+import Col from "react-bootstrap/Col";
+import Card from "react-bootstrap/Card";
+
+/**
+ * Wrapper for controls in the top-right of interfaces
+ *
+ * **ACTS AS A COL SO SHOULD BE CHILD OF A ROW**
+ */
+export default function ControlCard({children}: { children: ReactNode }) {
+    return (
+        <Col className="align-content-end">
+            <Card className="mb-3 d-flex float-end">
+                <Card.Body>
+                    {children}
+                </Card.Body>
+            </Card>
+        </Col>
+    )
+}

frontend/src/components/cards/SectionCard.sass

@@ -0,0 +1,7 @@
+// Make linked text look normal
+.hidden-link
+  text-decoration: none
+
+// Makes cursor look clickable
+.clickable-cursor
+  cursor: pointer

frontend/src/components/cards/SectionCard.tsx

@@ -0,0 +1,85 @@
+import {Descending, FinalGrade, Page, ReportingTerm, Section} from "../../interfaces";
+import {useContext, useMemo} from "react";
+import Card from "react-bootstrap/Card";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
+import AssignmentsTable, {AssignmentsTableColumn} from "../tables/AssignmentsTable";
+import "./SectionCard.sass";
+import SectionDetailsTable from "../tables/SectionDetailsTable";
+import {globalContext} from "../../contexts";
+import {getReportingTerm} from "../../lib/terms";
+
+const assignmentTableColumns = [AssignmentsTableColumn.DUEDATE, AssignmentsTableColumn.NAME, AssignmentsTableColumn.SCORE];
+
+/**
+ * Class section card
+ * @param section Section object
+ */
+export default function SectionCard({section}: { section: Section }) {
+    const {psData, setCurrentPage, setCurrentSection} = useContext(globalContext);
+
+    // Find the reporting term and grade. This is really jank and there is definitely a better way of doing this
+    const termGradeTuple: [ReportingTerm, FinalGrade | null] | null = useMemo(() => {
+        // Find all sections with a final grade
+        const reportingTermsWithGrades = section.finalGrades
+            .filter(([_, grade]) => grade !== null)
+            .sort((a, b) => a[0].endDate.getTime() - b[0].endDate.getTime());
+
+        // Get the reporting term with the furthest away end-date that actually has a grade.
+        // This will act as a fallback in case there is not currently a term in progress.
+        // This is an edge case if a quarter ends on a friday and the next one starts on monday.
+        // This will fall back to the semester grade on saturday/sunday
+        const fallbackReportingTerm = reportingTermsWithGrades[0];
+
+        // Return null if there aren't any reporting terms with grades. It's probably summer
+        if (fallbackReportingTerm === undefined) {
+            return null;
+        }
+
+        // Attempt to get the reporting term and fallback if needed
+        const reportingTerm = getReportingTerm(psData) || fallbackReportingTerm[0];
+
+        // Find any
+        return reportingTermsWithGrades.filter(g => g[0].id === reportingTerm.id)[0] || null
+    }, [psData, section.finalGrades]);
+
+    // Get the 3 most recent assignments to show on the table
+    const recentAssignments = useMemo(() => section.assignments
+            .sort((a, b) => b.dueDate.getTime() - a.dueDate.getTime())
+            .slice(0, 3)
+        , [section]);
+
+    return (
+        <Card className="clickable-cursor" onClick={() => {
+            setCurrentPage(Page.sectionGrades);
+            setCurrentSection(section)
+        }}>
+            <Card.Body className="container">
+                <Row>
+                    <Col md={10}><Card.Title>{section.schoolCourseTitle}</Card.Title></Col>
+                    <Col sm={2}>
+                        {termGradeTuple !== null &&
+                            <Card.Title>{termGradeTuple[1]?.grade} ({termGradeTuple[0].abbreviation})</Card.Title>
+                        }
+                    </Col>
+                </Row>
+                <Row>
+                    <Col>
+                        <Card.Subtitle>Details</Card.Subtitle>
+                        <SectionDetailsTable section={section}/>
+                    </Col>
+                </Row>
+                {recentAssignments.length > 0 &&
+                    <Row>
+                        <Card.Subtitle>Recent Assignments</Card.Subtitle>
+                        <Col>
+                            <AssignmentsTable assignments={recentAssignments}
+                                              columns={assignmentTableColumns}
+                                              sort={{by: AssignmentsTableColumn.DUEDATE, order: Descending}}/>
+                        </Col>
+                    </Row>
+                }
+            </Card.Body>
+        </Card>
+    )
+};

frontend/src/components/cards/TeacherCard.sass

@@ -0,0 +1,5 @@
+// Remove underline from link but make it look clickable and light blue
+.link-without-decoration
+  color: #6ea8fe
+  text-decoration: none
+  cursor: pointer

frontend/src/components/cards/TeacherCard.tsx

@@ -0,0 +1,58 @@
+import Card from "react-bootstrap/Card";
+import {Envelope, Telephone} from "react-bootstrap-icons";
+import {Page, Section, Teacher} from "../../interfaces";
+import {useCallback, useContext} from "react";
+import {globalContext} from "../../contexts";
+import "./TeacherCard.sass";
+
+/**
+ * Link to a section that appears in the bottom of a teacher card
+ * @param section
+ */
+const TaughtSection = ({section}: { section: Section }) => {
+    const {setCurrentPage, setCurrentSection} = useContext(globalContext);
+
+    // Function to switch to the section's page using the app's routing functions
+    const clickCallback = useCallback(() => {
+        setCurrentPage(Page.sectionGrades);
+        setCurrentSection(section);
+    }, [section, setCurrentPage, setCurrentSection]);
+
+    return (
+        <li key={section.id}>
+            <p className="link-without-decoration" onClick={clickCallback}>{section.schoolCourseTitle}</p>
+        </li>
+    )
+};
+
+export default function TeacherCard({teacher, sections}: { teacher: Teacher, sections: Section[] }) {
+    return (
+        <Card>
+            <Card.Body>
+                <Card.Title>{teacher.firstName} {teacher.lastName}</Card.Title>
+                {/* Show teacher's email if it exists */}
+                {teacher.email &&
+                    <Card.Text className="teacher-card-link">
+                        <Envelope/> <a className="link-without-decoration"
+                                       href={`mailto:${teacher.email}`}>{teacher.email}</a>
+                    </Card.Text>
+                }
+
+                {/* Show teacher's phone # if it exists */}
+                {teacher.schoolPhone &&
+                    <Card.Text>
+                        <Telephone/> {teacher.schoolPhone}
+                    </Card.Text>
+                }
+            </Card.Body>
+            <Card.Footer>
+                Teaches classes:
+                <ul>
+                    {sections.map(s =>
+                        <TaughtSection key={s.id} section={s}/>
+                    )}
+                </ul>
+            </Card.Footer>
+        </Card>
+    );
+}

frontend/src/components/dashboard/AttendanceCard.tsx

@@ -0,0 +1,48 @@
+import {useMemo, useState} from "react";
+import Card from "react-bootstrap/Card";
+import DashboardCard from "./DashboardCard";
+import {Attendance, Descending, SortSettings} from "../../interfaces";
+import AttendanceTable, {AttendanceTableColumn} from "../tables/AttendanceTable";
+import SortSelect from "../input/SortSelect";
+import OffcanvasDashboardCard from "./OffcanvasDashboardCard";
+
+const attendanceTableColumns = [AttendanceTableColumn.DATE, AttendanceTableColumn.TYPE, AttendanceTableColumn.COMMENT];
+
+/**
+ * Card showing attendance events (sorted date descending)
+ * @param events Attendance events to display
+ * @param codes Index of attendance codes
+ */
+export const AttendanceCard = ({events}: { events: Attendance[] }) => {
+    const [offcanvasSort, setOffcanvasSort] = useState<SortSettings<AttendanceTableColumn>>({
+        order: Descending,
+        by: AttendanceTableColumn.DATE
+    });
+
+    // Get the 5 most recent events
+    const recentEvents = useMemo(() => events
+            .sort((a, b) => b.attDate.getTime() - a.attDate.getTime()) // Sort reverse chronologically
+            .slice(0, 5)
+        , [events]);
+
+    // If there's more than 5 events, add a button to show the full events list (in an offcanvas element)
+    const includeOffcanvas = events.length > 5;
+
+    const cardBody = useMemo(() =>
+        <>
+            <Card.Title>Recent attendance events</Card.Title>
+            <AttendanceTable events={recentEvents} columns={attendanceTableColumns} sort={{order: Descending, by: AttendanceTableColumn.DATE}}/>
+        </>, [recentEvents]);
+
+    return includeOffcanvas
+        ? <OffcanvasDashboardCard offcanvasTitle="Attendance Events" offcanvasBody={
+            <>
+                <SortSelect settings={offcanvasSort} setSettings={setOffcanvasSort}
+                            sortByOptions={attendanceTableColumns}/>
+                <AttendanceTable events={events} columns={attendanceTableColumns} sort={offcanvasSort}/>
+            </>
+        }>{cardBody}</OffcanvasDashboardCard>
+        : <DashboardCard>{cardBody}</DashboardCard>
+};
+
+export default AttendanceCard;

frontend/src/components/dashboard/CoursesCard.tsx

@@ -0,0 +1,36 @@
+import {Section, Term} from "../../interfaces";
+import {useMemo} from "react";
+import Card from "react-bootstrap/Card";
+import DashboardCard from "./DashboardCard";
+
+/**
+ * Bootstrap card that shows current courses
+ * @param sections List of sections (courses) to display
+ * @param term Term that the course is in (for display purposes only)
+ * @constructor
+ */
+export const CoursesCard = ({sections, term}: { sections: Section[], term: Term | null }) => {
+    useMemo(() => sections.sort((a, b) => a.periodSort - b.periodSort), [sections]);
+
+    return (
+        <DashboardCard>
+            {term === null
+                ?
+                <>
+                    <Card.Title>No term in session. Enjoy your break!</Card.Title>
+                    {/* This is a good place for an illustration of a bear on a beach relaxing */}
+                </>
+                :
+                <>
+                    <Card.Title>{sections.length} courses in {term.title}</Card.Title>
+                    {sections.map(s =>
+                        <li key={s.id}>{s.schoolCourseTitle}</li>
+                    )}
+                    <p>Something was supposed to get added here, and now I don't remember what it was.</p>
+                </>
+            }
+        </DashboardCard>
+    )
+};
+
+export default CoursesCard;

frontend/src/components/dashboard/DashboardCard.tsx

@@ -0,0 +1,18 @@
+import Col from "react-bootstrap/Col";
+import Card from "react-bootstrap/Card";
+import {ReactNode} from "react";
+
+/**
+ * Wrapper component for dashboard cards. Formats children into the card body
+ */
+export default function DashboardCard({children}: { children: ReactNode }) {
+    return (
+        <Col>
+            <Card className="h-100">
+                <Card.Body>
+                    {children}
+                </Card.Body>
+            </Card>
+        </Col>
+    )
+}

frontend/src/components/dashboard/MissingAssignmentCard.tsx

@@ -0,0 +1,64 @@
+import {Descending, Section, SortSettings, Term} from "../../interfaces";
+import Card from "react-bootstrap/Card";
+import DashboardCard from "./DashboardCard";
+import AssignmentsTable, {AssignmentsTableColumn} from "../tables/AssignmentsTable";
+import {useMemo, useState} from "react";
+import SortSelect from "../input/SortSelect";
+import OffcanvasDashboardCard from "./OffcanvasDashboardCard";
+
+type MissingAssignmentCardsProps = { sections: Section[], term: Term | null }
+
+const assignmentsTableColumns = [AssignmentsTableColumn.CLASSNAME, AssignmentsTableColumn.NAME, AssignmentsTableColumn.DUEDATE];
+
+export default function MissingAssignmentCard({sections, term}: MissingAssignmentCardsProps) {
+    const [offcanvasSort, setOffcanvasSort] = useState<SortSettings<AssignmentsTableColumn>>({
+        order: Descending,
+        by: AssignmentsTableColumn.DUEDATE
+    });
+
+    const missingAssignments = useMemo(() => sections
+            .map(s => s.assignments) // Get assignments from sections
+            .flat(1) // Turn array of arrays of assignments into an array of assignments
+            .filter(a => a.score?.missing) // Filter for only missing assignments
+            .sort((a, b) => a.dueDate.getTime() - b.dueDate.getTime()) // Sort by due date
+        , [sections]);
+
+    // Get 5 assignments with the most recent due date
+    const assignmentsToDisplay = useMemo(() => missingAssignments
+            .sort((a, b) => b.dueDate.getTime() - a.dueDate.getTime())
+            .slice(0, 5)
+        , [missingAssignments]);
+
+    // Show button that displays list of all missing assignments (in offcanvas element)
+    const includeOffcanvas = missingAssignments.length > 5;
+
+    const cardBody = useMemo(() =>
+        term === null
+            ?
+            <>
+                <Card.Title>No missing assignments</Card.Title>
+                <p>And I bet you're not <i>Missing</i> school either.</p>
+            </>
+            :
+            <>
+                <Card.Title>
+                    {`${missingAssignments.length} missing assignment${missingAssignments.length === 1 ? '' : 's'} in ${term.title}`}
+                </Card.Title>
+                {missingAssignments.length === 0
+                    ? <p>No missing assignments! Nice job try-hard!</p>
+                    : <AssignmentsTable assignments={assignmentsToDisplay} columns={assignmentsTableColumns}
+                                        sort={{order: Descending, by: AssignmentsTableColumn.DUEDATE}}/>
+                }
+            </>, [assignmentsToDisplay, term, missingAssignments]);
+
+    return includeOffcanvas
+        ? <OffcanvasDashboardCard offcanvasTitle="Missing Assignments" offcanvasBody={
+            <>
+                <SortSelect settings={offcanvasSort} setSettings={setOffcanvasSort}
+                            sortByOptions={assignmentsTableColumns}/>
+                <AssignmentsTable assignments={missingAssignments} columns={assignmentsTableColumns}
+                                  sort={offcanvasSort}/>
+            </>
+        }>{cardBody}</OffcanvasDashboardCard>
+        : <DashboardCard>{cardBody}</DashboardCard>
+};

frontend/src/components/dashboard/OffcanvasDashboardCard.tsx

@@ -0,0 +1,29 @@
+import DashboardCard from "./DashboardCard";
+import {ReactNode, useState} from "react";
+import Button from "react-bootstrap/Button";
+import Offcanvas from "react-bootstrap/Offcanvas";
+
+type DashboardCardProps = { children: ReactNode, offcanvasTitle: string, offcanvasBody: ReactNode | ReactNode[] }
+
+
+export default function OffcanvasDashboardCard({children, offcanvasTitle, offcanvasBody,}: DashboardCardProps) {
+    const [showOffcanvas, setShowOffcanvas] = useState(false);
+
+    return (
+        <>
+            <DashboardCard>
+                <Button className="position-absolute top-0 end-0 m-3" variant="outline-secondary"
+                        onClick={() => setShowOffcanvas(true)}>Show All</Button>
+                {children}
+            </DashboardCard>
+            <Offcanvas show={showOffcanvas} onHide={() => setShowOffcanvas(false)}>
+                <Offcanvas.Header closeButton>
+                    <Offcanvas.Title>{offcanvasTitle}</Offcanvas.Title>
+                </Offcanvas.Header>
+                <Offcanvas.Body>
+                    {offcanvasBody}
+                </Offcanvas.Body>
+            </Offcanvas>
+        </>
+    )
+};

frontend/src/components/dashboard/QuickEmailCard.tsx

@@ -0,0 +1,79 @@
+import Card from "react-bootstrap/Card";
+import Button from "react-bootstrap/Button";
+import DashboardCard from "./DashboardCard";
+import {useContext, useMemo, useState} from "react";
+import {Teacher, Term} from "../../interfaces";
+import Form from "react-bootstrap/Form";
+import {isHiddenTeacher, sectionsTaughtThisTerm} from "../../lib/teachers";
+import {globalContext} from "../../contexts";
+import {getTeachersForDay} from "../../lib/teachers";
+
+type QuickEmailButtonProps = { title: string, teachers: Teacher[], body: string }
+
+const QuickEmailButton = ({title, teachers, body}: QuickEmailButtonProps) =>
+    <Button disabled={teachers.length === 0}
+            onClick={() => openEmailTemplate(teachers.map(t => t.email), body)}>{title}</Button>;
+
+const openEmailTemplate = (to: string[], body: string) => {
+    const deduplicatedEmails = Array.from(new Set(to));
+
+    // Open the mailto URL and focus the window
+    const win = window.open(`mailto:${deduplicatedEmails.join(",")}?body=${encodeURI(body)}`, "_blank");
+    if (win !== null) {
+        win.focus();
+    }
+};
+
+type TeacherObject = { semester: Teacher[], today: Teacher[], tomorrow: Teacher[] }
+
+export default function QuickEmailCard({currentTerm}: { currentTerm: Term | null }) {
+    const {psData} = useContext(globalContext);
+
+    const [hideTeachers, setHideTeachers] = useState(true);
+
+    const teachers = useMemo(() => {
+        const teachers: TeacherObject = {
+            semester: [],
+            today: [],
+            tomorrow: []
+        };
+
+        const currentDate = new Date();
+
+        if (currentTerm !== null) {
+            teachers.semester = psData.teachers.filter(t => sectionsTaughtThisTerm(t, currentTerm));
+            teachers.today = getTeachersForDay(currentDate, psData.schedule);
+            teachers.tomorrow = getTeachersForDay(new Date(new Date().setDate(currentDate.getDate() + 1)), psData.schedule);
+        }
+
+        return teachers;
+    }, [psData.teachers, currentTerm, psData.schedule]);
+
+    const displayTeachers: TeacherObject = useMemo(() =>
+            (!hideTeachers || currentTerm === null)
+                ? teachers
+                : {
+                    semester: teachers.semester.filter(t => !isHiddenTeacher(t, currentTerm)),
+                    today: teachers.today.filter(t => !isHiddenTeacher(t, currentTerm)),
+                    tomorrow: teachers.tomorrow.filter(t => !isHiddenTeacher(t, currentTerm))
+                }
+        , [teachers, hideTeachers, currentTerm]);
+
+    const emailBodyTemplate = `Dear teachers,\n\n\n\nThanks,\n${psData.student.firstName}`;
+
+    return (
+        <DashboardCard>
+            <Card.Title>Quick Email Compose to:</Card.Title>
+            <Form.Check type="checkbox" label="Hide teachers without graded classes" checked={hideTeachers}
+                        onChange={e => setHideTeachers(e.currentTarget.checked)}/>
+            <div className="d-grid gap-2">
+                <QuickEmailButton title="All current teachers" teachers={displayTeachers.semester}
+                                  body={emailBodyTemplate}/>
+                <QuickEmailButton title="All teachers with classes today" teachers={displayTeachers.today}
+                                  body={emailBodyTemplate}/>
+                <QuickEmailButton title="All teachers with classes tomorrow" teachers={displayTeachers.tomorrow}
+                                  body={emailBodyTemplate}/>
+            </div>
+        </DashboardCard>
+    )
+};

frontend/src/components/dashboard/ScheduleCard.tsx

@@ -0,0 +1,15 @@
+import DashboardCard from "./DashboardCard";
+import Card from "react-bootstrap/Card";
+import {Class} from "../../interfaces";
+import ScheduleTable from "../tables/ScheduleTable";
+
+type ScheduleCardProps = { schedule: Class[] }
+
+export default function ScheduleCard({schedule}: ScheduleCardProps) {
+    return (
+        <DashboardCard>
+            <Card.Title>Today's schedule</Card.Title>
+            {schedule.length === 0 ? <p>Yipee! No classes today!</p> : <ScheduleTable schedule={schedule}/>}
+        </DashboardCard>
+    )
+}

frontend/src/components/dashboard/UpcomingHolidaysCard.tsx

@@ -0,0 +1,61 @@
+import DashboardCard from "./DashboardCard";
+import {Ascending, NotInSessionDay, SortSettings} from "../../interfaces";
+import {useMemo, useState} from "react";
+import Card from "react-bootstrap/Card";
+import HolidaysTable, {HolidaysTableColumn} from "../tables/HolidaysTable";
+import SortSelect from "../input/SortSelect";
+import OffcanvasDashboardCard from "./OffcanvasDashboardCard";
+
+const upcomingHolidaysTableColumns = [HolidaysTableColumn.DATE, HolidaysTableColumn.TYPE]
+
+type UpcomingHolidaysCardProps = { notInSessionDays: NotInSessionDay[] }
+
+export const UpcomingHolidaysCard = ({notInSessionDays}: UpcomingHolidaysCardProps) => {
+    const [offcanvasSort, setOffcanvasSort] = useState<SortSettings<HolidaysTableColumn>>({
+        order: Ascending,
+        by: HolidaysTableColumn.DATE
+    });
+
+    const upcomingHolidays = useMemo(() => notInSessionDays
+            .filter(d => d.calendarDay.getTime() > new Date().getTime())
+        , [notInSessionDays]);
+
+    const nextFiveUpcomingHolidays = useMemo(() => upcomingHolidays
+            .sort((a, b) => a.calendarDay.getTime() - b.calendarDay.getTime()) // Sort reverse chronologically
+            .slice(0, 5)
+        , [upcomingHolidays]);
+
+    const includeOffcanvas = upcomingHolidays.length > 5;
+
+    const cardBody = (
+        <>
+            <Card.Title>Upcoming Holidays</Card.Title>
+            <HolidaysTable holidays={nextFiveUpcomingHolidays} columns={upcomingHolidaysTableColumns}
+                           sort={{by: HolidaysTableColumn.DATE, order: Ascending}}/>
+        </>
+    );
+
+    return (
+        <>
+            {includeOffcanvas
+                ?
+                <OffcanvasDashboardCard offcanvasTitle="Upcoming Holidays" offcanvasBody={
+                    <>
+                        <SortSelect settings={offcanvasSort} setSettings={setOffcanvasSort}
+                                    sortByOptions={upcomingHolidaysTableColumns}/>
+                        <HolidaysTable holidays={upcomingHolidays} columns={upcomingHolidaysTableColumns}
+                                       sort={offcanvasSort}/>
+                    </>
+                }>
+                    {cardBody}
+                </OffcanvasDashboardCard>
+                :
+                <DashboardCard>
+                    {cardBody}
+                </DashboardCard>
+            }
+        </>
+    )
+};
+
+export default UpcomingHolidaysCard;

frontend/src/components/datetime.tsx

@@ -0,0 +1,46 @@
+/**
+ * Ways to represent days and times
+ */
+
+import {useMemo} from "react";
+
+/**
+ * Get the browser's locale string. Based on https://stackoverflow.com/a/52112155
+ */
+const navigatorLanguage = ((navigator.languages && navigator.languages.length) ? navigator.languages[0] : navigator.language) || 'en';
+const shortTimeFormatter = new Intl.DateTimeFormat(navigatorLanguage, {timeStyle: "short"});
+const shortDateFormatter = new Intl.DateTimeFormat(navigatorLanguage, {dateStyle: "short"});
+
+// The two FormattedX functions below use useMemo since the formatting functions take a long time to run for some reason
+
+type TimeProps = { date: Date }
+
+/**
+ * Format a Date object as a time in the browser's current locale format
+ */
+export const FormattedTime = ({date}: TimeProps) =>
+    <span>
+        {useMemo(() => shortTimeFormatter.format(date), [date])}
+    </span>;
+
+/**
+ * Format a Date object as a date in the browser's current locale format
+ */
+export const FormattedDate = ({date}: TimeProps) =>
+    <span>
+        {useMemo(() => shortDateFormatter.format(date), [date])}
+    </span>;
+
+// These two are pretty self-explanatory
+
+type TimeRangeProps = { date1: Date, date2: Date }
+
+export const TimeRange = ({date1, date2}: TimeRangeProps) =>
+    <span>
+        <FormattedTime date={date1}/> - <FormattedTime date={date2}/>
+    </span>;
+
+export const DateRange = ({date1, date2}: TimeRangeProps) =>
+    <span>
+        <FormattedDate date={date1}/> - <FormattedDate date={date2}/>
+    </span>;

frontend/src/components/input/LoginFormInput.tsx

@@ -0,0 +1,29 @@
+import React, {Dispatch, ReactNode, SetStateAction, useContext} from "react";
+import {loginStatusContext} from "../../contexts";
+import Form from "react-bootstrap/Form";
+import InputGroup from "react-bootstrap/InputGroup";
+import FloatingLabel from "react-bootstrap/FloatingLabel";
+import {LoginStatus} from "../../interfaces";
+
+type LoginFormInputProps = {
+    label: string, type: string, setter: Dispatch<SetStateAction<string>>, decoration?: ReactNode
+}
+
+export const LoginFormInput = ({label, type, setter, decoration}: LoginFormInputProps) => {
+    const status = useContext(loginStatusContext);
+
+    return (
+        <Form.Group className="mb-3">
+            <InputGroup>
+                <FloatingLabel label={label}>
+                    <Form.Control type={type} required disabled={status === LoginStatus.loggingIn} placeholder=""
+                                  onChange={e => setter(e.target.value)}/>
+                    <Form.Control.Feedback type="invalid">{label} required</Form.Control.Feedback>
+                </FloatingLabel>
+                {decoration !== undefined && decoration}
+            </InputGroup>
+        </Form.Group>
+    )
+};
+
+export default LoginFormInput;

frontend/src/components/input/SortSelect.tsx

@@ -0,0 +1,36 @@
+import Button from "react-bootstrap/Button";
+import {ArrowDown, ArrowUp} from "react-bootstrap-icons";
+import FormSelect from "react-bootstrap/FormSelect";
+import InputGroup from "react-bootstrap/InputGroup";
+import React, {Dispatch, SetStateAction} from "react";
+import {Ascending, SortSettings} from "../../interfaces";
+
+interface SortSelectProps<T extends keyof any> {
+    settings: SortSettings<T>
+    setSettings: Dispatch<SetStateAction<SortSettings<T>>>
+    sortByOptions: T[]
+}
+
+/**
+ * Menu for choosing table sort (sort by and sort order)
+ * @param settings Current settings
+ * @param setSettings Setter to set new settings
+ * @param sortByOptions Possible categories to sort by
+ */
+export default function SortSelect<T extends keyof any>({settings, setSettings, sortByOptions}: SortSelectProps<T>) {
+    return (
+        <InputGroup>
+            {/* Ascending/Descending button */}
+            <Button variant={"outline-secondary"} onClick={() => setSettings({...settings, order: !settings.order})}>
+                {settings.order === Ascending ? <ArrowUp/> : <ArrowDown/>}
+            </Button>
+            {/* Sort field select */}
+            <FormSelect value={String(settings.by)}
+                        onChange={e => setSettings({...settings, by: e.currentTarget.value as T})}>
+                {sortByOptions.map(column =>
+                    <option key={String(column)}>{String(column)}</option>
+                )}
+            </FormSelect>
+        </InputGroup>
+    )
+}

frontend/src/components/input/TermSelect.tsx

@@ -0,0 +1,41 @@
+import {Term} from "../../interfaces";
+import {Dispatch, SetStateAction, useMemo} from "react";
+import ButtonGroup from "react-bootstrap/ButtonGroup";
+import {ToggleButton} from "react-bootstrap";
+import Button from "react-bootstrap/Button";
+
+/**
+ * Term selection component
+ * @param terms List of terms to choose from
+ * @param selectedTerm Term currently selected
+ * @param setSelectedTerm Selected term setter function
+ */
+export default function TermSelect({terms, selectedTerm, setSelectedTerm}: {
+    terms: Term[],
+    selectedTerm: Term | null,
+    setSelectedTerm: Dispatch<SetStateAction<Term | null>>
+}) {
+    const termMapping = useMemo(() => new Map<number, Term>(terms.map(term => [term.id, term])), [terms]);
+
+    const updateSelectedTerm = (newTerm: string) => {
+        // @ts-ignore
+        setSelectedTerm(termMapping.get(Number.parseInt(newTerm)));
+    };
+
+    return (
+        <ButtonGroup>
+            {terms === null
+                ? <Button disabled>No terms found</Button>
+                : <>
+                    {terms.map(term =>
+                        <ToggleButton key={term.id} id={`termradio-${term.id}`} type="radio" value={term.id}
+                                      checked={term.id === selectedTerm?.id}
+                                      onChange={e => updateSelectedTerm(e.currentTarget.value)}>
+                            {term.title}
+                        </ToggleButton>
+                    )}
+                </>
+            }
+        </ButtonGroup>
+    )
+};

frontend/src/components/navigation/Footer.tsx

@@ -0,0 +1,15 @@
+import Col from 'react-bootstrap/Col';
+import Row from "react-bootstrap/Row";
+
+/**
+ * Static footer element
+ */
+export default function Footer() {
+    return (
+        <Row className="justify-content-center py-3 mt-auto">
+            <Col className="text-secondary" style={{textAlign: "center"}}>
+                Created by Owen Ryan and Jasmine Acker | PowerSchool is a registered trademark of PowerSchool Group LLC
+            </Col>
+        </Row>
+    )
+}

frontend/src/components/navigation/Header.tsx

@@ -0,0 +1,47 @@
+/**
+ * Browser header component
+ */
+import Container from "react-bootstrap/Container";
+import Nav from "react-bootstrap/Nav";
+import Navbar from "react-bootstrap/Navbar";
+import {ColumnsGap, Pencil, CalendarWeek, PersonVcard, BoxArrowInRight} from "react-bootstrap-icons";
+import HeaderNavigationLink from "./HeaderNavigationLink";
+import {useContext} from "react";
+import {globalContext} from "../../contexts";
+import {Page} from "../../interfaces";
+
+export const Header = ({signOutFunction}: { signOutFunction: Function }) => {
+    const {psData} = useContext(globalContext);
+    return (
+        <Navbar expand="lg">
+            <Container>
+                <Navbar.Brand>
+                    <img alt="Bear logo" src="/logo.png" width="50" height="50"/>
+                    Bearly Passing
+                </Navbar.Brand>
+                {psData !== null &&
+                    <>
+                        <Navbar.Toggle aria-controls="basic-navbar-nav"/>
+                        <Navbar.Collapse id="basic-navbar-nav">
+                            <Nav className="me-auto">
+                                <HeaderNavigationLink text="Dashboard" icon={<ColumnsGap/>} page={Page.dashboard}/>
+                                <HeaderNavigationLink text="Courses" icon={<Pencil/>} page={Page.sections}/>
+                                <HeaderNavigationLink text="Schedule" icon={<CalendarWeek/>} page={Page.schedule}/>
+                                <HeaderNavigationLink text="Teachers" icon={<PersonVcard/>} page={Page.teachers}/>
+                            </Nav>
+                            <Nav>
+                                <Nav.Item>
+                                    <Nav.Link onClick={() => signOutFunction()}>
+                                        <BoxArrowInRight/> Log Out
+                                    </Nav.Link>
+                                </Nav.Item>
+                            </Nav>
+                        </Navbar.Collapse>
+                    </>
+                }
+            </Container>
+        </Navbar>
+    )
+};
+
+export default Header;

frontend/src/components/navigation/HeaderNavigationLink.tsx

@@ -0,0 +1,23 @@
+import Nav from "react-bootstrap/Nav";
+import {ReactNode, useContext} from "react";
+import {globalContext} from "../../contexts";
+import {Page} from "../../interfaces";
+
+type HeaderNavigationLinkProps = { text: string, icon: ReactNode, page: Page }
+
+/** Header link. Has logic for setting the page using the custom routing stuff.
+ * @param text Text to display
+ * @param icon Fontawesoem icon to display
+ * @param page Page enum to set when clicked
+ */
+export default function HeaderNavigationLink({text, icon, page}: HeaderNavigationLinkProps) {
+    const {currentPage, setCurrentPage} = useContext(globalContext);
+
+    return (
+        <Nav.Item>
+            <Nav.Link active={currentPage === page} onClick={() => setCurrentPage(page)}>
+                {icon} {text}
+            </Nav.Link>
+        </Nav.Item>
+    )
+};

frontend/src/components/schedule.tsx

@@ -0,0 +1,43 @@
+/**
+ * Schedule components
+ */
+import {Class, ScheduleDay} from "../interfaces";
+import {FormattedDate, TimeRange} from "./datetime";
+import Card from "react-bootstrap/Card";
+import {useMemo} from "react";
+import Alert from "react-bootstrap/Alert";
+
+type ScheduleDayProps = { day: Date, schedule: ScheduleDay | null }
+
+export const ClassesDay = ({day, schedule}: ScheduleDayProps) => {
+
+    useMemo(() => {
+            if (schedule?.classes !== undefined)
+                schedule.classes.sort((a, b) => a.times.start.getTime() - b.times.start.getTime())
+        }
+        , [schedule?.classes]);
+    const dayName = day.toLocaleString(window.navigator.language, {weekday: "long"});
+
+    return (
+        <Card className={(schedule?.classes?.length || 0) === 0 ? "bg-body-secondary" : ""}>
+            <Card.Body>
+                <Card.Title>{dayName} (<FormattedDate date={day}/>)</Card.Title>
+                {schedule?.holidays?.map(h =>
+                    <Alert variant="info">{h.description || h.calType}</Alert>
+                )}
+                {schedule?.classes?.map((c, id) => <ClassBlock key={id} classObj={c}/>)}
+            </Card.Body>
+        </Card>
+    )
+};
+
+export const ClassBlock = ({classObj}: { classObj: Class }) =>
+    <>
+        <hr/>
+        <strong>{classObj.section.schoolCourseTitle}</strong>
+        <p className="no-margin">
+            <TimeRange date1={classObj.times.start} date2={classObj.times.stop}/>
+        </p>
+        {/* Display the room if the section has one */}
+        {classObj.section.roomName && <p className="no-margin">Room: {classObj.section.roomName}</p>}
+    </>;

frontend/src/components/tables/AssignmentsTable.tsx

@@ -0,0 +1,59 @@
+import {Assignment, SortSettings} from "../../interfaces";
+import {FormattedDate} from "../datetime";
+import GradeScore from "../GradeScore";
+import SortedTable, {TableColumns} from "./SortedTable";
+
+export enum AssignmentsTableColumn {
+    NAME = "Name",
+    CLASSNAME = "Class",
+    DUEDATE = "Due",
+    SCORE = "Score",
+    WEIGHT = "Weight",
+    CATEGORY = "Category"
+}
+
+const tableColumns: TableColumns<AssignmentsTableColumn, Assignment> = {
+    [AssignmentsTableColumn.NAME]: {
+        format: (a) => a.name,
+        sort: (a, b) => b.name.localeCompare(a.name)
+    },
+    [AssignmentsTableColumn.CLASSNAME]: {
+        format: (a) => a.section?.schoolCourseTitle || "ERROR",
+        sort: (a, b) => b.section?.schoolCourseTitle.localeCompare(a.section?.schoolCourseTitle || "") || 0
+    },
+    [AssignmentsTableColumn.DUEDATE]: {
+        format: (a) => <FormattedDate date={a.dueDate}/>,
+        sort: (a, b) => b.dueDate.getTime() - a.dueDate.getTime()
+    },
+    [AssignmentsTableColumn.SCORE]: {
+        format: (a) => <GradeScore assignment={a}/>,
+        sort: (a, b) => parseFloat(b.score?.percent || "0") - parseFloat(a.score?.percent || "0")
+    },
+    [AssignmentsTableColumn.WEIGHT]: {
+        format: (a) => a.weight,
+        sort: (a, b) => b.weight - a.weight
+    },
+    [AssignmentsTableColumn.CATEGORY]: {
+        format: (a) => a.category?.name || "No category",
+        sort: (a, b) => b.categoryId - a.categoryId
+    }
+};
+
+type AssignmentsTableProps = {
+    assignments: Assignment[],
+    columns: AssignmentsTableColumn[],
+    sort: SortSettings<AssignmentsTableColumn>
+}
+
+/**
+ * SortedTable wrapper for displaying assignments
+ * @param assignments Array of assignments to display
+ * @param columns Columns to display
+ * @param tableProps Other parameters to pass to SortedTable (including the sort attribute)
+ */
+export default function AssignmentsTable({assignments, columns, ...tableProps}: AssignmentsTableProps) {
+    return (
+        <SortedTable columnsToShow={columns} columns={tableColumns} data={assignments}
+                     dataKey={(a: Assignment) => a.id} {...tableProps}/>
+    )
+}

frontend/src/components/tables/AttendanceTable.tsx

@@ -0,0 +1,45 @@
+import {FormattedDate} from "../datetime";
+import {Attendance, SortSettings} from "../../interfaces";
+import SortedTable, {TableColumns} from "./SortedTable";
+
+export enum AttendanceTableColumn {
+    DATE = "Date",
+    TYPE = "Type",
+    COMMENT = "Comment"
+}
+
+const tableColumns: TableColumns<AttendanceTableColumn, Attendance> = {
+    [AttendanceTableColumn.DATE]: {
+        format: (a) => <FormattedDate date={a.attDate}/>,
+        sort: (a, b) => a.attDate.getTime() - b.attDate.getTime()
+    },
+    [AttendanceTableColumn.TYPE]: {
+        format: (a) => a.attCode?.description,
+        sort: (a, b) => b.attCodeid - a.attCodeid
+    },
+    [AttendanceTableColumn.COMMENT]: {
+        format: (a) => a.attComment,
+        sort: (a, b) => b.attComment?.localeCompare(a.attComment || "") || 0
+    }
+};
+
+type AttendanceTableProps = {
+    events: Attendance[],
+    columns: AttendanceTableColumn[],
+    sort: SortSettings<AttendanceTableColumn>
+}
+
+/**
+ * SortedTable wrapper for displaying attendance
+ * @param events Array of attendance events to display
+ * @param columns Columns to display
+ * @param tableProps Other parameters to pass to SortedTable (including the sort attribute)
+ */
+export default function AttendanceTable({events, columns, ...tableProps}: AttendanceTableProps) {
+    return (
+        <SortedTable
+            columnsToShow={columns} columns={tableColumns} data={events}
+            dataKey={(a: Attendance) => a.id} {...tableProps}/>
+
+    )
+}

frontend/src/components/tables/FinalGradesTable.tsx

@@ -0,0 +1,29 @@
+import {Section} from "../../interfaces";
+import Table from "react-bootstrap/Table";
+import {useMemo} from "react";
+
+export default function FinalGradesTable({section}: { section: Section }) {
+    useMemo(() => section.finalGrades.sort(([a], [b]) => a.endDate.getTime() - b.endDate.getTime()), [section.finalGrades]);
+
+    return (
+        <Table bordered>
+            <thead>
+            <tr>
+                {section.finalGrades.map(([term]) => <td>{term.abbreviation}</td>)}
+            </tr>
+            </thead>
+            <tbody>
+            <tr>
+                {section.finalGrades.map(([_, grade]) =>
+                    <td>
+                        {grade === null
+                            ? <strong>--</strong>
+                            : <><strong>{grade?.grade}</strong> ({grade?.percent}%)</>
+                        }
+                    </td>
+                )}
+            </tr>
+            </tbody>
+        </Table>
+    )
+};

frontend/src/components/tables/HolidaysTable.tsx

@@ -0,0 +1,38 @@
+import {FormattedDate} from "../datetime";
+import {NotInSessionDay, SortSettings} from "../../interfaces";
+import SortedTable, {TableColumns} from "./SortedTable";
+
+export enum HolidaysTableColumn {
+    DATE = "Date",
+    TYPE = "Type"
+}
+
+const tableColumns: TableColumns<HolidaysTableColumn, NotInSessionDay> = {
+    [HolidaysTableColumn.DATE]: {
+        format: (d) => <FormattedDate date={d.calendarDay}/>,
+        sort: (a, b) => a.calendarDay.getTime() - b.calendarDay.getTime()
+    },
+    [HolidaysTableColumn.TYPE]: {
+        format: (d) => d.calType,
+        sort: (a, b) => b.calType.localeCompare(a.calType) || 0
+    }
+};
+
+type HolidaysTableProps = {
+    holidays: NotInSessionDay[],
+    columns: HolidaysTableColumn[],
+    sort: SortSettings<HolidaysTableColumn>
+}
+
+/**
+ * SortedTable wrapper for displaying holidays
+ * @param holidays Array of holidays to display
+ * @param columns Columns to display
+ * @param tableProps Other parameters to pass to SortedTable (including the sort attribute)
+ */
+export default function HolidaysTable({holidays, columns, ...tableProps}: HolidaysTableProps) {
+    return (
+        <SortedTable columnsToShow={columns} columns={tableColumns} data={holidays}
+                     dataKey={(d: NotInSessionDay) => d.id} {...tableProps}/>
+    )
+}

frontend/src/components/tables/ScheduleTable.tsx

@@ -0,0 +1,35 @@
+import {useMemo} from "react";
+import Table from "react-bootstrap/Table";
+import {TimeRange} from "../datetime";
+import {Class} from "../../interfaces";
+
+type ScheduleTableProps = { schedule: Class[] };
+
+export default function ScheduleTable({schedule}: ScheduleTableProps) {
+    useMemo(() => schedule
+            .sort((a, b) => a.times.start.getTime() - b.times.start.getTime())
+        , [schedule]);
+
+    return (
+        <Table striped>
+            <thead>
+            <tr>
+                <th>Time</th>
+                <th>Class</th>
+            </tr>
+            </thead>
+            <tbody>
+            {schedule.map((cls, id) =>
+                <tr key={id}>
+                    <td>
+                        <strong>
+                            <TimeRange date1={cls.times.start} date2={cls.times.stop}/>
+                        </strong>
+                    </td>
+                    <td>{cls.section.schoolCourseTitle}</td>
+                </tr>
+            )}
+            </tbody>
+        </Table>
+    )
+};

frontend/src/components/tables/SectionDetailsTable.tsx

@@ -0,0 +1,22 @@
+import {Section} from "../../interfaces";
+
+type SectionDetailsTableProps = { section: Section }
+
+export default function SectionDetailsTable({section}: SectionDetailsTableProps) {
+    return (
+        <table>
+            <tbody>
+            <tr>
+                <th>Period:</th>
+                <td>{section.periodSort}</td>
+            </tr>
+            {section.roomName &&
+                <tr>
+                    <th>Room:</th>
+                    <td>{section.roomName}</td>
+                </tr>
+            }
+            </tbody>
+        </table>
+    )
+}

frontend/src/components/tables/SortedTable.tsx

@@ -0,0 +1,51 @@
+import Table from "react-bootstrap/Table";
+import {ReactNode, useMemo} from "react";
+import {Ascending, SortSettings} from "../../interfaces";
+
+// TODO: Document these types
+
+type TableColumn<T> = {
+    sort: (arg0: T, arg1: T) => number
+    format: (arg0: T) => ReactNode | string
+}
+
+export type TableColumns<Enum extends keyof any, Data> = { [K in Enum]: TableColumn<Data> }
+
+type SortedTableProps<Enum extends keyof any, Data> = {
+    columnsToShow: Enum[]
+    columns: TableColumns<Enum, Data>
+    data: Data[]
+    dataKey: (arg0: Data) => string | number
+    sort: SortSettings<Enum>
+}
+
+// TODO: Docstring
+export default function SortedTable<ColumnT extends keyof any, DataT>(props: SortedTableProps<ColumnT, DataT>) {
+    // Re-sort table data whenever something important changes
+    useMemo(() =>
+            props.data.sort((a, b) => props.columns[props.sort.by].sort(a, b) * (props.sort.order === Ascending ? 1 : -1))
+        , [props.data, props.columns, props.sort.by, props.sort.order]);
+
+    return (
+        <Table striped>
+            <thead>
+            <tr>
+                {props.columnsToShow.map((c, id) =>
+                    <th key={id} scope="col">{String(c)}</th>
+                )}
+            </tr>
+            </thead>
+            <tbody>
+            {props.data.map(a =>
+                <tr key={props.dataKey(a)}>
+                    {props.columnsToShow.map((c, id) =>
+                        <td key={id}>
+                            {props.columns[c].format(a)}
+                        </td>
+                    )}
+                </tr>
+            )}
+            </tbody>
+        </Table>
+    )
+};

frontend/src/contexts.ts

@@ -0,0 +1,17 @@
+import {Context, createContext, Dispatch, SetStateAction} from "react";
+import {LoginStatus, Page, PowerSchoolData, Section} from "./interfaces";
+
+export const loginStatusContext = createContext(LoginStatus.notLoggedIn);
+
+interface GlobalContextInterface {
+    psData: PowerSchoolData
+    currentPage: Page
+    setCurrentPage: Dispatch<SetStateAction<Page>>
+    setCurrentSection: Dispatch<SetStateAction<Section>>
+}
+
+// Setting the default value of globalContext to null is _technically_ problematic, but the interface provider is in
+// App.tsx and there are no possible situations where the default context value will be pulled under current
+// circumstances
+// @ts-ignore
+export const globalContext: Context<GlobalContextInterface> = createContext(null);

frontend/src/index.sass

@@ -0,0 +1,8 @@
+body
+  margin: 0
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif
+  -webkit-font-smoothing: antialiased
+  -moz-osx-font-smoothing: grayscale
+
+.no-margin
+  margin: 0

frontend/src/index.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.sass';
+import App from './App';
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+const root = ReactDOM.createRoot(
+    document.getElementById('root') as HTMLElement
+);
+root.render(
+    <React.StrictMode>
+        <App/>
+    </React.StrictMode>
+);

frontend/src/interfaces.ts

@@ -0,0 +1,350 @@
+// Typing stubs for incoming PowerSchool data, with a bit of internal structs and enums at the bottom of the file
+
+export interface PowerSchoolData {
+    activities: any[]
+    archivedFinalGrades: any[]
+    assignmentCategories: AssignmentCategory[]
+    assignmentScores: AssignmentScore[]
+    assignments: Assignment[]
+    attendance: Attendance[]
+    attendanceCodes: AttendanceCode[]
+    bulletins: any[]
+    citizenCodes: any[]
+    citizenGrades: any[]
+    customPage: any[]
+    enrollments: any[]
+    extension: string
+    feeBalance: FeeBalance
+    feeTransactions: any[]
+    feeTypes: FeeType[]
+    finalGrades: FinalGrade[]
+    gradeScales: any[]
+    lunchTransactions: any[]
+    notInSessionDays: NotInSessionDay[]
+    notificationSettingsVO: NotificationSettings
+    periods: Period[]
+    remoteSchools: any[]
+    reportingTerms: ReportingTerm[]
+    schools: School[]
+    schedule: Map<number, ScheduleDay>
+    sections: Section[]
+    standards: any[]
+    standardsGrades: any[]
+    student: Student
+    studentDcid: number
+    studentId: number
+    teachers: Teacher[]
+    terms: Term[]
+    yearId: number
+    fetchedAt: Date
+}
+
+export interface AssignmentCategory {
+    abbreviation: null
+    description: null
+    gradeBookType: number
+    id: number
+    name: string
+}
+
+export interface AssignmentScore {
+    assignment: Assignment | null
+    assignmentId: number
+    collected: Boolean
+    comment: string | null
+    exempt: Boolean
+    gradeBookType: number
+    id: number
+    incomplete: Boolean
+    late: Boolean
+    letterGrade: string
+    missing: Boolean
+    percent: string
+    score: string
+    scoretype: number
+}
+
+export interface Assignment {
+    abbreviation: null
+    additionalCategories: AssignmentCategory[]
+    additionalCategoryIds: any[]
+    assignmentid: number
+    category: AssignmentCategory | null
+    categoryId: number
+    description: string | null
+    dueDate: Date
+    gradeBookType: number
+    id: number
+    includeinfinalgrades: number
+    name: string
+    pointspossible: number
+    publishDaysBeforeDue: number
+    publishState: number
+    publishonspecificdate: Date | null
+    publishscores: number
+    score: AssignmentScore | null
+    sectionDcid: number
+    section: Section | null
+    sectionid: number
+    type: number
+    weight: number
+}
+
+export interface Attendance {
+    adaValueCode: number
+    adaValueTime: number
+    admValue: number
+    attCode: AttendanceCode | null
+    attCodeid: number
+    attComment: string | null
+    attDate: Date
+    attFlags: number
+    attInterval: number
+    attModeCode: string
+    ccid: number
+    id: number
+    periodid: number
+    schoolid: number
+    studentid: number
+    totalMinutes: number
+    transactionType: null
+    yearid: number
+}
+
+export interface AttendanceCode {
+    attCode: string | null
+    codeType: number
+    description: string
+    id: number
+    schoolid: number
+    sortorder: number
+    yearid: number
+}
+
+export interface FeeBalance {
+    balance: null
+    credit: null
+    debit: null
+    id: null
+    schoolid: null
+    yearid: null
+}
+
+export interface FeeType {
+    descript: string | null
+    feeCategoryName: string
+    id: number
+    schoolnumber: number
+    sort: number
+    title: string
+}
+
+export interface FinalGrade {
+    commentValue: null
+    dateStored: null
+    grade: string
+    id: number
+    percent: number
+    reportingTerm: ReportingTerm | null
+    reportingTermId: number
+    section: Section | null
+    sectionid: number
+    storeType: number
+}
+
+export interface NotInSessionDay {
+    calType: string
+    calendarDay: Date
+    description: null
+    id: number
+    schoolnumber: number
+}
+
+export interface NotificationSettings {
+    applyToAllStudents: null
+    balanceAlerts: null
+    detailedAssignments: null
+    detailedAttendance: null
+    emailAddresses: any[] // Probably strings?
+    frequency: null
+    gradeAndAttSummary: null
+    guardianStudentId: null
+    mainEmail: null
+    schoolAnnouncements: null
+    sendNow: null
+}
+
+export interface Period {
+    abbreviation: string
+    id: number
+    name: string
+    periodnumber: number
+    schoolid: number
+    sortOrder: number
+    yearid: number
+}
+
+export interface ReportingTerm {
+    abbreviation: string
+    endDate: Date
+    id: number
+    schoolid: number
+    sendingGrades: Boolean
+    sortOrder: number
+    startDate: Date
+    suppressGrades: Boolean
+    suppressPercents: Boolean
+    term: Term | null
+    termid: number
+    title: string
+    yearid: number
+}
+
+export interface School {
+    abbreviation: string
+    address: string
+    currentTermId: number
+    disabledFeatures: DisabledFeatures
+    highGrade: number
+    lowGrade: number
+    mapMimeType: null
+    name: string
+    schoolDisabled: Boolean
+    schoolDisabledMessage: string
+    schoolDisabledTitle: string
+    schoolId: number
+    schoolMapModifiedDate: null
+    schoolnumber: number
+    schooladdress: string
+    schoolcity: string
+    schoolcountry: null
+    schoolfax: string
+    schoolphone: string
+    schoolstate: string
+    schoolzip: string
+}
+
+export interface DisabledFeatures {
+    activities: Boolean
+    assignments: Boolean
+    attendance: Boolean
+    citizenship: Boolean
+    currentGpa: Boolean
+    emailalerts: Boolean
+    fees: Boolean
+    finalGrades: Boolean
+    meals: Boolean
+    pushAttendance: Boolean
+    pushGrade: Boolean
+    standards: Boolean
+}
+
+export interface Section {
+    assignments: Assignment[]
+    courseCode: string
+    dcid: number
+    description: string | null
+    enrollments: Enrollment[]
+    expression: string
+    finalGrades: [ReportingTerm, FinalGrade | null][]
+    gradeBookType: number
+    id: number
+    periodSort: number
+    roomName: string
+    schoolCourseTitle: string
+    schoolnumber: number | null
+    sectionNum: string
+    startStopDates: StartStopDate[]
+    teacher: Teacher | null
+    teacherID: number
+    term: Term | null
+    termID: number
+}
+
+export interface Enrollment {
+    endDate: Date
+    enrollStatus: number
+    id: number
+    startDate: Date
+}
+
+export interface StartStopDate {
+    sectionEnrollmentId: number
+    start: Date
+    stop: Date
+}
+
+export interface Student {
+    currentGPA: null
+    currentMealBalance: number
+    currentTerm: ReportingTerm | null
+    dcid: number
+    dob: string // ISO8601
+    ethnicity: string // A number
+    firstName: string
+    gender: string // Letter abbreviation
+    gradeLevel: number
+    guardianAccessDisabled: Boolean
+    id: number
+    lastName: string
+    middleName: string
+    photoDate: string // ISO8601
+    startingMealBalance: number
+}
+
+export interface Teacher {
+    email: string
+    firstName: string
+    id: number
+    lastName: string
+    sectionsByTerm: Map<number, Section[]>
+    schoolPhone: string | null
+}
+
+export interface Term {
+    abbrev: string
+    childTerms: Term[]
+    endDate: Date
+    id: number
+    parentTerm: Term | null
+    parentTermId: number
+    reportingTerms: ReportingTerm[]
+    schoolnumber: string // But it's actually a number
+    startDate: Date
+    suppressed: Boolean
+    title: string
+}
+
+export enum LoginStatus {
+    notLoggedIn,
+    loggingIn,
+    error
+}
+
+export interface Class {
+    times: StartStopDate
+    section: Section
+}
+
+export interface ScheduleDay {
+    classes?: Class[],
+    holidays?: NotInSessionDay[]
+}
+
+export enum Page {
+    login,
+    dashboard,
+    sections,
+    sectionGrades,
+    schedule,
+    teachers
+}
+
+export type SortOrder = boolean;
+export const Ascending = true;
+export const Descending = false;
+
+export interface SortSettings<T extends keyof any> {
+    by: T
+    order: SortOrder
+}

frontend/src/lib/dataParser.ts

@@ -0,0 +1,481 @@
+/**
+ * Converting raw PowerSchool query data into stuff used by BearlyPassing
+ * This mostly means replacing references to an id to just references to the object
+ * Example, each section (class) has a teacherID variable, now it just has a section variable that references the class
+ * Also converting dates from ISO8601 string form to an actual date object
+ */
+
+import {
+    Assignment,
+    AssignmentCategory,
+    AssignmentScore,
+    PowerSchoolData,
+    ReportingTerm,
+    Section,
+    Teacher,
+    Term,
+    FinalGrade, ScheduleDay
+} from "../interfaces";
+import hashDate from "./dateHasher";
+
+export interface RawPowerSchoolData {
+    activities: any[]
+    archivedFinalGrades: any[]
+    assignmentCategories: RawAssignmentCategory[]
+    assignmentScores: RawAssignmentScore[]
+    assignments: RawAssignment[]
+    attendance: RawAttendance[]
+    attendanceCodes: RawAttendanceCode[]
+    bulletins: any[]
+    citizenCodes: any[]
+    citizenGrades: any[]
+    customPage: any[]
+    enrollments: any[]
+    extension: string
+    feeBalance: RawFeeBalance
+    feeTransactions: any[]
+    feeTypes: RawFeeType[]
+    finalGrades: RawFinalGrade[]
+    gradeScales: any[]
+    lunchTransactions: any[]
+    notInSessionDays: RawNotInSessionDay[]
+    notificationSettingsVO: RawNotificationSettings
+    periods: RawPeriod[]
+    remoteSchools: any[]
+    reportingTerms: RawReportingTerm[]
+    schools: RawSchool[]
+    sections: RawSection[]
+    standards: any[]
+    standardsGrades: any[]
+    student: RawStudent
+    studentDcid: number
+    studentId: number
+    teachers: RawTeacher[]
+    terms: RawTerm[]
+    yearId: number
+}
+
+interface RawAssignmentCategory {
+    abbreviation: null
+    description: null
+    gradeBookType: number
+    id: number
+    name: string
+}
+
+interface RawAssignmentScore {
+    assignmentId: number
+    collected: Boolean
+    comment: string | null
+    exempt: Boolean
+    gradeBookType: number
+    id: number
+    incomplete: Boolean
+    late: Boolean
+    letterGrade: string
+    missing: Boolean
+    percent: string
+    score: string
+    scoretype: number
+}
+
+interface RawAssignment {
+    abbreviation: null
+    additionalCategoryIds: any[]
+    assignmentid: number
+    categoryId: number
+    description: string | null
+    dueDate: string // Date and time with offset in ISO8601 format
+    gradeBookType: number
+    id: number
+    includeinfinalgrades: number
+    name: string
+    pointspossible: number
+    publishDaysBeforeDue: number
+    publishState: number
+    publishonspecificdate: string | null // ISO8601
+    publishscores: number
+    sectionDcid: number
+    sectionid: number
+    type: number
+    weight: number
+}
+
+interface RawAttendance {
+    adaValueCode: number
+    adaValueTime: number
+    admValue: number
+    attCodeid: number
+    attComment: string | null
+    attDate: string
+    attFlags: number
+    attInterval: number
+    attModeCode: string
+    ccid: number
+    id: number
+    periodid: number
+    schoolid: number
+    studentid: number
+    totalMinutes: number
+    transactionType: null
+    yearid: number
+}
+
+interface RawAttendanceCode {
+    attCode: string | null
+    codeType: number
+    description: string
+    id: number
+    schoolid: number
+    sortorder: number
+    yearid: number
+}
+
+interface RawFeeBalance {
+    balance: null
+    credit: null
+    debit: null
+    id: null
+    schoolid: null
+    yearid: null
+}
+
+interface RawFeeType {
+    descript: string | null
+    feeCategoryName: string
+    id: number
+    schoolnumber: number
+    sort: number
+    title: string
+}
+
+interface RawFinalGrade {
+    commentValue: null
+    dateStored: null
+    grade: string
+    id: number
+    percent: number
+    reportingTermId: number
+    sectionid: number
+    storeType: number
+}
+
+interface RawNotInSessionDay {
+    calType: string
+    calendarDay: string // ISO8601
+    description: null
+    id: number
+    schoolnumber: number
+}
+
+interface RawNotificationSettings {
+    applyToAllStudents: null
+    balanceAlerts: null
+    detailedAssignments: null
+    detailedAttendance: null
+    emailAddresses: any[] // Probably strings?
+    frequency: null
+    gradeAndAttSummary: null
+    guardianStudentId: null
+    mainEmail: null
+    schoolAnnouncements: null
+    sendNow: null
+}
+
+interface RawPeriod {
+    abbreviation: string
+    id: number
+    name: string
+    periodnumber: number
+    schoolid: number
+    sortOrder: number
+    yearid: number
+}
+
+interface RawReportingTerm {
+    abbreviation: string
+    endDate: string // ISO8601
+    id: number
+    schoolid: number
+    sendingGrades: Boolean
+    sortOrder: number
+    startDate: string // ISO8601
+    suppressGrades: Boolean
+    suppressPercents: Boolean
+    termid: number
+    title: string
+    yearid: number
+}
+
+interface RawSchool {
+    abbreviation: string
+    address: string
+    currentTermId: number
+    disabledFeatures: RawDisabledFeatures
+    highGrade: number
+    lowGrade: number
+    mapMimeType: null
+    name: string
+    schoolDisabled: Boolean
+    schoolDisabledMessage: string
+    schoolDisabledTitle: string
+    schoolId: number
+    schoolMapModifiedDate: null
+    schoolnumber: number
+    schooladdress: string
+    schoolcity: string
+    schoolcountry: null
+    schoolfax: string
+    schoolphone: string
+    schoolstate: string
+    schoolzip: string
+}
+
+interface RawDisabledFeatures {
+    activities: Boolean
+    assignments: Boolean
+    attendance: Boolean
+    citizenship: Boolean
+    currentGpa: Boolean
+    emailalerts: Boolean
+    fees: Boolean
+    finalGrades: Boolean
+    meals: Boolean
+    pushAttendance: Boolean
+    pushGrade: Boolean
+    standards: Boolean
+}
+
+interface RawSection {
+    courseCode: string
+    dcid: number
+    description: string | null
+    enrollments: RawEnrollment[]
+    expression: string
+    gradeBookType: number
+    id: number
+    periodSort: number
+    roomName: string
+    schoolCourseTitle: string
+    schoolnumber: number | null
+    sectionNum: string
+    startStopDates: RawStartStopDate[]
+    teacherID: number
+    termID: number
+}
+
+interface RawEnrollment {
+    endDate: string // ISO8601
+    enrollStatus: number
+    id: number
+    startDate: string // ISO8601
+}
+
+interface RawStartStopDate {
+    sectionEnrollmentId: number
+    start: string
+    stop: string
+}
+
+interface RawStudent {
+    currentGPA: null
+    currentMealBalance: number
+    currentTerm: string
+    dcid: number
+    dob: string // ISO8601
+    ethnicity: string // A number
+    firstName: string
+    gender: string // Letter abbreviation
+    gradeLevel: number
+    guardianAccessDisabled: Boolean
+    id: number
+    lastName: string
+    middleName: string
+    photoDate: string // ISO8601
+    startingMealBalance: number
+}
+
+interface RawTeacher {
+    email: string
+    firstName: string
+    id: number
+    lastName: string
+    schoolPhone: string | null
+}
+
+interface RawTerm {
+    abbrev: string
+    endDate: string // ISO8601
+    id: number
+    parentTermId: number
+    schoolnumber: string // But it's actually a number
+    startDate: string // ISO8601
+    suppressed: Boolean
+    title: string
+}
+
+
+export const ParseRawPowerSchooData = (rawData: RawPowerSchoolData): PowerSchoolData => {
+    const currentTime = new Date();
+
+    //First, create mappings that don't have any dependencies
+    const assignmentCategoriesMapping = new Map<number, AssignmentCategory>(rawData.assignmentCategories.map(assignmentCategory => [assignmentCategory.id, assignmentCategory]));
+    const attendanceCodeMapping = new Map<number, RawAttendanceCode>(rawData.attendanceCodes.map(attendanceCode => [attendanceCode.id, attendanceCode]));
+
+    const convertedTerms: Term[] = rawData.terms.map(t => ({
+        ...t,
+        endDate: new Date(t.endDate),
+        startDate: new Date(t.startDate),
+        parentTerm: null,
+        childTerms: [],
+        reportingTerms: []
+    }));
+    const termMapping = new Map<number, Term>(convertedTerms.map(term => [term.id, term]));
+
+    const convertedAssignments: Assignment[] = rawData.assignments.map(assignment => (
+        {
+            ...assignment,
+            additionalCategories: assignment.additionalCategoryIds
+                .map(categoryId => assignmentCategoriesMapping.get(categoryId) || undefined)
+                .filter((c): c is AssignmentCategory => c !== undefined),
+            category: assignmentCategoriesMapping.get(assignment.categoryId) || null,
+            dueDate: new Date(assignment.dueDate),
+            score: null,
+            section: null,
+            publishonspecificdate: (assignment.publishonspecificdate === null) ? null : new Date(assignment.publishonspecificdate)
+        }
+    ));
+    const assignmentMapping = new Map<number, Assignment>(convertedAssignments.map(assignment => [assignment.id, assignment]));
+
+    let convertedAssignmentScores: AssignmentScore[] = rawData.assignmentScores.map(assignmentScore => (
+        {...assignmentScore, assignment: assignmentMapping.get(assignmentScore.assignmentId) || null}
+    ));
+    const assignmentScoresMapping = new Map<number, AssignmentScore>(convertedAssignmentScores.map(assignmentScore => [assignmentScore.assignmentId, assignmentScore]));
+
+    const convertedSections: Section[] = rawData.sections.map(s => {
+        return {
+            ...s,
+            assignments: convertedAssignments.filter(assignment => assignment.sectionid === s.id),
+            finalGrades: [],
+            teacher: null,
+            term: termMapping.get(s.termID) || null,
+            startStopDates: s.startStopDates.map(ssd => {
+                return {
+                    ...ssd,
+                    start: new Date(ssd.start),
+                    stop: new Date(ssd.stop),
+                }
+            }),
+            enrollments: s.enrollments.map(e => {
+                return {...e, startDate: new Date(e.startDate), endDate: new Date(e.endDate)}
+            })
+        }
+    });
+    const sectionMapping = new Map<number, Section>(convertedSections.map(section => [section.id, section]));
+
+    convertedAssignments.forEach(a => {
+        a.score = assignmentScoresMapping.get(a.id) || null;
+        a.section = sectionMapping.get(a.sectionid) || null;
+    });
+
+    const convertedTeachers: Teacher[] = rawData.teachers.map(teacher => {
+        const teachingSections = convertedSections
+            .filter(section => section.teacherID === teacher.id);
+        const sectionsByTermMapping = new Map<number, Section[]>(convertedTerms.map(term =>
+            [term.id, teachingSections.filter(section => section.termID === term.id || term.childTerms.map(t => t.id).includes(section.termID))]));
+        return {...teacher, sectionsByTerm: sectionsByTermMapping};
+    });
+    const teacherMapping = new Map<number, Teacher>(convertedTeachers.map(teacher => [teacher.id, teacher]));
+
+    const convertedReportingTerms: ReportingTerm[] = rawData.reportingTerms.map(reportingTerm => {
+        return {
+            ...reportingTerm, endDate: new Date(reportingTerm.endDate),
+            startDate: new Date(reportingTerm.startDate),
+            term: termMapping.get(reportingTerm.termid) || null
+        };
+    });
+    const reportingTermMapping: Map<number, ReportingTerm> = new Map(convertedReportingTerms.map(t => [t.id, t]));
+
+    const convertedFinalGrades: FinalGrade[] = rawData.finalGrades.map(finalGrade =>
+        ({
+            section: sectionMapping.get(finalGrade.sectionid) || null,
+            reportingTerm: reportingTermMapping.get(finalGrade.reportingTermId) || null, ...finalGrade
+        })
+    );
+
+    const convertedNotInSessionDays = rawData.notInSessionDays.map(notInSessionDay => ({
+        ...notInSessionDay, calendarDay: new Date(notInSessionDay.calendarDay)
+    }));
+
+    convertedReportingTerms.forEach(r => r.term?.reportingTerms.push(r));
+
+    convertedSections.forEach(s => {
+        const finalGradeMapping = new Map(convertedFinalGrades.filter(g => g.sectionid === s.id).map(g => [g.reportingTermId, g]));
+        s.term?.reportingTerms.forEach(t => s.finalGrades.push([t, finalGradeMapping.get(t.id) || null]))
+    });
+
+    const schedule = new Map<number, ScheduleDay>();
+
+    convertedSections.forEach(section => section.startStopDates.forEach(date => {
+        const classObject = {times: date, section: section};
+
+        const dateHash = hashDate(date.start);
+        const scheduleObject = schedule.get(dateHash) || {};
+        if (scheduleObject.classes === undefined) {
+            scheduleObject.classes = [classObject]
+        } else {
+            scheduleObject.classes.push(classObject)
+        }
+        schedule.set(dateHash, scheduleObject);
+    }));
+
+    convertedNotInSessionDays.forEach(d => {
+        const dateHash = hashDate(d.calendarDay);
+        const scheduleObject = schedule.get(dateHash) || {};
+        if (scheduleObject.holidays === undefined) {
+            scheduleObject.holidays = [d]
+        } else {
+            scheduleObject.holidays.push(d)
+        }
+        schedule.set(dateHash, scheduleObject);
+    });
+
+    return {
+        ...rawData,
+        assignmentScores: convertedAssignmentScores,
+        assignments: convertedAssignments,
+        attendance: rawData.attendance.map(attendance => (
+            {
+                ...attendance,
+                attCode: attendanceCodeMapping.get(attendance.attCodeid) || null,
+                attDate: new Date(attendance.attDate)
+            }
+        )),
+        enrollments: rawData.enrollments.map(enrollment => ({
+            ...enrollment,
+            endDate: new Date(enrollment.endDate),
+            startDate: new Date(enrollment.startDate)
+        })),
+        fetchedAt: currentTime,
+        finalGrades: convertedFinalGrades,
+        notInSessionDays: convertedNotInSessionDays,
+        reportingTerms: convertedReportingTerms,
+        sections: convertedSections.map(s => {
+            s.teacher = teacherMapping.get(s.teacherID) || null;
+            return s;
+        }),
+        schedule: schedule,
+        student: {
+            ...rawData.student,
+            currentTerm: reportingTermMapping.get(Number.parseInt(rawData.student.currentTerm)) || null
+        },
+        terms: convertedTerms.map(term => {
+            term.parentTerm = termMapping.get(term.parentTermId) || null;
+            term.childTerms = convertedTerms.filter(t => t.parentTermId === term.id);
+            return term;
+        }),
+        teachers: convertedTeachers,
+    };
+};
+
+export default ParseRawPowerSchooData;

frontend/src/lib/dateHasher.ts

@@ -0,0 +1,18 @@
+/**
+ * Hash a date. This is a really jank way to do it, but it works for now
+ * @param date
+ */
+export const hashDate = (date: Date) => {
+    const currentMonth = new Date().getMonth();
+    const monthToEncode = date.getMonth();
+    const dateToHash = date.getDate();
+    if (monthToEncode === currentMonth) {
+        return dateToHash;
+    } else if (monthToEncode > currentMonth) {
+        return dateToHash + 100;
+    }
+    // monthToEncode < currentMonth
+    return dateToHash - 100;
+};
+
+export default hashDate;

frontend/src/lib/fetchPSData.ts

@@ -0,0 +1,22 @@
+import {RawPowerSchoolData} from "./dataParser";
+
+interface Credentials {
+    url: String
+    username: String
+    password: String
+}
+
+export const fetchPSData = async (credentials: Credentials): Promise<RawPowerSchoolData> => {
+    throw Error("Configure an endpoint in lib/fetchPSData.ts");
+    const result = await fetch("https://example.com/", {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify(credentials)
+    });
+    if (!result.ok) {
+        throw new Error();
+    }
+    return result.json();
+};
+
+export default fetchPSData;

frontend/src/lib/sections.ts

@@ -0,0 +1,7 @@
+import {Section, Term} from "../interfaces";
+
+export const getSectionsForTerm = (sections: Section[], term: Term): Section[] =>
+    sections.filter(s => s.termID === term.id || s.term?.parentTermId === term.id);
+
+export const getGradedSectionsForTerm = (sections: Section[], term: Term): Section[] =>
+    getSectionsForTerm(sections, term).filter(s => s.assignments.length > 0);

frontend/src/lib/teachers.ts

@@ -0,0 +1,29 @@
+import {ScheduleDay, Section, Teacher, Term} from "../interfaces";
+import hashDate from "./dateHasher";
+
+/**
+ * Get a list of sections a teacher is teaching in the selected term
+ * @param teacher
+ * @param term
+ */
+export const sectionsTaughtThisTerm = (teacher: Teacher, term: Term): Section[] => {
+    // TODO: This can be improved by using the algorithm in sections interface
+    const sections = teacher.sectionsByTerm.get(term.id) || [];
+    const childSections = term.childTerms.map(t => teacher.sectionsByTerm.get(t.id) || []);
+    return [sections, ...childSections].reduce((acc, val) => acc.concat(val));
+};
+
+/**
+ * Check if a teacher should be hidden for a specific term
+ * (If they only teach classes without grades)
+ * @param teacher Teacher to check
+ * @param term Term to check in
+ */
+export const isHiddenTeacher = (teacher: Teacher, term: Term): boolean =>
+    (sectionsTaughtThisTerm(teacher, term).filter(s => s.assignments.length > 0)?.length || 0) === 0;
+
+export const getTeachersForDay = (date: Date, scheduleMapping: Map<number, ScheduleDay>): Teacher[] =>
+    scheduleMapping
+        .get(hashDate(date))
+        ?.classes?.map(c => c.section.teacher)
+        .filter((t): t is Teacher => t !== null) || [];

frontend/src/lib/terms.ts

@@ -0,0 +1,19 @@
+import {PowerSchoolData, ReportingTerm, Term} from "../interfaces";
+
+/**
+ * Get the current term from the PowerSchoolData object
+ * @param data PowerSchoolData object
+ */
+export const getTerm = (data: PowerSchoolData): Term | null => {
+    // Get the current reporting term from the student object
+    const currentReportingTerm = data.student.currentTerm;
+
+    // Return either the term associated with the current reporting term, or null if there is no current reporting term
+    return currentReportingTerm === null ? null : currentReportingTerm.term;
+};
+
+/**
+ * Get the current reporting term from the PowerSchoolData object (It's a field in the student object)
+ * @param data PowerSchoolData object
+ */
+export const getReportingTerm = (data: PowerSchoolData): ReportingTerm | null => data.student.currentTerm;

frontend/src/views/Dashboard.tsx

@@ -0,0 +1,61 @@
+/**
+ * Dashboard view. Displays a set of cards containing different data
+ */
+import AttendanceCard from "../components/dashboard/AttendanceCard";
+import MissingAssignmentCard from "../components/dashboard/MissingAssignmentCard";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
+import {useContext, useMemo} from "react";
+import {getTerm} from "../lib/terms";
+import ScheduleCard from "../components/dashboard/ScheduleCard";
+import hashDate from "../lib/dateHasher";
+import UpcomingHolidaysCard from "../components/dashboard/UpcomingHolidaysCard";
+import QuickEmailCard from "../components/dashboard/QuickEmailCard";
+import {globalContext} from "../contexts";
+import {getGradedSectionsForTerm, getSectionsForTerm} from "../lib/sections";
+import CoursesCard from "../components/dashboard/CoursesCard";
+import {FormattedTime} from "../components/datetime";
+
+export default function DashboardInterface() {
+    const {psData} = useContext(globalContext);
+
+    const currentDate = useMemo(() => new Date(), []);
+    // Get the current term, and fallback to he first term in the array if there isn't one in progress
+    const currentTerm = useMemo(() => getTerm(psData) || psData.terms[0] || null, [psData]);
+
+    // Get all sections (classes) in this term
+    const termSections = useMemo(() =>
+            currentTerm === null ? [] : getSectionsForTerm(psData.sections, currentTerm)
+        , [psData.sections, currentTerm]);
+
+    // Get all sections (classes) in this term that have at least one graded assignment
+    const gradedSections = useMemo(() =>
+            currentTerm === null ? [] : getGradedSectionsForTerm(psData.sections, currentTerm)
+        , [psData.sections, currentTerm]);
+
+    // Get an array of today's classes
+    const todaySchedule = useMemo(() =>
+            psData.schedule.get(hashDate(currentDate))?.classes || []
+        , [psData.schedule, currentDate]);
+
+    return (
+        <>
+            <Row className="justify-content-end">
+                <Col as="h1">
+                    Hello {psData.student.firstName}!
+                </Col>
+                <Col className="text-end text-secondary" as="h6">
+                    Data from <FormattedTime date={psData.fetchedAt}/>
+                </Col>
+            </Row>
+            <Row className="row-cols-1 row-cols-md-2 g-4">
+                <CoursesCard sections={gradedSections} term={currentTerm}/>
+                <ScheduleCard schedule={todaySchedule}/>
+                <AttendanceCard events={psData.attendance}/>
+                <MissingAssignmentCard sections={termSections} term={currentTerm}/>
+                <UpcomingHolidaysCard notInSessionDays={psData.notInSessionDays}/>
+                <QuickEmailCard currentTerm={currentTerm}/>
+            </Row>
+        </>
+    )
+};

frontend/src/views/Grades.tsx

@@ -0,0 +1,101 @@
+/**
+ * Grades interface
+ */
+import {Ascending, Assignment, Page, Section, SortSettings} from "../interfaces";
+import React, {useContext, useMemo, useState} from "react";
+import AssignmentsTable, {AssignmentsTableColumn} from "../components/tables/AssignmentsTable";
+import Button from "react-bootstrap/Button";
+import {ArrowLeft} from "react-bootstrap-icons";
+import Row from "react-bootstrap/Row";
+import Col from "react-bootstrap/Col";
+import Alert from "react-bootstrap/Alert";
+import FinalGradesTable from "../components/tables/FinalGradesTable";
+import {FormattedDate, TimeRange} from "../components/datetime";
+import {globalContext} from "../contexts";
+import {Accordion} from "react-bootstrap";
+import Table from "react-bootstrap/Table";
+import SortSelect from "../components/input/SortSelect";
+
+const columns = [AssignmentsTableColumn.DUEDATE, AssignmentsTableColumn.NAME, AssignmentsTableColumn.CATEGORY, AssignmentsTableColumn.WEIGHT, AssignmentsTableColumn.SCORE];
+
+// TODO: Sorting is fucked
+
+export default function GradesInterface({section}: { section: Section }) {
+    const {setCurrentPage} = useContext(globalContext);
+    // @ts-ignore
+    const assignments: Assignment[] = section.assignments;
+    const [sortSetings, setSortSettings] = useState<SortSettings<AssignmentsTableColumn>>({
+        by: AssignmentsTableColumn.DUEDATE,
+        order: Ascending
+    });
+
+    const currentTime = useMemo(() => new Date(), []);
+    const upcomingClasses = useMemo(() => section.startStopDates
+            .filter(s => currentTime.getTime() < s.stop.getTime())
+            .sort((a, b) => a.start.getTime() - b.start.getTime())
+        , [section.startStopDates, currentTime]);
+
+    return (
+        <>
+            <Alert variant="warning">The current grades table does not show assignment flags (missing, late, etc)</Alert>
+            <Button variant="outline-secondary" onClick={() => setCurrentPage(Page.sections)}>
+                <ArrowLeft/> Courses
+            </Button>
+            <Row>
+                <Col>
+                    <h1>{section.schoolCourseTitle}</h1>
+                    <p>Yeah this page is sorta ugly. This is temporary.</p>
+                </Col>
+                {/* Accordion with grades and upcoming classes. This is probably big enough to warrant a separate component */}
+                <Col className="my-2">
+                    <Accordion>
+                        <Accordion.Item eventKey="0">
+                            <Accordion.Header>Current Grades</Accordion.Header>
+                            <Accordion.Body>
+                                <FinalGradesTable section={section}/>
+                            </Accordion.Body>
+                        </Accordion.Item>
+                        <Accordion.Item eventKey="1">
+                            <Accordion.Header>Upcoming Classes</Accordion.Header>
+                            <Accordion.Body>
+                                <Table striped>
+                                    <thead>
+                                    <tr>
+                                        <th>Date</th>
+                                        <th>Time</th>
+                                    </tr>
+                                    </thead>
+                                    <tbody>
+                                    {upcomingClasses.map(c =>
+                                        <tr key={c.sectionEnrollmentId}>
+                                            <td><FormattedDate date={c.start}/></td>
+                                            <td><TimeRange date1={c.start} date2={c.stop}/></td>
+                                        </tr>
+                                    )}
+                                    </tbody>
+                                </Table>
+                            </Accordion.Body>
+                        </Accordion.Item>
+                    </Accordion>
+                </Col>
+            </Row>
+            <Row className="justify-content-end">
+                <Col>
+                    <h2>Assignments</h2>
+                </Col>
+                {/* Grade sort thing. Only display if the table also displays */}
+                {assignments.length !== 0 &&
+                    <Col sm={4} md={4}>
+                        <SortSelect settings={sortSetings} setSettings={setSortSettings} sortByOptions={columns}/>
+                    </Col>
+                }
+            </Row>
+            {assignments.length === 0
+                ? <p>No assignments!</p>
+                : <AssignmentsTable assignments={assignments} columns={columns} sort={sortSetings}/>
+            }
+        </>
+        // TODO: Display flags (missing, collected, incomplete, etc)
+        // TODO: Deal with extra credit (2/0). That fucks everything up and I'm too tired to figure it out
+    )
+};

frontend/src/views/Login.sass

@@ -0,0 +1,5 @@
+.login-form
+  transform: translate(-50%, -50%) !important
+  box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.2)
+  padding: 15px
+  border-radius: 5px

frontend/src/views/Login.tsx

@@ -0,0 +1,95 @@
+/**
+ * Login screen
+ */
+import {useState, Dispatch, SetStateAction, FormEvent} from "react";
+import {LoginStatus, PowerSchoolData} from "../interfaces";
+import Col from "react-bootstrap/Col";
+import Row from "react-bootstrap/Row";
+import Alert from "react-bootstrap/Alert";
+import {loginStatusContext} from "../contexts";
+import InputGroup from "react-bootstrap/InputGroup";
+import Button from "react-bootstrap/Button";
+import Form from "react-bootstrap/Form";
+import fetchPSData from "../lib/fetchPSData";
+import parser from "../lib/dataParser";
+import LoginFormInput from "../components/input/LoginFormInput";
+import "./Login.sass";
+import InfoHover from "../components/InfoHover";
+import {Spinner} from "react-bootstrap";
+
+type LoginFieldProps = { setPsData: Dispatch<SetStateAction<PowerSchoolData | null>> }
+
+export default function LoginInterface({setPsData}: LoginFieldProps) {
+    const [loginStatus, setLoginStatus] = useState(LoginStatus.notLoggedIn);
+
+    const [validated, setValidated] = useState(false);
+    const [url, setUrl] = useState("");
+    const [username, setUsername] = useState("");
+    const [password, setPassword] = useState("");
+
+    const handleSubmit = async (e: FormEvent<HTMLFormElement>): Promise<void> => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const form = e.currentTarget;
+        if (!form.checkValidity()) {
+            setValidated(true);
+            return;
+        }
+
+        setValidated(false);
+
+        e.preventDefault();
+        setLoginStatus(LoginStatus.loggingIn);
+        try {
+            const data = await fetchPSData({
+                url, username, password
+            });
+            setPsData(parser(data));
+
+            // Remove login data from component state
+            setUrl("");
+            setUsername("");
+            setPassword("");
+        } catch (e) {
+            // TODO: Need actual error handling here AAAAAAAAAA
+            console.log(e);
+            setLoginStatus(LoginStatus.error);
+        }
+    };
+
+    return (
+        <loginStatusContext.Provider value={loginStatus}>
+            <Col className="top-50 start-50 position-absolute login-form position-absolute bg-body-emphasis">
+                <Row>
+                    {loginStatus === LoginStatus.loggingIn
+                        ?
+                        <h1>
+                            <Spinner variant="success"/>
+                            Logging in
+                        </h1>
+                        : <h1>Log in to PowerSchool</h1>
+                    }
+                </Row>
+
+                {loginStatus === LoginStatus.error &&
+                    <Alert variant="danger">An unexpected error occurred. Please try again later.</Alert>
+                }
+                <Row>
+                    <Form onSubmit={handleSubmit} noValidate validated={validated}>
+                        <LoginFormInput label="Powerschool URL" type="text" setter={setUrl}
+                                        decoration={<InputGroup.Text>.powerschool.com</InputGroup.Text>}/>
+                        <LoginFormInput label="Username" type="text" setter={setUsername}/>
+                        <LoginFormInput label="Password" type="password" setter={setPassword}/>
+                        <Button variant="success" type="submit">Log in</Button>
+                        {/* TODO: Make this a click/toggle overlay if people complain */}
+                        <InfoHover>
+                            Note: Bearly Passing is not affiliated with Power School in any official capacity.
+                            While we don't store any data, we are also idiots. Use at your own risk.
+                        </InfoHover>
+                    </Form>
+                </Row>
+            </Col>
+        </loginStatusContext.Provider>
+    )
+};

frontend/src/views/Schedule.tsx

@@ -0,0 +1,80 @@
+/**
+ * Daily schedule interface
+ */
+import {useCallback, useContext, useMemo, useState} from "react";
+import {DateRange} from "../components/datetime";
+import {ScheduleDay} from "../interfaces";
+import hashDate from "../lib/dateHasher";
+import CardGroup from "react-bootstrap/CardGroup";
+import ButtonGroup from "react-bootstrap/ButtonGroup";
+import Button from "react-bootstrap/Button";
+import {ArrowLeft, ArrowRight} from "react-bootstrap-icons";
+import Row from "react-bootstrap/Row";
+import ControlCard from "../components/cards/ControlCard";
+import {globalContext} from "../contexts";
+import {ClassesDay} from "../components/schedule";
+
+type WeekTuple = [Date, Date, Date, Date, Date, Date, Date];
+
+/**
+ * Get list of date hashes from a day of that week
+ * Based on https://stackoverflow.com/a/45190660
+ * @param date
+ */
+function getWeek(date: Date): WeekTuple {
+    const dateNumber = date.getTime();  // Date as a UNIX timestamp (Used for constructing new date objects)
+    const firstDay = date.getDate() - date.getDay();  // Get the date number of the first day of the week
+    const lastDay = firstDay + 6; // Get the date number of the last day of the week
+    const days: Date[] = [];
+
+    for (let i = firstDay; i <= lastDay; i++) {
+        // Create a new date object, set the date to the number in the week, and add it to the array
+        const weekDay = new Date(dateNumber);
+        weekDay.setDate(i); // This deals with number outside the 1-32 range, it just switches the month value
+        days.push(weekDay);
+    }
+    return days as WeekTuple;
+}
+
+type DayTuple = [Date, ScheduleDay | null];
+type ScheduleWeekTuple = [DayTuple, DayTuple, DayTuple, DayTuple, DayTuple, DayTuple, DayTuple];
+
+// TODO: This looks like shit on mobile/small screen
+
+export default function ScheduleInterface() {
+    const {psData} = useContext(globalContext);
+    const [dayInWeek, setDayInWeek] = useState(new Date());
+    const scheduleWeek: ScheduleWeekTuple = useMemo(() => getWeek(dayInWeek)
+            .map(dayHash => [dayHash, psData.schedule.get(hashDate(dayHash)) || null]) as ScheduleWeekTuple
+        , [psData.schedule, dayInWeek]);
+
+    const incrementWeek = useCallback(
+        () => setDayInWeek(new Date(dayInWeek.setDate(dayInWeek.getDate() + 7)))
+        , [dayInWeek]);
+    const decrementWeek = useCallback(
+        () => setDayInWeek(new Date(dayInWeek.setDate(dayInWeek.getDate() - 7)))
+        , [dayInWeek]);
+
+    return (
+        <>
+            <Row>
+                <ControlCard>
+                    <ButtonGroup>
+                        <Button variant="primary" onClick={decrementWeek}><ArrowLeft/></Button>
+                        <Button variant="primary" onClick={() => setDayInWeek(new Date())}>
+                            <DateRange date1={scheduleWeek[0][0]} date2={scheduleWeek[6][0]}/>
+                        </Button>
+                        <Button variant="primary" onClick={incrementWeek}><ArrowRight/></Button>
+                    </ButtonGroup>
+                </ControlCard>
+            </Row>
+            <CardGroup>
+                {scheduleWeek.map(([a, b]) =>
+                    <>
+                        <ClassesDay key={a.getDate()} day={a} schedule={b}/>
+                    </>
+                )}
+            </CardGroup>
+        </>
+    )
+};

frontend/src/views/Sections.tsx

@@ -0,0 +1,60 @@
+import {useContext, useMemo, useState} from "react";
+import TermSelect from "../components/input/TermSelect";
+import {getTerm} from "../lib/terms";
+import Col from "react-bootstrap/Col";
+import Row from "react-bootstrap/Row";
+import SectionCard from "../components/cards/SectionCard";
+import {globalContext} from "../contexts";
+import ControlCard from "../components/cards/ControlCard";
+import Form from "react-bootstrap/Form";
+import {getGradedSectionsForTerm, getSectionsForTerm} from "../lib/sections";
+import {Term} from "../interfaces";
+
+const SectionCards = ({selectedTerm, hideUngraded}: { selectedTerm: Term, hideUngraded: boolean }) => {
+    const {psData} = useContext(globalContext);
+
+    const sectionsToDisplay = useMemo(() => hideUngraded
+            ? getGradedSectionsForTerm(psData.sections, selectedTerm)
+            : getSectionsForTerm(psData.sections, selectedTerm)
+        , [hideUngraded, selectedTerm, psData.sections]);
+
+    useMemo(() => sectionsToDisplay.sort((a, b) => a.periodSort - b.periodSort), [sectionsToDisplay]);
+
+    // TODO: Tooltip if hideUngraded is on and no courses are shown
+
+    return (
+        <Row className="row-cols-1 row-cols-md-2 g-4">
+            {sectionsToDisplay.map(section =>
+                <Col key={section.id}>
+                    <SectionCard section={section}/>
+                </Col>
+            )}
+        </Row>
+    )
+};
+
+export default function SectionsInterface() {
+    const {psData} = useContext(globalContext);
+
+    const [selectedTerm, setSelectedTerm] = useState(getTerm(psData) || psData.terms[0] || null);
+    const [hideUngraded, setHideUngraded] = useState(true);
+
+    return (
+        <>
+            <Row>
+                <Col>
+                    <h1>Courses</h1>
+                </Col>
+                <ControlCard>
+                    <TermSelect terms={psData.terms} selectedTerm={selectedTerm} setSelectedTerm={setSelectedTerm}/>
+                    <Form.Check type="checkbox" label="Hide courses with no assignments" checked={hideUngraded}
+                                onChange={e => setHideUngraded(e.currentTarget.checked)}/>
+                </ControlCard>
+            </Row>
+            {selectedTerm === null
+                ? <p>No term selected</p>
+                : <SectionCards selectedTerm={selectedTerm} hideUngraded={hideUngraded}/>
+            }
+        </>
+    )
+};

frontend/src/views/Teachers.tsx

@@ -0,0 +1,35 @@
+import {useContext, useState} from "react";
+import TermSelect from "../components/input/TermSelect";
+import {getTerm} from "../lib/terms";
+import Col from "react-bootstrap/Col";
+import Row from "react-bootstrap/Row";
+import {globalContext} from "../contexts";
+import Form from 'react-bootstrap/Form';
+import ControlCard from "../components/cards/ControlCard";
+import TeacherCardRow from "../components/TeacherCardRow";
+
+export default function TeacherInterface() {
+    const {psData} = useContext(globalContext);
+
+    const [selectedTerm, setSelectedTerm] = useState(getTerm(psData) || psData.terms[0] || null);
+    const [hideTeachers, setHideTeachers] = useState(true);
+
+    return (
+        <>
+            <Row>
+                <Col>
+                    <h1>Teacher Index</h1>
+                </Col>
+                <ControlCard>
+                    <TermSelect terms={psData.terms} selectedTerm={selectedTerm} setSelectedTerm={setSelectedTerm}/>
+                    <Form.Check type="checkbox" label="Hide teachers without graded classes" checked={hideTeachers}
+                                onChange={e => setHideTeachers(e.currentTarget.checked)}/>
+                </ControlCard>
+            </Row>
+            {selectedTerm === null
+                ? <p>No term selected</p>
+                : <TeacherCardRow selectedTerm={selectedTerm} hideTeachers={hideTeachers}/>
+            }
+        </>
+    )
+};

frontend/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "target": "es6",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "exactOptionalPropertyTypes": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}