0fdaedc7ff
Updates all remaining frontend components to use the new Barclays design system color tokens: - brand-dark-blue → primary-blue (#1A2142) - brand-accent → active-blue (#006DE3) - brand-light-blue → cyan-brand (#00AEEF) - brand-gray → grey-100 (#F6F6F6) Components updated: - CampaignDetail and ProofDetailView in Campaigns.tsx - Projects.tsx (full component migration) - StatusDashboard.tsx (status tiles and colors) - CreateProjectModal.tsx (modal styling) - FeedbackReport.tsx (remaining brand colors) - Login.tsx and Profile.tsx - WIPReviewer.tsx and CopyGenAI.tsx - Header, LoadingVisual, ToggleSwitch - AssetPreview, ProofPreview, AssetUpload - ProofTypeManager Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
1706 lines
92 KiB
TypeScript
Executable file
1706 lines
92 KiB
TypeScript
Executable file
|
|
import React, { useState, useRef, useEffect } from 'react';
|
|
import ReactDOM from 'react-dom/client';
|
|
import { PlusIcon } from './icons/PlusIcon';
|
|
import { ArrowLeftIcon } from './icons/ArrowLeftIcon';
|
|
import type { AgentReview, FlaggedItem, ResolvedItem, OverallStatus } from '../types';
|
|
import { FeedbackReport } from './FeedbackReport';
|
|
import { CreateCampaignModal } from './CreateCampaignModal';
|
|
import { CheckCircleIcon, ArrowPathIcon, ExclamationTriangleIcon } from './icons/StatusIcons';
|
|
import { ProofPreview } from './ProofPreview';
|
|
import { HistoryIcon } from './icons/HistoryIcon';
|
|
import { DropdownOptions } from '../App';
|
|
import { ChannelIcon } from './icons/ChannelIcon';
|
|
import { TagIcon } from './icons/TagIcon';
|
|
import { ChevronDownIcon } from './icons/ChevronDownIcon';
|
|
import { UploadIcon } from './icons/UploadIcon';
|
|
import { DocumentIcon } from './icons/DocumentIcon';
|
|
import { SpinnerIcon } from './icons/SpinnerIcon';
|
|
import { AGENT_NAMES } from '../constants';
|
|
import { ToggleSwitch } from './ToggleSwitch';
|
|
import { TrashIcon } from './icons/TrashIcon';
|
|
import { DownloadIcon } from './icons/DownloadIcon';
|
|
import { PDFIcon } from './icons/PDFIcon';
|
|
import { PDFReport } from './PDFReport';
|
|
import { ExportIcon } from './icons/ExportIcon';
|
|
import { XIcon } from './icons/XIcon';
|
|
import apiService from '../services/apiService';
|
|
import { usePdfPages } from '../hooks/usePdfPages';
|
|
|
|
const formatDate = (isoDateString: string): string => {
|
|
const date = new Date(isoDateString);
|
|
return date.toLocaleDateString('en-US', {
|
|
month: 'short',
|
|
day: 'numeric',
|
|
year: 'numeric'
|
|
});
|
|
};
|
|
|
|
export const initialCampaigns = [
|
|
{
|
|
name: 'Barclays Q4 campaign',
|
|
workfrontId: '#WF_12822',
|
|
clientLead: 'Jane Doe',
|
|
agency: 'OLIVER Agency',
|
|
agencyLead: 'Steve O\'Donoghue',
|
|
proofs: 3,
|
|
status: 'In Progress',
|
|
lastModified: '2024-07-22',
|
|
brandGuidelines: 'Barclays',
|
|
},
|
|
{
|
|
name: 'Barclays Q3 Roundup',
|
|
workfrontId: '#WF_12750',
|
|
clientLead: 'Jane Doe',
|
|
agency: 'OLIVER Agency',
|
|
agencyLead: 'Steve O\'Donoghue',
|
|
proofs: 1,
|
|
status: 'Completed',
|
|
lastModified: '2024-06-30',
|
|
brandGuidelines: 'Barclays',
|
|
},
|
|
];
|
|
|
|
const IG_HERO_POST_1_IMAGE_V1 = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTA4MCIgaGVpZ2h0PSIxMDgwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiMwMDFmNWEiLz48dGV4dCB4PSI1MCUiIHk9IjUwJSIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2lçZz0iODAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBkb21pbmFudC1iYXNlbGluZT0ibWlkZGxlIj5JRyBIZXJvIFBvc3QgMSB2MVc8L3RleHQ+PHRleHQgeD0iNTAlIiB5PSI2MCUiIGZvbnQtZmFtaWx5PSJzYW5zLXNlcmlmIiBmb250LXNpemU9IjQwIiBmaWxsPSJ3aGl0ZSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZG9taW5hbnQtYmFzZWxpbmU9Im1pZGRsZSI+KEFzc2V0IFByZXZpZXcpPC90ZXh0Pjwvc3ZnPg==';
|
|
const IG_HERO_POST_1_IMAGE_V2 = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTA4MCIgaGVpZ2h0PSIxMDgwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiMwMDcwYzAiLz48dGV4dCB4PSI1MCUiIHk9IjUwJSIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iODAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBkb21pbmFudC1iYXNlbGluZT0ibWlkZGxlIj5JRyBIZXJvIFBvc3QgMSB2MjwvdGV4dD48dGV4dCB4PSI1MCUiIHk9IjYwJSIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iNDAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBkb21pbmFudC1iYXNlbGluZT0ibWlkZGxlIj4oQ29ycmVjdGlvbnMgQXBwbGllZCk8L3RleHQ+PC9zdmc+';
|
|
|
|
const IG_HERO_POST_1_FEEDBACK_V1: AgentReview = {
|
|
overallStatus: "Analysis Error",
|
|
leadAgentSummary: "The proof could not be reliably processed by some agents due to low confidence in the analysis. This may happen if the proof is too abstract or irrelevant to typical marketing content. This version has been logged for manual human review. Please try uploading a revised version of the proof.",
|
|
legalAgentReview: {
|
|
ragStatus: "Error",
|
|
feedback: "The agent could not analyze this proof with high confidence. This may be because the content is irrelevant, nonsensical, or too far outside of expected marketing materials.",
|
|
issues: []
|
|
},
|
|
brandAgentReview: {
|
|
ragStatus: "Error",
|
|
feedback: "The agent could not analyze this proof with high confidence. This may be because the content is irrelevant, nonsensical, or too far outside of expected marketing materials.",
|
|
issues: []
|
|
},
|
|
channelBestPracticesAgentReview: {
|
|
ragStatus: "Green",
|
|
feedback: "The content strategy is clear and effectively communicates the partnership message. The call-to-action is prominent.",
|
|
issues: []
|
|
},
|
|
channelTechSpecsAgentReview: {
|
|
ragStatus: "Amber",
|
|
feedback: "While the image quality is high, the composition is not optimized for vertical formats like Instagram Stories. The high ratio of text in the image could also potentially reduce advertising reach on some platforms.",
|
|
issues: ["Image composition is not mobile-first or suitable for vertical formats.", "High ratio of text in the image may negatively impact ad performance."]
|
|
}
|
|
};
|
|
|
|
const IG_HERO_POST_1_FEEDBACK_V2: AgentReview = {
|
|
overallStatus: "Passed",
|
|
leadAgentSummary: "The proof has Passed review. All critical legal and brand issues from the previous version have been successfully addressed. The partnership claim is clear, and the design now fully aligns with brand guidelines. One minor suggestion is to consider a separate vertical version for Story placements, but the proof is approved for deployment.",
|
|
legalAgentReview: {
|
|
ragStatus: "Green",
|
|
feedback: "All legal concerns have been addressed. The partnership claim is now clearly stated as 'Proud principal partner' and all necessary documentation for the use of the Lord's branding has been verified.",
|
|
issues: []
|
|
},
|
|
brandAgentReview: {
|
|
ragStatus: "Green",
|
|
feedback: "The proof now fully aligns with brand guidelines. The 'Principal partner' lockup uses the correct brand font, and the non-standard blue border has been removed, resulting in a cleaner, on-brand look.",
|
|
issues: []
|
|
},
|
|
channelBestPracticesAgentReview: {
|
|
ragStatus: "Green",
|
|
feedback: "The content strategy is effective with clear messaging and well-optimized visual hierarchy. No issues found.",
|
|
issues: []
|
|
},
|
|
channelTechSpecsAgentReview: {
|
|
ragStatus: "Amber",
|
|
feedback: "The image composition has been improved and is suitable for standard feeds. However, for optimal performance on Instagram, creating a separate vertical version for Story placements is recommended.",
|
|
issues: ["Consider creating a separate vertical version for Story placements."]
|
|
}
|
|
};
|
|
|
|
export const initialCampaignProofs: { [key: string]: any[] } = {
|
|
'Barclays Q4 campaign': [
|
|
{
|
|
proofName: 'IG Hero Post 1',
|
|
channel: 'Social',
|
|
subChannel: 'Meta',
|
|
proofType: 'In-feed 4x5',
|
|
status: 'completed',
|
|
overallStatus: 'Passed',
|
|
versions: [
|
|
{
|
|
version: 2,
|
|
timestamp: '2024-07-25',
|
|
workfrontId: '#WF_12823-V2',
|
|
proofPreviewUrl: IG_HERO_POST_1_IMAGE_V2,
|
|
feedback: IG_HERO_POST_1_FEEDBACK_V2,
|
|
overallStatus: 'Passed',
|
|
},
|
|
{
|
|
version: 1,
|
|
timestamp: '2024-07-23',
|
|
workfrontId: '#WF_12823-V1',
|
|
proofPreviewUrl: IG_HERO_POST_1_IMAGE_V1,
|
|
feedback: IG_HERO_POST_1_FEEDBACK_V1,
|
|
overallStatus: 'Analysis Error',
|
|
}
|
|
]
|
|
},
|
|
{
|
|
proofName: 'Q4 FB Static 4x5',
|
|
channel: 'Social',
|
|
subChannel: 'Meta',
|
|
proofType: 'In-feed 4x5',
|
|
status: 'completed',
|
|
overallStatus: 'Passed',
|
|
versions: [
|
|
{
|
|
version: 1,
|
|
timestamp: '2024-07-26',
|
|
workfrontId: '#WF_12824-V1',
|
|
proofPreviewUrl: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTA4MCIgaGVpZ2h0PSIxMzUwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiMwMDcwYzAiLz48dGV4dCB4PSI1MCUiIHk9IjUwJSIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iODAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBkb21pbmFudC1iYXNlbGluZT0ibWlkZGxlIj5GQiBTdGF0aWMgNHg1PC90ZXh0Pjwvc3ZnPg==',
|
|
feedback: {
|
|
overallStatus: "Passed",
|
|
leadAgentSummary: "Passed. Compliant with all guidelines.",
|
|
legalAgentReview: { ragStatus: "Green", feedback: "Disclaimers present and correct.", issues: [] },
|
|
brandAgentReview: { ragStatus: "Green", feedback: "On brand colors used.", issues: [] },
|
|
channelBestPracticesAgentReview: { ragStatus: "Green", feedback: "Content strategy is effective.", issues: [] },
|
|
channelTechSpecsAgentReview: { ragStatus: "Green", feedback: "Correct specs for FB.", issues: [] }
|
|
},
|
|
overallStatus: 'Passed',
|
|
}
|
|
]
|
|
},
|
|
{
|
|
proofName: 'Q4 IG Story Promo',
|
|
channel: 'Social',
|
|
subChannel: 'Meta',
|
|
proofType: 'Stories Static 9x16',
|
|
status: 'completed',
|
|
overallStatus: 'Passed',
|
|
versions: [
|
|
{
|
|
version: 1,
|
|
timestamp: '2024-07-27',
|
|
workfrontId: '#WF_12825-V1',
|
|
proofPreviewUrl: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTA4MCIgaGVpZ2h0PSIxOTIwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiMwMDFmNWEiLz48dGV4dCB4PSI1MCUiIHk9IjUwJSIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iODAiIGZpbGw9IndoaXRlIiB0ZXh0LWFuY2hvcj0ibWlkZGxlIiBkb21pbmFudC1iYXNlbGluZT0ibWlkZGxlIj5JRyBTdG9yeTwvdGV4dD48L3N2Zz4=',
|
|
feedback: {
|
|
overallStatus: "Passed",
|
|
leadAgentSummary: "Approved for IG Stories.",
|
|
legalAgentReview: { ragStatus: "Green", feedback: "Compliant.", issues: [] },
|
|
brandAgentReview: { ragStatus: "Green", feedback: "Brand aligned.", issues: [] },
|
|
channelBestPracticesAgentReview: { ragStatus: "Green", feedback: "Engaging content strategy.", issues: [] },
|
|
channelTechSpecsAgentReview: { ragStatus: "Green", feedback: "Optimized for mobile.", issues: [] }
|
|
},
|
|
overallStatus: 'Passed',
|
|
}
|
|
]
|
|
}
|
|
],
|
|
'Barclays Q3 Roundup': [
|
|
{
|
|
proofName: 'Q3 Results Infographic',
|
|
channel: 'Display',
|
|
subChannel: 'Banner',
|
|
proofType: '300x600',
|
|
status: 'completed',
|
|
overallStatus: 'Passed',
|
|
versions: [
|
|
{
|
|
version: 1,
|
|
timestamp: '2024-06-28',
|
|
workfrontId: '#WF_12751-V1',
|
|
proofPreviewUrl: 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTA4MCIgaGVpZ2h0PSIxMDgwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiNmNGY2ZjgiLz48dGV4dCB4PSI1MCUiIHk9IjUwJSIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iODAiIGZpbGw9IiMwMDFmNWEiLz48dGV4dCB4PSI1MCUiIHk9IjUwJSIgZm9udC1mYW1pbHk9InNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iODAiIGZpbGw9IiMwMDFmNWEiIHRleH0LWFuY2hvcj0ibWlkZGxlIiBkb21pbmFudC1iYXNlbGluZT0ibWlkZGxlIj5RMyBSZXN1bHRzIEluZm9ncmFwaGljPC90ZXh0Pjwvc3ZnPg==',
|
|
feedback: {
|
|
overallStatus: "Passed",
|
|
leadAgentSummary: "The proof has Passed review with no issues found across all categories. It is well-designed, compliant, and ready for deployment.",
|
|
legalAgentReview: { ragStatus: "Green", feedback: "All claims are substantiated and disclaimers are correctly placed.", issues: [] },
|
|
brandAgentReview: { ragStatus: "Green", feedback: "The proof adheres perfectly to all brand guidelines.", issues: [] },
|
|
channelBestPracticesAgentReview: { ragStatus: "Green", feedback: "The content strategy is effective and well-optimized for engagement.", issues: [] },
|
|
channelTechSpecsAgentReview: { ragStatus: "Green", feedback: "The infographic format is highly suitable for the selected channel.", issues: [] },
|
|
},
|
|
overallStatus: 'Passed',
|
|
}
|
|
]
|
|
}
|
|
]
|
|
};
|
|
|
|
const StatusBadge: React.FC<{ status: string }> = ({ status }) => {
|
|
let colorClasses = '';
|
|
switch (status) {
|
|
case 'In Progress':
|
|
colorClasses = 'bg-warning text-black-title';
|
|
break;
|
|
case 'Completed':
|
|
colorClasses = 'bg-success text-white';
|
|
break;
|
|
case 'Needs Review':
|
|
colorClasses = 'bg-warning-light text-black-title';
|
|
break;
|
|
default:
|
|
colorClasses = 'bg-grey-100 text-black-title';
|
|
}
|
|
return (
|
|
<span className={`px-2.5 py-0.5 text-xs font-semibold rounded-full ${colorClasses}`}>
|
|
{status}
|
|
</span>
|
|
);
|
|
};
|
|
|
|
const OverallStatusBadge: React.FC<{ status: OverallStatus }> = ({ status }) => {
|
|
let colorClasses = '';
|
|
switch (status) {
|
|
case 'Passed':
|
|
colorClasses = 'bg-success text-white';
|
|
break;
|
|
case 'Failed':
|
|
colorClasses = 'bg-error text-white';
|
|
break;
|
|
case 'Requires Manual Legal Review':
|
|
colorClasses = 'bg-warning text-black-title';
|
|
break;
|
|
case 'Analysis Error':
|
|
colorClasses = 'bg-grey-300 text-black-title';
|
|
break;
|
|
}
|
|
|
|
return (
|
|
<span className={`inline-flex items-center px-3 py-1 text-sm font-bold rounded-full ${colorClasses}`}>
|
|
{status}
|
|
</span>
|
|
);
|
|
};
|
|
|
|
|
|
const CampaignList: React.FC<{
|
|
onSelectCampaign: (name: string) => void;
|
|
campaigns: typeof initialCampaigns;
|
|
onOpenModal: () => void;
|
|
onCampaignStatusChange: (campaignName: string, newStatus: 'In Progress' | 'Completed') => void;
|
|
onDeleteCampaign: (campaign: typeof initialCampaigns[0]) => void;
|
|
}> = ({ onSelectCampaign, campaigns, onOpenModal, onCampaignStatusChange, onDeleteCampaign }) => {
|
|
const [showCompleted, setShowCompleted] = useState(true);
|
|
const [selectedCampaigns, setSelectedCampaigns] = useState<Set<string>>(new Set());
|
|
const [campaignToDelete, setCampaignToDelete] = useState<typeof initialCampaigns[0] | null>(null);
|
|
const [showBulkDeleteModal, setShowBulkDeleteModal] = useState(false);
|
|
const [isDeleting, setIsDeleting] = useState(false);
|
|
|
|
const filteredCampaigns = showCompleted ? campaigns : campaigns.filter(p => p.status !== 'Completed');
|
|
|
|
// Clear selection when campaigns list changes (e.g., after deletion)
|
|
useEffect(() => {
|
|
setSelectedCampaigns(prev => {
|
|
const currentNames = new Set(filteredCampaigns.map(c => c.name));
|
|
const newSelection = new Set<string>();
|
|
prev.forEach(name => {
|
|
if (currentNames.has(name)) {
|
|
newSelection.add(name);
|
|
}
|
|
});
|
|
return newSelection;
|
|
});
|
|
}, [filteredCampaigns]);
|
|
|
|
const getStatusSelectClasses = (status: string) => {
|
|
let baseClasses = 'w-full text-center px-2.5 py-0.5 text-xs font-semibold rounded-full border border-transparent focus:outline-none focus:ring-2 focus:ring-active-blue appearance-none cursor-pointer';
|
|
let colorClasses = '';
|
|
switch (status) {
|
|
case 'In Progress':
|
|
colorClasses = 'bg-warning text-black-title';
|
|
break;
|
|
case 'Completed':
|
|
colorClasses = 'bg-success text-white';
|
|
break;
|
|
default:
|
|
colorClasses = 'bg-grey-100 text-black-title';
|
|
}
|
|
return `${baseClasses} ${colorClasses}`;
|
|
};
|
|
|
|
const handleSelectAll = () => {
|
|
if (selectedCampaigns.size === filteredCampaigns.length) {
|
|
setSelectedCampaigns(new Set());
|
|
} else {
|
|
setSelectedCampaigns(new Set(filteredCampaigns.map(c => c.name)));
|
|
}
|
|
};
|
|
|
|
const handleSelectCampaign = (campaignName: string, e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
setSelectedCampaigns(prev => {
|
|
const newSet = new Set(prev);
|
|
if (newSet.has(campaignName)) {
|
|
newSet.delete(campaignName);
|
|
} else {
|
|
newSet.add(campaignName);
|
|
}
|
|
return newSet;
|
|
});
|
|
};
|
|
|
|
const handleSingleDelete = (campaign: typeof initialCampaigns[0], e: React.MouseEvent) => {
|
|
e.stopPropagation();
|
|
setCampaignToDelete(campaign);
|
|
};
|
|
|
|
const handleConfirmSingleDelete = async () => {
|
|
if (campaignToDelete) {
|
|
setIsDeleting(true);
|
|
await onDeleteCampaign(campaignToDelete);
|
|
setCampaignToDelete(null);
|
|
setIsDeleting(false);
|
|
}
|
|
};
|
|
|
|
const handleConfirmBulkDelete = async () => {
|
|
setIsDeleting(true);
|
|
const campaignsToDelete = filteredCampaigns.filter(c => selectedCampaigns.has(c.name));
|
|
for (const campaign of campaignsToDelete) {
|
|
await onDeleteCampaign(campaign);
|
|
}
|
|
setSelectedCampaigns(new Set());
|
|
setShowBulkDeleteModal(false);
|
|
setIsDeleting(false);
|
|
};
|
|
|
|
const isAllSelected = filteredCampaigns.length > 0 && selectedCampaigns.size === filteredCampaigns.length;
|
|
const isIndeterminate = selectedCampaigns.size > 0 && selectedCampaigns.size < filteredCampaigns.length;
|
|
|
|
return (
|
|
<div className="p-4 sm:p-6 lg:p-8 h-full bg-grey-100">
|
|
<CampaignDeleteConfirmationModal
|
|
isOpen={!!campaignToDelete}
|
|
onClose={() => setCampaignToDelete(null)}
|
|
onConfirm={handleConfirmSingleDelete}
|
|
campaignName={campaignToDelete?.name || ''}
|
|
proofCount={campaignToDelete?.proofs || 0}
|
|
isBulk={false}
|
|
selectedCount={1}
|
|
/>
|
|
|
|
<CampaignDeleteConfirmationModal
|
|
isOpen={showBulkDeleteModal}
|
|
onClose={() => setShowBulkDeleteModal(false)}
|
|
onConfirm={handleConfirmBulkDelete}
|
|
campaignName=""
|
|
proofCount={0}
|
|
isBulk={true}
|
|
selectedCount={selectedCampaigns.size}
|
|
/>
|
|
|
|
<header className="mb-8">
|
|
<div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-4">
|
|
<div>
|
|
<h1 className="text-3xl lg:text-4xl font-bold text-primary-blue">Campaigns</h1>
|
|
<p className="text-base lg:text-lg text-primary-blue mt-1">Manage your campaigns and proof collections.</p>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex items-center gap-2">
|
|
<label htmlFor="show-completed" className="text-sm font-medium text-black-title whitespace-nowrap">Show Completed</label>
|
|
<ToggleSwitch enabled={showCompleted} onChange={setShowCompleted} />
|
|
</div>
|
|
<button
|
|
onClick={onOpenModal}
|
|
className="flex items-center gap-2 bg-active-blue text-white font-semibold py-2.5 px-6 rounded-full hover:bg-active-blue/90 transition-colors duration-300"
|
|
>
|
|
<PlusIcon className="h-5 w-5" />
|
|
Create New Campaign
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<section>
|
|
{/* Bulk Actions Bar */}
|
|
{selectedCampaigns.size > 0 && (
|
|
<div className="mb-4 bg-info-light border border-active-blue rounded-[10px] p-3 flex items-center justify-between">
|
|
<div className="flex items-center gap-4">
|
|
<span className="text-sm font-medium text-active-blue">
|
|
{selectedCampaigns.size} campaign{selectedCampaigns.size !== 1 ? 's' : ''} selected
|
|
</span>
|
|
<button
|
|
onClick={() => setSelectedCampaigns(new Set())}
|
|
className="text-sm text-active-blue hover:text-primary-blue underline"
|
|
>
|
|
Clear selection
|
|
</button>
|
|
</div>
|
|
<button
|
|
onClick={() => setShowBulkDeleteModal(true)}
|
|
disabled={isDeleting}
|
|
className="flex items-center gap-2 bg-error text-white font-semibold py-1.5 px-4 rounded-full hover:bg-error/90 transition-colors duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
<TrashIcon className="h-4 w-4" />
|
|
Delete Selected
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
<div className="bg-white rounded-[10px] shadow-md overflow-hidden border border-grey-300">
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full">
|
|
<thead className="bg-lime">
|
|
<tr>
|
|
<th scope="col" className="px-4 py-3 text-left">
|
|
<input
|
|
type="checkbox"
|
|
checked={isAllSelected}
|
|
ref={(el) => {
|
|
if (el) el.indeterminate = isIndeterminate;
|
|
}}
|
|
onChange={handleSelectAll}
|
|
className="h-4 w-4 text-active-blue border-grey-300 rounded focus:ring-active-blue cursor-pointer"
|
|
aria-label="Select all campaigns"
|
|
/>
|
|
</th>
|
|
<th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Campaign Name</th>
|
|
<th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Proofs</th>
|
|
<th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Status</th>
|
|
<th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Created By</th>
|
|
<th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Owning Agency</th>
|
|
<th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Last Modified</th>
|
|
<th scope="col" className="relative px-4 py-3"><span className="sr-only">Actions</span></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-grey-300">
|
|
{filteredCampaigns.map((campaign, index) => {
|
|
const isSelected = selectedCampaigns.has(campaign.name);
|
|
return (
|
|
<tr
|
|
key={campaign.name}
|
|
className={`hover:bg-info-light cursor-pointer ${isSelected ? 'bg-info-light' : index % 2 === 0 ? 'bg-white' : 'bg-grey-100'}`}
|
|
onClick={() => onSelectCampaign(campaign.name)}
|
|
>
|
|
<td className="px-4 py-4 whitespace-nowrap">
|
|
<input
|
|
type="checkbox"
|
|
checked={isSelected}
|
|
onChange={() => {}} // Handled by onClick
|
|
onClick={(e) => handleSelectCampaign(campaign.name, e)}
|
|
className="h-4 w-4 text-active-blue border-grey-300 rounded focus:ring-active-blue cursor-pointer"
|
|
aria-label={`Select ${campaign.name}`}
|
|
/>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-black-title">{campaign.name}</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{campaign.proofs}</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm w-40">
|
|
<div className="relative">
|
|
<select
|
|
value={campaign.status}
|
|
onChange={(e) => onCampaignStatusChange(campaign.name, e.target.value as 'In Progress' | 'Completed')}
|
|
onClick={(e) => e.stopPropagation()}
|
|
className={getStatusSelectClasses(campaign.status)}
|
|
aria-label={`Change status for ${campaign.name}`}
|
|
>
|
|
<option value="In Progress">In Progress</option>
|
|
<option value="Completed">Completed</option>
|
|
</select>
|
|
<ChevronDownIcon className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2 h-full w-4 text-black-title" />
|
|
</div>
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{campaign.agencyLead}</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{campaign.agency}</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{formatDate(campaign.lastModified)}</td>
|
|
<td className="px-4 py-4 whitespace-nowrap text-sm text-right">
|
|
<button
|
|
onClick={(e) => handleSingleDelete(campaign, e)}
|
|
disabled={isDeleting}
|
|
className="p-2 text-grey-700 rounded-full hover:bg-error-light hover:text-error transition-colors disabled:opacity-50"
|
|
title={`Delete ${campaign.name}`}
|
|
aria-label={`Delete ${campaign.name}`}
|
|
>
|
|
<TrashIcon className="h-5 w-5" />
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const UploadProofModal: React.FC<{
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
dropdownOptions: DropdownOptions;
|
|
onSubmit: (file: File, proofName: string, channel: string, subChannel: string, proofType?: string) => void;
|
|
isLoading: boolean;
|
|
existingProofNames: string[];
|
|
}> = ({ isOpen, onClose, dropdownOptions, onSubmit, isLoading, existingProofNames }) => {
|
|
const [file, setFile] = useState<File | null>(null);
|
|
const [proofName, setProofName] = useState('');
|
|
const [channel, setChannel] = useState('');
|
|
const [subChannel, setSubChannel] = useState('');
|
|
const [proofType, setProofType] = useState('');
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
const availableChannels = Object.keys(dropdownOptions.channels);
|
|
const availableSubChannels = channel ? Object.keys(dropdownOptions.channels[channel] || {}) : [];
|
|
const availableProofTypes = (channel && subChannel) ? (dropdownOptions.channels[channel][subChannel] || []) : [];
|
|
const showProofType = availableProofTypes.length > 0;
|
|
|
|
// Debug logging for proof types
|
|
useEffect(() => {
|
|
if (channel && subChannel) {
|
|
console.log('[DEBUG Frontend] Channel:', channel);
|
|
console.log('[DEBUG Frontend] SubChannel:', subChannel);
|
|
console.log('[DEBUG Frontend] dropdownOptions.channels[channel]:', dropdownOptions.channels[channel]);
|
|
console.log('[DEBUG Frontend] dropdownOptions.channels[channel][subChannel]:', dropdownOptions.channels[channel]?.[subChannel]);
|
|
console.log('[DEBUG Frontend] availableProofTypes:', availableProofTypes);
|
|
}
|
|
}, [channel, subChannel, dropdownOptions, availableProofTypes]);
|
|
|
|
useEffect(() => {
|
|
if (isOpen) {
|
|
setFile(null);
|
|
setProofName('');
|
|
setChannel('');
|
|
setSubChannel('');
|
|
setProofType('');
|
|
if (fileInputRef.current) {
|
|
fileInputRef.current.value = '';
|
|
}
|
|
}
|
|
}, [isOpen]);
|
|
|
|
// Reset dependents when parent changes
|
|
useEffect(() => {
|
|
setSubChannel('');
|
|
setProofType('');
|
|
}, [channel]);
|
|
|
|
useEffect(() => {
|
|
if (!showProofType) {
|
|
setProofType('');
|
|
} else {
|
|
setProofType('');
|
|
}
|
|
}, [subChannel, showProofType]);
|
|
|
|
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
const selectedFile = event.target.files?.[0];
|
|
if (selectedFile) {
|
|
setFile(selectedFile);
|
|
}
|
|
};
|
|
|
|
const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
if (!isLoading && e.dataTransfer.files && e.dataTransfer.files.length > 0) {
|
|
setFile(e.dataTransfer.files[0]);
|
|
e.dataTransfer.clearData();
|
|
}
|
|
};
|
|
|
|
const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
};
|
|
|
|
const handleSubmit = (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (file && proofName && channel && subChannel) {
|
|
if (showProofType && !proofType) return;
|
|
onSubmit(file, proofName, channel, subChannel, showProofType ? proofType : undefined);
|
|
}
|
|
};
|
|
|
|
const isSubmitDisabled = !proofName || !file || !channel || !subChannel || (showProofType && !proofType) || isLoading;
|
|
const isNewVersion = existingProofNames.includes(proofName.trim()) && proofName.trim() !== '';
|
|
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
|
|
<div className="flex min-h-screen items-end justify-center px-4 pt-4 pb-20 text-center sm:block sm:p-0">
|
|
<div
|
|
className="fixed inset-0 bg-slate-900/75 backdrop-blur-sm transition-opacity"
|
|
aria-hidden="true"
|
|
onClick={onClose}
|
|
></div>
|
|
<span className="hidden sm:inline-block sm:h-screen sm:align-middle" aria-hidden="true">​</span>
|
|
|
|
<div className="relative inline-block transform overflow-hidden rounded-[10px] bg-white text-left align-bottom shadow-2xl transition-all sm:my-8 sm:w-full sm:max-w-2xl sm:align-middle border border-grey-300">
|
|
{/* Header */}
|
|
<div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4 border-b border-grey-300 flex justify-between items-start">
|
|
<div>
|
|
<h3 className="text-2xl font-bold text-primary-blue" id="modal-title">Upload New Proof</h3>
|
|
<p className="text-sm text-grey-900 mt-1">Drag and drop your asset below to start AI analysis.</p>
|
|
</div>
|
|
<button
|
|
onClick={onClose}
|
|
className="rounded-full p-2 text-grey-700 hover:bg-grey-100 hover:text-black-title transition-colors"
|
|
>
|
|
<XIcon className="h-6 w-6" />
|
|
</button>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<form onSubmit={handleSubmit}>
|
|
<div className="px-4 pt-5 pb-4 sm:p-8">
|
|
<div className="space-y-6">
|
|
{/* Proof Name */}
|
|
<div>
|
|
<label htmlFor="proof-name" className="block text-sm font-bold text-primary-blue mb-2">Proof Name</label>
|
|
<div className="relative">
|
|
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<DocumentIcon className="h-5 w-5 text-grey-700" />
|
|
</div>
|
|
<input
|
|
id="proof-name"
|
|
type="text"
|
|
value={proofName}
|
|
onChange={(e) => setProofName(e.target.value)}
|
|
placeholder="e.g., Q4 Hero Instagram Post"
|
|
disabled={isLoading}
|
|
className="w-full rounded-[10px] border-2 border-grey-700 shadow-sm focus:border-active-blue focus:ring-active-blue p-3 pl-10 bg-white transition-all text-black-title"
|
|
required
|
|
/>
|
|
</div>
|
|
{isNewVersion && (
|
|
<p className="text-xs text-active-blue mt-2 p-2 bg-info-light rounded-[10px] flex items-center gap-2">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-active-blue"></span>
|
|
A proof with this name already exists. This will be uploaded as a new version.
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Dropdowns Grid */}
|
|
<div className="grid grid-cols-1 gap-x-6 gap-y-6 sm:grid-cols-2">
|
|
<div>
|
|
<label htmlFor="proof-channel" className="block text-sm font-bold text-primary-blue mb-2">Channel</label>
|
|
<div className="relative">
|
|
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<ChannelIcon className="h-5 w-5 text-grey-700" />
|
|
</div>
|
|
<select
|
|
id="proof-channel"
|
|
value={channel}
|
|
onChange={(e) => setChannel(e.target.value)}
|
|
disabled={isLoading}
|
|
className="w-full rounded-[10px] border-2 border-grey-700 shadow-sm focus:border-active-blue focus:ring-active-blue p-3 pl-10 bg-white transition-all text-black-title appearance-none"
|
|
required
|
|
>
|
|
<option value="" disabled>Select Channel</option>
|
|
{availableChannels.map(opt => <option key={opt} value={opt}>{opt}</option>)}
|
|
</select>
|
|
<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-grey-700">
|
|
<ChevronDownIcon className="h-4 w-4" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label htmlFor="proof-sub-channel" className="block text-sm font-bold text-primary-blue mb-2">Sub-Channel</label>
|
|
<div className="relative">
|
|
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
|
|
<TagIcon className="h-5 w-5 text-grey-700" />
|
|
</div>
|
|
<select
|
|
id="proof-sub-channel"
|
|
value={subChannel}
|
|
onChange={(e) => setSubChannel(e.target.value)}
|
|
disabled={isLoading || !channel}
|
|
className="w-full rounded-[10px] border-2 border-grey-700 shadow-sm focus:border-active-blue focus:ring-active-blue p-3 pl-10 bg-white transition-all text-black-title appearance-none disabled:bg-grey-100 disabled:text-grey-700"
|
|
required
|
|
>
|
|
<option value="" disabled>Select Sub-Channel</option>
|
|
{availableSubChannels.map(opt => <option key={opt} value={opt}>{opt}</option>)}
|
|
</select>
|
|
<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-grey-700">
|
|
<ChevronDownIcon className="h-4 w-4" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="sm:col-span-2">
|
|
<label htmlFor="proof-type" className="block text-sm font-bold text-primary-blue mb-2">Proof Type</label>
|
|
<div className="relative">
|
|
<select
|
|
id="proof-type"
|
|
value={proofType}
|
|
onChange={(e) => setProofType(e.target.value)}
|
|
disabled={isLoading || !subChannel || availableProofTypes.length === 0}
|
|
className="w-full rounded-[10px] border-2 border-grey-700 shadow-sm focus:border-active-blue focus:ring-active-blue p-3 bg-white transition-all text-black-title appearance-none disabled:bg-grey-100 disabled:text-grey-700"
|
|
required={showProofType}
|
|
>
|
|
<option value="" disabled>
|
|
{!subChannel
|
|
? "Select a Sub-Channel first"
|
|
: availableProofTypes.length === 0
|
|
? "No proof types available"
|
|
: "Select Proof Type"
|
|
}
|
|
</option>
|
|
{availableProofTypes.map(opt => <option key={opt} value={opt}>{opt}</option>)}
|
|
</select>
|
|
<div className="pointer-events-none absolute inset-y-0 right-0 flex items-center px-3 text-grey-700">
|
|
<ChevronDownIcon className="h-4 w-4" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Drag & Drop Zone */}
|
|
<div>
|
|
<label className="block text-sm font-bold text-primary-blue mb-2">Proof File</label>
|
|
<div
|
|
onDragOver={handleDragOver}
|
|
onDrop={handleDrop}
|
|
className={`
|
|
relative mt-1 flex justify-center px-6 pt-10 pb-10 border-2 border-dashed rounded-[10px] transition-all group cursor-pointer
|
|
${file ? 'border-success bg-success-light' : 'border-grey-300 hover:bg-success-light/30 hover:border-success/50'}
|
|
`}
|
|
>
|
|
<input
|
|
id="file-upload"
|
|
name="file-upload"
|
|
type="file"
|
|
className="absolute inset-0 w-full h-full opacity-0 cursor-pointer"
|
|
ref={fileInputRef}
|
|
onChange={handleFileChange}
|
|
disabled={isLoading}
|
|
accept="image/png, image/jpeg, image/webp, image/gif, video/mp4, application/pdf"
|
|
/>
|
|
<div className="text-center space-y-2 pointer-events-none">
|
|
{!file ? (
|
|
<>
|
|
<div className="mx-auto h-16 w-16 bg-grey-100 text-grey-700 rounded-full flex items-center justify-center group-hover:scale-110 group-hover:text-success group-hover:bg-success-light transition-all duration-300">
|
|
<UploadIcon className="h-8 w-8" />
|
|
</div>
|
|
<div className="text-sm text-black-title">
|
|
<span className="font-bold text-success">Click to upload</span> or drag and drop
|
|
</div>
|
|
<p className="text-xs text-grey-700">SVG, PNG, JPG or GIF (max. 800x400px)</p>
|
|
</>
|
|
) : (
|
|
<>
|
|
<div className="mx-auto h-16 w-16 bg-success-light text-success rounded-full flex items-center justify-center scale-110 shadow-sm">
|
|
<CheckCircleIcon className="h-8 w-8" />
|
|
</div>
|
|
<div className="text-sm font-bold text-black-title truncate max-w-xs mx-auto">
|
|
{file.name}
|
|
</div>
|
|
<p className="text-xs text-grey-900">Ready for analysis</p>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<div className="bg-grey-100 px-4 py-4 sm:px-6 border-t border-grey-300 flex flex-col-reverse sm:flex-row sm:justify-end gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
disabled={isLoading}
|
|
className="w-full sm:w-auto border-2 border-active-blue text-active-blue font-semibold py-2.5 px-6 rounded-full hover:bg-active-blue hover:text-white transition-colors duration-300 disabled:opacity-50"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
disabled={isSubmitDisabled}
|
|
className="w-full sm:w-auto flex items-center justify-center bg-active-blue text-white font-bold py-2.5 px-6 rounded-full hover:bg-active-blue/90 shadow-lg shadow-active-blue/20 transition-all duration-300 disabled:bg-grey-300 disabled:text-grey-700 disabled:shadow-none disabled:cursor-not-allowed"
|
|
>
|
|
{isLoading ? (
|
|
<>
|
|
<SpinnerIcon className="animate-spin -ml-1 mr-2 h-5 w-5 text-white" />
|
|
Analyzing...
|
|
</>
|
|
) : 'Start Analysis'}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const LoadingCell: React.FC<{ progress: { completed: number; total: number } }> = ({ progress }) => {
|
|
const percent = progress.total > 0 ? Math.round((progress.completed / progress.total) * 100) : 0;
|
|
|
|
let statusText = 'Analyzing...';
|
|
if (progress.completed < AGENT_NAMES.length) {
|
|
const agentName = AGENT_NAMES[progress.completed];
|
|
statusText = `Analyzing: ${agentName}...`;
|
|
} else if (progress.completed === AGENT_NAMES.length) {
|
|
statusText = 'Lead Agent Review...';
|
|
} else {
|
|
statusText = 'Finalizing...';
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col items-center justify-center h-full px-2 text-center w-full">
|
|
<div className="w-full bg-grey-300 rounded-full h-1.5 mb-1.5">
|
|
<div
|
|
className="bg-active-blue h-1.5 rounded-full"
|
|
style={{ width: `${percent}%`, transition: 'width 0.3s ease-in-out' }}
|
|
></div>
|
|
</div>
|
|
<span className="text-xs text-black-title truncate w-full">{statusText} ({percent}%)</span>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const DeleteConfirmationModal: React.FC<{
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onConfirm: () => void;
|
|
proofName: string;
|
|
}> = ({ isOpen, onClose, onConfirm, proofName }) => {
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 bg-black bg-opacity-60 flex items-center justify-center z-50 transition-opacity duration-300"
|
|
onClick={onClose}
|
|
aria-modal="true"
|
|
role="dialog"
|
|
>
|
|
<div
|
|
className="bg-white rounded-[10px] shadow-xl p-6 sm:p-8 w-full max-w-md transform transition-all"
|
|
onClick={e => e.stopPropagation()}
|
|
>
|
|
<h3 className="text-xl font-bold text-primary-blue">Confirm Deletion</h3>
|
|
<p className="text-black-title my-4">
|
|
Are you sure you want to permanently delete the proof "{proofName}"? This action cannot be undone.
|
|
</p>
|
|
<div className="mt-6 flex justify-end gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="border-2 border-active-blue text-active-blue font-semibold py-2 px-6 rounded-full hover:bg-active-blue hover:text-white transition-colors"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={onConfirm}
|
|
className="bg-error text-white font-semibold py-2 px-6 rounded-full hover:bg-error/90 transition-colors"
|
|
>
|
|
Delete Proof
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const CampaignDeleteConfirmationModal: React.FC<{
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
onConfirm: () => void;
|
|
campaignName: string;
|
|
proofCount: number;
|
|
isBulk: boolean;
|
|
selectedCount: number;
|
|
}> = ({ isOpen, onClose, onConfirm, campaignName, proofCount, isBulk, selectedCount }) => {
|
|
if (!isOpen) return null;
|
|
|
|
return (
|
|
<div
|
|
className="fixed inset-0 bg-black bg-opacity-60 flex items-center justify-center z-50 transition-opacity duration-300"
|
|
onClick={onClose}
|
|
aria-modal="true"
|
|
role="dialog"
|
|
>
|
|
<div
|
|
className="bg-white rounded-[10px] shadow-xl p-6 sm:p-8 w-full max-w-md transform transition-all"
|
|
onClick={e => e.stopPropagation()}
|
|
>
|
|
<h3 className="text-xl font-bold text-primary-blue">Confirm Deletion</h3>
|
|
<p className="text-black-title my-4">
|
|
{isBulk ? (
|
|
<>Are you sure you want to permanently delete <strong>{selectedCount} selected campaign{selectedCount !== 1 ? 's' : ''}</strong>? All associated proofs will also be deleted. This action cannot be undone.</>
|
|
) : (
|
|
<>Are you sure you want to permanently delete the campaign "<strong>{campaignName}</strong>"? {proofCount > 0 && <>This will also delete <strong>{proofCount} proof{proofCount !== 1 ? 's' : ''}</strong>.</>} This action cannot be undone.</>
|
|
)}
|
|
</p>
|
|
<div className="mt-6 flex justify-end gap-3">
|
|
<button
|
|
type="button"
|
|
onClick={onClose}
|
|
className="border-2 border-active-blue text-active-blue font-semibold py-2 px-6 rounded-full hover:bg-active-blue hover:text-white transition-colors"
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={onConfirm}
|
|
className="bg-error text-white font-semibold py-2 px-6 rounded-full hover:bg-error/90 transition-colors"
|
|
>
|
|
{isBulk ? `Delete ${selectedCount} Campaign${selectedCount !== 1 ? 's' : ''}` : 'Delete Campaign'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const CampaignDetail: React.FC<{
|
|
campaignName: string;
|
|
onBack: () => void;
|
|
onSelectProof: (proof: any) => void;
|
|
campaignProofs: { [key: string]: any[] };
|
|
onProofUpload: (file: File, proofName: string, channel: string, subChannel: string, proofType?: string) => void;
|
|
dropdownOptions: DropdownOptions;
|
|
onRetryAnalysis: (campaignName: string, tempId: string) => void;
|
|
onDeleteProof: (campaignName: string, proofName: string) => void;
|
|
}> = ({ campaignName, onBack, onSelectProof, campaignProofs, onProofUpload, dropdownOptions, onRetryAnalysis, onDeleteProof }) => {
|
|
const [isUploadFormVisible, setIsUploadFormVisible] = useState(false);
|
|
const [proofToDelete, setProofToDelete] = useState<any | null>(null);
|
|
const [proofForUpload, setProofForUpload] = useState<any | null>(null);
|
|
const [isExporting, setIsExporting] = useState(false);
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
const proofs = campaignProofs[campaignName] || [];
|
|
const isUploading = proofs.some(proof => proof.status === 'analyzing');
|
|
const existingProofNames = proofs
|
|
.filter(proof => proof.status === 'completed')
|
|
.map(proof => proof.proofName);
|
|
|
|
const handleConfirmDelete = () => {
|
|
if (proofToDelete) {
|
|
onDeleteProof(campaignName, proofToDelete.proofName);
|
|
setProofToDelete(null);
|
|
}
|
|
};
|
|
|
|
const handleNewVersionClick = (e: React.MouseEvent, proof: any) => {
|
|
e.stopPropagation();
|
|
setProofForUpload(proof);
|
|
fileInputRef.current?.click();
|
|
};
|
|
|
|
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = event.target.files?.[0];
|
|
if (file && proofForUpload) {
|
|
onProofUpload(
|
|
file,
|
|
proofForUpload.proofName,
|
|
proofForUpload.channel,
|
|
proofForUpload.subChannel,
|
|
proofForUpload.proofType
|
|
);
|
|
}
|
|
setProofForUpload(null);
|
|
if (event.target) {
|
|
event.target.value = '';
|
|
}
|
|
};
|
|
|
|
const handleExportPDF = async (proofsToExport: any[], fileName: string) => {
|
|
setIsExporting(true);
|
|
|
|
const reportRootEl = document.createElement('div');
|
|
reportRootEl.style.position = 'absolute';
|
|
reportRootEl.style.left = '-9999px';
|
|
reportRootEl.style.top = '0px';
|
|
reportRootEl.style.zIndex = '-1';
|
|
document.body.appendChild(reportRootEl);
|
|
|
|
const reactRoot = ReactDOM.createRoot(reportRootEl);
|
|
|
|
try {
|
|
const proofsWithLatestVersion = proofsToExport.map(p => ({
|
|
...p,
|
|
versions: [p.versions[0]], // Only render the latest version
|
|
}));
|
|
|
|
reactRoot.render(<PDFReport campaignName={campaignName} proofs={proofsWithLatestVersion} />);
|
|
|
|
await new Promise(resolve => setTimeout(resolve, 1000)); // Wait for render and images
|
|
|
|
const { default: jspdf } = await import('jspdf');
|
|
const { default: html2canvas } = await import('html2canvas');
|
|
|
|
const reportContent = reportRootEl.children[0] as HTMLElement;
|
|
if (!reportContent) throw new Error("PDF report element not found");
|
|
|
|
const canvas = await html2canvas(reportContent, { scale: 2, useCORS: true });
|
|
|
|
const imgData = canvas.toDataURL('image/png');
|
|
const pdf = new jspdf('p', 'mm', 'a4', true);
|
|
const pdfWidth = pdf.internal.pageSize.getWidth();
|
|
const pdfHeight = pdf.internal.pageSize.getHeight();
|
|
const canvasWidth = canvas.width;
|
|
const canvasHeight = canvas.height;
|
|
const ratio = canvasWidth / pdfWidth;
|
|
const pagedCanvasHeight = canvasHeight / ratio;
|
|
|
|
let heightLeft = pagedCanvasHeight;
|
|
let position = 0;
|
|
|
|
pdf.addImage(imgData, 'PNG', 0, position, pdfWidth, pagedCanvasHeight, undefined, 'FAST');
|
|
heightLeft -= pdfHeight;
|
|
|
|
while (heightLeft > 0) {
|
|
position -= pdfHeight;
|
|
pdf.addPage();
|
|
pdf.addImage(imgData, 'PNG', 0, position, pdfWidth, pagedCanvasHeight, undefined, 'FAST');
|
|
heightLeft -= pdfHeight;
|
|
}
|
|
|
|
pdf.save(`${fileName.replace(/[^a-zA-Z0-9]/g, '_')}.pdf`);
|
|
|
|
} catch (error) {
|
|
console.error("Failed to generate PDF:", error);
|
|
alert("Sorry, there was an error creating the PDF. Please try again.");
|
|
} finally {
|
|
reactRoot.unmount();
|
|
document.body.removeChild(reportRootEl);
|
|
setIsExporting(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="p-4 sm:p-6 lg:p-8 h-full bg-grey-100">
|
|
<DeleteConfirmationModal
|
|
isOpen={!!proofToDelete}
|
|
onClose={() => setProofToDelete(null)}
|
|
onConfirm={handleConfirmDelete}
|
|
proofName={proofToDelete?.proofName || ''}
|
|
/>
|
|
|
|
<input
|
|
type="file"
|
|
ref={fileInputRef}
|
|
onChange={handleFileChange}
|
|
className="hidden"
|
|
accept="image/png, image/jpeg, image/webp, image/gif, video/mp4, application/pdf"
|
|
disabled={isUploading}
|
|
/>
|
|
|
|
<header className="mb-8">
|
|
<div className="flex items-center gap-4">
|
|
<button
|
|
onClick={onBack}
|
|
className="p-2 text-grey-700 rounded-full hover:bg-grey-300 hover:text-primary-blue transition-colors duration-200"
|
|
title="Back to campaigns"
|
|
aria-label="Back to campaigns list"
|
|
>
|
|
<ArrowLeftIcon className="h-6 w-6" />
|
|
</button>
|
|
<div>
|
|
<h1 className="text-3xl lg:text-4xl font-bold text-primary-blue">{campaignName}</h1>
|
|
<p className="text-base lg:text-lg text-grey-900 mt-1">Proof overview and compliance status.</p>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<UploadProofModal
|
|
isOpen={isUploadFormVisible}
|
|
onClose={() => setIsUploadFormVisible(false)}
|
|
dropdownOptions={dropdownOptions}
|
|
onSubmit={(file, proofName, channel, subChannel, proofType) => {
|
|
onProofUpload(file, proofName, channel, subChannel, proofType);
|
|
setIsUploadFormVisible(false);
|
|
}}
|
|
isLoading={isUploading}
|
|
existingProofNames={existingProofNames}
|
|
/>
|
|
|
|
<section>
|
|
<div className="mb-6 flex justify-end gap-3">
|
|
<button
|
|
onClick={() => handleExportPDF(proofs.filter(p => p.status === 'completed'), `${campaignName} - Campaign Report`)}
|
|
disabled={isExporting || proofs.filter(p => p.status === 'completed').length === 0}
|
|
className="flex items-center gap-2 bg-white text-active-blue font-semibold py-2 px-4 rounded-full border-2 border-active-blue hover:bg-active-blue hover:text-white transition-colors duration-300 disabled:bg-grey-300 disabled:text-grey-700 disabled:border-grey-300 disabled:cursor-wait"
|
|
>
|
|
{isExporting ? <SpinnerIcon className="h-5 w-5 custom-spinner" /> : <ExportIcon className="h-5 w-5" />}
|
|
{isExporting ? 'Exporting...' : 'Export Campaign Report'}
|
|
</button>
|
|
<button
|
|
onClick={() => setIsUploadFormVisible(true)}
|
|
className="flex items-center gap-2 bg-active-blue text-white font-semibold py-2 px-4 rounded-full hover:bg-active-blue/90 transition-colors duration-300"
|
|
>
|
|
<PlusIcon className="h-5 w-5" />
|
|
Upload New Proof
|
|
</button>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-[10px] shadow-md overflow-hidden border border-grey-300">
|
|
<div className="overflow-x-auto">
|
|
<table className="min-w-full divide-y divide-grey-300">
|
|
<thead className="bg-lime">
|
|
<tr>
|
|
<th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Proof Name</th>
|
|
<th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Workfront #</th>
|
|
<th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Channel</th>
|
|
<th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Sub-Channel</th>
|
|
<th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Proof Type</th>
|
|
<th scope="col" className="px-6 py-3 text-left text-xs font-bold text-black-title uppercase tracking-wider">Overall Status</th>
|
|
<th scope="col" className="relative px-6 py-3"><span className="sr-only">Actions</span></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-white divide-y divide-grey-300">
|
|
{proofs.map((proof, index) => {
|
|
if (proof.status === 'analyzing') {
|
|
return (
|
|
<tr key={proof.tempId} className="bg-grey-100 opacity-80">
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-primary-blue">{proof.proofName}</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-grey-700 italic">Pending</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{proof.channel}</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{proof.subChannel}</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{proof.proofType || 'N/A'}</td>
|
|
<td className="px-6 py-4" colSpan={2}>
|
|
{proof.analysisProgress ?
|
|
<LoadingCell progress={proof.analysisProgress} /> :
|
|
<div className="flex justify-center items-center h-full">
|
|
<SpinnerIcon className="h-5 w-5 text-active-blue custom-spinner" />
|
|
<span className="ml-2 text-sm text-grey-900">Preparing...</span>
|
|
</div>
|
|
}
|
|
</td>
|
|
</tr>
|
|
);
|
|
}
|
|
|
|
if (proof.status === 'error') {
|
|
return (
|
|
<tr key={proof.tempId} className="bg-error-light">
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-primary-blue">{proof.proofName}</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-grey-700 italic">Failed</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{proof.channel}</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{proof.subChannel}</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{proof.proofType || 'N/A'}</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-error font-semibold" colSpan={2}>
|
|
<div className="flex items-center justify-between">
|
|
<span>Analysis failed.</span>
|
|
<button
|
|
onClick={() => onRetryAnalysis(campaignName, proof.tempId)}
|
|
className="flex items-center gap-1.5 text-xs font-semibold text-active-blue hover:text-primary-blue whitespace-nowrap px-3 py-1.5 rounded-full bg-active-blue/10 hover:bg-active-blue/20 transition-colors"
|
|
>
|
|
<ArrowPathIcon className="h-4 w-4" />
|
|
Retry
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
);
|
|
}
|
|
|
|
const isVersioned = proof.versions && proof.versions.length > 0;
|
|
const latestVersion = isVersioned ? proof.versions[0] : null;
|
|
const isClickable = isVersioned;
|
|
|
|
if (!latestVersion) return null; // Should not happen for completed proofs
|
|
|
|
return (
|
|
<tr
|
|
key={latestVersion.workfrontId || index}
|
|
className={`${index % 2 === 0 ? 'bg-white' : 'bg-grey-100'} ${isClickable ? "hover:bg-info-light cursor-pointer" : ""}`}
|
|
onClick={() => isClickable && onSelectProof(proof)}
|
|
>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-primary-blue">
|
|
{proof.proofName}
|
|
{isVersioned && (
|
|
<span className="ml-2 bg-grey-300 text-black-title text-xs font-bold px-2 py-0.5 rounded-full">
|
|
V{latestVersion.version}
|
|
</span>
|
|
)}
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{latestVersion.workfrontId}</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{proof.channel}</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{proof.subChannel}</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-black-title">{proof.proofType || 'N/A'}</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm">
|
|
<OverallStatusBadge status={latestVersion.overallStatus} />
|
|
</td>
|
|
<td className="px-6 py-4 whitespace-nowrap text-sm text-right">
|
|
<div className="flex items-center justify-end gap-1">
|
|
<button
|
|
onClick={(e) => handleNewVersionClick(e, proof)}
|
|
className="p-2 text-grey-700 rounded-full hover:bg-info-light hover:text-active-blue transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
|
title={`Upload new version for ${proof.proofName}`}
|
|
disabled={isUploading || isExporting}
|
|
>
|
|
<UploadIcon className="h-5 w-5" />
|
|
</button>
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleExportPDF([proof], `${campaignName} - ${proof.proofName} Report`);
|
|
}}
|
|
disabled={isExporting}
|
|
className="p-2 text-grey-700 rounded-full hover:bg-success-light hover:text-success transition-colors disabled:opacity-50 disabled:cursor-wait"
|
|
title={`Export PDF for ${proof.proofName}`}
|
|
>
|
|
<PDFIcon className="h-5 w-5" />
|
|
</button>
|
|
<button
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setProofToDelete(proof);
|
|
}}
|
|
disabled={isExporting}
|
|
className="p-2 text-grey-700 rounded-full hover:bg-error-light hover:text-error transition-colors disabled:opacity-50"
|
|
title={`Delete ${proof.proofName}`}
|
|
>
|
|
<TrashIcon className="h-5 w-5" />
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const ProofDetailView: React.FC<{
|
|
campaignName: string;
|
|
proof: any;
|
|
onBack: () => void;
|
|
onNewVersionUpload: (file: File) => void;
|
|
isUploadingNewVersion: boolean;
|
|
onFlagSubmit: (flagData: Omit<FlaggedItem, 'id' | 'timestamp' | 'submitter' | 'submitAgency'>) => void;
|
|
onResolveSubmit: (resolveData: Omit<ResolvedItem, 'id' | 'timestamp' | 'submitter' | 'submitAgency'>) => void;
|
|
}> = ({ campaignName, proof, onBack, onNewVersionUpload, isUploadingNewVersion, onFlagSubmit, onResolveSubmit }) => {
|
|
|
|
const getInitialVersionIndex = () => {
|
|
if (proof.initialVersion && proof.versions) {
|
|
const index = proof.versions.findIndex((v: any) => v.version === proof.initialVersion);
|
|
return index > -1 ? index : 0;
|
|
}
|
|
return 0; // Default to the latest version (index 0)
|
|
};
|
|
|
|
const [selectedVersionIndex, setSelectedVersionIndex] = useState(getInitialVersionIndex);
|
|
const [isExporting, setIsExporting] = useState(false);
|
|
const fileInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
const handleUploadClick = () => {
|
|
fileInputRef.current?.click();
|
|
};
|
|
|
|
const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = event.target.files?.[0];
|
|
if (file) {
|
|
onNewVersionUpload(file);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
// When proof versions change (e.g., new upload), reset to show the latest version.
|
|
setSelectedVersionIndex(0);
|
|
}, [proof.versions]);
|
|
|
|
const versions = proof.versions || [];
|
|
const selectedVersion = versions[selectedVersionIndex];
|
|
|
|
// Load PDF pages on-demand for PDF files
|
|
const { pdfPages } = usePdfPages(selectedVersion?.fileStorageKey);
|
|
|
|
const handleFlagSubmitWrapper = (agentName: string, comments: string) => {
|
|
onFlagSubmit({
|
|
campaignName,
|
|
proofName: proof.proofName,
|
|
version: selectedVersion.version,
|
|
agentFlagged: agentName,
|
|
comments,
|
|
});
|
|
};
|
|
|
|
const handleResolveSubmitWrapper = (agentName: string, issueText: string, reason: string) => {
|
|
onResolveSubmit({
|
|
campaignName,
|
|
proofName: proof.proofName,
|
|
version: selectedVersion.version,
|
|
agent: agentName,
|
|
issue: issueText,
|
|
resolution: reason,
|
|
});
|
|
};
|
|
|
|
const handleDownload = async () => {
|
|
const fileName = `${proof.proofName}_V${selectedVersion.version}`;
|
|
const storageKey = selectedVersion.fileStorageKey;
|
|
|
|
try {
|
|
// Prefer fetching the original file from backend storage
|
|
if (storageKey) {
|
|
const file = await apiService.getFile(storageKey);
|
|
const blobUrl = URL.createObjectURL(file);
|
|
const link = document.createElement('a');
|
|
link.href = blobUrl;
|
|
const ext = storageKey.split('.').pop() || 'png';
|
|
link.download = `${fileName}.${ext}`;
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
URL.revokeObjectURL(blobUrl);
|
|
return;
|
|
}
|
|
|
|
// Fallback to preview URL if no storage key (legacy data)
|
|
const url = selectedVersion.proofPreviewUrl;
|
|
if (url.startsWith('data:')) {
|
|
// Data URL - extract mime type and download directly
|
|
const link = document.createElement('a');
|
|
link.href = url;
|
|
const mimeMatch = url.match(/data:([^;]+)/);
|
|
const ext = mimeMatch ? mimeMatch[1].split('/')[1] : 'png';
|
|
link.download = `${fileName}.${ext}`;
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
} else {
|
|
// Remote URL - fetch as blob to handle CORS and ensure download
|
|
const response = await fetch(url);
|
|
const blob = await response.blob();
|
|
const blobUrl = URL.createObjectURL(blob);
|
|
const link = document.createElement('a');
|
|
link.href = blobUrl;
|
|
const ext = url.split('.').pop()?.split('?')[0] || 'png';
|
|
link.download = `${fileName}.${ext}`;
|
|
document.body.appendChild(link);
|
|
link.click();
|
|
document.body.removeChild(link);
|
|
URL.revokeObjectURL(blobUrl);
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to download file:', error);
|
|
alert('Sorry, there was an error downloading the file. Please try again.');
|
|
}
|
|
};
|
|
|
|
const handleDownloadReport = async () => {
|
|
setIsExporting(true);
|
|
|
|
const reportRootEl = document.createElement('div');
|
|
reportRootEl.style.position = 'absolute';
|
|
reportRootEl.style.left = '-9999px';
|
|
reportRootEl.style.top = '0px';
|
|
reportRootEl.style.zIndex = '-1';
|
|
document.body.appendChild(reportRootEl);
|
|
|
|
const reactRoot = ReactDOM.createRoot(reportRootEl);
|
|
|
|
try {
|
|
const proofForReport = {
|
|
...proof,
|
|
versions: [selectedVersion],
|
|
};
|
|
|
|
reactRoot.render(<PDFReport campaignName={campaignName} proofs={[proofForReport]} />);
|
|
|
|
await new Promise(resolve => setTimeout(resolve, 1000));
|
|
|
|
const { default: jspdf } = await import('jspdf');
|
|
const { default: html2canvas } = await import('html2canvas');
|
|
|
|
const reportContent = reportRootEl.children[0] as HTMLElement;
|
|
if (!reportContent) throw new Error("PDF report element not found");
|
|
|
|
const canvas = await html2canvas(reportContent, { scale: 2, useCORS: true });
|
|
|
|
const imgData = canvas.toDataURL('image/png');
|
|
const pdf = new jspdf('p', 'mm', 'a4', true);
|
|
const pdfWidth = pdf.internal.pageSize.getWidth();
|
|
const pdfHeight = pdf.internal.pageSize.getHeight();
|
|
const ratio = canvas.width / pdfWidth;
|
|
const pagedCanvasHeight = canvas.height / ratio;
|
|
|
|
let heightLeft = pagedCanvasHeight;
|
|
let position = 0;
|
|
|
|
pdf.addImage(imgData, 'PNG', 0, position, pdfWidth, pagedCanvasHeight, undefined, 'FAST');
|
|
heightLeft -= pdfHeight;
|
|
|
|
while (heightLeft > 0) {
|
|
position -= pdfHeight;
|
|
pdf.addPage();
|
|
pdf.addImage(imgData, 'PNG', 0, position, pdfWidth, pagedCanvasHeight, undefined, 'FAST');
|
|
heightLeft -= pdfHeight;
|
|
}
|
|
|
|
const fileName = `${campaignName} - ${proof.proofName} V${selectedVersion.version} Report`;
|
|
pdf.save(`${fileName.replace(/[^a-zA-Z0-9]/g, '_')}.pdf`);
|
|
|
|
} catch (error) {
|
|
console.error("Failed to generate PDF:", error);
|
|
alert("Sorry, there was an error creating the PDF. Please try again.");
|
|
} finally {
|
|
reactRoot.unmount();
|
|
document.body.removeChild(reportRootEl);
|
|
setIsExporting(false);
|
|
}
|
|
};
|
|
|
|
if (!selectedVersion) {
|
|
return (
|
|
<div className="p-8">
|
|
<p>Error: This proof has no versions to display.</p>
|
|
<button onClick={onBack}>Go Back</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="p-4 sm:p-6 lg:p-8 h-full bg-grey-100">
|
|
<header className="mb-8">
|
|
<div className="flex items-center gap-4">
|
|
<button
|
|
onClick={onBack}
|
|
className="p-2 text-grey-700 rounded-full hover:bg-grey-300 hover:text-primary-blue transition-colors duration-200"
|
|
title="Back to campaign details"
|
|
aria-label="Back to campaign details"
|
|
>
|
|
<ArrowLeftIcon className="h-6 w-6" />
|
|
</button>
|
|
<div>
|
|
<h1 className="text-3xl lg:text-4xl font-bold text-primary-blue">{proof.proofName}</h1>
|
|
<div className="flex items-center gap-2 mt-2 text-sm text-grey-700 font-medium">
|
|
<span>{proof.channel}</span>
|
|
<span className="text-grey-300">•</span>
|
|
<span>{proof.subChannel}</span>
|
|
{proof.proofType && (
|
|
<>
|
|
<span className="text-grey-300">•</span>
|
|
<span>{proof.proofType}</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<div className="max-w-screen-2xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-x-12">
|
|
<div className="lg:col-span-1">
|
|
<div className="sticky top-8 flex flex-col gap-y-6">
|
|
<div>
|
|
<h2 className="text-2xl font-bold text-primary-blue mb-4">
|
|
Proof Preview
|
|
</h2>
|
|
<ProofPreview
|
|
previewUrl={selectedVersion.proofPreviewUrl}
|
|
fileName={`${proof.proofName} - V${selectedVersion.version}`}
|
|
pdfPages={pdfPages}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<div className="flex items-center justify-between mb-3 gap-2">
|
|
<h3 className="text-xl font-bold text-primary-blue flex items-center gap-2">
|
|
<HistoryIcon className="h-6 w-6 text-active-blue"/>
|
|
Version History
|
|
</h3>
|
|
<div className="flex items-center gap-2">
|
|
<button
|
|
onClick={handleDownload}
|
|
className="flex items-center gap-2 text-sm bg-active-blue text-white font-semibold py-1.5 px-3 rounded-full border border-transparent hover:bg-active-blue/90 transition-colors duration-200"
|
|
title={`Download Version ${selectedVersion.version}`}
|
|
>
|
|
<DownloadIcon className="h-4 w-4" />
|
|
Download Asset
|
|
</button>
|
|
<button
|
|
onClick={handleDownloadReport}
|
|
disabled={isExporting}
|
|
className="flex items-center gap-2 text-sm bg-white text-active-blue font-semibold py-1.5 px-3 rounded-full border-2 border-active-blue hover:bg-active-blue hover:text-white transition-colors duration-200 disabled:bg-grey-300 disabled:text-grey-700 disabled:border-grey-300 disabled:cursor-wait"
|
|
title={`Download Report for Version ${selectedVersion.version}`}
|
|
>
|
|
{isExporting ? (
|
|
<>
|
|
<SpinnerIcon className="h-4 w-4 custom-spinner" />
|
|
Exporting...
|
|
</>
|
|
) : (
|
|
<>
|
|
<DocumentIcon className="h-4 w-4" />
|
|
Download Report
|
|
</>
|
|
)}
|
|
</button>
|
|
<button
|
|
onClick={handleUploadClick}
|
|
disabled={isUploadingNewVersion}
|
|
className="flex items-center gap-2 text-sm bg-white text-active-blue font-semibold py-1.5 px-3 rounded-full border-2 border-active-blue hover:bg-active-blue hover:text-white transition-colors duration-200 disabled:bg-grey-300 disabled:text-grey-700 disabled:border-grey-300 disabled:cursor-wait"
|
|
title="Upload a new version of this proof"
|
|
>
|
|
{isUploadingNewVersion ? (
|
|
<>
|
|
<SpinnerIcon className="h-4 w-4 custom-spinner" />
|
|
Uploading...
|
|
</>
|
|
) : (
|
|
<>
|
|
<UploadIcon className="h-4 w-4" />
|
|
New Version
|
|
</>
|
|
)}
|
|
</button>
|
|
</div>
|
|
<input
|
|
type="file"
|
|
ref={fileInputRef}
|
|
onChange={handleFileChange}
|
|
className="hidden"
|
|
accept="image/png, image/jpeg, image/webp, image/gif, video/mp4, application/pdf"
|
|
disabled={isUploadingNewVersion}
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
{versions.map((version: any, index: number) => {
|
|
const isActive = index === selectedVersionIndex;
|
|
return (
|
|
<button
|
|
key={version.version}
|
|
onClick={() => setSelectedVersionIndex(index)}
|
|
className={`w-full text-left p-3 rounded-[10px] border-2 transition-all ${
|
|
isActive
|
|
? 'bg-info-light border-active-blue shadow-sm'
|
|
: 'bg-white border-grey-300 hover:border-active-blue/50 hover:bg-grey-100'
|
|
}`}
|
|
>
|
|
<div className="flex justify-between items-center">
|
|
<p className={`font-bold ${isActive ? 'text-primary-blue' : 'text-black-title'}`}>Version {version.version}</p>
|
|
<p className="text-xs text-grey-700">{version.timestamp}</p>
|
|
</div>
|
|
<p className="text-sm text-grey-900 mt-1">Workfront ID: {version.workfrontId}</p>
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-12 lg:mt-0 lg:col-span-2">
|
|
{selectedVersion.isIdenticalFile && (
|
|
<div className="mb-6 bg-warning-light border border-warning rounded-[10px] p-4 flex items-start gap-3">
|
|
<ExclamationTriangleIcon className="w-5 h-5 text-warning flex-shrink-0 mt-0.5" />
|
|
<div>
|
|
<p className="font-semibold text-black-title">Identical File Detected</p>
|
|
<p className="text-sm text-grey-900 mt-1">
|
|
This file is exactly the same as the previous version.
|
|
The analysis results shown are from the new analysis,
|
|
but no changes were made to the creative.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
<FeedbackReport
|
|
feedback={selectedVersion.feedback}
|
|
onFlagSubmit={handleFlagSubmitWrapper}
|
|
onResolveSubmit={handleResolveSubmitWrapper}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
};
|
|
|
|
|
|
interface CampaignsProps {
|
|
selectedCampaign: string | null;
|
|
selectedProof: any | null;
|
|
onSelectCampaign: (campaignName: string) => void;
|
|
onSelectProof: (proof: any) => void;
|
|
onBackToCampaignsList: () => void;
|
|
onBackToCampaignDetails: () => void;
|
|
campaigns: typeof initialCampaigns;
|
|
campaignProofs: typeof initialCampaignProofs;
|
|
onAddNewCampaign: (campaignData: { name: string; workfrontId: string; clientLead: string; brandGuidelines: string; }) => void;
|
|
onProofUpload: (campaignName: string, file: File, proofName: string, channel: string, subChannel: string, proofType?: string) => void;
|
|
dropdownOptions: DropdownOptions;
|
|
onRetryAnalysis: (campaignName: string, tempId: string) => void;
|
|
onCampaignStatusChange: (campaignName: string, newStatus: 'In Progress' | 'Completed') => void;
|
|
onDeleteProof: (campaignName: string, proofName: string) => void;
|
|
onDeleteCampaign: (campaignName: string) => Promise<void>;
|
|
onFlagSubmit: (flagData: Omit<FlaggedItem, 'id' | 'timestamp' | 'submitter' | 'submitAgency'>) => void;
|
|
onResolveSubmit: (resolveData: Omit<ResolvedItem, 'id' | 'timestamp' | 'submitter' | 'submitAgency'>) => void;
|
|
}
|
|
|
|
export const Campaigns: React.FC<CampaignsProps> = ({
|
|
selectedCampaign,
|
|
selectedProof,
|
|
onSelectCampaign,
|
|
onSelectProof,
|
|
onBackToCampaignsList,
|
|
onBackToCampaignDetails,
|
|
campaigns,
|
|
campaignProofs,
|
|
onAddNewCampaign,
|
|
onProofUpload,
|
|
dropdownOptions,
|
|
onRetryAnalysis,
|
|
onCampaignStatusChange,
|
|
onDeleteProof,
|
|
onDeleteCampaign,
|
|
onFlagSubmit,
|
|
onResolveSubmit,
|
|
}) => {
|
|
|
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
|
|
if (selectedCampaign && selectedProof) {
|
|
const handleNewVersionUpload = (file: File) => {
|
|
onProofUpload(
|
|
selectedCampaign,
|
|
file,
|
|
selectedProof.proofName,
|
|
selectedProof.channel,
|
|
selectedProof.subChannel,
|
|
selectedProof.proofType
|
|
);
|
|
};
|
|
|
|
const isUploadingNewVersion = campaignProofs[selectedCampaign]?.some(
|
|
proof => (proof.status === 'analyzing' || proof.status === 'loading') && proof.proofName === selectedProof.proofName
|
|
);
|
|
|
|
return <ProofDetailView
|
|
campaignName={selectedCampaign}
|
|
proof={selectedProof}
|
|
onBack={onBackToCampaignDetails}
|
|
onNewVersionUpload={handleNewVersionUpload}
|
|
isUploadingNewVersion={isUploadingNewVersion}
|
|
onFlagSubmit={onFlagSubmit}
|
|
onResolveSubmit={onResolveSubmit}
|
|
/>;
|
|
}
|
|
|
|
if (selectedCampaign) {
|
|
return <CampaignDetail
|
|
campaignName={selectedCampaign}
|
|
onBack={onBackToCampaignsList}
|
|
onSelectProof={onSelectProof}
|
|
campaignProofs={campaignProofs}
|
|
onProofUpload={(file, proofName, channel, subChannel, proofType) => onProofUpload(selectedCampaign, file, proofName, channel, subChannel, proofType)}
|
|
dropdownOptions={dropdownOptions}
|
|
onRetryAnalysis={onRetryAnalysis}
|
|
onDeleteProof={onDeleteProof}
|
|
/>;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<CreateCampaignModal
|
|
isOpen={isModalOpen}
|
|
onClose={() => setIsModalOpen(false)}
|
|
onAddCampaign={onAddNewCampaign}
|
|
brandGuidelines={dropdownOptions.brandGuidelines}
|
|
/>
|
|
<CampaignList
|
|
onSelectCampaign={onSelectCampaign}
|
|
campaigns={campaigns}
|
|
onOpenModal={() => setIsModalOpen(true)}
|
|
onCampaignStatusChange={onCampaignStatusChange}
|
|
onDeleteCampaign={(campaign) => onDeleteCampaign(campaign.name)}
|
|
/>
|
|
</>
|
|
);
|
|
};
|