UXD - Blank Map Error States

### Overview
We need to create error states for the blank map user flow so users can be properly notified of errors, why they are occurring, and how they can proceed with task completion.

### More Details
- This ticket follows up on foundational work completed in #1944. See resources for reference material to prior work on Blank Map Error States
- Error states correspond to **specific** HTTP errors. HTTP act as a message to tell us what exactly went wrong while the browser (aka the user) attempted to talk to the server (aka the API). The relevant HTTP errors that we should consider for this ticket are listed in the resources below.

### Action Items

Reference [Table of Action Items](https://github.com/hackforla/311-data/issues/2024#issuecomment-3765653469)

- [x] API is Down for Maintenance
- [x] Consider adding the following message: "Please check the city's open data portal or the dataset API dev portal for more info"
- link to open data portal page: https://data.lacity.org/City-Infrastructure-Service-Requests/MyLA311-Service-Request-Data-2025/h73f-gn57/about_data
- link to developer portal: https://dev.socrata.com/
- [x] No Results from API
- [x] Consider the component heading title "No matches found"
- [x] Consider Body copy: "We couldn't find any 311 requests matching your search parameters. You can try searching for more request types or over a longer date range."
- [x] Consider exit choices:
- [x] Option 1: No button, just the ability to x out of the pop up.
- [x] Option 2: user clicks "Okay"
- [x] Network/Connectivity error
- [x] Consider the component heading title "Connection failed" or "check connection"
- [x] Include text: `Please check your internet connection and try again`
- [x] Include buttons for manual retries: `Try again` or `Cancel`
- [x] Data Not Published
- [x] Include text: "The dataset for [YEAR] is not yet available. Please check https://myla311.lacity.gov/s/ for more information"
- [x] Document user interaction in Figma
- [x] Update the Hand Off section of this ticket with the final iteration of this design

---

### Design Iterations

**Please move ticket between `In Progress` and `In Review` to assist PM team**

Iteration 2 (Finalize)

(Seems Git hub has some kind of bug on linking to the comment; copy the following link and paste it on the address bar of the browser works)

Link to notes: https://github.com/hackforla/311-data/issues/2024#issuecomment-4044067457

### Corrected & modified following error cases:

**No-internet / site-down scenarios are out of scope, so there's nothing to recover**

**New Blank Map Error Cases Overview**

**Connectivity and 408 Timeout share the same cases**

**No Published Data for Calendar**

Same as the ticket [#1893](https://github.com/hackforla/311-data/issues/1893) OR see the Iteration 1 for this part.

**API error 503 and 500 are the same so they share the same cases; and replaced error codes with icon; plus the other pages like FAQ, Contact still works**

**404 Error - Replaced error codes with icon, and other features and pages still work**

**For the Components:**
1. Created the error page icon from scratch for both light and dark theme and added it to the component.
2. Replaced the No Public Dataset popup by the Partial Data Available popup from Issue #1893
3. Removed unused icons such as the triangle error icon.

_The new icon has two colors: white and blue grey for light and dark theme (only using the light theme for now)_

**The Partial Data Available Pop** Issue #1893 [hand-off](https://www.figma.com/design/eF63O8yIGz2soQ4JJFfyoK/311_Data_UXUI?node-id=26121-9552)

### All other error cases stay the same

Iteration 1

Link to notes:[Comment](https://github.com/hackforla/311-data/issues/2024#issuecomment-3584035750)

**Connectivity dialog UI iteration**

**No Published Data for Calendar**

**No Result (Matches) Found Dialog**

**Auto-reloading Dialog**

**Filter Modal Inline Error - Made Changes for Error Messages**

**Loader Changes**

**Error Page Light & Dark Theme**

---

### Hand Off Materials

Figma Section Name: [UXD - Blank Map Error States #2024](https://www.figma.com/design/eF63O8yIGz2soQ4JJFfyoK/311_Data_UXUI?node-id=23581-20354&t=RyZMKLObt8WyEE93-4)

Before Screenshot

N/A: We were not accounting for API errors or connectivity errors

After Screenshot (Finalized)

As we were not accounting for API errors or connectivity errors, here's the initial user flow cases and UI designs:

### Widgets Overview

---------------------

### Error Cases

**Error 500 Case for Internal Server Error with Light Theme**
* This error occurs anywhere: When users entering the site, processing data, and exploring the site, and so on.

Map Case

Site Entering Case (Case wherever entering the site)

**Error 404 Case for Page/Data Not Found with Light Theme**

* And for other cases of error 404, once the API server issue fixed and page loaded successfully, show the latest page users viewed.

**Error 408 Case for Timeout with Light Theme**

* User could not complete the request (the data processing)

**Error Case 503 for Service Unavailable**
* Server API is unavailable, likely down for maintenance. User must wait until maintenance is completed
_This error is usually happened during maintenance so there probably be announcement before, so there's also possibility that this api error occurs once users enter the site._

Here I put two cases for now:

**Connectivity Case**

* similar and can be included in error 408

**No Result (matches) Found Case**

**Filter Modal Inline Error Case**

**Data Not Published Case for Calendar**

### Designer Resources

Handoff for #1944
- Ticket: #1944
- Figma: [Hand-Off - Issue #1944](https://www.figma.com/design/eF63O8yIGz2soQ4JJFfyoK/311_Data_UXUI?node-id=21029-18099&t=W7oMI4s18dSE7ww2-1)
- Figma: [Hand-Off - Issue #1893](https://www.figma.com/design/eF63O8yIGz2soQ4JJFfyoK/311_Data_UXUI?node-id=26121-9552)

Iteration Dropdown Copy/Paste

```

Iteration X

Link to notes: `REPLACE WITH COMMENT URL`

`REPLACE WITH SCREENSHOT UPLOAD`

```

Instructions for Engineering Hand Off

To Start Engineering Hand Off...
1. Ensure all Hand Off Materials are filled in
3. Add the "ready for dev lead" label
4. Leave a comment saying "This ticket is ready for engineering hand off."

#### HTTP Code Reference

Please use the following table to learn more about status codes 200, 408, 500, and 503

📊 HTTP Code lookup table

| HTTP Status Code | Explanation | Source | Special Notes |
|------------------|-------------|---------|----------------|
| **200 OK** | API successfully provided data to the user | [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/200) | If the user's filter criteria is overly constrained (no data meets the search criteria), the API will still return an empty list with status 200. |
| **408 Request Timeout** | **User** could not complete a request to the API | [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/408) | — |
| **500 Internal Server Error** | **Server** API is broken; user must wait until error is fixed by the API owner | [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/500) | — |
| **503 Service Unavailable** | **Server** API is unavailable, likely down for maintenance. User must wait until maintenance is completed | [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Status/503) | — |