More changes than expected. Mobile version improvements & PWA

frontend/src/components/admin/AdminComponents.css

@@ -78,6 +78,83 @@
   margin-top: 1.5rem;
 }
 
+.hours-editor {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 1rem 1.25rem 1.25rem;
+  margin: 0.5rem 0 1rem;
+  background: var(--surface);
+}
+
+.hours-editor legend {
+  padding: 0 0.5rem;
+  font-weight: 600;
+  color: var(--text-main);
+}
+
+.hours-editor-hint {
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  margin: 0 0 0.85rem;
+}
+
+.hours-row {
+  display: grid;
+  grid-template-columns: 7rem 6.5rem 1fr auto 1fr;
+  align-items: center;
+  gap: 0.6rem;
+  padding: 0.35rem 0;
+}
+
+.hours-row.is-closed input[type="time"] {
+  opacity: 0.45;
+}
+
+.hours-day {
+  font-weight: 600;
+  color: var(--text-main);
+  font-size: 0.9rem;
+}
+
+.hours-closed-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.4rem;
+  font-size: 0.85rem;
+  color: var(--text-muted);
+  cursor: pointer;
+}
+
+.hours-sep {
+  text-align: center;
+  color: var(--text-muted);
+}
+
+.hours-row input[type="time"] {
+  width: 100%;
+  padding: 0.45rem 0.6rem;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  font-size: 0.9rem;
+  font-family: inherit;
+  background: var(--surface);
+  color: var(--text-main);
+}
+
+@media (max-width: 600px) {
+  .hours-row {
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas:
+      "day closed"
+      "open close";
+  }
+  .hours-day { grid-area: day; }
+  .hours-closed-toggle { grid-area: closed; justify-self: end; }
+  .hours-row input[type="time"]:first-of-type { grid-area: open; }
+  .hours-row input[type="time"]:last-of-type { grid-area: close; }
+  .hours-sep { display: none; }
+}
+
 .btn-primary,
 .btn-secondary,
 .btn-edit,

frontend/src/components/admin/PharmacyManagement.jsx

@@ -1,5 +1,47 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import './AdminComponents.css';
+import { DAY_KEYS, DAY_LABEL } from '../../utils/hours';
+
+function emptyHoursDraft() {
+  const draft = {};
+  for (const day of DAY_KEYS) {
+    draft[day] = { open: '09:00', close: '21:00', closed: true };
+  }
+  return draft;
+}
+
+function hoursToDraft(raw) {
+  let parsed = null;
+  if (raw) {
+    try { parsed = typeof raw === 'string' ? JSON.parse(raw) : raw; }
+    catch { parsed = null; }
+  }
+  const draft = {};
+  for (const day of DAY_KEYS) {
+    const v = parsed && parsed[day];
+    if (Array.isArray(v) && v.length === 2) {
+      draft[day] = { open: v[0], close: v[1], closed: false };
+    } else {
+      draft[day] = { open: '09:00', close: '21:00', closed: true };
+    }
+  }
+  return draft;
+}
+
+function draftToHours(draft) {
+  const out = {};
+  let hasAny = false;
+  for (const day of DAY_KEYS) {
+    const d = draft[day];
+    if (d && !d.closed && d.open && d.close) {
+      out[day] = [d.open, d.close];
+      hasAny = true;
+    } else {
+      out[day] = null;
+    }
+  }
+  return hasAny ? out : null;
+}
 
 /** Distance in metres between two WGS84 points */
 function haversineMeters(lat1, lon1, lat2, lon2) {
@@ -59,6 +101,7 @@ function PharmacyManagement() {
     latitude: '',
     longitude: '',
   });
+  const [hoursDraft, setHoursDraft] = useState(() => emptyHoursDraft());
 
   const [cityQuery, setCityQuery] = useState('');
   const [cityLookupLoading, setCityLookupLoading] = useState(false);
@@ -251,6 +294,7 @@ function PharmacyManagement() {
         ...formData,
         latitude: formData.latitude ? parseFloat(formData.latitude) : null,
         longitude: formData.longitude ? parseFloat(formData.longitude) : null,
+        opening_hours: draftToHours(hoursDraft),
       };
 
       if (editingPharmacy) {
@@ -299,6 +343,7 @@ function PharmacyManagement() {
       latitude: pharmacy.latitude ?? '',
       longitude: pharmacy.longitude ?? '',
     });
+    setHoursDraft(hoursToDraft(pharmacy.opening_hours));
     setShowForm(true);
   };
 
@@ -329,10 +374,15 @@ function PharmacyManagement() {
       latitude: '',
       longitude: '',
     });
+    setHoursDraft(emptyHoursDraft());
     setEditingPharmacy(null);
     setShowForm(false);
   };
 
+  const updateDay = (day, patch) => {
+    setHoursDraft((prev) => ({ ...prev, [day]: { ...prev[day], ...patch } }));
+  };
+
   const onRegionFieldChange = (setter) => (e) => {
     setRegionPreset('custom');
     setter(e.target.value);
@@ -571,6 +621,42 @@ function PharmacyManagement() {
             </div>
           </div>
 
+          <fieldset className="hours-editor">
+            <legend>Opening hours</legend>
+            <p className="hours-editor-hint">Leave a day checked as <em>Closed</em> if the pharmacy doesn't open that day.</p>
+            {DAY_KEYS.map((day) => {
+              const d = hoursDraft[day];
+              return (
+                <div key={day} className={`hours-row ${d.closed ? 'is-closed' : ''}`}>
+                  <span className="hours-day">{DAY_LABEL[day]}</span>
+                  <label className="hours-closed-toggle">
+                    <input
+                      type="checkbox"
+                      checked={d.closed}
+                      onChange={(e) => updateDay(day, { closed: e.target.checked })}
+                    />
+                    Closed
+                  </label>
+                  <input
+                    type="time"
+                    value={d.open}
+                    disabled={d.closed}
+                    onChange={(e) => updateDay(day, { open: e.target.value })}
+                    aria-label={`${DAY_LABEL[day]} opens at`}
+                  />
+                  <span className="hours-sep">–</span>
+                  <input
+                    type="time"
+                    value={d.close}
+                    disabled={d.closed}
+                    onChange={(e) => updateDay(day, { close: e.target.value })}
+                    aria-label={`${DAY_LABEL[day]} closes at`}
+                  />
+                </div>
+              );
+            })}
+          </fieldset>
+
           <div className="form-actions">
             <button type="submit" className="btn-primary" disabled={saving}>
               {saving ? 'Saving...' : editingPharmacy ? 'Update' : 'Add'} Pharmacy

frontend/src/components/admin/PharmacyMedicineLink.jsx

@@ -1,6 +1,12 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useMemo, useRef } from 'react';
 import './AdminComponents.css';
 
+const MAX_PHARMACY_RESULTS = 25;
+
+function normalize(s) {
+  return (s || '').toString().toLowerCase().normalize('NFD').replace(/[̀-ͯ]/g, '');
+}
+
 function PharmacyMedicineLink() {
   const [pharmacies, setPharmacies] = useState([]);
   const [medicineSearch, setMedicineSearch] = useState('');
@@ -10,12 +16,27 @@ function PharmacyMedicineLink() {
   const [pharmacyMedicines, setPharmacyMedicines] = useState([]);
   const [loading, setLoading] = useState(false);
   const [searching, setSearching] = useState(false);
+  const [pharmacyQuery, setPharmacyQuery] = useState('');
+  const [pharmacyDropdownOpen, setPharmacyDropdownOpen] = useState(false);
+  const pharmacyInputRef = useRef(null);
   const [formData, setFormData] = useState({
     pharmacy_id: '',
     price: '',
     stock: ''
   });
 
+  const filteredPharmacies = useMemo(() => {
+    const q = normalize(pharmacyQuery).trim();
+    if (!q) return pharmacies.slice(0, MAX_PHARMACY_RESULTS);
+    const tokens = q.split(/\s+/).filter(Boolean);
+    return pharmacies
+      .filter(p => {
+        const hay = `${normalize(p.name)} ${normalize(p.address)}`;
+        return tokens.every(tok => hay.includes(tok));
+      })
+      .slice(0, MAX_PHARMACY_RESULTS);
+  }, [pharmacies, pharmacyQuery]);
+
   useEffect(() => {
     fetchPharmacies();
   }, []);
@@ -172,14 +193,27 @@ function PharmacyMedicineLink() {
     setMedicineResults([]);
   };
 
-  const selectedPharmacyObj = pharmacies.find(p => p.id === parseInt(formData.pharmacy_id));
-
   const selectMedicine = (medicine) => {
     setSelectedMedicine(medicine);
     setMedicineSearch(medicine.name);
     setMedicineResults([]);
   };
 
+  const pickPharmacy = (pharmacy) => {
+    setSelectedPharmacy(pharmacy);
+    setFormData(prev => ({ ...prev, pharmacy_id: pharmacy.id.toString() }));
+    setPharmacyQuery(`${pharmacy.name} — ${pharmacy.address}`);
+    setPharmacyDropdownOpen(false);
+  };
+
+  const clearPharmacy = () => {
+    setSelectedPharmacy(null);
+    setFormData(prev => ({ ...prev, pharmacy_id: '' }));
+    setPharmacyQuery('');
+    setPharmacyDropdownOpen(true);
+    setTimeout(() => pharmacyInputRef.current?.focus(), 0);
+  };
+
   return (
     <div className="admin-section">
       <h2>Link Medicine to Pharmacy</h2>
@@ -187,22 +221,53 @@ function PharmacyMedicineLink() {
       <form className="admin-form" onSubmit={handleSubmit}>
         <div className="form-group">
           <label>Pharmacy *</label>
-          <select
-            value={formData.pharmacy_id}
+          <input
+            ref={pharmacyInputRef}
+            type="text"
+            value={pharmacyQuery}
             onChange={(e) => {
-              const pharmacy = pharmacies.find(p => p.id === parseInt(e.target.value));
-              setSelectedPharmacy(pharmacy);
-              setFormData({ ...formData, pharmacy_id: e.target.value });
+              setPharmacyQuery(e.target.value);
+              if (selectedPharmacy) {
+                setSelectedPharmacy(null);
+                setFormData(prev => ({ ...prev, pharmacy_id: '' }));
+              }
+              setPharmacyDropdownOpen(true);
             }}
-            required
-          >
-            <option value="">Select a pharmacy</option>
-            {pharmacies.map((pharmacy) => (
-              <option key={pharmacy.id} value={pharmacy.id}>
-                {pharmacy.name} - {pharmacy.address}
-              </option>
-            ))}
-          </select>
+            onFocus={() => setPharmacyDropdownOpen(true)}
+            onBlur={() => setTimeout(() => setPharmacyDropdownOpen(false), 150)}
+            placeholder={pharmacies.length ? `Search ${pharmacies.length} pharmacies by name or address…` : 'Loading pharmacies…'}
+            autoComplete="off"
+            required={!selectedPharmacy}
+          />
+          {!selectedPharmacy && pharmacyDropdownOpen && (
+            <div className="medicine-search-results">
+              {filteredPharmacies.length === 0 ? (
+                <div className="search-result-item search-result-item--empty">
+                  <span>No pharmacies match "{pharmacyQuery}"</span>
+                </div>
+              ) : (
+                filteredPharmacies.map((pharmacy) => (
+                  <div
+                    key={pharmacy.id}
+                    className="search-result-item"
+                    onMouseDown={(e) => { e.preventDefault(); pickPharmacy(pharmacy); }}
+                  >
+                    <strong>{pharmacy.name}</strong>
+                    <span>{pharmacy.address}</span>
+                  </div>
+                ))
+              )}
+            </div>
+          )}
+          {selectedPharmacy && (
+            <div className="selected-medicine-info">
+              <p>✅ Selected: <strong>{selectedPharmacy.name}</strong></p>
+              <p className="medicine-details">{selectedPharmacy.address}</p>
+              <button type="button" className="btn-small" onClick={clearPharmacy}>
+                Change pharmacy
+              </button>
+            </div>
+          )}
         </div>
 
         <div className="form-group">