feat: Add PWA support - manifest, service worker, offline banner

frontend/src/components/OfflineBanner.jsx

@@ -0,0 +1,12 @@
+import { useOnlineStatus } from '../hooks/useOnlineStatus';
+
+export default function OfflineBanner() {
+  const isOnline = useOnlineStatus();
+  if (isOnline) return null;
+
+  return (
+    <div className="bg-amber-500 text-white text-center text-sm py-1.5 px-4 font-medium sticky top-0 z-50">
+      ⚡ You're offline — viewing cached data. Changes will sync when reconnected.
+    </div>
+  );
+}

frontend/src/hooks/useOnlineStatus.js

@@ -0,0 +1,18 @@
+import { useState, useEffect } from 'react';
+
+export function useOnlineStatus() {
+  const [isOnline, setIsOnline] = useState(navigator.onLine);
+
+  useEffect(() => {
+    const goOnline = () => setIsOnline(true);
+    const goOffline = () => setIsOnline(false);
+    window.addEventListener('online', goOnline);
+    window.addEventListener('offline', goOffline);
+    return () => {
+      window.removeEventListener('online', goOnline);
+      window.removeEventListener('offline', goOffline);
+    };
+  }, []);
+
+  return isOnline;
+}

frontend/src/main.jsx

@@ -7,6 +7,7 @@ import Login from './pages/Login';
 import Timesheet from './pages/Timesheet';
 import History from './pages/History';
 import Admin from './pages/Admin';
+import OfflineBanner from './components/OfflineBanner';
 import './index.css';
 
 function ProtectedRoute({ children }) {
@@ -40,6 +41,7 @@ ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
     <BrowserRouter>
       <AuthProvider>
+        <OfflineBanner />
         <AppRoutes />
       </AuthProvider>
     </BrowserRouter>