OverWatch (front-end)

The goal of OverWatch is to allow insurance companies to diagnose roof damage without human interaction. This repository contains the website where insurance agents can add and edit customers, houses, and view the detailed roof damage report generated using machine learning.

Website Layout

Navigation Bar

The navigation bar is located at the top of every page. You can navigate between the Customer Page and the About Page. If you're logged in, you can also click "Log Out" at the far right of the bar to log out.

Customer Page

If you're not logged in, this page will only show the login button, which the agent will use to sign in to their Google account. Once the agent is logged in, they will be presented with the Customer Page. This page contains the customer table, search bar, and the button to add customers.

• Customer Table: Lists each customer's name, email, number, and the date they were added. To keep things simple, the table is divided into pages. You can use the arrows under the table to navigate through them. You can also click on one of the column headers to sort the table by that column. Clicking on a customer reveals their container. Here, you can view their house cards, add new ones, and edit customer details using the "Edit customer details" button at the top right of the container. Each house card displays the information necessary to identify it. When you click on a house card, it will take you to the Report Page to view the detailed roof damage report.

• Search Bar: This is where you can search for customers by name, email, or phone number. Use the dropdown to select the search type. Once you type in the search bar, click the search button to filter the customer table.

• Add Customer Button: Clicking this button will bring up the "Add Customer" popup. Here, you can enter in the new customers information and add it to your customer table.

Report Page

The Report Page is where the agent can view the roof damage report for the selected house. This page contains the customer and house information, damage summary, an upload section, and model settings.

• Customer/House Information: Displays all of the relevant customer and house information. To edit the house information, click on the "Edit house details" button.

• Damage Summary: This section is split up into three boxes: severity, damage type, and estimate. The severity box tells you how severe the damage is on a scale from 0 to 5 (5 being the worst), along with a short description. The damage type box identifies and describes each type of damage. The estimate box shows the cost of repair based on the roof type and the total amount of damage.

• Upload Section: Here, you can view all upload images as well as add them. Once you upload an image, it will run it through the model and update the report.

• Model Settings: Under the customer/house information, you'll find a button labeled "Model settings & report generation". When clicked, it will bring up setting that can be tweaked to adjust the machine learning model. After you make some adjustments, you can click the "Generate" button to run the image through the model again with the new settings.

Instructions

Here are step by step instrucations on how to run the website locally. For the front-end to work properly, the back-end also needs to be running. If you don't have that set up already, visit github.com/LifeLiveOn/Senior-Design.

1. Change the back-end link to its local address
   • Navigate to website-react/src/constants.js
   • Set BACKEND-URL equal to "http://localhost:{PORT}"
   • Replace {PORT} with the port number you chose for the backend (Default: 8000)
2. Set the front-end port
   • Navigate to website-react/.env
   • Set PORT equal to your desired port (Default: 8080)
3. Make sure you have Node.js installed (nodejs.org)
4. In the top directory of the project SENIOR-DESIGN-FRONT-END, run the following commands in the terminal:

   cd website-react
   npm install
   npm start dev

5. Once it starts, it should automatically open in your browser
   • Both the local and network addresses should show up in the terminal
   • Ex:

     Local:            http://localhost:8080
     On Your Network:  http://10.111.111.111:8080
     

   • To access the website from another device, use the On Your Network address
6. Stopping the website
   • In the terminal, press ctrl + c
   • You should see Terminate batch job (Y/N)?
   • type y, the press enter to terminate__

Tech Stack

• React — JavaScript library used to build the UI with reusable components and pages
• React Router DOM — handles navigation between pages (Customer Page, Report Page, About Page) without reloading the browser
• CSS — used for all styling across the app
• Vite — development server and build tool (runs the app locally with npm run dev)
• Font Awesome — icon library used for UI icons (e.g. the image toggle eye icon on the Report Page)

---

External Services & API

The frontend communicates with the backend REST API to send and receive data. No API keys or secrets are stored in the frontend — all authentication is handled through a session cookie set by the backend after login.

Here is what the frontend talks to the backend for:

• Get all customers — loads the customer list on the Customer Page
• Create a customer — adds a new customer via the "Add Customer" popup
• Update a customer — edits an existing customer's details
• Create a house — adds a new property under a customer
• Update a house — edits an existing property's details
• Upload drone images — sends images to the backend one at a time, attached to a specific house
• Run the AI model — triggers the damage detection model on a house's uploaded images
• Update the damage report — saves the model's results (severity, damage types, cost estimate) back to the house record All API calls use the BACKEND_URL value defined in src/constants.js. To switch environments (local vs deployed), only that one value needs to change.

---