@omersx/bemms 0.0.0-stage → 1.0.0

package/src/components/providers/nav-counts-provider.tsx

@@ -0,0 +1,235 @@
+'use client';
+
+import * as React from 'react';
+import { getNavBadgeCounts, type NavBadgeCounts } from '@/lib/actions/nav-counts';
+import { type NavBadgeConfig } from '@/components/layout/nav-badge';
+
+export interface NavCountsContextValue {
+  counts: NavBadgeCounts;
+  isLoading: boolean;
+  refreshCounts: () => Promise<void>;
+  /**
+   * Helper to resolve a complete NavBadgeConfig from a key and/or custom config.
+   */
+  resolveBadge: (
+    badgeKey?: string,
+    customConfig?: Partial<NavBadgeConfig>,
+    options?: { isCollapsed?: boolean }
+  ) => NavBadgeConfig | null;
+}
+
+const defaultCounts: NavBadgeCounts = {
+  notifications: 0,
+  triage: 0,
+  tickets: 0,
+  maintenance: 0,
+  workOrders: 0,
+  pmPlans: 0,
+  hasMaintenanceDue: false,
+};
+
+const NavCountsContext = React.createContext<NavCountsContextValue>({
+  counts: defaultCounts,
+  isLoading: false,
+  refreshCounts: async () => {},
+  resolveBadge: () => null,
+});
+
+export function NavCountsProvider({
+  children,
+  initialCounts,
+}: {
+  children: React.ReactNode;
+  initialCounts?: NavBadgeCounts;
+}) {
+  const [counts, setCounts] = React.useState<NavBadgeCounts>(initialCounts || defaultCounts);
+  const [isLoading, setIsLoading] = React.useState(false);
+
+  const refreshCounts = React.useCallback(async () => {
+    try {
+      setIsLoading(true);
+      const newCounts = await getNavBadgeCounts();
+      setCounts(newCounts);
+    } catch (err) {
+      console.error('[NavCountsProvider] Failed to refresh badge counts:', err);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+
+  // Initial fetch and automatic refresh hooks
+  React.useEffect(() => {
+    refreshCounts();
+
+    // 1. Listen for global notification events from SSE or Service Worker
+    const handleNotificationEvent = () => {
+      refreshCounts();
+    };
+
+    window.addEventListener('bemms:notification', handleNotificationEvent);
+
+    // 2. Refresh on window focus / visibilitychange
+    const handleVisibility = () => {
+      if (!document.hidden) {
+        refreshCounts();
+      }
+    };
+    document.addEventListener('visibilitychange', handleVisibility);
+
+    // 3. Periodic polling every 30 seconds
+    const interval = setInterval(() => {
+      if (!document.hidden) {
+        refreshCounts();
+      }
+    }, 30000);
+
+    return () => {
+      window.removeEventListener('bemms:notification', handleNotificationEvent);
+      document.removeEventListener('visibilitychange', handleVisibility);
+      clearInterval(interval);
+    };
+  }, [refreshCounts]);
+
+  // Helper to resolve badge configuration for any navbar item
+  const resolveBadge = React.useCallback(
+    (
+      badgeKey?: string,
+      customConfig?: Partial<NavBadgeConfig>,
+      options?: { isCollapsed?: boolean }
+    ): NavBadgeConfig | null => {
+      const isCollapsed = options?.isCollapsed ?? false;
+
+      // If explicitly disabled, return null
+      if (customConfig && customConfig.enabled === false) {
+        return null;
+      }
+
+      let baseConfig: NavBadgeConfig | null = null;
+
+      switch (badgeKey) {
+        case 'notifications':
+          baseConfig = {
+            enabled: counts.notifications > 0,
+            type: 'count',
+            value: counts.notifications,
+            variant: 'primary',
+            position: isCollapsed ? 'icon-corner' : 'trailing',
+            hideWhenZero: true,
+            maxCount: 99,
+            ariaLabel: `${counts.notifications} unread notifications`,
+          };
+          break;
+
+        case 'triage':
+          baseConfig = {
+            enabled: counts.triage > 0,
+            type: 'count',
+            value: counts.triage,
+            variant: 'danger',
+            position: isCollapsed ? 'icon-corner' : 'trailing',
+            hideWhenZero: true,
+            maxCount: 99,
+            pulse: counts.triage > 0,
+            ariaLabel: `${counts.triage} tickets pending triage`,
+          };
+          break;
+
+        case 'tickets':
+          baseConfig = {
+            enabled: counts.tickets > 0,
+            type: 'count',
+            value: counts.tickets,
+            variant: 'secondary',
+            position: isCollapsed ? 'icon-corner' : 'trailing',
+            hideWhenZero: true,
+            maxCount: 99,
+            ariaLabel: `${counts.tickets} active tickets`,
+          };
+          break;
+
+        case 'maintenance':
+          baseConfig = {
+            enabled: counts.hasMaintenanceDue,
+            type: 'dot',
+            variant: counts.pmPlans > 0 ? 'warning' : 'default',
+            position: isCollapsed ? 'icon-corner' : 'trailing',
+            pulse: counts.pmPlans > 0,
+            ariaLabel: 'Maintenance items due or scheduled',
+          };
+          break;
+
+        case 'workOrders':
+          baseConfig = {
+            enabled: counts.workOrders > 0,
+            type: 'count',
+            value: counts.workOrders,
+            variant: 'secondary',
+            position: isCollapsed ? 'icon-corner' : 'trailing',
+            hideWhenZero: true,
+            maxCount: 99,
+            ariaLabel: `${counts.workOrders} active work orders`,
+          };
+          break;
+
+        case 'pmPlans':
+          baseConfig = {
+            enabled: counts.pmPlans > 0,
+            type: counts.pmPlans > 0 ? 'count' : 'dot',
+            value: counts.pmPlans,
+            variant: 'warning',
+            position: isCollapsed ? 'icon-corner' : 'trailing',
+            hideWhenZero: true,
+            maxCount: 99,
+            ariaLabel: `${counts.pmPlans} preventive maintenance items due`,
+          };
+          break;
+
+        default:
+          if (!customConfig) return null;
+          baseConfig = {
+            enabled: true,
+            type: customConfig.type || 'count',
+            value: customConfig.value,
+            variant: customConfig.variant || 'default',
+            position: isCollapsed ? 'icon-corner' : (customConfig.position || 'trailing'),
+            hideWhenZero: customConfig.hideWhenZero ?? true,
+            maxCount: customConfig.maxCount ?? 99,
+          };
+          break;
+      }
+
+      if (!baseConfig && !customConfig) return null;
+
+      // Merge customConfig over baseConfig
+      const finalConfig: NavBadgeConfig = {
+        ...(baseConfig || {}),
+        ...(customConfig || {}),
+        position: isCollapsed ? 'icon-corner' : (customConfig?.position || baseConfig?.position || 'trailing'),
+      };
+
+      return finalConfig;
+    },
+    [counts]
+  );
+
+  return (
+    <NavCountsContext.Provider
+      value={{
+        counts,
+        isLoading,
+        refreshCounts,
+        resolveBadge,
+      }}
+    >
+      {children}
+    </NavCountsContext.Provider>
+  );
+}
+
+export function useNavCounts() {
+  const context = React.useContext(NavCountsContext);
+  if (!context) {
+    throw new Error('useNavCounts must be used within a NavCountsProvider');
+  }
+  return context;
+}

package/src/components/providers/session-provider.tsx

@@ -0,0 +1,7 @@
+'use client'
+
+import { SessionProvider } from 'next-auth/react'
+
+export default function AuthProvider({ children }: { children: React.ReactNode }) {
+  return <SessionProvider>{children}</SessionProvider>
+}

package/src/components/providers/theme-provider.tsx

@@ -0,0 +1,124 @@
+'use client'
+
+import * as React from 'react'
+
+export type Theme = 'light' | 'dark' | 'system'
+
+interface ThemeContextType {
+  theme: Theme
+  setTheme: (theme: Theme) => void
+  resolvedTheme: 'light' | 'dark'
+  systemTheme: 'light' | 'dark'
+}
+
+const ThemeContext = React.createContext<ThemeContextType | undefined>(undefined)
+
+const STORAGE_KEY = 'bemms-theme'
+
+function getSystemTheme(): 'light' | 'dark' {
+  if (typeof window === 'undefined') return 'light'
+  return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
+}
+
+interface ThemeProviderProps {
+  children: React.ReactNode
+  defaultTheme?: Theme
+  storageKey?: string
+  attribute?: string
+  enableSystem?: boolean
+  disableTransitionOnChange?: boolean
+}
+
+export function ThemeProvider({
+  children,
+  defaultTheme = 'system',
+  storageKey = STORAGE_KEY,
+}: ThemeProviderProps) {
+  const [theme, setThemeState] = React.useState<Theme>(defaultTheme)
+  const [systemTheme, setSystemTheme] = React.useState<'light' | 'dark'>('light')
+  const [mounted, setMounted] = React.useState(false)
+
+  // Initialize theme from storage
+  React.useEffect(() => {
+    try {
+      const stored = localStorage.getItem(storageKey) as Theme | null
+      if (stored === 'light' || stored === 'dark' || stored === 'system') {
+        setThemeState(stored)
+      }
+    } catch {
+      // Ignore localStorage read errors
+    }
+
+    const currentSystem = getSystemTheme()
+    setSystemTheme(currentSystem)
+    setMounted(true)
+  }, [storageKey])
+
+  // Listen to system theme changes
+  React.useEffect(() => {
+    if (typeof window === 'undefined') return
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
+
+    const handleChange = (e: MediaQueryListEvent) => {
+      setSystemTheme(e.matches ? 'dark' : 'light')
+    }
+
+    mediaQuery.addEventListener('change', handleChange)
+    return () => mediaQuery.removeEventListener('change', handleChange)
+  }, [])
+
+  const resolvedTheme: 'light' | 'dark' = theme === 'system' ? systemTheme : theme
+
+  // Apply class to documentElement
+  React.useEffect(() => {
+    if (!mounted) return
+    const root = document.documentElement
+
+    if (resolvedTheme === 'dark') {
+      root.classList.add('dark')
+    } else {
+      root.classList.remove('dark')
+    }
+  }, [resolvedTheme, mounted])
+
+  const setTheme = React.useCallback(
+    (newTheme: Theme) => {
+      setThemeState(newTheme)
+      try {
+        localStorage.setItem(storageKey, newTheme)
+      } catch {
+        // Ignore localStorage write errors
+      }
+    },
+    [storageKey]
+  )
+
+  const value = React.useMemo(
+    () => ({
+      theme,
+      setTheme,
+      resolvedTheme: mounted ? resolvedTheme : 'light',
+      systemTheme,
+    }),
+    [theme, setTheme, resolvedTheme, systemTheme, mounted]
+  )
+
+  return (
+    <ThemeContext.Provider value={value}>
+      <script
+        dangerouslySetInnerHTML={{
+          __html: `(function(){try{var t=localStorage.getItem('${storageKey}');var s=window.matchMedia('(prefers-color-scheme: dark)').matches;if(t==='dark'||(!t&&s)||(t==='system'&&s)){document.documentElement.classList.add('dark')}else{document.documentElement.classList.remove('dark')}}catch(e){}})()`,
+        }}
+      />
+      {children}
+    </ThemeContext.Provider>
+  )
+}
+
+export function useTheme(): ThemeContextType {
+  const context = React.useContext(ThemeContext)
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider')
+  }
+  return context
+}

package/src/components/pwa/install-prompt.tsx

@@ -0,0 +1,82 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Button } from '@/components/ui/button';
+import { Download, X } from 'lucide-react';
+
+interface BeforeInstallPromptEvent extends Event {
+  prompt: () => Promise<void>;
+  userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>;
+}
+
+export function InstallPrompt() {
+  const [deferredPrompt, setDeferredPrompt] = useState<BeforeInstallPromptEvent | null>(null);
+  const [showBanner, setShowBanner] = useState(false);
+  const [isInstalled, setIsInstalled] = useState(false);
+
+  useEffect(() => {
+    // Check if already installed
+    if (window.matchMedia('(display-mode: standalone)').matches) {
+      setIsInstalled(true);
+      return;
+    }
+
+    const handler = (e: Event) => {
+      e.preventDefault();
+      setDeferredPrompt(e as BeforeInstallPromptEvent);
+      // Show banner after a short delay so it doesn't interrupt initial load
+      setTimeout(() => setShowBanner(true), 3000);
+    };
+
+    window.addEventListener('beforeinstallprompt', handler);
+
+    // Listen for successful install
+    window.addEventListener('appinstalled', () => {
+      setIsInstalled(true);
+      setShowBanner(false);
+      setDeferredPrompt(null);
+    });
+
+    return () => window.removeEventListener('beforeinstallprompt', handler);
+  }, []);
+
+  const handleInstall = async () => {
+    if (!deferredPrompt) return;
+    await deferredPrompt.prompt();
+    const { outcome } = await deferredPrompt.userChoice;
+    if (outcome === 'accepted') {
+      setShowBanner(false);
+    }
+    setDeferredPrompt(null);
+  };
+
+  if (isInstalled || !showBanner) return null;
+
+  return (
+    <div className="fixed bottom-20 md:bottom-4 left-4 right-4 md:left-auto md:right-4 md:w-80 z-50 animate-in slide-in-from-bottom-4 duration-300">
+      <div className="bg-card border rounded-lg shadow-lg p-4 flex items-center gap-3">
+        <div className="bg-primary/10 p-2 rounded-lg shrink-0">
+          <Download className="h-5 w-5 text-primary" />
+        </div>
+        <div className="flex-1 min-w-0">
+          <p className="text-sm font-medium">Install BEMMS</p>
+          <p className="text-xs text-muted-foreground">Quick access from your home screen</p>
+        </div>
+        <div className="flex items-center gap-1 shrink-0">
+          <Button size="sm" onClick={handleInstall} className="min-h-[36px]">
+            Install
+          </Button>
+          <Button
+            variant="ghost"
+            size="icon"
+            onClick={() => setShowBanner(false)}
+            className="h-8 w-8"
+          >
+            <X className="h-4 w-4" />
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+

package/src/components/pwa/sw-register.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import { useEffect } from 'react';
+
+export function ServiceWorkerRegister() {
+  useEffect(() => {
+    if (typeof window === 'undefined' || !('serviceWorker' in navigator)) return;
+
+    // In development mode on localhost, unregister any service worker and clear caches
+    // to prevent stale chunk caching from breaking Webpack HMR
+    if (process.env.NODE_ENV === 'development' || window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1') {
+      navigator.serviceWorker.getRegistrations().then((registrations) => {
+        for (const registration of registrations) {
+          registration.unregister();
+        }
+      });
+      if ('caches' in window) {
+        caches.keys().then((keys) => {
+          for (const key of keys) {
+            caches.delete(key);
+          }
+        });
+      }
+      return;
+    }
+
+    navigator.serviceWorker
+      .register('/sw.js')
+      .then((registration) => {
+        console.log('[PWA] Service worker registered:', registration.scope);
+
+        // Check for updates periodically
+        setInterval(() => {
+          registration.update();
+        }, 60 * 60 * 1000); // Every hour
+      })
+      .catch((error) => {
+        console.error('[PWA] Service worker registration failed:', error);
+      });
+  }, []);
+
+  return null;
+}

package/src/components/reports/export-button.tsx

@@ -0,0 +1,62 @@
+'use client';
+
+import { Button } from '@/components/ui/button';
+import { Download } from 'lucide-react';
+import { useState } from 'react';
+
+interface ExportButtonProps {
+  reportType: string;
+  filters: Record<string, string>;
+  label?: string;
+}
+
+export function ReportExportButton({ reportType, filters, label = 'Export CSV' }: ExportButtonProps) {
+  const [loading, setLoading] = useState(false);
+
+  const handleExport = async () => {
+    setLoading(true);
+    try {
+      const params = new URLSearchParams({
+        type: reportType,
+        ...Object.fromEntries(
+          Object.entries(filters).filter(([, v]) => v && v !== 'all')
+        ),
+      });
+
+      const response = await fetch(`/api/reports/export?${params.toString()}`);
+
+      if (!response.ok) {
+        throw new Error('Export failed');
+      }
+
+      const blob = await response.blob();
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      const disposition = response.headers.get('content-disposition');
+      const filenameMatch = disposition?.match(/filename="(.+)"/);
+      a.download = filenameMatch?.[1] || `${reportType}-report.csv`;
+      a.href = url;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    } catch (error) {
+      console.error('Export error:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Button
+      onClick={handleExport}
+      disabled={loading}
+      variant="outline"
+      className="min-h-[44px] w-full sm:w-auto"
+    >
+      <Download className="h-4 w-4 mr-2" />
+      {loading ? 'Exporting...' : label}
+    </Button>
+  );
+}
+

package/src/components/reports/filter-chips.tsx

@@ -0,0 +1,47 @@
+'use client';
+
+import { useRouter, useSearchParams } from 'next/navigation';
+import { Badge } from '@/components/ui/badge';
+import { cn } from '@/lib/utils';
+
+interface FilterOption {
+  key: string;
+  label: string;
+  value: string;
+  onRemove: () => void;
+}
+
+interface ReportFilterChipsProps {
+  filters: FilterOption[];
+  onClear: () => void;
+}
+
+export function ReportFilterChips({ filters, onClear }: ReportFilterChipsProps) {
+  if (filters.length === 0) return null;
+
+  return (
+    <div className="flex items-center gap-2 overflow-x-auto pb-2 scrollbar-hide">
+      {filters.map((filter) => (
+        <Badge
+          key={filter.key}
+          variant="secondary"
+          className="shrink-0 gap-1 cursor-pointer hover:bg-destructive/10 min-h-[32px] px-3"
+          onClick={filter.onRemove}
+        >
+          <span className="text-xs text-muted-foreground">{filter.label}:</span>
+          <span className="text-xs font-medium">{filter.value}</span>
+          <span className="text-muted-foreground ml-1">×</span>
+        </Badge>
+      ))}
+      {filters.length > 1 && (
+        <button
+          onClick={onClear}
+          className="text-xs text-muted-foreground hover:text-foreground shrink-0 underline"
+        >
+          Clear all
+        </button>
+      )}
+    </div>
+  );
+}
+

package/src/components/reports/summary-cards.tsx

@@ -0,0 +1,40 @@
+import { Card, CardContent } from '@/components/ui/card';
+import { cn } from '@/lib/utils';
+import { LucideIcon } from 'lucide-react';
+
+interface SummaryItem {
+  label: string;
+  value: number | string;
+  icon?: LucideIcon;
+  color?: string;
+}
+
+interface ReportSummaryCardsProps {
+  items: SummaryItem[];
+  className?: string;
+}
+
+export function ReportSummaryCards({ items, className }: ReportSummaryCardsProps) {
+  return (
+    <div className={cn('grid gap-3 grid-cols-2 lg:grid-cols-4', className)}>
+      {items.map((item) => (
+        <Card key={item.label} className="bg-muted/20">
+          <CardContent className="p-4">
+            <div className="flex items-center justify-between">
+              <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                {item.label}
+              </p>
+              {item.icon && (
+                <item.icon className={cn('h-4 w-4', item.color || 'text-muted-foreground')} />
+              )}
+            </div>
+            <p className={cn('text-2xl font-bold mt-1', item.color)}>
+              {item.value}
+            </p>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}
+

package/src/components/reports/transparency-header.tsx

@@ -0,0 +1,54 @@
+import { Calendar, Filter, Globe } from 'lucide-react';
+
+interface TransparencyHeaderProps {
+  reportType: string;
+  dateRange?: { start?: string; end?: string };
+  timezone: string;
+  filters?: Record<string, string>;
+  generatedAt?: Date;
+}
+
+export function ReportTransparencyHeader({
+  reportType,
+  dateRange,
+  timezone,
+  filters,
+  generatedAt,
+}: TransparencyHeaderProps) {
+  const dateStr = dateRange?.start && dateRange?.end
+    ? `${new Date(dateRange.start).toLocaleDateString()} – ${new Date(dateRange.end).toLocaleDateString()}`
+    : 'All time';
+
+  const activeFilters = filters
+    ? Object.entries(filters)
+        .filter(([, v]) => v && v !== 'all')
+        .map(([k, v]) => `${k}: ${v}`)
+    : [];
+
+  return (
+    <div className="bg-muted/30 border rounded-lg px-4 py-3 text-sm space-y-1">
+      <div className="flex flex-wrap items-center gap-x-4 gap-y-1 text-muted-foreground">
+        <span className="flex items-center gap-1.5">
+          <Calendar className="h-3.5 w-3.5" />
+          {dateStr}
+        </span>
+        <span className="flex items-center gap-1.5">
+          <Globe className="h-3.5 w-3.5" />
+          {timezone}
+        </span>
+        {activeFilters.length > 0 && (
+          <span className="flex items-center gap-1.5">
+            <Filter className="h-3.5 w-3.5" />
+            {activeFilters.join(' · ')}
+          </span>
+        )}
+      </div>
+      {generatedAt && (
+        <p className="text-xs text-muted-foreground">
+          Generated: {generatedAt.toLocaleString()}
+        </p>
+      )}
+    </div>
+  );
+}
+