PWA-implementation

LittleShop/Areas/Admin/Views/Dashboard/Index.cshtml

@@ -59,6 +59,9 @@
         <div class="card">
             <div class="card-header">
                 <h5><i class="fas fa-chart-line"></i> Quick Actions</h5>
+                <button id="pwa-install-dashboard" class="btn btn-sm btn-outline-primary" style="float: right;">
+                    <i class="fas fa-mobile-alt"></i> Install App
+                </button>
             </div>
             <div class="card-body">
                 <div class="list-group list-group-flush">
@@ -95,4 +98,34 @@
             </div>
         </div>
     </div>
-</div>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+    const installBtn = document.getElementById('pwa-install-dashboard');
+    if (installBtn) {
+        installBtn.addEventListener('click', function() {
+            // Check if app is in standalone mode
+            if (window.matchMedia('(display-mode: standalone)').matches) {
+                alert('App is already installed!');
+                return;
+            }
+            
+            // Show manual install instructions
+            alert(`To install LittleShop Admin as an app:
+
+🌐 Chrome/Edge:
+1. Click the install icon (⊞) in the address bar, OR
+2. Menu (⋮) → "Install LittleShop Admin"
+
+🍎 Safari (iOS):
+1. Share button → "Add to Home Screen"
+
+📱 Mobile browsers:
+1. Browser menu → "Add to Home Screen"
+
+The app will then work offline and appear in your apps list!`);
+        });
+    }
+});
+</script>