tyler/route-commerce
1
0
Fork 1
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

Fix colors in Abandoned Cart Recovery and Welcome Sequence dashboards

Browse Source 
- Changed from dark theme (zinc-900) to admin light theme (white bg)
- Updated status badges to use light backgrounds instead of dark
- Changed all text colors to use admin CSS variables
- Fixed buttons and interactive elements to use admin accent color
- Modal now uses white background with proper border styling
This commit is contained in:
default
2026-06-02 04:19:34 +00:00
parent f72cfad5f3
commit 184dd2608b
2 changed files with 82 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/admin/AbandonedCartDashboard.tsx
+52 -52
View File
@@ -5,11 +5,11 @@ import { getAbandonedCarts, manuallyCloseAbandonedCart, resendAbandonedCartEmail
type Props = { brandId: string };
const STATUS_LABELS: Record<string, { en: string; es?: string; color: string }> = {
active: { en: "Active", color: "bg-blue-900/40 text-blue-400 border border-blue-800" },
recovered: { en: "Recovered", color: "bg-emerald-900/40 text-emerald-400 border border-emerald-800" },
expired: { en: "Expired", color: "bg-zinc-800 text-zinc-400 border border-zinc-700" },
manually_closed: { en: "Manually Closed", color: "bg-amber-900/40 text-amber-400 border border-amber-800" },
const STATUS_LABELS: Record<string, { en: string; color: string }> = {
active: { en: "Active", color: "bg-blue-50 text-blue-700 border border-blue-200" },
recovered: { en: "Recovered", color: "bg-green-50 text-green-700 border border-green-200" },
expired: { en: "Expired", color: "bg-stone-100 text-stone-500 border border-stone-200" },
manually_closed: { en: "Manually Closed", color: "bg-amber-50 text-amber-700 border border-amber-200" },
};
const STEP_LABELS: Record<number, string> = {
@@ -21,10 +21,10 @@ const STEP_LABELS: Record<number, string> = {
function CartItemRow({ item }: { item: { name: string; quantity: number; unit_price: number } }) {
return (
<tr className="border-t border-zinc-800/60">
<td className="px-4 py-2 text-sm text-zinc-200">{item.name}</td>
<td className="px-4 py-2 text-sm text-zinc-400 text-right">{item.quantity}</td>
<td className="px-4 py-2 text-sm text-zinc-400 text-right">${Number(item.unit_price).toFixed(2)}</td>
<tr className="border-t border-[var(--admin-border)]">
<td className="px-4 py-2 text-sm text-[var(--admin-text-primary)]">{item.name}</td>
<td className="px-4 py-2 text-sm text-[var(--admin-text-muted)] text-right">{item.quantity}</td>
<td className="px-4 py-2 text-sm text-[var(--admin-text-muted)] text-right">${Number(item.unit_price).toFixed(2)}</td>
</tr>
);
}
@@ -82,14 +82,14 @@ export default function AbandonedCartDashboard({ brandId }: Props) {
{/* Stats row */}
<div className="grid grid-cols-4 gap-4">
{[
{ label: "Total", value: stats.total, color: "text-zinc-100" },
{ label: "Active", value: stats.active, color: "text-blue-400" },
{ label: "Recovered", value: stats.recovered, color: "text-emerald-400" },
{ label: "Expired", value: stats.expired, color: "text-zinc-400" },
{ label: "Total", value: stats.total, color: "text-[var(--admin-text-primary)]" },
{ label: "Active", value: stats.active, color: "text-blue-600" },
{ label: "Recovered", value: stats.recovered, color: "text-green-600" },
{ label: "Expired", value: stats.expired, color: "text-[var(--admin-text-muted)]" },
].map(s => (
<div key={s.label} className="bg-zinc-900 border border-zinc-800 rounded-2xl p-4 text-center">
<div key={s.label} className="bg-white border border-[var(--admin-border)] rounded-2xl p-4 text-center">
<p className={`text-2xl font-black ${s.color}`}>{s.value}</p>
<p className="text-xs text-zinc-500 uppercase tracking-widest mt-1">{s.label}</p>
<p className="text-xs text-[var(--admin-text-muted)] uppercase tracking-widest mt-1">{s.label}</p>
</div>
))}
</div>
@@ -97,13 +97,13 @@ export default function AbandonedCartDashboard({ brandId }: Props) {
{/* Filter + refresh + pagination */}
<div className="flex items-center gap-3">
<button onClick={load} disabled={loading}
className="text-xs font-semibold text-violet-400 hover:text-violet-300 transition-colors">
className="text-xs font-semibold text-[var(--admin-accent)] hover:text-[var(--admin-accent)]/80 transition-colors">
{loading ? "Loading..." : "↻ Refresh"}
</button>
<div className="flex gap-2 ml-auto">
{(["all", "active", "recovered"] as const).map(f => (
<button key={f} onClick={() => setFilter(f)}
className={`px-3 py-1.5 rounded-lg text-xs font-semibold transition-all ${filter === f ? "bg-violet-600 text-white" : "bg-zinc-800 text-zinc-400 hover:text-zinc-200"}`}>
className={`px-3 py-1.5 rounded-lg text-xs font-semibold transition-all ${filter === f ? "bg-[var(--admin-accent)] text-white" : "bg-stone-100 text-[var(--admin-text-secondary)] hover:bg-stone-200"}`}>
{f.charAt(0).toUpperCase() + f.slice(1)}
</button>
))}
@@ -111,12 +111,12 @@ export default function AbandonedCartDashboard({ brandId }: Props) {
{totalPages > 1 && (
<div className="flex items-center gap-1 ml-2">
<button onClick={() => setPage(p => Math.max(0, p - 1))} disabled={page === 0}
className="flex h-7 w-7 items-center justify-center rounded border border-zinc-700 text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800 disabled:opacity-30 disabled:cursor-not-allowed transition-colors">
className="flex h-7 w-7 items-center justify-center rounded border border-[var(--admin-border)] text-[var(--admin-text-muted)] hover:text-[var(--admin-text-primary)] hover:bg-stone-50 disabled:opacity-30 disabled:cursor-not-allowed transition-colors">
<svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" /></svg>
</button>
<span className="text-xs text-zinc-500 px-1">{page + 1}/{totalPages}</span>
<span className="text-xs text-[var(--admin-text-muted)] px-1">{page + 1}/{totalPages}</span>
<button onClick={() => setPage(p => Math.min(totalPages - 1, p + 1))} disabled={page >= totalPages - 1}
className="flex h-7 w-7 items-center justify-center rounded border border-zinc-700 text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800 disabled:opacity-30 disabled:cursor-not-allowed transition-colors">
className="flex h-7 w-7 items-center justify-center rounded border border-[var(--admin-border)] text-[var(--admin-text-muted)] hover:text-[var(--admin-text-primary)] hover:bg-stone-50 disabled:opacity-30 disabled:cursor-not-allowed transition-colors">
<svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" /></svg>
</button>
</div>
@@ -125,14 +125,14 @@ export default function AbandonedCartDashboard({ brandId }: Props) {
{/* Carts table */}
{filteredCarts.length === 0 ? (
<div className="bg-zinc-900 border border-zinc-800 rounded-2xl py-16 text-center">
<p className="text-zinc-600 text-sm">No abandoned carts{filter !== "all" ? ` (${filter})` : ""}</p>
<div className="bg-white border border-[var(--admin-border)] rounded-2xl py-16 text-center">
<p className="text-[var(--admin-text-muted)] text-sm">No abandoned carts{filter !== "all" ? ` (${filter})` : ""}</p>
</div>
) : (
<div className="bg-zinc-900 border border-zinc-800 rounded-2xl overflow-hidden">
<div className="bg-white border border-[var(--admin-border)] rounded-2xl overflow-hidden">
<table className="w-full text-sm">
<thead>
<tr className="text-xs text-zinc-500 uppercase tracking-widest border-b border-zinc-800">
<tr className="text-xs text-[var(--admin-text-muted)] uppercase tracking-widest border-b border-[var(--admin-border)]">
<th className="text-left px-5 py-3 font-medium">Contact</th>
<th className="text-left px-5 py-3 font-medium">Items</th>
<th className="text-left px-5 py-3 font-medium">Total</th>
@@ -146,35 +146,35 @@ export default function AbandonedCartDashboard({ brandId }: Props) {
{paginatedCarts.map(c => {
const meta = STATUS_LABELS[c.status] ?? STATUS_LABELS.active;
return (
<tr key={c.id} className="border-t border-zinc-800/60 hover:bg-zinc-800/30 transition-colors">
<tr key={c.id} className="border-t border-[var(--admin-border)] hover:bg-stone-50 transition-colors">
<td className="px-5 py-3.5">
<div>
<p className="text-zinc-200 font-medium text-sm">{c.contact_name ?? "—"}</p>
<p className="text-zinc-500 text-xs">{c.contact_email}</p>
<p className="text-[var(--admin-text-primary)] font-medium text-sm">{c.contact_name ?? "—"}</p>
<p className="text-[var(--admin-text-muted)] text-xs">{c.contact_email}</p>
</div>
</td>
<td className="px-5 py-3.5 text-zinc-400 text-xs">{c.cart_snapshot.item_count} items</td>
<td className="px-5 py-3.5 text-zinc-200 font-semibold text-sm">${Number(c.cart_snapshot.subtotal).toFixed(2)}</td>
<td className="px-5 py-3.5 text-[var(--admin-text-muted)] text-xs">{c.cart_snapshot.item_count} items</td>
<td className="px-5 py-3.5 text-[var(--admin-text-primary)] font-semibold text-sm">${Number(c.cart_snapshot.subtotal).toFixed(2)}</td>
<td className="px-5 py-3.5">
<span className="text-xs text-zinc-500">{STEP_LABELS[c.sequence_step] ?? c.sequence_step}</span>
<span className="text-xs text-[var(--admin-text-muted)]">{STEP_LABELS[c.sequence_step] ?? c.sequence_step}</span>
</td>
<td className="px-5 py-3.5">
<span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold ${meta.color}`}>
{meta.en}
</span>
</td>
<td className="px-5 py-3.5 text-zinc-500 text-xs">{new Date(c.created_at).toLocaleDateString()}</td>
<td className="px-5 py-3.5 text-[var(--admin-text-muted)] text-xs">{new Date(c.created_at).toLocaleDateString()}</td>
<td className="px-5 py-3.5 text-right">
<div className="flex items-center justify-end gap-2">
<button onClick={() => setSelectedCart(c)}
className="text-xs text-zinc-400 hover:text-zinc-200 px-2 py-1 rounded-lg hover:bg-zinc-800 transition-all">View</button>
className="text-xs text-[var(--admin-text-muted)] hover:text-[var(--admin-text-primary)] px-2 py-1 rounded-lg hover:bg-stone-100 transition-all">View</button>
{c.status === "active" && (
<button onClick={() => handleClose(c.id)} disabled={closing}
className="text-xs text-amber-400 hover:text-amber-300 px-2 py-1 rounded-lg hover:bg-amber-900/20 transition-all">Close</button>
className="text-xs text-amber-600 hover:text-amber-700 px-2 py-1 rounded-lg hover:bg-amber-50 transition-all">Close</button>
)}
{c.status === "active" && (
<button onClick={() => handleResend(c.id)} disabled={resending === c.id}
className="text-xs text-violet-400 hover:text-violet-300 px-2 py-1 rounded-lg hover:bg-violet-900/20 transition-all">
className="text-xs text-[var(--admin-accent)] hover:text-[var(--admin-accent)]/80 px-2 py-1 rounded-lg hover:bg-stone-100 transition-all">
{resending === c.id ? "..." : "Resend"}
</button>
)}
@@ -190,34 +190,34 @@ export default function AbandonedCartDashboard({ brandId }: Props) {
{/* Cart detail modal */}
{cart && (
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/40 backdrop-blur-sm"
onClick={() => setSelectedCart(null)}>
<div className="bg-zinc-900 border border-zinc-700 rounded-2xl w-full max-w-lg shadow-2xl"
<div className="bg-white border border-[var(--admin-border)] rounded-2xl w-full max-w-lg shadow-xl"
onClick={e => e.stopPropagation()}>
<div className="px-6 py-4 border-b border-zinc-800 flex items-center justify-between">
<div className="px-6 py-4 border-b border-[var(--admin-border)] flex items-center justify-between">
<div>
<h3 className="text-lg font-bold text-zinc-100">Abandoned Cart</h3>
<p className="text-xs text-zinc-500">{cart.contact_email}</p>
<h3 className="text-lg font-bold text-[var(--admin-text-primary)]">Abandoned Cart</h3>
<p className="text-xs text-[var(--admin-text-muted)]">{cart.contact_email}</p>
</div>
<button onClick={() => setSelectedCart(null)} className="text-zinc-500 hover:text-zinc-200 text-xl leading-none">&times;</button>
<button onClick={() => setSelectedCart(null)} className="text-[var(--admin-text-muted)] hover:text-[var(--admin-text-primary)] text-xl leading-none">&times;</button>
</div>
<div className="p-6 space-y-4">
<div className="flex items-start gap-3 bg-zinc-800/50 rounded-xl p-3">
<div className="flex items-start gap-3 bg-stone-50 rounded-xl p-3">
<span className={`inline-flex items-center rounded-full px-2 py-0.5 text-xs font-semibold ${STATUS_LABELS[cart.status]?.color ?? ""}`}>
{STATUS_LABELS[cart.status]?.en ?? cart.status}
</span>
<div className="flex-1">
<p className="text-sm text-zinc-200 font-medium">{cart.contact_name ?? "—"}</p>
<p className="text-xs text-zinc-500">{cart.contact_email}</p>
<p className="text-xs text-zinc-600 mt-1">Step: {STEP_LABELS[cart.sequence_step] ?? cart.sequence_step}</p>
<p className="text-sm text-[var(--admin-text-primary)] font-medium">{cart.contact_name ?? "—"}</p>
<p className="text-xs text-[var(--admin-text-muted)]">{cart.contact_email}</p>
<p className="text-xs text-[var(--admin-text-muted)] mt-1">Step: {STEP_LABELS[cart.sequence_step] ?? cart.sequence_step}</p>
</div>
</div>
<div>
<p className="text-xs font-semibold uppercase tracking-widest text-zinc-500 mb-2">Cart Items</p>
<p className="text-xs font-semibold uppercase tracking-widest text-[var(--admin-text-muted)] mb-2">Cart Items</p>
<table className="w-full text-sm">
<thead>
<tr className="text-xs text-zinc-600 border-b border-zinc-800">
<tr className="text-xs text-[var(--admin-text-muted)] border-b border-[var(--admin-border)]">
<th className="text-left pb-2 font-medium">Item</th>
<th className="text-right pb-2 font-medium">Qty</th>
<th className="text-right pb-2 font-medium">Price</th>
@@ -229,19 +229,19 @@ export default function AbandonedCartDashboard({ brandId }: Props) {
))}
</tbody>
<tfoot>
<tr className="border-t border-zinc-700">
<td className="pt-2 text-zinc-200 font-semibold" colSpan={2}>Total</td>
<td className="pt-2 text-zinc-200 font-bold text-right">${Number(cart.cart_snapshot.subtotal).toFixed(2)}</td>
<tr className="border-t border-[var(--admin-border)]">
<td className="pt-2 text-[var(--admin-text-primary)] font-semibold" colSpan={2}>Total</td>
<td className="pt-2 text-[var(--admin-text-primary)] font-bold text-right">${Number(cart.cart_snapshot.subtotal).toFixed(2)}</td>
</tr>
</tfoot>
</table>
</div>
{cart.last_email_sent_at && (
<p className="text-xs text-zinc-500">Last email sent: {new Date(cart.last_email_sent_at).toLocaleString()}</p>
<p className="text-xs text-[var(--admin-text-muted)]">Last email sent: {new Date(cart.last_email_sent_at).toLocaleString()}</p>
)}
{cart.next_email_at && (
<p className="text-xs text-zinc-500">Next email: {new Date(cart.next_email_at).toLocaleString()}</p>
<p className="text-xs text-[var(--admin-text-muted)]">Next email: {new Date(cart.next_email_at).toLocaleString()}</p>
)}
</div>
</div>
@@ -249,4 +249,4 @@ export default function AbandonedCartDashboard({ brandId }: Props) {
)}
</div>
);
}
}
src/components/admin/WelcomeSequenceDashboard.tsx
+30 -30
View File
@@ -6,10 +6,10 @@ import { getWelcomeSequence, resendWelcomeEmail, type WelcomeSequenceEntry } fro
type Props = { brandId: string };
const STATUS_LABELS: Record<string, { en: string; color: string }> = {
active: { en: "Active", color: "bg-blue-900/40 text-blue-400 border border-blue-800" },
completed: { en: "Completed", color: "bg-emerald-900/40 text-emerald-400 border border-emerald-800" },
unsubscribed: { en: "Unsubscribed", color: "bg-red-900/40 text-red-400 border border-red-800" },
bounced: { en: "Bounced", color: "bg-amber-900/40 text-amber-400 border border-amber-800" },
active: { en: "Active", color: "bg-blue-50 text-blue-700 border border-blue-200" },
completed: { en: "Completed", color: "bg-green-50 text-green-700 border border-green-200" },
unsubscribed: { en: "Unsubscribed", color: "bg-red-50 text-red-700 border border-red-200" },
bounced: { en: "Bounced", color: "bg-amber-50 text-amber-700 border border-amber-200" },
};
const STEP_LABELS: Record<number, string> = {
@@ -62,14 +62,14 @@ export default function WelcomeSequenceDashboard({ brandId }: Props) {
{/* Stats */}
<div className="grid grid-cols-4 gap-4">
{[
{ label: "Total", value: stats.total, color: "text-zinc-100" },
{ label: "Active", value: stats.active, color: "text-blue-400" },
{ label: "Completed", value: stats.completed, color: "text-emerald-400" },
{ label: "Unsubscribed", value: stats.unsubscribed, color: "text-red-400" },
{ label: "Total", value: stats.total, color: "text-[var(--admin-text-primary)]" },
{ label: "Active", value: stats.active, color: "text-blue-600" },
{ label: "Completed", value: stats.completed, color: "text-green-600" },
{ label: "Unsubscribed", value: stats.unsubscribed, color: "text-red-600" },
].map(s => (
<div key={s.label} className="bg-zinc-900 border border-zinc-800 rounded-2xl p-4 text-center">
<div key={s.label} className="bg-white border border-[var(--admin-border)] rounded-2xl p-4 text-center">
<p className={`text-2xl font-black ${s.color}`}>{s.value}</p>
<p className="text-xs text-zinc-500 uppercase tracking-widest mt-1">{s.label}</p>
<p className="text-xs text-[var(--admin-text-muted)] uppercase tracking-widest mt-1">{s.label}</p>
</div>
))}
</div>
@@ -77,13 +77,13 @@ export default function WelcomeSequenceDashboard({ brandId }: Props) {
{/* Filter + refresh + pagination */}
<div className="flex items-center gap-3">
<button onClick={load} disabled={loading}
className="text-xs font-semibold text-violet-400 hover:text-violet-300 transition-colors">
className="text-xs font-semibold text-[var(--admin-accent)] hover:text-[var(--admin-accent)]/80 transition-colors">
{loading ? "Loading..." : "↻ Refresh"}
</button>
<div className="flex gap-2 ml-auto">
{(["all", "active", "completed"] as const).map(f => (
<button key={f} onClick={() => setFilter(f)}
className={`px-3 py-1.5 rounded-lg text-xs font-semibold transition-all ${filter === f ? "bg-violet-600 text-white" : "bg-zinc-800 text-zinc-400 hover:text-zinc-200"}`}>
className={`px-3 py-1.5 rounded-lg text-xs font-semibold transition-all ${filter === f ? "bg-[var(--admin-accent)] text-white" : "bg-stone-100 text-[var(--admin-text-secondary)] hover:bg-stone-200"}`}>
{f.charAt(0).toUpperCase() + f.slice(1)}
</button>
))}
@@ -91,12 +91,12 @@ export default function WelcomeSequenceDashboard({ brandId }: Props) {
{totalPages > 1 && (
<div className="flex items-center gap-1 ml-2">
<button onClick={() => setPage(p => Math.max(0, p - 1))} disabled={page === 0}
className="flex h-7 w-7 items-center justify-center rounded border border-zinc-700 text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800 disabled:opacity-30 disabled:cursor-not-allowed transition-colors">
className="flex h-7 w-7 items-center justify-center rounded border border-[var(--admin-border)] text-[var(--admin-text-muted)] hover:text-[var(--admin-text-primary)] hover:bg-stone-50 disabled:opacity-30 disabled:cursor-not-allowed transition-colors">
<svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M15 19l-7-7 7-7" /></svg>
</button>
<span className="text-xs text-zinc-500 px-1">{page + 1}/{totalPages}</span>
<span className="text-xs text-[var(--admin-text-muted)] px-1">{page + 1}/{totalPages}</span>
<button onClick={() => setPage(p => Math.min(totalPages - 1, p + 1))} disabled={page >= totalPages - 1}
className="flex h-7 w-7 items-center justify-center rounded border border-zinc-700 text-zinc-500 hover:text-zinc-300 hover:bg-zinc-800 disabled:opacity-30 disabled:cursor-not-allowed transition-colors">
className="flex h-7 w-7 items-center justify-center rounded border border-[var(--admin-border)] text-[var(--admin-text-muted)] hover:text-[var(--admin-text-primary)] hover:bg-stone-50 disabled:opacity-30 disabled:cursor-not-allowed transition-colors">
<svg className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}><path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7" /></svg>
</button>
</div>
@@ -105,14 +105,14 @@ export default function WelcomeSequenceDashboard({ brandId }: Props) {
{/* Table */}
{filtered.length === 0 ? (
<div className="bg-zinc-900 border border-zinc-800 rounded-2xl py-16 text-center">
<p className="text-zinc-600 text-sm">No entries{filter !== "all" ? ` (${filter})` : ""}</p>
<div className="bg-white border border-[var(--admin-border)] rounded-2xl py-16 text-center">
<p className="text-[var(--admin-text-muted)] text-sm">No entries{filter !== "all" ? ` (${filter})` : ""}</p>
</div>
) : (
<div className="bg-zinc-900 border border-zinc-800 rounded-2xl overflow-hidden">
<div className="bg-white border border-[var(--admin-border)] rounded-2xl overflow-hidden">
<table className="w-full text-sm">
<thead>
<tr className="text-xs text-zinc-500 uppercase tracking-widest border-b border-zinc-800">
<tr className="text-xs text-[var(--admin-text-muted)] uppercase tracking-widest border-b border-[var(--admin-border)]">
<th className="text-left px-5 py-3 font-medium">Contact</th>
<th className="text-left px-5 py-3 font-medium">Language</th>
<th className="text-left px-5 py-3 font-medium">Step</th>
@@ -124,22 +124,22 @@ export default function WelcomeSequenceDashboard({ brandId }: Props) {
</thead>
<tbody>
{paginatedEntries.map(e => {
const meta = STATUS_LABELS[e.status] ?? { en: e.status, color: "bg-zinc-800 text-zinc-400" };
const meta = STATUS_LABELS[e.status] ?? { en: e.status, color: "bg-stone-100 text-stone-500 border border-stone-200" };
return (
<tr key={e.id} className="border-t border-zinc-800/60 hover:bg-zinc-800/30 transition-colors">
<tr key={e.id} className="border-t border-[var(--admin-border)] hover:bg-stone-50 transition-colors">
<td className="px-5 py-3.5">
<div>
<p className="text-zinc-200 font-medium text-sm">{e.contact_name ?? "—"}</p>
<p className="text-zinc-500 text-xs">{e.contact_email}</p>
<p className="text-[var(--admin-text-primary)] font-medium text-sm">{e.contact_name ?? "—"}</p>
<p className="text-[var(--admin-text-muted)] text-xs">{e.contact_email}</p>
</div>
</td>
<td className="px-5 py-3.5">
<span className="text-xs font-mono text-zinc-400 uppercase">{e.locale}</span>
<span className="text-xs font-mono text-[var(--admin-text-muted)] uppercase">{e.locale}</span>
</td>
<td className="px-5 py-3.5 text-xs text-zinc-400">
<td className="px-5 py-3.5 text-xs text-[var(--admin-text-muted)]">
{STEP_LABELS[e.sequence_step] ?? e.sequence_step}
{e.next_email_at && e.status === "active" && (
<span className="block text-zinc-600 text-[10px]">Next: {new Date(e.next_email_at).toLocaleString()}</span>
<span className="block text-[var(--admin-text-muted)] text-[10px]">Next: {new Date(e.next_email_at).toLocaleString()}</span>
)}
</td>
<td className="px-5 py-3.5">
@@ -147,14 +147,14 @@ export default function WelcomeSequenceDashboard({ brandId }: Props) {
{meta.en}
</span>
</td>
<td className="px-5 py-3.5 text-zinc-500 text-xs">{new Date(e.created_at).toLocaleDateString()}</td>
<td className="px-5 py-3.5 text-zinc-500 text-xs">
<td className="px-5 py-3.5 text-[var(--admin-text-muted)] text-xs">{new Date(e.created_at).toLocaleDateString()}</td>
<td className="px-5 py-3.5 text-[var(--admin-text-muted)] text-xs">
{e.last_email_sent_at ? new Date(e.last_email_sent_at).toLocaleString() : "—"}
</td>
<td className="px-5 py-3.5 text-right">
{e.status !== "unsubscribed" && (
<button onClick={() => handleResend(e.id)} disabled={resending === e.id}
className="text-xs text-violet-400 hover:text-violet-300 px-2 py-1 rounded-lg hover:bg-violet-900/20 transition-all">
className="text-xs text-[var(--admin-accent)] hover:text-[var(--admin-accent)]/80 px-2 py-1 rounded-lg hover:bg-stone-100 transition-all">
{resending === e.id ? "..." : "Resend"}
</button>
)}
@@ -168,4 +168,4 @@ export default function WelcomeSequenceDashboard({ brandId }: Props) {
)}
</div>
);
}
}