Feature #6903
Updated by Vijay Chandra 16 days ago
Enhance overall user experience and data reliability across Campaigns, Email Template Editor, and Scrape History modules by improving visual feedback, preventing data loss, and fixing critical preview and rendering issues. *1. #*1. Campaigns Page – Status Feedback & Data Persistence* *Objective* #*Objective* Improve campaign execution visibility and ensure manually added leads are not lost during campaign edits. *Changes #*Changes Implemented* *Dynamic #*Dynamic Status & Time Estimation* * Added a *green “Completed” status indicator* when: * `progress === 100` * `total_leads > 0` * Implemented a real-time **estimated time remaining** indicator (e.g., `~5 min left`) calculated as: ``` (Total Leads – Sent Leads) × 10 seconds ``` * Improved visual clarity by adding `Timer` and `CheckCircle2` icons from **lucide-react* # *Manual Lead Persistence* * Extended the Campaign schema to store manually added emails: ```js manual_emails: [String] ``` * Updated the campaign edit form to **pre-fill manual emails**, ensuring no data loss when updating campaigns. # *Files Modified* * `src/components/campaigns/CampaignCard.jsx` * `src/pages/Campaigns.jsx` * `server/models/Campaign.js` * `src/components/campaigns/CampaignForm.jsx` --- # *2. Email Template Editor – UI Enhancements & Preview Normalization* # *Objective* Refine variable controls to match design requirements and fix a critical preview rendering issue that caused malformed content on first load. # *Changes Implemented* # **Variable Usage Controls** * Replaced static variable badges with **interactive control pills*: *Plus (+): Inserts another instance of the variable *Minus (–): Removes the last occurrence from the body *Count: Displays total usage across subject and body * Active variables are highlighted with a *bold orange outline* (`border-orange-500`) and distinct control buttons. # *Robust Variable Parsing* * Fixed detection issues for variables with whitespace (e.g., `{{ first_name }}`). * Updated regex logic to be **whitespace-agnostic** across: * Variable extraction * Count calculation * Variable removal #*Preview Normalization (Critical Fix)* *Issue:* Preview tab rendered broken or raw content when opened immediately after loading a template. *Solution:* * Introduced a **decoupled `normalizedBody` state** for preview rendering. * Implemented a `normalizeContent` helper to: * Convert plain text newlines into valid HTML paragraphs (`<p>`) * Apply consistent structure before rendering * Preview renderer now reads from `normalizedBody` instead of `formData.body` (raw editor state). * Ensured consistent rendering for: * First-time Preview * Edit → Preview transitions * AI-generated templates # *Files Modified* * `src/components/templates/TemplateEditor.jsx` # **Key Functions / State** * `normalizeContent` * `extractVariables` * `removeVariable` * `const [normalizedBody, setNormalizedBody] = useState("")` --- # *3. Scrape History – Table UI/UX Refinements* #*Objective* Improve readability, clarity, and interaction of the Scrape History table. # *Changes Implemented* #*Table Structure Improvements* * Added a dedicated *“S.No” (Serial Number)*column with centered header and values. * Center-aligned the *“Name”*column header and content. * Removed redundant source prefixes (e.g., `maps search:`) from the Name column; the Source column now solely represents origin. #*Row Interactivity & Visual Feedback* * Made the **entire table row clickable** for expand/collapse. * Added a **rotating chevron icon**: * Positioned at the start of the row * Rotates 90° on expansion * Styled expanded detail rows with: * Left border * Indentation for visual hierarchy #*Header & Detail Enhancements* * Updated all table headers to be: * Bold * Black * Center-aligned (where applicable) * Added **“Search Query”** field in expanded details to provide full job context. # *Files Modified* * `src/components/leads/scraper/ScrapeHistoryTable.jsx` * `server/index.js` (rate limit adjustment) --- # *Verification & Testing* * Verified campaign completion status and time estimation accuracy. * Confirmed manual campaign emails persist across edits. * Verified variable count updates correctly on add/remove actions. * Confirmed variables with inconsistent spacing are detected and managed correctly. * Validated Preview renders correctly on first load and across all transitions. * Confirmed Scrape History rows expand/collapse smoothly with correct visuals. * Verified table readability and header alignment improvements. --- # *Outcome* * Improved user confidence through clear campaign status and timing feedback. * Eliminated data loss for manually entered campaign leads. * Stabilized Email Template preview rendering across all flows. * Enhanced table usability, clarity, and interaction in Scrape History.