niharika-mente · hashhhh-16 · Jun 27, 2026 · Jun 27, 2026 · Jul 3, 2026
diff --git a/FRONTEND/package-lock.json b/FRONTEND/package-lock.json
diff --git a/FRONTEND/package.json b/FRONTEND/package.json
@@ -27,6 +27,7 @@
     "react-router-dom": "^7.5.1",
     "react-window": "^2.2.7",
     "recharts": "^3.8.1",
+    "workbox-window": "^7.4.1",
     "socket.io-client": "^4.8.3",
     "zustand": "^5.0.4"
   },

diff --git a/FRONTEND/public/offline.html b/FRONTEND/public/offline.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Offline</title>
+</head>
+<body>
+  <h1>You are offline</h1>
+  <p>Please check your internet connection and try again.</p>
+</body>
+</html>
diff --git a/FRONTEND/src/components/ui/Navbar.jsx b/FRONTEND/src/components/ui/Navbar.jsx
@@ -672,4 +672,4 @@ const Navbar = () => {
   );
 };
 
-export default Navbar;
+export default Navbar;
diff --git a/FRONTEND/src/components/ui/QuickAddModal.jsx b/FRONTEND/src/components/ui/QuickAddModal.jsx
@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { useCart } from "../../store/cart";
-import {
+import { useCartStore } from "../../store/cart";import {
   showSuccessToast,
   showWarningToast,
 } from "../../utils/toastHelpers";
@@ -25,7 +24,7 @@ import {
 const QuickAddModal = ({ product, isOpen, onClose }) => {
   const [quantity, setQuantity] = useState(1);
 
-  const { addToCart } = useCart();
+  const { addToCart } = useCartStore();
   const toast = useToast();
 
   const isOutOfStock =

diff --git a/FRONTEND/src/main.jsx b/FRONTEND/src/main.jsx
@@ -8,6 +8,7 @@ import PWAReloadPrompt from './components/PWAReloadPrompt';
 
 import { useCurrencyStore } from './store/currency';
 useCurrencyStore.getState().fetchRates();
+registerSW();
 
 const root = createRoot(document.getElementById('root'));
 

diff --git a/FRONTEND/src/utils/registerSW.js b/FRONTEND/src/utils/registerSW.js
@@ -0,0 +1,14 @@
+export function registerSW() {
+  if (
+    typeof window !== "undefined" &&
+    "serviceWorker" in navigator
+  ) {
+    window.addEventListener("load", async () => {
+      try {
+        await navigator.serviceWorker.register("/sw.js");
+      } catch (error) {
+        console.error("Service worker registration failed:", error);
+      }
+    });
+  }
+}
diff --git a/FRONTEND/src/utils/registerSW.test.js b/FRONTEND/src/utils/registerSW.test.js
@@ -0,0 +1,32 @@
+import { describe, it, expect, vi } from "vitest";
+import { registerSW } from "./registerSW";
+
+describe("registerSW", () => {
+  it("registers load listener when service workers are supported", () => {
+    const addEventListenerSpy = vi.spyOn(window, "addEventListener");
+
+    Object.defineProperty(global.navigator, "serviceWorker", {
+      value: {
+        register: vi.fn(),
+      },
+      configurable: true,
+    });
+
+    registerSW();
+
+    expect(addEventListenerSpy).toHaveBeenCalledWith(
+      "load",
+      expect.any(Function)
+    );
+  });
+
+it("does nothing when service workers are unsupported", () => {
+  const addEventListenerSpy = vi.spyOn(window, "addEventListener");
+
+  delete navigator.serviceWorker;
+
+  registerSW();
+
+  expect(addEventListenerSpy).not.toHaveBeenCalled();
+});
+});
diff --git a/FRONTEND/vite.config.js b/FRONTEND/vite.config.js
@@ -2,6 +2,7 @@ import path from 'path';
 import { fileURLToPath } from 'url';
 import { defineConfig } from 'vite';
 import react from '@vitejs/plugin-react';
+import { VitePWA } from 'vite-plugin-pwa';
 
 import { VitePWA } from 'vite-plugin-pwa';
-Original file line number
+Diff line change
@@ Expand Up / @@ -672,4 +672,4 @@ const Navbar = () => { @@
       );
     };
-    export default Navbar;
+    export default Navbar;