Dev: Connect Host Contact Information Form to Database

## 🧩 Overview

Implement a contact information feature allowing hosts to submit their preferred contact method and phone number. Also create a page to view the stored contact information. This feature enables better communication by capturing and displaying host contact details reliably.

## More Info

Implement the backend API endpoints, database schema, and frontend pages for storing and retrieving host contact information. This includes the form submission, data persistence with migrations, and display of stored data, including creation timestamps.

---

## 📐 Scope of Work

* Create `contact_info` table with columns for preferred contact method, phone number, and created timestamp
* Implement backend POST API to submit contact info
* Implement backend GET API to fetch contact info by ID
* Ensure backend models and schemas align with migration
* Build frontend form page to submit contact info
* Build frontend display page to show contact info, including formatted creation date
* Add frontend routing for the new display page
* Handle API errors gracefully in the frontend

## 🔧 Engineering Tasks

**Steps to Implement:**

- [X] Write Alembic migration to create `contact_info` table
- [X] Define SQLAlchemy `ContactInfo` model to match table schema
- [X] Create Pydantic schemas for contact info request and response
- [X] Implement POST `/contact-info` API route to save data
- [X] Implement GET `/contact-info/{contact_id}` API route to retrieve data
- [X] Build React display component to fetch and show contact info by ID
- [X] Add React router entry for display page `/host/contact-info/:contactId`

---

## ✅ Acceptance Criteria

- [X] Database schema created with `preferred_method`, `phone_number`, and `created_at` columns
- [X] POST `/contact-info` accepts contact info and stores it correctly
- [X] GET `/contact-info/{contact_id}` returns stored contact info with correct fields
- [X] Frontend form submits data and redirects to display page
- [X] Frontend display page fetches contact info by ID and shows preferred method, phone number, and formatted creation date
- [X] API and frontend handle errors gracefully (e.g., 404 if contact not found)

---

## 🔄 Dependencies

* Dependency: Database must be migrated with the new `contact_info` table before backend APIs can work
* Dependency: Frontend routing and API base URL configuration to match backend routes

---

## 📦 Technical Notes

* Backend uses FastAPI with SQLAlchemy ORM and Alembic migrations
* Frontend uses React, React Router, Axios for API calls, and MUI for UI components
* ContactInfo model uses `id` as primary key; use `contact_id` as path param to identify records
* Ensure consistent naming: use `preferred_method` in both DB schema and model
* API endpoints are under `/api/host-dashboard/contact-info`

---

## 🧪 Testing Strategy

* **Manual testing** by filling out the contact info form and checking the browser console logs (`console.log('Received:', response.data);`) to ensure the correct data is received from the backend.
* Verify that the displayed contact info matches the submitted data.
* Confirm redirects and route handling on frontend

---

## 🚩 Risks / Considerations

* Risk: Date formatting might vary by user locale — confirm consistent display or normalize timezones
* Consideration: API error handling should provide clear messages for missing records
* Risk: If migration and model schema are out of sync, data errors could occur
* Dependency: Database must be migrated before deploying backend code that uses new tables

---

## 🧵 Related Issues

- #720

---

## Action Items

- [X] Complete all steps in the Engineering Tasks section above

---

## 📎 Resources

- N/A

---

## Attachments/Screenshots (If Applicable):

- N/A