fix(invoices): badge held (unsent, no send date) invoices as "Draft"

The earlier change only relabeled is_monthly_draft rows. But a per-event
invoice created from hours is status 'scheduled' with scheduled_send_at = NULL
and is_monthly_draft = false — it never auto-ships (the scheduler only picks
rows with scheduled_send_at <= now), yet it still read "Scheduled" on the
customer panel + lists.

Add a shared isDraftInvoice() helper (scheduled && no send date, or a
monthly/manual accumulator) and use it for the badge in the Bills list, the
invoice detail header, and the customer profile's invoice panel. A scheduled
invoice WITH a future send date keeps "Scheduled".

frontend/src/components/admin/CustomerCrmPanels.tsx

@@ -19,7 +19,7 @@ import { FileText, Plus, Receipt, ScrollText } from 'lucide-react';
 import { Card, Button, Loading } from '../common';
 import { useFeatureFlags } from '../../contexts/FeatureFlagsContext';
 import { quotesService } from '../../services/quotes.service';
-import { billsService } from '../../services/bills.service';
+import { billsService, isDraftInvoice } from '../../services/bills.service';
 import { contractsService } from '../../services/contracts.service';
 import { formatMoney } from './LineItemsTable';
 import { useLocalizedDate } from '../../hooks/useLocalizedDate';
@@ -204,14 +204,20 @@ const InvoicesPanel: React.FC<Props> = ({ customerAccountId }) => {
                 </span>
               </div>
               <span className="text-sm tabular-nums">{formatMoney(Number(inv.totalAmountMinor) / 100, inv.currency)}</span>
-              <span className={`px-2 py-0.5 rounded text-xs font-medium ${
-                inv.status === 'paid' ? 'bg-green-100 text-green-800'
-                  : inv.status === 'overdue' ? 'bg-red-100 text-red-800'
-                  : inv.status === 'sent' ? 'bg-blue-100 text-blue-800'
-                  : inv.status === 'cancelled' ? 'bg-neutral-200 text-neutral-600'
-                  : inv.status === 'skipped' ? 'bg-neutral-100 text-neutral-500 italic'
-                  : 'bg-amber-100 text-amber-800'
-              }`}>{t(`bills.status.${inv.status}`, inv.status)}</span>
+              {isDraftInvoice(inv) ? (
+                <span className="px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900/40 dark:text-purple-200">
+                  {t('bills.status.draft', 'Draft')}
+                </span>
+              ) : (
+                <span className={`px-2 py-0.5 rounded text-xs font-medium ${
+                  inv.status === 'paid' ? 'bg-green-100 text-green-800'
+                    : inv.status === 'overdue' ? 'bg-red-100 text-red-800'
+                    : inv.status === 'sent' ? 'bg-blue-100 text-blue-800'
+                    : inv.status === 'cancelled' ? 'bg-neutral-200 text-neutral-600'
+                    : inv.status === 'skipped' ? 'bg-neutral-100 text-neutral-500 italic'
+                    : 'bg-amber-100 text-amber-800'
+                }`}>{t(`bills.status.${inv.status}`, inv.status)}</span>
+              )}
             </li>
           ))}
         </ul>

frontend/src/pages/admin/bills/BillDetailPage.tsx

@@ -10,7 +10,7 @@ import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { ArrowLeft, Eye, Send, CheckCircle, BellRing, XCircle, Truck, Edit2, RefreshCw } from 'lucide-react';
 import { Button, Card, Loading, Input, LocalizedDateInput } from '../../../components/common';
 import { DocumentLineageCard } from '../../../components/admin/DocumentLineageCard';
-import { billsService } from '../../../services/bills.service';
+import { billsService, isDraftInvoice } from '../../../services/bills.service';
 import { formatMoney } from '../../../components/admin/LineItemsTable';
 import { useLocalizedDate } from '../../../hooks/useLocalizedDate';
 import { toast } from 'react-toastify';
@@ -264,10 +264,10 @@ export const BillDetailPage: React.FC = () => {
               </span>
             )}
             <span className="ml-2 text-xs font-medium px-2 py-0.5 rounded bg-neutral-100 text-neutral-700">
-              {/* A running monthly/manual accumulator carries status
-                  'scheduled' but never auto-sends on manual cadence —
-                  read it as "Draft", matching the Bills list. */}
-              {inv.isMonthlyDraft ? t('bills.status.draft', 'Draft') : t(`bills.status.${inv.status}`, inv.status)}
+              {/* Held invoice ('scheduled' with no send date, incl. the
+                  monthly/manual accumulator) never auto-ships — read it as
+                  "Draft", matching the Bills list. */}
+              {isDraftInvoice(inv) ? t('bills.status.draft', 'Draft') : t(`bills.status.${inv.status}`, inv.status)}
             </span>
           </h2>
           <p className="text-sm text-neutral-600 dark:text-neutral-400">

frontend/src/pages/admin/bills/BillsListPage.tsx

@@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { Link, useNavigate } from 'react-router-dom';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import { Plus, Search, Upload, X } from 'lucide-react';
-import { billsService, type InvoiceStatus, type InvoiceSort } from '../../../services/bills.service';
+import { billsService, isDraftInvoice, type InvoiceStatus, type InvoiceSort } from '../../../services/bills.service';
 import { Button, Card, Input, Loading, LocalizedDateInput, SortableHeader, useColumnSort, type SortColumnMap } from '../../../components/common';
 import { formatMoney } from '../../../components/admin/LineItemsTable';
 import { customerAdminService } from '../../../services/customerAdmin.service';
@@ -189,10 +189,10 @@ export const BillsListPage: React.FC = () => {
                           {formatMoney(Number(inv.totalAmountMinor) / 100, inv.currency)}
                         </td>
                         <td className="px-3 py-2">
-                          {inv.isMonthlyDraft ? (
-                            // Running accumulator draft (manual/monthly). It carries
-                            // status 'scheduled' but never auto-sends on manual cadence,
-                            // so badge it honestly as "Draft" rather than "Scheduled".
+                          {isDraftInvoice(inv) ? (
+                            // Held invoice: 'scheduled' with no send date (incl. the
+                            // monthly/manual accumulator) never auto-ships, so badge it
+                            // honestly as "Draft" rather than "Scheduled".
                             <span className="px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800 dark:bg-purple-900/40 dark:text-purple-200">
                               {t('bills.status.draft', 'Draft')}
                             </span>

frontend/src/services/bills.service.ts

@@ -98,6 +98,20 @@ export interface InvoiceSummary {
   isMonthlyDraft?: boolean;
 }
 
+/**
+ * A "scheduled" invoice with no send date is HELD — the scheduler only
+ * picks up rows whose `scheduled_send_at <= now`, so a null send date
+ * means it never auto-ships and is waiting on the admin (Send now /
+ * Trigger invoice now). Those, plus monthly/manual accumulators, read as
+ * "Draft" everywhere instead of the misleading "Scheduled". A scheduled
+ * invoice WITH a future send date is genuinely scheduled and keeps that
+ * label.
+ */
+export function isDraftInvoice(inv: Pick<InvoiceSummary, 'status' | 'scheduledSendAt' | 'isMonthlyDraft'>): boolean {
+  if (inv.isMonthlyDraft) return true;
+  return inv.status === 'scheduled' && !inv.scheduledSendAt;
+}
+
 export interface InvoiceDetail extends InvoiceSummary {
   netAmountMinor: number;
   vatRate: number | null;