| import React, { useState, useEffect } from 'react'; |
| import { Download, Mail, Loader2, CheckCircle2, Search, Filter } from 'lucide-react'; |
| import { Button } from '@/components/ui/button'; |
| import { Input } from '@/components/ui/input'; |
| import { Progress } from '@/components/ui/progress'; |
| import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'; |
| import { motion, AnimatePresence } from 'framer-motion'; |
| import SequenceCard from './SequenceCard'; |
| import { apiFetch } from '@/lib/api'; |
| import { useGeneratorWorkflow } from '@/context/GeneratorWorkflowContext'; |
|
|
|
|
| export default function SequenceViewer() { |
| const { |
| isGenerating, |
| generationComplete, |
| selectedProducts, |
| uploadedFile, |
| includeLinkedin, |
| genPhase, |
| contacts, |
| sequences, |
| progress, |
| contactCount, |
| } = useGeneratorWorkflow(); |
|
|
| const [searchQuery, setSearchQuery] = useState(''); |
| const [filterProduct, setFilterProduct] = useState('all'); |
| const [displayedCount, setDisplayedCount] = useState(50); |
|
|
| useEffect(() => { |
| setDisplayedCount(50); |
| }, [searchQuery, filterProduct]); |
|
|
| const handleDownload = async () => { |
| if (!uploadedFile?.fileId) return; |
| try { |
| const response = await apiFetch(`/api/download-sequences?file_id=${uploadedFile.fileId}`); |
| if (response.ok) { |
| const blob = await response.blob(); |
| const url = URL.createObjectURL(blob); |
| const a = document.createElement('a'); |
| a.href = url; |
| a.download = 'email_sequences_fixed.csv'; |
| a.click(); |
| URL.revokeObjectURL(url); |
| } else { |
| alert('Failed to download CSV. Please try again.'); |
| } |
| } catch (error) { |
| console.error('Download error:', error); |
| alert('Error downloading CSV. Please try again.'); |
| } |
| }; |
|
|
| const filteredContacts = contacts.filter((contact) => { |
| const matchesSearch = |
| searchQuery === '' || |
| contact.firstName?.toLowerCase().includes(searchQuery.toLowerCase()) || |
| contact.lastName?.toLowerCase().includes(searchQuery.toLowerCase()) || |
| contact.company?.toLowerCase().includes(searchQuery.toLowerCase()) || |
| contact.email?.toLowerCase().includes(searchQuery.toLowerCase()); |
|
|
| const matchesFilter = filterProduct === 'all' || contact.product === filterProduct; |
|
|
| return matchesSearch && matchesFilter; |
| }); |
|
|
| const displayedContacts = filteredContacts.slice(0, displayedCount); |
| const hasMore = filteredContacts.length > displayedCount; |
|
|
| const loadMore = () => { |
| setDisplayedCount((prev) => Math.min(prev + 50, filteredContacts.length)); |
| }; |
|
|
| const showProgress = isGenerating || !generationComplete; |
| const phaseLabel = |
| includeLinkedin && genPhase === 'linkedin' && isGenerating |
| ? 'LinkedIn sequences' |
| : 'Email sequences'; |
|
|
| return ( |
| <div className="w-full"> |
| <div className="rounded-2xl border border-slate-200 bg-white p-6 mb-6"> |
| <div className="flex items-center justify-between mb-4"> |
| <div className="flex items-center gap-3"> |
| {generationComplete ? ( |
| <div className="rounded-xl bg-green-100 p-3"> |
| <CheckCircle2 className="h-6 w-6 text-green-600" /> |
| </div> |
| ) : ( |
| <div className="rounded-xl bg-violet-100 p-3"> |
| <Loader2 className="h-6 w-6 text-violet-600 animate-spin" /> |
| </div> |
| )} |
| <div> |
| <h3 className="font-semibold text-slate-800"> |
| {generationComplete ? 'Generation complete!' : `Generating ${phaseLabel}…`} |
| </h3> |
| <p className="text-sm text-slate-500"> |
| {contacts.length} contacts · {sequences.length} generated rows |
| {contactCount ? ` · ~${contactCount} contacts in file` : ''} |
| </p> |
| </div> |
| </div> |
| {generationComplete && ( |
| <Button onClick={handleDownload} className="bg-green-600 hover:bg-green-700"> |
| <Download className="h-4 w-4 mr-2" /> |
| Download CSV |
| </Button> |
| )} |
| </div> |
| {showProgress ? <Progress value={progress} className="h-2" /> : null} |
| </div> |
| |
| {sequences.length > 0 && ( |
| <motion.div |
| initial={{ opacity: 0, y: -10 }} |
| animate={{ opacity: 1, y: 0 }} |
| className="flex flex-col sm:flex-row gap-3 mb-6" |
| > |
| <div className="relative flex-1"> |
| <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-slate-400" /> |
| <Input |
| placeholder="Search contacts..." |
| value={searchQuery} |
| onChange={(e) => setSearchQuery(e.target.value)} |
| className="pl-10" |
| /> |
| </div> |
| <Select value={filterProduct} onValueChange={setFilterProduct}> |
| <SelectTrigger className="w-full sm:w-48"> |
| <Filter className="h-4 w-4 mr-2 text-slate-400" /> |
| <SelectValue placeholder="Filter by product" /> |
| </SelectTrigger> |
| <SelectContent> |
| <SelectItem value="all">All Products</SelectItem> |
| {selectedProducts.map((product) => ( |
| <SelectItem key={product.id} value={product.name}> |
| {product.name} |
| </SelectItem> |
| ))} |
| </SelectContent> |
| </Select> |
| </motion.div> |
| )} |
| |
| <div className="space-y-3 max-h-[600px] overflow-y-auto pr-2 custom-scrollbar"> |
| <AnimatePresence> |
| {displayedContacts.map((contact, index) => ( |
| <SequenceCard |
| key={contact.id || `${contact.firstName}-${contact.lastName}-${contact.email}`} |
| contact={contact} |
| index={index} |
| /> |
| ))} |
| </AnimatePresence> |
| {hasMore && ( |
| <div className="text-center py-4"> |
| <Button variant="outline" onClick={loadMore} className="mx-auto"> |
| Load More ({filteredContacts.length - displayedCount} remaining) |
| </Button> |
| </div> |
| )} |
| {filteredContacts.length > 0 && ( |
| <div className="text-center py-2 text-sm text-slate-500"> |
| Showing {displayedContacts.length} of {filteredContacts.length} contacts |
| </div> |
| )} |
| </div> |
| |
| {!isGenerating && contacts.length === 0 && sequences.length === 0 && ( |
| <div className="text-center py-16"> |
| <div className="mx-auto w-16 h-16 rounded-2xl bg-slate-100 flex items-center justify-center mb-4"> |
| <Mail className="h-8 w-8 text-slate-300" /> |
| </div> |
| <h3 className="text-lg font-semibold text-slate-400 mb-2">No sequences yet</h3> |
| <p className="text-sm text-slate-400">Click "Generate Sequences" to start</p> |
| </div> |
| )} |
| </div> |
| ); |
| } |
|
|
