documentation-hub 5.7.2

package/src/components/document/ProcessingProgress.tsx

@@ -0,0 +1,303 @@
+import { cn } from '@/utils/cn';
+import { motion } from 'framer-motion';
+import {
+  Activity,
+  AlertCircle,
+  CheckCircle,
+  Clock,
+  Database,
+  FileText,
+  Link,
+  Shield,
+} from 'lucide-react';
+import { useEffect, useState } from 'react';
+
+interface ProcessingStep {
+  id: string;
+  name: string;
+  description: string;
+  status: 'pending' | 'processing' | 'completed' | 'error' | 'skipped';
+  progress?: number;
+  duration?: number;
+  error?: string;
+  icon: React.ReactNode;
+}
+
+interface ProcessingProgressProps {
+  documentName: string;
+  currentStep?: string;
+  progress: number;
+  steps?: ProcessingStep[];
+  statistics?: {
+    totalElements: number;
+    processedElements: number;
+    modifiedElements: number;
+    hyperlinksProcessed?: number;
+    errors?: number;
+    warnings?: number;
+  };
+  estimatedTimeRemaining?: number;
+  onCancel?: () => void;
+  className?: string;
+}
+
+const defaultSteps: ProcessingStep[] = [
+  {
+    id: 'backup',
+    name: 'Creating Backup',
+    description: 'Saving original document',
+    status: 'pending',
+    icon: <Database className="w-4 h-4" />,
+  },
+  {
+    id: 'validation',
+    name: 'Validating Document',
+    description: 'Checking document structure',
+    status: 'pending',
+    icon: <Shield className="w-4 h-4" />,
+  },
+  {
+    id: 'scanning',
+    name: 'Scanning Hyperlinks',
+    description: 'Finding all hyperlinks',
+    status: 'pending',
+    icon: <Activity className="w-4 h-4" />,
+  },
+  {
+    id: 'processing',
+    name: 'Processing Hyperlinks',
+    description: 'Applying modifications',
+    status: 'pending',
+    icon: <Link className="w-4 h-4" />,
+  },
+  {
+    id: 'saving',
+    name: 'Saving Document',
+    description: 'Writing changes to file',
+    status: 'pending',
+    icon: <FileText className="w-4 h-4" />,
+  },
+];
+
+export function ProcessingProgress({
+  documentName,
+  currentStep,
+  progress,
+  steps = defaultSteps,
+  statistics,
+  estimatedTimeRemaining,
+  onCancel,
+  className,
+}: ProcessingProgressProps) {
+  const [animatedProgress, setAnimatedProgress] = useState(0);
+  const [elapsedTime, setElapsedTime] = useState(0);
+
+  useEffect(() => {
+    setAnimatedProgress(progress);
+  }, [progress]);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setElapsedTime((prev) => prev + 1);
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  const formatTime = (seconds: number): string => {
+    if (seconds < 60) return `${seconds}s`;
+    const minutes = Math.floor(seconds / 60);
+    const remainingSeconds = seconds % 60;
+    return `${minutes}m ${remainingSeconds}s`;
+  };
+
+  const getStepStatus = (step: ProcessingStep) => {
+    if (currentStep === step.id) return 'processing';
+    const currentIndex = steps.findIndex((s) => s.id === currentStep);
+    const stepIndex = steps.findIndex((s) => s.id === step.id);
+    if (currentIndex > stepIndex) return 'completed';
+    return step.status;
+  };
+
+  const getStepIcon = (status: ProcessingStep['status']) => {
+    switch (status) {
+      case 'completed':
+        return <CheckCircle className="w-5 h-5 text-green-500" />;
+      case 'error':
+        return <AlertCircle className="w-5 h-5 text-red-500" />;
+      case 'processing':
+        return (
+          <motion.div
+            animate={{ rotate: 360 }}
+            transition={{ duration: 2, repeat: Infinity, ease: 'linear' }}
+            className="w-5 h-5 border-2 border-primary border-t-transparent rounded-full"
+          />
+        );
+      case 'skipped':
+        return <div className="w-5 h-5 rounded-full bg-muted" />;
+      default:
+        return <Clock className="w-5 h-5 text-muted-foreground" />;
+    }
+  };
+
+  return (
+    <div className={cn('space-y-6', className)}>
+      {/* Header */}
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <div>
+            <h3 className="font-semibold text-lg">Processing Document</h3>
+            <p className="text-sm text-muted-foreground truncate max-w-md">{documentName}</p>
+          </div>
+          {onCancel && (
+            <button
+              onClick={onCancel}
+              className="px-3 py-1 text-sm border border-border rounded-lg hover:bg-destructive/10 hover:border-destructive transition-colors"
+            >
+              Cancel
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Main Progress Bar */}
+      <div className="space-y-2">
+        <div className="flex justify-between text-sm">
+          <span className="text-muted-foreground">Overall Progress</span>
+          <span className="font-medium">{Math.round(animatedProgress)}%</span>
+        </div>
+        <div className="relative h-3 bg-muted rounded-full overflow-hidden">
+          <motion.div
+            className="absolute inset-y-0 left-0 bg-linear-to-r from-primary via-primary to-primary/80"
+            initial={{ width: '0%' }}
+            animate={{ width: `${animatedProgress}%` }}
+            transition={{ duration: 0.5, ease: 'easeOut' }}
+          >
+            {/* Shimmer effect */}
+            <motion.div
+              className="absolute inset-0 bg-linear-to-r from-transparent via-white/20 to-transparent"
+              animate={{ x: ['0%', '200%'] }}
+              transition={{ duration: 1.5, repeat: Infinity, ease: 'linear' }}
+            />
+          </motion.div>
+        </div>
+      </div>
+
+      {/* Processing Steps */}
+      <div className="space-y-3">
+        {steps.map((step, index) => {
+          const status = getStepStatus(step);
+          const isActive = currentStep === step.id;
+
+          return (
+            <motion.div
+              key={step.id}
+              initial={{ opacity: 0, x: -20 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ delay: index * 0.1 }}
+              className={cn(
+                'flex items-start gap-3 p-3 rounded-lg transition-all',
+                isActive && 'bg-primary/5 border border-primary/20',
+                status === 'completed' && 'opacity-70',
+                status === 'error' && 'bg-destructive/5 border border-destructive/20'
+              )}
+            >
+              <div className="mt-0.5">{getStepIcon(status)}</div>
+
+              <div className="flex-1 space-y-1">
+                <div className="flex items-center gap-2">
+                  <span className="font-medium">{step.name}</span>
+                  {isActive && (
+                    <motion.span
+                      initial={{ opacity: 0 }}
+                      animate={{ opacity: [0.5, 1, 0.5] }}
+                      transition={{ duration: 2, repeat: Infinity }}
+                      className="text-xs text-primary px-2 py-0.5 bg-primary/10 rounded-full"
+                    >
+                      Processing...
+                    </motion.span>
+                  )}
+                </div>
+                <p className="text-sm text-muted-foreground">{step.description}</p>
+                {step.error && <p className="text-sm text-destructive">{step.error}</p>}
+                {isActive && step.progress !== undefined && (
+                  <div className="mt-2">
+                    <div className="h-1 bg-muted rounded-full overflow-hidden">
+                      <motion.div
+                        className="h-full bg-primary"
+                        initial={{ width: '0%' }}
+                        animate={{ width: `${step.progress}%` }}
+                        transition={{ duration: 0.3 }}
+                      />
+                    </div>
+                  </div>
+                )}
+              </div>
+
+              <div className="flex items-center gap-2 text-muted-foreground">
+                {step.icon}
+                {status === 'completed' && step.duration && (
+                  <span className="text-xs">{formatTime(step.duration)}</span>
+                )}
+              </div>
+            </motion.div>
+          );
+        })}
+      </div>
+
+      {/* Statistics */}
+      {statistics && (
+        <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+          <div className="text-center p-3 bg-muted/30 rounded-lg">
+            <p className="text-lg font-bold">{statistics.totalElements}</p>
+            <p className="text-xs text-muted-foreground">Total Elements</p>
+          </div>
+          <div className="text-center p-3 bg-muted/30 rounded-lg">
+            <p className="text-lg font-bold text-primary">{statistics.processedElements}</p>
+            <p className="text-xs text-muted-foreground">Processed</p>
+          </div>
+          <div className="text-center p-3 bg-muted/30 rounded-lg">
+            <p className="text-lg font-bold text-green-500">{statistics.modifiedElements}</p>
+            <p className="text-xs text-muted-foreground">Modified</p>
+          </div>
+          <div className="text-center p-3 bg-muted/30 rounded-lg">
+            <p className="text-lg font-bold text-blue-500">{statistics.hyperlinksProcessed || 0}</p>
+            <p className="text-xs text-muted-foreground">Hyperlinks</p>
+          </div>
+        </div>
+      )}
+
+      {/* Time Information */}
+      <div className="flex justify-between items-center text-sm text-muted-foreground">
+        <div className="flex items-center gap-4">
+          <span>Elapsed: {formatTime(elapsedTime)}</span>
+          {estimatedTimeRemaining !== undefined && (
+            <span>Remaining: ~{formatTime(estimatedTimeRemaining)}</span>
+          )}
+        </div>
+        {statistics?.warnings !== undefined && statistics.warnings > 0 && (
+          <span className="text-yellow-500">
+            {statistics.warnings} warning{statistics.warnings !== 1 ? 's' : ''}
+          </span>
+        )}
+      </div>
+
+      {/* Animated background effect */}
+      <div className="absolute inset-0 pointer-events-none overflow-hidden rounded-lg">
+        <motion.div
+          className="absolute -inset-40 opacity-5"
+          animate={{
+            rotate: [0, 360],
+          }}
+          transition={{
+            duration: 20,
+            repeat: Infinity,
+            ease: 'linear',
+          }}
+        >
+          <div className="w-full h-full bg-linear-to-r from-primary to-transparent" />
+        </motion.div>
+      </div>
+    </div>
+  );
+}

package/src/components/document/ProcessingResults.tsx

@@ -0,0 +1,256 @@
+import { Button } from '@/components/common/Button';
+import type { Document, DocumentChange } from '@/types/session';
+import { cn } from '@/utils/cn';
+import { motion } from 'framer-motion';
+import {
+  AlertCircle,
+  Archive,
+  ArrowRight,
+  CheckCircle,
+  Clock,
+  Download,
+  FileText,
+  Hash,
+  Link,
+  RotateCcw,
+  Share2,
+  TrendingUp,
+} from 'lucide-react';
+import { TrackedChangesDetail } from './TrackedChangesDetail';
+
+interface ProcessingResultsProps {
+  document: Document;
+  onDownload?: () => void;
+  onReprocess?: () => void;
+  onShare?: () => void;
+  onViewBackup?: () => void;
+  className?: string;
+}
+
+export function ProcessingResults({
+  document,
+  onDownload,
+  onReprocess,
+  onShare,
+  onViewBackup,
+  className,
+}: ProcessingResultsProps) {
+  const { processingResult } = document;
+
+  if (!processingResult) {
+    return (
+      <div className={cn('text-center py-8', className)}>
+        <AlertCircle className="w-12 h-12 text-muted-foreground mx-auto mb-3" />
+        <p className="text-muted-foreground">No processing results available</p>
+      </div>
+    );
+  }
+
+  const isSuccess = document.status === 'completed';
+  const hasErrors = document.status === 'error';
+
+  const formatDuration = (ms: number): string => {
+    if (ms < 1000) return `${ms}ms`;
+    if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
+    const minutes = Math.floor(ms / 60000);
+    const seconds = ((ms % 60000) / 1000).toFixed(0);
+    return `${minutes}m ${seconds}s`;
+  };
+
+  const getChangeIcon = (type: DocumentChange['type']) => {
+    switch (type) {
+      case 'hyperlink':
+        return <Link className="w-4 h-4 text-blue-500" />;
+      case 'text':
+        return <FileText className="w-4 h-4 text-green-500" />;
+      case 'style':
+        return <TrendingUp className="w-4 h-4 text-purple-500" />;
+      case 'structure':
+        return <Archive className="w-4 h-4 text-orange-500" />;
+    }
+  };
+
+  return (
+    <div className={cn('space-y-6', className)}>
+      {/* Status Header */}
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        className={cn(
+          'p-6 rounded-xl border-2',
+          isSuccess
+            ? 'bg-green-500/5 border-green-500/20'
+            : hasErrors
+              ? 'bg-red-500/5 border-red-500/20'
+              : 'bg-muted/30 border-border'
+        )}
+      >
+        <div className="flex items-start gap-4">
+          {isSuccess ? (
+            <CheckCircle className="w-8 h-8 text-green-500 mt-1" />
+          ) : hasErrors ? (
+            <AlertCircle className="w-8 h-8 text-red-500 mt-1" />
+          ) : (
+            <FileText className="w-8 h-8 text-muted-foreground mt-1" />
+          )}
+
+          <div className="flex-1">
+            <h3 className="text-xl font-semibold mb-1">
+              {isSuccess
+                ? 'Processing Completed Successfully'
+                : hasErrors
+                  ? 'Processing Failed'
+                  : 'Processing Results'}
+            </h3>
+            <p className="text-muted-foreground">{document.name}</p>
+
+            {processingResult.duration && (
+              <div className="flex items-center gap-2 mt-3 text-sm text-muted-foreground">
+                <Clock className="w-4 h-4" />
+                <span>Completed in {formatDuration(processingResult.duration)}</span>
+              </div>
+            )}
+
+            {hasErrors && document.errors && document.errors.length > 0 && (
+              <div className="mt-3 p-3 bg-red-500/10 rounded-lg">
+                <p className="text-sm text-red-600 font-medium mb-1">Errors:</p>
+                <ul className="text-sm text-red-600 space-y-1">
+                  {document.errors.map((error, index) => (
+                    <li key={index}>• {error}</li>
+                  ))}
+                </ul>
+              </div>
+            )}
+          </div>
+
+          <div className="flex flex-col gap-2">
+            {onDownload && (
+              <Button variant="outline" size="sm" onClick={onDownload} className="gap-2">
+                <Download className="w-4 h-4" />
+                Download
+              </Button>
+            )}
+            {onShare && (
+              <Button variant="outline" size="sm" onClick={onShare} className="gap-2">
+                <Share2 className="w-4 h-4" />
+                Share
+              </Button>
+            )}
+          </div>
+        </div>
+      </motion.div>
+
+      {/* Statistics Grid */}
+      <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+        <motion.div
+          initial={{ opacity: 0, scale: 0.9 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ delay: 0.1 }}
+          className="bg-muted/30 rounded-lg p-4 text-center"
+        >
+          <Link className="w-6 h-6 text-blue-500 mx-auto mb-2" />
+          <p className="text-2xl font-bold">{processingResult.hyperlinksProcessed || 0}</p>
+          <p className="text-xs text-muted-foreground">Hyperlinks Processed</p>
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0, scale: 0.9 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ delay: 0.2 }}
+          className="bg-muted/30 rounded-lg p-4 text-center"
+        >
+          <ArrowRight className="w-6 h-6 text-green-500 mx-auto mb-2" />
+          <p className="text-2xl font-bold text-green-500">
+            {processingResult.hyperlinksModified || 0}
+          </p>
+          <p className="text-xs text-muted-foreground">Links Modified</p>
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0, scale: 0.9 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ delay: 0.3 }}
+          className="bg-muted/30 rounded-lg p-4 text-center"
+        >
+          <Hash className="w-6 h-6 text-purple-500 mx-auto mb-2" />
+          <p className="text-2xl font-bold text-purple-500">
+            {processingResult.contentIdsAppended || 0}
+          </p>
+          <p className="text-xs text-muted-foreground">Content IDs Added</p>
+        </motion.div>
+
+        <motion.div
+          initial={{ opacity: 0, scale: 0.9 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ delay: 0.4 }}
+          className="bg-muted/30 rounded-lg p-4 text-center"
+        >
+          <Clock className="w-6 h-6 text-orange-500 mx-auto mb-2" />
+          <p className="text-2xl font-bold text-orange-500">
+            {processingResult.duration ? formatDuration(processingResult.duration) : 'N/A'}
+          </p>
+          <p className="text-xs text-muted-foreground">Processing Time</p>
+        </motion.div>
+      </div>
+
+      {/* Enhanced Tracked Changes */}
+      {processingResult.changes && processingResult.changes.length > 0 && (
+        <TrackedChangesDetail changes={processingResult.changes} />
+      )}
+
+      {/* Backup Information */}
+      {processingResult.backupPath && (
+        <div className="p-4 bg-muted/20 rounded-lg">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <Archive className="w-5 h-5 text-muted-foreground" />
+              <div>
+                <p className="font-medium text-sm">Backup Created</p>
+                <p className="text-xs text-muted-foreground">
+                  Original document saved before processing
+                </p>
+              </div>
+            </div>
+            {onViewBackup && (
+              <Button variant="ghost" size="sm" onClick={onViewBackup}>
+                View Backup
+              </Button>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Action Buttons */}
+      <div className="flex justify-between items-center pt-4 border-t">
+        <div>
+          {isSuccess && (
+            <p className="text-sm text-green-600 flex items-center gap-2">
+              <CheckCircle className="w-4 h-4" />
+              All changes applied successfully
+            </p>
+          )}
+        </div>
+        <div className="flex items-center gap-2">
+          {onReprocess && (
+            <Button variant="outline" onClick={onReprocess} className="gap-2">
+              <RotateCcw className="w-4 h-4" />
+              Reprocess
+            </Button>
+          )}
+        </div>
+      </div>
+
+      {/* Success Animation Overlay */}
+      {isSuccess && (
+        <motion.div
+          initial={{ scale: 0, opacity: 0 }}
+          animate={{ scale: [0, 1.2, 1], opacity: [0, 0.2, 0] }}
+          transition={{ duration: 1 }}
+          className="absolute inset-0 pointer-events-none"
+        >
+          <div className="w-full h-full bg-green-500 rounded-xl" />
+        </motion.div>
+      )}
+    </div>
+  );
+}