From 9375c598ee62401acffe172807928fe573771f8d Mon Sep 17 00:00:00 2001
From: Dries Augustyns <inbox@driaug.com>
Date: Wed, 10 Dec 2025 19:52:09 +0100
Subject: [PATCH] chore: add indicator about campaign recipients recalculation

---
 apps/web/src/pages/campaigns/[id].tsx  | 33 +++++++++++++++++++-------
 apps/web/src/pages/campaigns/index.tsx | 15 ++++++++++--
 2 files changed, 38 insertions(+), 10 deletions(-)

diff --git a/apps/web/src/pages/campaigns/[id].tsx b/apps/web/src/pages/campaigns/[id].tsx
index bfe7930..c5d0215 100644
--- a/apps/web/src/pages/campaigns/[id].tsx
+++ b/apps/web/src/pages/campaigns/[id].tsx
@@ -41,6 +41,7 @@ import {
   ArrowLeft,
   Calendar,
   ChevronDown,
+  Info,
   Mail,
   MousePointer,
   Save,
@@ -550,13 +551,19 @@ export default function CampaignDetailsPage() {
 
                 {/* Show recipient count */}
                 {draftRecipientCount > 0 && (
-                  <div className="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg">
+                  <div className="mt-4 p-3 bg-blue-50 border border-blue-200 rounded-lg space-y-2">
                     <div className="flex items-center gap-2">
                       <Users className="h-4 w-4 text-blue-600" />
                       <span className="text-sm font-medium text-blue-900">
                         {draftRecipientCount.toLocaleString()} recipients
                       </span>
                     </div>
+                    <div className="flex items-start gap-2">
+                      <Info className="h-3.5 w-3.5 text-blue-600 mt-0.5 flex-shrink-0" />
+                      <p className="text-xs text-blue-800">
+                        This count will be recalculated right before sending to ensure accuracy. The final number may differ if contacts subscribe, unsubscribe, or segment membership changes.
+                      </p>
+                    </div>
                   </div>
                 )}
               </CardContent>
@@ -970,13 +977,23 @@ export default function CampaignDetailsPage() {
                   <p className="text-xs font-medium text-neutral-500 uppercase tracking-wide mb-2">Scheduled For</p>
                   <div className="flex items-start gap-2">
                     <Calendar className="h-4 w-4 text-neutral-400 mt-0.5" />
-                    <div>
-                      <p className="text-sm font-medium text-neutral-900">
-                        {formatFullDateTime(new Date(c.scheduledFor))}
-                      </p>
-                      <p className="text-xs text-neutral-500 mt-1">
-                        UTC: {formatUTCDateTime(new Date(c.scheduledFor))}
-                      </p>
+                    <div className="space-y-2">
+                      <div>
+                        <p className="text-sm font-medium text-neutral-900">
+                          {formatFullDateTime(new Date(c.scheduledFor))}
+                        </p>
+                        <p className="text-xs text-neutral-500 mt-1">
+                          UTC: {formatUTCDateTime(new Date(c.scheduledFor))}
+                        </p>
+                      </div>
+                      {c.status === CampaignStatus.SCHEDULED && (
+                        <div className="flex items-start gap-1.5 p-2 bg-blue-50 border border-blue-200 rounded">
+                          <Info className="h-3 w-3 text-blue-600 mt-0.5 flex-shrink-0" />
+                          <p className="text-xs text-blue-800">
+                            Recipient count will be recalculated at send time
+                          </p>
+                        </div>
+                      )}
                     </div>
                   </div>
                 </div>
diff --git a/apps/web/src/pages/campaigns/index.tsx b/apps/web/src/pages/campaigns/index.tsx
index c39bd3a..b4fee82 100644
--- a/apps/web/src/pages/campaigns/index.tsx
+++ b/apps/web/src/pages/campaigns/index.tsx
@@ -17,7 +17,7 @@ import type {Campaign} from '@plunk/db';
 import {CampaignStatus} from '@plunk/db';
 import {DashboardLayout} from '../../components/DashboardLayout';
 import {network} from '../../lib/network';
-import {Calendar, Copy, Mail, Plus, Trash2, Users} from 'lucide-react';
+import {Calendar, Copy, Info, Mail, Plus, Trash2, Users} from 'lucide-react';
 import {NextSeo} from 'next-seo';
 import Link from 'next/link';
 import {useState} from 'react';
@@ -216,11 +216,22 @@ export default function CampaignsPage() {
                         <div className="flex items-center gap-2 mb-1">
                           <Users className="h-3.5 w-3.5 text-blue-600" />
                           <span className="text-xs font-medium text-blue-900">Recipients</span>
+                          {(campaign.status === 'DRAFT' || campaign.status === 'SCHEDULED') && (
+                            <div className="group relative">
+                              <Info className="h-3 w-3 text-blue-600 cursor-help" />
+                              <div className="hidden group-hover:block absolute z-10 w-48 p-2 bg-neutral-900 text-white text-xs rounded shadow-lg bottom-full left-1/2 transform -translate-x-1/2 mb-1">
+                                This count will be recalculated before sending
+                              </div>
+                            </div>
+                          )}
                         </div>
                         <p className="text-lg font-bold text-blue-900">{campaign.totalRecipients.toLocaleString()}</p>
-                        {campaign.totalRecipients > 0 && (
+                        {campaign.totalRecipients > 0 && campaign.status !== 'DRAFT' && (
                           <p className="text-xs text-blue-700 mt-1">{deliveryProgress.toFixed(0)}% sent</p>
                         )}
+                        {campaign.status === 'DRAFT' && (
+                          <p className="text-xs text-blue-600 mt-1">Estimated</p>
+                        )}
                       </div>
 
                       {/* Open Rate */}