AI Prompt: Forma3D.Connect — Phase 7: Progressive Web App (PWA)¶

PWA Foundation → Push Notifications → Offline Support → Native UX → Cross-Platform ✅

┌──────────────────────────────────────────────────────────────────┐
│                    PHASE 7: PWA ARCHITECTURE                      │
├──────────────────────────────────────────────────────────────────┤
│                                                                  │
│  ┌─────────────────────────────────────────────────────────────┐│
│  │                    FRONTEND (React PWA)                     ││
│  │                                                             ││
│  │  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐      ││
│  │  │  Manifest    │  │ Service      │  │ IndexedDB    │      ││
│  │  │  manifest.json│  │ Worker       │  │ Offline Data │      ││
│  │  └──────────────┘  └──────────────┘  └──────────────┘      ││
│  │                                                             ││
│  │  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐      ││
│  │  │ Push Manager │  │ Install      │  │ Badge API    │      ││
│  │  │ Subscription │  │ Prompt       │  │ Notifications│      ││
│  │  └──────────────┘  └──────────────┘  └──────────────┘      ││
│  └─────────────────────────────────────────────────────────────┘│
│                              │                                   │
│                              ▼                                   │
│  ┌─────────────────────────────────────────────────────────────┐│
│  │                    BACKEND (NestJS API)                     ││
│  │                                                             ││
│  │  ┌──────────────┐  ┌──────────────┐  ┌──────────────┐      ││
│  │  │ Push         │  │ Subscription │  │ Notification │      ││
│  │  │ Service      │  │ Repository   │  │ Triggers     │      ││
│  │  │ (web-push)   │  │ (Prisma)     │  │ (Events)     │      ││
│  │  └──────────────┘  └──────────────┘  └──────────────┘      ││
│  └─────────────────────────────────────────────────────────────┘│
│                                                                  │
└──────────────────────────────────────────────────────────────────┘

┌─────────────┐     ┌─────────────┐     ┌─────────────┐     ┌─────────────┐
│   Event     │────▶│  Notification│────▶│  Push       │────▶│  Browser    │
│   Trigger   │     │  Service     │     │  Service    │     │  Push API   │
│             │     │              │     │  (VAPID)    │     │             │
└─────────────┘     └─────────────┘     └─────────────┘     └─────────────┘
                                                                   │
                                                                   ▼
                                                            ┌─────────────┐
                                                            │  User       │
                                                            │  Device     │
                                                            │  (PWA)      │
                                                            └─────────────┘

apps/web/
├── public/
│   ├── manifest.json                    # NEW: Web app manifest
│   ├── icons/
│   │   ├── icon-192.png                 # NEW: PWA icon (192x192)
│   │   ├── icon-512.png                 # NEW: PWA icon (512x512)
│   │   ├── icon-maskable-192.png        # NEW: Maskable icon
│   │   ├── icon-maskable-512.png        # NEW: Maskable icon
│   │   └── apple-touch-icon.png         # NEW: iOS icon (180x180)
│   └── splash/
│       └── (splash screen images)       # NEW: iOS splash screens
│
├── src/
│   ├── pwa/
│   │   ├── install-prompt.tsx           # NEW: Install prompt component
│   │   ├── offline-indicator.tsx        # NEW: Offline status indicator
│   │   ├── push-permission.tsx          # NEW: Push notification permission flow
│   │   ├── sw-update-prompt.tsx         # NEW: Service worker update prompt
│   │   └── index.ts                     # NEW: PWA exports
│   │
│   ├── hooks/
│   │   ├── use-pwa-install.ts           # NEW: PWA install hook
│   │   ├── use-push-notifications.ts    # NEW: Push subscription hook
│   │   ├── use-online-status.ts         # NEW: Online/offline detection
│   │   └── use-offline-data.ts          # NEW: IndexedDB data access
│   │
│   ├── lib/
│   │   ├── indexed-db.ts                # NEW: IndexedDB wrapper
│   │   └── push-manager.ts              # NEW: Push subscription manager
│   │
│   ├── pages/settings/
│   │   └── notifications.tsx            # NEW: Notification settings page
│   │
│   └── contexts/
│       └── pwa-context.tsx              # NEW: PWA state context
│
├── vite.config.ts                       # UPDATE: Add vite-plugin-pwa
└── index.html                           # UPDATE: Add manifest link, theme-color

apps/api/src/
├── push-notifications/
│   ├── __tests__/
│   │   ├── push.controller.spec.ts      # NEW: Controller tests
│   │   ├── push.service.spec.ts         # NEW: Service tests
│   │   └── push.repository.spec.ts      # NEW: Repository tests
│   │
│   ├── dto/
│   │   ├── push-subscription.dto.ts     # NEW: Subscription DTO
│   │   └── send-notification.dto.ts     # NEW: Send notification DTO
│   │
│   ├── events/
│   │   └── push.events.ts               # NEW: Push notification events
│   │
│   ├── push.controller.ts               # NEW: Push API endpoints
│   ├── push.module.ts                   # NEW: Push module
│   ├── push.repository.ts               # NEW: Subscription persistence
│   └── push.service.ts                  # NEW: Web Push integration
│
├── notifications/
│   └── notifications.service.ts         # UPDATE: Integrate push notifications
│
└── config/
    └── configuration.ts                 # UPDATE: Add VAPID key config

prisma/
└── schema.prisma                        # UPDATE: Add PushSubscription model

apps/acceptance-tests/src/features/
├── pwa-install.feature                  # NEW: PWA installation tests
├── push-notifications.feature           # NEW: Push notification tests
└── offline-mode.feature                 # NEW: Offline functionality tests

apps/web/src/
├── pwa/__tests__/
│   ├── install-prompt.test.tsx          # NEW: Install prompt tests
│   ├── offline-indicator.test.tsx       # NEW: Offline indicator tests
│   └── push-permission.test.tsx         # NEW: Push permission tests
│
├── hooks/__tests__/
│   ├── use-pwa-install.test.ts          # NEW: Install hook tests
│   ├── use-push-notifications.test.ts   # NEW: Push hook tests
│   └── use-online-status.test.ts        # NEW: Online status tests

load-tests/k6/scenarios/
└── pwa-endpoints.js                     # NEW: Push subscription load tests

pnpm add -D vite-plugin-pwa workbox-window

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { VitePWA } from 'vite-plugin-pwa';

export default defineConfig({
  plugins: [
    react(),
    VitePWA({
      registerType: 'prompt', // Prompt user before updating
      includeAssets: ['favicon.ico', 'apple-touch-icon.png', 'logo.svg'],
      manifest: {
        name: 'Forma3D.Connect',
        short_name: 'Forma3D',
        description: '3D Print Order Management Dashboard',
        theme_color: '#0066cc',
        background_color: '#ffffff',
        display: 'standalone',
        orientation: 'any',
        start_url: '/',
        scope: '/',
        icons: [
          {
            src: '/icons/icon-192.png',
            sizes: '192x192',
            type: 'image/png',
          },
          {
            src: '/icons/icon-512.png',
            sizes: '512x512',
            type: 'image/png',
          },
          {
            src: '/icons/icon-maskable-512.png',
            sizes: '512x512',
            type: 'image/png',
            purpose: 'maskable',
          },
        ],
        categories: ['business', 'productivity'],
      },
      workbox: {
        // Cache static assets
        globPatterns: ['**/*.{js,css,html,ico,png,svg,woff,woff2}'],
        // Runtime caching for API calls
        runtimeCaching: [
          {
            urlPattern: /^https:\/\/.*\/api\/v1\/orders/,
            handler: 'StaleWhileRevalidate',
            options: {
              cacheName: 'api-orders',
              expiration: {
                maxEntries: 100,
                maxAgeSeconds: 60 * 5, // 5 minutes
              },
            },
          },
          {
            urlPattern: /^https:\/\/.*\/health/,
            handler: 'NetworkOnly',
          },
        ],
      },
      devOptions: {
        enabled: true, // Enable PWA in development for testing
      },
    }),
  ],
});

{
  "name": "Forma3D.Connect",
  "short_name": "Forma3D",
  "description": "3D Print Order Management Dashboard",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#ffffff",
  "theme_color": "#0066cc",
  "orientation": "any",
  "scope": "/",
  "lang": "en",
  "categories": ["business", "productivity"],
  "icons": [
    {
      "src": "/icons/icon-192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-512.png",
      "sizes": "512x512",
      "type": "image/png"
    },
    {
      "src": "/icons/icon-maskable-192.png",
      "sizes": "192x192",
      "type": "image/png",
      "purpose": "maskable"
    },
    {
      "src": "/icons/icon-maskable-512.png",
      "sizes": "512x512",
      "type": "image/png",
      "purpose": "maskable"
    }
  ],
  "screenshots": [
    {
      "src": "/screenshots/dashboard.png",
      "sizes": "1280x720",
      "type": "image/png",
      "form_factor": "wide",
      "label": "Dashboard Overview"
    },
    {
      "src": "/screenshots/orders-mobile.png",
      "sizes": "390x844",
      "type": "image/png",
      "form_factor": "narrow",
      "label": "Orders on Mobile"
    }
  ]
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- PWA Meta Tags -->
    <meta name="theme-color" content="#0066cc" />
    <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="Forma3D" />

    <!-- PWA Manifest -->
    <link rel="manifest" href="/manifest.json" />

    <!-- Icons -->
    <link rel="icon" type="image/svg+xml" href="/logo.svg" />
    <link rel="apple-touch-icon" href="/icons/apple-touch-icon.png" />

    <title>Forma3D.Connect</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

import { useState, useEffect } from 'react';
import { Button } from '../components/ui/button';
import { usePWAInstall } from '../hooks/use-pwa-install';

export function InstallPrompt() {
  const { canInstall, promptInstall, isInstalled, dismissPrompt } = usePWAInstall();
  const [showPrompt, setShowPrompt] = useState(false);

  useEffect(() => {
    // Show prompt after 30 seconds if app can be installed
    const timer = setTimeout(() => {
      if (canInstall && !isInstalled) {
        setShowPrompt(true);
      }
    }, 30000);

    return () => clearTimeout(timer);
  }, [canInstall, isInstalled]);

  if (!showPrompt || isInstalled) {
    return null;
  }

  const handleInstall = async () => {
    const installed = await promptInstall();
    if (installed) {
      setShowPrompt(false);
    }
  };

  const handleDismiss = () => {
    setShowPrompt(false);
    dismissPrompt();
  };

  return (
    <div className="fixed bottom-4 left-4 right-4 md:left-auto md:right-4 md:w-96 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 p-4 z-50">
      <div className="flex items-start gap-3">
        <img 
          src="/icons/icon-192.png" 
          alt="Forma3D" 
          className="w-12 h-12 rounded-lg"
        />
        <div className="flex-1">
          <h3 className="font-semibold text-gray-900 dark:text-white">
            Install Forma3D.Connect
          </h3>
          <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">
            Install for quick access and offline support
          </p>
        </div>
      </div>
      <div className="flex gap-2 mt-4">
        <Button variant="outline" onClick={handleDismiss} className="flex-1">
          Not now
        </Button>
        <Button onClick={handleInstall} className="flex-1">
          Install
        </Button>
      </div>
    </div>
  );
}

import { useState, useEffect, useCallback } from 'react';

interface BeforeInstallPromptEvent extends Event {
  readonly platforms: string[];
  readonly userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>;
  prompt(): Promise<void>;
}

interface UsePWAInstallReturn {
  canInstall: boolean;
  isInstalled: boolean;
  promptInstall: () => Promise<boolean>;
  dismissPrompt: () => void;
}

export function usePWAInstall(): UsePWAInstallReturn {
  const [installPromptEvent, setInstallPromptEvent] = 
    useState<BeforeInstallPromptEvent | null>(null);
  const [isInstalled, setIsInstalled] = useState(false);

  useEffect(() => {
    // Check if already installed
    const isStandalone = window.matchMedia('(display-mode: standalone)').matches;
    const isIOSStandalone = (window.navigator as { standalone?: boolean }).standalone === true;
    setIsInstalled(isStandalone || isIOSStandalone);

    // Listen for install prompt
    const handleBeforeInstallPrompt = (e: Event) => {
      e.preventDefault();
      setInstallPromptEvent(e as BeforeInstallPromptEvent);
    };

    // Listen for successful install
    const handleAppInstalled = () => {
      setIsInstalled(true);
      setInstallPromptEvent(null);
    };

    window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
    window.addEventListener('appinstalled', handleAppInstalled);

    return () => {
      window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt);
      window.removeEventListener('appinstalled', handleAppInstalled);
    };
  }, []);

  const promptInstall = useCallback(async (): Promise<boolean> => {
    if (!installPromptEvent) {
      return false;
    }

    await installPromptEvent.prompt();
    const choice = await installPromptEvent.userChoice;

    if (choice.outcome === 'accepted') {
      setIsInstalled(true);
      setInstallPromptEvent(null);
      return true;
    }

    return false;
  }, [installPromptEvent]);

  const dismissPrompt = useCallback(() => {
    // Store dismissal in localStorage to not show again for a week
    localStorage.setItem('pwa-install-dismissed', Date.now().toString());
  }, []);

  const canInstall = installPromptEvent !== null && !isInstalled;

  return {
    canInstall,
    isInstalled,
    promptInstall,
    dismissPrompt,
  };
}

import { useRegisterSW } from 'virtual:pwa-register/react';
import { Button } from '../components/ui/button';

export function ServiceWorkerUpdatePrompt() {
  const {
    needRefresh: [needRefresh, setNeedRefresh],
    updateServiceWorker,
  } = useRegisterSW({
    onRegistered(registration) {
      console.log('Service worker registered:', registration);
    },
    onRegisterError(error) {
      console.error('Service worker registration failed:', error);
    },
  });

  if (!needRefresh) {
    return null;
  }

  const handleUpdate = () => {
    updateServiceWorker(true);
  };

  const handleDismiss = () => {
    setNeedRefresh(false);
  };

  return (
    <div className="fixed top-4 right-4 bg-blue-600 text-white rounded-lg shadow-lg p-4 z-50 max-w-sm">
      <p className="font-medium">New version available!</p>
      <p className="text-sm mt-1 text-blue-100">
        Click update to get the latest features.
      </p>
      <div className="flex gap-2 mt-3">
        <Button
          variant="ghost"
          size="sm"
          onClick={handleDismiss}
          className="text-white hover:bg-blue-700"
        >
          Later
        </Button>
        <Button
          size="sm"
          onClick={handleUpdate}
          className="bg-white text-blue-600 hover:bg-blue-50"
        >
          Update now
        </Button>
      </div>
    </div>
  );
}

model PushSubscription {
  id                String   @id @default(uuid())
  endpoint          String   @unique
  expirationTime    DateTime?
  p256dh            String   // Public key for encryption
  auth              String   // Auth secret
  userAgent         String?  // Browser/device info
  createdAt         DateTime @default(now())
  updatedAt         DateTime @updatedAt

  // Notification preferences
  orderNotifications     Boolean @default(true)
  printJobNotifications  Boolean @default(true)
  shipmentNotifications  Boolean @default(true)
  systemNotifications    Boolean @default(true)

  @@index([endpoint])
}

pnpm prisma migrate dev --name add_push_subscriptions

pnpm add web-push
pnpm add -D @types/web-push

import { Injectable, Logger, OnModuleInit } from '@nestjs/common';
import { ConfigService } from '@nestjs/config';
import * as webPush from 'web-push';
import { PushRepository } from './push.repository';
import { EventEmitter2, OnEvent } from '@nestjs/event-emitter';
import { OrderCreatedEvent, OrderStatusChangedEvent } from '../orders/events/order.events';
import { PrintJobStatusChangedEvent } from '../print-jobs/events/print-job.events';
import { ShipmentCreatedEvent, ShipmentStatusChangedEvent } from '../sendcloud/events/shipment.events';

export interface PushPayload {
  title: string;
  body: string;
  icon?: string;
  badge?: string;
  tag?: string;
  data?: Record<string, unknown>;
  actions?: Array<{ action: string; title: string }>;
}

@Injectable()
export class PushService implements OnModuleInit {
  private readonly logger = new Logger(PushService.name);
  private vapidConfigured = false;

  constructor(
    private readonly configService: ConfigService,
    private readonly pushRepository: PushRepository,
  ) {}

  onModuleInit() {
    const publicKey = this.configService.get<string>('VAPID_PUBLIC_KEY');
    const privateKey = this.configService.get<string>('VAPID_PRIVATE_KEY');
    const subject = this.configService.get<string>('VAPID_SUBJECT') || 'mailto:admin@forma3d.be';

    if (publicKey && privateKey) {
      webPush.setVapidDetails(subject, publicKey, privateKey);
      this.vapidConfigured = true;
      this.logger.log('VAPID keys configured for Web Push');
    } else {
      this.logger.warn('VAPID keys not configured - push notifications disabled');
    }
  }

  /**
   * Get VAPID public key for client subscription
   */
  getPublicKey(): string | null {
    return this.configService.get<string>('VAPID_PUBLIC_KEY') || null;
  }

  /**
   * Subscribe a client to push notifications
   */
  async subscribe(subscription: {
    endpoint: string;
    expirationTime?: number | null;
    keys: { p256dh: string; auth: string };
    userAgent?: string;
  }): Promise<{ id: string }> {
    const saved = await this.pushRepository.upsert({
      endpoint: subscription.endpoint,
      expirationTime: subscription.expirationTime 
        ? new Date(subscription.expirationTime) 
        : null,
      p256dh: subscription.keys.p256dh,
      auth: subscription.keys.auth,
      userAgent: subscription.userAgent,
    });

    this.logger.log(`Push subscription saved: ${saved.id}`);
    return { id: saved.id };
  }

  /**
   * Unsubscribe a client
   */
  async unsubscribe(endpoint: string): Promise<void> {
    await this.pushRepository.deleteByEndpoint(endpoint);
    this.logger.log(`Push subscription removed: ${endpoint}`);
  }

  /**
   * Update notification preferences
   */
  async updatePreferences(
    endpoint: string,
    preferences: {
      orderNotifications?: boolean;
      printJobNotifications?: boolean;
      shipmentNotifications?: boolean;
      systemNotifications?: boolean;
    },
  ): Promise<void> {
    await this.pushRepository.updatePreferences(endpoint, preferences);
  }

  /**
   * Send push notification to all subscribed clients
   */
  async sendToAll(
    payload: PushPayload,
    filter?: {
      orderNotifications?: boolean;
      printJobNotifications?: boolean;
      shipmentNotifications?: boolean;
      systemNotifications?: boolean;
    },
  ): Promise<{ sent: number; failed: number }> {
    if (!this.vapidConfigured) {
      this.logger.warn('Push notifications disabled - VAPID not configured');
      return { sent: 0, failed: 0 };
    }

    const subscriptions = await this.pushRepository.findAll(filter);
    let sent = 0;
    let failed = 0;

    const notification = JSON.stringify({
      ...payload,
      icon: payload.icon || '/icons/icon-192.png',
      badge: payload.badge || '/icons/badge-72.png',
    });

    for (const sub of subscriptions) {
      try {
        await webPush.sendNotification(
          {
            endpoint: sub.endpoint,
            keys: { p256dh: sub.p256dh, auth: sub.auth },
          },
          notification,
        );
        sent++;
      } catch (error) {
        failed++;
        // Remove invalid subscriptions
        if ((error as { statusCode?: number }).statusCode === 410) {
          await this.pushRepository.deleteByEndpoint(sub.endpoint);
          this.logger.log(`Removed expired subscription: ${sub.endpoint}`);
        } else {
          this.logger.error(`Push notification failed: ${error}`);
        }
      }
    }

    this.logger.log(`Push notifications sent: ${sent}, failed: ${failed}`);
    return { sent, failed };
  }

  // ─────────────────────────────────────────────────────────────
  // Event Handlers for Order Notifications
  // ─────────────────────────────────────────────────────────────

  @OnEvent('order.created')
  async handleOrderCreated(event: OrderCreatedEvent): Promise<void> {
    await this.sendToAll(
      {
        title: 'New Order Received',
        body: `Order #${event.shopifyOrderNumber} from ${event.customerName}`,
        tag: `order-${event.orderId}`,
        data: { 
          type: 'order.created',
          orderId: event.orderId,
          url: `/orders/${event.orderId}`,
        },
        actions: [
          { action: 'view', title: 'View Order' },
        ],
      },
      { orderNotifications: true },
    );
  }

  @OnEvent('order.status-changed')
  async handleOrderStatusChanged(event: OrderStatusChangedEvent): Promise<void> {
    const notifications: Record<string, { title: string; body: string }> = {
      CANCELLED: {
        title: 'Order Cancelled',
        body: `Order #${event.shopifyOrderNumber} has been cancelled`,
      },
      COMPLETED: {
        title: 'Order Ready to Ship',
        body: `Order #${event.shopifyOrderNumber} - all print jobs complete`,
      },
      FULFILLED: {
        title: 'Order Fulfilled',
        body: `Order #${event.shopifyOrderNumber} shipped successfully`,
      },
    };

    const notification = notifications[event.newStatus];
    if (notification) {
      await this.sendToAll(
        {
          ...notification,
          tag: `order-${event.orderId}`,
          data: {
            type: 'order.status-changed',
            orderId: event.orderId,
            status: event.newStatus,
            url: `/orders/${event.orderId}`,
          },
        },
        { orderNotifications: true },
      );
    }
  }

  // ─────────────────────────────────────────────────────────────
  // Event Handlers for Print Job Notifications
  // ─────────────────────────────────────────────────────────────

  @OnEvent('printjob.status-changed')
  async handlePrintJobStatusChanged(event: PrintJobStatusChangedEvent): Promise<void> {
    const notifications: Record<string, { title: string; body: string; urgent?: boolean }> = {
      PRINTING: {
        title: 'Print Job Started',
        body: `Order #${event.shopifyOrderNumber}: Printing started`,
      },
      COMPLETED: {
        title: 'Print Job Complete',
        body: `Order #${event.shopifyOrderNumber}: Print job finished`,
      },
      FAILED: {
        title: 'Print Job Failed ⚠️',
        body: `Order #${event.shopifyOrderNumber}: Print failed - action required`,
        urgent: true,
      },
    };

    const notification = notifications[event.newStatus];
    if (notification) {
      await this.sendToAll(
        {
          title: notification.title,
          body: notification.body,
          tag: `printjob-${event.printJobId}`,
          data: {
            type: 'printjob.status-changed',
            printJobId: event.printJobId,
            orderId: event.orderId,
            status: event.newStatus,
            url: `/orders/${event.orderId}`,
          },
        },
        { printJobNotifications: true },
      );
    }
  }

  // ─────────────────────────────────────────────────────────────
  // Event Handlers for Shipment Notifications
  // ─────────────────────────────────────────────────────────────

  @OnEvent('shipment.created')
  async handleShipmentCreated(event: ShipmentCreatedEvent): Promise<void> {
    await this.sendToAll(
      {
        title: 'Shipping Label Ready',
        body: `Order #${event.shopifyOrderNumber}: Label generated`,
        tag: `shipment-${event.shipmentId}`,
        data: {
          type: 'shipment.created',
          shipmentId: event.shipmentId,
          orderId: event.orderId,
          url: `/orders/${event.orderId}`,
        },
      },
      { shipmentNotifications: true },
    );
  }

  @OnEvent('shipment.status-changed')
  async handleShipmentStatusChanged(event: ShipmentStatusChangedEvent): Promise<void> {
    const notifications: Record<string, { title: string; body: string }> = {
      SHIPPED: {
        title: 'Order Shipped',
        body: `Order #${event.shopifyOrderNumber} is on its way`,
      },
      DELIVERED: {
        title: 'Order Delivered',
        body: `Order #${event.shopifyOrderNumber} delivered successfully`,
      },
    };

    const notification = notifications[event.newStatus];
    if (notification) {
      await this.sendToAll(
        {
          ...notification,
          tag: `shipment-${event.shipmentId}`,
          data: {
            type: 'shipment.status-changed',
            shipmentId: event.shipmentId,
            orderId: event.orderId,
            status: event.newStatus,
            url: `/orders/${event.orderId}`,
          },
        },
        { shipmentNotifications: true },
      );
    }
  }

  // ─────────────────────────────────────────────────────────────
  // System Alert Handler
  // ─────────────────────────────────────────────────────────────

  async sendSystemAlert(title: string, body: string, data?: Record<string, unknown>): Promise<void> {
    await this.sendToAll(
      {
        title: `System Alert: ${title}`,
        body,
        tag: 'system-alert',
        data: {
          type: 'system.alert',
          ...data,
        },
      },
      { systemNotifications: true },
    );
  }
}

import { Controller, Post, Delete, Get, Body, Query, HttpCode, HttpStatus } from '@nestjs/common';
import { ApiTags, ApiOperation, ApiResponse } from '@nestjs/swagger';
import { PushService } from './push.service';
import { PushSubscriptionDto, UpdatePreferencesDto } from './dto/push-subscription.dto';

@ApiTags('Push Notifications')
@Controller('api/v1/push')
export class PushController {
  constructor(private readonly pushService: PushService) {}

  @Get('vapid-public-key')
  @ApiOperation({ summary: 'Get VAPID public key for push subscription' })
  @ApiResponse({ status: 200, description: 'VAPID public key' })
  getVapidPublicKey(): { publicKey: string | null } {
    return { publicKey: this.pushService.getPublicKey() };
  }

  @Post('subscribe')
  @ApiOperation({ summary: 'Subscribe to push notifications' })
  @ApiResponse({ status: 201, description: 'Subscription created' })
  async subscribe(@Body() subscription: PushSubscriptionDto): Promise<{ id: string }> {
    return this.pushService.subscribe(subscription);
  }

  @Delete('unsubscribe')
  @HttpCode(HttpStatus.NO_CONTENT)
  @ApiOperation({ summary: 'Unsubscribe from push notifications' })
  @ApiResponse({ status: 204, description: 'Subscription removed' })
  async unsubscribe(@Query('endpoint') endpoint: string): Promise<void> {
    await this.pushService.unsubscribe(endpoint);
  }

  @Post('preferences')
  @HttpCode(HttpStatus.NO_CONTENT)
  @ApiOperation({ summary: 'Update notification preferences' })
  @ApiResponse({ status: 204, description: 'Preferences updated' })
  async updatePreferences(
    @Query('endpoint') endpoint: string,
    @Body() preferences: UpdatePreferencesDto,
  ): Promise<void> {
    await this.pushService.updatePreferences(endpoint, preferences);
  }
}

import { IsString, IsOptional, IsNumber, IsBoolean, ValidateNested } from 'class-validator';
import { Type } from 'class-transformer';
import { ApiProperty, ApiPropertyOptional } from '@nestjs/swagger';

class PushKeysDto {
  @ApiProperty({ description: 'P256DH public key' })
  @IsString()
  p256dh: string;

  @ApiProperty({ description: 'Auth secret' })
  @IsString()
  auth: string;
}

export class PushSubscriptionDto {
  @ApiProperty({ description: 'Push service endpoint URL' })
  @IsString()
  endpoint: string;

  @ApiPropertyOptional({ description: 'Subscription expiration time' })
  @IsOptional()
  @IsNumber()
  expirationTime?: number | null;

  @ApiProperty({ description: 'Encryption keys' })
  @ValidateNested()
  @Type(() => PushKeysDto)
  keys: PushKeysDto;

  @ApiPropertyOptional({ description: 'User agent string' })
  @IsOptional()
  @IsString()
  userAgent?: string;
}

export class UpdatePreferencesDto {
  @ApiPropertyOptional({ description: 'Receive order notifications' })
  @IsOptional()
  @IsBoolean()
  orderNotifications?: boolean;

  @ApiPropertyOptional({ description: 'Receive print job notifications' })
  @IsOptional()
  @IsBoolean()
  printJobNotifications?: boolean;

  @ApiPropertyOptional({ description: 'Receive shipment notifications' })
  @IsOptional()
  @IsBoolean()
  shipmentNotifications?: boolean;

  @ApiPropertyOptional({ description: 'Receive system notifications' })
  @IsOptional()
  @IsBoolean()
  systemNotifications?: boolean;
}

import { useState, useEffect, useCallback } from 'react';
import { apiClient } from '../lib/api-client';

interface PushPreferences {
  orderNotifications: boolean;
  printJobNotifications: boolean;
  shipmentNotifications: boolean;
  systemNotifications: boolean;
}

interface UsePushNotificationsReturn {
  isSupported: boolean;
  permission: NotificationPermission;
  isSubscribed: boolean;
  isLoading: boolean;
  error: string | null;
  preferences: PushPreferences;
  subscribe: () => Promise<boolean>;
  unsubscribe: () => Promise<void>;
  updatePreferences: (prefs: Partial<PushPreferences>) => Promise<void>;
}

const defaultPreferences: PushPreferences = {
  orderNotifications: true,
  printJobNotifications: true,
  shipmentNotifications: true,
  systemNotifications: true,
};

export function usePushNotifications(): UsePushNotificationsReturn {
  const [permission, setPermission] = useState<NotificationPermission>('default');
  const [isSubscribed, setIsSubscribed] = useState(false);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [preferences, setPreferences] = useState<PushPreferences>(defaultPreferences);

  const isSupported = 'serviceWorker' in navigator && 'PushManager' in window;

  // Check current subscription status
  useEffect(() => {
    const checkSubscription = async () => {
      if (!isSupported) {
        setIsLoading(false);
        return;
      }

      try {
        setPermission(Notification.permission);

        const registration = await navigator.serviceWorker.ready;
        const subscription = await registration.pushManager.getSubscription();
        setIsSubscribed(subscription !== null);

        // Load preferences from localStorage
        const savedPrefs = localStorage.getItem('push-preferences');
        if (savedPrefs) {
          setPreferences(JSON.parse(savedPrefs));
        }
      } catch (err) {
        console.error('Error checking push subscription:', err);
      } finally {
        setIsLoading(false);
      }
    };

    checkSubscription();
  }, [isSupported]);

  const subscribe = useCallback(async (): Promise<boolean> => {
    if (!isSupported) {
      setError('Push notifications not supported');
      return false;
    }

    setIsLoading(true);
    setError(null);

    try {
      // Request permission
      const result = await Notification.requestPermission();
      setPermission(result);

      if (result !== 'granted') {
        setError('Notification permission denied');
        return false;
      }

      // Get VAPID public key from server
      const { publicKey } = await apiClient.get<{ publicKey: string }>('/push/vapid-public-key');

      if (!publicKey) {
        setError('Push notifications not configured on server');
        return false;
      }

      // Subscribe to push
      const registration = await navigator.serviceWorker.ready;
      const subscription = await registration.pushManager.subscribe({
        userVisibleOnly: true,
        applicationServerKey: urlBase64ToUint8Array(publicKey),
      });

      // Send subscription to server
      await apiClient.post('/push/subscribe', {
        endpoint: subscription.endpoint,
        expirationTime: subscription.expirationTime,
        keys: {
          p256dh: arrayBufferToBase64(subscription.getKey('p256dh')),
          auth: arrayBufferToBase64(subscription.getKey('auth')),
        },
        userAgent: navigator.userAgent,
      });

      setIsSubscribed(true);
      return true;
    } catch (err) {
      console.error('Error subscribing to push:', err);
      setError('Failed to subscribe to notifications');
      return false;
    } finally {
      setIsLoading(false);
    }
  }, [isSupported]);

  const unsubscribe = useCallback(async (): Promise<void> => {
    setIsLoading(true);

    try {
      const registration = await navigator.serviceWorker.ready;
      const subscription = await registration.pushManager.getSubscription();

      if (subscription) {
        // Unsubscribe locally
        await subscription.unsubscribe();

        // Remove from server
        await apiClient.delete('/push/unsubscribe', {
          params: { endpoint: subscription.endpoint },
        });
      }

      setIsSubscribed(false);
    } catch (err) {
      console.error('Error unsubscribing:', err);
      setError('Failed to unsubscribe');
    } finally {
      setIsLoading(false);
    }
  }, []);

  const updatePreferences = useCallback(async (prefs: Partial<PushPreferences>): Promise<void> => {
    const newPrefs = { ...preferences, ...prefs };
    setPreferences(newPrefs);
    localStorage.setItem('push-preferences', JSON.stringify(newPrefs));

    // Update on server
    const registration = await navigator.serviceWorker.ready;
    const subscription = await registration.pushManager.getSubscription();

    if (subscription) {
      await apiClient.post('/push/preferences', prefs, {
        params: { endpoint: subscription.endpoint },
      });
    }
  }, [preferences]);

  return {
    isSupported,
    permission,
    isSubscribed,
    isLoading,
    error,
    preferences,
    subscribe,
    unsubscribe,
    updatePreferences,
  };
}

// Helper functions
function urlBase64ToUint8Array(base64String: string): Uint8Array {
  const padding = '='.repeat((4 - (base64String.length % 4)) % 4);
  const base64 = (base64String + padding).replace(/-/g, '+').replace(/_/g, '/');
  const rawData = window.atob(base64);
  return Uint8Array.from([...rawData].map((char) => char.charCodeAt(0)));
}

function arrayBufferToBase64(buffer: ArrayBuffer | null): string {
  if (!buffer) return '';
  const bytes = new Uint8Array(buffer);
  let binary = '';
  bytes.forEach((b) => (binary += String.fromCharCode(b)));
  return window.btoa(binary);
}

import { Button } from '../components/ui/button';
import { usePushNotifications } from '../hooks/use-push-notifications';

interface PushPermissionProps {
  onSuccess?: () => void;
}

export function PushPermission({ onSuccess }: PushPermissionProps) {
  const {
    isSupported,
    permission,
    isSubscribed,
    isLoading,
    error,
    subscribe,
    unsubscribe,
  } = usePushNotifications();

  if (!isSupported) {
    return (
      <div className="p-4 bg-gray-100 dark:bg-gray-800 rounded-lg">
        <p className="text-sm text-gray-600 dark:text-gray-400">
          Push notifications are not supported in this browser.
        </p>
      </div>
    );
  }

  if (permission === 'denied') {
    return (
      <div className="p-4 bg-yellow-50 dark:bg-yellow-900/20 rounded-lg">
        <p className="text-sm text-yellow-800 dark:text-yellow-200">
          Notifications are blocked. Please enable them in your browser settings.
        </p>
      </div>
    );
  }

  const handleToggle = async () => {
    if (isSubscribed) {
      await unsubscribe();
    } else {
      const success = await subscribe();
      if (success && onSuccess) {
        onSuccess();
      }
    }
  };

  return (
    <div className="space-y-4">
      <div className="flex items-center justify-between">
        <div>
          <h3 className="font-medium text-gray-900 dark:text-white">
            Push Notifications
          </h3>
          <p className="text-sm text-gray-600 dark:text-gray-400">
            {isSubscribed
              ? 'You will receive alerts for orders and print jobs'
              : 'Enable notifications to stay updated on orders'}
          </p>
        </div>
        <Button
          onClick={handleToggle}
          disabled={isLoading}
          variant={isSubscribed ? 'outline' : 'default'}
        >
          {isLoading ? 'Loading...' : isSubscribed ? 'Disable' : 'Enable'}
        </Button>
      </div>
      {error && (
        <p className="text-sm text-red-600 dark:text-red-400">{error}</p>
      )}
    </div>
  );
}

import { openDB, DBSchema, IDBPDatabase } from 'idb';

interface Forma3DDB extends DBSchema {
  orders: {
    key: string;
    value: {
      id: string;
      shopifyOrderNumber: string;
      customerName: string;
      status: string;
      totalPrice: number;
      currency: string;
      createdAt: string;
      updatedAt: string;
      cachedAt: number;
    };
    indexes: { 'by-status': string; 'by-cached-at': number };
  };
  pendingActions: {
    key: number;
    value: {
      id?: number;
      type: 'retry' | 'cancel';
      entityType: 'order' | 'printjob';
      entityId: string;
      createdAt: number;
    };
  };
}

let dbPromise: Promise<IDBPDatabase<Forma3DDB>> | null = null;

export async function getDB(): Promise<IDBPDatabase<Forma3DDB>> {
  if (!dbPromise) {
    dbPromise = openDB<Forma3DDB>('forma3d-connect', 1, {
      upgrade(db) {
        // Orders store
        const orderStore = db.createObjectStore('orders', { keyPath: 'id' });
        orderStore.createIndex('by-status', 'status');
        orderStore.createIndex('by-cached-at', 'cachedAt');

        // Pending actions store (for offline queue)
        db.createObjectStore('pendingActions', {
          keyPath: 'id',
          autoIncrement: true,
        });
      },
    });
  }
  return dbPromise;
}

// Orders
export async function cacheOrders(orders: Forma3DDB['orders']['value'][]): Promise<void> {
  const db = await getDB();
  const tx = db.transaction('orders', 'readwrite');

  for (const order of orders) {
    await tx.store.put({ ...order, cachedAt: Date.now() });
  }

  await tx.done;
}

export async function getCachedOrders(): Promise<Forma3DDB['orders']['value'][]> {
  const db = await getDB();
  return db.getAllFromIndex('orders', 'by-cached-at');
}

export async function getCachedOrder(id: string): Promise<Forma3DDB['orders']['value'] | undefined> {
  const db = await getDB();
  return db.get('orders', id);
}

export async function clearOldCache(maxAgeMs: number = 1000 * 60 * 60 * 24): Promise<void> {
  const db = await getDB();
  const tx = db.transaction('orders', 'readwrite');
  const cutoff = Date.now() - maxAgeMs;

  let cursor = await tx.store.index('by-cached-at').openCursor();
  while (cursor) {
    if (cursor.value.cachedAt < cutoff) {
      await cursor.delete();
    }
    cursor = await cursor.continue();
  }

  await tx.done;
}

// Pending Actions (offline queue)
export async function queueAction(action: Omit<Forma3DDB['pendingActions']['value'], 'id' | 'createdAt'>): Promise<void> {
  const db = await getDB();
  await db.add('pendingActions', { ...action, createdAt: Date.now() });
}

export async function getPendingActions(): Promise<Forma3DDB['pendingActions']['value'][]> {
  const db = await getDB();
  return db.getAll('pendingActions');
}

export async function clearPendingAction(id: number): Promise<void> {
  const db = await getDB();
  await db.delete('pendingActions', id);
}

export async function clearAllPendingActions(): Promise<void> {
  const db = await getDB();
  await db.clear('pendingActions');
}

import { useState, useEffect, useCallback } from 'react';
import { getPendingActions, clearPendingAction } from '../lib/indexed-db';
import { apiClient } from '../lib/api-client';

interface UseOnlineStatusReturn {
  isOnline: boolean;
  pendingActionsCount: number;
  syncPendingActions: () => Promise<{ synced: number; failed: number }>;
}

export function useOnlineStatus(): UseOnlineStatusReturn {
  const [isOnline, setIsOnline] = useState(navigator.onLine);
  const [pendingActionsCount, setPendingActionsCount] = useState(0);

  useEffect(() => {
    const handleOnline = () => setIsOnline(true);
    const handleOffline = () => setIsOnline(false);

    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);

    // Check pending actions count
    const checkPending = async () => {
      const actions = await getPendingActions();
      setPendingActionsCount(actions.length);
    };
    checkPending();

    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);

  const syncPendingActions = useCallback(async (): Promise<{ synced: number; failed: number }> => {
    const actions = await getPendingActions();
    let synced = 0;
    let failed = 0;

    for (const action of actions) {
      try {
        if (action.type === 'retry') {
          await apiClient.post(`/${action.entityType}s/${action.entityId}/retry`);
        } else if (action.type === 'cancel') {
          await apiClient.post(`/${action.entityType}s/${action.entityId}/cancel`);
        }

        if (action.id) {
          await clearPendingAction(action.id);
        }
        synced++;
      } catch (err) {
        console.error('Failed to sync action:', err);
        failed++;
      }
    }

    setPendingActionsCount(failed);
    return { synced, failed };
  }, []);

  // Auto-sync when coming back online
  useEffect(() => {
    if (isOnline && pendingActionsCount > 0) {
      syncPendingActions();
    }
  }, [isOnline, pendingActionsCount, syncPendingActions]);

  return {
    isOnline,
    pendingActionsCount,
    syncPendingActions,
  };
}