Add iOS install hint + Apple PWA meta tags

iOS Safari has no beforeinstallprompt API, so the portal's Install button (?install=1) silently did nothing there. IosInstallHint now shows Share -> Add to Home Screen steps on Safari, or a prompt to switch to Safari first if opened in another iOS browser/in-app webview (those can't install PWAs on iOS at all). Also added apple-mobile-web-app-title + apple-touch-icon so the home screen icon isn't a page screenshot. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Fix week nav anchor, timesheet sync range, and in-progress clock entries
2026-08-06 14:12:12 +00:00 · 2026-08-06 14:11:40 +00:00
6 changed files with 114 additions and 9 deletions
--- a/frontend/dist/manifest.webmanifest
+++ b/frontend/dist/manifest.webmanifest
@ -1 +1 @@
-{"name":"HK Planner","short_name":"HK Planner","start_url":"/hk-planner/","display":"standalone","background_color":"#2d6a4f","theme_color":"#2d6a4f","lang":"en","scope":"/hk-planner/","icons":[{"src":"/hk-planner/icons/icon-192.png","sizes":"192x192","type":"image/png"},{"src":"/hk-planner/icons/icon-512.png","sizes":"512x512","type":"image/png"}]}
+{"name":"HK Planner","short_name":"HK Planner","start_url":"/hk-planner/","display":"standalone","background_color":"#2d6a4f","theme_color":"#2d6a4f","lang":"en","scope":"/","icons":[{"src":"/hk-planner/icons/icon-192.png","sizes":"192x192","type":"image/png"},{"src":"/hk-planner/icons/icon-512.png","sizes":"512x512","type":"image/png"}]}
--- a/frontend/dist/sw.js
+++ b/frontend/dist/sw.js
@ -1 +1 @@
-if(!self.define){let e,i={};const n=(n,s)=>(n=new URL(n+".js",s).href,i[n]||new Promise(i=>{if("document"in self){const e=document.createElement("script");e.src=n,e.onload=i,document.head.appendChild(e)}else e=n,importScripts(n),i()}).then(()=>{let e=i[n];if(!e)throw new Error(`Module ${n} didn’t register its module`);return e}));self.define=(s,r)=>{const o=e||("document"in self?document.currentScript.src:"")||location.href;if(i[o])return;let t={};const c=e=>n(e,o),d={module:{uri:o},exports:t,require:c};i[o]=Promise.all(s.map(e=>d[e]||c(e))).then(e=>(r(...e),t))}}define(["./workbox-9c191d2f"],function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"registerSW.js",revision:"a2c395d8c225f1b3ea12388f15189bce"},{url:"index.html",revision:"4f26c3459b65391beb1152aac0e652f9"},{url:"icons/icon-512.png",revision:"c32202b9deed67ef38331f63dec9d1c8"},{url:"icons/icon-192.png",revision:"46ece317d50d10b8f5e225e073b3221d"},{url:"assets/index-BdIiqds1.js",revision:null},{url:"assets/index-B7_UXJgZ.css",revision:null},{url:"manifest.webmanifest",revision:"c2510de876adb84db0c4b300b71216fa"}],{}),e.cleanupOutdatedCaches(),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/hk-planner/index.html"),{denylist:[/\/api\//]}))});
+if(!self.define){let e,i={};const n=(n,s)=>(n=new URL(n+".js",s).href,i[n]||new Promise(i=>{if("document"in self){const e=document.createElement("script");e.src=n,e.onload=i,document.head.appendChild(e)}else e=n,importScripts(n),i()}).then(()=>{let e=i[n];if(!e)throw new Error(`Module ${n} didn’t register its module`);return e}));self.define=(s,r)=>{const o=e||("document"in self?document.currentScript.src:"")||location.href;if(i[o])return;let t={};const c=e=>n(e,o),d={module:{uri:o},exports:t,require:c};i[o]=Promise.all(s.map(e=>d[e]||c(e))).then(e=>(r(...e),t))}}define(["./workbox-9c191d2f"],function(e){"use strict";self.skipWaiting(),e.clientsClaim(),e.precacheAndRoute([{url:"registerSW.js",revision:"a2c395d8c225f1b3ea12388f15189bce"},{url:"index.html",revision:"4f26c3459b65391beb1152aac0e652f9"},{url:"icons/icon-512.png",revision:"c32202b9deed67ef38331f63dec9d1c8"},{url:"icons/icon-192.png",revision:"46ece317d50d10b8f5e225e073b3221d"},{url:"assets/index-BdIiqds1.js",revision:null},{url:"assets/index-B7_UXJgZ.css",revision:null},{url:"manifest.webmanifest",revision:"0e833a539081835e9d26b49e8a28fd33"}],{}),e.cleanupOutdatedCaches(),e.registerRoute(new e.NavigationRoute(e.createHandlerBoundToURL("/hk-planner/index.html"),{denylist:[/\/api\//]}))});
--- a/frontend/index.html
+++ b/frontend/index.html
@ -3,6 +3,11 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=1280" />
+    <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="default" />
+    <meta name="apple-mobile-web-app-title" content="HK Planner" />
+    <link rel="apple-touch-icon" href="/hk-planner/icons/icon-192.png" />
    <meta name="theme-color" content="#2d6a4f" />
    <title>HK Planner</title>
  </head>
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@ -1,6 +1,7 @@
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom'
 import { AuthGate } from './components/AuthGate'
 import { UpdateBanner } from './components/UpdateBanner'
+import IosInstallHint from './components/IosInstallHint'
 import { useVersionCheck } from './hooks/useVersionCheck'
 import { Layout } from './components/Layout'
 import { Planner } from './pages/Planner'
@ -31,6 +32,7 @@ export default function App() {
        </AuthGate>
      </BrowserRouter>
      <UpdateBanner visible={updateAvailable} />
+      <IosInstallHint />
    </>
  )
 }
--- a/frontend/src/components/IosInstallHint.tsx
+++ b/frontend/src/components/IosInstallHint.tsx
@ -0,0 +1,89 @@
+import { useEffect, useState } from 'react'
+import { Share, ExternalLink, X } from 'lucide-react'
+
+function isIos() {
+  return /iPad|iPhone|iPod/.test(navigator.userAgent) ||
+    // iPadOS 13+ reports as 'MacIntel' but has touch support, unlike a real Mac
+    (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
+}
+
+function isStandalone() {
+  return window.matchMedia('(display-mode: standalone)').matches ||
+    (window.navigator as unknown as { standalone?: boolean }).standalone === true
+}
+
+// Safari's UA also matches "Safari", so this checks for the other iOS
+// browsers/in-app webviews that spoof it — none of them can add to the
+// home screen; only Safari itself can.
+function isNonSafariIosBrowser() {
+  return /CriOS|FxiOS|EdgiOS|OPiOS|mercury|GSA|DuckDuckGo|Instagram|FBAN|FBAV|Line\//.test(navigator.userAgent)
+}
+
+/**
+ * iOS has no `beforeinstallprompt` API — Safari never fires it, so the
+ * portal's Install button (?install=1) does nothing there. This shows the
+ * manual steps instead: Share -> Add to Home Screen in Safari, or a prompt
+ * to switch to Safari first if the page was opened in another browser/app.
+ */
+export default function IosInstallHint() {
+  const [mode, setMode] = useState<'safari' | 'other' | null>(null)
+
+  useEffect(() => {
+    if (!isIos() || isStandalone()) return
+    if (!new URLSearchParams(window.location.search).has('install')) return
+    setMode(isNonSafariIosBrowser() ? 'other' : 'safari')
+  }, [])
+
+  if (!mode) return null
+
+  return (
+    <div style={{
+      position: 'fixed', inset: 0, zIndex: 9999,
+      background: 'rgba(15,15,32,0.55)',
+      display: 'flex', alignItems: 'flex-end', justifyContent: 'center',
+      padding: '0 16px 24px',
+    }}>
+      <div style={{
+        position: 'relative',
+        width: '100%', maxWidth: '360px',
+        background: 'var(--card-bg)', borderRadius: 'var(--radius)',
+        border: '1px solid var(--card-border)', boxShadow: 'var(--shadow-md)',
+        padding: '20px', textAlign: 'center',
+      }}>
+        <button
+          onClick={() => setMode(null)}
+          aria-label="Dismiss"
+          style={{
+            position: 'absolute', top: '10px', right: '10px',
+            background: 'none', border: 'none', color: 'var(--text-mid)',
+            padding: '4px', cursor: 'pointer', lineHeight: 0,
+          }}
+        >
+          <X size={16} strokeWidth={1.75} />
+        </button>
+
+        <div style={{
+          width: '44px', height: '44px', margin: '0 auto 12px',
+          borderRadius: '50%', background: 'var(--gold)',
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+        }}>
+          {mode === 'safari'
+            ? <Share size={22} strokeWidth={1.75} color="var(--navy)" />
+            : <ExternalLink size={22} strokeWidth={1.75} color="var(--navy)" />}
+        </div>
+
+        {mode === 'safari' ? (
+          <p style={{ fontSize: '14px', color: 'var(--text-dark)', lineHeight: 1.5, margin: 0 }}>
+            To install this app, tap the <strong>Share</strong> icon in Safari's
+            toolbar, then choose <strong>Add to Home Screen</strong>.
+          </p>
+        ) : (
+          <p style={{ fontSize: '14px', color: 'var(--text-dark)', lineHeight: 1.5, margin: 0 }}>
+            iOS only allows installing apps from <strong>Safari</strong>. Open this
+            page in Safari, then tap Share → <strong>Add to Home Screen</strong>.
+          </p>
+        )}
+      </div>
+    </div>
+  )
+}
--- a/frontend/src/pages/Planner.js
+++ b/frontend/src/pages/Planner.js
@ -7,6 +7,12 @@ function todayStr() {
    const d = new Date();
    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
 }
+function thisMonday() {
+    const d = new Date();
+    const diff = (d.getDay() + 6) % 7; // days since Monday (Mon=0 … Sun=6)
+    d.setDate(d.getDate() - diff);
+    return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
+}
 function offsetDate(s, days) {
    const [y, m, d] = s.split('-').map(Number);
    const dt = new Date(y, m - 1, d);
@ -137,7 +143,7 @@ export function Planner() {
        setLoading(true);
        setError('');
        const today = todayStr();
-        const ws = weekStartRef.current || today;
+        const ws = weekStartRef.current || thisMonday();
        const wsEnd = offsetDate(ws, 6);
        const lv = lvArg !== undefined ? (lvArg || offsetDate(today, -1)) : (lastViewed || savedLastReviewed || offsetDate(today, -1));
        try {
@ -199,8 +205,7 @@ export function Planner() {
        return () => window.removeEventListener('beforeunload', onUnload);
    }, [staff, pickup, adjustments]);
    function handleWeekOffset(days) {
-        const today = todayStr();
-        const newStart = offsetDate(weekStartRef.current || today, days);
+        const newStart = offsetDate(weekStartRef.current || thisMonday(), days);
        weekStartRef.current = newStart;
        setWeekStart(newStart);
        stampLastReviewed();
@ -272,11 +277,13 @@ export function Planner() {
        if (!bookings)
            return;
        const start = bookings.dates[0];
-        const end = bookings.dates[bookings.dates.length - 1];
+        const today = todayStr();
+        const end = bookings.dates[bookings.dates.length - 1] > today ? today : bookings.dates[bookings.dates.length - 1];
        setTimesheetSyncing(true);
        try {
            await syncTimesheets(start, end);
-            const shifts = await getWorkforceShifts(start, end);
+            const wsEnd = bookings.dates[bookings.dates.length - 1];
+            const shifts = await getWorkforceShifts(start, wsEnd);
            setWfShifts(shifts);
            flash('Timesheets pulled from Workforce');
        }
@ -303,8 +310,7 @@ export function Planner() {
    // ── Required hours (memoised on state changes) ────────────────────────────
    const required = bookings ? calcRequired(bookings, timeReqs, pickup, generalTasks, adjustments) : null;
    // ── Render ──────────────────────────────────────────────────────────────────
-    const today = todayStr();
-    const displayWeekStart = weekStart || today;
+    const displayWeekStart = weekStart || thisMonday();
    return (_jsxs("div", { style: { padding: '1.5rem', maxWidth: '1600px' }, children: [_jsxs("div", { style: { display: 'flex', flexWrap: 'wrap', alignItems: 'center', gap: '0.75rem', marginBottom: '1.25rem' }, children: [_jsxs("div", { children: [_jsx("h1", { style: { fontSize: '1.15rem', fontWeight: 700, color: 'var(--text-dark)' }, children: "Housekeeping Planner" }), bookings && (_jsxs("p", { style: { fontSize: '0.8rem', color: 'var(--text-mid)', marginTop: '0.1rem' }, children: [fmtDate(bookings.dates[0]), " \u2013 ", fmtDate(bookings.dates[bookings.dates.length - 1])] }))] }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '0.4rem', marginLeft: 'auto', flexWrap: 'wrap' }, children: [_jsx(CtrlBtn, { onClick: () => handleWeekOffset(-7), children: "\u2039 Prev" }), _jsx(CtrlBtn, { onClick: handleWeekToday, primary: true, children: "Today" }), _jsx(CtrlBtn, { onClick: () => handleWeekOffset(7), children: "Next \u203A" }), _jsx("input", { type: "date", value: displayWeekStart, onChange: e => { if (e.target.value) {
                                    const v = e.target.value;
                                    weekStartRef.current = v;
@ -458,6 +464,9 @@ function pivotWfShifts(wfShifts, dates) {
        if (!day)
            continue;
        for (const s of day.staff) {
+            // Skip in-progress timesheet entries — clocked in but no clock-out time yet
+            if (s.times === '?' && s.hours === 0)
+                continue;
            if (!members[s.id])
                members[s.id] = { id: s.id, name: s.name, days: {} };
            members[s.id].days[date] = { hours: s.hours, times: s.times, status: s.status };