feat: Integration with Hospitals (Issue #161)

server/index.js

@@ -158,6 +158,7 @@ app.use('/api/reports', require('./routes/reports'));
 app.use('/api/risk-assessment', require('./routes/riskAssessment'));
 app.use('/api/family', require('./routes/family'));
 app.use('/api/security', require('./routes/security'));
+app.use('/api/hospitals', require('./routes/hospitals'));
 
 // Health Check / Default route
 app.get('/', (req, res) => {

server/routes/hospitals.js

@@ -0,0 +1,29 @@
+const express = require('express');
+const router = express.Router();
+const auth = require('../middleware/auth');
+
+// Mock data for hospitals
+const mockHospitals = [
+  { id: '1', name: 'City General Hospital', address: '123 Main St, Cityville', lat: 40.7128, lon: -74.0060, availableBeds: 42, specialty: 'Trauma Center' },
+  { id: '2', name: 'St. Mary Medical Center', address: '456 Oak Ave, Townsburg', lat: 40.7150, lon: -74.0100, availableBeds: 15, specialty: 'Cardiology' },
+  { id: '3', name: 'Valley Health Clinic', address: '789 Pine Rd, Villagetown', lat: 40.7100, lon: -74.0200, availableBeds: 0, specialty: 'Pediatrics' },
+  { id: '4', name: 'Metro Medical Hub', address: '321 Elm St, Metropolis', lat: 40.7300, lon: -73.9900, availableBeds: 120, specialty: 'General' }
+];
+
+// GET /api/hospitals
+// Search for nearby hospitals and their bed availability
+router.get('/', auth, (req, res) => {
+  const { query, lat, lon } = req.query;
+
+  let results = [...mockHospitals];
+
+  if (query) {
+    const lowerQuery = query.toLowerCase();
+    results = results.filter(h => h.name.toLowerCase().includes(lowerQuery) || h.specialty.toLowerCase().includes(lowerQuery));
+  }
+
+  // Return the results
+  res.json(results);
+});
+
+module.exports = router;

src/App.jsx

@@ -44,6 +44,7 @@ import Login from './pages/Login';
 import Profile from './pages/Profile';
 import DosageCalculator from './pages/DosageCalculator';
 import HealthMetrics from './pages/HealthMetrics';
+import HospitalFinder from './pages/HospitalFinder';
 import Footer from './components/Footer';
 import NotFound from './pages/NotFound';
 
@@ -346,6 +347,7 @@ function App() {
           <Route path="/clinics-nearby" element={<ClinicsNearby />} />
           <Route path="/dosage-calculator" element={<DosageCalculator />} />
           <Route path="/health-metrics" element={<HealthMetrics />} />
+          <Route path="/hospitals" element={<HospitalFinder />} />
           <Route path="/settings" element={<Settings />} />
           <Route path="/login" element={<Login />} />
           <Route path="/profile" element={<Profile />} />

src/pages/HospitalFinder.jsx

@@ -0,0 +1,117 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Box,
+  Typography,
+  Container,
+  TextField,
+  Button,
+  Card,
+  CardContent,
+  Grid,
+  Chip,
+  CircularProgress
+} from '@mui/material';
+import { LocalHospital as HospitalIcon, Search as SearchIcon } from '@mui/icons-material';
+import API from '../utils/api';
+
+function HospitalFinder() {
+  const [query, setQuery] = useState('');
+  const [hospitals, setHospitals] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState(null);
+
+  const fetchHospitals = async (searchQuery = '') => {
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await API.get('/api/hospitals', { params: { query: searchQuery } });
+      setHospitals(res.data);
+    } catch (err) {
+      console.error(err);
+      setError('Failed to fetch hospital data.');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchHospitals();
+  }, []);
+
+  const handleSearch = (e) => {
+    e.preventDefault();
+    fetchHospitals(query);
+  };
+
+  return (
+    <Container maxWidth="lg" sx={{ mt: 4, mb: 8 }}>
+      <Box sx={{ display: 'flex', alignItems: 'center', mb: 4 }}>
+        <HospitalIcon sx={{ fontSize: 40, mr: 2, color: 'primary.main' }} />
+        <Typography variant="h4" fontWeight={700}>
+          Hospital & Bed Availability
+        </Typography>
+      </Box>
+
+      <Box component="form" onSubmit={handleSearch} sx={{ display: 'flex', gap: 2, mb: 4 }}>
+        <TextField
+          fullWidth
+          label="Search by name or specialty..."
+          variant="outlined"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+        />
+        <Button variant="contained" color="primary" type="submit" startIcon={<SearchIcon />} sx={{ px: 4 }}>
+          Search
+        </Button>
+      </Box>
+
+      {error && <Typography color="error">{error}</Typography>}
+
+      {loading ? (
+        <Box display="flex" justifyContent="center" mt={4}>
+          <CircularProgress />
+        </Box>
+      ) : (
+        <Grid container spacing={4}>
+          {hospitals.map((hospital) => (
+            <Grid item xs={12} md={6} key={hospital.id}>
+              <Card sx={{ boxShadow: 3, '&:hover': { boxShadow: 6 } }}>
+                <CardContent>
+                  <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+                    <Typography variant="h6" fontWeight={700} color="primary.main" gutterBottom>
+                      {hospital.name}
+                    </Typography>
+                    <Chip 
+                      label={`${hospital.availableBeds} Beds Available`} 
+                      color={hospital.availableBeds > 10 ? 'success' : hospital.availableBeds > 0 ? 'warning' : 'error'}
+                      size="small"
+                      sx={{ fontWeight: 'bold' }}
+                    />
+                  </Box>
+                  <Typography variant="body2" color="text.secondary" gutterBottom>
+                    {hospital.address}
+                  </Typography>
+                  <Typography variant="body2" sx={{ mt: 1 }}>
+                    <strong>Specialty:</strong> {hospital.specialty}
+                  </Typography>
+                  <Button variant="outlined" color="primary" sx={{ mt: 2 }} fullWidth>
+                    Contact Hospital
+                  </Button>
+                </CardContent>
+              </Card>
+            </Grid>
+          ))}
+          {hospitals.length === 0 && (
+            <Grid item xs={12}>
+              <Typography variant="body1" align="center" color="text.secondary">
+                No hospitals found matching your criteria.
+              </Typography>
+            </Grid>
+          )}
+        </Grid>
+      )}
+    </Container>
+  );
+}
+
+export default HospitalFinder;