documentation-hub 5.7.2

package/src/components/common/ErrorDetailsDialog.tsx

@@ -0,0 +1,153 @@
+import * as React from 'react';
+import * as Dialog from '@radix-ui/react-dialog';
+import { Button } from './Button';
+import { AlertCircle, X } from 'lucide-react';
+import { cn } from '@/utils/cn';
+
+export interface ErrorDetailsDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  documentName: string;
+  errors: string[];
+  errorType?: 'file_locked' | 'api_timeout' | 'word_compatibility' | 'general';
+  processedAt?: Date;
+}
+
+export function ErrorDetailsDialog({
+  open,
+  onOpenChange,
+  documentName,
+  errors,
+  errorType,
+  processedAt,
+}: ErrorDetailsDialogProps) {
+  return (
+    <Dialog.Root open={open} onOpenChange={onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay className="fixed inset-0 bg-black/50 backdrop-blur-xs data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 z-50" />
+        <Dialog.Content
+          className={cn(
+            'fixed left-[50%] top-[50%] z-50 translate-x-[-50%] translate-y-[-50%]',
+            'w-full max-w-lg rounded-lg border border-border bg-card p-6 shadow-lg',
+            'data-[state=open]:animate-in data-[state=closed]:animate-out',
+            'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+            'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+            'data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%]',
+            'data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]'
+          )}
+        >
+          {/* Header */}
+          <div className="flex items-start justify-between mb-4">
+            <div className="flex items-center gap-2">
+              <AlertCircle className="w-5 h-5 text-red-500" />
+              <Dialog.Title className="text-lg font-semibold text-foreground">
+                Processing Error
+              </Dialog.Title>
+            </div>
+            <Dialog.Close className="rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
+              <X className="h-4 w-4" />
+              <span className="sr-only">Close</span>
+            </Dialog.Close>
+          </div>
+
+          {/* Document Info */}
+          <div className="mb-4">
+            <p className="font-medium text-foreground">{documentName}</p>
+            {processedAt && (
+              <p className="text-xs text-muted-foreground mt-1">
+                {new Date(processedAt).toLocaleString()}
+              </p>
+            )}
+          </div>
+
+          {/* Error Type Badge */}
+          <div className="mb-4">
+            {errorType === 'file_locked' ? (
+              <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400">
+                File Locked
+              </span>
+            ) : errorType === 'api_timeout' ? (
+              <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800 dark:bg-orange-900/30 dark:text-orange-400">
+                API Timeout
+              </span>
+            ) : errorType === 'word_compatibility' ? (
+              <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900/30 dark:text-purple-400">
+                Compatibility Mode
+              </span>
+            ) : (
+              <span className="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400">
+                Error
+              </span>
+            )}
+          </div>
+
+          {/* Error Messages */}
+          <div className="mb-4">
+            <p className="text-sm font-medium text-foreground mb-2">Error Details:</p>
+            <div className="max-h-48 overflow-y-auto rounded-md bg-muted/50 p-3 space-y-2">
+              {errors.length > 0 ? (
+                errors.map((error, index) => (
+                  <p key={index} className="text-sm text-red-600 dark:text-red-400">
+                    {error}
+                  </p>
+                ))
+              ) : (
+                <p className="text-sm text-muted-foreground">No error details available.</p>
+              )}
+            </div>
+          </div>
+
+          {/* Helpful Tip for File Locked */}
+          {errorType === 'file_locked' && (
+            <div className="mb-4 p-3 rounded-md bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800">
+              <p className="text-sm text-yellow-800 dark:text-yellow-200">
+                <strong>Tip:</strong> Please close the document in Microsoft Word and try processing again.
+              </p>
+            </div>
+          )}
+
+          {/* Helpful Tip for API Timeout */}
+          {errorType === 'api_timeout' && (
+            <div className="mb-4 p-3 rounded-md bg-orange-50 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800">
+              <p className="text-sm text-orange-800 dark:text-orange-200">
+                <strong>Tip:</strong> The Power Automate service timed out. Please wait a moment and try again.
+              </p>
+            </div>
+          )}
+
+          {/* Helpful Tip for Word Compatibility Mode */}
+          {errorType === 'word_compatibility' && (
+            <div className="mb-4 p-3 rounded-md bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800">
+              <p className="text-sm text-purple-800 dark:text-purple-200 mb-2">
+                <strong>How to Convert Your Document:</strong>
+              </p>
+              <p className="text-sm text-purple-700 dark:text-purple-300 mb-2">
+                It appears the Word document you are trying to process was using outdated functions
+                from an old Word version. Please convert the file by following these steps:
+              </p>
+              <ol className="text-sm text-purple-700 dark:text-purple-300 list-decimal list-inside space-y-1">
+                <li>Open the document in Microsoft Word</li>
+                <li>Click on the word <strong>&quot;Compatibility&quot;</strong> in the Title Bar</li>
+                <li>Click <strong>&quot;Convert&quot;</strong></li>
+                <li>Save and close the document</li>
+                <li>Return here and click <strong>Retry</strong></li>
+              </ol>
+              <p className="text-xs text-purple-600 dark:text-purple-400 mt-3 italic">
+                Be cautious: Even Word&apos;s own conversion methods aren&apos;t always accurate, so some
+                odd formatting may occur as a result. Thoroughly compare the original to the
+                processed file to ensure everything aligns with our Documentation Standards.
+              </p>
+            </div>
+          )}
+
+          {/* Actions */}
+          <div className="flex justify-end">
+            <Button variant="outline" onClick={() => onOpenChange(false)}>
+              Close
+            </Button>
+          </div>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}

package/src/components/common/ErrorFallback.tsx

@@ -0,0 +1,218 @@
+/**
+ * Error Fallback UI Component
+ *
+ * Displays when an error is caught by the ErrorBoundary.
+ * Provides error details and recovery options.
+ */
+
+import React, { ErrorInfo } from 'react';
+import { AlertTriangle, RefreshCw, Home, Bug } from 'lucide-react';
+import { Button } from './Button';
+import logger from '@/utils/logger';
+
+interface ErrorFallbackProps {
+  error: Error | null;
+  errorInfo: ErrorInfo | null;
+  onReset?: () => void;
+}
+
+export function ErrorFallback({ error, errorInfo, onReset }: ErrorFallbackProps) {
+  const handleReload = () => {
+    window.location.reload();
+  };
+
+  const handleGoHome = () => {
+    // HASH ROUTER FIX: Use hash-based navigation for Electron app
+    // window.location.href = '/' doesn't work with createHashRouter
+    window.location.hash = '#/';
+    window.location.reload();
+  };
+
+  const handleReportBug = () => {
+    // In production, this could open a bug report dialog or navigate to a support page
+    const errorDetails = {
+      error: error?.toString(),
+      stack: error?.stack,
+      componentStack: errorInfo?.componentStack,
+    };
+
+    logger.debug('Bug Report Details:', errorDetails);
+    // You could integrate with your bug tracking system here
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background p-4">
+      <div className="w-full max-w-2xl rounded-lg border border-destructive/20 bg-card p-8 shadow-lg">
+        {/* Header */}
+        <div className="mb-6 flex items-start gap-4">
+          <div className="rounded-full bg-destructive/10 p-3">
+            <AlertTriangle className="h-8 w-8 text-destructive" />
+          </div>
+          <div className="flex-1">
+            <h1 className="text-2xl font-bold text-foreground">Oops! Something went wrong</h1>
+            <p className="mt-2 text-muted-foreground">
+              The application encountered an unexpected error. Don't worry, your data is safe.
+            </p>
+          </div>
+        </div>
+
+        {/* Error Details (collapsible) */}
+        {error && (
+          <details className="mb-6 rounded-md border border-border bg-muted/30 p-4">
+            <summary className="cursor-pointer font-medium text-foreground">Error Details</summary>
+            <div className="mt-3 space-y-2">
+              <div className="rounded bg-destructive/5 p-3">
+                <p className="text-sm font-mono text-destructive">{error.toString()}</p>
+              </div>
+              {error.stack && (
+                <div className="max-h-48 overflow-y-auto rounded bg-muted p-3">
+                  <pre className="text-xs text-muted-foreground">{error.stack}</pre>
+                </div>
+              )}
+              {errorInfo?.componentStack && (
+                <div className="max-h-48 overflow-y-auto rounded bg-muted p-3">
+                  <p className="mb-2 text-xs font-semibold text-foreground">Component Stack:</p>
+                  <pre className="text-xs text-muted-foreground">{errorInfo.componentStack}</pre>
+                </div>
+              )}
+            </div>
+          </details>
+        )}
+
+        {/* Recovery Actions */}
+        <div className="space-y-3">
+          <p className="text-sm text-muted-foreground">What would you like to do?</p>
+
+          <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+            {onReset && (
+              <Button onClick={onReset} variant="outline" className="w-full">
+                <RefreshCw className="mr-2 h-4 w-4" />
+                Try Again
+              </Button>
+            )}
+
+            <Button onClick={handleReload} variant="default" className="w-full">
+              <RefreshCw className="mr-2 h-4 w-4" />
+              Reload Application
+            </Button>
+
+            <Button onClick={handleGoHome} variant="outline" className="w-full">
+              <Home className="mr-2 h-4 w-4" />
+              Go to Dashboard
+            </Button>
+
+            <Button onClick={handleReportBug} variant="outline" className="w-full">
+              <Bug className="mr-2 h-4 w-4" />
+              Report Issue
+            </Button>
+          </div>
+        </div>
+
+        {/* Additional Help */}
+        <div className="mt-6 rounded-md bg-muted/50 p-4">
+          <p className="text-sm text-muted-foreground">
+            <strong>Tip:</strong> If this error persists, try restarting the application or clearing
+            your browser cache. Your session data is automatically saved.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Context-specific Error Fallback
+ *
+ * A simplified error fallback for context provider errors.
+ * Shows which context failed and provides recovery options.
+ */
+interface ContextErrorFallbackProps {
+  context: 'theme' | 'settings' | 'stats' | 'session';
+  error?: Error | null;
+}
+
+const contextInfo: Record<string, { name: string; description: string }> = {
+  theme: {
+    name: 'Theme System',
+    description: 'Unable to load theme settings. The application will use default styling.',
+  },
+  settings: {
+    name: 'User Settings',
+    description: 'Unable to load your preferences. Default settings will be used.',
+  },
+  stats: {
+    name: 'Statistics',
+    description: 'Unable to load statistics data. Your session data is still safe.',
+  },
+  session: {
+    name: 'Session Manager',
+    description: 'Unable to load session data. Please try reloading the application.',
+  },
+};
+
+export function ContextErrorFallback({ context, error }: ContextErrorFallbackProps) {
+  const info = contextInfo[context] || { name: 'Unknown', description: 'An error occurred.' };
+
+  const handleReload = () => {
+    window.location.reload();
+  };
+
+  const handleClearAndReload = () => {
+    // Clear potentially corrupted data for this context
+    if (context === 'theme') {
+      localStorage.removeItem('theme');
+      localStorage.removeItem('density');
+      localStorage.removeItem('accentColor');
+    } else if (context === 'settings') {
+      localStorage.removeItem('userSettings');
+    } else if (context === 'stats') {
+      // Stats are in IndexedDB, just reload
+    } else if (context === 'session') {
+      localStorage.removeItem('sessions-emergency-backup');
+    }
+    window.location.reload();
+  };
+
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-gray-100 dark:bg-gray-900 p-4">
+      <div className="w-full max-w-md rounded-lg border border-red-200 dark:border-red-800 bg-white dark:bg-gray-800 p-6 shadow-lg">
+        <div className="flex items-center gap-3 mb-4">
+          <AlertTriangle className="h-6 w-6 text-red-500" />
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+            {info.name} Error
+          </h2>
+        </div>
+
+        <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">{info.description}</p>
+
+        {error && (
+          <details className="mb-4 rounded border border-gray-200 dark:border-gray-700 p-2">
+            <summary className="cursor-pointer text-sm text-gray-500 dark:text-gray-400">
+              Technical Details
+            </summary>
+            <pre className="mt-2 text-xs text-red-600 dark:text-red-400 overflow-auto max-h-32">
+              {error.message}
+            </pre>
+          </details>
+        )}
+
+        <div className="flex gap-2">
+          <button
+            onClick={handleReload}
+            className="flex-1 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 text-sm font-medium"
+          >
+            Reload App
+          </button>
+          <button
+            onClick={handleClearAndReload}
+            className="flex-1 px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-600 text-sm font-medium"
+          >
+            Reset & Reload
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ErrorFallback;

package/src/components/common/Input.tsx

@@ -0,0 +1,109 @@
+import { forwardRef, useId, useState } from 'react';
+import { cn } from '@/utils/cn';
+import { Eye, EyeOff, Search, X } from 'lucide-react';
+
+export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+  label?: string;
+  error?: string;
+  helperText?: string;
+  leftIcon?: React.ReactNode;
+  rightIcon?: React.ReactNode;
+  onClear?: () => void;
+}
+
+const Input = forwardRef<HTMLInputElement, InputProps>(
+  (
+    { className, type = 'text', label, error, helperText, leftIcon, rightIcon, onClear, id, ...props },
+    ref
+  ) => {
+    const [showPassword, setShowPassword] = useState(false);
+    const generatedId = useId();
+    const inputId = id || generatedId;
+    const isPassword = type === 'password';
+    const isSearch = type === 'search';
+
+    return (
+      <div className="w-full">
+        {label && (
+          <label htmlFor={inputId} className="block text-sm font-medium text-foreground mb-1.5">
+            {label}
+            {props.required && <span className="text-destructive ml-1">*</span>}
+          </label>
+        )}
+
+        <div className="relative">
+          {leftIcon && (
+            <div className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">
+              {leftIcon}
+            </div>
+          )}
+
+          {isSearch && (
+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
+          )}
+
+          <input
+            id={inputId}
+            type={isPassword && showPassword ? 'text' : type}
+            className={cn(
+              'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm',
+              'ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium',
+              'placeholder:text-muted-foreground',
+              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
+              'disabled:cursor-not-allowed disabled:opacity-50',
+              'transition-colors duration-200',
+              error && 'border-destructive focus-visible:ring-destructive',
+              (leftIcon || isSearch) && 'pl-10',
+              (rightIcon || isPassword || (onClear && props.value)) && 'pr-10',
+              className
+            )}
+            ref={ref}
+            {...props}
+          />
+
+          {isPassword && (
+            <button
+              type="button"
+              onClick={() => setShowPassword(!showPassword)}
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
+              tabIndex={-1}
+            >
+              {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
+            </button>
+          )}
+
+          {onClear && props.value && !isPassword && (
+            <button
+              type="button"
+              onClick={onClear}
+              className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
+              tabIndex={-1}
+            >
+              <X className="w-4 h-4" />
+            </button>
+          )}
+
+          {rightIcon && !isPassword && !onClear && (
+            <div className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground">
+              {rightIcon}
+            </div>
+          )}
+        </div>
+
+        {error && (
+          <p className="mt-1.5 text-sm text-destructive" role="alert">
+            {error}
+          </p>
+        )}
+
+        {helperText && !error && (
+          <p className="mt-1.5 text-sm text-muted-foreground">{helperText}</p>
+        )}
+      </div>
+    );
+  }
+);
+
+Input.displayName = 'Input';
+
+export { Input };

package/src/components/common/Skeleton.tsx

@@ -0,0 +1,184 @@
+import { cn } from '@/utils/cn';
+
+interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
+  variant?: 'default' | 'circle' | 'text' | 'card';
+}
+
+export function Skeleton({ className, variant = 'default', ...props }: SkeletonProps) {
+  const variants = {
+    default: '',
+    circle: 'rounded-full',
+    text: 'h-4 rounded',
+    card: 'h-32 rounded-lg',
+  };
+
+  return (
+    <div
+      className={cn('skeleton', 'bg-muted animate-pulse', variants[variant], className)}
+      {...props}
+    />
+  );
+}
+
+export function SkeletonCard() {
+  return (
+    <div className="rounded-lg border border-border p-6 space-y-4">
+      <div className="space-y-2">
+        <Skeleton variant="text" className="w-3/4" />
+        <Skeleton variant="text" className="w-1/2" />
+      </div>
+      <Skeleton className="h-20" />
+      <div className="flex gap-2">
+        <Skeleton className="h-9 w-20" />
+        <Skeleton className="h-9 w-20" />
+      </div>
+    </div>
+  );
+}
+
+export function SkeletonList({ count = 3 }: { count?: number }) {
+  return (
+    <div className="space-y-3">
+      {Array.from({ length: count }).map((_, i) => (
+        <div key={i} className="flex items-center gap-3">
+          <Skeleton variant="circle" className="w-10 h-10" />
+          <div className="space-y-2 flex-1">
+            <Skeleton variant="text" className="w-1/3" />
+            <Skeleton variant="text" className="w-2/3" />
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+// Document row skeleton for document lists
+export function SkeletonDocumentRow() {
+  return (
+    <div className="flex items-center justify-between p-3 rounded-lg border border-border">
+      <div className="flex items-center gap-3">
+        <Skeleton className="w-8 h-8 rounded" />
+        <div className="space-y-1.5">
+          <Skeleton variant="text" className="w-40" />
+          <Skeleton variant="text" className="w-24 h-3" />
+        </div>
+      </div>
+      <div className="flex items-center gap-2">
+        <Skeleton className="w-16 h-6 rounded-full" />
+        <Skeleton className="w-8 h-8 rounded" />
+      </div>
+    </div>
+  );
+}
+
+// Session card skeleton
+export function SkeletonSessionCard() {
+  return (
+    <div className="rounded-xl border border-border p-5 space-y-4">
+      <div className="flex items-start justify-between">
+        <div className="space-y-2 flex-1">
+          <Skeleton variant="text" className="w-2/3 h-5" />
+          <Skeleton variant="text" className="w-1/3 h-3" />
+        </div>
+        <Skeleton className="w-20 h-6 rounded-full" />
+      </div>
+      <div className="grid grid-cols-3 gap-3">
+        <Skeleton className="h-16 rounded-lg" />
+        <Skeleton className="h-16 rounded-lg" />
+        <Skeleton className="h-16 rounded-lg" />
+      </div>
+      <div className="flex gap-2">
+        <Skeleton className="h-9 flex-1 rounded-lg" />
+        <Skeleton className="h-9 w-9 rounded-lg" />
+      </div>
+    </div>
+  );
+}
+
+// Chart skeleton for analytics
+export function SkeletonChart({ height = 200 }: { height?: number }) {
+  return (
+    <div className="rounded-xl border border-border p-5 space-y-4">
+      <div className="flex items-center justify-between">
+        <Skeleton variant="text" className="w-32 h-5" />
+        <Skeleton className="w-24 h-8 rounded-lg" />
+      </div>
+      <div
+        className="relative bg-muted/30 rounded-lg overflow-hidden"
+        style={{ height }}
+      >
+        {/* Fake bar chart skeleton */}
+        <div className="absolute bottom-0 left-0 right-0 flex items-end justify-around gap-2 p-4">
+          {[60, 80, 45, 90, 70, 55, 85].map((h, i) => (
+            <Skeleton
+              key={i}
+              className="flex-1 rounded-t"
+              style={{ height: `${h}%` }}
+            />
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+// Settings section skeleton
+export function SkeletonSettingsSection() {
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center gap-3 mb-6">
+        <Skeleton className="w-10 h-10 rounded-lg" />
+        <div className="space-y-1.5">
+          <Skeleton variant="text" className="w-32 h-5" />
+          <Skeleton variant="text" className="w-48 h-3" />
+        </div>
+      </div>
+      <div className="space-y-3">
+        {Array.from({ length: 4 }).map((_, i) => (
+          <div key={i} className="flex items-center justify-between py-3">
+            <div className="flex items-center gap-3">
+              <Skeleton className="w-8 h-8 rounded-lg" />
+              <div className="space-y-1.5">
+                <Skeleton variant="text" className="w-28" />
+                <Skeleton variant="text" className="w-40 h-3" />
+              </div>
+            </div>
+            <Skeleton className="w-10 h-5 rounded-full" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// Table skeleton
+export function SkeletonTable({ rows = 5, columns = 4 }: { rows?: number; columns?: number }) {
+  return (
+    <div className="rounded-lg border border-border overflow-hidden">
+      {/* Header */}
+      <div className="bg-muted/50 px-4 py-3 flex gap-4">
+        {Array.from({ length: columns }).map((_, i) => (
+          <Skeleton key={i} variant="text" className="flex-1 h-4" />
+        ))}
+      </div>
+      {/* Rows */}
+      <div className="divide-y divide-border">
+        {Array.from({ length: rows }).map((_, rowIndex) => (
+          <div key={rowIndex} className="px-4 py-3 flex gap-4 items-center">
+            {Array.from({ length: columns }).map((_, colIndex) => (
+              <Skeleton
+                key={colIndex}
+                variant="text"
+                className={cn(
+                  'flex-1',
+                  colIndex === 0 && 'w-1/4',
+                  colIndex === columns - 1 && 'w-20'
+                )}
+              />
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}