README.md

@@ -2,76 +2,86 @@
 
 This is a React-based web application built with Vite (react and typescript).
 
-
-
 ## Getting started
 
 ### Prerequisites
+
 - Node.js (v18 or higher recommended)
 - Yarn (v1.22+) (https://yarnpkg.com/)
 
 ### Installation
+
 ```bash
 git clone https://mavportal.com/TobaOjo/Mav-Mobile-UI.git
 cd Mav-Mobile-UI
 yarn install
 ```
+
 ### Running Locally
+
 ```bash
 yarn dev
 ```
+
 The app will be available at `http://localhost:5173`.
 
-
 To run on locally on other devices
+
 ```bash
 yarn dev --host
 ```
-The app will be available at the exposed addresses to access e.g. http://192.168.0.123:5173/Mobile
+
+The app will be available at the exposed addresses to access e.g. http://1xx.xxx.x.xxx:<PORT>/Mobile
 
 ## Tech Stack
+
 - **React** – UI library
 - **Vite** – Build tool
 - **Yarn** – Package manager
 
-
-
 ## Configuration
+
 Create a `.env` file to access the Mav Mobile box in unit 5 for or for any environment-specific settings:
+
 ```env
-VITE_AGX_BOX_URL=http://100.118.196.113:8080
+VITE_AGX_BOX_URL=http://1xx.xxx.xxx.xxx:<PORT>
 ```
 
-## 🧪 Development
+## Development
+
 ### Linting & Formatting
+
 ```bash
 yarn lint
 yarn format
 ```
 
 ### Testing
+
 (Currently not implemented – consider adding Jest or Vitest)
 
-## 🚢 Deployment
+## Deployment
+
 To build for production:
+
 ```bash
 yarn build
 ```
 
 Navigate to your Mav-Mobile-UI folder
-Select the Dist folder 
+Select the Dist folder
 Compress to (ZIP)
-Log into box on Moba using Session > SSH and putting IP in Remote Host. 
+Log into box on Moba using Session > SSH and putting IP in Remote Host.
 Creds are mav:mav
 Drag and drop dist.zip into file explorer menu on left hand side (has to be named dist.zip exactly).
-Run command 
+Run command
+
 ```bash
 sudo ./integrate-web-ui.sh
 ```
-Run 
+
+Run
 
 ```bash
 sudo nano web-static/index.html
-``` 
+```
-
-

src/components/SightingModal/SightingModal.tsx

@@ -160,12 +160,13 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
                   <dd className="font-medium text-2xl">{sighting?.seenCount ?? "-"}</dd>
                 </div>
 
-                {sighting?.make && (
+                {sighting?.make ||
-                  <div>
+                  (sighting?.make.trim() && (
-                    <dt className="text-gray-300">Make</dt>
+                    <div>
-                    <dd className="font-medium text-2xl">{sighting?.make ?? "-"}</dd>
+                      <dt className="text-gray-300">Make</dt>
-                  </div>
+                      <dd className="font-medium text-2xl">{sighting?.make ?? "-"}</dd>
-                )}
+                    </div>
+                  ))}
                 {sighting?.model ||
                   (!sighting?.model.trim() && (
                     <div>
@@ -173,12 +174,13 @@ const SightingModal = ({ isSightingModalOpen, handleClose, sighting, onDelete }:
                       <dd className="font-medium text-2xl">{sighting?.model ?? "-"}</dd>
                     </div>
                   ))}
-                {sighting?.color && (
+                {sighting?.color ||
-                  <div className="sm:col-span-2">
+                  (!sighting?.color.trim() && (
-                    <dt className="text-gray-300">Colour</dt>
+                    <div className="sm:col-span-2">
-                    <dd className="font-medium text-2xl">{sighting?.color ?? "-"}</dd>
+                      <dt className="text-gray-300">Colour</dt>
-                  </div>
+                      <dd className="font-medium text-2xl">{sighting?.color ?? "-"}</dd>
-                )}
+                    </div>
+                  ))}
 
                 <div>
                   <dt className="text-gray-300">Time</dt>