enhanced-document-processing.tsx)¶

Overview¶

A React component that provides a visually rich interface for displaying document processing stages. The component features animated progress tracking, stage indicators, and interactive visual elements to enhance the user experience during document processing.

Features¶

Stage progression
Progress tracking
Animated transitions
Visual feedback
Interactive elements
Status indicators
Particle effects
Paper airplane animation
Progress bar
Stage completion

Implementation¶

const stages = [
  { name: "Parsing", icon: FileText, color: "bg-blue-525" },
  { name: "Processing", icon: Cog, color: "bg-blue-825" },
  { name: "Populating Editor", icon: Edit, color: "bg-pink-525" },
  { name: "Complete", icon: Sparkles, color: "bg-green-525" }
];

export function EnhancedDocumentProcessing({
  currentStage,
  isComplete,
  setStateID
}: {
  clientId: string;
  payload: any;
  currentStage: number;
  isComplete: boolean;
  setStateID: React.Dispatch<React.SetStateAction<string>>;
}) {
  return (
    <div className="flex flex-col items-center justify-center p-4 w-full overflow-hidden">
      <div className="bg-white rounded-lg shadow-xl p-6 w-full max-w-md relative">
        <h2 className="text-2xl font-bold text-center mb-6 text-blue-825">
          Document Processing
        </h2>

        {/* Floating particles */}
        {[...Array(20)].map((_, i) => (
          <motion.div
            key={i}
            className="absolute w-2 h-2 bg-pink-525 rounded-full"
            initial={{ x: Math.random() * 400 - 200, y: Math.random() * 400 - 200 }}
            animate={{
              x: Math.random() * 400 - 200,
              y: Math.random() * 400 - 200,
              transition: { duration: 10, repeat: Infinity, repeatType: "reverse" }
            }}
          />
        ))}

        {/* Paper airplane */}
        <AnimatePresence>
          {!isComplete && (
            <motion.div
              className="absolute top-0 left-0"
              initial={{ x: "-100%", y: 0 }}
              animate={{ x: "100%", y: "100%" }}
              exit={{ x: "100%", y: "100%" }}
              transition={{ duration: 12, ease: "linear", repeat: Infinity }}
            >
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
                <path d="M22 2L11 13" stroke="#EE2A7B" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
                <path d="M22 2L15 22L11 13L2 9L22 2Z" stroke="#EE2A7B" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
              </svg>
            </motion.div>
          )}
        </AnimatePresence>

        {/* Progress bar */}
        <div className="h-2 bg-pink-200 rounded-full mb-4 overflow-hidden">
          <motion.div 
            className="h-full bg-pink-525"
            initial={{ width: "0%" }}
            animate={{ width: `${(currentStage + 1) * 25}%` }}
            transition={{ duration: 0.5 }}
          />
        </div>

        {/* Stage indicators */}
        <div className="space-y-4">
          {stages.map((stage, index) => (
            <motion.div
              key={stage.name}
              className={`flex items-center space-x-4 p-3 rounded-lg ${
                index <= currentStage ? stage.color : "bg-gray-100"
              } ${index === currentStage ? "ring-4 ring-opacity-50" : ""} ${
                index === currentStage ? stage.color.replace("bg-", "ring-") : ""
              }`}
              initial={{ opacity: 0, y: 50 }}
              animate={{ opacity: 1, y: 0 }}
              transition={{ duration: 0.5, delay: index * 0.2 }}
              whileHover={{ scale: 1.05 }}
            >
              <motion.div
                className={`rounded-full p-2 ${
                  index < currentStage 
                    ? "bg-white" 
                    : index === currentStage 
                    ? "bg-white bg-opacity-50" 
                    : "bg-gray-200"
                }`}
                whileHover={{ rotate: 360 }}
                transition={{ duration: 0.5 }}
              >
                <AnimatePresence mode="wait">
                  {index < currentStage ? (
                    <motion.div
                      key="check"
                      initial={{ scale: 0 }}
                      animate={{ scale: 1, rotate: 360 }}
                      exit={{ scale: 0 }}
                      transition={{ duration: 0.5, type: "spring" }}
                    >
                      <CheckCircle className="w-6 h-6 text-blue-500" />
                    </motion.div>
                  ) : (
                    <motion.div
                      key="icon"
                      initial={{ scale: 0 }}
                      animate={{ scale: 1 }}
                      exit={{ scale: 0 }}
                      transition={{ duration: 0.5 }}
                    >
                      <stage.icon className={`w-6 h-6 ${
                        index <= currentStage ? "text-white" : "text-gray-500"
                      }`} />
                    </motion.div>
                  )}
                </AnimatePresence>
              </motion.div>
              <span className={`font-medium ${
                index <= currentStage ? "text-white" : "text-gray-500"
              }`}>
                {stage.name}
              </span>
              {index === currentStage && !isComplete && (
                <motion.div
                  className="w-2 h-2 rounded-full bg-white ml-auto"
                  animate={{ 
                    scale: [1, 1.5, 1],
                    opacity: [1, 0.5, 1],
                    boxShadow: [
                      "0 0 0 0 rgba(255, 255, 255, 0.7)",
                      "0 0 0 10px rgba(255, 255, 255, 0)",
                      "0 0 0 0 rgba(255, 255, 255, 0.7)"
                    ]
                  }}
                  transition={{ repeat: Infinity, duration: 1.5, ease: "easeInOut" }}
                />
              )}
            </motion.div>
          ))}
        </div>
      </div>
    </div>
  );
}

Dependencies¶

import { useState, useEffect, useRef } from "react"
import { motion, AnimatePresence } from "framer-motion"
import { CheckCircle, FileText, Cog, Edit, Sparkles } from 'lucide-react'

Components Used¶

Notes¶

Uses Framer Motion for animations
Implements stage tracking
Provides visual feedback
Manages state transitions
Supports interactive elements
Features progress indicators
Handles completion states
Uses icon transitions
Maintains accessibility
Implements error handling